@cordwainer/cw-elements 1.3.0-alpha.2 → 1.3.0-alpha.4

package/dist/custom-elements.json

@@ -3012,148 +3012,54 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/color-picker/color-picker.js",
+      "path": "components/checkbox/checkbox.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "CwColorPicker",
-          "cssProperties": [
-            {
-              "description": "The width of the color grid.",
-              "name": "--grid-width"
-            },
-            {
-              "description": "The height of the color grid.",
-              "name": "--grid-height"
-            },
-            {
-              "description": "The size of the color grid's handle.",
-              "name": "--grid-handle-size"
-            },
-            {
-              "description": "The height of the hue and alpha sliders.",
-              "name": "--slider-height"
-            },
-            {
-              "description": "The diameter of the slider's handle.",
-              "name": "--slider-handle-size"
-            },
-            {
-              "description": "The size of each predefined color swatch.",
-              "name": "--swatch-size"
-            }
-          ],
+          "name": "CwCheckbox",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The color picker's dropdown trigger.",
-              "name": "trigger"
-            },
-            {
-              "description": "The container that holds the swatches.",
-              "name": "swatches"
-            },
-            {
-              "description": "Each individual swatch.",
-              "name": "swatch"
-            },
-            {
-              "description": "The color grid.",
-              "name": "grid"
-            },
-            {
-              "description": "The color grid's handle.",
-              "name": "grid-handle"
-            },
-            {
-              "description": "Hue and opacity sliders.",
-              "name": "slider"
-            },
-            {
-              "description": "Hue and opacity slider handles.",
-              "name": "slider-handle"
-            },
-            {
-              "description": "The hue slider.",
-              "name": "hue-slider"
-            },
-            {
-              "description": "The hue slider's handle.",
-              "name": "hue-slider-handle"
-            },
-            {
-              "description": "The opacity slider.",
-              "name": "opacity-slider"
-            },
-            {
-              "description": "The opacity slider's handle.",
-              "name": "opacity-slider-handle"
-            },
-            {
-              "description": "The preview color.",
-              "name": "preview"
-            },
-            {
-              "description": "The text input.",
-              "name": "input"
-            },
-            {
-              "description": "The eye dropper button.",
-              "name": "eye-dropper-button"
-            },
-            {
-              "description": "The eye dropper button's exported `button` part.",
-              "name": "eye-dropper-button__base"
-            },
-            {
-              "description": "The eye dropper button's exported `prefix` part.",
-              "name": "eye-dropper-button__prefix"
-            },
-            {
-              "description": "The eye dropper button's exported `label` part.",
-              "name": "eye-dropper-button__label"
-            },
-            {
-              "description": "The eye dropper button's exported `suffix` part.",
-              "name": "eye-dropper-button__suffix"
-            },
-            {
-              "description": "The eye dropper button's exported `caret` part.",
-              "name": "eye-dropper-button__caret"
+              "description": "The square container that wraps the checkbox's checked state.",
+              "name": "control"
             },
             {
-              "description": "The format button.",
-              "name": "format-button"
+              "description": "Matches the control part when the checkbox is checked.",
+              "name": "control--checked"
             },
             {
-              "description": "The format button's exported `button` part.",
-              "name": "format-button__base"
+              "description": "Matches the control part when the checkbox is indeterminate.",
+              "name": "control--indeterminate"
             },
             {
-              "description": "The format button's exported `prefix` part.",
-              "name": "format-button__prefix"
+              "description": "The checked icon, an `<cw-icon>` element.",
+              "name": "checked-icon"
             },
             {
-              "description": "The format button's exported `label` part.",
-              "name": "format-button__label"
+              "description": "The indeterminate icon, an `<cw-icon>` element.",
+              "name": "indeterminate-icon"
             },
             {
-              "description": "The format button's exported `suffix` part.",
-              "name": "format-button__suffix"
+              "description": "The container that wraps the checkbox's label.",
+              "name": "label"
             },
             {
-              "description": "The format button's exported `caret` part.",
-              "name": "format-button__caret"
+              "description": "The help text's wrapper.",
+              "name": "form-control-help-text"
             }
           ],
           "slots": [
             {
-              "description": "The color picker's form label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
+              "description": "The checkbox's label.",
+              "name": ""
+            },
+            {
+              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
             }
           ],
           "members": [
@@ -3164,1124 +3070,1162 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'cw-button-group': CwButtonGroup, 'cw-button': CwButton, 'cw-dropdown': CwDropdown, 'cw-icon': CwIcon, 'cw-input': CwInput, 'cw-visually-hidden': CwVisuallyHidden }"
+              "default": "{ 'cw-icon': CwIcon }"
             },
             {
               "kind": "field",
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "isSafeValue",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "default": "new FormControlController(this, { value: (control: CwCheckbox) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: CwCheckbox) => control.defaultChecked, setValue: (control: CwCheckbox, checked: boolean) => (control.checked = checked) })"
             },
             {
               "kind": "field",
-              "name": "localize",
+              "name": "hasSlotController",
               "privacy": "private",
               "readonly": true,
-              "default": "new LocalizeController(this)"
+              "default": "new HasSlotController(this, 'help-text')"
             },
             {
               "kind": "field",
-              "name": "base",
+              "name": "input",
               "type": {
-                "text": "HTMLElement"
+                "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "hasFocus",
               "type": {
-                "text": "CwInput"
-              }
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "dropdown",
+              "name": "title",
               "type": {
-                "text": "CwDropdown"
-              }
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
             },
             {
               "kind": "field",
-              "name": "previewButton",
+              "name": "name",
               "type": {
-                "text": "HTMLButtonElement"
-              }
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "trigger",
+              "name": "value",
               "type": {
-                "text": "HTMLButtonElement"
-              }
+                "text": "string"
+              },
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "'medium'",
+              "description": "The checkbox's size.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isDraggingGridHandle",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Disables the checkbox.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isEmpty",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Draws the checkbox in a checked state.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "inputValue",
+              "name": "indeterminate",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "attribute": "indeterminate",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hue",
+              "name": "defaultChecked",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "0"
+              "default": "false",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
               "kind": "field",
-              "name": "saturation",
+              "name": "form",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "100"
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "brightness",
+              "name": "required",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "100"
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "attribute": "required",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "alpha",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "100"
-            },
-            {
-              "kind": "field",
-              "name": "value",
+              "name": "helpText",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
-              "attribute": "value"
+              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
             },
             {
               "kind": "field",
-              "name": "defaultValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
-              "attribute": "label"
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "format",
-              "type": {
-                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
-              },
-              "default": "'hex'",
-              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
-              "attribute": "format"
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Renders the color picker inline rather than in a dropdown.",
-              "attribute": "inline",
-              "reflects": true
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleStateChange"
+            },
+            {
+              "kind": "method",
+              "name": "click",
+              "description": "Simulates a click on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the checkbox."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
               },
