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

package/dist/custom-elements.json

@@ -3012,54 +3012,148 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.js",
+      "path": "components/color-picker/color-picker.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "CwCheckbox",
+          "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"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The square container that wraps the checkbox's checked state.",
-              "name": "control"
+              "description": "The color picker's dropdown trigger.",
+              "name": "trigger"
             },
             {
-              "description": "Matches the control part when the checkbox is checked.",
-              "name": "control--checked"
+              "description": "The container that holds the swatches.",
+              "name": "swatches"
             },
             {
-              "description": "Matches the control part when the checkbox is indeterminate.",
-              "name": "control--indeterminate"
+              "description": "Each individual swatch.",
+              "name": "swatch"
             },
             {
-              "description": "The checked icon, an `<cw-icon>` element.",
-              "name": "checked-icon"
+              "description": "The color grid.",
+              "name": "grid"
             },
             {
-              "description": "The indeterminate icon, an `<cw-icon>` element.",
-              "name": "indeterminate-icon"
+              "description": "The color grid's handle.",
+              "name": "grid-handle"
             },
             {
-              "description": "The container that wraps the checkbox's label.",
-              "name": "label"
+              "description": "Hue and opacity sliders.",
+              "name": "slider"
             },
             {
-              "description": "The help text's wrapper.",
-              "name": "form-control-help-text"
+              "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 format button.",
+              "name": "format-button"
+            },
+            {
+              "description": "The format button's exported `button` part.",
+              "name": "format-button__base"
+            },
+            {
+              "description": "The format button's exported `prefix` part.",
+              "name": "format-button__prefix"
+            },
+            {
+              "description": "The format button's exported `label` part.",
+              "name": "format-button__label"
+            },
+            {
+              "description": "The format button's exported `suffix` part.",
+              "name": "format-button__suffix"
+            },
+            {
+              "description": "The format button's exported `caret` part.",
+              "name": "format-button__caret"
             }
           ],
           "slots": [
             {
-              "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"
+              "description": "The color picker's form label. Alternatively, you can use the `label` attribute.",
+              "name": "label"
             }
           ],
           "members": [
@@ -3070,768 +3164,962 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ 'cw-icon': CwIcon }"
+              "default": "{ 'cw-button-group': CwButtonGroup, 'cw-button': CwButton, 'cw-dropdown': CwDropdown, 'cw-icon': CwIcon, 'cw-input': CwInput, 'cw-visually-hidden': CwVisuallyHidden }"
             },
             {
               "kind": "field",
               "name": "formControlController",
               "privacy": "private",
               "readonly": true,
-              "default": "new FormControlController(this, { value: (control: CwCheckbox) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: CwCheckbox) => control.defaultChecked, setValue: (control: CwCheckbox, checked: boolean) => (control.checked = checked) })"
+              "default": "new FormControlController(this)"
             },
             {
               "kind": "field",
-              "name": "hasSlotController",
+              "name": "isSafeValue",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
               "privacy": "private",
               "readonly": true,
-              "default": "new HasSlotController(this, 'help-text')"
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "input",
+              "name": "base",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasFocus",
+              "name": "input",
               "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+                "text": "CwInput"
+              }
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "dropdown",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "title"
+                "text": "CwDropdown"
+              }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "previewButton",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "name"
+                "text": "HTMLButtonElement"
+              }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "trigger",
               "type": {
-                "text": "string"
-              },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "attribute": "value"
+                "text": "HTMLButtonElement"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "hasFocus",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "boolean"
               },
-              "default": "'medium'",
-              "description": "The checkbox's size.",
-              "attribute": "size",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "isDraggingGridHandle",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Disables the checkbox.",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "isEmpty",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "attribute": "checked",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "inputValue",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "defaultChecked",
+              "name": "hue",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "saturation",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "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
+              "privacy": "private",
+              "default": "100"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "brightness",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "attribute": "required",
-              "reflects": true
+              "privacy": "private",
+              "default": "100"
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "alpha",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "attribute": "help-text"
+              "privacy": "private",
+              "default": "100"
             },
             {
               "kind": "field",
-              "name": "validity",
-              "description": "Gets the validity state object",
-              "readonly": true
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "validationMessage",
-              "description": "Gets the validation message",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private"
-            },
-            {
-              "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"
-                }
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
               },
-              "description": "Gets the associated form, if one exists."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
+              "default": "''",
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
             {
-              "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"
+              "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"
             },
             {
-              "description": "Emitted when the checked state changes.",
-              "name": "cw-change",
-              "reactName": "onCwChange",
-              "eventName": "CwChangeEvent"
+              "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"
             },
             {
-              "description": "Emitted when the checkbox gains focus.",
-              "name": "cw-focus",
-              "reactName": "onCwFocus",
-              "eventName": "CwFocusEvent"
+              "kind": "field",
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Renders the color picker inline rather than in a dropdown.",
+              "attribute": "inline",
+              "reflects": true
             },
             {
-              "description": "Emitted when the checkbox receives input.",
-              "name": "cw-input",
-              "reactName": "onCwInput",
-              "eventName": "CwInputEvent"
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "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",
+              "kind": "field",
+              "name": "noFormatToggle",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "fieldName": "title"
+              "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 checkbox, submitted as a name/value pair with form data.",
-              "fieldName": "name"
+              "description": "The name of the form control, submitted as a name/value pair with form data.",
+              "attribute": "name"
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "fieldName": "value"
+              "default": "false",
+              "description": "Disables the color picker.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "hoist",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "boolean"
               },
