@cordwainer/cw-elements 1.0.3 → 1.1.0-alpha.3

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.0.3",
+  "version": "1.1.0-alpha.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1465,1357 +1465,2032 @@
           }
         },
         {
-          "name": "cw-copy-button",
-          "description": "Copies text data to the clipboard when the user clicks the trigger.\n---\n\n\n### **Events:**\n - **cw-copy** - Emitted when the data has been copied.\n- **cw-error** - Emitted when the data could not be copied.\n\n### **Slots:**\n - **copy-icon** - The icon to show in the default copy state. Works best with `<cw-icon>`.\n- **success-icon** - The icon to show when the content is copied. Works best with `<cw-icon>`.\n- **error-icon** - The icon to show when a copy error occurs. Works best with `<cw-icon>`.\n\n### **CSS Properties:**\n - **--success-color** - The color to use for success feedback. _(default: undefined)_\n- **--error-color** - The color to use for error feedback. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The internal `<button>` element.\n- **copy-icon** - The container that holds the copy icon.\n- **success-icon** - The container that holds the success icon.\n- **error-icon** - The container that holds the error icon.\n- **tooltip__base** - The tooltip's exported `base` part.\n- **tooltip__base__popup** - The tooltip's exported `popup` part.\n- **tooltip__base__arrow** - The tooltip's exported `arrow` part.\n- **tooltip__body** - The tooltip's exported `body` part.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "value",
-              "description": "The text value to copy.",
+              "name": "name",
+              "description": "The name of the combobox, submitted as a name/value pair with form data.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "from",
-              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "name": "value",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "value": { "type": "string | string[]", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The combobox's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the combobox is empty.",
               "value": { "type": "string", "default": "''" }
             },
+            {
+              "name": "multiple",
+              "description": "Allows more than one option to be selected.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "max-options-visible",
+              "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+              "value": { "type": "number", "default": "3" }
+            },
             {
               "name": "disabled",
-              "description": "Disables the copy button.",
+              "description": "Disables the combobox control.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "copy-label",
-              "description": "A custom label to show in the tooltip.",
+              "name": "clearable",
+              "description": "Adds a clear button when the combobox is not empty.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "allow-custom-value",
+              "description": "When set, values typed by the user that don't match any `<cw-option>` are accepted as the control's value. Only\napplies when `multiple` is not set.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading",
+              "description": "Shows a loading indicator and \"no options\" message in the listbox. Useful while options are being fetched\nasynchronously in response to the `cw-input` event.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "open",
+              "description": "Indicates whether or not the listbox is open. You can toggle this attribute to show and hide the listbox, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the combobox's open state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hoist",
+              "description": "Enable this option to prevent the listbox 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": "filled",
+              "description": "Draws a filled combobox.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style combobox with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "success-label",
-              "description": "A custom label to show in the tooltip after copying.",
+              "name": "placement",
+              "description": "The preferred placement of the combobox's listbox. Note that the actual placement may vary as needed to keep the\nlistbox inside of the viewport.",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
+            },
+            {
+              "name": "help-text",
+              "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "error-label",
-              "description": "A custom label to show in the tooltip when a copy error occurs.",
+              "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.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "feedback-duration",
-              "description": "The length of time to show feedback before restoring the default trigger.",
-              "value": { "type": "number", "default": "1000" }
+              "name": "required",
+              "description": "The combobox's required attribute.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "tooltip-placement",
-              "description": "The preferred placement of the tooltip.",
+              "name": "getTag",
+              "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted\nHTML of the symbol to render at the specified value.",
               "value": {
-                "type": "'top' | 'right' | 'bottom' | 'left'",
-                "default": "'top'"
+                "type": "(option: CwOption, index: number) => TemplateResult | string | HTMLElement"
               }
-            },
-            {
-              "name": "hoist",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             {
-              "name": "copy-icon",
-              "description": "The icon to show in the default copy state. Works best with `<cw-icon>`."
+              "name": "",
+              "description": "The listbox options. Must be `<cw-option>` elements. You can use `<cw-divider>` to group items visually."
             },
             {
-              "name": "success-icon",
-              "description": "The icon to show when the content is copied. Works best with `<cw-icon>`."
+              "name": "label",
+              "description": "The input's label. Alternatively, you can use the `label` attribute."
             },
             {
-              "name": "error-icon",
-              "description": "The icon to show when a copy error occurs. Works best with `<cw-icon>`."
+              "name": "prefix",
+              "description": "Used to prepend a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
+            },
+            {
+              "name": "expand-icon",
+              "description": "The icon to show when the control is expanded and collapsed. Rotates on open and close."
+            },
+            {
+              "name": "no-options",
+              "description": "Content to show in the listbox when no options match the current filter."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
             }
           ],
           "events": [
             {
-              "name": "cw-copy",
-              "description": "Emitted when the data has been copied."
+              "name": "cw-change",
+              "description": "Emitted when the control's value changes."
             },
             {
-              "name": "cw-error",
-              "description": "Emitted when the data could not be copied."
+              "name": "cw-clear",
+              "description": "Emitted when the control's value is cleared."
+            },
+            {
+              "name": "cw-input",
+              "description": "Emitted when the control receives input, including as the user types to filter options."
+            },
+            {
+              "name": "cw-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "cw-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "cw-show",
+              "description": "Emitted when the combobox's listbox opens."
+            },
+            {
+              "name": "cw-after-show",
+              "description": "Emitted after the combobox's listbox opens and all animations are complete."
+            },
+            {
+              "name": "cw-hide",
+              "description": "Emitted when the combobox's listbox closes."
+            },
+            {
+              "name": "cw-after-hide",
+              "description": "Emitted after the combobox's listbox closes and all animations are complete."
+            },
+            {
+              "name": "cw-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
             }
           ],
           "js": {
             "properties": [
-              { "name": "copyIcon", "type": "HTMLSlotElement" },
-              { "name": "successIcon", "type": "HTMLSlotElement" },
-              { "name": "errorIcon", "type": "HTMLSlotElement" },
-              { "name": "tooltip", "type": "CwTooltip" },
-              { "name": "isCopying", "type": "boolean" },
-              { "name": "status", "type": "'rest' | 'success' | 'error'" },
+              { "name": "popup", "type": "CwPopup" },
+              { "name": "combobox", "type": "HTMLSlotElement" },
+              { "name": "displayInput", "type": "HTMLInputElement" },
+              { "name": "valueInput", "type": "HTMLInputElement" },
+              { "name": "listbox", "type": "HTMLSlotElement" },
+              { "name": "displayLabel", "type": "string" },
+              { "name": "currentOption", "type": "CwOption | undefined" },
+              { "name": "selectedOptions", "type": "CwOption[]" },
               {
-                "name": "value",
-                "description": "The text value to copy.",
+                "name": "name",
+                "description": "The name of the combobox, submitted as a name/value pair with form data.",
                 "type": "string"
               },
               {
-                "name": "from",
-                "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+                "name": "value",
+                "description": "The current value of the combobox, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue attribute will be a space-delimited list of values based on the options selected, and the value property will\nbe an array. **For this reason, values must not contain spaces.**"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string | string[]"
+              },
+              {
+                "name": "size",
+                "description": "The combobox's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the combobox is empty.",
                 "type": "string"
               },
+              {
+                "name": "multiple",
+                "description": "Allows more than one option to be selected.",
+                "type": "boolean"
+              },
+              {
+                "name": "maxOptionsVisible",
+                "description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
+                "type": "number"
+              },
               {
                 "name": "disabled",
-                "description": "Disables the copy button.",
+                "description": "Disables the combobox control.",
                 "type": "boolean"
               },
               {
-                "name": "copyLabel",
-                "description": "A custom label to show in the tooltip.",
-                "type": "string"
+                "name": "clearable",
+                "description": "Adds a clear button when the combobox is not empty.",
+                "type": "boolean"
               },
               {
-                "name": "successLabel",
-                "description": "A custom label to show in the tooltip after copying.",
-                "type": "string"
+                "name": "allowCustomValue",
+                "description": "When set, values typed by the user that don't match any `<cw-option>` are accepted as the control's value. Only\napplies when `multiple` is not set.",
+                "type": "boolean"
               },
               {
-                "name": "errorLabel",
-                "description": "A custom label to show in the tooltip when a copy error occurs.",
+                "name": "loading",
+                "description": "Shows a loading indicator and \"no options\" message in the listbox. Useful while options are being fetched\nasynchronously in response to the `cw-input` event.",
+                "type": "boolean"
+              },
+              {
+                "name": "open",
+                "description": "Indicates whether or not the listbox is open. You can toggle this attribute to show and hide the listbox, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the combobox's open state.",
+                "type": "boolean"
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option to prevent the listbox 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": "filled",
+                "description": "Draws a filled combobox.",
+                "type": "boolean"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style combobox with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
                 "type": "string"
               },
               {
-                "name": "feedbackDuration",
-                "description": "The length of time to show feedback before restoring the default trigger.",
-                "type": "number"
+                "name": "placement",
+                "description": "The preferred placement of the combobox's listbox. Note that the actual placement may vary as needed to keep the\nlistbox inside of the viewport.",
+                "type": "'top' | 'bottom'"
               },
               {
-                "name": "tooltipPlacement",
-                "description": "The preferred placement of the tooltip.",
-                "type": "'top' | 'right' | 'bottom' | 'left'"
+                "name": "helpText",
+                "description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
               },
               {
-                "name": "hoist",
-                "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+                "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.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "The combobox's required attribute.",
                 "type": "boolean"
-              }
-            ],
-            "events": [
+              },
               {
-                "name": "cw-copy",
-                "description": "Emitted when the data has been copied."
+                "name": "getTag",
+                "description": "A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\nis the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted\nHTML of the symbol to render at the specified value.",
+                "type": "(option: CwOption, index: number) => TemplateResult | string | HTMLElement"
               },
               {
-                "name": "cw-error",
-                "description": "Emitted when the data could not be copied."
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-change",
+                "description": "Emitted when the control's value changes."
+              },
+              {
+                "name": "cw-clear",
+                "description": "Emitted when the control's value is cleared."
+              },
+              {
+                "name": "cw-input",
+                "description": "Emitted when the control receives input, including as the user types to filter options."
+              },
+              {
+                "name": "cw-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "cw-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "cw-show",
+                "description": "Emitted when the combobox's listbox opens."
+              },
+              {
+                "name": "cw-after-show",
+                "description": "Emitted after the combobox's listbox opens and all animations are complete."
+              },
+              {
+                "name": "cw-hide",
+                "description": "Emitted when the combobox's listbox closes."
+              },
+              {
+                "name": "cw-after-hide",
+                "description": "Emitted after the combobox's listbox closes and all animations are complete."
+              },
+              {
+                "name": "cw-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               }
             ]
           }
         },
         {
-          "name": "cw-details",
-          "description": "Details show a brief summary and expand to show additional content.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the details opens.\n- **cw-after-show** - Emitted after the details opens and all animations are complete.\n- **cw-hide** - Emitted when the details closes.\n- **cw-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<cw-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<cw-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.",
+          "name": "cw-copy-button",
+          "description": "Copies text data to the clipboard when the user clicks the trigger.\n---\n\n\n### **Events:**\n - **cw-copy** - Emitted when the data has been copied.\n- **cw-error** - Emitted when the data could not be copied.\n\n### **Slots:**\n - **copy-icon** - The icon to show in the default copy state. Works best with `<cw-icon>`.\n- **success-icon** - The icon to show when the content is copied. Works best with `<cw-icon>`.\n- **error-icon** - The icon to show when a copy error occurs. Works best with `<cw-icon>`.\n\n### **CSS Properties:**\n - **--success-color** - The color to use for success feedback. _(default: undefined)_\n- **--error-color** - The color to use for error feedback. _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The internal `<button>` element.\n- **copy-icon** - The container that holds the copy icon.\n- **success-icon** - The container that holds the success icon.\n- **error-icon** - The container that holds the error icon.\n- **tooltip__base** - The tooltip's exported `base` part.\n- **tooltip__base__popup** - The tooltip's exported `popup` part.\n- **tooltip__base__arrow** - The tooltip's exported `arrow` part.\n- **tooltip__body** - The tooltip's exported `body` part.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "open",
-              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "value",
+              "description": "The text value to copy.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "summary",
-              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-              "value": { "type": "string" }
+              "name": "from",
+              "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
+              "value": { "type": "string", "default": "''" }
             },
             {
               "name": "disabled",
-              "description": "Disables the details so it can't be toggled.",
+              "description": "Disables the copy button.",
               "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The details' main content." },