-              "default": "'medium'",
-              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
-              "attribute": "size",
-              "reflects": true
+              "description": "Gets the associated form, if one exists."
             },
             {
-              "kind": "field",
-              "name": "noFormatToggle",
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+            },
+            {
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the checkbox loses focus.",
+              "name": "cw-blur",
+              "reactName": "onCwBlur",
+              "eventName": "CwBlurEvent"
+            },
+            {
+              "description": "Emitted when the checked state changes.",
+              "name": "cw-change",
+              "reactName": "onCwChange",
+              "eventName": "CwChangeEvent"
+            },
+            {
+              "description": "Emitted when the checkbox gains focus.",
+              "name": "cw-focus",
+              "reactName": "onCwFocus",
+              "eventName": "CwFocusEvent"
+            },
+            {
+              "description": "Emitted when the checkbox receives input.",
+              "name": "cw-input",
+              "reactName": "onCwInput",
+              "eventName": "CwInputEvent"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "cw-invalid",
+              "reactName": "onCwInvalid",
+              "eventName": "CwInvalidEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Removes the button that lets users toggle between format.",
-              "attribute": "no-format-toggle"
+              "default": "''",
+              "fieldName": "title"
             },
             {
-              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The name of the form control, submitted as a name/value pair with form data.",
-              "attribute": "name"
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables the color picker.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "hoist",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "attribute": "hoist"
+              "default": "'medium'",
+              "description": "The checkbox's size.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "opacity",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
-              "attribute": "opacity"
+              "description": "Disables the checkbox.",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "uppercase",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
-              "attribute": "uppercase"
+              "description": "Draws the checkbox in a checked state.",
+              "fieldName": "checked"
             },
             {
-              "kind": "field",
-              "name": "swatches",
+              "name": "indeterminate",
               "type": {
-                "text": "string | string[]"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
-              "attribute": "swatches"
+              "default": "false",
+              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
+              "fieldName": "indeterminate"
             },
             {
-              "kind": "field",
               "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
+              "fieldName": "form"
             },
             {
-              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the color picker a required field.",
-              "attribute": "required",
-              "reflects": true
+              "description": "Makes the checkbox a required field.",
+              "fieldName": "required"
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            }
+          ],
+          "superclass": {
+            "name": "CwElement",
+            "module": "/src/internal/cw-element.js"
+          },
+          "summary": "Checkboxes allow the user to toggle an option on or off.",
+          "tagNameWithoutPrefix": "checkbox",
+          "tagName": "cw-checkbox",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://cordwainer.dev/components/checkbox\n * @status stable\n * @since 1.0\n *\n * @dependency cw-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event cw-blur - Emitted when the checkbox loses focus.\n * @event cw-change - Emitted when the checked state changes.\n * @event cw-focus - Emitted when the checkbox gains focus.\n * @event cw-input - Emitted when the checkbox receives input.\n * @event cw-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<cw-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<cw-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */",
+          "documentation": "https://cordwainer.dev/components/checkbox",
+          "status": "stable",
+          "since": "1.0",
+          "dependencies": [
+            "cw-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CwCheckbox",
+            "module": "components/checkbox/checkbox.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/color-picker/color-picker.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CwColorPicker",
+          "cssProperties": [
+            {
+              "description": "The width of the color grid.",
+              "name": "--grid-width"
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "description": "The height of the color grid.",
+              "name": "--grid-height"
             },
             {
-              "kind": "method",
-              "name": "handleCopy",
-              "privacy": "private"
+              "description": "The size of the color grid's handle.",
+              "name": "--grid-handle-size"
             },
             {
-              "kind": "field",
-              "name": "handleFocusIn",
-              "privacy": "private"
+              "description": "The height of the hue and alpha sliders.",
+              "name": "--slider-height"
             },
             {
-              "kind": "field",
-              "name": "handleFocusOut",
-              "privacy": "private"
+              "description": "The diameter of the slider's handle.",
+              "name": "--slider-handle-size"
             },
             {
-              "kind": "method",
-              "name": "handleFormatToggle",
-              "privacy": "private"
+              "description": "The size of each predefined color swatch.",
+              "name": "--swatch-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "kind": "method",
-              "name": "handleAlphaDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "description": "The color picker's dropdown trigger.",
+              "name": "trigger"
             },
             {
-              "kind": "method",
-              "name": "handleHueDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "description": "The container that holds the swatches.",
+              "name": "swatches"
             },
             {
-              "kind": "method",
-              "name": "handleGridDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "description": "Each individual swatch.",
+              "name": "swatch"
             },
             {
-              "kind": "method",
-              "name": "handleAlphaKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The color grid.",
+              "name": "grid"
             },
             {
-              "kind": "method",
-              "name": "handleHueKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The color grid's handle.",
+              "name": "grid-handle"
             },
             {
-              "kind": "method",
-              "name": "handleGridKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "Hue and opacity sliders.",
+              "name": "slider"
             },
             {
-              "kind": "method",
-              "name": "handleInputChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CwChangeEvent"
-                  }
-                }
-              ]
+              "description": "Hue and opacity slider handles.",
+              "name": "slider-handle"
             },
             {
-              "kind": "method",
-              "name": "handleInputInput",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CwInputEvent"
-                  }
-                }
-              ]
+              "description": "The hue slider.",
+              "name": "hue-slider"
             },
             {
-              "kind": "method",
-              "name": "handleInputKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The hue slider's handle.",
+              "name": "hue-slider-handle"
             },
             {
-              "kind": "method",
-              "name": "handleInputInvalid",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "description": "The opacity slider.",
+              "name": "opacity-slider"
             },
             {
-              "kind": "method",
-              "name": "handleTouchMove",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "TouchEvent"
-                  }
-                }
-              ]
+              "description": "The opacity slider's handle.",
+              "name": "opacity-slider-handle"
             },
             {
-              "kind": "method",
-              "name": "parseColor",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "colorString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The preview color.",
+              "name": "preview"
             },
             {
-              "kind": "method",
-              "name": "setColor",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "colorString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The text input.",
+              "name": "input"
             },
             {
-              "kind": "method",
-              "name": "setLetterCase",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "string",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The eye dropper button.",
+              "name": "eye-dropper-button"
             },
             {
-              "kind": "method",
-              "name": "syncValues",
-              "privacy": "private"
+              "description": "The eye dropper button's exported `button` part.",
+              "name": "eye-dropper-button__base"
+            },
+            {
+              "description": "The eye dropper button's exported `prefix` part.",
+              "name": "eye-dropper-button__prefix"
+            },
+            {
+              "description": "The eye dropper button's exported `label` part.",
+              "name": "eye-dropper-button__label"
+            },
+            {
+              "description": "The eye dropper button's exported `suffix` part.",
+              "name": "eye-dropper-button__suffix"
+            },
+            {
+              "description": "The eye dropper button's exported `caret` part.",
+              "name": "eye-dropper-button__caret"
+            },
+            {
+              "description": "The format button.",
+              "name": "format-button"
+            },
+            {
+              "description": "The format button's exported `button` part.",
+              "name": "format-button__base"
+            },
+            {
+              "description": "The format button's exported `prefix` part.",
+              "name": "format-button__prefix"
             },
             {
-              "kind": "method",
-              "name": "handleAfterHide",
-              "privacy": "private"
+              "description": "The format button's exported `label` part.",
+              "name": "format-button__label"
             },
             {
-              "kind": "method",
-              "name": "handleEyeDropper",
-              "privacy": "private"
+              "description": "The format button's exported `suffix` part.",
+              "name": "format-button__suffix"
             },
             {
-              "kind": "method",
-              "name": "selectSwatch",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "color",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The format button's exported `caret` part.",
+              "name": "format-button__caret"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The color picker's form label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'cw-button-group': CwButtonGroup, 'cw-button': CwButton, 'cw-dropdown': CwDropdown, 'cw-icon': CwIcon, 'cw-input': CwInput, 'cw-visually-hidden': CwVisuallyHidden }"
             },
             {
-              "kind": "method",
-              "name": "getHexString",
+              "kind": "field",
+              "name": "formControlController",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "hue",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "saturation",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "brightness",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "alpha",
-                  "default": "100"
-                }
-              ],
-              "description": "Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100."
+              "readonly": true,
+              "default": "new FormControlController(this)"
             },
             {
-              "kind": "method",
-              "name": "stopNestedEventPropagation",
+              "kind": "field",
+              "name": "isSafeValue",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "handleFormatChange"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "kind": "method",
-              "name": "handleOpacityChange"
+              "kind": "field",
+              "name": "base",
+              "type": {
+                "text": "HTMLElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleValueChange",
-              "parameters": [
-                {
-                  "name": "oldValue",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "input",
+              "type": {
+                "text": "CwInput"
+              }
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the color picker."
+              "kind": "field",
+              "name": "dropdown",
+              "type": {
+                "text": "CwDropdown"
+              }
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the color picker."
+              "kind": "field",
+              "name": "previewButton",
+              "type": {
+                "text": "HTMLButtonElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "getFormattedValue",
-              "parameters": [
-                {
-                  "name": "format",
-                  "default": "'hex'",
-                  "type": {
-                    "text": "'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'"
-                  }
-                }
-              ],
-              "description": "Returns the current value as a string in the specified format."
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "HTMLButtonElement"
+              }
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
+              "kind": "field",
+              "name": "isDraggingGridHandle",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Gets the associated form, if one exists."
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              "kind": "field",
+              "name": "isEmpty",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the color picker loses focus.",
-              "name": "cw-blur",
-              "reactName": "onCwBlur",
-              "eventName": "CwBlurEvent"
+              "kind": "field",
+              "name": "inputValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
             },
             {
-              "description": "Emitted when the color picker's value changes.",
-              "name": "cw-change",
-              "reactName": "onCwChange",
-              "eventName": "CwChangeEvent"
+              "kind": "field",
+              "name": "hue",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
             },
             {
-              "description": "Emitted when the color picker receives focus.",
-              "name": "cw-focus",
-              "reactName": "onCwFocus",
-              "eventName": "CwFocusEvent"
+              "kind": "field",
+              "name": "saturation",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "100"
             },
             {
-              "description": "Emitted when the color picker receives input.",
-              "name": "cw-input",
-              "reactName": "onCwInput",
-              "eventName": "CwInputEvent"
+              "kind": "field",
+              "name": "brightness",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "100"
             },
             {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "cw-invalid",
-              "reactName": "onCwInvalid",
-              "eventName": "CwInvalidEvent"
-            }
-          ],
-          "attributes": [
+              "kind": "field",
+              "name": "alpha",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "100"
+            },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
-              "fieldName": "value"
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
+              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
-              "fieldName": "label"
+              "attribute": "label"
             },
             {
+              "kind": "field",
               "name": "format",
               "type": {
                 "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
               },
               "default": "'hex'",
               "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
-              "fieldName": "format"
+              "attribute": "format"
             },
             {
+              "kind": "field",
               "name": "inline",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Renders the color picker inline rather than in a dropdown.",
-              "fieldName": "inline"
+              "attribute": "inline",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
               "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
-              "fieldName": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "no-format-toggle",
+              "kind": "field",
+              "name": "noFormatToggle",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Removes the button that lets users toggle between format.",
-              "fieldName": "noFormatToggle"
+              "attribute": "no-format-toggle"
             },
             {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The name of the form control, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "attribute": "name"
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Disables the color picker.",
-              "fieldName": "disabled"
+              "attribute": "disabled",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
+              "attribute": "hoist"
             },
             {
+              "kind": "field",
               "name": "opacity",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
-              "fieldName": "opacity"
+              "attribute": "opacity"
             },
             {
+              "kind": "field",
               "name": "uppercase",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
-              "fieldName": "uppercase"
+              "attribute": "uppercase"
             },
             {
+              "kind": "field",
               "name": "swatches",
               "type": {
                 "text": "string | string[]"
               },
               "default": "''",
               "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
-              "fieldName": "swatches"
+              "attribute": "swatches"
             },
             {
+              "kind": "field",
               "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
+              "attribute": "form",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Makes the color picker a required field.",
-              "fieldName": "required"
-            }
-          ],
-          "superclass": {
-            "name": "CwElement",
-            "module": "/src/internal/cw-element.js"
-          },
-          "summary": "Color pickers allow the user to select a color.",
-          "tagNameWithoutPrefix": "color-picker",
-          "tagName": "cw-color-picker",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Color pickers allow the user to select a color.\n * @documentation https://cordwainer.dev/components/color-picker\n * @status stable\n * @since 1.0\n *\n * @dependency cw-button\n * @dependency cw-button-group\n * @dependency cw-dropdown\n * @dependency cw-input\n * @dependency cw-visually-hidden\n *\n * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.\n *\n * @event cw-blur - Emitted when the color picker loses focus.\n * @event cw-change - Emitted when the color picker's value changes.\n * @event cw-focus - Emitted when the color picker receives focus.\n * @event cw-input - Emitted when the color picker receives input.\n * @event cw-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The color picker's dropdown trigger.\n * @csspart swatches - The container that holds the swatches.\n * @csspart swatch - Each individual swatch.\n * @csspart grid - The color grid.\n * @csspart grid-handle - The color grid's handle.\n * @csspart slider - Hue and opacity sliders.\n * @csspart slider-handle - Hue and opacity slider handles.\n * @csspart hue-slider - The hue slider.\n * @csspart hue-slider-handle - The hue slider's handle.\n * @csspart opacity-slider - The opacity slider.\n * @csspart opacity-slider-handle - The opacity slider's handle.\n * @csspart preview - The preview color.\n * @csspart input - The text input.\n * @csspart eye-dropper-button - The eye dropper button.\n * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.\n * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.\n * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.\n * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.\n * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.\n * @csspart format-button - The format button.\n * @csspart format-button__base - The format button's exported `button` part.\n * @csspart format-button__prefix - The format button's exported `prefix` part.\n * @csspart format-button__label - The format button's exported `label` part.\n * @csspart format-button__suffix - The format button's exported `suffix` part.\n * @csspart format-button__caret - The format button's exported `caret` part.\n *\n * @cssproperty --grid-width - The width of the color grid.\n * @cssproperty --grid-height - The height of the color grid.\n * @cssproperty --grid-handle-size - The size of the color grid's handle.\n * @cssproperty --slider-height - The height of the hue and alpha sliders.\n * @cssproperty --slider-handle-size - The diameter of the slider's handle.\n * @cssproperty --swatch-size - The size of each predefined color swatch.\n */",
-          "documentation": "https://cordwainer.dev/components/color-picker",
-          "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "cw-button",
-            "cw-button-group",
-            "cw-dropdown",
-            "cw-input",
-            "cw-visually-hidden"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "CwColorPicker",
-            "module": "components/color-picker/color-picker.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "CwCheckbox",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The square container that wraps the checkbox's checked state.",
-              "name": "control"
-            },
-            {
-              "description": "Matches the control part when the checkbox is checked.",
-              "name": "control--checked"
-            },
-            {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
-            },
-            {
-              "description": "The checked icon, an `<cw-icon>` element.",
-              "name": "checked-icon"
-            },
-            {
-              "description": "The indeterminate icon, an `<cw-icon>` element.",
-              "name": "indeterminate-icon"
-            },
-            {
-              "description": "The container that wraps the checkbox's label.",
-              "name": "label"
+              "attribute": "required",
+              "reflects": true
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The checkbox's label.",
-              "name": ""
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
-            {
-              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.",
-              "name": "help-text"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ 'cw-icon': CwIcon }"
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this, { value: (control: CwCheckbox) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: CwCheckbox) => control.defaultChecked, setValue: (control: CwCheckbox, checked: boolean) => (control.checked = checked) })"
+              "kind": "method",
+              "name": "handleCopy",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text')"
+              "name": "handleFocusIn",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "name": "handleFocusOut",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "hasFocus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "kind": "method",
+              "name": "handleFormatToggle",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "title"
+              "kind": "method",
+              "name": "handleAlphaDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "name"
+              "kind": "method",
+              "name": "handleHueDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "value"
+              "kind": "method",
+              "name": "handleGridDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'small' | 'medium' | 'large'"
-              },
-              "default": "'medium'",
-              "description": "The checkbox's size.",
-              "attribute": "size",
-              "reflects": true
+              "kind": "method",
+              "name": "handleAlphaKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the checkbox.",
-              "attribute": "disabled",
-              "reflects": true
+              "kind": "method",
+              "name": "handleHueKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "attribute": "checked",
-              "reflects": true
+              "kind": "method",
+              "name": "handleGridKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "attribute": "indeterminate",
-              "reflects": true
+              "kind": "method",
+              "name": "handleInputChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CwChangeEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "defaultChecked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "kind": "method",
+              "name": "handleInputInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CwInputEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "attribute": "form",
-              "reflects": true
+              "kind": "method",
+              "name": "handleInputKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "attribute": "required",
-              "reflects": true
+              "kind": "method",
+              "name": "handleInputInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text"
+              "kind": "method",
+              "name": "handleTouchMove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "TouchEvent"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "kind": "method",
+              "name": "parseColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "colorString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "kind": "method",
+              "name": "setColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "colorString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleClick",
+              "name": "setLetterCase",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "string",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "syncValues",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleBlur",
+              "name": "handleAfterHide",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "handleEyeDropper",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleInvalid",
+              "name": "selectSwatch",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "color",
                   "type": {
-                    "text": "Event"
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private"
+              "name": "getHexString",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "hue",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "saturation",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "brightness",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "alpha",
+                  "default": "100"
+                }
+              ],
+              "description": "Generates a hex string from HSV values. Hue must be 0-360. All other arguments must be 0-100."
             },
             {
               "kind": "method",
-              "name": "handleDisabledChange"
+              "name": "stopNestedEventPropagation",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleFormatChange"
             },
             {
               "kind": "method",
-              "name": "handleStateChange"
+              "name": "handleOpacityChange"
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the checkbox."
+              "name": "handleValueChange",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -4295,12 +4239,26 @@
                   }
                 }
               ],