-              "default": "'medium'",
-              "description": "The checkbox's size.",
-              "fieldName": "size"
+              "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"
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "opacity",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the checkbox.",
-              "fieldName": "disabled"
+              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+              "attribute": "opacity"
             },
             {
-              "name": "checked",
+              "kind": "field",
+              "name": "uppercase",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Draws the checkbox in a checked state.",
-              "fieldName": "checked"
+              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
+              "attribute": "uppercase"
             },
             {
-              "name": "indeterminate",
+              "kind": "field",
+              "name": "swatches",
               "type": {
-                "text": "boolean"
+                "text": "string | string[]"
               },
-              "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"
+              "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",
               "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
+              "attribute": "form",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the checkbox a required field.",
-              "fieldName": "required"
+              "description": "Makes the color picker a required field.",
+              "attribute": "required",
+              "reflects": true
             },
             {
-              "name": "help-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
-            }
-          ],
-          "superclass": {
-            "name": "CwElement",
-            "module": "/src/internal/cw-element.js"
-          },
-          "summary": "Checkboxes allow the user to toggle an option on or off.",
-          "tagNameWithoutPrefix": "checkbox",
-          "tagName": "cw-checkbox",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://cordwainer.dev/components/checkbox\n * @status stable\n * @since 1.0\n *\n * @dependency cw-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event cw-blur - Emitted when the checkbox loses focus.\n * @event cw-change - Emitted when the checked state changes.\n * @event cw-focus - Emitted when the checkbox gains focus.\n * @event cw-input - Emitted when the checkbox receives input.\n * @event cw-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<cw-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<cw-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */",
-          "documentation": "https://cordwainer.dev/components/checkbox",
-          "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "cw-icon"
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "CwCheckbox",
-            "module": "components/checkbox/checkbox.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/color-picker/color-picker.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "CwColorPicker",
-          "cssProperties": [
-            {
-              "description": "The width of the color grid.",
-              "name": "--grid-width"
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
-              "description": "The height of the color grid.",
-              "name": "--grid-height"
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
-              "description": "The size of the color grid's handle.",
-              "name": "--grid-handle-size"
+              "kind": "method",
+              "name": "handleCopy",
+              "privacy": "private"
             },
             {
-              "description": "The height of the hue and alpha sliders.",
-              "name": "--slider-height"
+              "kind": "field",
+              "name": "handleFocusIn",
+              "privacy": "private"
             },
             {
-              "description": "The diameter of the slider's handle.",
-              "name": "--slider-handle-size"
+              "kind": "field",
+              "name": "handleFocusOut",
+              "privacy": "private"
             },
             {
-              "description": "The size of each predefined color swatch.",
-              "name": "--swatch-size"
-            }
-          ],
-          "cssParts": [
+              "kind": "method",
+              "name": "handleFormatToggle",
+              "privacy": "private"
+            },
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "kind": "method",
+              "name": "handleAlphaDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The color picker's dropdown trigger.",
-              "name": "trigger"
+              "kind": "method",
+              "name": "handleHueDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The container that holds the swatches.",
-              "name": "swatches"
+              "kind": "method",
+              "name": "handleGridDrag",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "PointerEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "Each individual swatch.",
-              "name": "swatch"
+              "kind": "method",
+              "name": "handleAlphaKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The color grid.",
-              "name": "grid"
+              "kind": "method",
+              "name": "handleHueKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The color grid's handle.",
-              "name": "grid-handle"
+              "kind": "method",
+              "name": "handleGridKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "Hue and opacity sliders.",
-              "name": "slider"
+              "kind": "method",
+              "name": "handleInputChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CwChangeEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "Hue and opacity slider handles.",
-              "name": "slider-handle"
+              "kind": "method",
+              "name": "handleInputInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CwInputEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The hue slider.",
-              "name": "hue-slider"
+              "kind": "method",
+              "name": "handleInputKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The hue slider's handle.",
-              "name": "hue-slider-handle"
+              "kind": "method",
+              "name": "handleInputInvalid",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
-              "description": "The opacity slider.",
-              "name": "opacity-slider"
+              "kind": "method",
+              "name": "handleTouchMove",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "TouchEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The opacity slider's handle.",
-              "name": "opacity-slider-handle"
+              "kind": "method",
+              "name": "parseColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "colorString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "description": "The preview color.",
-              "name": "preview"
+              "kind": "method",
+              "name": "setColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "colorString",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "description": "The text input.",
-              "name": "input"
+              "kind": "method",
+              "name": "setLetterCase",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "string",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "description": "The eye dropper button.",
-              "name": "eye-dropper-button"
+              "kind": "method",
+              "name": "syncValues",
+              "privacy": "private"
             },
             {
-              "description": "The eye dropper button's exported `button` part.",
-              "name": "eye-dropper-button__base"
+              "kind": "method",
+              "name": "handleAfterHide",
+              "privacy": "private"
             },
             {
-              "description": "The eye dropper button's exported `prefix` part.",
-              "name": "eye-dropper-button__prefix"
+              "kind": "method",
+              "name": "handleEyeDropper",
+              "privacy": "private"
             },
             {
-              "description": "The eye dropper button's exported `label` part.",
-              "name": "eye-dropper-button__label"
+              "kind": "method",
+              "name": "selectSwatch",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "color",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "description": "The eye dropper button's exported `suffix` part.",
-              "name": "eye-dropper-button__suffix"
+              "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's exported `caret` part.",
-              "name": "eye-dropper-button__caret"
+              "kind": "method",
+              "name": "stopNestedEventPropagation",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
             },
             {
-              "description": "The format button.",
-              "name": "format-button"
+              "kind": "method",
+              "name": "handleFormatChange"
             },
             {
-              "description": "The format button's exported `button` part.",
-              "name": "format-button__base"
+              "kind": "method",
+              "name": "handleOpacityChange"
             },
             {
-              "description": "The format button's exported `prefix` part.",
-              "name": "format-button__prefix"
+              "kind": "method",
+              "name": "handleValueChange",
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "description": "The format button's exported `label` part.",
-              "name": "format-button__label"
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the color picker."
             },
             {
-              "description": "The format button's exported `suffix` part.",
-              "name": "format-button__suffix"
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the color picker."
             },
             {
-              "description": "The format button's exported `caret` part.",
-              "name": "format-button__caret"
-            }
-          ],
-          "slots": [
+              "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 color picker's form label. Alternatively, you can use the `label` attribute.",
-              "name": "label"
-            }
-          ],
-          "members": [
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
             {
-              "kind": "field",
-              "name": "dependencies",
-              "type": {
-                "text": "object"
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
               },
-              "static": true,
-              "default": "{ 'cw-button-group': CwButtonGroup, 'cw-button': CwButton, 'cw-dropdown': CwDropdown, 'cw-icon': CwIcon, 'cw-input': CwInput, 'cw-visually-hidden': CwVisuallyHidden }"
+              "description": "Gets the associated form, if one exists."
             },
             {
-              "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this)"
+              "kind": "method",
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
             },
             {
-              "kind": "field",
-              "name": "isSafeValue",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "kind": "method",
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the color picker loses focus.",
+              "name": "cw-blur",
+              "reactName": "onCwBlur",
+              "eventName": "CwBlurEvent"
             },
             {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "description": "Emitted when the color picker's value changes.",
+              "name": "cw-change",
+              "reactName": "onCwChange",
+              "eventName": "CwChangeEvent"
             },
             {
-              "kind": "field",
-              "name": "base",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "description": "Emitted when the color picker receives focus.",
+              "name": "cw-focus",
+              "reactName": "onCwFocus",
+              "eventName": "CwFocusEvent"
             },
             {
-              "kind": "field",
-              "name": "input",
-              "type": {
-                "text": "CwInput"
-              }
+              "description": "Emitted when the color picker receives input.",
+              "name": "cw-input",
+              "reactName": "onCwInput",
+              "eventName": "CwInputEvent"
             },
             {
-              "kind": "field",
-              "name": "dropdown",
+              "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": "value",
               "type": {
-                "text": "CwDropdown"
-              }
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "previewButton",
+              "name": "label",
               "type": {
-                "text": "HTMLButtonElement"
-              }
+                "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": "trigger",
+              "name": "format",
               "type": {
-                "text": "HTMLButtonElement"
-              }
+                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
+              },
+              "default": "'hex'",
+              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
+              "fieldName": "format"
             },
             {
-              "kind": "field",
-              "name": "hasFocus",
+              "name": "inline",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Renders the color picker inline rather than in a dropdown.",
+              "fieldName": "inline"
             },
             {
-              "kind": "field",
-              "name": "isDraggingGridHandle",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "'small' | 'medium' | 'large'"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "'medium'",
+              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "isEmpty",
+              "name": "no-format-toggle",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "Removes the button that lets users toggle between format.",
+              "fieldName": "noFormatToggle"
             },
             {
-              "kind": "field",
-              "name": "inputValue",
+              "name": "name",
               "type": {
                 "text": "string"
               },
-              "privacy": "private",
-              "default": "''"
+              "default": "''",
+              "description": "The name of the form control, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "hue",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "0"
+              "default": "false",
+              "description": "Disables the color picker.",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "saturation",
+              "name": "hoist",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "100"
+              "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"
             },
             {
-              "kind": "field",
-              "name": "brightness",
+              "name": "opacity",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "100"
+              "default": "false",
+              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+              "fieldName": "opacity"
             },
             {
-              "kind": "field",
-              "name": "alpha",
+              "name": "uppercase",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "100"
+              "default": "false",
+              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
+              "fieldName": "uppercase"
             },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "swatches",
               "type": {
-                "text": "string"
+                "text": "string | 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": "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"
             },
             {
-              "kind": "field",
-              "name": "defaultValue",
+              "name": "form",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The default value of the form control. Primarily used for resetting the form control."
+              "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"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "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"
+              "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": ""
             },