+            },
             {
-              "name": "summary",
-              "description": "The details' summary. Alternatively, you can use the `summary` attribute."
+              "name": "copy-label",
+              "description": "A custom label to show in the tooltip.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "expand-icon",
-              "description": "Optional expand icon to use instead of the default. Works best with `<cw-icon>`."
+              "name": "success-label",
+              "description": "A custom label to show in the tooltip after copying.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "collapse-icon",
-              "description": "Optional collapse icon to use instead of the default. Works best with `<cw-icon>`."
+              "name": "error-label",
+              "description": "A custom label to show in the tooltip when a copy error occurs.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "feedback-duration",
+              "description": "The length of time to show feedback before restoring the default trigger.",
+              "value": { "type": "number", "default": "1000" }
+            },
+            {
+              "name": "tooltip-placement",
+              "description": "The preferred placement of the tooltip.",
+              "value": {
+                "type": "'top' | 'right' | 'bottom' | 'left'",
+                "default": "'top'"
+              }
+            },
+            {
+              "name": "hoist",
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [
+          "slots": [
             {
-              "name": "cw-show",
-              "description": "Emitted when the details opens."
+              "name": "copy-icon",
+              "description": "The icon to show in the default copy state. Works best with `<cw-icon>`."
             },
             {
-              "name": "cw-after-show",
-              "description": "Emitted after the details opens and all animations are complete."
+              "name": "success-icon",
+              "description": "The icon to show when the content is copied. Works best with `<cw-icon>`."
             },
             {
-              "name": "cw-hide",
-              "description": "Emitted when the details closes."
+              "name": "error-icon",
+              "description": "The icon to show when a copy error occurs. Works best with `<cw-icon>`."
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-copy",
+              "description": "Emitted when the data has been copied."
             },
             {
-              "name": "cw-after-hide",
-              "description": "Emitted after the details closes and all animations are complete."
+              "name": "cw-error",
+              "description": "Emitted when the data could not be copied."
             }
           ],
           "js": {
             "properties": [
-              { "name": "details", "type": "HTMLDetailsElement" },
-              { "name": "header", "type": "HTMLElement" },
-              { "name": "body", "type": "HTMLElement" },
-              { "name": "expandIconSlot", "type": "HTMLSlotElement" },
-              { "name": "detailsObserver", "type": "MutationObserver" },
+              { "name": "copyIcon", "type": "HTMLSlotElement" },
+              { "name": "successIcon", "type": "HTMLSlotElement" },
+              { "name": "errorIcon", "type": "HTMLSlotElement" },
+              { "name": "tooltip", "type": "CwTooltip" },
+              { "name": "isCopying", "type": "boolean" },
+              { "name": "status", "type": "'rest' | 'success' | 'error'" },
               {
-                "name": "open",
-                "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
-                "type": "boolean"
+                "name": "value",
+                "description": "The text value to copy.",
+                "type": "string"
               },
               {
-                "name": "summary",
-                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+                "name": "from",
+                "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.",
                 "type": "string"
               },
               {
                 "name": "disabled",
-                "description": "Disables the details so it can't be toggled.",
+                "description": "Disables the copy button.",
                 "type": "boolean"
-              }
-            ],
-            "events": [
+              },
               {
-                "name": "cw-show",
-                "description": "Emitted when the details opens."
+                "name": "copyLabel",
+                "description": "A custom label to show in the tooltip.",
+                "type": "string"
               },
               {
-                "name": "cw-after-show",
-                "description": "Emitted after the details opens and all animations are complete."
+                "name": "successLabel",
+                "description": "A custom label to show in the tooltip after copying.",
+                "type": "string"
               },
               {
-                "name": "cw-hide",
-                "description": "Emitted when the details closes."
+                "name": "errorLabel",
+                "description": "A custom label to show in the tooltip when a copy error occurs.",
+                "type": "string"
               },
               {
-                "name": "cw-after-hide",
-                "description": "Emitted after the details closes and all animations are complete."
+                "name": "feedbackDuration",
+                "description": "The length of time to show feedback before restoring the default trigger.",
+                "type": "number"
+              },
+              {
+                "name": "tooltipPlacement",
+                "description": "The preferred placement of the tooltip.",
+                "type": "'top' | 'right' | 'bottom' | 'left'"
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-copy",
+                "description": "Emitted when the data has been copied."
+              },
+              {
+                "name": "cw-error",
+                "description": "Emitted when the data could not be copied."
               }
             ]
           }
         },
         {
-          "name": "cw-dialog",
-          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the dialog opens.\n- **cw-after-show** - Emitted after the dialog opens and all animations are complete.\n- **cw-hide** - Emitted when the dialog closes.\n- **cw-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **cw-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **cw-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<cw-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<cw-icon-button>`.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<cw-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "open",
-              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "name",
+              "description": "The name of the date picker, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "label",
-              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "name": "value",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "no-header",
-              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The dialog's main content." },
+              "name": "min",
+              "description": "The earliest date a user may select, as a `YYYY-MM-DD` string.",
+              "value": { "type": "string", "default": "''" }
+            },
             {
-              "name": "label",
-              "description": "The dialog's label. Alternatively, you can use the `label` attribute."
+              "name": "max",
+              "description": "The latest date a user may select, as a `YYYY-MM-DD` string.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "header-actions",
-              "description": "Optional actions to add to the header. Works best with `<cw-icon-button>`."
+              "name": "first-day-of-week",
+              "description": "The first day of the week, where `0` is Sunday and `6` is Saturday. When not set, the first day of the week is\ndetermined by the page's locale, falling back to Sunday.",
+              "value": { "type": "number | undefined" }
             },
             {
-              "name": "footer",
-              "description": "The dialog's footer, usually one or more buttons representing various options."
-            }
-          ],
-          "events": [
+              "name": "size",
+              "description": "The date picker's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
             {
-              "name": "cw-show",
-              "description": "Emitted when the dialog opens."
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the date picker is empty.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "cw-after-show",
-              "description": "Emitted after the dialog opens and all animations are complete."
+              "name": "disabled",
+              "description": "Disables the date picker.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "cw-hide",
-              "description": "Emitted when the dialog closes."
+              "name": "clearable",
+              "description": "Adds a clear button when the date picker is not empty.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "cw-after-hide",
-              "description": "Emitted after the dialog closes and all animations are complete."
+              "name": "open",
+              "description": "Indicates whether or not the date picker is open. You can toggle this attribute to show and hide the calendar, or\nyou can use the `show()` and `hide()` methods and this attribute will reflect the date picker's open state.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "cw-initial-focus",
-              "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+              "name": "hoist",
+              "description": "Enable this option to prevent the calendar 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": "cw-request-close",
-              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-              "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "modal",
-                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore the dialog's focus trapping."
-              },
-              { "name": "dialog", "type": "HTMLElement" },
-              { "name": "panel", "type": "HTMLElement" },
-              { "name": "overlay", "type": "HTMLElement" },
-              {
-                "name": "open",
-                "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
-                "type": "boolean"
-              },
-              {
-                "name": "label",
-                "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
-              },
-              {
-                "name": "noHeader",
-                "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
-              {
-                "name": "cw-show",
-                "description": "Emitted when the dialog opens."
-              },
-              {
-                "name": "cw-after-show",
-                "description": "Emitted after the dialog opens and all animations are complete."
-              },
-              {
-                "name": "cw-hide",
-                "description": "Emitted when the dialog closes."
-              },
-              {
-                "name": "cw-after-hide",
-                "description": "Emitted after the dialog closes and all animations are complete."
-              },
-              {
-                "name": "cw-initial-focus",
-                "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
-              },
-              {
-                "name": "cw-request-close",
-                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-                "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
-              }
-            ]
-          }
-        },
-        {
-          "name": "cw-divider",
-          "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "vertical",
-              "description": "Draws the divider in a vertical orientation.",
+              "name": "filled",
+              "description": "Draws a filled date picker.",
               "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "vertical",
-                "description": "Draws the divider in a vertical orientation.",
-                "type": "boolean"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "cw-drawer",
-          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the drawer opens.\n- **cw-after-show** - Emitted after the drawer opens and all animations are complete.\n- **cw-hide** - Emitted when the drawer closes.\n- **cw-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **cw-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **cw-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<cw-icon-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<cw-icon-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<cw-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
-          "doc-url": "",
-          "attributes": [
+            },
             {
-              "name": "open",
-              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+              "name": "pill",
+              "description": "Draws a pill-style date picker with rounded edges.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "label",
-              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "description": "The date picker's label. If you need to display HTML, use the `label` slot instead.",
               "value": { "type": "string", "default": "''" }
             },
             {
               "name": "placement",
-              "description": "The direction from which the drawer will open.",
-              "value": {
-                "type": "'top' | 'end' | 'bottom' | 'start'",
-                "default": "'end'"
-              }
+              "description": "The preferred placement of the date picker's calendar. Note that the actual placement may vary as needed to keep the\ncalendar inside of the viewport.",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
             },
             {
-              "name": "contained",
-              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "help-text",
+              "description": "The date picker's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "no-header",
-              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "The date picker's required attribute.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The drawer's main content." },
             {
               "name": "label",
-              "description": "The drawer's label. Alternatively, you can use the `label` attribute."
+              "description": "The input's label. Alternatively, you can use the `label` attribute."
             },
             {
-              "name": "header-actions",
-              "description": "Optional actions to add to the header. Works best with `<cw-icon-button>`."
+              "name": "prefix",
+              "description": "Used to prepend a presentational icon or similar element to the combobox."
             },
             {
-              "name": "footer",
-              "description": "The drawer's footer, usually one or more buttons representing various options."
+              "name": "suffix",
+              "description": "Used to append a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
+            },
+            {
+              "name": "expand-icon",
+              "description": "The icon to show when the control is expanded and collapsed."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
             }
           ],
           "events": [
+            {
+              "name": "cw-change",
+              "description": "Emitted when the control's value changes."
+            },
+            {
+              "name": "cw-clear",
+              "description": "Emitted when the control's value is cleared."
+            },
+            {
+              "name": "cw-input",
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "cw-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "cw-blur",
+              "description": "Emitted when the control loses focus."
+            },
             {
               "name": "cw-show",
-              "description": "Emitted when the drawer opens."
+              "description": "Emitted when the date picker's calendar opens."
             },
             {
               "name": "cw-after-show",
-              "description": "Emitted after the drawer opens and all animations are complete."
+              "description": "Emitted after the date picker's calendar opens and all animations are complete."
             },
             {
               "name": "cw-hide",
-              "description": "Emitted when the drawer closes."
+              "description": "Emitted when the date picker's calendar closes."
             },
             {
               "name": "cw-after-hide",
-              "description": "Emitted after the drawer closes and all animations are complete."
-            },
-            {
-              "name": "cw-initial-focus",
-              "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+              "description": "Emitted after the date picker's calendar closes and all animations are complete."
             },
             {
-              "name": "cw-request-close",
-              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-              "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
+              "name": "cw-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
             }
           ],
           "js": {
             "properties": [
+              { "name": "popup", "type": "CwPopup" },
+              { "name": "combobox", "type": "HTMLElement" },
+              { "name": "displayInput", "type": "HTMLInputElement" },
+              { "name": "valueInput", "type": "HTMLInputElement" },
+              { "name": "calendar", "type": "HTMLElement" },
               {
-                "name": "modal",
-                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore the drawer's focus trapping."
+                "name": "name",
+                "description": "The name of the date picker, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the date picker, submitted as a name/value pair with form data. The value is an ISO 8601 date string in `YYYY-MM-DD` format."
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
+              },
+              {
+                "name": "min",
+                "description": "The earliest date a user may select, as a `YYYY-MM-DD` string.",
+                "type": "string"
+              },
+              {
+                "name": "max",
+                "description": "The latest date a user may select, as a `YYYY-MM-DD` string.",
+                "type": "string"
+              },
+              {
+                "name": "firstDayOfWeek",
+                "description": "The first day of the week, where `0` is Sunday and `6` is Saturday. When not set, the first day of the week is\ndetermined by the page's locale, falling back to Sunday.",
+                "type": "number | undefined"
+              },
+              {
+                "name": "size",
+                "description": "The date picker's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the date picker is empty.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the date picker.",
+                "type": "boolean"
+              },
+              {
+                "name": "clearable",
+                "description": "Adds a clear button when the date picker is not empty.",
+                "type": "boolean"
               },
-              { "name": "drawer", "type": "HTMLElement" },
-              { "name": "panel", "type": "HTMLElement" },
-              { "name": "overlay", "type": "HTMLElement" },
               {
                 "name": "open",
-                "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+                "description": "Indicates whether or not the date picker is open. You can toggle this attribute to show and hide the calendar, or\nyou can use the `show()` and `hide()` methods and this attribute will reflect the date picker's open state.",
+                "type": "boolean"
+              },
+              {
+                "name": "hoist",
+                "description": "Enable this option to prevent the calendar 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": "filled",
+                "description": "Draws a filled date picker.",
+                "type": "boolean"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style date picker with rounded edges.",
                 "type": "boolean"
               },
               {
                 "name": "label",
-                "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+                "description": "The date picker's label. If you need to display HTML, use the `label` slot instead.",
                 "type": "string"
               },
               {
                 "name": "placement",
-                "description": "The direction from which the drawer will open.",
-                "type": "'top' | 'end' | 'bottom' | 'start'"
+                "description": "The preferred placement of the date picker's calendar. Note that the actual placement may vary as needed to keep the\ncalendar inside of the viewport.",
+                "type": "'top' | 'bottom'"
               },
               {
-                "name": "contained",
-                "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
-                "type": "boolean"
+                "name": "helpText",
+                "description": "The date picker's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
               },
               {
-                "name": "noHeader",
-                "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+                "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.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "The date picker's required attribute.",
                 "type": "boolean"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
               }
             ],
             "events": [
               {
-                "name": "cw-show",
-                "description": "Emitted when the drawer opens."
+                "name": "cw-change",
+                "description": "Emitted when the control's value changes."
               },
               {
-                "name": "cw-after-show",
-                "description": "Emitted after the drawer opens and all animations are complete."
+                "name": "cw-clear",
+                "description": "Emitted when the control's value is cleared."
               },
               {
-                "name": "cw-hide",
-                "description": "Emitted when the drawer closes."
+                "name": "cw-input",
+                "description": "Emitted when the control receives input."
               },
               {
-                "name": "cw-after-hide",
-                "description": "Emitted after the drawer closes and all animations are complete."
-              },
+                "name": "cw-focus",
+                "description": "Emitted when the control gains focus."
+              },
               {
-                "name": "cw-initial-focus",
-                "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+                "name": "cw-blur",
+                "description": "Emitted when the control loses focus."
               },
               {
-                "name": "cw-request-close",
-                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
-                "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
+                "name": "cw-show",
+                "description": "Emitted when the date picker's calendar opens."
+              },
+              {
+                "name": "cw-after-show",
+                "description": "Emitted after the date picker's calendar opens and all animations are complete."
+              },
+              {
+                "name": "cw-hide",
+                "description": "Emitted when the date picker's calendar closes."
+              },
+              {
+                "name": "cw-after-hide",
+                "description": "Emitted after the date picker's calendar closes and all animations are complete."
+              },
+              {
+                "name": "cw-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               }
             ]
           }
         },
         {
-          "name": "cw-dropdown",
-          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the dropdown opens.\n- **cw-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **cw-hide** - Emitted when the dropdown closes.\n- **cw-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<cw-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<cw-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
+          "name": "cw-details",
+          "description": "Details show a brief summary and expand to show additional content.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the details opens.\n- **cw-after-show** - Emitted after the details opens and all animations are complete.\n- **cw-hide** - Emitted when the details closes.\n- **cw-after-hide** - Emitted after the details closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the details.\n- **hide()** - Hides the details\n\n### **Slots:**\n - _default_ - The details' main content.\n- **summary** - The details' summary. Alternatively, you can use the `summary` attribute.\n- **expand-icon** - Optional expand icon to use instead of the default. Works best with `<cw-icon>`.\n- **collapse-icon** - Optional collapse icon to use instead of the default. Works best with `<cw-icon>`.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header that wraps both the summary and the expand/collapse icon.\n- **summary** - The container that wraps the summary.\n- **summary-icon** - The container that wraps the expand/collapse icons.\n- **content** - The details content.",
           "doc-url": "",
           "attributes": [
             {
               "name": "open",
-              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+              "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "placement",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "value": {
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
-                "default": "'bottom-start'"
-              }
+              "name": "summary",
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "value": { "type": "string" }
             },
             {
               "name": "disabled",
-              "description": "Disables the dropdown so the panel will not open.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "stay-open-on-select",
-              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+              "description": "Disables the details so it can't be toggled.",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "distance",
-              "description": "The distance in pixels from which to offset the panel away from its trigger.",
-              "value": { "type": "number", "default": "0" }
-            },
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The details' main content." },
             {
-              "name": "skidding",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "value": { "type": "number", "default": "0" }
+              "name": "summary",
+              "description": "The details' summary. Alternatively, you can use the `summary` attribute."
             },
             {
-              "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": "expand-icon",
+              "description": "Optional expand icon to use instead of the default. Works best with `<cw-icon>`."
             },
             {
-              "name": "sync",
-              "description": "Syncs the popup width or height to that of the trigger element.",
-              "value": {
-                "type": "'width' | 'height' | 'both' | undefined",
-                "default": "undefined"
-              }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The dropdown's main content." },
-            {
-              "name": "trigger",
-              "description": "The dropdown's trigger, usually a `<cw-button>` element."
+              "name": "collapse-icon",
+              "description": "Optional collapse icon to use instead of the default. Works best with `<cw-icon>`."
             }
           ],
           "events": [
             {
               "name": "cw-show",
-              "description": "Emitted when the dropdown opens."
+              "description": "Emitted when the details opens."
             },
             {
               "name": "cw-after-show",
-              "description": "Emitted after the dropdown opens and all animations are complete."
+              "description": "Emitted after the details opens and all animations are complete."
             },
             {
               "name": "cw-hide",
-              "description": "Emitted when the dropdown closes."
+              "description": "Emitted when the details closes."
             },
             {
               "name": "cw-after-hide",
-              "description": "Emitted after the dropdown closes and all animations are complete."
+              "description": "Emitted after the details closes and all animations are complete."
             }
           ],
           "js": {
             "properties": [
-              { "name": "popup", "type": "CwPopup" },
-              { "name": "trigger", "type": "HTMLSlotElement" },
-              { "name": "panel", "type": "HTMLSlotElement" },
+              { "name": "details", "type": "HTMLDetailsElement" },
+              { "name": "header", "type": "HTMLElement" },
+              { "name": "body", "type": "HTMLElement" },
+              { "name": "expandIconSlot", "type": "HTMLSlotElement" },
+              { "name": "detailsObserver", "type": "MutationObserver" },
               {
                 "name": "open",
-                "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+                "description": "Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the details' open state.",
                 "type": "boolean"
               },
               {
-                "name": "placement",
-                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+                "name": "summary",
+                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+                "type": "string"
               },
               {
                 "name": "disabled",
-                "description": "Disables the dropdown so the panel will not open.",
-                "type": "boolean"
-              },
-              {
-                "name": "stayOpenOnSelect",
-                "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
-                "type": "boolean"
-              },
-              {
-                "name": "containingElement",
-                "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
-                "type": "HTMLElement | undefined"
-              },
-              {
-                "name": "distance",
-                "description": "The distance in pixels from which to offset the panel away from its trigger.",
-                "type": "number"
-              },
-              {
-                "name": "skidding",
-                "description": "The distance in pixels from which to offset the panel along its trigger.",
-                "type": "number"
-              },
-              {
-                "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 details so it can't be toggled.",
                 "type": "boolean"
-              },
-              {
-                "name": "sync",
-                "description": "Syncs the popup width or height to that of the trigger element.",
-                "type": "'width' | 'height' | 'both' | undefined"
               }
             ],
             "events": [
               {
                 "name": "cw-show",
-                "description": "Emitted when the dropdown opens."
+                "description": "Emitted when the details opens."
               },
               {
                 "name": "cw-after-show",
-                "description": "Emitted after the dropdown opens and all animations are complete."
+                "description": "Emitted after the details opens and all animations are complete."
               },
               {
                 "name": "cw-hide",
-                "description": "Emitted when the dropdown closes."
+                "description": "Emitted when the details closes."
               },
               {
                 "name": "cw-after-hide",
-                "description": "Emitted after the dropdown closes and all animations are complete."
+                "description": "Emitted after the details closes and all animations are complete."
               }
             ]
           }
         },
         {
-          "name": "cw-format-bytes",
-          "description": "Formats a number as a human readable bytes value.\n---\n",
+          "name": "cw-dialog",
+          "description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the dialog opens.\n- **cw-after-show** - Emitted after the dialog opens and all animations are complete.\n- **cw-hide** - Emitted when the dialog closes.\n- **cw-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **cw-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **cw-request-close** - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<cw-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--width** - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the dialog.\n- **panel** - The dialog's panel (where the dialog and its content are rendered).\n- **header** - The dialog's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<cw-icon-button>`.\n- **title** - The dialog's title.\n- **close-button** - The close button, an `<cw-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The dialog's body.\n- **footer** - The dialog's footer.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "value",
-              "description": "The number to format in bytes.",
-              "value": { "type": "number", "default": "0" }
+              "name": "open",
+              "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "unit",
-              "description": "The type of unit to display.",
-              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
+              "name": "label",
+              "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "display",
-              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-              "value": {
-                "type": "'long' | 'short' | 'narrow'",
-                "default": "'short'"
-              }
+              "name": "no-header",
+              "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The number to format in bytes.",
-                "type": "number"
-              },
-              {
-                "name": "unit",
-                "description": "The type of unit to display.",
-                "type": "'byte' | 'bit'"
-              },
-              {
-                "name": "display",
-                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
-                "type": "'long' | 'short' | 'narrow'"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "cw-format-date",
-          "description": "Formats a date/time using the specified locale and options.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "date",
-              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-              "value": { "type": "Date | string", "default": "new Date()" }
-            },
-            {
-              "name": "weekday",
-              "description": "The format for displaying the weekday.",
-              "value": { "type": "'narrow' | 'short' | 'long'" }
-            },
+          "slots": [
+            { "name": "", "description": "The dialog's main content." },
             {
-              "name": "era",
-              "description": "The format for displaying the era.",
-              "value": { "type": "'narrow' | 'short' | 'long'" }
+              "name": "label",
+              "description": "The dialog's label. Alternatively, you can use the `label` attribute."
             },
             {
-              "name": "year",
-              "description": "The format for displaying the year.",
-              "value": { "type": "'numeric' | '2-digit'" }
+              "name": "header-actions",
+              "description": "Optional actions to add to the header. Works best with `<cw-icon-button>`."
             },
             {
-              "name": "month",
-              "description": "The format for displaying the month.",
-              "value": {
-                "type": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
-              }
-            },
+              "name": "footer",
+              "description": "The dialog's footer, usually one or more buttons representing various options."
+            }
+          ],
+          "events": [
             {
-              "name": "day",
-              "description": "The format for displaying the day.",
-              "value": { "type": "'numeric' | '2-digit'" }
+              "name": "cw-show",
+              "description": "Emitted when the dialog opens."
             },
             {
-              "name": "hour",
-              "description": "The format for displaying the hour.",
-              "value": { "type": "'numeric' | '2-digit'" }
+              "name": "cw-after-show",
+              "description": "Emitted after the dialog opens and all animations are complete."
             },
             {
-              "name": "minute",
-              "description": "The format for displaying the minute.",
-              "value": { "type": "'numeric' | '2-digit'" }
+              "name": "cw-hide",
+              "description": "Emitted when the dialog closes."
             },
             {
-              "name": "second",
-              "description": "The format for displaying the second.",
-              "value": { "type": "'numeric' | '2-digit'" }
+              "name": "cw-after-hide",
+              "description": "Emitted after the dialog closes and all animations are complete."
             },
             {
-              "name": "time-zone-name",
-              "description": "The format for displaying the time.",
-              "value": { "type": "'short' | 'long'" }
+              "name": "cw-initial-focus",
+              "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
             },
             {
-              "name": "time-zone",
-              "description": "The time zone to express the time in.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "hour-format",
-              "description": "The format for displaying the hour.",
-              "value": { "type": "'auto' | '12' | '24'", "default": "'auto'" }
+              "name": "cw-request-close",
+              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+              "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
               {
-                "name": "date",
-                "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
-                "type": "Date | string"
-              },
-              {
-                "name": "weekday",
-                "description": "The format for displaying the weekday.",
-                "type": "'narrow' | 'short' | 'long'"
+                "name": "modal",
+                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore the dialog's focus trapping."
               },
+              { "name": "dialog", "type": "HTMLElement" },
+              { "name": "panel", "type": "HTMLElement" },
+              { "name": "overlay", "type": "HTMLElement" },
               {
-                "name": "era",
-                "description": "The format for displaying the era.",
-                "type": "'narrow' | 'short' | 'long'"
+                "name": "open",
+                "description": "Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.",
+                "type": "boolean"
               },
               {
-                "name": "year",
-                "description": "The format for displaying the year.",
-                "type": "'numeric' | '2-digit'"
+                "name": "label",
+                "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
               },
               {
-                "name": "month",
-                "description": "The format for displaying the month.",
-                "type": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
-              },
+                "name": "noHeader",
+                "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
               {
-                "name": "day",
-                "description": "The format for displaying the day.",
-                "type": "'numeric' | '2-digit'"
+                "name": "cw-show",
+                "description": "Emitted when the dialog opens."
               },
               {
-                "name": "hour",
-                "description": "The format for displaying the hour.",
-                "type": "'numeric' | '2-digit'"
+                "name": "cw-after-show",
+                "description": "Emitted after the dialog opens and all animations are complete."
               },
               {
-                "name": "minute",
-                "description": "The format for displaying the minute.",
-                "type": "'numeric' | '2-digit'"
+                "name": "cw-hide",
+                "description": "Emitted when the dialog closes."
               },
               {
-                "name": "second",
-                "description": "The format for displaying the second.",
-                "type": "'numeric' | '2-digit'"
+                "name": "cw-after-hide",
+                "description": "Emitted after the dialog closes and all animations are complete."
               },
               {
-                "name": "timeZoneName",
-                "description": "The format for displaying the time.",
-                "type": "'short' | 'long'"
+                "name": "cw-initial-focus",
+                "description": "Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
               },
               {
-                "name": "timeZone",
-                "description": "The time zone to express the time in.",
-                "type": "string"
-              },
+                "name": "cw-request-close",
+                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+                "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss."
+              }
+            ]
+          }
+        },
+        {
+          "name": "cw-divider",
+          "description": "Dividers are used to visually separate or group elements.\n---\n\n\n### **CSS Properties:**\n - **--color** - The color of the divider. _(default: undefined)_\n- **--width** - The width of the divider. _(default: undefined)_\n- **--spacing** - The spacing of the divider. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "vertical",
+              "description": "Draws the divider in a vertical orientation.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
               {
-                "name": "hourFormat",
-                "description": "The format for displaying the hour.",
-                "type": "'auto' | '12' | '24'"
+                "name": "vertical",
+                "description": "Draws the divider in a vertical orientation.",
+                "type": "boolean"
               }
             ],
             "events": []
           }
         },
         {
-          "name": "cw-format-number",
-          "description": "Formats a number using the specified locale and options.\n---\n",
+          "name": "cw-drawer",
+          "description": "Drawers slide in from a container to expose additional options and information.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the drawer opens.\n- **cw-after-show** - Emitted after the drawer opens and all animations are complete.\n- **cw-hide** - Emitted when the drawer closes.\n- **cw-after-hide** - Emitted after the drawer closes and all animations are complete.\n- **cw-initial-focus** - Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **cw-request-close** - Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the drawer.\n- **hide()** - Hides the drawer\n\n### **Slots:**\n - _default_ - The drawer's main content.\n- **label** - The drawer's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<cw-icon-button>`.\n- **footer** - The drawer's footer, usually one or more buttons representing various options.\n\n### **CSS Properties:**\n - **--size** - The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. _(default: undefined)_\n- **--header-spacing** - The amount of padding to use for the header. _(default: undefined)_\n- **--body-spacing** - The amount of padding to use for the body. _(default: undefined)_\n- **--footer-spacing** - The amount of padding to use for the footer. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **overlay** - The overlay that covers the screen behind the drawer.\n- **panel** - The drawer's panel (where the drawer and its content are rendered).\n- **header** - The drawer's header. This element wraps the title and header actions.\n- **header-actions** - Optional actions to add to the header. Works best with `<cw-icon-button>`.\n- **title** - The drawer's title.\n- **close-button** - The close button, an `<cw-icon-button>`.\n- **close-button__base** - The close button's exported `base` part.\n- **body** - The drawer's body.\n- **footer** - The drawer's footer.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "value",
-              "description": "The number to format.",
-              "value": { "type": "number", "default": "0" }
+              "name": "open",
+              "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "type",
-              "description": "The formatting style to use.",
+              "name": "label",
+              "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placement",
+              "description": "The direction from which the drawer will open.",
               "value": {
-                "type": "'currency' | 'decimal' | 'percent'",
-                "default": "'decimal'"
+                "type": "'top' | 'end' | 'bottom' | 'start'",
+                "default": "'end'"
               }
             },
             {
-              "name": "no-grouping",
-              "description": "Turns off grouping separators.",
+              "name": "contained",
+              "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "currency",
-              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
-              "value": { "type": "string", "default": "'USD'" }
+              "name": "no-header",
+              "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The drawer's main content." },
+            {
+              "name": "label",
+              "description": "The drawer's label. Alternatively, you can use the `label` attribute."
             },
             {
-              "name": "currency-display",
-              "description": "How to display the currency.",
-              "value": {
-                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'",
-                "default": "'symbol'"
-              }
+              "name": "header-actions",
+              "description": "Optional actions to add to the header. Works best with `<cw-icon-button>`."
             },
             {
-              "name": "minimum-integer-digits",
-              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
-              "value": { "type": "number" }
+              "name": "footer",
+              "description": "The drawer's footer, usually one or more buttons representing various options."
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-show",
+              "description": "Emitted when the drawer opens."
             },
             {
-              "name": "minimum-fraction-digits",
-              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
-              "value": { "type": "number" }
+              "name": "cw-after-show",
+              "description": "Emitted after the drawer opens and all animations are complete."
             },
             {
-              "name": "maximum-fraction-digits",
-              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
-              "value": { "type": "number" }
+              "name": "cw-hide",
+              "description": "Emitted when the drawer closes."
             },
             {
-              "name": "minimum-significant-digits",
-              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
-              "value": { "type": "number" }
+              "name": "cw-after-hide",
+              "description": "Emitted after the drawer closes and all animations are complete."
             },
             {
-              "name": "maximum-significant-digits",
-              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
-              "value": { "type": "number" }
+              "name": "cw-initial-focus",
+              "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+            },
+            {
+              "name": "cw-request-close",
+              "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+              "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
             }
           ],