-              "description": "Sets focus on the checkbox."
+              "description": "Sets focus on the color picker."
             },
             {
               "kind": "method",
               "name": "blur",
-              "description": "Removes focus from the checkbox."
+              "description": "Removes focus from the color picker."
+            },
+            {
+              "kind": "method",
+              "name": "getFormattedValue",
+              "parameters": [
+                {
+                  "name": "format",
+                  "default": "'hex'",
+                  "type": {
+                    "text": "'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'"
+                  }
+                }
+              ],
+              "description": "Returns the current value as a string in the specified format."
             },
             {
               "kind": "method",
@@ -4333,30 +4291,30 @@
                   }
                 }
               ],
-              "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string."
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             }
           ],
           "events": [
             {
-              "description": "Emitted when the checkbox loses focus.",
+              "description": "Emitted when the color picker loses focus.",
               "name": "cw-blur",
               "reactName": "onCwBlur",
               "eventName": "CwBlurEvent"
             },
             {
-              "description": "Emitted when the checked state changes.",
+              "description": "Emitted when the color picker's value changes.",
               "name": "cw-change",
               "reactName": "onCwChange",
               "eventName": "CwChangeEvent"
             },
             {
-              "description": "Emitted when the checkbox gains focus.",
+              "description": "Emitted when the color picker receives focus.",
               "name": "cw-focus",
               "reactName": "onCwFocus",
               "eventName": "CwFocusEvent"
             },
             {
-              "description": "Emitted when the checkbox receives input.",
+              "description": "Emitted when the color picker receives input.",
               "name": "cw-input",
               "reactName": "onCwInput",
               "eventName": "CwInputEvent"
@@ -4370,29 +4328,40 @@
           ],
           "attributes": [
             {
-              "name": "title",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "title"
+              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
+              "fieldName": "value"
             },
             {
-              "name": "name",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "description": "The color picker's label. This will not be displayed, but it will be announced by assistive devices. If you need to\ndisplay HTML, you can use the `label` slot` instead.",
+              "fieldName": "label"
             },
             {
-              "name": "value",
+              "name": "format",
               "type": {
-                "text": "string"
+                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
               },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "fieldName": "value"
+              "default": "'hex'",
+              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
+              "fieldName": "format"
+            },
+            {
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Renders the color picker inline rather than in a dropdown.",
+              "fieldName": "inline"
             },
             {
               "name": "size",
@@ -4400,35 +4369,71 @@
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "The checkbox's size.",
+              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
               "fieldName": "size"
             },
+            {
+              "name": "no-format-toggle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes the button that lets users toggle between format.",
+              "fieldName": "noFormatToggle"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the form control, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the checkbox.",
+              "description": "Disables the color picker.",
               "fieldName": "disabled"
             },
             {
-              "name": "checked",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "fieldName": "checked"
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
             },
             {
-              "name": "indeterminate",
+              "name": "opacity",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
-              "fieldName": "indeterminate"
+              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+              "fieldName": "opacity"
+            },
+            {
+              "name": "uppercase",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
+              "fieldName": "uppercase"
+            },
+            {
+              "name": "swatches",
+              "type": {
+                "text": "string | string[]"
+              },
+              "default": "''",
+              "description": "One or more predefined color swatches to display as presets in the color picker. Can include any format the color\npicker can parse, including HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names. Each color must be separated by a\nsemicolon (`;`). Alternatively, you can pass an array of color values to this property using JavaScript.",
+              "fieldName": "swatches"
             },
             {
               "name": "form",
@@ -4445,33 +4450,28 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the checkbox a required field.",
+              "description": "Makes the color picker a required field.",
               "fieldName": "required"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
             }
           ],
           "superclass": {
             "name": "CwElement",
             "module": "/src/internal/cw-element.js"
           },
-          "summary": "Checkboxes allow the user to toggle an option on or off.",
-          "tagNameWithoutPrefix": "checkbox",
-          "tagName": "cw-checkbox",
+          "summary": "Color pickers allow the user to select a color.",
+          "tagNameWithoutPrefix": "color-picker",
+          "tagName": "cw-color-picker",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://cordwainer.dev/components/checkbox\n * @status stable\n * @since 1.0\n *\n * @dependency cw-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event cw-blur - Emitted when the checkbox loses focus.\n * @event cw-change - Emitted when the checked state changes.\n * @event cw-focus - Emitted when the checkbox gains focus.\n * @event cw-input - Emitted when the checkbox receives input.\n * @event cw-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<cw-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<cw-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */",
-          "documentation": "https://cordwainer.dev/components/checkbox",
+          "jsDoc": "/**\n * @summary Color pickers allow the user to select a color.\n * @documentation https://cordwainer.dev/components/color-picker\n * @status stable\n * @since 1.0\n *\n * @dependency cw-button\n * @dependency cw-button-group\n * @dependency cw-dropdown\n * @dependency cw-input\n * @dependency cw-visually-hidden\n *\n * @slot label - The color picker's form label. Alternatively, you can use the `label` attribute.\n *\n * @event cw-blur - Emitted when the color picker loses focus.\n * @event cw-change - Emitted when the color picker's value changes.\n * @event cw-focus - Emitted when the color picker receives focus.\n * @event cw-input - Emitted when the color picker receives input.\n * @event cw-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart trigger - The color picker's dropdown trigger.\n * @csspart swatches - The container that holds the swatches.\n * @csspart swatch - Each individual swatch.\n * @csspart grid - The color grid.\n * @csspart grid-handle - The color grid's handle.\n * @csspart slider - Hue and opacity sliders.\n * @csspart slider-handle - Hue and opacity slider handles.\n * @csspart hue-slider - The hue slider.\n * @csspart hue-slider-handle - The hue slider's handle.\n * @csspart opacity-slider - The opacity slider.\n * @csspart opacity-slider-handle - The opacity slider's handle.\n * @csspart preview - The preview color.\n * @csspart input - The text input.\n * @csspart eye-dropper-button - The eye dropper button.\n * @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.\n * @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.\n * @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.\n * @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.\n * @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.\n * @csspart format-button - The format button.\n * @csspart format-button__base - The format button's exported `button` part.\n * @csspart format-button__prefix - The format button's exported `prefix` part.\n * @csspart format-button__label - The format button's exported `label` part.\n * @csspart format-button__suffix - The format button's exported `suffix` part.\n * @csspart format-button__caret - The format button's exported `caret` part.\n *\n * @cssproperty --grid-width - The width of the color grid.\n * @cssproperty --grid-height - The height of the color grid.\n * @cssproperty --grid-handle-size - The size of the color grid's handle.\n * @cssproperty --slider-height - The height of the hue and alpha sliders.\n * @cssproperty --slider-handle-size - The diameter of the slider's handle.\n * @cssproperty --swatch-size - The size of each predefined color swatch.\n */",
+          "documentation": "https://cordwainer.dev/components/color-picker",
           "status": "stable",
           "since": "1.0",
           "dependencies": [
-            "cw-icon"
+            "cw-button",
+            "cw-button-group",
+            "cw-dropdown",
+            "cw-input",
+            "cw-visually-hidden"
           ]
         }
       ],