+            {
+              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.",
+              "name": "help-text"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "format",
+              "name": "dependencies",
               "type": {
-                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
+                "text": "object"
               },
-              "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"
+              "static": true,
+              "default": "{ 'cw-icon': CwIcon }"
+            },
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, { value: (control: CwCheckbox) => (control.checked ? control.value || 'on' : undefined), defaultValue: (control: CwCheckbox) => control.defaultChecked, setValue: (control: CwCheckbox, checked: boolean) => (control.checked = checked) })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, 'help-text')"
             },
             {
               "kind": "field",
-              "name": "inline",
+              "name": "input",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Renders the color picker inline rather than in a dropdown.",
-              "attribute": "inline",
-              "reflects": true
+                "text": "HTMLInputElement"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "hasFocus",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "boolean"
               },
-              "default": "'medium'",
-              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
-              "attribute": "size",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "noFormatToggle",
+              "name": "title",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Removes the button that lets users toggle between format.",
-              "attribute": "no-format-toggle"
+              "default": "''",
+              "attribute": "title"
             },
             {
               "kind": "field",
@@ -3840,392 +4128,160 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The name of the form control, submitted as a name/value pair with form data.",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
               "attribute": "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.",
+              "attribute": "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.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "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.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "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"
-            },
-            {
-              "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"
+              "description": "Draws the checkbox in a checked state.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "form",
+              "name": "indeterminate",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "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",
+              "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": "required",
+              "name": "defaultChecked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the color picker a required field.",
-              "attribute": "required",
-              "reflects": true
-            },
-            {
-              "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"
-                  }
-                }
-              ]
+              "description": "The default value of the form control. Primarily used for resetting the form control."
             },
-            {
-              "kind": "method",
-              "name": "handleInputInvalid",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+            {
+              "kind": "field",
+              "name": "form",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "attribute": "form",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "handleTouchMove",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "TouchEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the checkbox a required field.",
+              "attribute": "required",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "parseColor",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "colorString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "attribute": "help-text"
             },
             {
-              "kind": "method",
-              "name": "setColor",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "colorString",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "validity",
+              "description": "Gets the validity state object",
+              "readonly": true
             },
             {
-              "kind": "method",
-              "name": "setLetterCase",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "string",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "validationMessage",
+              "description": "Gets the validation message",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "syncValues",
+              "name": "handleClick",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleAfterHide",
+              "name": "handleBlur",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleEyeDropper",
+              "name": "handleInput",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "selectSwatch",
+              "name": "handleInvalid",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "color",
+                  "name": "event",
                   "type": {
-                    "text": "string"
+                    "text": "Event"
                   }
                 }
               ]
             },
             {
               "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."
-            },
-            {
-              "kind": "method",
-              "name": "stopNestedEventPropagation",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
+              "name": "handleFocus",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleFormatChange"
+              "name": "handleDisabledChange"
             },
             {
               "kind": "method",
-              "name": "handleOpacityChange"
+              "name": "handleStateChange"
             },
             {
               "kind": "method",
-              "name": "handleValueChange",
-              "parameters": [
-                {
-                  "name": "oldValue",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "name": "click",
+              "description": "Simulates a click on the checkbox."
             },
             {
               "kind": "method",
@@ -4239,26 +4295,12 @@
                   }
                 }
               ],
-              "description": "Sets focus on the color picker."
+              "description": "Sets focus on the checkbox."
             },
             {
               "kind": "method",
               "name": "blur",
-              "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."
+              "description": "Removes focus from the checkbox."
             },
             {
               "kind": "method",
@@ -4291,30 +4333,30 @@
                   }
                 }
               ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
+              "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 color picker loses focus.",
+              "description": "Emitted when the checkbox loses focus.",
               "name": "cw-blur",
               "reactName": "onCwBlur",
               "eventName": "CwBlurEvent"
             },
             {
-              "description": "Emitted when the color picker's value changes.",
+              "description": "Emitted when the checked state changes.",
               "name": "cw-change",
               "reactName": "onCwChange",
               "eventName": "CwChangeEvent"
             },
             {
-              "description": "Emitted when the color picker receives focus.",
+              "description": "Emitted when the checkbox gains focus.",
               "name": "cw-focus",
               "reactName": "onCwFocus",
               "eventName": "CwFocusEvent"
             },
             {
-              "description": "Emitted when the color picker receives input.",
+              "description": "Emitted when the checkbox receives input.",
               "name": "cw-input",
               "reactName": "onCwInput",
               "eventName": "CwInputEvent"
@@ -4328,40 +4370,29 @@
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "title",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The current value of the color picker. The value's format will vary based the `format` attribute. To get the value\nin a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form\ndata.",
-              "fieldName": "value"
+              "fieldName": "title"
             },
             {
-              "name": "label",
+              "name": "name",
               "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"
-            },
-            {
-              "name": "format",
-              "type": {
-                "text": "'hex' | 'rgb' | 'hsl' | 'hsv'"
-              },
-              "default": "'hex'",
-              "description": "The format to use. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA respectively. The color\npicker will accept user input in any format (including CSS color names) and convert it to the desired format.",
-              "fieldName": "format"
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "name"
             },
             {
-              "name": "inline",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Renders the color picker inline rather than in a dropdown.",
-              "fieldName": "inline"
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "fieldName": "value"
             },
             {
               "name": "size",
@@ -4369,71 +4400,35 @@
                 "text": "'small' | 'medium' | 'large'"
               },
               "default": "'medium'",
-              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+              "description": "The checkbox's size.",
               "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 color picker.",
+              "description": "Disables the checkbox.",
               "fieldName": "disabled"
             },
             {
-              "name": "hoist",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
-            },
-            {
-              "name": "opacity",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
-              "fieldName": "opacity"
-            },
-            {
-              "name": "uppercase",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
-              "fieldName": "uppercase"
+              "description": "Draws the checkbox in a checked state.",
+              "fieldName": "checked"
             },
             {
-              "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.",
-              "fieldName": "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"
             },
             {
               "name": "form",
@@ -4450,28 +4445,33 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes the color picker a required field.",
+              "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"
             }
           ],
           "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",
+          "summary": "Checkboxes allow the user to toggle an option on or off.",
+          "tagNameWithoutPrefix": "checkbox",
+          "tagName": "cw-checkbox",
           "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",
+          "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-button",
-            "cw-button-group",
-            "cw-dropdown",
-            "cw-input",
-            "cw-visually-hidden"
+            "cw-icon"
           ]
         }
       ],
@@ -4480,8 +4480,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwColorPicker",
-            "module": "components/color-picker/color-picker.js"
+            "name": "CwCheckbox",
+            "module": "components/checkbox/checkbox.js"
           }
         }
       ]
