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

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@cordwainer/cw-elements",
-  "version": "1.3.0-alpha.0",
+  "version": "1.3.0-alpha.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1069,44 +1069,76 @@
           "js": { "properties": [], "events": [] }
         },
         {
-          "name": "cw-checkbox",
-          "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the checkbox loses focus.\n- **cw-change** - Emitted when the checked state changes.\n- **cw-focus** - Emitted when the checkbox gains focus.\n- **cw-input** - Emitted when the checkbox receives input.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - 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.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<cw-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<cw-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
+          "name": "cw-color-picker",
+          "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the color picker loses focus.\n- **cw-change** - Emitted when the color picker's value changes.\n- **cw-focus** - Emitted when the color picker receives focus.\n- **cw-input** - Emitted when the color picker receives input.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
           "doc-url": "",
           "attributes": [
-            { "name": "title", "value": { "type": "string", "default": "''" } },
             {
-              "name": "name",
-              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+              "name": "value",
+              "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.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "value",
-              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-              "value": { "type": "string" }
+              "name": "label",
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "format",
+              "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.",
+              "value": {
+                "type": "'hex' | 'rgb' | 'hsl' | 'hsv'",
+                "default": "'hex'"
+              }
+            },
+            {
+              "name": "inline",
+              "description": "Renders the color picker inline rather than in a dropdown.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "size",
-              "description": "The checkbox's size.",
+              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
               "value": {
                 "type": "'small' | 'medium' | 'large'",
                 "default": "'medium'"
               }
             },
+            {
+              "name": "no-format-toggle",
+              "description": "Removes the button that lets users toggle between format.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "The name of the form control, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
               "name": "disabled",
-              "description": "Disables the checkbox.",
+              "description": "Disables the color picker.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "checked",
-              "description": "Draws the checkbox in a checked state.",
+              "name": "hoist",
+              "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.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "indeterminate",
-              "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.",
+              "name": "opacity",
+              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "uppercase",
+              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "swatches",
+              "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.",
+              "value": { "type": "string | string[]", "default": "''" }
+            },
             {
               "name": "form",
               "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.",
@@ -1114,38 +1146,32 @@
             },
             {
               "name": "required",
-              "description": "Makes the checkbox a required field.",
+              "description": "Makes the color picker a required field.",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "help-text",
-              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "value": { "type": "string", "default": "''" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The checkbox's label." },
             {
-              "name": "help-text",
-              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute."
+              "name": "label",
+              "description": "The color picker's form label. Alternatively, you can use the `label` attribute."
             }
           ],
           "events": [
             {
               "name": "cw-blur",
-              "description": "Emitted when the checkbox loses focus."
+              "description": "Emitted when the color picker loses focus."
             },
             {
               "name": "cw-change",
-              "description": "Emitted when the checked state changes."
+              "description": "Emitted when the color picker's value changes."
             },
             {
               "name": "cw-focus",
-              "description": "Emitted when the checkbox gains focus."
+              "description": "Emitted when the color picker receives focus."
             },
             {
               "name": "cw-input",
-              "description": "Emitted when the checkbox receives input."
+              "description": "Emitted when the color picker receives input."
             },
             {
               "name": "cw-invalid",
@@ -1154,43 +1180,76 @@
           ],
           "js": {
             "properties": [
-              { "name": "input", "type": "HTMLInputElement" },
-              { "name": "title", "type": "string" },
+              { "name": "base", "type": "HTMLElement" },
+              { "name": "input", "type": "CwInput" },
+              { "name": "dropdown", "type": "CwDropdown" },
+              { "name": "previewButton", "type": "HTMLButtonElement" },
+              { "name": "trigger", "type": "HTMLButtonElement" },
               {
-                "name": "name",
-                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+                "name": "value",
+                "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.",
                 "type": "string"
               },
               {
-                "name": "value",
-                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "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.",
                 "type": "string"
               },
+              {
+                "name": "format",
+                "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.",
+                "type": "'hex' | 'rgb' | 'hsl' | 'hsv'"
+              },
+              {
+                "name": "inline",
+                "description": "Renders the color picker inline rather than in a dropdown.",
+                "type": "boolean"
+              },
               {
                 "name": "size",
-                "description": "The checkbox's size.",
+                "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
                 "type": "'small' | 'medium' | 'large'"
               },
+              {
+                "name": "noFormatToggle",
+                "description": "Removes the button that lets users toggle between format.",
+                "type": "boolean"
+              },
+              {
+                "name": "name",
+                "description": "The name of the form control, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
               {
                 "name": "disabled",
-                "description": "Disables the checkbox.",
+                "description": "Disables the color picker.",
                 "type": "boolean"
               },
               {
-                "name": "checked",
-                "description": "Draws the checkbox in a checked state.",
+                "name": "hoist",
+                "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.",
                 "type": "boolean"
               },
               {
-                "name": "indeterminate",
-                "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.",
+                "name": "opacity",
+                "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
                 "type": "boolean"
               },
               {
-                "name": "defaultChecked",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "name": "uppercase",
+                "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
                 "type": "boolean"
               },
+              {
+                "name": "swatches",
+                "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.",
+                "type": "string | string[]"
+              },
               {
                 "name": "form",
                 "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.",
@@ -1198,14 +1257,9 @@
               },
               {
                 "name": "required",
-                "description": "Makes the checkbox a required field.",
+                "description": "Makes the color picker a required field.",
                 "type": "boolean"
               },
-              {
-                "name": "helpText",
-                "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
-              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -1218,19 +1272,19 @@
             "events": [
               {
                 "name": "cw-blur",
-                "description": "Emitted when the checkbox loses focus."
+                "description": "Emitted when the color picker loses focus."
               },
               {
                 "name": "cw-change",
-                "description": "Emitted when the checked state changes."
+                "description": "Emitted when the color picker's value changes."
               },
               {
                 "name": "cw-focus",
-                "description": "Emitted when the checkbox gains focus."
+                "description": "Emitted when the color picker receives focus."
               },
               {
                 "name": "cw-input",
-                "description": "Emitted when the checkbox receives input."
+                "description": "Emitted when the color picker receives input."
               },
               {
                 "name": "cw-invalid",
@@ -1240,76 +1294,44 @@
           }
         },
         {
-          "name": "cw-color-picker",
-          "description": "Color pickers allow the user to select a color.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the color picker loses focus.\n- **cw-change** - Emitted when the color picker's value changes.\n- **cw-focus** - Emitted when the color picker receives focus.\n- **cw-input** - Emitted when the color picker receives input.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the color picker.\n- **blur()** - Removes focus from the color picker.\n- **getFormattedValue(format: _'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hsv' | 'hsva'_)** - Returns the current value as a string in the specified format.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The color picker's form label. Alternatively, you can use the `label` attribute.\n\n### **CSS Properties:**\n - **--grid-width** - The width of the color grid. _(default: undefined)_\n- **--grid-height** - The height of the color grid. _(default: undefined)_\n- **--grid-handle-size** - The size of the color grid's handle. _(default: undefined)_\n- **--slider-height** - The height of the hue and alpha sliders. _(default: undefined)_\n- **--slider-handle-size** - The diameter of the slider's handle. _(default: undefined)_\n- **--swatch-size** - The size of each predefined color swatch. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **trigger** - The color picker's dropdown trigger.\n- **swatches** - The container that holds the swatches.\n- **swatch** - Each individual swatch.\n- **grid** - The color grid.\n- **grid-handle** - The color grid's handle.\n- **slider** - Hue and opacity sliders.\n- **slider-handle** - Hue and opacity slider handles.\n- **hue-slider** - The hue slider.\n- **hue-slider-handle** - The hue slider's handle.\n- **opacity-slider** - The opacity slider.\n- **opacity-slider-handle** - The opacity slider's handle.\n- **preview** - The preview color.\n- **input** - The text input.\n- **eye-dropper-button** - The eye dropper button.\n- **eye-dropper-button__base** - The eye dropper button's exported `button` part.\n- **eye-dropper-button__prefix** - The eye dropper button's exported `prefix` part.\n- **eye-dropper-button__label** - The eye dropper button's exported `label` part.\n- **eye-dropper-button__suffix** - The eye dropper button's exported `suffix` part.\n- **eye-dropper-button__caret** - The eye dropper button's exported `caret` part.\n- **format-button** - The format button.\n- **format-button__base** - The format button's exported `button` part.\n- **format-button__prefix** - The format button's exported `prefix` part.\n- **format-button__label** - The format button's exported `label` part.\n- **format-button__suffix** - The format button's exported `suffix` part.\n- **format-button__caret** - The format button's exported `caret` part.",
+          "name": "cw-checkbox",
+          "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the checkbox loses focus.\n- **cw-change** - Emitted when the checked state changes.\n- **cw-focus** - Emitted when the checkbox gains focus.\n- **cw-input** - Emitted when the checkbox receives input.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - 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.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<cw-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<cw-icon>` element.\n- **label** - The container that wraps the checkbox's label.\n- **form-control-help-text** - The help text's wrapper.",
           "doc-url": "",
           "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
             {
-              "name": "value",
-              "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.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "label",
-              "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.",
+              "name": "name",
+              "description": "The name of the checkbox, submitted as a name/value pair with form data.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "format",
-              "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.",
-              "value": {
-                "type": "'hex' | 'rgb' | 'hsl' | 'hsv'",
-                "default": "'hex'"
-              }
-            },
-            {
-              "name": "inline",
-              "description": "Renders the color picker inline rather than in a dropdown.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "value",
+              "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+              "value": { "type": "string" }
             },
             {
               "name": "size",
-              "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+              "description": "The checkbox's size.",
               "value": {
                 "type": "'small' | 'medium' | 'large'",
                 "default": "'medium'"
               }
             },
-            {
-              "name": "no-format-toggle",
-              "description": "Removes the button that lets users toggle between format.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "name",
-              "description": "The name of the form control, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
             {
               "name": "disabled",
-              "description": "Disables the color picker.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "hoist",
-              "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.",
+              "description": "Disables the checkbox.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "opacity",
-              "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+              "name": "checked",
+              "description": "Draws the checkbox in a checked state.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "uppercase",
-              "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
+              "name": "indeterminate",
+              "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.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "swatches",
-              "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.",
-              "value": { "type": "string | string[]", "default": "''" }
-            },
             {
               "name": "form",
               "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.",
@@ -1317,32 +1339,38 @@
             },
             {
               "name": "required",
-              "description": "Makes the color picker a required field.",
+              "description": "Makes the checkbox a required field.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
             }
           ],
           "slots": [
+            { "name": "", "description": "The checkbox's label." },
             {
-              "name": "label",
-              "description": "The color picker's form label. Alternatively, you can use the `label` attribute."
+              "name": "help-text",
+              "description": "Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute."
             }
           ],
           "events": [
             {
               "name": "cw-blur",
-              "description": "Emitted when the color picker loses focus."
+              "description": "Emitted when the checkbox loses focus."
             },
             {
               "name": "cw-change",
-              "description": "Emitted when the color picker's value changes."
+              "description": "Emitted when the checked state changes."
             },
             {
               "name": "cw-focus",
-              "description": "Emitted when the color picker receives focus."
+              "description": "Emitted when the checkbox gains focus."
             },
             {
               "name": "cw-input",
-              "description": "Emitted when the color picker receives input."
+              "description": "Emitted when the checkbox receives input."
             },
             {
               "name": "cw-invalid",
@@ -1351,76 +1379,43 @@
           ],
           "js": {
             "properties": [
-              { "name": "base", "type": "HTMLElement" },
-              { "name": "input", "type": "CwInput" },
-              { "name": "dropdown", "type": "CwDropdown" },
-              { "name": "previewButton", "type": "HTMLButtonElement" },
-              { "name": "trigger", "type": "HTMLButtonElement" },
-              {
-                "name": "value",
-                "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.",
-                "type": "string"
-              },
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "title", "type": "string" },
               {
-                "name": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "name": "name",
+                "description": "The name of the checkbox, submitted as a name/value pair with form data.",
                 "type": "string"
               },
               {
-                "name": "label",
-                "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.",
+                "name": "value",
+                "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
                 "type": "string"
               },
-              {
-                "name": "format",
-                "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.",
-                "type": "'hex' | 'rgb' | 'hsl' | 'hsv'"
-              },
-              {
-                "name": "inline",
-                "description": "Renders the color picker inline rather than in a dropdown.",
-                "type": "boolean"
-              },
               {
                 "name": "size",
-                "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+                "description": "The checkbox's size.",
                 "type": "'small' | 'medium' | 'large'"
               },
-              {
-                "name": "noFormatToggle",
-                "description": "Removes the button that lets users toggle between format.",
-                "type": "boolean"
-              },
-              {
-                "name": "name",
-                "description": "The name of the form control, submitted as a name/value pair with form data.",
-                "type": "string"
-              },
               {
                 "name": "disabled",
-                "description": "Disables the color picker.",
+                "description": "Disables the checkbox.",
                 "type": "boolean"
               },
               {
-                "name": "hoist",
-                "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.",
+                "name": "checked",
+                "description": "Draws the checkbox in a checked state.",
                 "type": "boolean"
               },
               {
-                "name": "opacity",
-                "description": "Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA.",
+                "name": "indeterminate",
+                "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.",
                 "type": "boolean"
               },
               {
-                "name": "uppercase",
-                "description": "By default, values are lowercase. With this attribute, values will be uppercase instead.",
+                "name": "defaultChecked",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
                 "type": "boolean"
               },
-              {
-                "name": "swatches",
-                "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.",
-                "type": "string | string[]"
-              },
               {
                 "name": "form",
                 "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.",
@@ -1428,9 +1423,14 @@
               },
               {
                 "name": "required",
-                "description": "Makes the color picker a required field.",
+                "description": "Makes the checkbox a required field.",
                 "type": "boolean"
               },
+              {
+                "name": "helpText",
+                "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -1443,19 +1443,19 @@
             "events": [
               {
                 "name": "cw-blur",
-                "description": "Emitted when the color picker loses focus."
+                "description": "Emitted when the checkbox loses focus."
               },
               {
                 "name": "cw-change",
-                "description": "Emitted when the color picker's value changes."
+                "description": "Emitted when the checked state changes."
               },
               {
                 "name": "cw-focus",
-                "description": "Emitted when the color picker receives focus."
+                "description": "Emitted when the checkbox gains focus."
               },
               {
                 "name": "cw-input",
-                "description": "Emitted when the color picker receives input."
+                "description": "Emitted when the checkbox receives input."
               },
               {
                 "name": "cw-invalid",
@@ -1962,102 +1962,6 @@
             ]
           }
         },
-        {
-          "name": "cw-data-table-column",
-          "description": "Data table columns define the columns of a [data table](/components/data-table).\n---\n\n\n### **Slots:**\n - _default_ - This element has no rendered output; it is a configuration element only.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The key in each row data object that this column displays. Required.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "label",
-              "description": "The column header label. Falls back to `name` if not set.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "sortable",
-              "description": "Makes the column header clickable for sorting.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "width",
-              "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "min-width",
-              "description": "A CSS min-width value for this column.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "align",
-              "description": "Alignment of cell content within the column.",
-              "value": {
-                "type": "'start' | 'center' | 'end'",
-                "default": "'start'"
-              }
-            },
-            {
-              "name": "hidden",
-              "description": "Hides the column without removing it from the DOM.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "This element has no rendered output; it is a configuration element only."
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "name",
-                "description": "The key in each row data object that this column displays. Required.",
-                "type": "string"
-              },
-              {
-                "name": "label",
-                "description": "The column header label. Falls back to `name` if not set.",
-                "type": "string"
-              },
-              {
-                "name": "sortable",
-                "description": "Makes the column header clickable for sorting.",
-                "type": "boolean"
-              },
-              {
-                "name": "width",
-                "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
-                "type": "string"
-              },
-              {
-                "name": "minWidth",
-                "description": "A CSS min-width value for this column.",
-                "type": "string"
-              },
-              {
-                "name": "align",
-                "description": "Alignment of cell content within the column.",
-                "type": "'start' | 'center' | 'end'"
-              },
-              {
-                "name": "hidden",
-                "description": "Hides the column without removing it from the DOM.",
-                "type": "boolean"
-              },
-              {
-                "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."
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "cw-data-table",
           "description": "Data tables display structured tabular data with support for sorting, row selection, and custom cell rendering.\n---\n\n\n### **Events:**\n - **cw-sort-change** - Emitted when the user clicks a sortable column header. `detail: { column: string, direction: 'asc' | 'desc' }`.\n- **cw-row-selection-change** - Emitted when row selection changes. `detail: { selectedRows: object[] }`.\n- **cw-row-click** - Emitted when a body row is clicked. `detail: { row: object, index: number }`.\n\n### **Slots:**\n - _default_ - Place `<cw-data-table-column>` elements here to define columns.\n- **empty** - Content shown when `data` is empty and not loading.\n\n### **CSS Properties:**\n - **--cw-data-table-border-color** - Border color used when `bordered` is set. Default: `var(--cw-color-neutral-200)`. _(default: undefined)_\n- **--cw-data-table-stripe-color** - Alternate row background color when `striped` is set. Default: `var(--cw-color-neutral-50)`. _(default: undefined)_\n- **--cw-data-table-row-hover-color** - Row background on hover. Default: `var(--cw-color-neutral-100)`. _(default: undefined)_\n- **--cw-data-table-selected-row-color** - Selected row background. Default: `var(--cw-color-primary-50)`. _(default: undefined)_\n- **--cw-data-table-header-background** - Header row background. Default: `var(--cw-color-neutral-50)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The outer scrollable wrapper.\n- **table** - The `<table>` element.\n- **header-row** - The `<tr>` in `<thead>`.\n- **header-cell** - Each `<th>` element.\n- **sort-button** - The clickable button inside a sortable `<th>`.\n- **sort-icon** - The sort direction icon inside a sortable `<th>`.\n- **body-row** - Each `<tr>` in `<tbody>`.\n- **body-row--selected** - Added to body rows that are selected.\n- **body-cell** - Each `<td>` element.\n- **checkbox-cell** - The `<th>` or `<td>` that holds the selection checkbox.\n- **loading** - The loading overlay shown when `loading` is true.\n- **empty** - The empty-state container shown when `data` is empty.",
@@ -2214,16 +2118,112 @@
                 "description": "Emitted when the user clicks a sortable column header. `detail: { column: string, direction: 'asc' | 'desc' }`."
               },
               {
-                "name": "cw-row-selection-change",
-                "type": "CwRowSelectionChangeEvent",
-                "description": "Emitted when row selection changes. `detail: { selectedRows: object[] }`."
+                "name": "cw-row-selection-change",
+                "type": "CwRowSelectionChangeEvent",
+                "description": "Emitted when row selection changes. `detail: { selectedRows: object[] }`."
+              },
+              {
+                "name": "cw-row-click",
+                "type": "RowClickEvent",
+                "description": "Emitted when a body row is clicked. `detail: { row: object, index: number }`."
+              }
+            ]
+          }
+        },
+        {
+          "name": "cw-data-table-column",
+          "description": "Data table columns define the columns of a [data table](/components/data-table).\n---\n\n\n### **Slots:**\n - _default_ - This element has no rendered output; it is a configuration element only.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The key in each row data object that this column displays. Required.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "The column header label. Falls back to `name` if not set.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "sortable",
+              "description": "Makes the column header clickable for sorting.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "width",
+              "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "min-width",
+              "description": "A CSS min-width value for this column.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "align",
+              "description": "Alignment of cell content within the column.",
+              "value": {
+                "type": "'start' | 'center' | 'end'",
+                "default": "'start'"
+              }
+            },
+            {
+              "name": "hidden",
+              "description": "Hides the column without removing it from the DOM.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "This element has no rendered output; it is a configuration element only."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The key in each row data object that this column displays. Required.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "The column header label. Falls back to `name` if not set.",
+                "type": "string"
+              },
+              {
+                "name": "sortable",
+                "description": "Makes the column header clickable for sorting.",
+                "type": "boolean"
+              },
+              {
+                "name": "width",
+                "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
+                "type": "string"
+              },
+              {
+                "name": "minWidth",
+                "description": "A CSS min-width value for this column.",
+                "type": "string"
+              },
+              {
+                "name": "align",
+                "description": "Alignment of cell content within the column.",
+                "type": "'start' | 'center' | 'end'"
               },
               {
-                "name": "cw-row-click",
-                "type": "RowClickEvent",
-                "description": "Emitted when a body row is clicked. `detail: { row: object, index: number }`."
+                "name": "hidden",
+                "description": "Hides the column without removing it from the DOM.",
+                "type": "boolean"
+              },
+              {
+                "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."
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -4812,6 +4812,208 @@
             ]
           }
         },
+        {
+          "name": "cw-primary-navigation",
+          "description": "Top-level site navigation with a responsive hamburger disclosure for narrow viewports.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the mobile navigation panel opens.\n- **cw-after-show** - Emitted after the mobile navigation panel opens and all animations are complete.\n- **cw-hide** - Emitted when the mobile navigation panel closes.\n- **cw-after-hide** - Emitted after the mobile navigation panel closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the mobile navigation panel. No-op above `mobile-breakpoint`.\n- **hide()** - Closes the mobile navigation panel. No-op above `mobile-breakpoint`.\n\n### **Slots:**\n - _default_ - One or more `<cw-primary-navigation-item>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, a `<nav>` landmark element.\n- **toggle** - The hamburger toggle button, shown below `mobile-breakpoint`.\n- **menu** - The container that wraps the slotted navigation items.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "open",
+              "description": "Indicates whether or not the mobile navigation panel is open. Only meaningful below `mobile-breakpoint` — use\n`show()`/`hide()` to animate it, or toggle this attribute directly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The accessible label for the `<nav>` landmark. Defaults to a localized \"Main navigation\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "mobile-breakpoint",
+              "description": "The viewport width, in pixels, below which the hamburger toggle and collapsible panel engage.",
+              "value": { "type": "number", "default": "768" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<cw-primary-navigation-item>` elements."
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-show",
+              "description": "Emitted when the mobile navigation panel opens."
+            },
+            {
+              "name": "cw-after-show",
+              "description": "Emitted after the mobile navigation panel opens and all animations are complete."
+            },
+            {
+              "name": "cw-hide",
+              "description": "Emitted when the mobile navigation panel closes."
+            },
+            {
+              "name": "cw-after-hide",
+              "description": "Emitted after the mobile navigation panel closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "menu", "type": "HTMLElement" },
+              { "name": "defaultSlot", "type": "HTMLSlotElement" },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the mobile navigation panel is open. Only meaningful below `mobile-breakpoint` — use\n`show()`/`hide()` to animate it, or toggle this attribute directly.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The accessible label for the `<nav>` landmark. Defaults to a localized \"Main navigation\".",
+                "type": "string"
+              },
+              {
+                "name": "mobileBreakpoint",
+                "description": "The viewport width, in pixels, below which the hamburger toggle and collapsible panel engage.",
+                "type": "number"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-show",
+                "description": "Emitted when the mobile navigation panel opens."
+              },
+              {
+                "name": "cw-after-show",
+                "description": "Emitted after the mobile navigation panel opens and all animations are complete."
+              },
+              {
+                "name": "cw-hide",
+                "description": "Emitted when the mobile navigation panel closes."
+              },
+              {
+                "name": "cw-after-hide",
+                "description": "Emitted after the mobile navigation panel closes and all animations are complete."
+              }
+            ]
+          }
+        },
+        {
+          "name": "cw-primary-navigation-item",
+          "description": "A top-level entry in a `<cw-primary-navigation>`, rendered as a link or, when it has a\n`<cw-primary-navigation-menu>` slotted in, a disclosure trigger for a dropdown of sub-links.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the item's dropdown opens.\n- **cw-after-show** - Emitted after the item's dropdown opens and all animations are complete.\n- **cw-hide** - Emitted when the item's dropdown closes.\n- **cw-after-hide** - Emitted after the item's dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Opens the item's dropdown, if it has one. No-op for link/plain items.\n- **hide()** - Closes the item's dropdown, if it has one. No-op for link/plain items.\n\n### **Slots:**\n - _default_ - The item's label content (text, or an icon + text).\n- **menu** - A `<cw-primary-navigation-menu>` with this item's dropdown links. Its presence switches the item from a link to a disclosure trigger. Ignored when `href` is also set.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The internal `<a>`, present only when `href` is set.\n- **trigger** - The internal `<cw-dropdown>`, present only when a dropdown menu is slotted in.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "The URL to navigate to. When set, the item renders as a link. Mutually exclusive with a slotted dropdown menu.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "target",
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            },
+            {
+              "name": "rel",
+              "description": "The `rel` attribute for the link. Only used when `href` is set.",
+              "value": { "type": "string", "default": "'noreferrer noopener'" }
+            },
+            {
+              "name": "current",
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The item's label content (text, or an icon + text)."
+            },
+            {
+              "name": "menu",
+              "description": "A `<cw-primary-navigation-menu>` with this item's dropdown links. Its presence switches the item from a link to a disclosure trigger. Ignored when `href` is also set."
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-show",
+              "description": "Emitted when the item's dropdown opens."
+            },
+            {
+              "name": "cw-after-show",
+              "description": "Emitted after the item's dropdown opens and all animations are complete."
+            },
+            {
+              "name": "cw-hide",
+              "description": "Emitted when the item's dropdown closes."
+            },
+            {
+              "name": "cw-after-hide",
+              "description": "Emitted after the item's dropdown closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "dropdown", "type": "CwDropdown | undefined" },
+              { "name": "menuSlot", "type": "HTMLSlotElement | undefined" },
+              {
+                "name": "open",
+                "description": "Whether the item's dropdown is currently open. Always `false` for link/plain items.",
+                "type": "boolean"
+              },
+              {
+                "name": "href",
+                "description": "The URL to navigate to. When set, the item renders as a link. Mutually exclusive with a slotted dropdown menu.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "target",
+                "description": "Tells the browser where to open the link. Only used when `href` is set.",
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              {
+                "name": "rel",
+                "description": "The `rel` attribute for the link. Only used when `href` is set.",
+                "type": "string"
+              },
+              {
+                "name": "current",
+                "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.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-show",
+                "description": "Emitted when the item's dropdown opens."
+              },
+              {
+                "name": "cw-after-show",
+                "description": "Emitted after the item's dropdown opens and all animations are complete."
+              },
+              {
+                "name": "cw-hide",
+                "description": "Emitted when the item's dropdown closes."
+              },
+              {
+                "name": "cw-after-hide",
+                "description": "Emitted after the item's dropdown closes and all animations are complete."
+              }
+            ]
+          }
+        },
+        {
+          "name": "cw-primary-navigation-menu",
+          "description": "A simple flat list of links shown in a `<cw-primary-navigation-item>`'s dropdown. Deliberately\nminimal — no headings, grouping, multi-column layout, or promo slot; styles plain `<a>` elements only.\n---\n\n\n### **Slots:**\n - _default_ - One or more plain `<a>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "One or more plain `<a>` elements." }
+          ],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "name": "cw-progress-bar",
           "description": "Progress bars are used to show the status of an ongoing operation.\n---\n\n\n### **Slots:**\n - _default_ - A label to show inside the progress indicator.\n\n### **CSS Properties:**\n - **--height** - The progress bar's height. _(default: undefined)_\n- **--track-color** - The color of the track. _(default: undefined)_\n- **--indicator-color** - The color of the indicator. _(default: undefined)_\n- **--label-color** - The color of the label. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **indicator** - The progress bar's indicator.\n- **label** - The progress bar's label.",
@@ -5664,6 +5866,107 @@
             ]
           }
         },
+        {
+          "name": "cw-secondary-navigation",
+          "description": "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.\n---\n\n\n### **Slots:**\n - _default_ - One or more `<cw-secondary-navigation-item>` elements.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, a `<nav>` landmark element.\n- **nav** - The container that wraps the slotted navigation items and the scroll buttons.\n- **scroll-button** - The previous/next scroll buttons that show when items overflow, an `<cw-icon-button>`.\n- **scroll-button--start** - The starting scroll button.\n- **scroll-button--end** - The ending scroll button.\n- **scroll-button__base** - The scroll button's exported `base` part.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The accessible label for the `<nav>` landmark. Defaults to a localized \"Secondary navigation\".",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "no-scroll-controls",
+              "description": "Disables the scroll arrows that appear when items overflow.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<cw-secondary-navigation-item>` elements."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "nav", "type": "HTMLElement" },
+              {
+                "name": "label",
+                "description": "The accessible label for the `<nav>` landmark. Defaults to a localized \"Secondary navigation\".",
+                "type": "string"
+              },
+              {
+                "name": "noScrollControls",
+                "description": "Disables the scroll arrows that appear when items overflow.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "cw-secondary-navigation-item",
+          "description": "A link in a `<cw-secondary-navigation>`, pointing to a page related to the current one.\n---\n\n\n### **Slots:**\n - _default_ - The item's label content (text, or an icon + text).\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The internal `<a>`, present only when `href` is set.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "The URL to navigate to.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "target",
+              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            },
+            {
+              "name": "rel",
+              "description": "The `rel` attribute for the link. Only used when `href` is set.",
+              "value": { "type": "string", "default": "'noreferrer noopener'" }
+            },
+            {
+              "name": "current",
+              "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.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The item's label content (text, or an icon + text)."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "href",
+                "description": "The URL to navigate to.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "target",
+                "description": "Tells the browser where to open the link. Only used when `href` is set.",
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              {
+                "name": "rel",
+                "description": "The `rel` attribute for the link. Only used when `href` is set.",
+                "type": "string"
+              },
+              {
+                "name": "current",
+                "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.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "cw-select",
           "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **cw-change** - Emitted when the control's value changes.\n- **cw-clear** - Emitted when the control's value is cleared.\n- **cw-input** - Emitted when the control receives input.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-blur** - Emitted when the control loses focus.\n- **cw-show** - Emitted when the select's menu opens.\n- **cw-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **cw-hide** - Emitted when the select's menu closes.\n- **cw-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<cw-option>` elements. You can use `<cw-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **suffix** - Used to append a presentational icon or similar element to the combobox.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **expand-icon** - The icon to show when the control is expanded and collapsed. Rotates on open and close.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The select's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.\n- **prefix** - The container that wraps the prefix slot.\n- **suffix** - The container that wraps the suffix slot.\n- **display-input** - The element that displays the selected option's label, an `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **tags** - The container that houses option tags when `multiselect` is used.\n- **tag** - The individual tags that represent each multiselect option.\n- **tag__base** - The tag's base part.\n- **tag__content** - The tag's content part.\n- **tag__remove-button** - The tag's remove button.\n- **tag__remove-button__base** - The tag's remove button base part.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",