@@ -4480,8 +4480,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwCheckbox",
-            "module": "components/checkbox/checkbox.js"
+            "name": "CwColorPicker",
+            "module": "components/color-picker/color-picker.js"
           }
         }
       ]
@@ -9358,40 +9358,151 @@
               "fieldName": "hoist"
             },
             {
-              "name": "sync",
+              "name": "sync",
+              "type": {
+                "text": "'width' | 'height' | 'both' | undefined"
+              },
+              "default": "undefined",
+              "description": "Syncs the popup width or height to that of the trigger element.",
+              "fieldName": "sync"
+            }
+          ],
+          "superclass": {
+            "name": "CwElement",
+            "module": "/src/internal/cw-element.js"
+          },
+          "summary": "Dropdowns expose additional content that \"drops down\" in a panel.",
+          "tagNameWithoutPrefix": "dropdown",
+          "tagName": "cw-dropdown",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://cordwainer.dev/components/dropdown\n * @status stable\n * @since 1.0\n *\n * @dependency cw-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<cw-button>` element.\n *\n * @event cw-show - Emitted when the dropdown opens.\n * @event cw-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event cw-hide - Emitted when the dropdown closes.\n * @event cw-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<cw-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */",
+          "documentation": "https://cordwainer.dev/components/dropdown",
+          "status": "stable",
+          "since": "1.0",
+          "dependencies": [
+            "cw-popup"
+          ],
+          "animations": [
+            {
+              "name": "dropdown.show",
+              "description": "The animation to use when showing the dropdown."
+            },
+            {
+              "name": "dropdown.hide",
+              "description": "The animation to use when hiding the dropdown."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CwDropdown",
+            "module": "components/dropdown/dropdown.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/footer/footer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CwFooter",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper, a `<footer>` landmark element.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the slotted logo.",
+              "name": "logo"
+            },
+            {
+              "description": "The container that wraps the slotted menu links.",
+              "name": "menu"
+            },
+            {
+              "description": "The container that wraps the slotted about content.",
+              "name": "about"
+            },
+            {
+              "description": "The bottom bar that wraps the copyright text and social links.",
+              "name": "bottom"
+            },
+            {
+              "description": "The copyright text.",
+              "name": "copyright"
+            },
+            {
+              "description": "The container that wraps the slotted social links.",
+              "name": "social"
+            }
+          ],
+          "slots": [
+            {
+              "description": "A `<cw-logo>`.",
+              "name": "logo"
+            },
+            {
+              "description": "Plain `<a>` links. Not a repeating item component — a flat list that reflows into columns (3 wide, 1 narrow) via CSS, no grouping or headings.",
+              "name": "menu"
+            },
+            {
+              "description": "Arbitrary content, rendered full width.",
+              "name": "about"
+            },
+            {
+              "description": "Any number of `<cw-social-link>` elements.",
+              "name": "social"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'logo', 'menu', 'about', 'social')"
+            },
+            {
+              "kind": "field",
+              "name": "owner",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The copyright owner's name. When set, the footer renders `© {currentYear} {owner}`. Renders nothing if unset.",
+              "attribute": "owner"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "owner",
               "type": {
-                "text": "'width' | 'height' | 'both' | undefined"
+                "text": "string"
               },
-              "default": "undefined",
-              "description": "Syncs the popup width or height to that of the trigger element.",
-              "fieldName": "sync"
+              "default": "''",
+              "description": "The copyright owner's name. When set, the footer renders `© {currentYear} {owner}`. Renders nothing if unset.",
+              "fieldName": "owner"
             }
           ],
           "superclass": {
             "name": "CwElement",
             "module": "/src/internal/cw-element.js"
           },