@@ -5943,259 +5943,59 @@
               "fieldName": "errorLabel"
             },
             {
-              "name": "feedback-duration",
-              "type": {
-                "text": "number"
-              },
-              "default": "1000",
-              "description": "The length of time to show feedback before restoring the default trigger.",
-              "fieldName": "feedbackDuration"
-            },
-            {
-              "name": "tooltip-placement",
-              "type": {
-                "text": "'top' | 'right' | 'bottom' | 'left'"
-              },
-              "default": "'top'",
-              "description": "The preferred placement of the tooltip.",
-              "fieldName": "tooltipPlacement"
-            },
-            {
-              "name": "hoist",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "fieldName": "hoist"
-            }
-          ],
-          "superclass": {
-            "name": "CwElement",
-            "module": "/src/internal/cw-element.js"
-          },
-          "summary": "Copies text data to the clipboard when the user clicks the trigger.",
-          "tagNameWithoutPrefix": "copy-button",
-          "tagName": "cw-copy-button",
-          "customElement": true,
-          "jsDoc": "/**\n * @summary Copies text data to the clipboard when the user clicks the trigger.\n * @documentation https://cordwainer.dev/components/copy\n * @status experimental\n * @since 1.0\n *\n * @dependency cw-icon\n * @dependency cw-tooltip\n *\n * @event cw-copy - Emitted when the data has been copied.\n * @event cw-error - Emitted when the data could not be copied.\n *\n * @slot copy-icon - The icon to show in the default copy state. Works best with `<cw-icon>`.\n * @slot success-icon - The icon to show when the content is copied. Works best with `<cw-icon>`.\n * @slot error-icon - The icon to show when a copy error occurs. Works best with `<cw-icon>`.\n *\n * @csspart button - The internal `<button>` element.\n * @csspart copy-icon - The container that holds the copy icon.\n * @csspart success-icon - The container that holds the success icon.\n * @csspart error-icon - The container that holds the error icon.\n * @csspart tooltip__base - The tooltip's exported `base` part.\n * @csspart tooltip__base__popup - The tooltip's exported `popup` part.\n * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.\n * @csspart tooltip__body - The tooltip's exported `body` part.\n *\n * @cssproperty --success-color - The color to use for success feedback.\n * @cssproperty --error-color - The color to use for error feedback.\n *\n * @animation copy.in - The animation to use when feedback icons animate in.\n * @animation copy.out - The animation to use when feedback icons animate out.\n */",
-          "documentation": "https://cordwainer.dev/components/copy",
-          "status": "experimental",
-          "since": "1.0",
-          "dependencies": [
-            "cw-icon",
-            "cw-tooltip"
-          ],
-          "animations": [
-            {
-              "name": "copy.in",
-              "description": "The animation to use when feedback icons animate in."
-            },
-            {
-              "name": "copy.out",
-              "description": "The animation to use when feedback icons animate out."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "CwCopyButton",
-            "module": "components/copy-button/copy-button.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/data-table/data-table-column.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "CwDataTableColumn",
-          "slots": [
-            {
-              "description": "This element has no rendered output; it is a configuration element only.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The key in each row data object that this column displays. Required.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The column header label. Falls back to `name` if not set.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "sortable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the column header clickable for sorting.",
-              "attribute": "sortable",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "width",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
-              "attribute": "width",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "minWidth",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A CSS min-width value for this column.",
-              "attribute": "min-width",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "align",
-              "type": {
-                "text": "'start' | 'center' | 'end'"
-              },
-              "default": "'start'",
-              "description": "Alignment of cell content within the column.",
-              "attribute": "align",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "hidden",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Hides the column without removing it from the DOM.",
-              "attribute": "hidden",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "renderCell",
-              "description": "A custom cell renderer. Called once per row with the cell value, the full row object,\nand this column element. Return a Lit `TemplateResult` or a plain string."
-            },
-            {
-              "kind": "field",
-              "name": "_renderCell",
-              "type": {
-                "text": "(\n    value: unknown,\n    row: Record<string, unknown>,\n    column: CwDataTableColumn\n  ) => TemplateResult | string | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handlePropertyChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The key in each row data object that this column displays. Required.",
-              "fieldName": "name"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The column header label. Falls back to `name` if not set.",
-              "fieldName": "label"
-            },
-            {
-              "name": "sortable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the column header clickable for sorting.",
-              "fieldName": "sortable"
-            },
-            {
-              "name": "width",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
-              "fieldName": "width"
-            },
-            {
-              "name": "min-width",
+              "name": "feedback-duration",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "A CSS min-width value for this column.",
-              "fieldName": "minWidth"
+              "default": "1000",
+              "description": "The length of time to show feedback before restoring the default trigger.",
+              "fieldName": "feedbackDuration"
             },
             {
-              "name": "align",
+              "name": "tooltip-placement",
               "type": {
-                "text": "'start' | 'center' | 'end'"
+                "text": "'top' | 'right' | 'bottom' | 'left'"
               },
-              "default": "'start'",
-              "description": "Alignment of cell content within the column.",
-              "fieldName": "align"
+              "default": "'top'",
+              "description": "The preferred placement of the tooltip.",
+              "fieldName": "tooltipPlacement"
             },
             {
-              "name": "hidden",
+              "name": "hoist",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Hides the column without removing it from the DOM.",
-              "fieldName": "hidden"
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+              "fieldName": "hoist"
             }
           ],
           "superclass": {
             "name": "CwElement",
             "module": "/src/internal/cw-element.js"
           },
-          "summary": "Data table columns define the columns of a [data table](/components/data-table).",
-          "tagNameWithoutPrefix": "data-table-column",
-          "tagName": "cw-data-table-column",
+          "summary": "Copies text data to the clipboard when the user clicks the trigger.",
+          "tagNameWithoutPrefix": "copy-button",
+          "tagName": "cw-copy-button",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Data table columns define the columns of a [data table](/components/data-table).\n * @documentation https://cordwainer.dev/components/data-table\n * @status experimental\n * @since 1.2\n *\n * @slot - This element has no rendered output; it is a configuration element only.\n */",
-          "documentation": "https://cordwainer.dev/components/data-table",
+          "jsDoc": "/**\n * @summary Copies text data to the clipboard when the user clicks the trigger.\n * @documentation https://cordwainer.dev/components/copy\n * @status experimental\n * @since 1.0\n *\n * @dependency cw-icon\n * @dependency cw-tooltip\n *\n * @event cw-copy - Emitted when the data has been copied.\n * @event cw-error - Emitted when the data could not be copied.\n *\n * @slot copy-icon - The icon to show in the default copy state. Works best with `<cw-icon>`.\n * @slot success-icon - The icon to show when the content is copied. Works best with `<cw-icon>`.\n * @slot error-icon - The icon to show when a copy error occurs. Works best with `<cw-icon>`.\n *\n * @csspart button - The internal `<button>` element.\n * @csspart copy-icon - The container that holds the copy icon.\n * @csspart success-icon - The container that holds the success icon.\n * @csspart error-icon - The container that holds the error icon.\n * @csspart tooltip__base - The tooltip's exported `base` part.\n * @csspart tooltip__base__popup - The tooltip's exported `popup` part.\n * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.\n * @csspart tooltip__body - The tooltip's exported `body` part.\n *\n * @cssproperty --success-color - The color to use for success feedback.\n * @cssproperty --error-color - The color to use for error feedback.\n *\n * @animation copy.in - The animation to use when feedback icons animate in.\n * @animation copy.out - The animation to use when feedback icons animate out.\n */",
+          "documentation": "https://cordwainer.dev/components/copy",
           "status": "experimental",
-          "since": "1.2"
+          "since": "1.0",
+          "dependencies": [
+            "cw-icon",
+            "cw-tooltip"
+          ],
+          "animations": [
+            {
+              "name": "copy.in",
+              "description": "The animation to use when feedback icons animate in."
+            },
+            {
+              "name": "copy.out",
+              "description": "The animation to use when feedback icons animate out."
+            }
+          ]
         }
       ],
       "exports": [
@@ -6203,8 +6003,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwDataTableColumn",
-            "module": "components/data-table/data-table-column.js"
+            "name": "CwCopyButton",
+            "module": "components/copy-button/copy-button.js"
           }
         }
       ]
