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

package/dist/types/vue/index.d.ts

@@ -12,8 +12,8 @@ import type { CwButtonGroup } from "../../components/button-group/button-group.c
 import type { CwCard } from "../../components/card/card.component.js";
 import type { CwCarousel } from "../../components/carousel/carousel.component.js";
 import type { CwCarouselItem } from "../../components/carousel-item/carousel-item.component.js";
-import type { CwColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { CwCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { CwColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { CwCombobox } from "../../components/combobox/combobox.component.js";
 import type { CwCopyButton } from "../../components/copy-button/copy-button.component.js";
 import type {
@@ -32,6 +32,7 @@ import type { CwDropdown } from "../../components/dropdown/dropdown.component.js
 import type { CwFormatBytes } from "../../components/format-bytes/format-bytes.component.js";
 import type { CwFormatDate } from "../../components/format-date/format-date.component.js";
 import type { CwFormatNumber } from "../../components/format-number/format-number.component.js";
+import type { CwHeader } from "../../components/header/header.component.js";
 import type { CwIcon } from "../../components/icon/icon.component.js";
 import type { CwIconButton } from "../../components/icon-button/icon-button.component.js";
 import type { CwImageComparer } from "../../components/image-comparer/image-comparer.component.js";
@@ -330,6 +331,50 @@ greater than one. It can't be higher than `slides-per-page`. */
 
 type CwCarouselItemProps = {};
 
+type CwCheckboxProps = {
+  /**  */
+  title?: CwCheckbox["title"];
+  /** The name of the checkbox, submitted as a name/value pair with form data. */
+  name?: CwCheckbox["name"];
+  /** The current value of the checkbox, submitted as a name/value pair with form data. */
+  value?: CwCheckbox["value"];
+  /** The checkbox's size. */
+  size?: CwCheckbox["size"];
+  /** Disables the checkbox. */
+  disabled?: CwCheckbox["disabled"];
+  /** Draws the checkbox in a checked state. */
+  checked?: CwCheckbox["checked"];
+  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
+all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
+  indeterminate?: CwCheckbox["indeterminate"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: CwCheckbox["form"];
+  /** Makes the checkbox a required field. */
+  required?: CwCheckbox["required"];
+  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: CwCheckbox["helpText"];
+  /**  */
+  input?: CwCheckbox["input"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  defaultChecked?: CwCheckbox["defaultChecked"];
+  /** Gets the validity state object */
+  validity?: CwCheckbox["validity"];
+  /** Gets the validation message */
+  validationMessage?: CwCheckbox["validationMessage"];
+  /** Emitted when the checkbox loses focus. */
+  "oncw-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checked state changes. */
+  "oncw-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox gains focus. */
+  "oncw-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the checkbox receives input. */
+  "oncw-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "oncw-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type CwColorPickerProps = {
   /** The current value of the color picker. The value's format will vary based the `format` attribute. To get the value
 in a specific format, use the `getFormattedValue()` method. The value is submitted as a name/value pair with form
@@ -396,50 +441,6 @@ the same document or shadow root for this to work. */
   "oncw-invalid"?: (e: CustomEvent<never>) => void;
 };
 
-type CwCheckboxProps = {
-  /**  */
-  title?: CwCheckbox["title"];
-  /** The name of the checkbox, submitted as a name/value pair with form data. */
-  name?: CwCheckbox["name"];
-  /** The current value of the checkbox, submitted as a name/value pair with form data. */
-  value?: CwCheckbox["value"];
-  /** The checkbox's size. */
-  size?: CwCheckbox["size"];
-  /** Disables the checkbox. */
-  disabled?: CwCheckbox["disabled"];
-  /** Draws the checkbox in a checked state. */
-  checked?: CwCheckbox["checked"];
-  /** Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
-all/none" behavior when associated checkboxes have a mix of checked and unchecked states. */
-  indeterminate?: CwCheckbox["indeterminate"];
-  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-the same document or shadow root for this to work. */
-  form?: CwCheckbox["form"];
-  /** Makes the checkbox a required field. */
-  required?: CwCheckbox["required"];
-  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */
-  "help-text"?: CwCheckbox["helpText"];
-  /**  */
-  input?: CwCheckbox["input"];
-  /** The default value of the form control. Primarily used for resetting the form control. */
-  defaultChecked?: CwCheckbox["defaultChecked"];
-  /** Gets the validity state object */
-  validity?: CwCheckbox["validity"];
-  /** Gets the validation message */
-  validationMessage?: CwCheckbox["validationMessage"];
-  /** Emitted when the checkbox loses focus. */
-  "oncw-blur"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checked state changes. */
-  "oncw-change"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox gains focus. */
-  "oncw-focus"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the checkbox receives input. */
-  "oncw-input"?: (e: CustomEvent<never>) => void;
-  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
-  "oncw-invalid"?: (e: CustomEvent<never>) => void;
-};
-
 type CwComboboxProps = {
   /** The name of the combobox, submitted as a name/value pair with form data. */
   name?: CwCombobox["name"];
@@ -918,6 +919,32 @@ type CwFormatNumberProps = {
   "maximum-significant-digits"?: CwFormatNumber["maximumSignificantDigits"];
 };
 
+type CwHeaderProps = {
+  /** The viewport width, in pixels, below which the header switches to its stacked mobile layout. */
+  "mobile-breakpoint"?: CwHeader["mobileBreakpoint"];
+  /**  */
+  panel?: CwHeader["panel"];
+  /**  */
+  actionsRow?: CwHeader["actionsRow"];
+  /**  */
+  indicator?: CwHeader["indicator"];
+  /**  */
+  triggers?: CwHeader["triggers"];
+  /** The name of the currently open action panel, or `null` if none is open. Not reflected as an attribute — `null`
+is a legitimate, frequently-reached value here (no panel open), which doesn't play well with `CwElement`'s
+reflected-attribute "morph fix" (`src/internal/cw-element.ts`), designed around properties whose first non-null
+value is a permanent default rather than a value that legitimately toggles back to `null` at runtime. */
+  activePanel?: CwHeader["activePanel"];
+  /** Emitted when an action panel opens. */
+  "oncw-panel-show"?: (e: CustomEvent<{ name: String }>) => void;
+  /** Emitted after an action panel opens and all animations are complete. */
+  "oncw-panel-after-show"?: (e: CustomEvent<{ name: String }>) => void;
+  /** Emitted when an action panel closes. */
+  "oncw-panel-hide"?: (e: CustomEvent<{ name: String }>) => void;
+  /** Emitted after an action panel closes and all animations are complete. */
+  "oncw-panel-after-hide"?: (e: CustomEvent<{ name: String }>) => void;
+};
+
 type CwIconProps = {
   /** The name of the icon to draw. Available names depend on the icon library being used. */
   name?: CwIcon["name"];
@@ -2284,6 +2311,44 @@ export type CustomElements = {
    */
   "cw-carousel-item": DefineComponent<CwCarouselItemProps>;
 
+  /**
+   * Checkboxes allow the user to toggle an option on or off.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-blur** - Emitted when the checkbox loses focus.
+   * - **cw-change** - Emitted when the checked state changes.
+   * - **cw-focus** - Emitted when the checkbox gains focus.
+   * - **cw-input** - Emitted when the checkbox receives input.
+   * - **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the checkbox.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
+   * - **blur()** - Removes focus from the checkbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   *
+   * ### **Slots:**
+   *  - _default_ - The checkbox's label.
+   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper.
+   * - **control** - The square container that wraps the checkbox's checked state.
+   * - **control--checked** - Matches the control part when the checkbox is checked.
+   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
+   * - **checked-icon** - The checked icon, an `<cw-icon>` element.
+   * - **indeterminate-icon** - The indeterminate icon, an `<cw-icon>` element.
+   * - **label** - The container that wraps the checkbox's label.
+   * - **form-control-help-text** - The help text's wrapper.
+   */
+  "cw-checkbox": DefineComponent<CwCheckboxProps>;
+
   /**
    * Color pickers allow the user to select a color.
    * ---
@@ -2346,44 +2411,6 @@ export type CustomElements = {
    */
   "cw-color-picker": DefineComponent<CwColorPickerProps>;
 
-  /**
-   * Checkboxes allow the user to toggle an option on or off.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **cw-blur** - Emitted when the checkbox loses focus.
-   * - **cw-change** - Emitted when the checked state changes.
-   * - **cw-focus** - Emitted when the checkbox gains focus.
-   * - **cw-input** - Emitted when the checkbox receives input.
-   * - **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   *
-   * ### **Methods:**
-   *  - **click()** - Simulates a click on the checkbox.
-   * - **focus(options: _FocusOptions_)** - Sets focus on the checkbox.
-   * - **blur()** - Removes focus from the checkbox.
-   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
-   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
-   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
-   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
-   * the custom validation message, call this method with an empty string.
-   *
-   * ### **Slots:**
-   *  - _default_ - The checkbox's label.
-   * - **help-text** - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
-   *
-   * ### **CSS Parts:**
-   *  - **base** - The component's base wrapper.
-   * - **control** - The square container that wraps the checkbox's checked state.
-   * - **control--checked** - Matches the control part when the checkbox is checked.
-   * - **control--indeterminate** - Matches the control part when the checkbox is indeterminate.
-   * - **checked-icon** - The checked icon, an `<cw-icon>` element.
-   * - **indeterminate-icon** - The indeterminate icon, an `<cw-icon>` element.
-   * - **label** - The container that wraps the checkbox's label.
-   * - **form-control-help-text** - The help text's wrapper.
-   */
-  "cw-checkbox": DefineComponent<CwCheckboxProps>;
-
   /**
    * Comboboxes combine a text input with a listbox, allowing users to filter a list of options by typing.
    * ---
@@ -2755,6 +2782,53 @@ export type CustomElements = {
    */
   "cw-format-number": DefineComponent<CwFormatNumberProps>;
 
+  /**
+   * Page header region composing branding, primary navigation, icon-triggered action panels, and secondary
+   * navigation into one piece of chrome.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-panel-show** - Emitted when an action panel opens.
+   * - **cw-panel-after-show** - Emitted after an action panel opens and all animations are complete.
+   * - **cw-panel-hide** - Emitted when an action panel closes.
+   * - **cw-panel-after-hide** - Emitted after an action panel closes and all animations are complete.
+   *
+   * ### **Methods:**
+   *  - **showPanel(name: _HeaderAction['name']_)** - Opens the named action panel. No-op if that slot has no content.
+   * - **hidePanel()** - Closes the currently open action panel, if any.
+   *
+   * ### **Slots:**
+   *  - **logo** - A `<cw-logo>`.
+   * - **primary-navigation** - A `<cw-primary-navigation>`.
+   * - **utility** - Content for the utility action panel, opened via a gear icon trigger.
+   * - **search** - Content for the search action panel, opened via a search icon trigger.
+   * - **notification** - Content for the notification action panel, opened via a bell icon trigger.
+   * - **user** - Content for the user/account action panel, opened via a person icon trigger.
+   * - **cart** - Content for the cart action panel, opened via a cart icon trigger.
+   * - **secondary-navigation** - A `<cw-secondary-navigation>`, rendered on its own row below everything else.
+   *
+   * ### **CSS Properties:**
+   *  - **--panel-width** - The width of an open action panel above `mobile-breakpoint`. Below it, panels are always full width. Defaults to `50%`. _(default: undefined)_
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, a `<header>` landmark element.
+   * - **logo** - The container that wraps the slotted logo.
+   * - **primary-navigation** - The container that wraps the slotted primary navigation.
+   * - **actions** - The container that wraps the action triggers.
+   * - **trigger** - Each action trigger, a `<cw-icon-button>`.
+   * - **trigger--utility** - The utility action trigger.
+   * - **trigger--search** - The search action trigger.
+   * - **trigger--notification** - The notification action trigger.
+   * - **trigger--user** - The user action trigger.
+   * - **trigger--cart** - The cart action trigger.
+   * - **trigger__base** - A trigger's exported `base` part.
+   * - **indicator** - The line that highlights the currently open action trigger.
+   * - **panel** - The panel shown below the header when an action trigger is open.
+   * - **secondary-navigation** - The container that wraps the slotted secondary navigation.
+   */
+  "cw-header": DefineComponent<CwHeaderProps>;
+
   /**
    * Icons are symbols that can be used to represent various options within an application.
    * ---

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.XIIPR36B.js";
-import "../chunks/chunk.CJFFVBAI.js";
+} from "../chunks/chunk.YYBORLW3.js";
 import "../chunks/chunk.PLKIFY5H.js";
+import "../chunks/chunk.CJFFVBAI.js";
 import "../chunks/chunk.4EHT37C5.js";
 import "../chunks/chunk.Q44EX5TP.js";
 export {

package/dist/utilities/localize.d.ts

@@ -7,7 +7,9 @@ export interface Translation extends DefaultTranslation {
     $code: string;
     $name: string;
     $dir: 'ltr' | 'rtl';
+    account?: string;
     carousel: string;
+    cart?: string;
     clearEntry: string;
     close: string;
     closeMenu?: string;
@@ -26,6 +28,7 @@ export interface Translation extends DefaultTranslation {
     nextMonth?: string;
     nextPage?: string;
     nextSlide: string;
+    notifications?: string;
     numOptionsSelected: (num: number) => string;
     openMenu?: string;
     pagination?: string;
@@ -39,9 +42,11 @@ export interface Translation extends DefaultTranslation {
     resize: string;
     scrollToEnd: string;
     scrollToStart: string;
+    search?: string;
     secondaryNavigation?: string;
     selectAColorFromTheScreen: string;
     showPassword: string;
     slideNum: (slide: number) => string;
     toggleColorFormat: string;
+    utility?: string;
 }

package/dist/utilities/localize.js

@@ -1,8 +1,8 @@
 import {
   LocalizeController,
   registerTranslation
-} from "../chunks/chunk.4WUKLYFS.js";
-import "../chunks/chunk.KVX4KZQ7.js";
+} from "../chunks/chunk.OFFCHZOX.js";
+import "../chunks/chunk.CYBF35P2.js";
 import "../chunks/chunk.Q44EX5TP.js";
 export {
   LocalizeController,

package/dist/vscode.html-custom-data.json

@@ -506,6 +506,68 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        { "name": "title", "values": [] },
+        {
+          "name": "name",
+          "description": "The name of the checkbox, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The checkbox's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the checkbox.",
+          "values": []
+        },
+        {
+          "name": "checked",
+          "description": "Draws the checkbox in a checked state.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the checkbox a required field.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/checkbox"
+        }
+      ]
+    },
     {
       "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.",
@@ -597,68 +659,6 @@
         }
       ]
     },
-    {
-      "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.",
-      "attributes": [
-        { "name": "title", "values": [] },
-        {
-          "name": "name",
-          "description": "The name of the checkbox, submitted as a name/value pair with form data.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "The current value of the checkbox, submitted as a name/value pair with form data.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The checkbox's size.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the checkbox.",
-          "values": []
-        },
-        {
-          "name": "checked",
-          "description": "Draws the checkbox in a checked state.",
-          "values": []
-        },
-        {
-          "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.",
-          "values": []
-        },
-        {
-          "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.",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "Makes the checkbox a required field.",
-          "values": []
-        },
-        {
-          "name": "help-text",
-          "description": "The checkbox's help text. If you need to display HTML, use the `help-text` slot instead.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://cordwainer.dev/components/checkbox"
-        }
-      ]
-    },
     {
       "name": "cw-combobox",
       "description": "Comboboxes combine a text input with a listbox, allowing users to filter a list of options by typing.\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, including as the user types to filter options.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-blur** - Emitted when the control loses focus.\n- **cw-show** - Emitted when the combobox's listbox opens.\n- **cw-after-show** - Emitted after the combobox's listbox opens and all animations are complete.\n- **cw-hide** - Emitted when the combobox's listbox closes.\n- **cw-after-hide** - Emitted after the combobox's listbox 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- **no-options** - Content to show in the listbox when no options match the current filter.\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 combobox's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container that wraps the prefix, suffix, input, tags, 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 component's `<input>` element.\n- **listbox** - The listbox container where options are slotted.\n- **no-options** - The container shown when no options match the current filter.\n- **loading** - The container shown while `loading` is set.\n- **tags** - The container that houses option tags when `multiple` is used.\n- **tag** - The individual tags that represent each selected 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.",
@@ -1434,6 +1434,23 @@
         }
       ]
     },
+    {
+      "name": "cw-header",
+      "description": "Page header region composing branding, primary navigation, icon-triggered action panels, and secondary\nnavigation into one piece of chrome.\n---\n\n\n### **Events:**\n - **cw-panel-show** - Emitted when an action panel opens.\n- **cw-panel-after-show** - Emitted after an action panel opens and all animations are complete.\n- **cw-panel-hide** - Emitted when an action panel closes.\n- **cw-panel-after-hide** - Emitted after an action panel closes and all animations are complete.\n\n### **Methods:**\n - **showPanel(name: _HeaderAction['name']_)** - Opens the named action panel. No-op if that slot has no content.\n- **hidePanel()** - Closes the currently open action panel, if any.\n\n### **Slots:**\n - **logo** - A `<cw-logo>`.\n- **primary-navigation** - A `<cw-primary-navigation>`.\n- **utility** - Content for the utility action panel, opened via a gear icon trigger.\n- **search** - Content for the search action panel, opened via a search icon trigger.\n- **notification** - Content for the notification action panel, opened via a bell icon trigger.\n- **user** - Content for the user/account action panel, opened via a person icon trigger.\n- **cart** - Content for the cart action panel, opened via a cart icon trigger.\n- **secondary-navigation** - A `<cw-secondary-navigation>`, rendered on its own row below everything else.\n\n### **CSS Properties:**\n - **--panel-width** - The width of an open action panel above `mobile-breakpoint`. Below it, panels are always full width. Defaults to `50%`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, a `<header>` landmark element.\n- **logo** - The container that wraps the slotted logo.\n- **primary-navigation** - The container that wraps the slotted primary navigation.\n- **actions** - The container that wraps the action triggers.\n- **trigger** - Each action trigger, a `<cw-icon-button>`.\n- **trigger--utility** - The utility action trigger.\n- **trigger--search** - The search action trigger.\n- **trigger--notification** - The notification action trigger.\n- **trigger--user** - The user action trigger.\n- **trigger--cart** - The cart action trigger.\n- **trigger__base** - A trigger's exported `base` part.\n- **indicator** - The line that highlights the currently open action trigger.\n- **panel** - The panel shown below the header when an action trigger is open.\n- **secondary-navigation** - The container that wraps the slotted secondary navigation.",
+      "attributes": [
+        {
+          "name": "mobile-breakpoint",
+          "description": "The viewport width, in pixels, below which the header switches to its stacked mobile layout.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/header"
+        }
+      ]
+    },
     {
       "name": "cw-icon",
       "description": "Icons are symbols that can be used to represent various options within an application.\n---\n\n\n### **Events:**\n - **cw-load** - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n- **cw-error** - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n\n### **CSS Parts:**\n - **svg** - The internal SVG element.\n- **use** - The <use> element generated when using `spriteSheet: true`",