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

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

@@ -16,6 +16,7 @@ import type { CwCheckbox } from "../../components/checkbox/checkbox.component.js
 import type { CwColorPicker } from "../../components/color-picker/color-picker.component.js";
 import type { CwCombobox } from "../../components/combobox/combobox.component.js";
 import type { CwCopyButton } from "../../components/copy-button/copy-button.component.js";
+import type { CwDatePicker } from "../../components/date-picker/date-picker.component.js";
 import type { CwDetails } from "../../components/details/details.component.js";
 import type { CwDialog } from "../../components/dialog/dialog.component.js";
 import type { CwDivider } from "../../components/divider/divider.component.js";
@@ -34,6 +35,7 @@ import type { CwMenuItem } from "../../components/menu-item/menu-item.component.
 import type { CwMenuLabel } from "../../components/menu-label/menu-label.component.js";
 import type { CwMutationObserver } from "../../components/mutation-observer/mutation-observer.component.js";
 import type { CwOption } from "../../components/option/option.component.js";
+import type { CwPagination } from "../../components/pagination/pagination.component.js";
 import type { CwPopup } from "../../components/popup/popup.component.js";
 import type { CwProgressBar } from "../../components/progress-bar/progress-bar.component.js";
 import type { CwProgressRing } from "../../components/progress-ring/progress-ring.component.js";
@@ -55,6 +57,7 @@ import type { CwTabGroup } from "../../components/tab-group/tab-group.component.
 import type { CwTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { CwTag } from "../../components/tag/tag.component.js";
 import type { CwTextarea } from "../../components/textarea/textarea.component.js";
+import type { CwTimePicker } from "../../components/time-picker/time-picker.component.js";
 import type { CwTooltip } from "../../components/tooltip/tooltip.component.js";
 import type { CwTree } from "../../components/tree/tree.component.js";
 import type { CwTreeItem } from "../../components/tree-item/tree-item.component.js";
@@ -563,6 +566,87 @@ scenarios. */
   "oncw-error"?: (e: CustomEvent<never>) => void;
 };
 