@@ -6693,86 +6493,286 @@
               "fieldName": "sortColumn"
             },
             {
-              "name": "sort-direction",
+              "name": "sort-direction",
+              "type": {
+                "text": "'asc' | 'desc'"
+              },
+              "default": "'asc'",
+              "description": "The direction of the current sort.",
+              "fieldName": "sortDirection"
+            },
+            {
+              "name": "server-sort",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables client-side sorting. When set, the component emits `cw-sort-change` but does not\nreorder `data` itself — the consumer is responsible for fetching/providing sorted data.",
+              "fieldName": "serverSort"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows a loading spinner overlay over the table body.",
+              "fieldName": "loading"
+            },
+            {
+              "name": "striped",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Applies alternating row background colors.",
+              "fieldName": "striped"
+            },
+            {
+              "name": "bordered",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Adds borders between cells.",
+              "fieldName": "bordered"
+            },
+            {
+              "name": "caption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "An accessible caption for the table, rendered as a visually hidden `<caption>`.",
+              "fieldName": "caption"
+            },
+            {
+              "name": "empty-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "'No data found'",
+              "description": "Text shown in the empty state when `data` is empty and `loading` is false.",
+              "fieldName": "emptyText"
+            }
+          ],
+          "superclass": {
+            "name": "CwElement",
+            "module": "/src/internal/cw-element.js"
+          },
+          "summary": "Data tables display structured tabular data with support for sorting, row selection, and custom cell rendering.",
+          "tagNameWithoutPrefix": "data-table",
+          "tagName": "cw-data-table",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Data tables display structured tabular data with support for sorting, row selection, and custom cell rendering.\n * @documentation https://cordwainer.dev/components/data-table\n * @status experimental\n * @since 1.2\n *\n * @dependency cw-checkbox\n * @dependency cw-icon\n * @dependency cw-spinner\n *\n * @event {SortChangeEvent} cw-sort-change - Emitted when the user clicks a sortable column header. `detail: { column: string, direction: 'asc' | 'desc' }`.\n * @event {CwRowSelectionChangeEvent} cw-row-selection-change - Emitted when row selection changes. `detail: { selectedRows: object[] }`.\n * @event {RowClickEvent} cw-row-click - Emitted when a body row is clicked. `detail: { row: object, index: number }`.\n *\n * @slot - Place `<cw-data-table-column>` elements here to define columns.\n * @slot empty - Content shown when `data` is empty and not loading.\n *\n * @csspart base - The outer scrollable wrapper.\n * @csspart table - The `<table>` element.\n * @csspart header-row - The `<tr>` in `<thead>`.\n * @csspart header-cell - Each `<th>` element.\n * @csspart sort-button - The clickable button inside a sortable `<th>`.\n * @csspart sort-icon - The sort direction icon inside a sortable `<th>`.\n * @csspart body-row - Each `<tr>` in `<tbody>`.\n * @csspart body-row--selected - Added to body rows that are selected.\n * @csspart body-cell - Each `<td>` element.\n * @csspart checkbox-cell - The `<th>` or `<td>` that holds the selection checkbox.\n * @csspart loading - The loading overlay shown when `loading` is true.\n * @csspart empty - The empty-state container shown when `data` is empty.\n *\n * @cssproperty --cw-data-table-border-color - Border color used when `bordered` is set. Default: `var(--cw-color-neutral-200)`.\n * @cssproperty --cw-data-table-stripe-color - Alternate row background color when `striped` is set. Default: `var(--cw-color-neutral-50)`.\n * @cssproperty --cw-data-table-row-hover-color - Row background on hover. Default: `var(--cw-color-neutral-100)`.\n * @cssproperty --cw-data-table-selected-row-color - Selected row background. Default: `var(--cw-color-primary-50)`.\n * @cssproperty --cw-data-table-header-background - Header row background. Default: `var(--cw-color-neutral-50)`.\n */",
+          "documentation": "https://cordwainer.dev/components/data-table",
+          "status": "experimental",
+          "since": "1.2",
+          "dependencies": [
+            "cw-checkbox",
+            "cw-icon",
+            "cw-spinner"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CwDataTable",
+            "module": "components/data-table/data-table.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/data-table-column/data-table-column.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CwDataTableColumn",
+          "slots": [
+            {
+              "description": "This element has no rendered output; it is a configuration element only.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The key in each row data object that this column displays. Required.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The column header label. Falls back to `name` if not set.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "sortable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the column header clickable for sorting.",
+              "attribute": "sortable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
+              "attribute": "width",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "minWidth",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A CSS min-width value for this column.",
+              "attribute": "min-width",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "'start' | 'center' | 'end'"
+              },
+              "default": "'start'",
+              "description": "Alignment of cell content within the column.",
+              "attribute": "align",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the column without removing it from the DOM.",
+              "attribute": "hidden",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "renderCell",
+              "description": "A custom cell renderer. Called once per row with the cell value, the full row object,\nand this column element. Return a Lit `TemplateResult` or a plain string."
+            },
+            {
+              "kind": "field",
+              "name": "_renderCell",
+              "type": {
+                "text": "(\n    value: unknown,\n    row: Record<string, unknown>,\n    column: CwDataTableColumn\n  ) => TemplateResult | string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handlePropertyChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
               "type": {
-                "text": "'asc' | 'desc'"
+                "text": "string"
               },
-              "default": "'asc'",
-              "description": "The direction of the current sort.",
-              "fieldName": "sortDirection"
+              "default": "''",
+              "description": "The key in each row data object that this column displays. Required.",
+              "fieldName": "name"
             },
             {
-              "name": "server-sort",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Disables client-side sorting. When set, the component emits `cw-sort-change` but does not\nreorder `data` itself — the consumer is responsible for fetching/providing sorted data.",
-              "fieldName": "serverSort"
+              "default": "''",
+              "description": "The column header label. Falls back to `name` if not set.",
+              "fieldName": "label"
             },
             {
-              "name": "loading",
+              "name": "sortable",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Shows a loading spinner overlay over the table body.",
-              "fieldName": "loading"
+              "description": "Makes the column header clickable for sorting.",
+              "fieldName": "sortable"
             },
             {
-              "name": "striped",
+              "name": "width",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Applies alternating row background colors.",
-              "fieldName": "striped"
+              "default": "''",
+              "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
+              "fieldName": "width"
             },
             {
-              "name": "bordered",
+              "name": "min-width",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Adds borders between cells.",
-              "fieldName": "bordered"
+              "default": "''",
+              "description": "A CSS min-width value for this column.",
+              "fieldName": "minWidth"
             },
             {
-              "name": "caption",
+              "name": "align",
               "type": {
-                "text": "string"
+                "text": "'start' | 'center' | 'end'"
               },
-              "default": "''",
-              "description": "An accessible caption for the table, rendered as a visually hidden `<caption>`.",
-              "fieldName": "caption"
+              "default": "'start'",
+              "description": "Alignment of cell content within the column.",
+              "fieldName": "align"
             },
             {
-              "name": "empty-text",
+              "name": "hidden",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'No data found'",
-              "description": "Text shown in the empty state when `data` is empty and `loading` is false.",
-              "fieldName": "emptyText"
+              "default": "false",
+              "description": "Hides the column without removing it from the DOM.",
+              "fieldName": "hidden"
             }
           ],
           "superclass": {
             "name": "CwElement",
             "module": "/src/internal/cw-element.js"
           },
-          "summary": "Data tables display structured tabular data with support for sorting, row selection, and custom cell rendering.",
-          "tagNameWithoutPrefix": "data-table",
-          "tagName": "cw-data-table",
+          "summary": "Data table columns define the columns of a [data table](/components/data-table).",
+          "tagNameWithoutPrefix": "data-table-column",
+          "tagName": "cw-data-table-column",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Data tables display structured tabular data with support for sorting, row selection, and custom cell rendering.\n * @documentation https://cordwainer.dev/components/data-table\n * @status experimental\n * @since 1.2\n *\n * @dependency cw-checkbox\n * @dependency cw-icon\n * @dependency cw-spinner\n *\n * @event {SortChangeEvent} cw-sort-change - Emitted when the user clicks a sortable column header. `detail: { column: string, direction: 'asc' | 'desc' }`.\n * @event {CwRowSelectionChangeEvent} cw-row-selection-change - Emitted when row selection changes. `detail: { selectedRows: object[] }`.\n * @event {RowClickEvent} cw-row-click - Emitted when a body row is clicked. `detail: { row: object, index: number }`.\n *\n * @slot - Place `<cw-data-table-column>` elements here to define columns.\n * @slot empty - Content shown when `data` is empty and not loading.\n *\n * @csspart base - The outer scrollable wrapper.\n * @csspart table - The `<table>` element.\n * @csspart header-row - The `<tr>` in `<thead>`.\n * @csspart header-cell - Each `<th>` element.\n * @csspart sort-button - The clickable button inside a sortable `<th>`.\n * @csspart sort-icon - The sort direction icon inside a sortable `<th>`.\n * @csspart body-row - Each `<tr>` in `<tbody>`.\n * @csspart body-row--selected - Added to body rows that are selected.\n * @csspart body-cell - Each `<td>` element.\n * @csspart checkbox-cell - The `<th>` or `<td>` that holds the selection checkbox.\n * @csspart loading - The loading overlay shown when `loading` is true.\n * @csspart empty - The empty-state container shown when `data` is empty.\n *\n * @cssproperty --cw-data-table-border-color - Border color used when `bordered` is set. Default: `var(--cw-color-neutral-200)`.\n * @cssproperty --cw-data-table-stripe-color - Alternate row background color when `striped` is set. Default: `var(--cw-color-neutral-50)`.\n * @cssproperty --cw-data-table-row-hover-color - Row background on hover. Default: `var(--cw-color-neutral-100)`.\n * @cssproperty --cw-data-table-selected-row-color - Selected row background. Default: `var(--cw-color-primary-50)`.\n * @cssproperty --cw-data-table-header-background - Header row background. Default: `var(--cw-color-neutral-50)`.\n */",
-          "documentation": "https://cordwainer.dev/components/data-table",
+          "jsDoc": "/**\n * @summary Data table columns define the columns of a [data table](/components/data-table).\n * @documentation https://cordwainer.dev/components/data-table-column\n * @status experimental\n * @since 1.2\n *\n * @slot - This element has no rendered output; it is a configuration element only.\n */",
+          "documentation": "https://cordwainer.dev/components/data-table-column",
           "status": "experimental",
-          "since": "1.2",
-          "dependencies": [
-            "cw-checkbox",
-            "cw-icon",
-            "cw-spinner"
-          ]
+          "since": "1.2"
         }
       ],
       "exports": [
@@ -6780,8 +6780,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwDataTable",
-            "module": "components/data-table/data-table.js"
+            "name": "CwDataTableColumn",
+            "module": "components/data-table-column/data-table-column.js"
           }
         }
       ]
