q2-tecton-elements 1.72.0 → 1.73.0

package/dist/types/components.d.ts

@@ -7,6 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { ActionSheetData, ActionSheetListCloseData } from "q2-tecton-common/lib/types/action-sheet";
 import { ChartData, DonutChartData, EventDetail, FilesObject, FormatterValueObject, Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow, StepperPaneEvent, ValidFileStatus } from "q2-tecton-common/lib/types/elements";
+import { DatePickerChangeDetail, DatePickerCloseDetail, DatePickerDisplayFormat, DatePickerErrorDetail, DatePickerMode, DatePickerMomentLike, DatePickerSuccessDetail, DatePickerValue } from "./utils/date-picker/date-picker-types";
 import { Q2Input } from "./components/q2-input/q2-input";
 import { TQ2GridAlignOptions, TQ2GridColumnsOptions, TQ2GridGapOptions, TQ2GridJustifyOptions, TQ2GridRowsOptions } from "./components/q2-grid/q2-grid";
 import { TQ2GridAreaAlignOptions, TQ2GridAreaColumnSpanOptions, TQ2GridAreaColumnStartOptions, TQ2GridAreaJustifyOptions, TQ2GridAreaRowSpanOptions, TQ2GridAreaRowStartOptions, TQ2GridAreaZIndexOptions } from "./components/q2-grid-area/q2-grid-area";
@@ -18,6 +19,7 @@ import { OptionValue, ValidOptionElements } from "./components/q2-option-list/q2
 import { OptionValue as OptionValue1 } from "./components/q2-option-list/q2-option-list";
 export { ActionSheetData, ActionSheetListCloseData } from "q2-tecton-common/lib/types/action-sheet";
 export { ChartData, DonutChartData, EventDetail, FilesObject, FormatterValueObject, Q2DataTableHeader, Q2DataTableRow, Q2DataTableSerializedRow, StepperPaneEvent, ValidFileStatus } from "q2-tecton-common/lib/types/elements";
+export { DatePickerChangeDetail, DatePickerCloseDetail, DatePickerDisplayFormat, DatePickerErrorDetail, DatePickerMode, DatePickerMomentLike, DatePickerSuccessDetail, DatePickerValue } from "./utils/date-picker/date-picker-types";
 export { Q2Input } from "./components/q2-input/q2-input";
 export { TQ2GridAlignOptions, TQ2GridColumnsOptions, TQ2GridGapOptions, TQ2GridJustifyOptions, TQ2GridRowsOptions } from "./components/q2-grid/q2-grid";
 export { TQ2GridAreaAlignOptions, TQ2GridAreaColumnSpanOptions, TQ2GridAreaColumnStartOptions, TQ2GridAreaJustifyOptions, TQ2GridAreaRowSpanOptions, TQ2GridAreaRowStartOptions, TQ2GridAreaZIndexOptions } from "./components/q2-grid-area/q2-grid-area";