-          "summary": "Dropdowns expose additional content that \"drops down\" in a panel.",
-          "tagNameWithoutPrefix": "dropdown",
-          "tagName": "cw-dropdown",
+          "summary": "Site footer region composing branding, a flat link list, arbitrary \"about\" content, and a bottom bar\nwith copyright and social links.",
+          "tagNameWithoutPrefix": "footer",
+          "tagName": "cw-footer",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Dropdowns expose additional content that \"drops down\" in a panel.\n * @documentation https://cordwainer.dev/components/dropdown\n * @status stable\n * @since 1.0\n *\n * @dependency cw-popup\n *\n * @slot - The dropdown's main content.\n * @slot trigger - The dropdown's trigger, usually a `<cw-button>` element.\n *\n * @event cw-show - Emitted when the dropdown opens.\n * @event cw-after-show - Emitted after the dropdown opens and all animations are complete.\n * @event cw-hide - Emitted when the dropdown closes.\n * @event cw-after-hide - Emitted after the dropdown closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<cw-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart trigger - The container that wraps the trigger.\n * @csspart panel - The panel that gets shown when the dropdown is open.\n *\n * @animation dropdown.show - The animation to use when showing the dropdown.\n * @animation dropdown.hide - The animation to use when hiding the dropdown.\n */",
-          "documentation": "https://cordwainer.dev/components/dropdown",
-          "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "cw-popup"
-          ],
-          "animations": [
-            {
-              "name": "dropdown.show",
-              "description": "The animation to use when showing the dropdown."
-            },
-            {
-              "name": "dropdown.hide",
-              "description": "The animation to use when hiding the dropdown."
-            }
-          ]
+          "jsDoc": "/**\n * @summary Site footer region composing branding, a flat link list, arbitrary \"about\" content, and a bottom bar\n * with copyright and social links.\n * @documentation https://cordwainer.dev/components/footer\n * @status experimental\n * @since 1.3\n *\n * @slot logo - A `<cw-logo>`.\n * @slot menu - Plain `<a>` links. Not a repeating item component — a flat list that reflows into columns (3 wide,\n * 1 narrow) via CSS, no grouping or headings.\n * @slot about - Arbitrary content, rendered full width.\n * @slot social - Any number of `<cw-social-link>` elements.\n *\n * @csspart base - The component's base wrapper, a `<footer>` landmark element.\n * @csspart logo - The container that wraps the slotted logo.\n * @csspart menu - The container that wraps the slotted menu links.\n * @csspart about - The container that wraps the slotted about content.\n * @csspart bottom - The bottom bar that wraps the copyright text and social links.\n * @csspart copyright - The copyright text.\n * @csspart social - The container that wraps the slotted social links.\n */",
+          "documentation": "https://cordwainer.dev/components/footer",
+          "status": "experimental",
+          "since": "1.3"
         }
       ],
       "exports": [
@@ -9399,8 +9510,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwDropdown",
-            "module": "components/dropdown/dropdown.js"
+            "name": "CwFooter",
+            "module": "components/footer/footer.js"
           }
         }
       ]
