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

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

@@ -840,6 +840,112 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the date picker, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The default value of the form control. Primarily used for resetting the form control.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The earliest date a user may select, as a `YYYY-MM-DD` string.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The latest date a user may select, as a `YYYY-MM-DD` string.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The date picker's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text to show as a hint when the date picker is empty.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the date picker.",
+          "values": []
+        },
+        {
+          "name": "clearable",
+          "description": "Adds a clear button when the date picker is not empty.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "filled",
+          "description": "Draws a filled date picker.",
+          "values": []
+        },
+        {
+          "name": "pill",
+          "description": "Draws a pill-style date picker with rounded edges.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The date picker's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": [{ "name": "top" }, { "name": "bottom" }]
+        },
+        {
+          "name": "help-text",
+          "description": "The date picker's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "The date picker's required attribute.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cw-elements-b0c7e5.gitlab.io/components/date-picker"
+        }
+      ]
+    },
     {
       "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.",
@@ -1674,6 +1780,57 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "total-items",
+          "description": "The total number of items being paginated.",
+          "values": []
+        },
+        {
+          "name": "page-size",
+          "description": "The number of items shown per page. Used with `total-items` to determine the total number of pages.",
+          "values": []
+        },
+        {
+          "name": "page",
+          "description": "The current page, 1-based.",
+          "values": []
+        },
+        {
+          "name": "sibling-count",
+          "description": "The number of page buttons to show on either side of the current page.",
+          "values": []
+        },
+        {
+          "name": "boundary-count",
+          "description": "The number of page buttons to always show at the start and end of the page list.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The pagination's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the pagination control.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cw-elements-b0c7e5.gitlab.io/components/pagination"
+        }
+      ]
+    },
     {
       "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.",
@@ -2739,6 +2896,107 @@
         }
       ]
     },
+    {
+      "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.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the time picker, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The default value of the form control. Primarily used for resetting the form control.",
+          "values": []
+        },
+        {
+          "name": "granularity",
+          "description": "The smallest unit of time the picker allows the user to set.",
+          "values": [{ "name": "TimeGranularity" }]
+        },
+        {
+          "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.",
+          "values": [{ "name": "HourFormat" }]
+        },
+        {
+          "name": "size",
+          "description": "The time picker's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "placeholder",
+          "description": "Placeholder text to show as a hint when the time picker is empty.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the time picker.",
+          "values": []
+        },
+        {
+          "name": "clearable",
+          "description": "Adds a clear button when the time picker is not empty.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "filled",
+          "description": "Draws a filled time picker.",
+          "values": []
+        },
+        {
+          "name": "pill",
+          "description": "Draws a pill-style time picker with rounded edges.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The time picker's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": [{ "name": "top" }, { "name": "bottom" }]
+        },
+        {
+          "name": "help-text",
+          "description": "The time picker's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
+        {
+          "name": "form",
+          "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "The time picker's required attribute.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://cw-elements-b0c7e5.gitlab.io/components/time-picker"
+        }
+      ]
+    },
     {
       "name": "cw-tooltip",
       "description": "Tooltips display additional information based on a specific action.\n---\n\n\n### **Events:**\n - **cw-show** - Emitted when the tooltip begins to show.\n- **cw-after-show** - Emitted after the tooltip has shown and all animations are complete.\n- **cw-hide** - Emitted when the tooltip begins to hide.\n- **cw-after-hide** - Emitted after the tooltip has hidden and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the tooltip.\n- **hide()** - Hides the tooltip\n\n### **Slots:**\n - _default_ - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n- **content** - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the tooltip before its content will wrap. _(default: undefined)_\n- **--hide-delay** - The amount of time to wait before hiding the tooltip when hovering. _(default: undefined)_\n- **--show-delay** - The amount of time to wait before showing the tooltip when hovering. _(default: undefined)_\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- **base__arrow** - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n- **body** - The tooltip's body where its content is rendered.",