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

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,981 +3070,747 @@
                 "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
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handleCopy",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleFocusIn",
-              "privacy": "private"
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "handleFocusOut",
-              "privacy": "private"
+              "description": "The width of the color grid.",
+              "name": "--grid-width"
             },
             {
-              "kind": "method",
-              "name": "handleFormatToggle",
-              "privacy": "private"
+              "description": "The height of the color grid.",
+              "name": "--grid-height"
             },
             {
-              "kind": "method",
-              "name": "handleAlphaDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "description": "The size of the color grid's handle.",
+              "name": "--grid-handle-size"
             },
             {
-              "kind": "method",
-              "name": "handleHueDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "description": "The height of the hue and alpha sliders.",
+              "name": "--slider-height"
             },
             {
-              "kind": "method",
-              "name": "handleGridDrag",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "PointerEvent"
-                  }
-                }
-              ]
+              "description": "The diameter of the slider's handle.",
+              "name": "--slider-handle-size"
             },
             {
-              "kind": "method",
-              "name": "handleAlphaKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
+              "description": "The size of each predefined color swatch.",
+              "name": "--swatch-size"
+            }
+          ],
+          "cssParts": [
             {
-              "kind": "method",
-              "name": "handleHueKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The component's base wrapper.",
+              "name": "base"
             },
             {
-              "kind": "method",
-              "name": "handleGridKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The color picker's dropdown trigger.",
+              "name": "trigger"
             },
             {
-              "kind": "method",
-              "name": "handleInputChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CwChangeEvent"
-                  }
-                }
-              ]
+              "description": "The container that holds the swatches.",
+              "name": "swatches"
             },
             {
-              "kind": "method",
-              "name": "handleInputInput",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CwInputEvent"
-                  }
-                }
-              ]
+              "description": "Each individual swatch.",
+              "name": "swatch"
             },
             {
-              "kind": "method",
-              "name": "handleInputKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "description": "The color grid.",
+              "name": "grid"
             },
             {
-              "kind": "method",
-              "name": "handleInputInvalid",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "description": "The color grid's handle.",
+              "name": "grid-handle"
             },
             {
-              "kind": "method",
-              "name": "handleTouchMove",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "TouchEvent"
-                  }
-                }
-              ]
+              "description": "Hue and opacity sliders.",
+              "name": "slider"
             },
             {
-              "kind": "method",
-              "name": "parseColor",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "colorString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "Hue and opacity slider handles.",
+              "name": "slider-handle"
             },
             {
-              "kind": "method",
-              "name": "setColor",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "colorString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The hue slider.",
+              "name": "hue-slider"
             },
             {
-              "kind": "method",
-              "name": "setLetterCase",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "string",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The hue slider's handle.",
+              "name": "hue-slider-handle"
             },
             {
-              "kind": "method",
-              "name": "syncValues",
-              "privacy": "private"
+              "description": "The opacity slider.",
+              "name": "opacity-slider"
             },
             {
-              "kind": "method",
-              "name": "handleAfterHide",
-              "privacy": "private"
+              "description": "The opacity slider's handle.",
+              "name": "opacity-slider-handle"
             },
             {
-              "kind": "method",
-              "name": "handleEyeDropper",
-              "privacy": "private"
+              "description": "The preview color.",
+              "name": "preview"
             },
             {
-              "kind": "method",
-              "name": "selectSwatch",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "color",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The text input.",
+              "name": "input"
             },
             {
-              "kind": "method",
-              "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."
+              "description": "The eye dropper button.",
+              "name": "eye-dropper-button"
             },
             {
-              "kind": "method",
-              "name": "stopNestedEventPropagation",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
+              "description": "The eye dropper button's exported `button` part.",
+              "name": "eye-dropper-button__base"
             },
             {
-              "kind": "method",
-              "name": "handleFormatChange"
+              "description": "The eye dropper button's exported `prefix` part.",
+              "name": "eye-dropper-button__prefix"
             },
             {
-              "kind": "method",
-              "name": "handleOpacityChange"
+              "description": "The eye dropper button's exported `label` part.",
+              "name": "eye-dropper-button__label"
             },
             {
-              "kind": "method",
-              "name": "handleValueChange",
-              "parameters": [
-                {
-                  "name": "oldValue",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "description": "The eye dropper button's exported `suffix` part.",
+              "name": "eye-dropper-button__suffix"
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the color picker."
+              "description": "The eye dropper button's exported `caret` part.",
+              "name": "eye-dropper-button__caret"
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the color picker."
+              "description": "The format button.",
+              "name": "format-button"
             },
             {
-              "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."
+              "description": "The format button's exported `button` part.",
+              "name": "format-button__base"
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+              "description": "The format button's exported `prefix` part.",
+              "name": "format-button__prefix"
             },
             {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
-              },
-              "description": "Gets the associated form, if one exists."
+              "description": "The format button's exported `label` part.",
+              "name": "format-button__label"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              "description": "The format button's exported `suffix` part.",
+              "name": "format-button__suffix"
             },
             {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+              "description": "The format button's exported `caret` part.",
+              "name": "format-button__caret"
             }
           ],