+type CwDatePickerProps = {
+  /** The name of the date picker, submitted as a name/value pair with form data. */
+  name?: CwDatePicker["name"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  value?: CwDatePicker["defaultValue"];
+  /** The earliest date a user may select, as a `YYYY-MM-DD` string. */
+  min?: CwDatePicker["min"];
+  /** The latest date a user may select, as a `YYYY-MM-DD` string. */
+  max?: CwDatePicker["max"];
+  /** The first day of the week, where `0` is Sunday and `6` is Saturday. When not set, the first day of the week is
+determined by the page's locale, falling back to Sunday. */
+  "first-day-of-week"?: CwDatePicker["firstDayOfWeek"];
+  /** The date picker's size. */
+  size?: CwDatePicker["size"];
+  /** Placeholder text to show as a hint when the date picker is empty. */
+  placeholder?: CwDatePicker["placeholder"];
+  /** Disables the date picker. */
+  disabled?: CwDatePicker["disabled"];
+  /** Adds a clear button when the date picker is not empty. */
+  clearable?: CwDatePicker["clearable"];
+  /** Indicates whether or not the date picker is open. You can toggle this attribute to show and hide the calendar, or
+you can use the `show()` and `hide()` methods and this attribute will reflect the date picker's open state. */
+  open?: CwDatePicker["open"];
+  /** Enable this option to prevent the calendar from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: CwDatePicker["hoist"];
+  /** Draws a filled date picker. */
+  filled?: CwDatePicker["filled"];
+  /** Draws a pill-style date picker with rounded edges. */
+  pill?: CwDatePicker["pill"];
+  /** The date picker's label. If you need to display HTML, use the `label` slot instead. */
+  label?: CwDatePicker["label"];
+  /** The preferred placement of the date picker's calendar. Note that the actual placement may vary as needed to keep the
+calendar inside of the viewport. */
+  placement?: CwDatePicker["placement"];
+  /** The date picker's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: CwDatePicker["helpText"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: CwDatePicker["form"];
+  /** The date picker's required attribute. */
+  required?: CwDatePicker["required"];
+  /**  */
+  popup?: CwDatePicker["popup"];
+  /**  */
+  combobox?: CwDatePicker["combobox"];
+  /**  */
+  displayInput?: CwDatePicker["displayInput"];
+  /**  */
+  valueInput?: CwDatePicker["valueInput"];
+  /**  */
+  calendar?: CwDatePicker["calendar"];
+  /** 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. */
+  value?: CwDatePicker["value"];
+  /** Gets the validity state object */
+  validity?: CwDatePicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: CwDatePicker["validationMessage"];
+  /** Emitted when the control's value changes. */
+  "oncw-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control's value is cleared. */
+  "oncw-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "oncw-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "oncw-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control loses focus. */
+  "oncw-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the date picker's calendar opens. */
+  "oncw-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the date picker's calendar opens and all animations are complete. */
+  "oncw-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the date picker's calendar closes. */
+  "oncw-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the date picker's calendar closes and all animations are complete. */
+  "oncw-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "oncw-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type CwDetailsProps = {
   /** Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the details' open state. */
@@ -998,6 +1082,27 @@ multiple values. */
   hasHover?: CwOption["hasHover"];
 };
 
+type CwPaginationProps = {
+  /** The total number of items being paginated. */
+  "total-items"?: CwPagination["totalItems"];
+  /** The number of items shown per page. Used with `total-items` to determine the total number of pages. */
+  "page-size"?: CwPagination["pageSize"];
+  /** The current page, 1-based. */
+  page?: CwPagination["page"];
+  /** The number of page buttons to show on either side of the current page. */
+  "sibling-count"?: CwPagination["siblingCount"];
+  /** The number of page buttons to always show at the start and end of the page list. */
+  "boundary-count"?: CwPagination["boundaryCount"];
+  /** The pagination's size. */
+  size?: CwPagination["size"];
+  /** Disables the pagination control. */
+  disabled?: CwPagination["disabled"];
+  /** The total number of pages, derived from `total-items` and `page-size`. */
+  totalPages?: CwPagination["totalPages"];
+  /** Emitted when the current page changes as a result of user interaction. */
+  "oncw-change"?: (e: CustomEvent<never>) => void;
+};
+
 type CwPopupProps = {
   /** The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
 element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
@@ -1582,6 +1687,88 @@ keyboard on supportive devices. */
   "oncw-invalid"?: (e: CustomEvent<never>) => void;
 };
 
+type CwTimePickerProps = {
+  /** The name of the time picker, submitted as a name/value pair with form data. */
+  name?: CwTimePicker["name"];
+  /** The default value of the form control. Primarily used for resetting the form control. */
+  value?: CwTimePicker["defaultValue"];
+  /** The smallest unit of time the picker allows the user to set. */
+  granularity?: CwTimePicker["granularity"];
+  /** The hour format to use. When `auto`, the format is determined by the page's locale. When `12`, hours are shown from
+1-12 alongside an AM/PM column. When `24`, hours are shown from 00-23. */
+  "hour-format"?: CwTimePicker["hourFormat"];
+  /** The time picker's size. */
+  size?: CwTimePicker["size"];
+  /** Placeholder text to show as a hint when the time picker is empty. */
+  placeholder?: CwTimePicker["placeholder"];
+  /** Disables the time picker. */
+  disabled?: CwTimePicker["disabled"];
+  /** Adds a clear button when the time picker is not empty. */
+  clearable?: CwTimePicker["clearable"];
+  /** Indicates whether or not the time picker is open. You can toggle this attribute to show and hide the listbox, or you
+can use the `show()` and `hide()` methods and this attribute will reflect the time picker's open state. */
+  open?: CwTimePicker["open"];
+  /** Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. */
+  hoist?: CwTimePicker["hoist"];
+  /** Draws a filled time picker. */
+  filled?: CwTimePicker["filled"];
+  /** Draws a pill-style time picker with rounded edges. */
+  pill?: CwTimePicker["pill"];
+  /** The time picker's label. If you need to display HTML, use the `label` slot instead. */
+  label?: CwTimePicker["label"];
+  /** The preferred placement of the time picker's listbox. Note that the actual placement may vary as needed to keep the
+listbox inside of the viewport. */
+  placement?: CwTimePicker["placement"];
+  /** The time picker's help text. If you need to display HTML, use the `help-text` slot instead. */
+  "help-text"?: CwTimePicker["helpText"];
+  /** By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+the same document or shadow root for this to work. */
+  form?: CwTimePicker["form"];
+  /** The time picker's required attribute. */
+  required?: CwTimePicker["required"];
+  /**  */
+  popup?: CwTimePicker["popup"];
+  /**  */
+  combobox?: CwTimePicker["combobox"];
+  /**  */
+  displayInput?: CwTimePicker["displayInput"];
+  /**  */
+  valueInput?: CwTimePicker["valueInput"];
+  /**  */
+  listbox?: CwTimePicker["listbox"];
+  /**  */
+  columnElements?: CwTimePicker["columnElements"];
+  /** The current value of the time picker, submitted as a name/value pair with form data. The value is a 24-hour,
+zero-padded string whose precision matches `granularity` (e.g. `"14"`, `"14:08"`, or `"14:08:32"`). */
+  value?: CwTimePicker["value"];
+  /** Gets the validity state object */
+  validity?: CwTimePicker["validity"];
+  /** Gets the validation message */
+  validationMessage?: CwTimePicker["validationMessage"];
+  /** Emitted when the control's value changes. */
+  "oncw-change"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control's value is cleared. */
+  "oncw-clear"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control receives input. */
+  "oncw-input"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control gains focus. */
+  "oncw-focus"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the control loses focus. */
+  "oncw-blur"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the time picker's listbox opens. */
+  "oncw-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the time picker's listbox opens and all animations are complete. */
+  "oncw-after-show"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the time picker's listbox closes. */
+  "oncw-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted after the time picker's listbox closes and all animations are complete. */
+  "oncw-after-hide"?: (e: CustomEvent<never>) => void;
+  /** Emitted when the form control has been checked for validity and its constraints aren't satisfied. */
+  "oncw-invalid"?: (e: CustomEvent<never>) => void;
+};
+
 type CwTooltipProps = {
   /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
   content?: CwTooltip["content"];
@@ -2131,6 +2318,62 @@ export type CustomElements = {
    */
   "cw-copy-button": DefineComponent<CwCopyButtonProps>;
 
+  /**
+   * Date pickers let users select a date from a calendar.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-change** - Emitted when the control's value changes.
+   * - **cw-clear** - Emitted when the control's value is cleared.
+   * - **cw-input** - Emitted when the control receives input.
+   * - **cw-focus** - Emitted when the control gains focus.
+   * - **cw-blur** - Emitted when the control loses focus.
+   * - **cw-show** - Emitted when the date picker's calendar opens.
+   * - **cw-after-show** - Emitted after the date picker's calendar opens and all animations are complete.
+   * - **cw-hide** - Emitted when the date picker's calendar closes.
+   * - **cw-after-hide** - Emitted after the date picker's calendar closes and all animations are complete.
+   * - **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the calendar.
+   * - **hide()** - Hides the calendar.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The date picker's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container the wraps the prefix, suffix, display input, clear icon, and expand icon.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected date, an `<input>` element.
+   * - **calendar** - The calendar container where the header and date grid are rendered.
+   * - **header** - The calendar's header containing the previous/next buttons and heading.
+   * - **heading** - The heading that displays the focused month and year.
+   * - **previous-button** - The button that navigates to the previous month.
+   * - **next-button** - The button that navigates to the next month.
+   * - **grid** - The grid that contains the weekday headers and days.
+   * - **day** - An individual day within the grid.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
+   */
+  "cw-date-picker": DefineComponent<CwDatePickerProps>;
+
   /**
    * Details show a brief summary and expand to show additional content.
    * ---
@@ -2520,6 +2763,25 @@ export type CustomElements = {
    */
   "cw-option": DefineComponent<CwOptionProps>;
 
+  /**
+   * Pagination lets users navigate between pages of content.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-change** - Emitted when the current page changes as a result of user interaction.
+   *
+   * ### **CSS Parts:**
+   *  - **base** - The component's base wrapper, a `<nav>` element.
+   * - **pages** - The container that wraps the page buttons and ellipses.
+   * - **page** - An individual page button.
+   * - **page--active** - Applied to the page button for the current page.
+   * - **ellipsis** - An ellipsis shown in place of collapsed page buttons.
+   * - **previous-button** - The button that navigates to the previous page.
+   * - **next-button** - The button that navigates to the next page.
+   */
+  "cw-pagination": DefineComponent<CwPaginationProps>;
+
   /**
    * Popup is a utility that lets you declaratively anchor "popup" containers to another element.
    * ---
@@ -3051,6 +3313,58 @@ export type CustomElements = {
    */
   "cw-textarea": DefineComponent<CwTextareaProps>;
 
+  /**
+   * Time pickers let users select a time from a set of predefined hour, minute, second, and meridiem columns.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **cw-change** - Emitted when the control's value changes.
+   * - **cw-clear** - Emitted when the control's value is cleared.
+   * - **cw-input** - Emitted when the control receives input.
+   * - **cw-focus** - Emitted when the control gains focus.
+   * - **cw-blur** - Emitted when the control loses focus.
+   * - **cw-show** - Emitted when the time picker's listbox opens.
+   * - **cw-after-show** - Emitted after the time picker's listbox opens and all animations are complete.
+   * - **cw-hide** - Emitted when the time picker's listbox closes.
+   * - **cw-after-hide** - Emitted after the time picker's listbox closes and all animations are complete.
+   * - **cw-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   *
+   * ### **Methods:**
+   *  - **show()** - Shows the listbox.
+   * - **hide()** - Hides the listbox.
+   * - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
+   * - **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.
+   * - **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.
+   * - **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.
+   * - **focus(options: _FocusOptions_)** - Sets focus on the control.
+   * - **blur()** - Removes focus from the control.
+   *
+   * ### **Slots:**
+   *  - **label** - The input's label. Alternatively, you can use the `label` attribute.
+   * - **prefix** - Used to prepend a presentational icon or similar element to the combobox.
+   * - **suffix** - Used to append a presentational icon or similar element to the combobox.
+   * - **clear-icon** - An icon to use in lieu of the default clear icon.
+   * - **expand-icon** - The icon to show when the control is expanded and collapsed.
+   * - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+   *
+   * ### **CSS Parts:**
+   *  - **form-control** - The form control that wraps the label, input, and help text.
+   * - **form-control-label** - The label's wrapper.
+   * - **form-control-input** - The time picker's wrapper.
+   * - **form-control-help-text** - The help text's wrapper.
+   * - **combobox** - The container the wraps the prefix, suffix, display input, clear icon, and expand icon.
+   * - **prefix** - The container that wraps the prefix slot.
+   * - **suffix** - The container that wraps the suffix slot.
+   * - **display-input** - The element that displays the selected time, an `<input>` element.
+   * - **listbox** - The listbox container where the hour/minute/second/meridiem columns are rendered.
+   * - **column** - One of the listbox's columns.
+   * - **option** - An individual option within a column.
+   * - **clear-button** - The clear button.
+   * - **expand-icon** - The container that wraps the expand icon.
+   */
+  "cw-time-picker": DefineComponent<CwTimePickerProps>;
+
   /**
    * Tooltips display additional information based on a specific action.
    * ---

package/cdn/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.C4QY7KGQ.js";
-import "../chunks/chunk.CJFFVBAI.js";
+} from "../chunks/chunk.OOAK7TAG.js";
 import "../chunks/chunk.3TFKS637.js";
+import "../chunks/chunk.CJFFVBAI.js";
 import "../chunks/chunk.4EHT37C5.js";
 import "../chunks/chunk.QIOX6AG5.js";
 export {

package/cdn/utilities/localize.d.ts

@@ -16,10 +16,20 @@ export interface Translation extends DefaultTranslation {
     error: string;
     goToSlide: (slide: number, count: number) => string;
     hidePassword: string;
+    goToPage?: (page: number) => string;
+    hour?: string;
     loading: string;
+    meridiem?: string;
+    minute?: string;
+    nextMonth?: string;
+    nextPage?: string;
     nextSlide: string;
     numOptionsSelected: (num: number) => string;
+    pagination?: string;
+    previousMonth?: string;
+    previousPage?: string;
     previousSlide: string;
+    second?: string;
     progress: string;
     remove: string;
     resize: string;

package/cdn/utilities/localize.js

@@ -1,7 +1,7 @@
 import {
   LocalizeController
-} from "../chunks/chunk.Z46D7BRX.js";
-import "../chunks/chunk.XAG7GB5I.js";
+} from "../chunks/chunk.3ITR3YMH.js";
+import "../chunks/chunk.SYCSG742.js";
 import {
   registerTranslation
 } from "../chunks/chunk.FFUIYPKD.js";