q2-tecton-elements 1.71.4 → 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;
         /**
@@ -498,7 +508,15 @@ export namespace Components {
         /**
           * The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.
          */
-        "cardStatus"?: 'digital' | 'enabled' | 'disabled' | 'locked' | 'damaged' | 'lost' | 'stolen' | 'lost or stolen';
+        "cardStatus"?: | 'digital'
+        | 'enabled'
+        | 'new'
+        | 'disabled'
+        | 'locked'
+        | 'damaged'
+        | 'lost'
+        | 'stolen'
+        | 'lost or stolen';
         /**
           * The card type label displayed alongside the expiration date. Not rendered at tiny size.
          */
@@ -1041,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;
         /**
@@ -1051,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;
@@ -1090,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;
@@ -1292,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
@@ -1374,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;
         /**
@@ -1389,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;
@@ -1547,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;
         /**
@@ -1556,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 ''
          */
@@ -1627,6 +1954,11 @@ export namespace Components {
           * Disables the file picker, preventing user interaction.
          */
         "disabled": boolean;
+        /**
+          * When `false`, the file name renders as-is and may wrap. Otherwise, long file names are middle-ellipsized so the beginning and end of the name remain visible.
+          * @default true
+         */
+        "ellipsizeFileName": boolean;
         /**
           * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or 'jpg, png, pdf'). When using the attribute, provide a comma-separated string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically via JavaScript.
           * @default []
@@ -1647,6 +1979,11 @@ export namespace Components {
           * @default Infinity
          */
         "maxFiles": number;
+        /**
+          * Shows a gradient at the bottom of the file list when more files are available below the visible area.
+          * @default true
+         */
+        "showGradient": boolean;
         /**
           * An array of `ValidFileStatus` objects representing the upload status of files. Each `ValidFileStatus` object contains the following properties: - `name`: The file name. - `status`: The upload status, either `"failed"` or `"uploaded"`. - `message`: (Optional) A custom status message, used only when `status`   is `"failed"`. This allows developers to provide more detail about   upload failures while ensuring all other file status messages remain   consistent with approved design/UX standards. Custom failure messages   are limited to a single line.
           * @localizable 
@@ -2065,6 +2402,11 @@ export namespace Components {
      * @summary Use for single-line text entry including email, phone, currency, SSN, and password.
      */
     interface Q2Input {
+        /**
+          * Provides additional descriptive text for the native input.
+          * @private
+         */
+        "_ariaDescription": string;
         /**
           * Sets readonly to true on the input without adding the "read only" label.  Can be used to prevent user input while still presenting the necessary information for assistive technology.
           * @private 
@@ -2151,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;
         /**
@@ -2175,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;
@@ -2231,7 +2574,7 @@ export namespace Components {
         "showCount": boolean;
         /**
           * Displays a toggle button at the end of the input field which shows or hides the actual value.
-          * @info Only applicable when `type` is `text`, `password`, or `ssn`.
+          * @info Applicable when `type` is `text`, `password`, `ssn`, or `tin`, or when `visibleLastCount` is set.
           * @default false
          */
         "showVisibilityToggle": boolean;
@@ -2241,7 +2584,7 @@ export namespace Components {
          */
         "step": number;
         /**
-          * Controls visibility of the value when the type is `text`, `password`, or `ssn`. When the input type is `password`, it will default to `true`, hiding the text.
+          * Controls visibility of the value. When `visibleLastCount` is set, hidden values keep the specified number of trailing characters visible. When the input type is `password`, it will default to `true`, hiding the text.
          */
         "textHidden": boolean;
         /**
@@ -2263,6 +2606,10 @@ export namespace Components {
           * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` updates its own `value` through its default input and change event handlers.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
          */
         "value": string;
+        /**
+          * Controls the number of trailing characters that remain visible when the field value is masked by `textHidden` or the visibility toggle. The element's `value` and emitted event details remain unmasked.
+         */
+        "visibleLastCount": number;
     }
     /**
      * @name Item
@@ -2562,7 +2909,7 @@ export namespace Components {
      */
     interface Q2Modal {
         /**
-          * Controls visibility of the close button in the top right corner.
+          * Controls visibility of the close button and whether the modal can be dismissed with the backdrop or Escape key.
           * @default true
          */
         "closable": boolean;
@@ -2575,6 +2922,11 @@ export namespace Components {
           * A plain text description of the modal. Use this to provide context or information to the user.
          */
         "description": string;
+        /**
+          * Whether the action buttons should take up the full width of the modal footer.
+          * @default true
+         */
+        "fullWidthButton": boolean;
         /**
           * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).
          */
@@ -3125,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;
@@ -3169,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;
@@ -3186,6 +3540,17 @@ export namespace Components {
           * Appends "(optional)" to the group label, and sets `aria-required` on the nested input tag to `false`.
          */
         "optional": boolean;
+        /**
+          * The layout direction of radio options when `tileLayout` is not enabled.
+          * @default 'vertical'
+         */
+        "orientation": 'vertical' | 'horizontal';
+        /**
+          * The width, in pixels, below which a horizontal non-tile layout displays vertically.
+          * @info The component determines this based on its own width, not the browser window.
+          * @default 440
+         */
+        "orientationThreshold": number;
         /**
           * Determines if all radios in the group can be focused, but not interacted with.
          */
@@ -3317,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;
@@ -3327,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;
@@ -3512,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;
         /**
@@ -3528,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;
@@ -3594,6 +3961,7 @@ export namespace Components {
         "searchOptions": (query: string) => Promise<void>;
         /**
           * Enables search functionality.
+          * @warning `searchable` is not compatible with the `hoist` prop. The action sheet workflow used when `hoist` is `true` does not support in-list search filtering. If both are set, `searchable` has no effect while the action sheet is active.
           * @default false
          */
         "searchable": boolean;
@@ -3934,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;
         /**
@@ -3950,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;
@@ -4169,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;
@@ -4706,19 +5083,74 @@ declare global {
         prototype: HTMLQ2DataTableElement;
         new (): HTMLQ2DataTableElement;
     };
-    /**
-     * @name Detail
-     * @category Display
-     * @summary Use for displaying label-value pairs like account details or miscellaneous info.
-     */
-    interface HTMLQ2DetailElement extends Components.Q2Detail, HTMLStencilElement {
+    interface HTMLQ2DateCalendarElementEventMap {
+        "tctCalendarCancel": void;
+        "tctCalendarCommit": DatePickerChangeDetail;
+        "tctCalendarDismiss": void;
+        "tctCalendarError": string;
+        "tctChange": DatePickerChangeDetail;
     }
-    var HTMLQ2DetailElement: {
-        prototype: HTMLQ2DetailElement;
-        new (): HTMLQ2DetailElement;
-    };
     /**
-     * @name Dropdown
+     * @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
+     * @summary Use for displaying label-value pairs like account details or miscellaneous info.
+     */
+    interface HTMLQ2DetailElement extends Components.Q2Detail, HTMLStencilElement {
+    }
+    var HTMLQ2DetailElement: {
+        prototype: HTMLQ2DetailElement;
+        new (): HTMLQ2DetailElement;
+    };
+    /**
+     * @name Dropdown
      * @category Display
      * @summary Use for menus of contextual actions triggered by a button click.
      */
@@ -5035,6 +5467,7 @@ declare global {
         new (): HTMLQ2MeterElement;
     };
     interface HTMLQ2ModalElementEventMap {
+        "tctBackdropClick": undefined;
         "tctClick": any;
         "tctClose": any;
         "tctOpen": any;
@@ -5682,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;
@@ -5911,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;
@@ -6013,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;
         /**
@@ -6032,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;
         /**
@@ -6254,7 +6697,15 @@ declare namespace LocalJSX {
         /**
           * The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.
          */
-        "cardStatus"?: 'digital' | 'enabled' | 'disabled' | 'locked' | 'damaged' | 'lost' | 'stolen' | 'lost or stolen';
+        "cardStatus"?: | 'digital'
+        | 'enabled'
+        | 'new'
+        | 'disabled'
+        | 'locked'
+        | 'damaged'
+        | 'lost'
+        | 'stolen'
+        | 'lost or stolen';
         /**
           * The card type label displayed alongside the expiration date. Not rendered at tiny size.
          */
@@ -6541,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<{
@@ -6549,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;
@@ -6822,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;
         /**
@@ -6832,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;
@@ -6882,229 +7334,558 @@ 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;
+        "label"?: string;
+        /**
+          * Emitted when the checkbox selection changes.
+          * @deprecated Use 'tctChange' instead
+         */
+        "onChange"?: (event: Q2CheckboxGroupCustomEvent<any>) => void;
+        /**
+          * Emitted when the checkbox selection changes.
+         */
+        "onTctChange"?: (event: Q2CheckboxGroupCustomEvent<any>) => void;
+        /**
+          * Determines if the component is marked as `optional`.
+         */
+        "optional"?: boolean;
+        /**
+          * Determines if all the checkboxes are marked as `readonly`.
+         */
+        "readonly"?: boolean;
+        /**
+          * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.  **Example:**
+          * @snippet element.value = {   'checkbox-value-1': true,   'checkbox-value-2': false,   'checkbox-value-3': true, };  // Also accepts partial values element.value = {   'checkbox-value-2': false, }
+         */
+        "value"?: object;
+    }
+    /**
+     * @name Context
+     * @category Display
+     * @summary Use for displaying supplementary information or hints alongside content.
+     */
+    interface Q2Context {
+        /**
+          * Renders a horizontal line between the description and the action-group/footer slots.
+         */
+        "separator"?: boolean;
+    }
+    /**
+     * @name Currency
+     * @category Text
+     * @summary Use for displaying formatted monetary amounts with proper locale.
+     */
+    interface Q2Currency {
+        /**
+          * The amount you want formatted.
+         */
+        "amount"?: number;
+        /**
+          * Formats the `amount` to a specific currency.
+          * @default 'USD'
+         */
+        "currency"?: string;
+        /**
+          * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
+          * @default document.documentElement.lang || 'en-US'
+         */
+        "locale"?: string | string[];
+        /**
+          * Determine how the positive or negative sign should display.  Behavior: - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts. - `always`: Always display the sign. - `auto`: Sign displays for negative amounts only, including negative zero. - `exceptZero`: Sign displays for positive and negative amounts, but not zero. - `never`: Never display the sign.
+          * @default 'auto'
+         */
+        "signDisplay"?: 'accounting' | 'always' | 'auto' | 'exceptZero' | 'never';
+        /**
+          * Applies styling based on the size provided. If no size is provided, it will display as inline text.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.
+         */
+        "slotSize"?: string;
+        /**
+          * The variant controls how the currency is colored and exposes unique CSS overrides. The `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts. The `masked` variant exposes the ability to use gradients and images to color the currency.
+         */
+        "variant"?: 'debit' | 'credit' | 'masked';
+    }
+    /**
+     * @name Data Table
+     * @category Display
+     * @summary Use for displaying large datasets with sorting, filtering, and selecting.
+     */
+    interface Q2DataTable {
+        /**
+          * Adds borders between rows and/or columns in the table.
+         */
+        "bordered"?: boolean | 'horizontal' | 'vertical' | 'grid';
+        /**
+          * Provides a caption for the data table.
+         */
+        "caption"?: string;
+        /**
+          * Adds the ability to click a row and have the table emit an event with the selected row's data.
+         */
+        "clickable"?: boolean;
+        /**
+          * Determines the amount of padding for each of the cells in the table.
+         */
+        "density"?: 'compact' | 'normal' | 'comfortable';
+        /**
+          * Determines the `q2-icon` that will display when `rows` has no value.
+          * @default 'inbox'
+         */
+        "emptyIcon"?: string;
+        /**
+          * Determines the message that will display when `rows` has no value.
+          * @localizable 
+          * @default 'tecton.element.dataTable.emptyMessage'
+         */
+        "emptyMessage"?: string;
+        /**
+          * Defines the headers of the table.  **Example:**
+          * @snippet element.headers = [  {    title: 'Day of the Week',    key: 'day',  },  {    title: 'Sales',    key: 'sales',    align: 'end',  } ]
+         */
+        "headers"?: Q2DataTableHeader[];
+        /**
+          * Hides the caption from view, but still makes it available to screen readers for accessibility purposes.
+         */
+        "hideCaption"?: boolean;
+        /**
+          * Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.
+          * @info Use of this property requires `clickable` to be set to `true`.
+         */
+        "hideClickable"?: boolean;
+        /**
+          * Displays a loading state on the table to indicate background activity.
+         */
+        "loading"?: boolean;
+        /**
+          * Emitted when a row is clicked.  Requires the `clickable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default click behavior.
+          * @deprecated Use 'tctClick' instead
+         */
+        "onClick"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
+        /**
+          * Emitted when a row is selected.  Requires the `selectable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default selection behavior.
+          * @deprecated Use 'tctSelect' instead
+         */
+        "onSelect"?: (event: Q2DataTableCustomEvent<{
+        row: Q2DataTableSerializedRow;
+        rows: Q2DataTableSerializedRow[];
+        allSelected: boolean;
+    }>) => void;
+        /**
+          * Emitted when the select-all checkbox is toggled.  Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.  Call `event.preventDefault()` to prevent the default behavior.
+          * @deprecated Use 'tctSelectAllRows' instead
+         */
+        "onSelectAllRows"?: (event: Q2DataTableCustomEvent<{ checked: boolean }>) => void;
+        /**
+          * Emitted when a column is sorted.  Requires the `sortable` prop to be set to `true` on the column.  Call `event.preventDefault()` to prevent the default sorting behavior.
+          * @deprecated Use 'tctSort' instead
+         */
+        "onSort"?: (event: Q2DataTableCustomEvent<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>) => void;
+        /**
+          * Emitted when a row is clicked.  Requires the `clickable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default click behavior.
+         */
+        "onTctClick"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
+        /**
+          * Emitted when a row is selected.  Requires the `selectable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default selection behavior.
+         */
+        "onTctSelect"?: (event: Q2DataTableCustomEvent<{
+        row: Q2DataTableSerializedRow;
+        rows: Q2DataTableSerializedRow[];
+        allSelected: boolean;
+    }>) => void;
+        /**
+          * Emitted when the select-all checkbox is toggled.  Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.  Call `event.preventDefault()` to prevent the default behavior.
+         */
+        "onTctSelectAllRows"?: (event: Q2DataTableCustomEvent<{ checked: boolean }>) => void;
+        /**
+          * Emitted when a column is sorted.  Requires the `sortable` prop to be set to `true` on the column.  Call `event.preventDefault()` to prevent the default sorting behavior.
+         */
+        "onTctSort"?: (event: Q2DataTableCustomEvent<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>) => void;
+        /**
+          * Emitted when an expandable row is toggled.  Requires content in the `row-{id}-expandable-content` slot.  Call `event.preventDefault()` to prevent the default toggling behavior.
+         */
+        "onTctToggle"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
+        /**
+          * Emitted when an expandable row is toggled.  Requires content in the `row-{id}-expandable-content` slot.  Call `event.preventDefault()` to prevent the default toggling behavior.
+          * @deprecated Use 'tctToggle' instead
+         */
+        "onToggle"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
+        /**
+          * Defines the rows of the table.  **Example:**
+          * @snippet element.rows = [  {    id: 1,    cells: {      day: 'Monday',      sales: 93    }  },  {    id: 2,    cells: {      day: 'Tuesday',      sales: 127    }  },  {    id: 3,    cells: {      day: 'Wednesday',      sales: 121    } ]
+         */
+        "rows"?: Q2DataTableRow[];
+        /**
+          * Controls the position of the checkbox column when `selectable` is true. When set to 'right', the checkbox column will appear on the right side of the table.
+          * @warning Use of this property requires `selectable` to be set to `true`.
+          * @default 'left'
+         */
+        "selectAlign"?: 'left' | 'right';
+        /**
+          * Determines if the selectable checkboxes allow for multi-select or not. If set to "single", once a row is selected, all other rows will be disabled. See the documentation on the `select` event for how to handle selections.
+          * @warning Use of this property requires `selectable` to be set to `true`.
+          * @default 'multiple'
+         */
+        "selectMode"?: 'multiple' | 'single';
+        /**
+          * Adds a checkbox to each row of the table making it selectable.
+         */
+        "selectable"?: boolean;
+        /**
+          * Returns selected rows.
+          * @readonly
+         */
+        "selectedRows"?: Q2DataTableRow[];
+        /**
+          * Adds a shadow to the table
+         */
+        "shadowed"?: boolean;
+        /**
+          * Makes table header sticky
+         */
+        "sticky"?: boolean;
+        /**
+          * Enables alternating background colors for the table rows
+         */
+        "striped"?: boolean;
+    }
+    /**
+     * @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;
+        /**
+          * 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;
         /**
-          * Emitted when the checkbox selection changes.
-          * @deprecated Use 'tctChange' instead
+          * Delay in milliseconds before the popover closes after selection. Explicitly undefined or non-positive values close immediately.
+          * @default 400
          */
-        "onChange"?: (event: Q2CheckboxGroupCustomEvent<any>) => void;
+        "closeDelay"?: number | undefined;
         /**
-          * Emitted when the checkbox selection changes.
+          * Specifies a time of day after which a date is no longer valid.
+          * @warning Must be a valid ISO date string.
          */
-        "onTctChange"?: (event: Q2CheckboxGroupCustomEvent<any>) => void;
+        "cutoffTime"?: string;
         /**
-          * Determines if the component is marked as `optional`.
+          * Defines valid days of the week using the calendar checksum values.  Sunday begins at `1` and each following day doubles through Saturday at `64`.
          */
-        "optional"?: boolean;
+        "daysOfWeekChecksum"?: number;
         /**
-          * Determines if all the checkboxes are marked as `readonly`.
+          * Indicates the date picker cannot be focused or interacted with.
+          * @default false
          */
-        "readonly"?: boolean;
+        "disabled"?: boolean;
         /**
-          * Can be used to get and set the checked status of each `<q2-checkbox>` element contained within the group.  **Example:**
-          * @snippet element.value = {   'checkbox-value-1': true,   'checkbox-value-2': false,   'checkbox-value-3': true, };  // Also accepts partial values element.value = {   'checkbox-value-2': false, }
+          * Text displayed as the input placeholder when the field is disabled.
          */
-        "value"?: object;
-    }
-    /**
-     * @name Context
-     * @category Display
-     * @summary Use for displaying supplementary information or hints alongside content.
-     */
-    interface Q2Context {
+        "disabledMsg"?: string;
         /**
-          * Renders a horizontal line between the description and the action-group/footer slots.
+          * Text shown below the date grid.
          */
-        "separator"?: boolean;
-    }
-    /**
-     * @name Currency
-     * @category Text
-     * @summary Use for displaying formatted monetary amounts with proper locale.
-     */
-    interface Q2Currency {
+        "disclaimer"?: string;
         /**
-          * The amount you want formatted.
+          * 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.
          */
-        "amount"?: number;
+        "displayFormat"?: string;
         /**
-          * Formats the `amount` to a specific currency.
-          * @default 'USD'
+          * 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.
          */
-        "currency"?: string;
+        "endDate"?: string;
         /**
-          * Formats to the language provided. Accepts multiple locales in an array as sequential fallbacks.
-          * @default document.documentElement.lang || 'en-US'
+          * Consumer-provided error messages displayed below the input field.
          */
-        "locale"?: string | string[];
+        "errors"?: string[];
         /**
-          * Determine how the positive or negative sign should display.  Behavior: - `accounting`: No sign displays for positive amounts and parentheses wrap negative amounts. - `always`: Always display the sign. - `auto`: Sign displays for negative amounts only, including negative zero. - `exceptZero`: Sign displays for positive and negative amounts, but not zero. - `never`: Never display the sign.
-          * @default 'auto'
+          * 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
          */
-        "signDisplay"?: 'accounting' | 'always' | 'auto' | 'exceptZero' | 'never';
+        "hideLabel"?: boolean;
         /**
-          * Applies styling based on the size provided. If no size is provided, it will display as inline text.
+          * Consumer-provided hint messages displayed below the input field.
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "hints"?: string[];
         /**
-          * @private Inherited from q2-detail when slotted to match styling of q2-detail and q2-currency texts.
+          * 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
          */
-        "slotSize"?: string;
+        "hoist"?: boolean | undefined;
         /**
-          * The variant controls how the currency is colored and exposes unique CSS overrides. The `debit` and `credit` variants align styling with common practices for coloring debit and credit accounts. The `masked` variant exposes the ability to use gradients and images to color the currency.
+          * Shows the input field's error visual state.
+          * @default false
          */
-        "variant"?: 'debit' | 'credit' | 'masked';
-    }
-    /**
-     * @name Data Table
-     * @category Display
-     * @summary Use for displaying large datasets with sorting, filtering, and selecting.
-     */
-    interface Q2DataTable {
+        "invalid"?: boolean;
         /**
-          * Adds borders between rows and/or columns in the table.
+          * 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.
          */
-        "bordered"?: boolean | 'horizontal' | 'vertical' | 'grid';
+        "invalidDates"?: string[];
         /**
-          * Provides a caption for the data table.
+          * The visible label for the date picker input field.
+          * @warning Required for screen reader compliance even when `hideLabel` is `true`.
          */
-        "caption"?: string;
+        "label"?: string;
         /**
-          * Adds the ability to click a row and have the table emit an event with the selected row's data.
+          * Formats selected dates using the provided locale. Accepts multiple locales in an array as sequential fallbacks.
+          * @default document.documentElement.lang || 'en-US'
          */
-        "clickable"?: boolean;
+        "locale"?: string | string[];
         /**
-          * Determines the amount of padding for each of the cells in the table.
+          * 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'
          */
-        "density"?: 'compact' | 'normal' | 'comfortable';
+        "mode"?: DatePickerMode;
         /**
-          * Determines the `q2-icon` that will display when `rows` has no value.
-          * @default 'inbox'
+          * Emitted when a date is selected.
+          * @legacyEvent 
+          * @deprecated Use `tctChange` instead.
          */
-        "emptyIcon"?: string;
+        "onChange"?: (event: Q2DatePickerCustomEvent<DatePickerChangeDetail>) => void;
         /**
-          * Determines the message that will display when `rows` has no value.
-          * @localizable 
-          * @default 'tecton.element.dataTable.emptyMessage'
+          * Emitted when an invalid single date is entered or assigned.
+          * @deprecated Use `tctError` instead.
          */
-        "emptyMessage"?: string;
+        "onError"?: (event: Q2DatePickerCustomEvent<DatePickerErrorDetail>) => void;
         /**
-          * Defines the headers of the table.  **Example:**
-          * @snippet element.headers = [  {    title: 'Day of the Week',    key: 'day',  },  {    title: 'Sales',    key: 'sales',    align: 'end',  } ]
+          * Emitted when a valid single date is entered, selected, or assigned.
+          * @deprecated Use `tctSuccess` instead.
          */
-        "headers"?: Q2DataTableHeader[];
+        "onSuccess"?: (event: Q2DatePickerCustomEvent<DatePickerSuccessDetail>) => void;
         /**
-          * Hides the caption from view, but still makes it available to screen readers for accessibility purposes.
+          * Emitted when an action-sheet date range is cancelled.
          */
-        "hideCaption"?: boolean;
+        "onTctCancel"?: (event: Q2DatePickerCustomEvent<void>) => void;
         /**
-          * Visually hides the `Select` button that displays when `clickable=true`. It will still be discoverable by assistive technologies.
-          * @info Use of this property requires `clickable` to be set to `true`.
+          * Emitted when a date is selected.
          */
-        "hideClickable"?: boolean;
+        "onTctChange"?: (event: Q2DatePickerCustomEvent<DatePickerChangeDetail>) => void;
         /**
-          * Displays a loading state on the table to indicate background activity.
+          * Emitted when the picker closes after confirmation. Includes validation details when confirmation fails.
          */
-        "loading"?: boolean;
+        "onTctClose"?: (event: Q2DatePickerCustomEvent<DatePickerCloseDetail | void>) => void;
         /**
-          * Emitted when a row is clicked.  Requires the `clickable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default click behavior.
-          * @deprecated Use 'tctClick' instead
+          * Emitted when an invalid single date is entered or assigned.
          */
-        "onClick"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
+        "onTctError"?: (event: Q2DatePickerCustomEvent<DatePickerErrorDetail>) => void;
         /**
-          * Emitted when a row is selected.  Requires the `selectable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default selection behavior.
-          * @deprecated Use 'tctSelect' instead
+          * Emitted when a valid single date is entered, selected, or assigned.
          */
-        "onSelect"?: (event: Q2DataTableCustomEvent<{
-        row: Q2DataTableSerializedRow;
-        rows: Q2DataTableSerializedRow[];
-        allSelected: boolean;
-    }>) => void;
+        "onTctSuccess"?: (event: Q2DatePickerCustomEvent<DatePickerSuccessDetail>) => void;
         /**
-          * Emitted when the select-all checkbox is toggled.  Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.  Call `event.preventDefault()` to prevent the default behavior.
-          * @deprecated Use 'tctSelectAllRows' instead
+          * Controls whether the date picker popover is open or closed.
+          * @default false
          */
-        "onSelectAllRows"?: (event: Q2DataTableCustomEvent<{ checked: boolean }>) => void;
+        "open"?: boolean;
         /**
-          * Emitted when a column is sorted.  Requires the `sortable` prop to be set to `true` on the column.  Call `event.preventDefault()` to prevent the default sorting behavior.
-          * @deprecated Use 'tctSort' instead
+          * Appends "(optional)" to the input label and marks the field as not required.
+          * @default false
          */
-        "onSort"?: (event: Q2DataTableCustomEvent<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>) => void;
+        "optional"?: boolean;
         /**
-          * Emitted when a row is clicked.  Requires the `clickable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default click behavior.
+          * Text shown in the input field when no date is selected.
          */
-        "onTctClick"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
+        "placeholder"?: string;
         /**
-          * Emitted when a row is selected.  Requires the `selectable` prop to be set to `true`.  Call `event.preventDefault()` to prevent the default selection behavior.
+          * Forces the direction of the popover when it opens.
+          * @deprecated Use `popoverDirection` instead.
          */
-        "onTctSelect"?: (event: Q2DataTableCustomEvent<{
-        row: Q2DataTableSerializedRow;
-        rows: Q2DataTableSerializedRow[];
-        allSelected: boolean;
-    }>) => void;
+        "popDirection"?: 'up' | 'down';
         /**
-          * Emitted when the select-all checkbox is toggled.  Requires the `selectable` prop to be set to `true` and the `selectMode` prop to be set to `multiple`.  Call `event.preventDefault()` to prevent the default behavior.
+          * Aligns the calendar popover to the left or right side of the input field.
+          * @default 'left'
          */
-        "onTctSelectAllRows"?: (event: Q2DataTableCustomEvent<{ checked: boolean }>) => void;
+        "popoverAlignment"?: 'left' | 'right';
         /**
-          * Emitted when a column is sorted.  Requires the `sortable` prop to be set to `true` on the column.  Call `event.preventDefault()` to prevent the default sorting behavior.
+          * 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.
          */
-        "onTctSort"?: (event: Q2DataTableCustomEvent<{ header: Q2DataTableHeader; direction: 'ASC' | 'DESC' }>) => void;
+        "popoverDirection"?: 'up' | 'down';
         /**
-          * Emitted when an expandable row is toggled.  Requires content in the `row-{id}-expandable-content` slot.  Call `event.preventDefault()` to prevent the default toggling behavior.
+          * @deprecated Retained for compatibility with `q2-date-picker`.
+          * @default 355
          */
-        "onTctToggle"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
+        "popoverMinHeight"?: number;
         /**
-          * Emitted when an expandable row is toggled.  Requires content in the `row-{id}-expandable-content` slot.  Call `event.preventDefault()` to prevent the default toggling behavior.
-          * @deprecated Use 'tctToggle' instead
+          * Uses absolute positioning for the popover when set to `legacy`.  This compatibility option supports layouts where transformed ancestors interfere with fixed positioning.
+          * @default null
          */
-        "onToggle"?: (event: Q2DataTableCustomEvent<{ row: Q2DataTableSerializedRow }>) => void;
+        "popoverMode"?: 'legacy';
         /**
-          * Defines the rows of the table.  **Example:**
-          * @snippet element.rows = [  {    id: 1,    cells: {      day: 'Monday',      sales: 93    }  },  {    id: 2,    cells: {      day: 'Tuesday',      sales: 127    }  },  {    id: 3,    cells: {      day: 'Wednesday',      sales: 121    } ]
+          * The selected range end. ISO dates, legacy date strings, and timestamps are accepted.
          */
-        "rows"?: Q2DataTableRow[];
+        "rangeEnd"?: string;
         /**
-          * Controls the position of the checkbox column when `selectable` is true. When set to 'right', the checkbox column will appear on the right side of the table.
-          * @warning Use of this property requires `selectable` to be set to `true`.
-          * @default 'left'
+          * The selected range start. ISO dates, legacy date strings, and timestamps are accepted.
          */
-        "selectAlign"?: 'left' | 'right';
+        "rangeStart"?: string;
         /**
-          * Determines if the selectable checkboxes allow for multi-select or not. If set to "single", once a row is selected, all other rows will be disabled. See the documentation on the `select` event for how to handle selections.
-          * @warning Use of this property requires `selectable` to be set to `true`.
-          * @default 'multiple'
+          * The field's content is not editable, but the field remains focusable.  Appends "(read only)" to the field label.
+          * @default false
          */
-        "selectMode"?: 'multiple' | 'single';
+        "readonly"?: boolean;
         /**
-          * Adds a checkbox to each row of the table making it selectable.
+          * 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.
          */
-        "selectable"?: boolean;
+        "startDate"?: string;
         /**
-          * Returns selected rows.
-          * @readonly
+          * Enables the legacy single-date typeable input behavior.
+          * @default false
          */
-        "selectedRows"?: Q2DataTableRow[];
+        "typeable"?: boolean;
         /**
-          * Adds a shadow to the table
+          * Shows the input field's success visual state when no errors are active.
+          * @default false
          */
-        "shadowed"?: boolean;
+        "valid"?: boolean;
         /**
-          * Makes table header sticky
+          * 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.
          */
-        "sticky"?: boolean;
+        "validDates"?: string[];
         /**
-          * Enables alternating background colors for the table rows
+          * The selected date. ISO date strings are preferred; legacy date strings and Moment-like values are normalized to an ISO date string.
          */
-        "striped"?: boolean;
+        "value"?: DatePickerValue;
     }
     /**
      * @name Detail
@@ -7179,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;
         /**
@@ -7194,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;
@@ -7331,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;
         /**
@@ -7340,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 ''
          */
@@ -7349,7 +8132,7 @@ declare namespace LocalJSX {
          */
         "maxlength"?: number;
         /**
-          * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.  The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.
+          * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.  The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.  Call `event.preventDefault()` to prevent the default behavior (the component's internal `editing` and `value` updates).
           * @info  If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.
           * @deprecated Use 'tctChange' instead
          */
@@ -7365,7 +8148,7 @@ declare namespace LocalJSX {
          */
         "onInput"?: (event: Q2EditableFieldCustomEvent<{ formattedValue: string; value: string }>) => void;
         /**
-          * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.  The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.
+          * Emitted when the 'Edit', 'Cancel', or 'Save' buttons are clicked.  The event detail will not include a `value` or `formattedValue` if the event name is 'edit' or 'cancel'.  Call `event.preventDefault()` to prevent the default behavior (the component's internal `editing` and `value` updates).
           * @info If you are utilizing events to provide input validation, it is recommended you use the `input` event, not the `change` event.
          */
         "onTctChange"?: (event: Q2EditableFieldCustomEvent<{
@@ -7438,6 +8221,11 @@ declare namespace LocalJSX {
           * Disables the file picker, preventing user interaction.
          */
         "disabled"?: boolean;
+        /**
+          * When `false`, the file name renders as-is and may wrap. Otherwise, long file names are middle-ellipsized so the beginning and end of the name remain visible.
+          * @default true
+         */
+        "ellipsizeFileName"?: boolean;
         /**
           * Allowed file types based on extensions (e.g., ['jpg', 'png', 'pdf'] or 'jpg, png, pdf'). When using the attribute, provide a comma-separated string (e.g., 'jpg, png, pdf'). Arrays can only be set programmatically via JavaScript.
           * @default []
@@ -7462,6 +8250,11 @@ declare namespace LocalJSX {
           * Custom event dispatched when the user selects files. The event detail contains an object representing the selected files with two properties: - `invalidFiles`: An array of `InvalidFileStatus` objects representing   files that failed validation. - `validFiles`: An array of `File` objects representing files that passed   validation.  Each `InvalidFileStatus` object includes the following properties: - `file`: The `File` object. - `status`: The validation status, which can be `"invalid-type"` (invalid file   type), `"over-size-limit"` (file exceeds the size limit), or   `"over-max-files-limit"` (total exceeds the max files limit).
          */
         "onTctChange"?: (event: Q2FilePickerCustomEvent<FilesObject>) => void;
+        /**
+          * Shows a gradient at the bottom of the file list when more files are available below the visible area.
+          * @default true
+         */
+        "showGradient"?: boolean;
         /**
           * An array of `ValidFileStatus` objects representing the upload status of files. Each `ValidFileStatus` object contains the following properties: - `name`: The file name. - `status`: The upload status, either `"failed"` or `"uploaded"`. - `message`: (Optional) A custom status message, used only when `status`   is `"failed"`. This allows developers to provide more detail about   upload failures while ensuring all other file status messages remain   consistent with approved design/UX standards. Custom failure messages   are limited to a single line.
           * @localizable 
@@ -7880,6 +8673,11 @@ declare namespace LocalJSX {
      * @summary Use for single-line text entry including email, phone, currency, SSN, and password.
      */
     interface Q2Input {
+        /**
+          * Provides additional descriptive text for the native input.
+          * @private
+         */
+        "_ariaDescription"?: string;
         /**
           * Sets readonly to true on the input without adding the "read only" label.  Can be used to prevent user input while still presenting the necessary information for assistive technology.
           * @private 
@@ -7956,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;
         /**
@@ -7980,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;
@@ -8082,7 +8881,7 @@ declare namespace LocalJSX {
         "showCount"?: boolean;
         /**
           * Displays a toggle button at the end of the input field which shows or hides the actual value.
-          * @info Only applicable when `type` is `text`, `password`, or `ssn`.
+          * @info Applicable when `type` is `text`, `password`, `ssn`, or `tin`, or when `visibleLastCount` is set.
           * @default false
          */
         "showVisibilityToggle"?: boolean;
@@ -8092,7 +8891,7 @@ declare namespace LocalJSX {
          */
         "step"?: number;
         /**
-          * Controls visibility of the value when the type is `text`, `password`, or `ssn`. When the input type is `password`, it will default to `true`, hiding the text.
+          * Controls visibility of the value. When `visibleLastCount` is set, hidden values keep the specified number of trailing characters visible. When the input type is `password`, it will default to `true`, hiding the text.
          */
         "textHidden"?: boolean;
         /**
@@ -8114,6 +8913,10 @@ declare namespace LocalJSX {
           * @info The visible value of formatted input fields may not match the element's `value` property. When setting an input's value programmatically (e.g. pre-populating a form), ensure that the supplied value is in a format that can be handled by its consuming logic. `q2-input` updates its own `value` through its default input and change event handlers.  In `q2-input` where `type="currency"` - element.value = 1234.56 - visible value: $1,234.56
          */
         "value"?: string;
+        /**
+          * Controls the number of trailing characters that remain visible when the field value is masked by `textHidden` or the visibility toggle. The element's `value` and emitted event details remain unmasked.
+         */
+        "visibleLastCount"?: number;
     }
     /**
      * @name Item
@@ -8436,7 +9239,7 @@ declare namespace LocalJSX {
      */
     interface Q2Modal {
         /**
-          * Controls visibility of the close button in the top right corner.
+          * Controls visibility of the close button and whether the modal can be dismissed with the backdrop or Escape key.
           * @default true
          */
         "closable"?: boolean;
@@ -8448,6 +9251,11 @@ declare namespace LocalJSX {
           * A plain text description of the modal. Use this to provide context or information to the user.
          */
         "description"?: string;
+        /**
+          * Whether the action buttons should take up the full width of the modal footer.
+          * @default true
+         */
+        "fullWidthButton"?: boolean;
         /**
           * The icon to display at the top of the modal. [See Icon documentation](https://tecton.q2developer.com/design-system/q2-icon).
          */
@@ -8456,6 +9264,10 @@ declare namespace LocalJSX {
           * An image URL to be displayed beneath the title. It renders with 100% width.
          */
         "imageSrc"?: string;
+        /**
+          * Emitted when the modal backdrop is clicked.
+         */
+        "onTctBackdropClick"?: (event: Q2ModalCustomEvent<undefined>) => void;
         /**
           * Emitted when one of action buttons is clicked.
          */
@@ -9035,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;
@@ -9088,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;
@@ -9116,6 +9930,17 @@ declare namespace LocalJSX {
           * Appends "(optional)" to the group label, and sets `aria-required` on the nested input tag to `false`.
          */
         "optional"?: boolean;
+        /**
+          * The layout direction of radio options when `tileLayout` is not enabled.
+          * @default 'vertical'
+         */
+        "orientation"?: 'vertical' | 'horizontal';
+        /**
+          * The width, in pixels, below which a horizontal non-tile layout displays vertically.
+          * @info The component determines this based on its own width, not the browser window.
+          * @default 440
+         */
+        "orientationThreshold"?: number;
         /**
           * Determines if all radios in the group can be focused, but not interacted with.
          */
@@ -9225,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;
@@ -9235,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;
@@ -9413,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;
         /**
@@ -9429,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;
@@ -9504,6 +10331,7 @@ declare namespace LocalJSX {
         "readonly"?: boolean;
         /**
           * Enables search functionality.
+          * @warning `searchable` is not compatible with the `hoist` prop. The action sheet workflow used when `hoist` is `true` does not support in-list search filtering. If both are set, `searchable` has no effect while the action sheet is active.
           * @default false
          */
         "searchable"?: boolean;
@@ -9890,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;
         /**
@@ -9906,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;
@@ -10139,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'
@@ -10201,7 +11034,15 @@ declare namespace LocalJSX {
         "cardHolder": string;
         "cardHolderLabel": boolean;
         "cardNumber": string;
-        "cardStatus": 'digital' | 'enabled' | 'disabled' | 'locked' | 'damaged' | 'lost' | 'stolen' | 'lost or stolen';
+        "cardStatus": | 'digital'
+        | 'enabled'
+        | 'new'
+        | 'disabled'
+        | 'locked'
+        | 'damaged'
+        | 'lost'
+        | 'stolen'
+        | 'lost or stolen';
         "cardType": 'atm' | 'debit';
         "cardTypeColor": 'black' | 'white';
         "chip": 'gold' | 'silver';
@@ -10355,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';
@@ -10420,10 +11316,12 @@ declare namespace LocalJSX {
         "buttonSize": 'none' | 'small' | 'medium' | 'large';
         "description": string;
         "disabled": boolean;
+        "ellipsizeFileName": boolean;
         "fileTypes": string[] | string;
         "label": string;
         "maxFiles": number;
         "maxFileSize": number;
+        "showGradient": boolean;
         "variant": 'browse' | 'browse-drop';
     }
     interface Q2FormAttributes {
@@ -10522,6 +11420,7 @@ declare namespace LocalJSX {
         "type": string;
     }
     interface Q2InputAttributes {
+        "_ariaDescription": string;
         "_preventEntry": boolean;
         "_role": 'combobox' | undefined;
         "_updateValueOnInput": boolean;
@@ -10562,6 +11461,7 @@ declare namespace LocalJSX {
         "type": InputType;
         "valid": boolean;
         "value": string;
+        "visibleLastCount": number;
     }
     interface Q2ItemAttributes {
         "clickable": boolean;
@@ -10635,6 +11535,7 @@ declare namespace LocalJSX {
         "closable": boolean;
         "customMarkup": string;
         "description": string;
+        "fullWidthButton": boolean;
         "icon": string;
         "imageSrc": string;
         "title": string;
@@ -10757,6 +11658,8 @@ declare namespace LocalJSX {
         "label": string;
         "name": string;
         "optional": boolean;
+        "orientation": 'vertical' | 'horizontal';
+        "orientationThreshold": number;
         "readonly": boolean;
         "tileAlignment": 'left' | 'center' | 'right';
         "tilelayout": boolean;
@@ -10965,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] };
@@ -11131,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