-          "events": [
-            {
-              "description": "Emitted when the color picker loses focus.",
-              "name": "cw-blur",
-              "reactName": "onCwBlur",
-              "eventName": "CwBlurEvent"
-            },
-            {
-              "description": "Emitted when the color picker's value changes.",
-              "name": "cw-change",
-              "reactName": "onCwChange",
-              "eventName": "CwChangeEvent"
-            },
-            {
-              "description": "Emitted when the color picker receives focus.",
-              "name": "cw-focus",
-              "reactName": "onCwFocus",
-              "eventName": "CwFocusEvent"
-            },
-            {
-              "description": "Emitted when the color picker receives input.",
-              "name": "cw-input",
-              "reactName": "onCwInput",
-              "eventName": "CwInputEvent"
-            },
+          "slots": [
             {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "cw-invalid",
-              "reactName": "onCwInvalid",
-              "eventName": "CwInvalidEvent"
+              "description": "The color picker's form label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             }
           ],
-          "attributes": [
+          "members": [
             {
-              "name": "value",
+              "kind": "field",
+              "name": "dependencies",
               "type": {
-                "text": "string"
+                "text": "object"
               },
-              "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"
+              "static": true,
+              "default": "{ 'cw-button-group': CwButtonGroup, 'cw-button': CwButton, 'cw-dropdown': CwDropdown, 'cw-icon': CwIcon, 'cw-input': CwInput, 'cw-visually-hidden': CwVisuallyHidden }"
             },
             {
-              "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"
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this)"
             },
             {
-              "name": "format",
+              "kind": "field",
+              "name": "isSafeValue",
               "type": {
-                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
+                "text": "boolean"
               },
-              "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"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Renders the color picker inline rather than in a dropdown.",
-              "fieldName": "inline"
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "base",
               "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"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "no-format-toggle",
+              "kind": "field",
+              "name": "input",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Removes the button that lets users toggle between format.",
-              "fieldName": "noFormatToggle"
+                "text": "CwInput"
+              }
             },
             {
-              "name": "name",
+              "kind": "field",
+              "name": "dropdown",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the form control, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+                "text": "CwDropdown"
+              }
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "previewButton",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the color picker.",
-              "fieldName": "disabled"
+                "text": "HTMLButtonElement"
+              }
             },
             {
-              "name": "hoist",
+              "kind": "field",
+              "name": "trigger",
               "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"
+                "text": "HTMLButtonElement"
+              }
             },
             {
-              "name": "opacity",
+              "kind": "field",
+              "name": "hasFocus",
               "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"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "name": "uppercase",
+              "kind": "field",
+              "name": "isDraggingGridHandle",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
-              "fieldName": "uppercase"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "name": "swatches",
+              "kind": "field",
+              "name": "isEmpty",
               "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.",
-              "fieldName": "swatches"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "name": "form",
+              "kind": "field",
+              "name": "inputValue",
               "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"
+              "privacy": "private",
+              "default": "''"
             },
             {
-              "name": "required",
+              "kind": "field",
+              "name": "hue",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "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"
-            },
-            {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The checkbox's label.",
-              "name": ""
+              "privacy": "private",
+              "default": "0"
             },