@@ -188,20 +190,26 @@ export namespace Components {
         "form": string;
         /**
           * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance. Use for icon-only buttons.
          */
         "hideLabel": boolean;
         /**
-          * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.
+          * Indicates the intended action type, which applies the appropriate styling. Use unprefixed values by default. The legacy `workflow-` prefix remains supported for backward compatibility.
          */
         "intent": | 'coin'
+        | 'destroy'
+        | 'escape'
         | 'neutral-text'
         | 'neutral'
+        | 'primary'
+        | 'secondary'
         | 'workflow-destroy'
         | 'workflow-escape'
         | 'workflow-primary'
         | 'workflow-secondary';
         /**
           * Defines the text content of the button if it is not provided in the `<slot>` of the element. Also used for the `aria-label` of the `<button>` element when only displaying an icon.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -291,6 +299,7 @@ export namespace Components {
         "errors": string[];
         /**
           * Hide the input field's ` <label> ` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
@@ -310,6 +319,7 @@ export namespace Components {
         "invalidDates": string[];
         /**
           * The visible label for the `q2-calendar` input field.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
          */
         "label": string;
         /**
@@ -1049,8 +1059,8 @@ export namespace Components {
          */
         "hasError": boolean;
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
@@ -1059,6 +1069,7 @@ export namespace Components {
         "indeterminate": boolean;
         /**
           * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes. Yielded content will be adjacent to this text.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -1098,12 +1109,13 @@ export namespace Components {
          */
         "hasError": boolean;
         /**
-          * Hide's the group's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the group's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
           * The label that displays above all the checkboxes.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -1300,6 +1312,311 @@ export namespace Components {
          */
         "toggleSelectAllRows": () => Promise<void>;
     }
+    /**
+     * @name Date Calendar
+     * @category Forms
+     * @summary Use for selecting dates from a standalone calendar.
+     */
+    interface Q2DateCalendar {
+        /**
+          * Accessible calendar dialog label.
+         */
+        "accessibleLabel": string;
+        /**
+          * Uses the action-sheet calendar presentation.
+          * @default false
+         */
+        "actionSheet": boolean;
+        /**
+          * Accessible and visible calendar label.
+         */
+        "calendarLabel": string;
+        /**
+          * Specifies a time of day after which a date is no longer valid.
+         */
+        "cutoffTime": string;
+        /**
+          * Defines valid days of the week using calendar checksum values.
+         */
+        "daysOfWeekChecksum": number;
+        /**
+          * Controls whether navigation appears above or below the date grid.
+          * @default 'down'
+         */
+        "direction": 'up' | 'down';
+        /**
+          * Disables calendar interaction.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Localized disclaimer content.
+         */
+        "disclaimer": string;
+        /**
+          * Controls the date format used in range summaries.
+         */
+        "displayFormat"?: DatePickerDisplayFormat;
+        /**
+          * Defines the last selectable date.
+         */
+        "endDate": string;
+        /**
+          * Moves the visible month to the provided date and focuses that day.
+         */
+        "focusDate": (value: string | Date) => Promise<void>;
+        /**
+          * Defines an explicit date blacklist using ISO date strings.
+         */
+        "invalidDates": string[];
+        /**
+          * Formats calendar and range labels using the provided locale.
+          * @default document.documentElement.lang || 'en-US'
+         */
+        "locale": string | string[];
+        /**
+          * Selects single-date or range calendar behavior.
+          * @default 'single'
+         */
+        "mode": DatePickerMode;
+        /**
+          * Indicates that a new calendar session has opened.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * The committed range end as an ISO date string.
+         */
+        "rangeEnd": string;
+        /**
+          * The committed range start as an ISO date string.
+         */
+        "rangeStart": string;
+        /**
+          * Prevents calendar selection while retaining calendar visibility.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Selects the provided date when it satisfies the calendar constraints.
+         */
+        "setValue": (value: string | Date) => Promise<void>;
+        /**
+          * Defines the first selectable date.
+         */
+        "startDate": string;
+        /**
+          * Defines an explicit date whitelist using ISO date strings.
+         */
+        "validDates": string[];
+        /**
+          * The committed single date as an ISO date string.
+         */
+        "value": string;
+    }
+    /**
+     * @name Date Picker
+     * @category Forms
+     * @summary Use for selecting a date or date range with an input and calendar popup.
+     */
+    interface Q2DatePicker {
+        /**
+          * Renders the calendar panel inline with behavior specific to being hosted by `q2-action-sheet`.
+          * @private 
+          * @default false
+         */
+        "_actionSheet": boolean;
+        /**
+          * Determines the year for a committed month/day typeable date with no year. `future` selects the next year for dates before today, while `past` selects the prior year for dates after today. Only applies to `single-typeable` mode with a month-first or day-first display format.
+          * @default 'current'
+         */
+        "assume": 'current' | 'future' | 'past';
+        /**
+          * A label shown above the date picker navigation.
+         */
+        "calendarLabel": string;
+        /**
+          * Displays a button in the input field allowing the user to clear the selected date or range.
+          * @default false
+         */
+        "clearable": boolean;
+        /**
+          * Delay in milliseconds before the popover closes after selection. Explicitly undefined or non-positive values close immediately.
+          * @default 400
+         */
+        "closeDelay": number | undefined;
+        /**
+          * Closes the calendar popover if it is open.
+         */
+        "closePopover": () => Promise<void>;
+        /**
+          * Specifies a time of day after which a date is no longer valid.
+          * @warning Must be a valid ISO date string.
+         */
+        "cutoffTime": string;
+        /**
+          * Defines valid days of the week using the calendar checksum values.  Sunday begins at `1` and each following day doubles through Saturday at `64`.
+         */
+        "daysOfWeekChecksum": number;
+        /**
+          * Indicates the date picker cannot be focused or interacted with.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Text displayed as the input placeholder when the field is disabled.
+         */
+        "disabledMsg": string;
+        /**
+          * Text shown below the date grid.
+         */
+        "disclaimer": string;
+        /**
+          * Formats the displayed date using legacy Moment-style tokens. Typeable modes support the numeric formats defined by `DatePickerDisplayFormat` and fall back to `MM/DD/YYYY` for other formats.
+         */
+        "displayFormat"?: string;
+        /**
+          * Defines the last selectable date. ISO date strings are preferred; legacy date strings and timestamps are normalized to their calendar date, without shifting timestamp time zones.
+         */
+        "endDate": string;
+        /**
+          * Consumer-provided error messages displayed below the input field.
+         */
+        "errors": string[];
+        /**
+          * Moves the visible month to the provided date and focuses that day.
+         */
+        "focusDate": (date: Date) => Promise<void>;
+        /**
+          * Hides the input field's visible label while retaining its accessible name.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
+          * @default false
+         */
+        "hideLabel": boolean;
+        /**
+          * Consumer-provided hint messages displayed below the input field.
+         */
+        "hints": string[];
+        /**
+          * Instructs the component to use the action sheet workflow for displaying its calendar.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
+          * @default window.Tecton?.useActionSheets ? true : undefined
+         */
+        "hoist": boolean | undefined;
+        /**
+          * Shows the input field's error visual state.
+          * @default false
+         */
+        "invalid": boolean;
+        /**
+          * Defines an explicit date blacklist. ISO dates, legacy date strings, and timestamps are normalized to calendar dates.  Assign a new array when changing this property. Mutating the existing array does not trigger validation updates.
+         */
+        "invalidDates": string[];
+        /**
+          * The visible label for the date picker input field.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
+         */
+        "label": string;
+        /**
+          * Formats selected dates using the provided locale. Accepts multiple locales in an array as sequential fallbacks.
+          * @default document.documentElement.lang || 'en-US'
+         */
+        "locale": string | string[];
+        /**
+          * Selects calendar or typeable behavior for a single date or date range. Enabling the legacy `typeable` prop uses `single-typeable` when `mode` is left at its default; an explicit mode takes precedence.
+          * @default 'single'
+         */
+        "mode": DatePickerMode;
+        /**
+          * Controls whether the date picker popover is open or closed.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Opens the calendar popover if it is closed.
+         */
+        "openPopover": () => Promise<void>;
+        /**
+          * Appends "(optional)" to the input label and marks the field as not required.
+          * @default false
+         */
+        "optional": boolean;
+        /**
+          * Text shown in the input field when no date is selected.
+         */
+        "placeholder": string;
+        /**
+          * Forces the direction of the popover when it opens.
+          * @deprecated Use `popoverDirection` instead.
+         */
+        "popDirection": 'up' | 'down';
+        /**
+          * Aligns the calendar popover to the left or right side of the input field.
+          * @default 'left'
+         */
+        "popoverAlignment": 'left' | 'right';
+        /**
+          * Forces the direction of the popover when it opens.  If no value is passed, the popover automatically selects a direction based on available space. Use `up` to place navigation below the date grid.
+         */
+        "popoverDirection": 'up' | 'down';
+        /**
+          * @deprecated Retained for compatibility with `q2-date-picker`.
+          * @default 355
+         */
+        "popoverMinHeight": number;
+        /**
+          * Uses absolute positioning for the popover when set to `legacy`.  This compatibility option supports layouts where transformed ancestors interfere with fixed positioning.
+          * @default null
+         */
+        "popoverMode": 'legacy';
+        /**
+          * The selected range end. ISO dates, legacy date strings, and timestamps are accepted.
+         */
+        "rangeEnd": string;
+        /**
+          * The selected range start. ISO dates, legacy date strings, and timestamps are accepted.
+         */
+        "rangeStart": string;
+        /**
+          * The field's content is not editable, but the field remains focusable.  Appends "(read only)" to the field label.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Clears selected values, uncommitted typeable input, and error state without changing configuration props.
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Opens the calendar and selects the provided date when it is valid.
+         */
+        "setValue": (value: string | Date | DatePickerMomentLike) => Promise<void>;
+        /**
+          * Defines the first selectable date. ISO date strings are preferred; legacy date strings and timestamps are normalized to their calendar date, without shifting timestamp time zones.
+         */
+        "startDate": string;
+        /**
+          * Focuses the single typeable input and stages a valid date without committing it.
+          * @warning Only applicable when the effective mode is `single-typeable`.
+         */
+        "typeValue": (value: string | Date) => Promise<void>;
+        /**
+          * Enables the legacy single-date typeable input behavior.
+          * @default false
+         */
+        "typeable": boolean;
+        /**
+          * Shows the input field's success visual state when no errors are active.
+          * @default false
+         */
+        "valid": boolean;
+        /**
+          * Defines an explicit date whitelist. ISO dates, legacy date strings, and timestamps are normalized to calendar dates.  Assign a new array when changing this property. Mutating the existing array does not trigger validation updates.
+         */
+        "validDates": string[];
+        /**
+          * The selected date. ISO date strings are preferred; legacy date strings and Moment-like values are normalized to an ISO date string.
+         */
+        "value": DatePickerValue;
+    }
     /**
      * @name Detail
      * @category Display
@@ -1382,8 +1699,8 @@ export namespace Components {
          */
         "fullWidth": boolean;
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the dropdown's label text from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
@@ -1397,7 +1714,7 @@ export namespace Components {
         "icon": string;
         /**
           * The text that appears within the button.
-          * @warning This property should not be used if the `type` is `icon`.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -1555,7 +1872,8 @@ export namespace Components {
          */
         "formatModifier": string;
         /**
-          * Hide's the field's `<label>` element from view.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
@@ -1564,6 +1882,7 @@ export namespace Components {
         "hints": string[];
         /**
           * The visible descriptor for the element. Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable 
           * @default ''
          */
@@ -2174,8 +2493,8 @@ export namespace Components {
          */
         "formatModifier": string;
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
@@ -2198,6 +2517,7 @@ export namespace Components {
         "iconRight": Q2Icon['type'];
         /**
           * The label that appears above the field. This is announced by screen readers when the field is focused.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -3157,11 +3477,12 @@ export namespace Components {
         "groupTileLayout": boolean;
         /**
           * Hides the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
           * The text that describes the individual radio option.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -3201,12 +3522,13 @@ export namespace Components {
          */
         "hasError": boolean;
         /**
-          * Hide's the group's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the group's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
           * Text for the fieldset legend describing the radio group.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -3360,7 +3682,7 @@ export namespace Components {
         "filter": boolean;
         /**
           * Hides the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
           * @default false
          */
         "hideLabel": boolean;
@@ -3370,6 +3692,7 @@ export namespace Components {
         "invalid": boolean;
         /**
           * The text that will be used as the label for the field.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -3555,8 +3878,8 @@ export namespace Components {
          */
         "errors": string[];
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
@@ -3571,6 +3894,7 @@ export namespace Components {
         "invalid": boolean;
         /**
           * The text that will be used as the label for the field.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -3978,8 +4302,8 @@ export namespace Components {
          */
         "errors": string[];
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel": boolean;
         /**
@@ -3994,6 +4318,7 @@ export namespace Components {
         "hints": string[];
         /**
           * The label that appears above the field. This is announced by screen readers when the field is focused.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label": string;
@@ -4213,6 +4538,14 @@ export interface Q2DataTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2DataTableElement;
 }
+export interface Q2DateCalendarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2DateCalendarElement;
+}
+export interface Q2DatePickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2DatePickerElement;
+}
 export interface Q2DropdownItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2DropdownItemElement;
@@ -4750,6 +5083,61 @@ declare global {
         prototype: HTMLQ2DataTableElement;
         new (): HTMLQ2DataTableElement;
     };
+    interface HTMLQ2DateCalendarElementEventMap {
+        "tctCalendarCancel": void;
+        "tctCalendarCommit": DatePickerChangeDetail;
+        "tctCalendarDismiss": void;
+        "tctCalendarError": string;
+        "tctChange": DatePickerChangeDetail;
+    }
+    /**
+     * @name Date Calendar
+     * @category Forms
+     * @summary Use for selecting dates from a standalone calendar.
+     */
+    interface HTMLQ2DateCalendarElement extends Components.Q2DateCalendar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLQ2DateCalendarElementEventMap>(type: K, listener: (this: HTMLQ2DateCalendarElement, ev: Q2DateCalendarCustomEvent<HTMLQ2DateCalendarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLQ2DateCalendarElementEventMap>(type: K, listener: (this: HTMLQ2DateCalendarElement, ev: Q2DateCalendarCustomEvent<HTMLQ2DateCalendarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLQ2DateCalendarElement: {
+        prototype: HTMLQ2DateCalendarElement;
+        new (): HTMLQ2DateCalendarElement;
+    };
+    interface HTMLQ2DatePickerElementEventMap {
+        "change": DatePickerChangeDetail;
+        "error": DatePickerErrorDetail;
+        "success": DatePickerSuccessDetail;
+        "tctCancel": void;
+        "tctChange": DatePickerChangeDetail;
+        "tctClose": DatePickerCloseDetail | void;
+        "tctError": DatePickerErrorDetail;
+        "tctSuccess": DatePickerSuccessDetail;
+    }
+    /**
+     * @name Date Picker
+     * @category Forms
+     * @summary Use for selecting a date or date range with an input and calendar popup.
+     */
+    interface HTMLQ2DatePickerElement extends Components.Q2DatePicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLQ2DatePickerElementEventMap>(type: K, listener: (this: HTMLQ2DatePickerElement, ev: Q2DatePickerCustomEvent<HTMLQ2DatePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLQ2DatePickerElementEventMap>(type: K, listener: (this: HTMLQ2DatePickerElement, ev: Q2DatePickerCustomEvent<HTMLQ2DatePickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLQ2DatePickerElement: {
+        prototype: HTMLQ2DatePickerElement;
+        new (): HTMLQ2DatePickerElement;
+    };
     /**
      * @name Detail
      * @category Display
@@ -5727,6 +6115,8 @@ declare global {
         "q2-context": HTMLQ2ContextElement;
         "q2-currency": HTMLQ2CurrencyElement;
         "q2-data-table": HTMLQ2DataTableElement;
+        "q2-date-calendar": HTMLQ2DateCalendarElement;
+        "q2-date-picker": HTMLQ2DatePickerElement;
         "q2-detail": HTMLQ2DetailElement;
         "q2-dropdown": HTMLQ2DropdownElement;
         "q2-dropdown-item": HTMLQ2DropdownItemElement;
@@ -5956,20 +6346,26 @@ declare namespace LocalJSX {
         "form"?: string;
         /**
           * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance. Use for icon-only buttons.
          */
         "hideLabel"?: boolean;
         /**
-          * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.
+          * Indicates the intended action type, which applies the appropriate styling. Use unprefixed values by default. The legacy `workflow-` prefix remains supported for backward compatibility.
          */
         "intent"?: | 'coin'
+        | 'destroy'
+        | 'escape'
         | 'neutral-text'
         | 'neutral'
+        | 'primary'
+        | 'secondary'
         | 'workflow-destroy'
         | 'workflow-escape'
         | 'workflow-primary'
         | 'workflow-secondary';
         /**
           * Defines the text content of the button if it is not provided in the `<slot>` of the element. Also used for the `aria-label` of the `<button>` element when only displaying an icon.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -6058,6 +6454,7 @@ declare namespace LocalJSX {
         "errors"?: string[];
         /**
           * Hide the input field's ` <label> ` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
@@ -6077,6 +6474,7 @@ declare namespace LocalJSX {
         "invalidDates"?: string[];
         /**
           * The visible label for the `q2-calendar` input field.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
          */
         "label"?: string;
         /**
@@ -6594,7 +6992,7 @@ declare namespace LocalJSX {
          */
         "offsetDataValues"?: boolean;
         /**
-          * Emitted when a data point is clicked.
+          * Emitted when a data point is explored using the chart pointer or keyboard.
           * @deprecated Use 'tctChange' instead
          */
         "onChange"?: (event: Q2ChartAreaCustomEvent<{
@@ -6602,7 +7000,7 @@ declare namespace LocalJSX {
         data: ChartData;
     }>) => void;
         /**
-          * Emitted when a data point is clicked.
+          * Emitted when a data point is explored using the chart pointer or keyboard.
          */
         "onTctChange"?: (event: Q2ChartAreaCustomEvent<{
         index: number;
@@ -6875,8 +7273,8 @@ declare namespace LocalJSX {
          */
         "hasError"?: boolean;
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
@@ -6885,6 +7283,7 @@ declare namespace LocalJSX {
         "indeterminate"?: boolean;
         /**
           * The visible label text for the checkbox. Appears to the right of the box for 'default' and 'favorite' checkboxes, and to the left for 'toggle' checkboxes. Yielded content will be adjacent to this text.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -6935,12 +7334,13 @@ declare namespace LocalJSX {
          */
         "hasError"?: boolean;
         /**
-          * Hide's the group's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the group's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
           * The label that displays above all the checkboxes.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -7160,20 +7560,348 @@ declare namespace LocalJSX {
         "striped"?: boolean;
     }
     /**
-     * @name Detail
-     * @category Display
-     * @summary Use for displaying label-value pairs like account details or miscellaneous info.
+     * @name Date Calendar
+     * @category Forms
+     * @summary Use for selecting dates from a standalone calendar.
      */
-    interface Q2Detail {
+    interface Q2DateCalendar {
         /**
-          * Defines the alignment of the label and description when stacked, or when only the label or description is present.
-          * @default 'left'
+          * Accessible calendar dialog label.
          */
-        "align"?: 'left' | 'right' | 'center';
+        "accessibleLabel"?: string;
         /**
-          * @deprecated Use 'align' instead
+          * Uses the action-sheet calendar presentation.
+          * @default false
          */
-        "alignment"?: 'left' | 'right' | 'center';
+        "actionSheet"?: boolean;
+        /**
+          * Accessible and visible calendar label.
+         */
+        "calendarLabel"?: string;
+        /**
+          * Specifies a time of day after which a date is no longer valid.
+         */
+        "cutoffTime"?: string;
+        /**
+          * Defines valid days of the week using calendar checksum values.
+         */
+        "daysOfWeekChecksum"?: number;
+        /**
+          * Controls whether navigation appears above or below the date grid.
+          * @default 'down'
+         */
+        "direction"?: 'up' | 'down';
+        /**
+          * Disables calendar interaction.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Localized disclaimer content.
+         */
+        "disclaimer"?: string;
+        /**
+          * Controls the date format used in range summaries.
+         */
+        "displayFormat"?: DatePickerDisplayFormat;
+        /**
+          * Defines the last selectable date.
+         */
+        "endDate"?: string;
+        /**
+          * Defines an explicit date blacklist using ISO date strings.
+         */
+        "invalidDates"?: string[];
+        /**
+          * Formats calendar and range labels using the provided locale.
+          * @default document.documentElement.lang || 'en-US'
+         */
+        "locale"?: string | string[];
+        /**
+          * Selects single-date or range calendar behavior.
+          * @default 'single'
+         */
+        "mode"?: DatePickerMode;
+        /**
+          * Emitted when the user cancels range selection.
+         */
+        "onTctCalendarCancel"?: (event: Q2DateCalendarCustomEvent<void>) => void;
+        /**
+          * Emitted when the user commits a single date or date range.
+         */
+        "onTctCalendarCommit"?: (event: Q2DateCalendarCustomEvent<DatePickerChangeDetail>) => void;
+        /**
+          * Emitted when the calendar asks its container to dismiss it.
+         */
+        "onTctCalendarDismiss"?: (event: Q2DateCalendarCustomEvent<void>) => void;
+        /**
+          * Emitted when range confirmation validation changes.
+         */
+        "onTctCalendarError"?: (event: Q2DateCalendarCustomEvent<string>) => void;
+        /**
+          * Emitted with the committed date or range for standalone consumers and framework models.
+         */
+        "onTctChange"?: (event: Q2DateCalendarCustomEvent<DatePickerChangeDetail>) => void;
+        /**
+          * Indicates that a new calendar session has opened.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * The committed range end as an ISO date string.
+         */
+        "rangeEnd"?: string;
+        /**
+          * The committed range start as an ISO date string.
+         */
+        "rangeStart"?: string;
+        /**
+          * Prevents calendar selection while retaining calendar visibility.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Defines the first selectable date.
+         */
+        "startDate"?: string;
+        /**
+          * Defines an explicit date whitelist using ISO date strings.
+         */
+        "validDates"?: string[];
+        /**
+          * The committed single date as an ISO date string.
+         */
+        "value"?: string;
+    }
+    /**
+     * @name Date Picker
+     * @category Forms
+     * @summary Use for selecting a date or date range with an input and calendar popup.
+     */
+    interface Q2DatePicker {
+        /**
+          * Renders the calendar panel inline with behavior specific to being hosted by `q2-action-sheet`.
+          * @private 
+          * @default false
+         */
+        "_actionSheet"?: boolean;
+        /**
+          * Determines the year for a committed month/day typeable date with no year. `future` selects the next year for dates before today, while `past` selects the prior year for dates after today. Only applies to `single-typeable` mode with a month-first or day-first display format.
+          * @default 'current'
+         */
+        "assume"?: 'current' | 'future' | 'past';
+        /**
+          * A label shown above the date picker navigation.
+         */
+        "calendarLabel"?: string;
+        /**
+          * Displays a button in the input field allowing the user to clear the selected date or range.
+          * @default false
+         */
+        "clearable"?: boolean;
+        /**
+          * Delay in milliseconds before the popover closes after selection. Explicitly undefined or non-positive values close immediately.
+          * @default 400
+         */
+        "closeDelay"?: number | undefined;
+        /**
+          * Specifies a time of day after which a date is no longer valid.
+          * @warning Must be a valid ISO date string.
+         */
+        "cutoffTime"?: string;
+        /**
+          * Defines valid days of the week using the calendar checksum values.  Sunday begins at `1` and each following day doubles through Saturday at `64`.
+         */
+        "daysOfWeekChecksum"?: number;
+        /**
+          * Indicates the date picker cannot be focused or interacted with.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Text displayed as the input placeholder when the field is disabled.
+         */
+        "disabledMsg"?: string;
+        /**
+          * Text shown below the date grid.
+         */
+        "disclaimer"?: string;
+        /**
+          * Formats the displayed date using legacy Moment-style tokens. Typeable modes support the numeric formats defined by `DatePickerDisplayFormat` and fall back to `MM/DD/YYYY` for other formats.
+         */
+        "displayFormat"?: string;
+        /**
+          * Defines the last selectable date. ISO date strings are preferred; legacy date strings and timestamps are normalized to their calendar date, without shifting timestamp time zones.
+         */
+        "endDate"?: string;
+        /**
+          * Consumer-provided error messages displayed below the input field.
+         */
+        "errors"?: string[];
+        /**
+          * Hides the input field's visible label while retaining its accessible name.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
+          * @default false
+         */
+        "hideLabel"?: boolean;
+        /**
+          * Consumer-provided hint messages displayed below the input field.
+         */
+        "hints"?: string[];
+        /**
+          * Instructs the component to use the action sheet workflow for displaying its calendar.  For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
+          * @default window.Tecton?.useActionSheets ? true : undefined
+         */
+        "hoist"?: boolean | undefined;
+        /**
+          * Shows the input field's error visual state.
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * Defines an explicit date blacklist. ISO dates, legacy date strings, and timestamps are normalized to calendar dates.  Assign a new array when changing this property. Mutating the existing array does not trigger validation updates.
+         */
+        "invalidDates"?: string[];
+        /**
+          * The visible label for the date picker input field.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
+         */
+        "label"?: string;
+        /**
+          * Formats selected dates using the provided locale. Accepts multiple locales in an array as sequential fallbacks.
+          * @default document.documentElement.lang || 'en-US'
+         */
+        "locale"?: string | string[];
+        /**
+          * Selects calendar or typeable behavior for a single date or date range. Enabling the legacy `typeable` prop uses `single-typeable` when `mode` is left at its default; an explicit mode takes precedence.
+          * @default 'single'
+         */
+        "mode"?: DatePickerMode;
+        /**
+          * Emitted when a date is selected.
+          * @legacyEvent 
+          * @deprecated Use `tctChange` instead.
+         */
+        "onChange"?: (event: Q2DatePickerCustomEvent<DatePickerChangeDetail>) => void;
+        /**
+          * Emitted when an invalid single date is entered or assigned.
+          * @deprecated Use `tctError` instead.
+         */
+        "onError"?: (event: Q2DatePickerCustomEvent<DatePickerErrorDetail>) => void;
+        /**
+          * Emitted when a valid single date is entered, selected, or assigned.
+          * @deprecated Use `tctSuccess` instead.
+         */
+        "onSuccess"?: (event: Q2DatePickerCustomEvent<DatePickerSuccessDetail>) => void;
+        /**
+          * Emitted when an action-sheet date range is cancelled.
+         */
+        "onTctCancel"?: (event: Q2DatePickerCustomEvent<void>) => void;
+        /**
+          * Emitted when a date is selected.
+         */
+        "onTctChange"?: (event: Q2DatePickerCustomEvent<DatePickerChangeDetail>) => void;
+        /**
+          * Emitted when the picker closes after confirmation. Includes validation details when confirmation fails.
+         */
+        "onTctClose"?: (event: Q2DatePickerCustomEvent<DatePickerCloseDetail | void>) => void;
+        /**
+          * Emitted when an invalid single date is entered or assigned.
+         */
+        "onTctError"?: (event: Q2DatePickerCustomEvent<DatePickerErrorDetail>) => void;
+        /**
+          * Emitted when a valid single date is entered, selected, or assigned.
+         */
+        "onTctSuccess"?: (event: Q2DatePickerCustomEvent<DatePickerSuccessDetail>) => void;
+        /**
+          * Controls whether the date picker popover is open or closed.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Appends "(optional)" to the input label and marks the field as not required.
+          * @default false
+         */
+        "optional"?: boolean;
+        /**
+          * Text shown in the input field when no date is selected.
+         */
+        "placeholder"?: string;
+        /**
+          * Forces the direction of the popover when it opens.
+          * @deprecated Use `popoverDirection` instead.
+         */
+        "popDirection"?: 'up' | 'down';
+        /**
+          * Aligns the calendar popover to the left or right side of the input field.
+          * @default 'left'
+         */
+        "popoverAlignment"?: 'left' | 'right';
+        /**
+          * Forces the direction of the popover when it opens.  If no value is passed, the popover automatically selects a direction based on available space. Use `up` to place navigation below the date grid.
+         */
+        "popoverDirection"?: 'up' | 'down';
+        /**
+          * @deprecated Retained for compatibility with `q2-date-picker`.
+          * @default 355
+         */
+        "popoverMinHeight"?: number;
+        /**
+          * Uses absolute positioning for the popover when set to `legacy`.  This compatibility option supports layouts where transformed ancestors interfere with fixed positioning.
+          * @default null
+         */
+        "popoverMode"?: 'legacy';
+        /**
+          * The selected range end. ISO dates, legacy date strings, and timestamps are accepted.
+         */
+        "rangeEnd"?: string;
+        /**
+          * The selected range start. ISO dates, legacy date strings, and timestamps are accepted.
+         */
+        "rangeStart"?: string;
+        /**
+          * The field's content is not editable, but the field remains focusable.  Appends "(read only)" to the field label.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Defines the first selectable date. ISO date strings are preferred; legacy date strings and timestamps are normalized to their calendar date, without shifting timestamp time zones.
+         */
+        "startDate"?: string;
+        /**
+          * Enables the legacy single-date typeable input behavior.
+          * @default false
+         */
+        "typeable"?: boolean;
+        /**
+          * Shows the input field's success visual state when no errors are active.
+          * @default false
+         */
+        "valid"?: boolean;
+        /**
+          * Defines an explicit date whitelist. ISO dates, legacy date strings, and timestamps are normalized to calendar dates.  Assign a new array when changing this property. Mutating the existing array does not trigger validation updates.
+         */
+        "validDates"?: string[];
+        /**
+          * The selected date. ISO date strings are preferred; legacy date strings and Moment-like values are normalized to an ISO date string.
+         */
+        "value"?: DatePickerValue;
+    }
+    /**
+     * @name Detail
+     * @category Display
+     * @summary Use for displaying label-value pairs like account details or miscellaneous info.
+     */
+    interface Q2Detail {
+        /**
+          * Defines the alignment of the label and description when stacked, or when only the label or description is present.
+          * @default 'left'
+         */
+        "align"?: 'left' | 'right' | 'center';
+        /**
+          * @deprecated Use 'align' instead
+         */
+        "alignment"?: 'left' | 'right' | 'center';
         /**
           * Defines the text content of the description.
           * @localizable
@@ -7232,8 +7960,8 @@ declare namespace LocalJSX {
          */
         "fullWidth"?: boolean;
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the dropdown's label text from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
@@ -7247,7 +7975,7 @@ declare namespace LocalJSX {
         "icon"?: string;
         /**
           * The text that appears within the button.
-          * @warning This property should not be used if the `type` is `icon`.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -7384,7 +8112,8 @@ declare namespace LocalJSX {
          */
         "formatModifier"?: string;
         /**
-          * Hide's the field's `<label>` element from view.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
@@ -7393,6 +8122,7 @@ declare namespace LocalJSX {
         "hints"?: string[];
         /**
           * The visible descriptor for the element. Serves as the input label while in the edit state and as a decorative label for the read state when `persistentLabel` is `true`.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable 
           * @default ''
          */
@@ -8024,8 +8754,8 @@ declare namespace LocalJSX {
          */
         "formatModifier"?: string;
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
@@ -8048,6 +8778,7 @@ declare namespace LocalJSX {
         "iconRight"?: Q2Icon['type'];
         /**
           * The label that appears above the field. This is announced by screen readers when the field is focused.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -9116,11 +9847,12 @@ declare namespace LocalJSX {
         "groupTileLayout"?: boolean;
         /**
           * Hides the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
           * The text that describes the individual radio option.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -9169,12 +9901,13 @@ declare namespace LocalJSX {
          */
         "hasError"?: boolean;
         /**
-          * Hide's the group's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the group's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
           * Text for the fieldset legend describing the radio group.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -9317,7 +10050,7 @@ declare namespace LocalJSX {
         "filter"?: boolean;
         /**
           * Hides the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
           * @default false
          */
         "hideLabel"?: boolean;
@@ -9327,6 +10060,7 @@ declare namespace LocalJSX {
         "invalid"?: boolean;
         /**
           * The text that will be used as the label for the field.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -9505,8 +10239,8 @@ declare namespace LocalJSX {
          */
         "errors"?: string[];
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
@@ -9521,6 +10255,7 @@ declare namespace LocalJSX {
         "invalid"?: boolean;
         /**
           * The text that will be used as the label for the field.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -9983,8 +10718,8 @@ declare namespace LocalJSX {
          */
         "errors"?: string[];
         /**
-          * Hide's the field's `<label>` element from view.
-          * @warning Only use when a visible label is impractical.
+          * Hides the field's `<label>` element from view.
+          * @warning Hides the label visually. `label` text is still required for screenreader compliance.
          */
         "hideLabel"?: boolean;
         /**
@@ -9999,6 +10734,7 @@ declare namespace LocalJSX {
         "hints"?: string[];
         /**
           * The label that appears above the field. This is announced by screen readers when the field is focused.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
           * @localizable
          */
         "label"?: string;
@@ -10232,8 +10968,12 @@ declare namespace LocalJSX {
         "form": string;
         "hideLabel": boolean;
         "intent": | 'coin'
+        | 'destroy'
+        | 'escape'
         | 'neutral-text'
         | 'neutral'
+        | 'primary'
+        | 'secondary'
         | 'workflow-destroy'
         | 'workflow-escape'
         | 'workflow-primary'
@@ -10456,6 +11196,61 @@ declare namespace LocalJSX {
         "sticky": boolean;
         "striped": boolean;
     }
+    interface Q2DateCalendarAttributes {
+        "accessibleLabel": string;
+        "actionSheet": boolean;
+        "calendarLabel": string;
+        "cutoffTime": string;
+        "daysOfWeekChecksum": number;
+        "direction": 'up' | 'down';
+        "disabled": boolean;
+        "disclaimer": string;
+        "displayFormat": DatePickerDisplayFormat;
+        "endDate": string;
+        "locale": string | string[];
+        "mode": DatePickerMode;
+        "open": boolean;
+        "rangeEnd": string;
+        "rangeStart": string;
+        "readonly": boolean;
+        "startDate": string;
+        "value": string;
+    }
+    interface Q2DatePickerAttributes {
+        "_actionSheet": boolean;
+        "assume": 'current' | 'future' | 'past';
+        "calendarLabel": string;
+        "clearable": boolean;
+        "closeDelay": number | undefined;
+        "cutoffTime": string;
+        "daysOfWeekChecksum": number;
+        "disabled": boolean;
+        "disabledMsg": string;
+        "disclaimer": string;
+        "displayFormat": string;
+        "endDate": string;
+        "hideLabel": boolean;
+        "hoist": boolean | undefined;
+        "invalid": boolean;
+        "label": string;
+        "locale": string | string[];
+        "mode": DatePickerMode;
+        "open": boolean;
+        "optional": boolean;
+        "placeholder": string;
+        "popDirection": 'up' | 'down';
+        "popoverAlignment": 'left' | 'right';
+        "popoverDirection": 'up' | 'down';
+        "popoverMinHeight": number;
+        "popoverMode": 'legacy';
+        "rangeEnd": string;
+        "rangeStart": string;
+        "readonly": boolean;
+        "startDate": string;
+        "typeable": boolean;
+        "valid": boolean;
+        "value": DatePickerValue;
+    }
     interface Q2DetailAttributes {
         "align": 'left' | 'right' | 'center';
         "alignment": 'left' | 'right' | 'center';
@@ -11073,6 +11868,8 @@ declare namespace LocalJSX {
         "q2-context": Omit<Q2Context, keyof Q2ContextAttributes> & { [K in keyof Q2Context & keyof Q2ContextAttributes]?: Q2Context[K] } & { [K in keyof Q2Context & keyof Q2ContextAttributes as `attr:${K}`]?: Q2ContextAttributes[K] } & { [K in keyof Q2Context & keyof Q2ContextAttributes as `prop:${K}`]?: Q2Context[K] };
         "q2-currency": Omit<Q2Currency, keyof Q2CurrencyAttributes> & { [K in keyof Q2Currency & keyof Q2CurrencyAttributes]?: Q2Currency[K] } & { [K in keyof Q2Currency & keyof Q2CurrencyAttributes as `attr:${K}`]?: Q2CurrencyAttributes[K] } & { [K in keyof Q2Currency & keyof Q2CurrencyAttributes as `prop:${K}`]?: Q2Currency[K] };
         "q2-data-table": Omit<Q2DataTable, keyof Q2DataTableAttributes> & { [K in keyof Q2DataTable & keyof Q2DataTableAttributes]?: Q2DataTable[K] } & { [K in keyof Q2DataTable & keyof Q2DataTableAttributes as `attr:${K}`]?: Q2DataTableAttributes[K] } & { [K in keyof Q2DataTable & keyof Q2DataTableAttributes as `prop:${K}`]?: Q2DataTable[K] };
+        "q2-date-calendar": Omit<Q2DateCalendar, keyof Q2DateCalendarAttributes> & { [K in keyof Q2DateCalendar & keyof Q2DateCalendarAttributes]?: Q2DateCalendar[K] } & { [K in keyof Q2DateCalendar & keyof Q2DateCalendarAttributes as `attr:${K}`]?: Q2DateCalendarAttributes[K] } & { [K in keyof Q2DateCalendar & keyof Q2DateCalendarAttributes as `prop:${K}`]?: Q2DateCalendar[K] };
+        "q2-date-picker": Omit<Q2DatePicker, keyof Q2DatePickerAttributes> & { [K in keyof Q2DatePicker & keyof Q2DatePickerAttributes]?: Q2DatePicker[K] } & { [K in keyof Q2DatePicker & keyof Q2DatePickerAttributes as `attr:${K}`]?: Q2DatePickerAttributes[K] } & { [K in keyof Q2DatePicker & keyof Q2DatePickerAttributes as `prop:${K}`]?: Q2DatePicker[K] };
         "q2-detail": Omit<Q2Detail, keyof Q2DetailAttributes> & { [K in keyof Q2Detail & keyof Q2DetailAttributes]?: Q2Detail[K] } & { [K in keyof Q2Detail & keyof Q2DetailAttributes as `attr:${K}`]?: Q2DetailAttributes[K] } & { [K in keyof Q2Detail & keyof Q2DetailAttributes as `prop:${K}`]?: Q2Detail[K] };
         "q2-dropdown": Omit<Q2Dropdown, keyof Q2DropdownAttributes> & { [K in keyof Q2Dropdown & keyof Q2DropdownAttributes]?: Q2Dropdown[K] } & { [K in keyof Q2Dropdown & keyof Q2DropdownAttributes as `attr:${K}`]?: Q2DropdownAttributes[K] } & { [K in keyof Q2Dropdown & keyof Q2DropdownAttributes as `prop:${K}`]?: Q2Dropdown[K] };
         "q2-dropdown-item": Omit<Q2DropdownItem, keyof Q2DropdownItemAttributes> & { [K in keyof Q2DropdownItem & keyof Q2DropdownItemAttributes]?: Q2DropdownItem[K] } & { [K in keyof Q2DropdownItem & keyof Q2DropdownItemAttributes as `attr:${K}`]?: Q2DropdownItemAttributes[K] } & { [K in keyof Q2DropdownItem & keyof Q2DropdownItemAttributes as `prop:${K}`]?: Q2DropdownItem[K] };
@@ -11239,6 +12036,18 @@ declare module "@stencil/core" {
              * @summary Use for displaying large datasets with sorting, filtering, and selecting.
              */
             "q2-data-table": LocalJSX.IntrinsicElements["q2-data-table"] & JSXBase.HTMLAttributes<HTMLQ2DataTableElement>;
+            /**
+             * @name Date Calendar
+             * @category Forms
+             * @summary Use for selecting dates from a standalone calendar.
+             */
+            "q2-date-calendar": LocalJSX.IntrinsicElements["q2-date-calendar"] & JSXBase.HTMLAttributes<HTMLQ2DateCalendarElement>;
+            /**
+             * @name Date Picker
+             * @category Forms
+             * @summary Use for selecting a date or date range with an input and calendar popup.
+             */
+            "q2-date-picker": LocalJSX.IntrinsicElements["q2-date-picker"] & JSXBase.HTMLAttributes<HTMLQ2DatePickerElement>;
             /**
              * @name Detail
              * @category Display