@@ -9724,25 +9835,249 @@
               "fieldName": "timeZone"
             },
             {
-              "name": "hour-format",
+              "name": "hour-format",
+              "type": {
+                "text": "'auto' | '12' | '24'"
+              },
+              "default": "'auto'",
+              "description": "The format for displaying the hour.",
+              "fieldName": "hourFormat"
+            }
+          ],
+          "superclass": {
+            "name": "CwElement",
+            "module": "/src/internal/cw-element.js"
+          },
+          "summary": "Formats a date/time using the specified locale and options.",
+          "tagNameWithoutPrefix": "format-date",
+          "tagName": "cw-format-date",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Formats a date/time using the specified locale and options.\n * @documentation https://cordwainer.dev/components/format-date\n * @status stable\n * @since 1.0\n */",
+          "documentation": "https://cordwainer.dev/components/format-date",
+          "status": "stable",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CwFormatDate",
+            "module": "components/format-date/format-date.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/format-number/format-number.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CwFormatNumber",
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number to format.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "'currency' | 'decimal' | 'percent'"
+              },
+              "default": "'decimal'",
+              "description": "The formatting style to use.",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "noGrouping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Turns off grouping separators.",
+              "attribute": "no-grouping"
+            },
+            {
+              "kind": "field",
+              "name": "currency",
+              "type": {
+                "text": "string"
+              },
+              "default": "'USD'",
+              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
+              "attribute": "currency"
+            },
+            {
+              "kind": "field",
+              "name": "currencyDisplay",
+              "type": {
+                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
+              },
+              "default": "'symbol'",
+              "description": "How to display the currency.",
+              "attribute": "currency-display"
+            },
+            {
+              "kind": "field",
+              "name": "minimumIntegerDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
+              "attribute": "minimum-integer-digits"
+            },
+            {
+              "kind": "field",
+              "name": "minimumFractionDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
+              "attribute": "minimum-fraction-digits"
+            },
+            {
+              "kind": "field",
+              "name": "maximumFractionDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
+              "attribute": "maximum-fraction-digits"
+            },
+            {
+              "kind": "field",
+              "name": "minimumSignificantDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
+              "attribute": "minimum-significant-digits"
+            },
+            {
+              "kind": "field",
+              "name": "maximumSignificantDigits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
+              "attribute": "maximum-significant-digits"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The number to format.",
+              "fieldName": "value"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "'currency' | 'decimal' | 'percent'"
+              },
+              "default": "'decimal'",
+              "description": "The formatting style to use.",
+              "fieldName": "type"
+            },
+            {
+              "name": "no-grouping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Turns off grouping separators.",
+              "fieldName": "noGrouping"
+            },
+            {
+              "name": "currency",
+              "type": {
+                "text": "string"
+              },
+              "default": "'USD'",
+              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
+              "fieldName": "currency"
+            },
+            {
+              "name": "currency-display",
+              "type": {
+                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
+              },
+              "default": "'symbol'",
+              "description": "How to display the currency.",
+              "fieldName": "currencyDisplay"
+            },
+            {
+              "name": "minimum-integer-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
+              "fieldName": "minimumIntegerDigits"
+            },
+            {
+              "name": "minimum-fraction-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
+              "fieldName": "minimumFractionDigits"
+            },
+            {
+              "name": "maximum-fraction-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
+              "fieldName": "maximumFractionDigits"
+            },
+            {
+              "name": "minimum-significant-digits",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
+              "fieldName": "minimumSignificantDigits"
+            },
+            {
+              "name": "maximum-significant-digits",
               "type": {
-                "text": "'auto' | '12' | '24'"
+                "text": "number"
               },
-              "default": "'auto'",
-              "description": "The format for displaying the hour.",
-              "fieldName": "hourFormat"
+              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
+              "fieldName": "maximumSignificantDigits"
             }
           ],
           "superclass": {
             "name": "CwElement",
             "module": "/src/internal/cw-element.js"
           },
-          "summary": "Formats a date/time using the specified locale and options.",
-          "tagNameWithoutPrefix": "format-date",
-          "tagName": "cw-format-date",
+          "summary": "Formats a number using the specified locale and options.",
+          "tagNameWithoutPrefix": "format-number",
+          "tagName": "cw-format-number",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Formats a date/time using the specified locale and options.\n * @documentation https://cordwainer.dev/components/format-date\n * @status stable\n * @since 1.0\n */",
-          "documentation": "https://cordwainer.dev/components/format-date",
+          "jsDoc": "/**\n * @summary Formats a number using the specified locale and options.\n * @documentation https://cordwainer.dev/components/format-number\n * @status stable\n * @since 1.0\n */",
+          "documentation": "https://cordwainer.dev/components/format-number",
           "status": "stable",
           "since": "1.0"
         }
@@ -9752,21 +10087,145 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwFormatDate",
-            "module": "components/format-date/format-date.js"
+            "name": "CwFormatNumber",
+            "module": "components/format-number/format-number.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/format-number/format-number.js",
+      "path": "components/header/header.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "CwFormatNumber",
+          "name": "CwHeader",
+          "cssProperties": [
+            {
+              "description": "The width of an open action panel above `mobile-breakpoint`. Below it, panels are always full width. Defaults to `50%`.",
+              "name": "--panel-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper, a `<header>` landmark element.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the slotted logo.",
+              "name": "logo"
+            },
+            {
+              "description": "The container that wraps the slotted primary navigation.",
+              "name": "primary-navigation"
+            },
+            {
+              "description": "The container that wraps the action triggers.",
+              "name": "actions"
+            },
+            {
+              "description": "Each action trigger, a `<cw-icon-button>`.",
+              "name": "trigger"
+            },
+            {
+              "description": "The utility action trigger.",
+              "name": "trigger--utility"
+            },
+            {
+              "description": "The search action trigger.",
+              "name": "trigger--search"
+            },
+            {
+              "description": "The notification action trigger.",
+              "name": "trigger--notification"
+            },
+            {
+              "description": "The user action trigger.",
+              "name": "trigger--user"
+            },
+            {
+              "description": "The cart action trigger.",
+              "name": "trigger--cart"
+            },
+            {
+              "description": "A trigger's exported `base` part.",
+              "name": "trigger__base"
+            },
+            {
+              "description": "The line that highlights the currently open action trigger.",
+              "name": "indicator"
+            },
+            {
+              "description": "The panel shown below the header when an action trigger is open.",
+              "name": "panel"
+            },
+            {
+              "description": "The container that wraps the slotted secondary navigation.",
+              "name": "secondary-navigation"
+            }
+          ],
+          "slots": [
+            {
+              "description": "A `<cw-logo>`.",
+              "name": "logo"
+            },
+            {
+              "description": "A `<cw-primary-navigation>`.",
+              "name": "primary-navigation"
+            },
+            {
+              "description": "Content for the utility action panel, opened via a gear icon trigger.",
+              "name": "utility"
+            },
+            {
+              "description": "Content for the search action panel, opened via a search icon trigger.",
+              "name": "search"
+            },
+            {
+              "description": "Content for the notification action panel, opened via a bell icon trigger.",
+              "name": "notification"
+            },
+            {
+              "description": "Content for the user/account action panel, opened via a person icon trigger.",
+              "name": "user"
+            },
+            {
+              "description": "Content for the cart action panel, opened via a cart icon trigger.",
+              "name": "cart"
+            },
+            {
+              "description": "A `<cw-secondary-navigation>`, rendered on its own row below everything else.",
+              "name": "secondary-navigation"
+            }
+          ],
           "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'cw-icon-button': CwIconButton }"
