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

package/dist/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.1.0-alpha.1",
+  "version": "1.1.0-alpha.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1963,125 +1963,446 @@
           }
         },
         {
-          "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-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": "name",
+              "description": "The name of the date picker, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "min",
+              "description": "The earliest date a user may select, as a `YYYY-MM-DD` string.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "max",
+              "description": "The latest date a user may select, as a `YYYY-MM-DD` string.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "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": "size",
+              "description": "The date picker's size.",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
+            {
+              "name": "placeholder",
+              "description": "Placeholder text to show as a hint when the date picker is empty.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the date picker.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "clearable",
+              "description": "Adds a clear button when the date picker is not empty.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "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.",
+              "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": "summary",
-              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
-              "value": { "type": "string" }
+              "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": "disabled",
-              "description": "Disables the details so it can't be toggled.",
+              "name": "filled",
+              "description": "Draws a filled date picker.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "pill",
+              "description": "Draws a pill-style date picker with rounded edges.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "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 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": "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": "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 details' main content." },
             {
-              "name": "summary",
-              "description": "The details' summary. Alternatively, you can use the `summary` attribute."
+              "name": "label",
+              "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": "Optional expand icon to use instead of the default. Works best with `<cw-icon>`."
+              "description": "The icon to show when the control is expanded and collapsed."
             },
             {
-              "name": "collapse-icon",
-              "description": "Optional collapse icon to use instead of the default. Works best with `<cw-icon>`."
+              "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 details opens."
+              "description": "Emitted when the date picker's calendar opens."
             },
             {
               "name": "cw-after-show",
-              "description": "Emitted after the details 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 details closes."
+              "description": "Emitted when the date picker's calendar closes."
             },
             {
               "name": "cw-after-hide",
-              "description": "Emitted after the details closes and all animations are complete."
+              "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."
             }
           ],
           "js": {
             "properties": [
-              { "name": "details", "type": "HTMLDetailsElement" },
-              { "name": "header", "type": "HTMLElement" },
-              { "name": "body", "type": "HTMLElement" },
-              { "name": "expandIconSlot", "type": "HTMLSlotElement" },
-              { "name": "detailsObserver", "type": "MutationObserver" },
+              { "name": "popup", "type": "CwPopup" },
+              { "name": "combobox", "type": "HTMLElement" },
+              { "name": "displayInput", "type": "HTMLInputElement" },
+              { "name": "valueInput", "type": "HTMLInputElement" },
+              { "name": "calendar", "type": "HTMLElement" },
+              {
+                "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": "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.",
+                "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": "summary",
-                "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+                "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 date picker's label. If you need to display HTML, use the `label` slot instead.",
                 "type": "string"
               },
               {
-                "name": "disabled",
-                "description": "Disables the details so it can't be toggled.",
+                "name": "placement",
+                "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": "helpText",
+                "description": "The date picker's help text. If you need to display HTML, use the `help-text` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "form",
+                "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+                "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-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 details opens."
+                "description": "Emitted when the date picker's calendar opens."
               },
               {
                 "name": "cw-after-show",
-                "description": "Emitted after the details 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 details closes."
+                "description": "Emitted when the date picker's calendar closes."
               },
               {
                 "name": "cw-after-hide",
-                "description": "Emitted after the details closes and all animations are complete."
+                "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-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-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 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.",
+              "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": "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": "summary",
+              "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
+              "value": { "type": "string" }
             },
             {
-              "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.",
+              "name": "disabled",
+              "description": "Disables the details so it can't be toggled.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The dialog's main content." },
+            { "name": "", "description": "The details' main content." },
+            {
+              "name": "summary",
+              "description": "The details' summary. Alternatively, you can use the `summary` attribute."
+            },
+            {
+              "name": "expand-icon",
+              "description": "Optional expand icon to use instead of the default. Works best with `<cw-icon>`."
+            },
+            {
+              "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 details opens."
+            },
+            {
+              "name": "cw-after-show",
+              "description": "Emitted after the details opens and all animations are complete."
+            },
+            {
+              "name": "cw-hide",
+              "description": "Emitted when the details closes."
+            },
+            {
+              "name": "cw-after-hide",
+              "description": "Emitted after the details closes and all animations are complete."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "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 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": "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 details so it can't be toggled.",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "cw-show",
+                "description": "Emitted when the details opens."
+              },
+              {
+                "name": "cw-after-show",
+                "description": "Emitted after the details opens and all animations are complete."
+              },
+              {
+                "name": "cw-hide",
+                "description": "Emitted when the details closes."
+              },
+              {
+                "name": "cw-after-hide",
+                "description": "Emitted after the details closes and all animations are complete."
+              }
+            ]
+          }
+        },
+        {
+          "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": "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": "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": "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": "label",
               "description": "The dialog's label. Alternatively, you can use the `label` attribute."
@@ -3778,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.",
@@ -5831,99 +6252,394 @@
               "value": { "type": "string", "default": "''" }
             },
             {
-              "name": "placeholder",
-              "description": "Placeholder text to show as a hint when the input is empty.",
-              "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": "'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.",
+              "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": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+              }
+            },
+            {
+              "name": "spellcheck",
+              "description": "Enables spell checking on the textarea.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "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."
+            }
+          ],
+          "events": [
+            {
+              "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": "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 textarea's size.",
+                "type": "'small' | 'medium' | 'large'"
+              },
+              {
+                "name": "filled",
+                "description": "Draws a filled textarea.",
+                "type": "boolean"
+              },
+              {
+                "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-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-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": "name",
+              "description": "The name of the time picker, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "value",
+              "description": "The default value of the form control. Primarily used for resetting the form control.",
+              "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",
@@ -5932,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",
@@ -5954,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"
@@ -6083,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",