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

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

@@ -506,68 +506,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-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.",
@@ -659,6 +597,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-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.",
@@ -840,57 +840,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.",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "The key in each row data object that this column displays. Required.",
-          "values": []
-        },
-        {
-          "name": "label",
-          "description": "The column header label. Falls back to `name` if not set.",
-          "values": []
-        },
-        {
-          "name": "sortable",
-          "description": "Makes the column header clickable for sorting.",
-          "values": []
-        },
-        {
-          "name": "width",
-          "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
-          "values": []
-        },
-        {
-          "name": "min-width",
-          "description": "A CSS min-width value for this column.",
-          "values": []
-        },
-        {
-          "name": "align",
-          "description": "Alignment of cell content within the column.",
-          "values": [
-            { "name": "start" },
-            { "name": "center" },
-            { "name": "end" }
-          ]
-        },
-        {
-          "name": "hidden",
-          "description": "Hides the column without removing it from the DOM.",
-          "values": []
-        }
-      ],
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://cordwainer.dev/components/data-table-column"
-        }
-      ]
-    },
     {
       "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.",
@@ -957,6 +906,57 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The key in each row data object that this column displays. Required.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The column header label. Falls back to `name` if not set.",
+          "values": []
+        },
+        {
+          "name": "sortable",
+          "description": "Makes the column header clickable for sorting.",
+          "values": []
+        },
+        {
+          "name": "width",
+          "description": "A CSS width value for this column, e.g. \"200px\" or \"20%\".",
+          "values": []
+        },
+        {
+          "name": "min-width",
+          "description": "A CSS min-width value for this column.",
+          "values": []
+        },
+        {
+          "name": "align",
+          "description": "Alignment of cell content within the column.",
+          "values": [
+            { "name": "start" },
+            { "name": "center" },
+            { "name": "end" }
+          ]
+        },
+        {
+          "name": "hidden",
+          "description": "Hides the column without removing it from the DOM.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/data-table-column"
+        }
+      ]
+    },
     {
       "name": "cw-date-picker",
       "description": "Date pickers let users select a date from a calendar.\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 date picker's calendar opens.\n- **cw-after-show** - Emitted after the date picker's calendar opens and all animations are complete.\n- **cw-hide** - Emitted when the date picker's calendar closes.\n- **cw-after-hide** - Emitted after the date picker's calendar 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 calendar.\n- **hide()** - Hides the calendar.\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 - **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.\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 date picker's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **combobox** - The container the wraps the prefix, suffix, display input, clear icon, and expand icon.\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 date, an `<input>` element.\n- **calendar** - The calendar container where the header and date grid are rendered.\n- **header** - The calendar's header containing the previous/next buttons and heading.\n- **heading** - The heading that displays the focused month and year.\n- **previous-button** - The button that navigates to the previous month.\n- **next-button** - The button that navigates to the next month.\n- **grid** - The grid that contains the weekday headers and days.\n- **day** - An individual day within the grid.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
@@ -2601,6 +2601,65 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "The accessible label for the `<nav>` landmark. Defaults to a localized \"Secondary navigation\".",
+          "values": []
+        },
+        {
+          "name": "no-scroll-controls",
+          "description": "Disables the scroll arrows that appear when items overflow.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/secondary-navigation"
+        }
+      ]
+    },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "The URL to navigate to.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Tells the browser where to open the link. Only used when `href` is set.",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
+        {
+          "name": "rel",
+          "description": "The `rel` attribute for the link. Only used when `href` is set.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cordwainer.dev/components/secondary-navigation-item"
+        }
+      ]
+    },
     {
       "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.",