+            },
+            {
+              "kind": "field",
+              "name": "attrId",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "++id"
+            },
+            {
+              "kind": "field",
+              "name": "componentId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`cw-header-${this.attrId}`"
+            },
             {
               "kind": "field",
               "name": "localize",
@@ -9776,199 +10235,255 @@
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number to format.",
-              "attribute": "value"
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController( this, 'logo', 'primary-navigation', 'utility', 'search', 'notification', 'user', 'cart', 'secondary-navigation' )"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "mobileResizeObserver",
               "type": {
-                "text": "'currency' | 'decimal' | 'percent'"
+                "text": "ResizeObserver"
               },
-              "default": "'decimal'",
-              "description": "The formatting style to use.",
-              "attribute": "type"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "noGrouping",
+              "name": "actionsResizeObserver",
               "type": {
-                "text": "boolean"
+                "text": "ResizeObserver"
               },
-              "default": "false",
-              "description": "Turns off grouping separators.",
-              "attribute": "no-grouping"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "currency",
+              "name": "panel",
               "type": {
-                "text": "string"
-              },
-              "default": "'USD'",
-              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
-              "attribute": "currency"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "currencyDisplay",
+              "name": "actionsRow",
               "type": {
-                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
-              },
-              "default": "'symbol'",
-              "description": "How to display the currency.",
-              "attribute": "currency-display"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "minimumIntegerDigits",
+              "name": "indicator",
               "type": {
-                "text": "number"
-              },
-              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
-              "attribute": "minimum-integer-digits"
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "minimumFractionDigits",
+              "name": "triggers",
               "type": {
-                "text": "number"
-              },
-              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
-              "attribute": "minimum-fraction-digits"
+                "text": "NodeListOf<CwIconButton>"
+              }
             },
             {
               "kind": "field",
-              "name": "maximumFractionDigits",
+              "name": "isMobile",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
-              "attribute": "maximum-fraction-digits"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "minimumSignificantDigits",
+              "name": "activePanel",
               "type": {
-                "text": "number"
+                "text": "HeaderAction['name'] | null"
               },
-              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
-              "attribute": "minimum-significant-digits"
+              "default": "null",
+              "description": "The name of the currently open action panel, or `null` if none is open. Not reflected as an attribute — `null`\nis a legitimate, frequently-reached value here (no panel open), which doesn't play well with `CwElement`'s\nreflected-attribute \"morph fix\" (`src/internal/cw-element.ts`), designed around properties whose first non-null\nvalue is a permanent default rather than a value that legitimately toggles back to `null` at runtime."
             },
             {
               "kind": "field",
-              "name": "maximumSignificantDigits",
+              "name": "mobileBreakpoint",
               "type": {
                 "text": "number"
               },
-              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
-              "attribute": "maximum-significant-digits"
-            }
-          ],
-          "attributes": [
+              "default": "768",
+              "description": "The viewport width, in pixels, below which the header switches to its stacked mobile layout.",
+              "attribute": "mobile-breakpoint"
+            },
             {
-              "name": "value",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The number to format.",
-              "fieldName": "value"
+              "kind": "method",
+              "name": "updateMobileState",
+              "privacy": "private"
             },
             {
-              "name": "type",
-              "type": {
-                "text": "'currency' | 'decimal' | 'percent'"
-              },
-              "default": "'decimal'",
-              "description": "The formatting style to use.",
-              "fieldName": "type"
+              "kind": "method",
+              "name": "handleTriggerClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "HeaderAction['name']"
+                  }
+                }
+              ]
             },
             {
-              "name": "no-grouping",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Turns off grouping separators.",
-              "fieldName": "noGrouping"
+              "kind": "field",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentMouseDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "addOpenListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "removeOpenListeners",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "focusOnTrigger",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "HeaderAction['name']"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateAccessibleTriggers",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "repositionIndicator",
+              "privacy": "private"
             },
             {
-              "name": "currency",
-              "type": {
-                "text": "string"
-              },
-              "default": "'USD'",
-              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
-              "fieldName": "currency"
+              "kind": "method",
+              "name": "handleActivePanelChange",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "HeaderAction['name'] | null"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "HeaderAction['name'] | null"
+                  }
+                }
+              ]
             },
             {
-              "name": "currency-display",
-              "type": {
-                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
-              },
-              "default": "'symbol'",
-              "description": "How to display the currency.",
-              "fieldName": "currencyDisplay"
+              "kind": "method",
+              "name": "showPanel",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "HeaderAction['name']"
+                  }
+                }
+              ],
+              "description": "Opens the named action panel. No-op if that slot has no content."
             },
             {
-              "name": "minimum-integer-digits",
+              "kind": "method",
+              "name": "hidePanel",
+              "description": "Closes the currently open action panel, if any."
+            }
+          ],
+          "events": [
+            {
               "type": {
-                "text": "number"
+                "text": "{ name: String }"
               },
-              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
-              "fieldName": "minimumIntegerDigits"
+              "description": "Emitted when an action panel opens.",
+              "name": "cw-panel-show",
+              "reactName": "onCwPanelShow",
+              "eventName": "CwPanelShowEvent"
             },
             {
-              "name": "minimum-fraction-digits",
               "type": {
-                "text": "number"
+                "text": "{ name: String }"
               },
-              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
-              "fieldName": "minimumFractionDigits"
+              "description": "Emitted after an action panel opens and all animations are complete.",
+              "name": "cw-panel-after-show",
+              "reactName": "onCwPanelAfterShow",
+              "eventName": "CwPanelAfterShowEvent"
             },
             {
-              "name": "maximum-fraction-digits",
               "type": {
-                "text": "number"
+                "text": "{ name: String }"
               },
-              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
-              "fieldName": "maximumFractionDigits"
+              "description": "Emitted when an action panel closes.",
+              "name": "cw-panel-hide",
+              "reactName": "onCwPanelHide",
+              "eventName": "CwPanelHideEvent"
             },
             {
-              "name": "minimum-significant-digits",
               "type": {
-                "text": "number"
+                "text": "{ name: String }"
               },
-              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
-              "fieldName": "minimumSignificantDigits"
-            },
+              "description": "Emitted after an action panel closes and all animations are complete.",
+              "name": "cw-panel-after-hide",
+              "reactName": "onCwPanelAfterHide",
+              "eventName": "CwPanelAfterHideEvent"
+            }
+          ],
+          "attributes": [
             {
-              "name": "maximum-significant-digits",
+              "name": "mobile-breakpoint",
               "type": {
                 "text": "number"
               },
-              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
-              "fieldName": "maximumSignificantDigits"
+              "default": "768",
+              "description": "The viewport width, in pixels, below which the header switches to its stacked mobile layout.",
+              "fieldName": "mobileBreakpoint"
             }
           ],
           "superclass": {
             "name": "CwElement",
             "module": "/src/internal/cw-element.js"
           },