-            {
-              "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",
+              "name": "saturation",
               "type": {
-                "text": "object"
+                "text": "number"
               },
-              "static": true,
-              "default": "{ 'cw-icon': CwIcon }"
+              "privacy": "private",
+              "default": "100"
             },
             {
               "kind": "field",
-              "name": "formControlController",
+              "name": "brightness",
+              "type": {
+                "text": "number"
+              },
               "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) })"
+              "default": "100"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
+              "name": "alpha",
+              "type": {
+                "text": "number"
+              },
               "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, 'help-text')"
+              "default": "100"
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "value",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "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"
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "defaultValue",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "title"
+              "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"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "format",
               "type": {
-                "text": "string"
+                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
               },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "name"
+              "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": "field",
-              "name": "value",
+              "name": "inline",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "value"
+              "default": "false",
+              "description": "Renders the color picker inline rather than in a dropdown.",
+              "attribute": "inline",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -4147,10 +3819,30 @@
                 "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.",
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "noFormatToggle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Removes the button that lets users toggle between format.",
+              "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.",
+              "attribute": "name"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -4158,40 +3850,49 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the checkbox.",
+              "description": "Disables the color picker.",
               "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "attribute": "checked",
-              "reflects": true
+              "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"
             },
             {
               "kind": "field",
-              "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.",
-              "attribute": "indeterminate",
-              "reflects": true
+              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+              "attribute": "opacity"
             },
             {
               "kind": "field",
-              "name": "defaultChecked",
+              "name": "uppercase",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
+              "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.",
+              "attribute": "swatches"
             },
             {
               "kind": "field",
@@ -4211,77 +3912,320 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the checkbox a required field.",
+              "description": "Makes the color picker a required field.",
               "attribute": "required",
               "reflects": true
             },
             {
-              "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": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleCopy",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusIn",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleFormatToggle",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleAlphaDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleHueDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleGridDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleAlphaKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleHueKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleGridKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInputChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CwChangeEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInputInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CwInputEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInputKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInputInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleTouchMove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "TouchEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "parseColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "colorString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "kind": "method",
+              "name": "setColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "colorString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
+              "kind": "method",
+              "name": "setLetterCase",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "string",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleClick",
+              "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": "handleStateChange"
+              "name": "handleFormatChange"
             },
             {
               "kind": "method",
-              "name": "click",
-              "description": "Simulates a click on the checkbox."
+              "name": "handleOpacityChange"
+            },
+            {
+              "kind": "method",
+              "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",
@@ -4444,34 +4449,29 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Makes the checkbox 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"
+              "default": "false",
+              "description": "Makes the color picker a required field.",
+              "fieldName": "required"
             }
           ],
           "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"
           }
         }
       ]
@@ -9556,193 +9556,417 @@
               "type": {
                 "text": "'numeric' | '2-digit'"
               },