-          "events": [],
           "js": {
             "properties": [
               {
-                "name": "value",
-                "description": "The number to format.",
-                "type": "number"
-              },
-              {
-                "name": "type",
-                "description": "The formatting style to use.",
-                "type": "'currency' | 'decimal' | 'percent'"
+                "name": "modal",
+                "description": "Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore the drawer's focus trapping."
               },
+              { "name": "drawer", "type": "HTMLElement" },
+              { "name": "panel", "type": "HTMLElement" },
+              { "name": "overlay", "type": "HTMLElement" },
               {
-                "name": "noGrouping",
-                "description": "Turns off grouping separators.",
+                "name": "open",
+                "description": "Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.",
                 "type": "boolean"
               },
               {
-                "name": "currency",
-                "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
+                "name": "label",
+                "description": "The drawer's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
                 "type": "string"
               },
               {
-                "name": "currencyDisplay",
-                "description": "How to display the currency.",
-                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
+                "name": "placement",
+                "description": "The direction from which the drawer will open.",
+                "type": "'top' | 'end' | 'bottom' | 'start'"
               },
               {
-                "name": "minimumIntegerDigits",
-                "description": "The minimum number of integer digits to use. Possible values are 1-21.",
-                "type": "number"
+                "name": "contained",
+                "description": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this attribute and add `position: relative` to the parent.",
+                "type": "boolean"
               },
               {
-                "name": "minimumFractionDigits",
-                "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
-                "type": "number"
+                "name": "noHeader",
+                "description": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-show",
+                "description": "Emitted when the drawer opens."
               },
               {
-                "name": "maximumFractionDigits",
-                "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
-                "type": "number"
+                "name": "cw-after-show",
+                "description": "Emitted after the drawer opens and all animations are complete."
               },
               {
-                "name": "minimumSignificantDigits",
-                "description": "The minimum number of significant digits to use. Possible values are 1-21.",
-                "type": "number"
+                "name": "cw-hide",
+                "description": "Emitted when the drawer closes."
               },
               {
-                "name": "maximumSignificantDigits",
-                "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
-                "type": "number"
+                "name": "cw-after-hide",
+                "description": "Emitted after the drawer closes and all animations are complete."
+              },
+              {
+                "name": "cw-initial-focus",
+                "description": "Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input."
+              },
+              {
+                "name": "cw-request-close",
+                "type": "{ source: 'close-button' | 'keyboard' | 'overlay' }",
+                "description": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss."
               }
-            ],
-            "events": []
+            ]
           }
         },
         {
-          "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`",
+          "name": "cw-dropdown",
+          "description": "Dropdowns expose additional content that \"drops down\" in a panel.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the dropdown opens.\n- **cw-after-show** - Emitted after the dropdown opens and all animations are complete.\n- **cw-hide** - Emitted when the dropdown closes.\n- **cw-after-hide** - Emitted after the dropdown closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the dropdown panel.\n- **hide()** - Hides the dropdown panel\n- **reposition()** - Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated.\n\n### **Slots:**\n - _default_ - The dropdown's main content.\n- **trigger** - The dropdown's trigger, usually a `<cw-button>` element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, an `<cw-popup>` element.\n- **base__popup** - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n- **trigger** - The container that wraps the trigger.\n- **panel** - The panel that gets shown when the dropdown is open.",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "src",
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "value": { "type": "string | undefined" }
+              "name": "open",
+              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "label",
-              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-              "value": { "type": "string", "default": "''" }
+              "name": "placement",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "value": {
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+                "default": "'bottom-start'"
+              }
             },
             {
-              "name": "library",
-              "description": "The name of a registered custom icon library.",
-              "value": { "type": "string", "default": "'default'" }
-            }
-          ],
-          "events": [
-            {
-              "name": "cw-load",
-              "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit."
+              "name": "disabled",
+              "description": "Disables the dropdown so the panel will not open.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "cw-error",
-              "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "name",
-                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "src",
-                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "label",
-                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
-                "type": "string"
-              },
-              {
-                "name": "library",
-                "description": "The name of a registered custom icon library.",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "cw-load",
-                "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit."
-              },
-              {
-                "name": "cw-error",
-                "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit."
-              }
-            ]
-          }
-        },
-        {
-          "name": "cw-icon-button",
-          "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the icon button loses focus.\n- **cw-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "name",
-              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-              "value": { "type": "string | undefined" }
+              "name": "stay-open-on-select",
+              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "library",
-              "description": "The name of a registered custom icon library.",
-              "value": { "type": "string | undefined" }
+              "name": "distance",
+              "description": "The distance in pixels from which to offset the panel away from its trigger.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "src",
-              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-              "value": { "type": "string | undefined" }
+              "name": "skidding",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "href",
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-              "value": { "type": "string | undefined" }
+              "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": "target",
-              "description": "Tells the browser where to open the link. Only used when `href` is set.",
+              "name": "sync",
+              "description": "Syncs the popup width or height to that of the trigger element.",
               "value": {
-                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+                "type": "'width' | 'height' | 'both' | undefined",
+                "default": "undefined"
               }
-            },
-            {
-              "name": "download",
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "label",
-              "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
-              "value": { "type": "string", "default": "''" }
-            },
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The dropdown's main content." },
             {
-              "name": "disabled",
-              "description": "Disables the button.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "trigger",
+              "description": "The dropdown's trigger, usually a `<cw-button>` element."
             }
           ],
           "events": [
             {
-              "name": "cw-blur",
-              "description": "Emitted when the icon button loses focus."
+              "name": "cw-show",
+              "description": "Emitted when the dropdown opens."
             },
             {
-              "name": "cw-focus",
-              "description": "Emitted when the icon button gains focus."
+              "name": "cw-after-show",
+              "description": "Emitted after the dropdown opens and all animations are complete."
+            },
+            {
+              "name": "cw-hide",
+              "description": "Emitted when the dropdown closes."
+            },
+            {
+              "name": "cw-after-hide",
+              "description": "Emitted after the dropdown closes and all animations are complete."
             }
           ],
           "js": {
             "properties": [
+              { "name": "popup", "type": "CwPopup" },
+              { "name": "trigger", "type": "HTMLSlotElement" },
+              { "name": "panel", "type": "HTMLSlotElement" },
               {
-                "name": "button",
-                "type": "HTMLButtonElement | HTMLLinkElement"
+                "name": "open",
+                "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
+                "type": "boolean"
               },
               {
-                "name": "name",
-                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
-                "type": "string | undefined"
+                "name": "placement",
+                "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+                "type": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
               },
               {
-                "name": "library",
-                "description": "The name of a registered custom icon library.",
-                "type": "string | undefined"
+                "name": "disabled",
+                "description": "Disables the dropdown so the panel will not open.",
+                "type": "boolean"
               },
               {
-                "name": "src",
-                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
-                "type": "string | undefined"
+                "name": "stayOpenOnSelect",
+                "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+                "type": "boolean"
               },
               {
-                "name": "href",
-                "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-                "type": "string | undefined"
+                "name": "containingElement",
+                "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other\ncomponents that use a dropdown internally.",
+                "type": "HTMLElement | 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": "distance",
+                "description": "The distance in pixels from which to offset the panel away from its trigger.",
+                "type": "number"
               },
               {
-                "name": "download",
-                "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
-                "type": "string | undefined"
+                "name": "skidding",
+                "description": "The distance in pixels from which to offset the panel along its trigger.",
+                "type": "number"
               },
               {
-                "name": "label",
-                "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
-                "type": "string"
+                "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": "disabled",
-                "description": "Disables the button.",
-                "type": "boolean"
+                "name": "sync",
+                "description": "Syncs the popup width or height to that of the trigger element.",
+                "type": "'width' | 'height' | 'both' | undefined"
               }
             ],
             "events": [
               {
-                "name": "cw-blur",
-                "description": "Emitted when the icon button loses focus."
+                "name": "cw-show",
+                "description": "Emitted when the dropdown opens."
               },
               {
-                "name": "cw-focus",
-                "description": "Emitted when the icon button gains focus."
+                "name": "cw-after-show",
+                "description": "Emitted after the dropdown opens and all animations are complete."
+              },
+              {
+                "name": "cw-hide",
+                "description": "Emitted when the dropdown closes."
+              },
+              {
+                "name": "cw-after-hide",
+                "description": "Emitted after the dropdown closes and all animations are complete."
               }
             ]
           }
         },
         {
-          "name": "cw-image-comparer",
-          "description": "Compare visual differences between similar photos with a sliding panel.\n---\n\n\n### **Events:**\n - **cw-change** - Emitted when the position changes.\n\n### **Slots:**\n - **before** - The before image, an `<img>` or `<svg>` element.\n- **after** - The after image, an `<img>` or `<svg>` element.\n- **handle** - The icon used inside the handle.\n\n### **CSS Properties:**\n - **--divider-width** - The width of the dividing line. _(default: undefined)_\n- **--handle-size** - The size of the compare handle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **before** - The container that wraps the before image.\n- **after** - The container that wraps the after image.\n- **divider** - The divider that separates the images.\n- **handle** - The handle that the user drags to expose the after image.",
+          "name": "cw-format-bytes",
+          "description": "Formats a number as a human readable bytes value.\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "position",
-              "description": "The position of the divider as a percentage.",
-              "value": { "type": "number", "default": "50" }
-            }
-          ],
-          "slots": [
-            {
-              "name": "before",
-              "description": "The before image, an `<img>` or `<svg>` element."
+              "name": "value",
+              "description": "The number to format in bytes.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "after",
-              "description": "The after image, an `<img>` or `<svg>` element."
+              "name": "unit",
+              "description": "The type of unit to display.",
+              "value": { "type": "'byte' | 'bit'", "default": "'byte'" }
             },
             {
-              "name": "handle",
-              "description": "The icon used inside the handle."
-            }
-          ],
-          "events": [
-            {
-              "name": "cw-change",
-              "description": "Emitted when the position changes."
+              "name": "display",
+              "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+              "value": {
+                "type": "'long' | 'short' | 'narrow'",
+                "default": "'short'"
+              }
             }
           ],