@@ -16441,125 +16441,381 @@
               "name": "handleHoverValueChange"
             },
             {
-              "kind": "method",
-              "name": "handleIsHoveringChange"
+              "kind": "method",
+              "name": "handleIsHoveringChange"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Sets focus on the rating."
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "description": "Removes focus from the rating."
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the rating's value changes.",
+              "name": "cw-change",
+              "reactName": "onCwChange",
+              "eventName": "CwChangeEvent"
+            },
+            {
+              "type": {
+                "text": "{ phase: 'start' | 'move' | 'end', value: number }"
+              },
+              "description": "Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.",
+              "name": "cw-hover",
+              "reactName": "onCwHover",
+              "eventName": "CwHoverEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label that describes the rating to assistive devices.",
+              "fieldName": "label"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The current rating.",
+              "fieldName": "value"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "5",
+              "description": "The highest rating to show.",
+              "fieldName": "max"
+            },
+            {
+              "name": "precision",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this\nattribute to `0.5`.",
+              "fieldName": "precision"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Makes the rating readonly.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the rating.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "getSymbol",
+              "type": {
+                "text": "(value: number) => string"
+              },
+              "description": "A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.\nThe function should return a string containing trusted HTML of the symbol to render at the specified value. Works\nwell with `<cw-icon>` elements.",
+              "fieldName": "getSymbol"
+            }
+          ],
+          "superclass": {
+            "name": "CwElement",
+            "module": "/src/internal/cw-element.js"
+          },
+          "summary": "Ratings give users a way to quickly view and provide feedback.",
+          "tagNameWithoutPrefix": "rating",
+          "tagName": "cw-rating",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Ratings give users a way to quickly view and provide feedback.\n * @documentation https://cordwainer.dev/components/rating\n * @status stable\n * @since 1.0\n *\n * @dependency cw-icon\n *\n * @event cw-change - Emitted when the rating's value changes.\n * @event {{ phase: 'start' | 'move' | 'end', value: number }} cw-hover - Emitted when the user hovers over a value. The\n *  `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the\n *  rating's value would be if the user were to commit to the hovered value.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --symbol-color - The inactive color for symbols.\n * @cssproperty --symbol-color-active - The active color for symbols.\n * @cssproperty --symbol-size - The size of symbols.\n * @cssproperty --symbol-spacing - The spacing to use around symbols.\n */",
+          "documentation": "https://cordwainer.dev/components/rating",
+          "status": "stable",
+          "since": "1.0",
+          "dependencies": [
+            "cw-icon"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CwRating",
+            "module": "components/rating/rating.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/relative-time/relative-time.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CwRelativeTime",
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "updateTimeout",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isoTime",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "relativeTime",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "date",
+              "type": {
+                "text": "Date | string"
+              },
+              "default": "new Date()",
+              "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "attribute": "date"
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Sets focus on the rating."
+              "kind": "field",
+              "name": "format",
+              "type": {
+                "text": "'long' | 'short' | 'narrow'"
+              },
+              "default": "'long'",
+              "description": "The formatting style to use.",
+              "attribute": "format"
             },
             {
-              "kind": "method",
-              "name": "blur",
-              "description": "Removes focus from the rating."
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the rating's value changes.",
-              "name": "cw-change",
-              "reactName": "onCwChange",
-              "eventName": "CwChangeEvent"
+              "kind": "field",
+              "name": "numeric",
+              "type": {
+                "text": "'always' | 'auto'"
+              },
+              "default": "'auto'",
+              "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
+              "attribute": "numeric"
             },
             {
+              "kind": "field",
+              "name": "sync",
               "type": {
-                "text": "{ phase: 'start' | 'move' | 'end', value: number }"
+                "text": "boolean"
               },
-              "description": "Emitted when the user hovers over a value. The `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the rating's value would be if the user were to commit to the hovered value.",
-              "name": "cw-hover",
-              "reactName": "onCwHover",
-              "eventName": "CwHoverEvent"
+              "default": "false",
+              "description": "Keep the displayed value up to date as time passes.",
+              "attribute": "sync"
             }
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "date",
               "type": {
-                "text": "string"
+                "text": "Date | string"
               },