-              "description": "The format for displaying the year.",
-              "attribute": "year"
+              "description": "The format for displaying the year.",
+              "attribute": "year"
+            },
+            {
+              "kind": "field",
+              "name": "month",
+              "type": {
+                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+              },
+              "description": "The format for displaying the month.",
+              "attribute": "month"
+            },
+            {
+              "kind": "field",
+              "name": "day",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the day.",
+              "attribute": "day"
+            },
+            {
+              "kind": "field",
+              "name": "hour",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the hour.",
+              "attribute": "hour"
+            },
+            {
+              "kind": "field",
+              "name": "minute",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the minute.",
+              "attribute": "minute"
+            },
+            {
+              "kind": "field",
+              "name": "second",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the second.",
+              "attribute": "second"
+            },
+            {
+              "kind": "field",
+              "name": "timeZoneName",
+              "type": {
+                "text": "'short' | 'long'"
+              },
+              "description": "The format for displaying the time.",
+              "attribute": "time-zone-name"
+            },
+            {
+              "kind": "field",
+              "name": "timeZone",
+              "type": {
+                "text": "string"
+              },
+              "description": "The time zone to express the time in.",
+              "attribute": "time-zone"
+            },
+            {
+              "kind": "field",
+              "name": "hourFormat",
+              "type": {
+                "text": "'auto' | '12' | '24'"
+              },
+              "default": "'auto'",
+              "description": "The format for displaying the hour.",
+              "attribute": "hour-format"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "date",
+              "type": {
+                "text": "Date | string"
+              },
+              "default": "new Date()",
+              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "fieldName": "date"
+            },
+            {
+              "name": "weekday",
+              "type": {
+                "text": "'narrow' | 'short' | 'long'"
+              },
+              "description": "The format for displaying the weekday.",
+              "fieldName": "weekday"
+            },
+            {
+              "name": "era",
+              "type": {
+                "text": "'narrow' | 'short' | 'long'"
+              },
+              "description": "The format for displaying the era.",
+              "fieldName": "era"
+            },
+            {
+              "name": "year",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the year.",
+              "fieldName": "year"
+            },
+            {
+              "name": "month",
+              "type": {
+                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+              },
+              "description": "The format for displaying the month.",
+              "fieldName": "month"
+            },
+            {
+              "name": "day",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the day.",
+              "fieldName": "day"
+            },
+            {
+              "name": "hour",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the hour.",
+              "fieldName": "hour"
+            },
+            {
+              "name": "minute",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the minute.",
+              "fieldName": "minute"
+            },
+            {
+              "name": "second",
+              "type": {
+                "text": "'numeric' | '2-digit'"
+              },
+              "description": "The format for displaying the second.",
+              "fieldName": "second"
+            },
+            {
+              "name": "time-zone-name",
+              "type": {
+                "text": "'short' | 'long'"
+              },
+              "description": "The format for displaying the time.",
+              "fieldName": "timeZoneName"
+            },
+            {
+              "name": "time-zone",
+              "type": {
+                "text": "string"
+              },
+              "description": "The time zone to express the time in.",
+              "fieldName": "timeZone"
+            },
+            {
+              "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": "month",
+              "name": "noGrouping",
               "type": {
-                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+                "text": "boolean"
               },
-              "description": "The format for displaying the month.",
-              "attribute": "month"
+              "default": "false",
+              "description": "Turns off grouping separators.",
+              "attribute": "no-grouping"
             },
             {
               "kind": "field",
-              "name": "day",
+              "name": "currency",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "string"
               },
-              "description": "The format for displaying the day.",
-              "attribute": "day"
+              "default": "'USD'",
+              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
+              "attribute": "currency"
             },
             {
               "kind": "field",
-              "name": "hour",
+              "name": "currencyDisplay",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
               },
-              "description": "The format for displaying the hour.",
-              "attribute": "hour"
+              "default": "'symbol'",
+              "description": "How to display the currency.",
+              "attribute": "currency-display"
             },
             {
               "kind": "field",
-              "name": "minute",
+              "name": "minimumIntegerDigits",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "number"
               },
-              "description": "The format for displaying the minute.",
-              "attribute": "minute"
+              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
+              "attribute": "minimum-integer-digits"
             },
             {
               "kind": "field",
-              "name": "second",
+              "name": "minimumFractionDigits",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "number"
               },