+          "events": [],
           "js": {
             "properties": [
-              { "name": "base", "type": "HTMLElement" },
-              { "name": "handle", "type": "HTMLElement" },
               {
-                "name": "position",
-                "description": "The position of the divider as a percentage.",
+                "name": "value",
+                "description": "The number to format in bytes.",
                 "type": "number"
-              }
-            ],
-            "events": [
+              },
               {
-                "name": "cw-change",
-                "description": "Emitted when the position changes."
+                "name": "unit",
+                "description": "The type of unit to display.",
+                "type": "'byte' | 'bit'"
+              },
+              {
+                "name": "display",
+                "description": "Determines how to display the result, e.g. \"100 bytes\", \"100 b\", or \"100b\".",
+                "type": "'long' | 'short' | 'narrow'"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
-          "name": "cw-include",
-          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **cw-load** - Emitted when the included file is loaded.\n- **cw-error** - Emitted when the included file fails to load due to an error.",
+          "name": "cw-format-date",
+          "description": "Formats a date/time using the specified locale and options.\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "src",
-              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "value": { "type": "string" }
+              "name": "date",
+              "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+              "value": { "type": "Date | string", "default": "new Date()" }
             },
             {
-              "name": "mode",
-              "description": "The fetch mode to use.",
+              "name": "weekday",
+              "description": "The format for displaying the weekday.",
+              "value": { "type": "'narrow' | 'short' | 'long'" }
+            },
+            {
+              "name": "era",
+              "description": "The format for displaying the era.",
+              "value": { "type": "'narrow' | 'short' | 'long'" }
+            },
+            {
+              "name": "year",
+              "description": "The format for displaying the year.",
+              "value": { "type": "'numeric' | '2-digit'" }
+            },
+            {
+              "name": "month",
+              "description": "The format for displaying the month.",
               "value": {
-                "type": "'cors' | 'no-cors' | 'same-origin'",
-                "default": "'cors'"
+                "type": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
               }
             },
             {
-              "name": "allow-scripts",
-              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "events": [
+              "name": "day",
+              "description": "The format for displaying the day.",
+              "value": { "type": "'numeric' | '2-digit'" }
+            },
             {
-              "name": "cw-load",
-              "description": "Emitted when the included file is loaded."
+              "name": "hour",
+              "description": "The format for displaying the hour.",
+              "value": { "type": "'numeric' | '2-digit'" }
             },
             {
-              "name": "cw-error",
-              "type": "{ status: number }",
-              "description": "Emitted when the included file fails to load due to an error."
+              "name": "minute",
+              "description": "The format for displaying the minute.",
+              "value": { "type": "'numeric' | '2-digit'" }
+            },
+            {
+              "name": "second",
+              "description": "The format for displaying the second.",
+              "value": { "type": "'numeric' | '2-digit'" }
+            },
+            {
+              "name": "time-zone-name",
+              "description": "The format for displaying the time.",
+              "value": { "type": "'short' | 'long'" }
+            },
+            {
+              "name": "time-zone",
+              "description": "The time zone to express the time in.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "hour-format",
+              "description": "The format for displaying the hour.",
+              "value": { "type": "'auto' | '12' | '24'", "default": "'auto'" }
             }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "src",
-                "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-                "type": "string"
+                "name": "date",
+                "description": "The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly\nrecommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format\nin JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).",
+                "type": "Date | string"
               },
               {
-                "name": "mode",
-                "description": "The fetch mode to use.",
-                "type": "'cors' | 'no-cors' | 'same-origin'"
+                "name": "weekday",
+                "description": "The format for displaying the weekday.",
+                "type": "'narrow' | 'short' | 'long'"
               },
               {
-                "name": "allowScripts",
-                "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
-                "type": "boolean"
-              }
-            ],
-            "events": [
+                "name": "era",
+                "description": "The format for displaying the era.",
+                "type": "'narrow' | 'short' | 'long'"
+              },
               {
-                "name": "cw-load",
-                "description": "Emitted when the included file is loaded."
+                "name": "year",
+                "description": "The format for displaying the year.",
+                "type": "'numeric' | '2-digit'"
               },
               {
-                "name": "cw-error",
-                "type": "{ status: number }",
-                "description": "Emitted when the included file fails to load due to an error."
+                "name": "month",
+                "description": "The format for displaying the month.",
+                "type": "'numeric' | '2-digit' | 'narrow' | 'short' | 'long'"
+              },
+              {
+                "name": "day",
+                "description": "The format for displaying the day.",
+                "type": "'numeric' | '2-digit'"
+              },
+              {
+                "name": "hour",
+                "description": "The format for displaying the hour.",
+                "type": "'numeric' | '2-digit'"
+              },
+              {
+                "name": "minute",
+                "description": "The format for displaying the minute.",
+                "type": "'numeric' | '2-digit'"
+              },
+              {
+                "name": "second",
+                "description": "The format for displaying the second.",
+                "type": "'numeric' | '2-digit'"
+              },
+              {
+                "name": "timeZoneName",
+                "description": "The format for displaying the time.",
+                "type": "'short' | 'long'"
+              },
+              {
+                "name": "timeZone",
+                "description": "The time zone to express the time in.",
+                "type": "string"
+              },
+              {
+                "name": "hourFormat",
+                "description": "The format for displaying the hour.",
+                "type": "'auto' | '12' | '24'"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
-          "name": "cw-input",
-          "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the control loses focus.\n- **cw-change** - Emitted when an alteration to the control's value is committed by the user.\n- **cw-clear** - Emitted when the clear button is activated.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-input** - Emitted when the control 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 input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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 input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
+          "name": "cw-format-number",
+          "description": "Formats a number using the specified locale and options.\n---\n",
           "doc-url": "",
           "attributes": [
-            { "name": "title", "value": { "type": "string", "default": "''" } },
-            {
-              "name": "type",
-              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
-              "value": {
-                "type": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'",
-                "default": "'text'"
-              }
-            },
-            {
-              "name": "name",
-              "description": "The name of the input, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
             {
               "name": "value",
-              "description": "The current value of the input, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
+              "description": "The number to format.",
+              "value": { "type": "number", "default": "0" }
             },
             {
-              "name": "size",
-              "description": "The input's size.",
+              "name": "type",
+              "description": "The formatting style to use.",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "'currency' | 'decimal' | 'percent'",
+                "default": "'decimal'"
               }
             },
             {
-              "name": "filled",
-              "description": "Draws a filled input.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "pill",
-              "description": "Draws a pill-style input with rounded edges.",
+              "name": "no-grouping",
+              "description": "Turns off grouping separators.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "label",
-              "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "help-text",
-              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "value": { "type": "string", "default": "''" }
+              "name": "currency",
+              "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
+              "value": { "type": "string", "default": "'USD'" }
             },
             {
-              "name": "clearable",
-              "description": "Adds a clear button when the input is not empty.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "currency-display",
+              "description": "How to display the currency.",
+              "value": {
+                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'",
+                "default": "'symbol'"
+              }
             },
             {
-              "name": "disabled",
-              "description": "Disables the input.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "minimum-integer-digits",
+              "description": "The minimum number of integer digits to use. Possible values are 1-21.",
+              "value": { "type": "number" }
             },
             {
-              "name": "placeholder",
-              "description": "Placeholder text to show as a hint when the input is empty.",
-              "value": { "type": "string", "default": "''" }
+              "name": "minimum-fraction-digits",
+              "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
+              "value": { "type": "number" }
             },
             {
-              "name": "readonly",
-              "description": "Makes the input readonly.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "maximum-fraction-digits",
+              "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
+              "value": { "type": "number" }
             },
             {
-              "name": "password-toggle",
-              "description": "Adds a button to toggle the password's visibility. Only applies to password types.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "minimum-significant-digits",
+              "description": "The minimum number of significant digits to use. Possible values are 1-21.",
+              "value": { "type": "number" }
             },
             {
-              "name": "password-visible",
-              "description": "Determines whether or not the password is currently visible. Only applies to password input types.",
+              "name": "maximum-significant-digits",
+              "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
+              "value": { "type": "number" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The number to format.",
+                "type": "number"
+              },
+              {
+                "name": "type",
+                "description": "The formatting style to use.",
+                "type": "'currency' | 'decimal' | 'percent'"
+              },
+              {
+                "name": "noGrouping",
+                "description": "Turns off grouping separators.",
+                "type": "boolean"
+              },
+              {
+                "name": "currency",
+                "description": "The [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code to use when formatting.",
+                "type": "string"
+              },
+              {
+                "name": "currencyDisplay",
+                "description": "How to display the currency.",
+                "type": "'symbol' | 'narrowSymbol' | 'code' | 'name'"
+              },
+              {
+                "name": "minimumIntegerDigits",
+                "description": "The minimum number of integer digits to use. Possible values are 1-21.",
+                "type": "number"
+              },
+              {
+                "name": "minimumFractionDigits",
+                "description": "The minimum number of fraction digits to use. Possible values are 0-20.",
+                "type": "number"
+              },
+              {
+                "name": "maximumFractionDigits",
+                "description": "The maximum number of fraction digits to use. Possible values are 0-0.",
+                "type": "number"
+              },
+              {
+                "name": "minimumSignificantDigits",
+                "description": "The minimum number of significant digits to use. Possible values are 1-21.",
+                "type": "number"
+              },
+              {
+                "name": "maximumSignificantDigits",
+                "description": "The maximum number of significant digits to use,. Possible values are 1-21.",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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`",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "src",
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "library",
+              "description": "The name of a registered custom icon library.",
+              "value": { "type": "string", "default": "'default'" }
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-load",
+              "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit."
+            },
+            {
+              "name": "cw-error",
+              "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "src",
+                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "label",
+                "description": "An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\nignored by assistive devices.",
+                "type": "string"
+              },
+              {
+                "name": "library",
+                "description": "The name of a registered custom icon library.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-load",
+                "description": "Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit."
+              },
+              {
+                "name": "cw-error",
+                "description": "Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit."
+              }
+            ]
+          }
+        },
+        {
+          "name": "cw-icon-button",
+          "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the icon button loses focus.\n- **cw-focus** - Emitted when the icon button gains focus.\n\n### **Methods:**\n - **click()** - Simulates a click on the icon button.\n- **focus(options: _FocusOptions_)** - Sets focus on the icon button.\n- **blur()** - Removes focus from the icon button.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "library",
+              "description": "The name of a registered custom icon library.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "src",
+              "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "href",
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "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": "download",
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the button.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-blur",
+              "description": "Emitted when the icon button loses focus."
+            },
+            {
+              "name": "cw-focus",
+              "description": "Emitted when the icon button gains focus."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "button",
+                "type": "HTMLButtonElement | HTMLLinkElement"
+              },
+              {
+                "name": "name",
+                "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "library",
+                "description": "The name of a registered custom icon library.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "src",
+                "description": "An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\ncan result in XSS attacks.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "href",
+                "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+                "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": "download",
+                "description": "Tells the browser to download the linked file as this filename. Only used when `href` is set.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "label",
+                "description": "A description that gets read by assistive devices. For optimal accessibility, you should always include a label\nthat describes what the icon button does.",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the button.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-blur",
+                "description": "Emitted when the icon button loses focus."
+              },
+              {
+                "name": "cw-focus",
+                "description": "Emitted when the icon button gains focus."
+              }
+            ]
+          }
+        },
+        {
+          "name": "cw-image-comparer",
+          "description": "Compare visual differences between similar photos with a sliding panel.\n---\n\n\n### **Events:**\n - **cw-change** - Emitted when the position changes.\n\n### **Slots:**\n - **before** - The before image, an `<img>` or `<svg>` element.\n- **after** - The after image, an `<img>` or `<svg>` element.\n- **handle** - The icon used inside the handle.\n\n### **CSS Properties:**\n - **--divider-width** - The width of the dividing line. _(default: undefined)_\n- **--handle-size** - The size of the compare handle. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **before** - The container that wraps the before image.\n- **after** - The container that wraps the after image.\n- **divider** - The divider that separates the images.\n- **handle** - The handle that the user drags to expose the after image.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "position",
+              "description": "The position of the divider as a percentage.",
+              "value": { "type": "number", "default": "50" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "before",
+              "description": "The before image, an `<img>` or `<svg>` element."
+            },
+            {
+              "name": "after",
+              "description": "The after image, an `<img>` or `<svg>` element."
+            },
+            {
+              "name": "handle",
+              "description": "The icon used inside the handle."
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-change",
+              "description": "Emitted when the position changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "base", "type": "HTMLElement" },
+              { "name": "handle", "type": "HTMLElement" },
+              {
+                "name": "position",
+                "description": "The position of the divider as a percentage.",
+                "type": "number"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-change",
+                "description": "Emitted when the position changes."
+              }
+            ]
+          }
+        },
+        {
+          "name": "cw-include",
+          "description": "Includes give you the power to embed external HTML files into the page.\n---\n\n\n### **Events:**\n - **cw-load** - Emitted when the included file is loaded.\n- **cw-error** - Emitted when the included file fails to load due to an error.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "src",
+              "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "mode",
+              "description": "The fetch mode to use.",
+              "value": {
+                "type": "'cors' | 'no-cors' | 'same-origin'",
+                "default": "'cors'"
+              }
+            },
+            {
+              "name": "allow-scripts",
+              "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-load",
+              "description": "Emitted when the included file is loaded."
+            },
+            {
+              "name": "cw-error",
+              "type": "{ status: number }",
+              "description": "Emitted when the included file fails to load due to an error."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "src",
+                "description": "The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+                "type": "string"
+              },
+              {
+                "name": "mode",
+                "description": "The fetch mode to use.",
+                "type": "'cors' | 'no-cors' | 'same-origin'"
+              },
+              {
+                "name": "allowScripts",
+                "description": "Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as\ncode and can result in XSS attacks.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-load",
+                "description": "Emitted when the included file is loaded."
+              },
+              {
+                "name": "cw-error",
+                "type": "{ status: number }",
+                "description": "Emitted when the included file fails to load due to an error."
+              }
+            ]
+          }
+        },
+        {
+          "name": "cw-input",
+          "description": "Inputs collect data from the user.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the control loses focus.\n- **cw-change** - Emitted when an alteration to the control's value is committed by the user.\n- **cw-clear** - Emitted when the clear button is activated.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-input** - Emitted when the control 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 input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\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 input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **suffix** - Used to append a presentational icon or similar element to the input.\n- **clear-icon** - An icon to use in lieu of the default clear icon.\n- **show-password-icon** - An icon to use in lieu of the default show password icon.\n- **hide-password-icon** - An icon to use in lieu of the default hide password icon.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input** - The internal `<input>` control.\n- **prefix** - The container that wraps the prefix.\n- **clear-button** - The clear button.\n- **password-toggle-button** - The password toggle button.\n- **suffix** - The container that wraps the suffix.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "type",
+              "description": "The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\nto `text`.",
+              "value": {
+                "type": "| 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url'",
+                "default": "'text'"
+              }
+            },
+            {
+              "name": "name",
+              "description": "The name of the input, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the input, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The input's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "filled",
+              "description": "Draws a filled input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style input with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The input's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "clearable",
+              "description": "Adds a clear button when the input is not empty.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the input.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the input is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the input readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "password-toggle",
+              "description": "Adds a button to toggle the password's visibility. Only applies to password types.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "password-visible",
+              "description": "Determines whether or not the password is currently visible. Only applies to password input types.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -3424,6 +4099,106 @@
             "events": []
           }
         },
+        {
+          "name": "cw-pagination",
+          "description": "Pagination lets users navigate between pages of content.\n---\n\n\n### **Events:**\n - **cw-change** - Emitted when the current page changes as a result of user interaction.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper, a `<nav>` element.\n- **pages** - The container that wraps the page buttons and ellipses.\n- **page** - An individual page button.\n- **page--active** - Applied to the page button for the current page.\n- **ellipsis** - An ellipsis shown in place of collapsed page buttons.\n- **previous-button** - The button that navigates to the previous page.\n- **next-button** - The button that navigates to the next page.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "total-items",
+              "description": "The total number of items being paginated.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "page-size",
+              "description": "The number of items shown per page. Used with `total-items` to determine the total number of pages.",
+              "value": { "type": "number", "default": "10" }
+            },
+            {
+              "name": "page",
+              "description": "The current page, 1-based.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "sibling-count",
+              "description": "The number of page buttons to show on either side of the current page.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "boundary-count",
+              "description": "The number of page buttons to always show at the start and end of the page list.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "size",
+              "description": "The pagination's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the pagination control.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "cw-change",
+              "description": "Emitted when the current page changes as a result of user interaction."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "totalItems",
+                "description": "The total number of items being paginated.",
+                "type": "number"
+              },
+              {
+                "name": "pageSize",
+                "description": "The number of items shown per page. Used with `total-items` to determine the total number of pages.",
+                "type": "number"
+              },
+              {
+                "name": "page",
+                "description": "The current page, 1-based.",
+                "type": "number"
+              },
+              {
+                "name": "siblingCount",
+                "description": "The number of page buttons to show on either side of the current page.",
+                "type": "number"
+              },
+              {
+                "name": "boundaryCount",
+                "description": "The number of page buttons to always show at the start and end of the page list.",
+                "type": "number"
+              },
+              {
+                "name": "size",
+                "description": "The pagination's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the pagination control.",
+                "type": "boolean"
+              },
+              {
+                "name": "totalPages",
+                "description": "The total number of pages, derived from `total-items` and `page-size`."
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-change",
+                "description": "Emitted when the current page changes as a result of user interaction."
+              }
+            ]
+          }
+        },
         {
           "name": "cw-popup",
           "description": "Popup is a utility that lets you declaratively anchor \"popup\" containers to another element.\n---\n\n\n### **Events:**\n - **cw-reposition** - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive operations in your listener or consider debouncing it.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The popup's content.\n- **anchor** - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the `anchor` attribute or property instead.\n\n### **CSS Properties:**\n - **--arrow-size** - The size of the arrow. Note that an arrow won't be shown unless the `arrow` attribute is used. _(default: 6px)_\n- **--arrow-color** - The color of the arrow. _(default: var(--cw-color-neutral-0))_\n- **--auto-size-available-width** - A read-only custom property that determines the amount of width the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n- **--auto-size-available-height** - A read-only custom property that determines the amount of height the popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only available when using `auto-size`. _(default: undefined)_\n\n### **CSS Parts:**\n - **arrow** - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and maybe a border or box shadow.\n- **popup** - The popup's container. Useful for setting a background color, box shadow, etc.\n- **hover-bridge** - The hover bridge element. Only available when the `hover-bridge` option is enabled.",
@@ -5373,203 +6148,498 @@
           "doc-url": "",
           "attributes": [
             {
-              "name": "variant",
-              "description": "The tag's theme variant.",
+              "name": "variant",
+              "description": "The tag's theme variant.",
+              "value": {
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'",
+                "default": "'neutral'"
+              }
+            },
+            {
+              "name": "size",
+              "description": "The tag's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style tag with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "removable",
+              "description": "Makes the tag removable and shows a remove button.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tag's content." }],
+          "events": [
+            {
+              "name": "cw-remove",
+              "description": "Emitted when the remove button is activated."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "The tag's theme variant.",
+                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+              },
+              {
+                "name": "size",
+                "description": "The tag's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "pill",
+                "description": "Draws a pill-style tag with rounded edges.",
+                "type": "boolean"
+              },
+              {
+                "name": "removable",
+                "description": "Makes the tag removable and shows a remove button.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-remove",
+                "description": "Emitted when the remove button is activated."
+              }
+            ]
+          }
+        },
+        {
+          "name": "cw-textarea",
+          "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the control loses focus.\n- **cw-change** - Emitted when an alteration to the control's value is committed by the user.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-input** - Emitted when the control 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 textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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 textarea's label. Alternatively, you can use the `label` attribute.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
+          "doc-url": "",
+          "attributes": [
+            { "name": "title", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "name",
+              "description": "The name of the textarea, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the textarea, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "description": "The textarea's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "filled",
+              "description": "Draws a filled textarea.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the input is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "rows",
+              "description": "The number of rows to display by default.",
+              "value": { "type": "number", "default": "4" }
+            },
+            {
+              "name": "resize",
+              "description": "Controls how the textarea can be resized.",
+              "value": {
+                "type": "'none' | 'vertical' | 'auto'",
+                "default": "'vertical'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the textarea.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "Makes the textarea readonly.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "required",
+              "description": "Makes the textarea a required field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "minlength",
+              "description": "The minimum length of input that will be considered valid.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "maxlength",
+              "description": "The maximum length of input that will be considered valid.",
+              "value": { "type": "number" }
+            },
+            {
+              "name": "autocapitalize",
+              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
               "value": {
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'",
-                "default": "'neutral'"
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
               }
             },
             {
-              "name": "size",
-              "description": "The tag's size.",
+              "name": "autocorrect",
+              "description": "Indicates whether the browser's autocorrect feature is on or off.\n\nTyped as `any` because TS's DOM lib mistypes `HTMLElement.autocorrect` as `boolean`, but the HTML attribute\nactually accepts 'on'/'off' strings, which would otherwise create an unfixable override conflict.",
+              "value": { "type": "any" }
+            },
+            {
+              "name": "autocomplete",
+              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "autofocus",
+              "description": "Indicates that the input should receive focus on page load.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "enterkeyhint",
+              "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
               "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
               }
             },
             {
-              "name": "pill",
-              "description": "Draws a pill-style tag with rounded edges.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "spellcheck",
+              "description": "Enables spell checking on the textarea.",
+              "value": { "type": "boolean", "default": "true" }
             },
             {
-              "name": "removable",
-              "description": "Makes the tag removable and shows a remove button.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "inputmode",
+              "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
+              "value": {
+                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "The textarea's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute."
             }
           ],
-          "slots": [{ "name": "", "description": "The tag's content." }],
           "events": [
             {
-              "name": "cw-remove",
-              "description": "Emitted when the remove button is activated."
+              "name": "cw-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "cw-change",
+              "description": "Emitted when an alteration to the control's value is committed by the user."
+            },
+            {
+              "name": "cw-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "cw-input",
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "cw-invalid",
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
             }
           ],
           "js": {
             "properties": [
+              { "name": "input", "type": "HTMLTextAreaElement" },
+              { "name": "sizeAdjuster", "type": "HTMLTextAreaElement" },
+              { "name": "title", "type": "string" },
               {
-                "name": "variant",
-                "description": "The tag's theme variant.",
-                "type": "'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "name": "name",
+                "description": "The name of the textarea, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the textarea, submitted as a name/value pair with form data.",
+                "type": "string"
               },
               {
                 "name": "size",
-                "description": "The tag's size.",
+                "description": "The textarea's size.",
                 "type": "'small' | 'medium' | 'large'"
               },
               {
-                "name": "pill",
-                "description": "Draws a pill-style tag with rounded edges.",
+                "name": "filled",
+                "description": "Draws a filled textarea.",
                 "type": "boolean"
               },
               {
-                "name": "removable",
-                "description": "Makes the tag removable and shows a remove button.",
+                "name": "label",
+                "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Placeholder text to show as a hint when the input is empty.",
+                "type": "string"
+              },
+              {
+                "name": "rows",
+                "description": "The number of rows to display by default.",
+                "type": "number"
+              },
+              {
+                "name": "resize",
+                "description": "Controls how the textarea can be resized.",
+                "type": "'none' | 'vertical' | 'auto'"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the textarea.",
+                "type": "boolean"
+              },
+              {
+                "name": "readonly",
+                "description": "Makes the textarea readonly.",
+                "type": "boolean"
+              },
+              {
+                "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.",
+                "type": "string"
+              },
+              {
+                "name": "required",
+                "description": "Makes the textarea a required field.",
+                "type": "boolean"
+              },
+              {
+                "name": "minlength",
+                "description": "The minimum length of input that will be considered valid.",
+                "type": "number"
+              },
+              {
+                "name": "maxlength",
+                "description": "The maximum length of input that will be considered valid.",
+                "type": "number"
+              },
+              {
+                "name": "autocapitalize",
+                "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
+                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+              },
+              {
+                "name": "autocorrect",
+                "description": "Indicates whether the browser's autocorrect feature is on or off.\n\nTyped as `any` because TS's DOM lib mistypes `HTMLElement.autocorrect` as `boolean`, but the HTML attribute\nactually accepts 'on'/'off' strings, which would otherwise create an unfixable override conflict.",
+                "type": "any"
+              },
+              {
+                "name": "autocomplete",
+                "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
+                "type": "string"
+              },
+              {
+                "name": "autofocus",
+                "description": "Indicates that the input should receive focus on page load.",
+                "type": "boolean"
+              },
+              {
+                "name": "enterkeyhint",
+                "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
+                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+              },
+              {
+                "name": "spellcheck",
+                "description": "Enables spell checking on the textarea.",
                 "type": "boolean"
+              },
+              {
+                "name": "inputmode",
+                "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
+                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
+              },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "validationMessage",
+                "description": "Gets the validation message"
               }
             ],
             "events": [
               {
-                "name": "cw-remove",
-                "description": "Emitted when the remove button is activated."
+                "name": "cw-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "cw-change",
+                "description": "Emitted when an alteration to the control's value is committed by the user."
+              },
+              {
+                "name": "cw-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "cw-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "cw-invalid",
+                "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied."
               }
             ]
           }
         },
         {
-          "name": "cw-textarea",
-          "description": "Textareas collect data from the user and allow multiple lines of text.\n---\n\n\n### **Events:**\n - **cw-blur** - Emitted when the control loses focus.\n- **cw-change** - Emitted when an alteration to the control's value is committed by the user.\n- **cw-focus** - Emitted when the control gains focus.\n- **cw-input** - Emitted when the control 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 textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{ top?: number; left?: number }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\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 textarea's label. Alternatively, you can use the `label` attribute.\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 input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **textarea** - The internal `<textarea>` control.",
+          "name": "cw-time-picker",
+          "description": "Time pickers let users select a time from a set of predefined hour, minute, second, and meridiem columns.\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 time picker's listbox opens.\n- **cw-after-show** - Emitted after the time picker's listbox opens and all animations are complete.\n- **cw-hide** - Emitted when the time picker's listbox closes.\n- **cw-after-hide** - Emitted after the time picker'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 - **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 time 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 time, an `<input>` element.\n- **listbox** - The listbox container where the hour/minute/second/meridiem columns are rendered.\n- **column** - One of the listbox's columns.\n- **option** - An individual option within a column.\n- **clear-button** - The clear button.\n- **expand-icon** - The container that wraps the expand icon.",
           "doc-url": "",
           "attributes": [
-            { "name": "title", "value": { "type": "string", "default": "''" } },
             {
               "name": "name",
-              "description": "The name of the textarea, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "value",
-              "description": "The current value of the textarea, submitted as a name/value pair with form data.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "size",
-              "description": "The textarea's size.",
-              "value": {
-                "type": "'small' | 'medium' | 'large'",
-                "default": "'medium'"
-              }
-            },
-            {
-              "name": "filled",
-              "description": "Draws a filled textarea.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
+              "description": "The name of the time picker, submitted as a name/value pair with form data.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "help-text",
-              "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "name": "value",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "placeholder",
-              "description": "Placeholder text to show as a hint when the input is empty.",
-              "value": { "type": "string", "default": "''" }
+              "name": "granularity",
+              "description": "The smallest unit of time the picker allows the user to set.",
+              "value": { "type": "TimeGranularity", "default": "'minute'" }
             },
             {
-              "name": "rows",
-              "description": "The number of rows to display by default.",
-              "value": { "type": "number", "default": "4" }
+              "name": "hour-format",
+              "description": "The hour format to use. When `auto`, the format is determined by the page's locale. When `12`, hours are shown from\n1-12 alongside an AM/PM column. When `24`, hours are shown from 00-23.",
+              "value": { "type": "HourFormat", "default": "'auto'" }
             },
             {
-              "name": "resize",
-              "description": "Controls how the textarea can be resized.",
+              "name": "size",
+              "description": "The time picker's size.",
               "value": {
-                "type": "'none' | 'vertical' | 'auto'",
-                "default": "'vertical'"
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
               }
             },
             {
-              "name": "disabled",
-              "description": "Disables the textarea.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the time picker is empty.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "readonly",
-              "description": "Makes the textarea readonly.",
+              "name": "disabled",
+              "description": "Disables the time picker.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "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.",
-              "value": { "type": "string", "default": "''" }
-            },
-            {
-              "name": "required",
-              "description": "Makes the textarea a required field.",
+              "name": "clearable",
+              "description": "Adds a clear button when the time picker is not empty.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "minlength",
-              "description": "The minimum length of input that will be considered valid.",
-              "value": { "type": "number" }
+              "name": "open",
+              "description": "Indicates whether or not the time picker is open. You can toggle this attribute to show and hide the listbox, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the time picker's open state.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "maxlength",
-              "description": "The maximum length of input that will be considered valid.",
-              "value": { "type": "number" }
+              "name": "hoist",
+              "description": "Enable this option to prevent the listbox 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": "autocapitalize",
-              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
-              "value": {
-                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
-              }
+              "name": "filled",
+              "description": "Draws a filled time picker.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "autocorrect",
-              "description": "Indicates whether the browser's autocorrect feature is on or off.\n\nTyped as `any` because TS's DOM lib mistypes `HTMLElement.autocorrect` as `boolean`, but the HTML attribute\nactually accepts 'on'/'off' strings, which would otherwise create an unfixable override conflict.",
-              "value": { "type": "any" }
+              "name": "pill",
+              "description": "Draws a pill-style time picker with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "autocomplete",
-              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
-              "value": { "type": "string" }
+              "name": "label",
+              "description": "The time picker's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "autofocus",
-              "description": "Indicates that the input should receive focus on page load.",
-              "value": { "type": "boolean" }
+              "name": "placement",
+              "description": "The preferred placement of the time picker's listbox. Note that the actual placement may vary as needed to keep the\nlistbox inside of the viewport.",
+              "value": { "type": "'top' | 'bottom'", "default": "'bottom'" }
             },
             {
-              "name": "enterkeyhint",
-              "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
-              "value": {
-                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
-              }
+              "name": "help-text",
+              "description": "The time picker's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "spellcheck",
-              "description": "Enables spell checking on the textarea.",
-              "value": { "type": "boolean", "default": "true" }
+              "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.",
+              "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "inputmode",
-              "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
-              "value": {
-                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
-              }
+              "name": "required",
+              "description": "The time picker's required attribute.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             {
               "name": "label",
-              "description": "The textarea's label. Alternatively, you can use the `label` attribute."
+              "description": "The input's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "prefix",
+              "description": "Used to prepend a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "suffix",
+              "description": "Used to append a presentational icon or similar element to the combobox."
+            },
+            {
+              "name": "clear-icon",
+              "description": "An icon to use in lieu of the default clear icon."
+            },
+            {
+              "name": "expand-icon",
+              "description": "The icon to show when the control is expanded and collapsed."
             },
             {
               "name": "help-text",
@@ -5578,20 +6648,40 @@
           ],
           "events": [
             {
-              "name": "cw-blur",
-              "description": "Emitted when the control loses focus."
+              "name": "cw-change",
+              "description": "Emitted when the control's value changes."
             },
             {
-              "name": "cw-change",
-              "description": "Emitted when an alteration to the control's value is committed by the user."
+              "name": "cw-clear",
+              "description": "Emitted when the control's value is cleared."
+            },
+            {
+              "name": "cw-input",
+              "description": "Emitted when the control receives input."
             },
             {
               "name": "cw-focus",
               "description": "Emitted when the control gains focus."
             },
             {
-              "name": "cw-input",
-              "description": "Emitted when the control receives input."
+              "name": "cw-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "cw-show",
+              "description": "Emitted when the time picker's listbox opens."
+            },
+            {
+              "name": "cw-after-show",
+              "description": "Emitted after the time picker's listbox opens and all animations are complete."
+            },
+            {
+              "name": "cw-hide",
+              "description": "Emitted when the time picker's listbox closes."
+            },
+            {
+              "name": "cw-after-hide",
+              "description": "Emitted after the time picker's listbox closes and all animations are complete."
             },
             {
               "name": "cw-invalid",
@@ -5600,124 +6690,101 @@
           ],
           "js": {
             "properties": [
-              { "name": "input", "type": "HTMLTextAreaElement" },
-              { "name": "sizeAdjuster", "type": "HTMLTextAreaElement" },
-              { "name": "title", "type": "string" },
+              { "name": "popup", "type": "CwPopup" },
+              { "name": "combobox", "type": "HTMLElement" },
+              { "name": "displayInput", "type": "HTMLInputElement" },
+              { "name": "valueInput", "type": "HTMLInputElement" },
+              { "name": "listbox", "type": "HTMLElement" },
+              { "name": "columnElements", "type": "NodeListOf<HTMLElement>" },
               {
                 "name": "name",
-                "description": "The name of the textarea, submitted as a name/value pair with form data.",
+                "description": "The name of the time picker, submitted as a name/value pair with form data.",
                 "type": "string"
               },
               {
                 "name": "value",
-                "description": "The current value of the textarea, submitted as a name/value pair with form data.",
-                "type": "string"
+                "description": "The current value of the time picker, submitted as a name/value pair with form data. The value is a 24-hour,\nzero-padded string whose precision matches `granularity` (e.g. `\"14\"`, `\"14:08\"`, or `\"14:08:32\"`)."
               },
               {
-                "name": "size",
-                "description": "The textarea's size.",
-                "type": "'small' | 'medium' | 'large'"
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
               },
               {
-                "name": "filled",
-                "description": "Draws a filled textarea.",
-                "type": "boolean"
+                "name": "granularity",
+                "description": "The smallest unit of time the picker allows the user to set.",
+                "type": "TimeGranularity"
               },
               {
-                "name": "label",
-                "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
-                "type": "string"
+                "name": "hourFormat",
+                "description": "The hour format to use. When `auto`, the format is determined by the page's locale. When `12`, hours are shown from\n1-12 alongside an AM/PM column. When `24`, hours are shown from 00-23.",
+                "type": "HourFormat"
               },
               {
-                "name": "helpText",
-                "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
-                "type": "string"
+                "name": "size",
+                "description": "The time picker's size.",
+                "type": "'small' | 'medium' | 'large'"
               },
               {
                 "name": "placeholder",
-                "description": "Placeholder text to show as a hint when the input is empty.",
+                "description": "Placeholder text to show as a hint when the time picker is empty.",
                 "type": "string"
               },
-              {
-                "name": "rows",
-                "description": "The number of rows to display by default.",
-                "type": "number"
-              },
-              {
-                "name": "resize",
-                "description": "Controls how the textarea can be resized.",
-                "type": "'none' | 'vertical' | 'auto'"
-              },
               {
                 "name": "disabled",
-                "description": "Disables the textarea.",
+                "description": "Disables the time picker.",
                 "type": "boolean"
               },
               {
-                "name": "readonly",
-                "description": "Makes the textarea readonly.",
+                "name": "clearable",
+                "description": "Adds a clear button when the time picker is not empty.",
                 "type": "boolean"
               },
               {
-                "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.",
-                "type": "string"
+                "name": "open",
+                "description": "Indicates whether or not the time picker is open. You can toggle this attribute to show and hide the listbox, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the time picker's open state.",
+                "type": "boolean"
               },
               {
-                "name": "required",
-                "description": "Makes the textarea a required field.",
+                "name": "hoist",
+                "description": "Enable this option to prevent the listbox 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": "minlength",
-                "description": "The minimum length of input that will be considered valid.",
-                "type": "number"
+                "name": "filled",
+                "description": "Draws a filled time picker.",
+                "type": "boolean"
               },
               {
-                "name": "maxlength",
-                "description": "The maximum length of input that will be considered valid.",
-                "type": "number"
+                "name": "pill",
+                "description": "Draws a pill-style time picker with rounded edges.",
+                "type": "boolean"
               },
               {
-                "name": "autocapitalize",
-                "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
-                "type": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+                "name": "label",
+                "description": "The time picker's label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
               },
               {
-                "name": "autocorrect",
-                "description": "Indicates whether the browser's autocorrect feature is on or off.\n\nTyped as `any` because TS's DOM lib mistypes `HTMLElement.autocorrect` as `boolean`, but the HTML attribute\nactually accepts 'on'/'off' strings, which would otherwise create an unfixable override conflict.",
-                "type": "any"
+                "name": "placement",
+                "description": "The preferred placement of the time picker's listbox. Note that the actual placement may vary as needed to keep the\nlistbox inside of the viewport.",
+                "type": "'top' | 'bottom'"
               },
               {
-                "name": "autocomplete",
-                "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
+                "name": "helpText",
+                "description": "The time picker's help text. If you need to display HTML, use the `help-text` slot instead.",
                 "type": "string"
               },
               {
-                "name": "autofocus",
-                "description": "Indicates that the input should receive focus on page load.",
-                "type": "boolean"
-              },
-              {
-                "name": "enterkeyhint",
-                "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
-                "type": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+                "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.",
+                "type": "string"
               },
               {
-                "name": "spellcheck",
-                "description": "Enables spell checking on the textarea.",
+                "name": "required",
+                "description": "The time picker's required attribute.",
                 "type": "boolean"
               },
-              {
-                "name": "inputmode",
-                "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
-                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'"
-              },
-              {
-                "name": "defaultValue",
-                "description": "The default value of the form control. Primarily used for resetting the form control.",
-                "type": "string"
-              },
               {
                 "name": "validity",
                 "description": "Gets the validity state object"
@@ -5729,20 +6796,40 @@
             ],
             "events": [
               {
-                "name": "cw-blur",
-                "description": "Emitted when the control loses focus."
+                "name": "cw-change",
+                "description": "Emitted when the control's value changes."
               },
               {
-                "name": "cw-change",
-                "description": "Emitted when an alteration to the control's value is committed by the user."
+                "name": "cw-clear",
+                "description": "Emitted when the control's value is cleared."
+              },
+              {
+                "name": "cw-input",
+                "description": "Emitted when the control receives input."
               },
               {
                 "name": "cw-focus",
                 "description": "Emitted when the control gains focus."
               },
               {
-                "name": "cw-input",
-                "description": "Emitted when the control receives input."
+                "name": "cw-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "cw-show",
+                "description": "Emitted when the time picker's listbox opens."
+              },
+              {
+                "name": "cw-after-show",
+                "description": "Emitted after the time picker's listbox opens and all animations are complete."
+              },
+              {
+                "name": "cw-hide",
+                "description": "Emitted when the time picker's listbox closes."
+              },
+              {
+                "name": "cw-after-hide",
+                "description": "Emitted after the time picker's listbox closes and all animations are complete."
               },
               {
                 "name": "cw-invalid",