-              "default": "''",
-              "description": "A label that describes the rating to assistive devices.",
-              "fieldName": "label"
+              "default": "new Date()",
+              "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "fieldName": "date"
             },
             {
-              "name": "value",
+              "name": "format",
               "type": {
-                "text": "number"
+                "text": "'long' | 'short' | 'narrow'"
               },
-              "default": "0",
-              "description": "The current rating.",
-              "fieldName": "value"
+              "default": "'long'",
+              "description": "The formatting style to use.",
+              "fieldName": "format"
             },
             {
-              "name": "max",
+              "name": "numeric",
               "type": {
-                "text": "number"
+                "text": "'always' | 'auto'"
               },
-              "default": "5",
-              "description": "The highest rating to show.",
-              "fieldName": "max"
+              "default": "'auto'",
+              "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
+              "fieldName": "numeric"
             },
             {
-              "name": "precision",
+              "name": "sync",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "default": "1",
-              "description": "The precision at which the rating will increase and decrease. For example, to allow half-star ratings, set this\nattribute to `0.5`.",
-              "fieldName": "precision"
+              "default": "false",
+              "description": "Keep the displayed value up to date as time passes.",
+              "fieldName": "sync"
+            }
+          ],
+          "superclass": {
+            "name": "CwElement",
+            "module": "/src/internal/cw-element.js"
+          },
+          "summary": "Outputs a localized time phrase relative to the current date and time.",
+          "tagNameWithoutPrefix": "relative-time",
+          "tagName": "cw-relative-time",
+          "customElement": true,
+          "jsDoc": "/**\n * @summary Outputs a localized time phrase relative to the current date and time.\n * @documentation https://cordwainer.dev/components/relative-time\n * @status stable\n * @since 1.0\n */",
+          "documentation": "https://cordwainer.dev/components/relative-time",
+          "status": "stable",
+          "since": "1.0"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CwRelativeTime",
+            "module": "components/relative-time/relative-time.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/resize-observer/resize-observer.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CwResizeObserver",
+          "slots": [
+            {
+              "description": "One or more elements to watch for resizing.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver"
+              },
+              "privacy": "private"
             },
             {
-              "name": "readonly",
+              "kind": "field",
+              "name": "observedElements",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement[]"
               },
-              "default": "false",
-              "description": "Makes the rating readonly.",
-              "fieldName": "readonly"
+              "privacy": "private",
+              "default": "[]"
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the rating.",
-              "fieldName": "disabled"
+              "description": "Disables the observer.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "getSymbol",
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "startObserver",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "stopObserver",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleDisabledChange"
+            }
+          ],
+          "events": [
+            {
               "type": {
-                "text": "(value: number) => string"
+                "text": "{ entries: ResizeObserverEntry[] }"
               },
-              "description": "A function that customizes the symbol to be rendered. The first and only argument is the rating's current value.\nThe function should return a string containing trusted HTML of the symbol to render at the specified value. Works\nwell with `<cw-icon>` elements.",
-              "fieldName": "getSymbol"
+              "description": "Emitted when the element is resized.",
+              "name": "cw-resize",
+              "reactName": "onCwResize",
+              "eventName": "CwResizeEvent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the observer.",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
             "name": "CwElement",
             "module": "/src/internal/cw-element.js"
           },
-          "summary": "Ratings give users a way to quickly view and provide feedback.",
-          "tagNameWithoutPrefix": "rating",
-          "tagName": "cw-rating",
+          "summary": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
+          "tagNameWithoutPrefix": "resize-observer",
+          "tagName": "cw-resize-observer",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Ratings give users a way to quickly view and provide feedback.\n * @documentation https://cordwainer.dev/components/rating\n * @status stable\n * @since 1.0\n *\n * @dependency cw-icon\n *\n * @event cw-change - Emitted when the rating's value changes.\n * @event {{ phase: 'start' | 'move' | 'end', value: number }} cw-hover - Emitted when the user hovers over a value. The\n *  `phase` property indicates when hovering starts, moves to a new value, or ends. The `value` property tells what the\n *  rating's value would be if the user were to commit to the hovered value.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --symbol-color - The inactive color for symbols.\n * @cssproperty --symbol-color-active - The active color for symbols.\n * @cssproperty --symbol-size - The size of symbols.\n * @cssproperty --symbol-spacing - The spacing to use around symbols.\n */",
-          "documentation": "https://cordwainer.dev/components/rating",
+          "jsDoc": "/**\n * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n * @documentation https://cordwainer.dev/components/resize-observer\n * @status stable\n * @since 1.0\n *\n * @slot - One or more elements to watch for resizing.\n *\n * @event {{ entries: ResizeObserverEntry[] }} cw-resize - Emitted when the element is resized.\n */",
+          "documentation": "https://cordwainer.dev/components/resize-observer",
           "status": "stable",
-          "since": "1.0",
-          "dependencies": [
-            "cw-icon"
-          ]
+          "since": "1.0"
         }
       ],
       "exports": [
@@ -16567,145 +16823,206 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwRating",
-            "module": "components/rating/rating.js"
+            "name": "CwResizeObserver",
+            "module": "components/resize-observer/resize-observer.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/relative-time/relative-time.js",
+      "path": "components/secondary-navigation/secondary-navigation.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "CwRelativeTime",
+          "name": "CwSecondaryNavigation",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper, a `<nav>` landmark element.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the slotted navigation items and the scroll buttons.",
+              "name": "nav"
+            },
+            {
+              "description": "The previous/next scroll buttons that show when items overflow, an `<cw-icon-button>`.",
+              "name": "scroll-button"
+            },
+            {
+              "description": "The starting scroll button.",
+              "name": "scroll-button--start"
+            },
+            {
+              "description": "The ending scroll button.",
+              "name": "scroll-button--end"
+            },
+            {
+              "description": "The scroll button's exported `base` part.",
+              "name": "scroll-button__base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more `<cw-secondary-navigation-item>` elements.",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
+              "name": "dependencies",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ 'cw-icon-button': CwIconButton }"
             },
             {
               "kind": "field",
-              "name": "updateTimeout",
+              "name": "resizeObserver",
               "type": {
-                "text": "number"
+                "text": "ResizeObserver"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "isoTime",
-              "type": {
-                "text": "string"
-              },
+              "name": "localize",
               "privacy": "private",
-              "default": "''"
+              "readonly": true,
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "relativeTime",
+              "name": "nav",
               "type": {
-                "text": "string"
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasScrollControls",
+              "type": {
+                "text": "boolean"
               },
               "privacy": "private",
-              "default": "''"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "date",
+              "name": "shouldHideScrollStartButton",
               "type": {
-                "text": "Date | string"
+                "text": "boolean"
               },
-              "default": "new Date()",
-              "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "attribute": "date"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "format",
+              "name": "shouldHideScrollEndButton",
               "type": {
-                "text": "'long' | 'short' | 'narrow'"
+                "text": "boolean"
               },
-              "default": "'long'",
-              "description": "The formatting style to use.",
-              "attribute": "format"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "numeric",
+              "name": "label",
               "type": {
-                "text": "'always' | 'auto'"
+                "text": "string"
               },
-              "default": "'auto'",
-              "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
-              "attribute": "numeric"
+              "default": "''",
+              "description": "The accessible label for the `<nav>` landmark. Defaults to a localized \"Secondary navigation\".",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "sync",
+              "name": "noScrollControls",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Keep the displayed value up to date as time passes.",
-              "attribute": "sync"
-            }
-          ],
-          "attributes": [
+              "description": "Disables the scroll arrows that appear when items overflow.",
+              "attribute": "no-scroll-controls"
+            },
             {
-              "name": "date",
-              "type": {
-                "text": "Date | string"
-              },
-              "default": "new Date()",
-              "description": "The date from which to calculate time from. If not set, the current date and time will be used. When passing a\nstring, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert\na date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "fieldName": "date"
+              "kind": "method",
+              "name": "handleScrollToStart",
+              "privacy": "private"
             },
             {
-              "name": "format",
+              "kind": "method",
+              "name": "handleScrollToEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "scrollOffset",
               "type": {
-                "text": "'long' | 'short' | 'narrow'"
+                "text": "number"
               },
-              "default": "'long'",
-              "description": "The formatting style to use.",
-              "fieldName": "format"
+              "privacy": "private",
+              "default": "1",
+              "description": "The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be,\nso we add one pixel of wiggle room to our calculations."
             },
             {
-              "name": "numeric",
+              "kind": "method",
+              "name": "scrollFromStart",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "isScrolledToEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateScrollButtons",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateScrollControls"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
               "type": {
-                "text": "'always' | 'auto'"
+                "text": "string"
               },
-              "default": "'auto'",
-              "description": "When `auto`, values such as \"yesterday\" and \"tomorrow\" will be shown when possible. When `always`, values such as\n\"1 day ago\" and \"in 1 day\" will be shown.",
-              "fieldName": "numeric"
+              "default": "''",
+              "description": "The accessible label for the `<nav>` landmark. Defaults to a localized \"Secondary navigation\".",
+              "fieldName": "label"
             },
             {
-              "name": "sync",
+              "name": "no-scroll-controls",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Keep the displayed value up to date as time passes.",
-              "fieldName": "sync"
+              "description": "Disables the scroll arrows that appear when items overflow.",
+              "fieldName": "noScrollControls"
             }
           ],
           "superclass": {
             "name": "CwElement",
             "module": "/src/internal/cw-element.js"
           },