-              "description": "The format for displaying the second.",
-              "attribute": "second"
+              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
+              "attribute": "minimum-fraction-digits"
             },
             {
               "kind": "field",
-              "name": "timeZoneName",
+              "name": "maximumFractionDigits",
               "type": {
-                "text": "'short' | 'long'"
+                "text": "number"
               },
-              "description": "The format for displaying the time.",
-              "attribute": "time-zone-name"
+              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
+              "attribute": "maximum-fraction-digits"
             },
             {
               "kind": "field",
-              "name": "timeZone",
+              "name": "minimumSignificantDigits",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "The time zone to express the time in.",
-              "attribute": "time-zone"
+              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
+              "attribute": "minimum-significant-digits"
             },
             {
               "kind": "field",
-              "name": "hourFormat",
+              "name": "maximumSignificantDigits",
               "type": {
-                "text": "'auto' | '12' | '24'"
+                "text": "number"
               },
-              "default": "'auto'",
-              "description": "The format for displaying the hour.",
-              "attribute": "hour-format"
+              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
+              "attribute": "maximum-significant-digits"
             }
           ],
           "attributes": [
             {
-              "name": "date",
-              "type": {
-                "text": "Date | string"
-              },
-              "default": "new Date()",
-              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "fieldName": "date"
-            },
-            {
-              "name": "weekday",
-              "type": {
-                "text": "'narrow' | 'short' | 'long'"
-              },
-              "description": "The format for displaying the weekday.",
-              "fieldName": "weekday"
-            },
-            {
-              "name": "era",
+              "name": "value",
               "type": {
-                "text": "'narrow' | 'short' | 'long'"
+                "text": "number"
               },
-              "description": "The format for displaying the era.",
-              "fieldName": "era"
+              "default": "0",
+              "description": "The number to format.",
+              "fieldName": "value"
             },
             {
-              "name": "year",
+              "name": "type",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "'currency' | 'decimal' | 'percent'"
               },
-              "description": "The format for displaying the year.",
-              "fieldName": "year"
+              "default": "'decimal'",
+              "description": "The formatting style to use.",
+              "fieldName": "type"
             },
             {
-              "name": "month",
+              "name": "no-grouping",
               "type": {
-                "text": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+                "text": "boolean"
               },
-              "description": "The format for displaying the month.",
-              "fieldName": "month"
+              "default": "false",
+              "description": "Turns off grouping separators.",
+              "fieldName": "noGrouping"
             },
             {
-              "name": "day",
+              "name": "currency",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "string"
               },
-              "description": "The format for displaying the day.",
-              "fieldName": "day"
+              "default": "'USD'",
+              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
+              "fieldName": "currency"
             },
             {
-              "name": "hour",
+              "name": "currency-display",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
               },
-              "description": "The format for displaying the hour.",
-              "fieldName": "hour"
+              "default": "'symbol'",
+              "description": "How to display the currency.",
+              "fieldName": "currencyDisplay"
             },
             {
-              "name": "minute",
+              "name": "minimum-integer-digits",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "number"
               },
-              "description": "The format for displaying the minute.",
-              "fieldName": "minute"
+              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
+              "fieldName": "minimumIntegerDigits"
             },
             {
-              "name": "second",
+              "name": "minimum-fraction-digits",
               "type": {
-                "text": "'numeric' | '2-digit'"
+                "text": "number"
               },
-              "description": "The format for displaying the second.",
-              "fieldName": "second"
+              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
+              "fieldName": "minimumFractionDigits"
             },
             {
-              "name": "time-zone-name",
+              "name": "maximum-fraction-digits",
               "type": {
-                "text": "'short' | 'long'"
+                "text": "number"
               },
-              "description": "The format for displaying the time.",
-              "fieldName": "timeZoneName"
+              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
+              "fieldName": "maximumFractionDigits"
             },
             {
-              "name": "time-zone",
+              "name": "minimum-significant-digits",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "description": "The time zone to express the time in.",
-              "fieldName": "timeZone"
+              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
+              "fieldName": "minimumSignificantDigits"
             },
             {
-              "name": "hour-format",
+              "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 +9976,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 +10124,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"
             },
             {
-              "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": "field",
+              "name": "handleDocumentMouseDown",
+              "privacy": "private"
             },
             {
-              "name": "currency-display",
-              "type": {
-                "text": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
-              },
-              "default": "'symbol'",
-              "description": "How to display the currency.",
-              "fieldName": "currencyDisplay"
+              "kind": "method",
+              "name": "addOpenListeners",
+              "privacy": "private"
             },
             {
-              "name": "minimum-integer-digits",
+              "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"
+            },
+            {
+              "kind": "method",
+              "name": "handleActivePanelChange",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "HeaderAction['name'] | null"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "HeaderAction['name'] | null"
+                  }
+                }
+              ]
+            },
+            {
+              "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."
+            },
+            {
+              "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 +10380,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwFormatNumber",
-            "module": "components/format-number/format-number.js"
+            "name": "CwHeader",
+            "module": "components/header/header.js"
           }
         }
       ]
@@ -23092,7 +23496,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.3",
     "author": "Matt Hand",
     "homepage": "https://cordwainer.dev",
     "license": "MIT"