-          "summary": "Formats a number using the specified locale and options.",
-          "tagNameWithoutPrefix": "format-number",
-          "tagName": "cw-format-number",
+          "summary": "Page header region composing branding, primary navigation, icon-triggered action panels, and secondary\nnavigation into one piece of chrome.",
+          "tagNameWithoutPrefix": "header",
+          "tagName": "cw-header",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Formats a number using the specified locale and options.\n * @documentation https://cordwainer.dev/components/format-number\n * @status stable\n * @since 1.0\n */",
-          "documentation": "https://cordwainer.dev/components/format-number",
-          "status": "stable",
-          "since": "1.0"
+          "jsDoc": "/**\n * @summary Page header region composing branding, primary navigation, icon-triggered action panels, and secondary\n * navigation into one piece of chrome.\n * @documentation https://cordwainer.dev/components/header\n * @status experimental\n * @since 1.3\n *\n * @dependency cw-icon-button\n *\n * @slot logo - A `<cw-logo>`.\n * @slot primary-navigation - A `<cw-primary-navigation>`.\n * @slot utility - Content for the utility action panel, opened via a gear icon trigger.\n * @slot search - Content for the search action panel, opened via a search icon trigger.\n * @slot notification - Content for the notification action panel, opened via a bell icon trigger.\n * @slot user - Content for the user/account action panel, opened via a person icon trigger.\n * @slot cart - Content for the cart action panel, opened via a cart icon trigger.\n * @slot secondary-navigation - A `<cw-secondary-navigation>`, rendered on its own row below everything else.\n *\n * @event {{ name: String }} cw-panel-show - Emitted when an action panel opens.\n * @event {{ name: String }} cw-panel-after-show - Emitted after an action panel opens and all animations are\n * complete.\n * @event {{ name: String }} cw-panel-hide - Emitted when an action panel closes.\n * @event {{ name: String }} cw-panel-after-hide - Emitted after an action panel closes and all animations are\n * complete.\n *\n * @csspart base - The component's base wrapper, a `<header>` landmark element.\n * @csspart logo - The container that wraps the slotted logo.\n * @csspart primary-navigation - The container that wraps the slotted primary navigation.\n * @csspart actions - The container that wraps the action triggers.\n * @csspart trigger - Each action trigger, a `<cw-icon-button>`.\n * @csspart trigger--utility - The utility action trigger.\n * @csspart trigger--search - The search action trigger.\n * @csspart trigger--notification - The notification action trigger.\n * @csspart trigger--user - The user action trigger.\n * @csspart trigger--cart - The cart action trigger.\n * @csspart trigger__base - A trigger's exported `base` part.\n * @csspart indicator - The line that highlights the currently open action trigger.\n * @csspart panel - The panel shown below the header when an action trigger is open.\n * @csspart secondary-navigation - The container that wraps the slotted secondary navigation.\n *\n * @cssproperty --panel-width - The width of an open action panel above `mobile-breakpoint`. Below it, panels are\n * always full width. Defaults to `50%`.\n *\n * @animation header.show - The animation to use when an action panel opens.\n * @animation header.hide - The animation to use when an action panel closes.\n */",
+          "documentation": "https://cordwainer.dev/components/header",
+          "status": "experimental",
+          "since": "1.3",
+          "dependencies": [
+            "cw-icon-button"
+          ],
+          "animations": [
+            {
+              "name": "header.show",
+              "description": "The animation to use when an action panel opens."
+            },
+            {
+              "name": "header.hide",
+              "description": "The animation to use when an action panel closes."
+            }
+          ]
         }
       ],
       "exports": [
@@ -9976,8 +10491,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwFormatNumber",
-            "module": "components/format-number/format-number.js"
+            "name": "CwHeader",
+            "module": "components/header/header.js"
           }
         }
       ]
@@ -10273,6 +10788,15 @@
               "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
               "attribute": "download"
             },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The `rel` attribute for the link. Only used when `href` is set. Defaults to `noreferrer noopener` when `target`\nis set and this is left unset — pass an explicit value (e.g. `me noreferrer noopener`) to override it.",
+              "attribute": "rel"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -10405,6 +10929,14 @@
               "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
               "fieldName": "download"
             },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The `rel` attribute for the link. Only used when `href` is set. Defaults to `noreferrer noopener` when `target`\nis set and this is left unset — pass an explicit value (e.g. `me noreferrer noopener`) to override it.",
+              "fieldName": "rel"
+            },
             {
               "name": "label",
               "type": {
@@ -18235,6 +18767,190 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/social-link/social-link.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CwSocialLink",
+          "cssParts": [
+            {
+              "description": "The internal `<cw-icon-button>`'s exported `base` part.",
+              "name": "base"
+            },
+            {
+              "description": "An alias of `base`, kept for consistency with other components that forward an icon-button's exported `base` part.",
+              "name": "base__icon-button"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'cw-icon-button': CwIconButton }"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The URL of the profile to link to.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top'"
+              },
+              "default": "'_blank'",
+              "description": "Tells the browser where to open the link. Defaults to a new tab, since a social link always points off-site.",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute for the link. Defaults to `noreferrer noopener`. To mark this link as a verified profile\nreference — the IndieWeb `rel=\"me\"` convention Mastodon and the wider fediverse use for identity verification —\ninclude `me` yourself, e.g. `rel=\"me noreferrer noopener\"`.",
+              "attribute": "rel"
+            },
+            {
+              "kind": "field",
+              "name": "platform",
+              "type": {
+                "text": "Platform | undefined"
+              },
+              "description": "One of the common social/fediverse platforms. When set, both the icon and the accessible `label` default to\nthat platform's — set `name`/`library` and/or `label` explicitly to override either, or to support a platform\nnot in this list.",
+              "attribute": "platform"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to draw. Defaults to `platform`'s icon when set.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "library",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of a registered custom icon library. Defaults to `system` when `platform` is set.",
+              "attribute": "library"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A description that gets read by assistive devices. Defaults to `platform`'s name when set.",
+              "attribute": "label"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The URL of the profile to link to.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top'"
+              },
+              "default": "'_blank'",
+              "description": "Tells the browser where to open the link. Defaults to a new tab, since a social link always points off-site.",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute for the link. Defaults to `noreferrer noopener`. To mark this link as a verified profile\nreference — the IndieWeb `rel=\"me\"` convention Mastodon and the wider fediverse use for identity verification —\ninclude `me` yourself, e.g. `rel=\"me noreferrer noopener\"`.",
+              "fieldName": "rel"
+            },
+            {
+              "name": "platform",
+              "type": {
+                "text": "Platform | undefined"
+              },
+              "description": "One of the common social/fediverse platforms. When set, both the icon and the accessible `label` default to\nthat platform's — set `name`/`library` and/or `label` explicitly to override either, or to support a platform\nnot in this list.",
+              "fieldName": "platform"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to draw. Defaults to `platform`'s icon when set.",
+              "fieldName": "name"
+            },
+            {
+              "name": "library",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of a registered custom icon library. Defaults to `system` when `platform` is set.",
+              "fieldName": "library"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A description that gets read by assistive devices. Defaults to `platform`'s name when set.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "CwElement",
+            "module": "/src/internal/cw-element.js"
+          },
+          "summary": "A link to a social or fediverse profile, rendered as a single icon. Purpose-built for this domain rather\nthan a generic icon-link: set `platform` for one of the common networks and both the icon and accessible label\nare filled in for you.",
+          "tagNameWithoutPrefix": "social-link",
+          "tagName": "cw-social-link",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary A link to a social or fediverse profile, rendered as a single icon. Purpose-built for this domain rather\n * than a generic icon-link: set `platform` for one of the common networks and both the icon and accessible label\n * are filled in for you.\n * @documentation https://cordwainer.dev/components/social-link\n * @status experimental\n * @since 1.3\n *\n * @dependency cw-icon-button\n *\n * @csspart base - The internal `<cw-icon-button>`'s exported `base` part.\n * @csspart base__icon-button - An alias of `base`, kept for consistency with other components that forward an\n * icon-button's exported `base` part.\n */",
+          "documentation": "https://cordwainer.dev/components/social-link",
+          "status": "experimental",
+          "since": "1.3",
+          "dependencies": [
+            "cw-icon-button"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CwSocialLink",
+            "module": "components/social-link/social-link.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/spinner/spinner.js",
@@ -23092,7 +23808,7 @@
   "package": {
     "name": "@cordwainer/cw-elements",
     "description": "Cordwainer Elements — Web Component Library, a hard fork of Shoelace (@shoelace-style/shoelace).",
-    "version": "1.3.0-alpha.2",
+    "version": "1.3.0-alpha.4",
     "author": "Matt Hand",
     "homepage": "https://cordwainer.dev",
     "license": "MIT"