-          "summary": "Outputs a localized time phrase relative to the current date and time.",
-          "tagNameWithoutPrefix": "relative-time",
-          "tagName": "cw-relative-time",
+          "summary": "Second-level site navigation for linking pages related to the current one, beneath a\n`<cw-primary-navigation>`. A flat, horizontal strip of links — unlike primary navigation, it has no\ndisclosure/dropdown items; overflow is handled with scroll buttons instead.",
+          "tagNameWithoutPrefix": "secondary-navigation",
+          "tagName": "cw-secondary-navigation",
           "customElement": true,
-          "jsDoc": "/**\n * @summary Outputs a localized time phrase relative to the current date and time.\n * @documentation https://cordwainer.dev/components/relative-time\n * @status stable\n * @since 1.0\n */",
-          "documentation": "https://cordwainer.dev/components/relative-time",
-          "status": "stable",
-          "since": "1.0"
+          "jsDoc": "/**\n * @summary Second-level site navigation for linking pages related to the current one, beneath a\n * `<cw-primary-navigation>`. A flat, horizontal strip of links — unlike primary navigation, it has no\n * disclosure/dropdown items; overflow is handled with scroll buttons instead.\n * @documentation https://cordwainer.dev/components/secondary-navigation\n * @status experimental\n * @since 1.3\n *\n * @dependency cw-icon-button\n *\n * @slot - One or more `<cw-secondary-navigation-item>` elements.\n *\n * @csspart base - The component's base wrapper, a `<nav>` landmark element.\n * @csspart nav - The container that wraps the slotted navigation items and the scroll buttons.\n * @csspart scroll-button - The previous/next scroll buttons that show when items overflow, an `<cw-icon-button>`.\n * @csspart scroll-button--start - The starting scroll button.\n * @csspart scroll-button--end - The ending scroll button.\n * @csspart scroll-button__base - The scroll button's exported `base` part.\n */",
+          "documentation": "https://cordwainer.dev/components/secondary-navigation",
+          "status": "experimental",
+          "since": "1.3",
+          "dependencies": [
+            "cw-icon-button"
+          ]
         }
       ],
       "exports": [
@@ -16713,109 +17030,125 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwRelativeTime",
-            "module": "components/relative-time/relative-time.js"
+            "name": "CwSecondaryNavigation",
+            "module": "components/secondary-navigation/secondary-navigation.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/resize-observer/resize-observer.js",
+      "path": "components/secondary-navigation-item/secondary-navigation-item.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "CwResizeObserver",
+          "name": "CwSecondaryNavigationItem",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The internal `<a>`, present only when `href` is set.",
+              "name": "link"
+            }
+          ],
           "slots": [
             {
-              "description": "One or more elements to watch for resizing.",
+              "description": "The item's label content (text, or an icon + text).",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "resizeObserver",
+              "name": "href",
               "type": {
-                "text": "ResizeObserver"
+                "text": "string | undefined"
               },
-              "privacy": "private"
+              "description": "The URL to navigate to.",
+              "attribute": "href"
             },
             {
               "kind": "field",
-              "name": "observedElements",
+              "name": "target",
               "type": {
-                "text": "HTMLElement[]"
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
               },
-              "privacy": "private",
-              "default": "[]"
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "attribute": "target"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute for the link. Only used when `href` is set.",
+              "attribute": "rel"
+            },
+            {
+              "kind": "field",
+              "name": "current",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the observer.",
-              "attribute": "disabled",
+              "description": "Indicates this item represents the current page. Reflects `aria-current=\"page\"` on the internal link. The\ncomponent has no router/URL awareness — consumers set this explicitly based on their own routing state.",
+              "attribute": "current",
               "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "method",
-              "name": "startObserver",
-              "privacy": "private"
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The URL to navigate to.",
+              "fieldName": "href"
             },
             {
-              "kind": "method",
-              "name": "stopObserver",
-              "privacy": "private"
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "fieldName": "target"
             },
             {
-              "kind": "method",
-              "name": "handleDisabledChange"
-            }
-          ],
-          "events": [
-            {
+              "name": "rel",
               "type": {
-                "text": "{ entries: ResizeObserverEntry[] }"
+                "text": "string"
               },
-              "description": "Emitted when the element is resized.",
-              "name": "cw-resize",
-              "reactName": "onCwResize",
-              "eventName": "CwResizeEvent"
-            }
-          ],
-          "attributes": [
+              "default": "'noreferrer noopener'",
+              "description": "The `rel` attribute for the link. Only used when `href` is set.",
+              "fieldName": "rel"
+            },
             {
-              "name": "disabled",
+              "name": "current",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the observer.",
-              "fieldName": "disabled"
+              "description": "Indicates this item represents the current page. Reflects `aria-current=\"page\"` on the internal link. The\ncomponent has no router/URL awareness — consumers set this explicitly based on their own routing state.",
+              "fieldName": "current"
             }
           ],
           "superclass": {
             "name": "CwElement",
             "module": "/src/internal/cw-element.js"
           },
-          "summary": "The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
-          "tagNameWithoutPrefix": "resize-observer",
-          "tagName": "cw-resize-observer",
+          "summary": "A link in a `<cw-secondary-navigation>`, pointing to a page related to the current one.",
+          "tagNameWithoutPrefix": "secondary-navigation-item",
+          "tagName": "cw-secondary-navigation-item",
           "customElement": true,
-          "jsDoc": "/**\n * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n * @documentation https://cordwainer.dev/components/resize-observer\n * @status stable\n * @since 1.0\n *\n * @slot - One or more elements to watch for resizing.\n *\n * @event {{ entries: ResizeObserverEntry[] }} cw-resize - Emitted when the element is resized.\n */",
-          "documentation": "https://cordwainer.dev/components/resize-observer",
-          "status": "stable",
-          "since": "1.0"
+          "jsDoc": "/**\n * @summary A link in a `<cw-secondary-navigation>`, pointing to a page related to the current one.\n * @documentation https://cordwainer.dev/components/secondary-navigation-item\n * @status experimental\n * @since 1.3\n *\n * @slot - The item's label content (text, or an icon + text).\n *\n * @csspart base - The component's base wrapper.\n * @csspart link - The internal `<a>`, present only when `href` is set.\n */",
+          "documentation": "https://cordwainer.dev/components/secondary-navigation-item",
+          "status": "experimental",
+          "since": "1.3"
         }
       ],
       "exports": [
@@ -16823,8 +17156,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CwResizeObserver",
-            "module": "components/resize-observer/resize-observer.js"
+            "name": "CwSecondaryNavigationItem",
+            "module": "components/secondary-navigation-item/secondary-navigation-item.js"
           }
         }
       ]
@@ -22759,7 +23092,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.1",
+    "version": "1.3.0-alpha.2",
     "author": "Matt Hand",
     "homepage": "https://cordwainer.dev",
     "license": "MIT"