q2-tecton-elements 1.69.1 → 1.70.0

package/dist/types/components/q2-search/q2-search.d.ts

@@ -188,6 +188,7 @@ export declare class Q2Search implements ComponentInterface {
     onSearchTextChange(): void;
     buildStructuredSelectedOptions(): void;
     get badgeValue(): string | null;
+    get firstSelectedOptionElement(): HTMLQ2OptionElement | null;
     get innerInputContainer(): HTMLElement | null;
     get innerInputField(): HTMLInputElement | null;
     /**
@@ -199,13 +200,16 @@ export declare class Q2Search implements ComponentInterface {
     get optionElements(): HTMLQ2OptionElement[];
     get optionListId(): string;
     get popoverMinHeight(): number;
+    get selectedDisplaySlot(): HTMLElement | null;
     get visibleOptionElements(): HTMLQ2OptionElement[];
     get wrapperClasses(): string;
     announceResults(): void;
     applyLocalFilter(): void;
     applyMultilineOptions(): void;
+    checkSelectedDisplay(): HTMLElement | null;
     checkSelectedOptions(): void;
     clearAll: () => void;
+    clearSelectedDisplay(): null;
     closeDropdown(): void;
     getResolvedPopoverWidth(): number | null;
     handleSelectionChanges: (detail: {
@@ -220,14 +224,17 @@ export declare class Q2Search implements ComponentInterface {
         value: string;
         values: OptionValue[];
     }>) => void;
+    onSelectedDisplayMousedown: (event: MouseEvent) => void;
     onViewportResize: () => void;
     openDropdown(): void;
+    optionDisplayText(option: HTMLQ2OptionElement | undefined, fallback?: string): string;
     revertToSelectedDisplay(): void;
     setCustomLabel(): void;
     setStatusMessage(message: string): void;
     shouldUseBlockFallback(): boolean;
     showAllOptions: () => void;
     showSelectedOptions: () => void;
+    renderCustomDisplay(): any;
     renderEmpty(): any;
     renderMultiSelectHeader(): any;
     renderOptionsDropdown(): any;

package/dist/types/components/q2-search/test/q2-search-test.vr.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/q2-select/q2-select.d.ts

@@ -121,6 +121,8 @@ export declare class Q2Select implements ComponentInterface {
      * This property is only relevant for `multiple` (i.e., multi-select) implementations.
      */
     selectedOptions: string[];
+    /** Determines whether to show a success state. The error state takes precedence when both are set. */
+    valid: boolean;
     /**
      * The current value for the select. This should correspond to the value of a nested q2-option element.
      * This property is only relevant for single-select implementations.
@@ -283,6 +285,8 @@ export declare class Q2Select implements ComponentInterface {
         open: boolean;
         action: "close" | "select" | "open";
     }>) => void;
+    onSelectedDisplayClick: (event: MouseEvent) => void;
+    onSelectedDisplayMousedown: (event: MouseEvent) => void;
     openDropdownWithoutActiveElement(): void;
     removeTouchEventListeners: () => void;
     setCustomLabel(): void;

package/dist/types/components/q2-stepper-vertical/q2-stepper-vertical.d.ts

@@ -62,7 +62,7 @@ export declare class Q2StepperVertical implements ComponentInterface {
     get allRootPanes(): HTMLQ2StepperPaneElement[];
     buildPaneList: () => void;
     determinePaneChanges: (mutations: MutationRecord[]) => void;
-    extractDetails(pane: HTMLQ2StepperPaneElement): {
+    extractDetails: (pane: HTMLQ2StepperPaneElement) => {
         id: string;
         label: string;
         description: string;
@@ -70,6 +70,7 @@ export declare class Q2StepperVertical implements ComponentInterface {
         disabled: boolean;
     };
     focusStepBtn(stepId: string, forceFocus?: boolean): void;
+    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label'): string;
     getStepId(currentStepId: string, goTo: string): string;
     onStepClick: (event: any, stepId: string) => void;
     onStepKeyDown: (event: KeyboardEvent, stepId: string) => void;

package/dist/types/components/q2-surface/q2-surface.d.ts

@@ -0,0 +1,54 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @name Surface
+ * @category Display
+ * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
+ */
+export declare class Q2Surface implements ComponentInterface {
+    private _cancelAnimation;
+    hostElement: HTMLElement;
+    /** Applies a background color from the design-system token palette. When unset, the surface is transparent. */
+    background?: 'default' | 'primary' | 'secondary' | 'tertiary';
+    /** Applies a gradient fade across the background.
+     *
+     * @info Direction and colors are customizable via CSS custom properties. */
+    backgroundGradient: boolean;
+    /** Renders a visible border around the surface, optionally in a themed color. */
+    border?: 'default' | 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
+     *
+     * @info Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color.
+     */
+    borderGradient: boolean;
+    /** Makes the surface interactive, responding to clicks.
+     *
+     * @info Emits `tctClick` when clicked. */
+    clickable: boolean;
+    /** Gives the component a drop shadow.
+     *
+     * @info 0 means no shadow; higher values appear more elevated. */
+    elevation: 0 | 1 | 2 | 3 | 4 | 5;
+    /** Adds internal padding applied uniformly on all sides.
+     *
+     * @info Individual axes can be overridden with `inset-x` and `inset-y`. */
+    inset: 'none' | 'compact' | 'normal' | 'comfortable';
+    /** Adds horizontal padding, overriding the horizontal component of `inset`. */
+    insetX?: 'none' | 'compact' | 'normal' | 'comfortable';
+    /** Adds vertical padding, overriding the vertical component of `inset`. */
+    insetY?: 'none' | 'compact' | 'normal' | 'comfortable';
+    /** Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded). */
+    radius: 0 | 1 | 2 | 3 | 4 | 5;
+    /** Emitted when the surface is clicked and `clickable` is true. */
+    tctClick: EventEmitter<void>;
+    disconnectedCallback(): void;
+    onClick(): void;
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Triggers a named animation on the surface. If an animation is already running, cancels it before starting the new one.
+     * @param animation The animation to play. Defaults to `'pulse'`.
+     * @returns A Promise that resolves when the animation finishes or is cancelled.
+     */
+    animate(animation?: 'bounce' | 'flash' | 'pulse' | 'tada'): Promise<void>;
+    render(): any;
+}

package/dist/types/components/q2-surface/test/q2-surface-test.vr.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/q2-toast/q2-toast.d.ts

@@ -1,8 +1,10 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 /**
+ * @name Toast
+ * @category Platform
+ * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
  * @slot icon - Optional slot for a custom icon.
  * @slot title - Optional slot for the title content.
- * @slot - Optional slot for the message content.
  * @slot time - Optional slot for the time marker.
  * @slot actions - Optional slot for action links in the footer.
  */

package/dist/types/components.d.ts

@@ -211,6 +211,7 @@ export namespace Components {
         "loading": boolean;
         /**
           * Defines the size of q2-btn, it renders as default size if not provided.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         "tabIndex": number;
@@ -381,6 +382,11 @@ export namespace Components {
           * The user can type in the field. Only available in desktop browsers.
          */
         "typeable": boolean;
+        /**
+          * Show success styles when the calendar is in a valid state. The error state takes precedence when both are set.
+          * @default false
+         */
+        "valid": boolean;
         /**
           * Defines an explicit date whitelist.
           * @warning Must be a valid ISO date string.
@@ -472,10 +478,6 @@ export namespace Components {
      * that adapts content visibility based on container width.
      */
     interface Q2CardImage {
-        /**
-          * Accessible label for the card image. When provided, this value is applied as `aria-label` on either the card container (non-clickable) or the wrapping button (clickable).
-         */
-        "accessibilityLabel"?: string;
         /**
           * Background style for the base layer. - `'primary'` | `'secondary'` | `'tertiary'`: Solid theme colors - `'gradient'`: Grayscale gradient (themable via CSS variables) - Custom string: URL/path to an image file (SVG, PNG, JPG)
           * @default 'primary'
@@ -551,6 +553,10 @@ export namespace Components {
           * Overrides the default status banner text (which is the cardStatus value in uppercase). Maximum 14 characters (including spaces) to ensure the text fits within the banner.
          */
         "statusTextOverride"?: string;
+        /**
+          * Accessible label for the card image. When provided, this value is applied as `aria-label` on either the card container (non-clickable) or the wrapping button (clickable).
+         */
+        "tctAriaLabel"?: string;
         /**
           * The card vendor. Renders the vendor logo in the bottom-right of the card. Not rendered at tiny size.
          */
@@ -2234,6 +2240,11 @@ export namespace Components {
           * @default 'text'
          */
         "type": InputType;
+        /**
+          * Displays a success state icon when the field does not have active errors.
+          * @default false
+         */
+        "valid": boolean;
         /**
           * Returns a read-only `ValidityState` object representing the validity states of the element. [See MDN for more information on ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
          */
@@ -2420,6 +2431,12 @@ export namespace Components {
      * @summary Use for displaying localized text from translation keys.
      */
     interface Q2Loc {
+        /**
+          * When true, allows HTML tags in the localized string to be rendered as HTML.
+          * @warning Only use this with trusted localization strings, as it uses innerHTML and may expose XSS vulnerabilities. See the FAQ "Can I add HTML to my localization strings?" for usage guidance.
+          * @default false
+         */
+        "ignoreTag": boolean;
         /**
           * Any substitutions you would like to pass into the localization string.
          */
@@ -2531,7 +2548,7 @@ export namespace Components {
     }
     /**
      * @name Modal
-     * @category Display
+     * @category Platform
      * @summary Use for focused interactions that require user attention before continuing.
      */
     interface Q2Modal {
@@ -3581,6 +3598,11 @@ export namespace Components {
           * @testOnly
          */
         "setValue": (values: string | string[], options?: { closePopover?: boolean; }) => Promise<void>;
+        /**
+          * Determines whether to show a success state. The error state takes precedence when both are set.
+          * @default false
+         */
+        "valid": boolean;
         /**
           * The current value for the select. This should correspond to the value of a nested q2-option element. This property is only relevant for single-select implementations.
          */
@@ -3663,6 +3685,70 @@ export namespace Components {
          */
         "selectStep": (stepId: string) => Promise<void>;
     }
+    /**
+     * @name Surface
+     * @category Display
+     * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
+     */
+    interface Q2Surface {
+        /**
+          * Triggers a named animation on the surface. If an animation is already running, cancels it before starting the new one.
+          * @param animation The animation to play. Defaults to `'pulse'`.
+          * @returns A Promise that resolves when the animation finishes or is cancelled.
+         */
+        "animate": (animation?: "bounce" | "flash" | "pulse" | "tada") => Promise<void>;
+        /**
+          * Applies a background color from the design-system token palette. When unset, the surface is transparent.
+         */
+        "background"?: 'default' | 'primary' | 'secondary' | 'tertiary';
+        /**
+          * Applies a gradient fade across the background.
+          * @info Direction and colors are customizable via CSS custom properties.
+          * @default false
+         */
+        "backgroundGradient": boolean;
+        /**
+          * Renders a visible border around the surface, optionally in a themed color.
+         */
+        "border"?: 'default' | 'primary' | 'secondary' | 'tertiary';
+        /**
+          * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
+          * @info Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color.
+          * @default false
+         */
+        "borderGradient": boolean;
+        /**
+          * Makes the surface interactive, responding to clicks.
+          * @info Emits `tctClick` when clicked.
+          * @default false
+         */
+        "clickable": boolean;
+        /**
+          * Gives the component a drop shadow.
+          * @info 0 means no shadow; higher values appear more elevated.
+          * @default 0
+         */
+        "elevation": 0 | 1 | 2 | 3 | 4 | 5;
+        /**
+          * Adds internal padding applied uniformly on all sides.
+          * @info Individual axes can be overridden with `inset-x` and `inset-y`.
+          * @default 'none'
+         */
+        "inset": 'none' | 'compact' | 'normal' | 'comfortable';
+        /**
+          * Adds horizontal padding, overriding the horizontal component of `inset`.
+         */
+        "insetX"?: 'none' | 'compact' | 'normal' | 'comfortable';
+        /**
+          * Adds vertical padding, overriding the vertical component of `inset`.
+         */
+        "insetY"?: 'none' | 'compact' | 'normal' | 'comfortable';
+        /**
+          * Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded).
+          * @default 0
+         */
+        "radius": 0 | 1 | 2 | 3 | 4 | 5;
+    }
     /**
      * @name Tab Container
      * @category Display
@@ -3894,6 +3980,11 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @name Toast
+     * @category Platform
+     * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
+     */
     interface Q2Toast {
         /**
           * Enables automatic dismissal after a duration.
@@ -4163,6 +4254,10 @@ export interface Q2StepperVerticalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2StepperVerticalElement;
 }
+export interface Q2SurfaceCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLQ2SurfaceElement;
+}
 export interface Q2TabContainerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLQ2TabContainerElement;
@@ -4932,7 +5027,7 @@ declare global {
     }
     /**
      * @name Modal
-     * @category Display
+     * @category Platform
      * @summary Use for focused interactions that require user attention before continuing.
      */
     interface HTMLQ2ModalElement extends Components.Q2Modal, HTMLStencilElement {
@@ -5386,6 +5481,34 @@ declare global {
         prototype: HTMLQ2StepperVerticalElement;
         new (): HTMLQ2StepperVerticalElement;
     };
+    interface HTMLQ2SurfaceElementEventMap {
+        "tctClick": void;
+    }
+    /**
+     * @name Surface
+     * @category Display
+     * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
+     */
+    interface HTMLQ2SurfaceElement extends Omit<Components.Q2Surface, "animate">, HTMLStencilElement {
+        /**
+          * Triggers a named animation on the surface. If an animation is already running, cancels it before starting the new one.
+          * @param animation The animation to play. Defaults to `'pulse'`.
+          * @returns A Promise that resolves when the animation finishes or is cancelled.
+         */
+        "animate": (animation?: "bounce" | "flash" | "pulse" | "tada") => Promise<void>;
+        addEventListener<K extends keyof HTMLQ2SurfaceElementEventMap>(type: K, listener: (this: HTMLQ2SurfaceElement, ev: Q2SurfaceCustomEvent<HTMLQ2SurfaceElementEventMap[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 HTMLQ2SurfaceElementEventMap>(type: K, listener: (this: HTMLQ2SurfaceElement, ev: Q2SurfaceCustomEvent<HTMLQ2SurfaceElementEventMap[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 HTMLQ2SurfaceElement: {
+        prototype: HTMLQ2SurfaceElement;
+        new (): HTMLQ2SurfaceElement;
+    };
     interface HTMLQ2TabContainerElementEventMap {
         "change": { value: string };
         "settled": undefined;
@@ -5483,6 +5606,11 @@ declare global {
     interface HTMLQ2ToastElementEventMap {
         "tctClose": { reason: 'close' | 'timeout' };
     }
+    /**
+     * @name Toast
+     * @category Platform
+     * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
+     */
     interface HTMLQ2ToastElement extends Components.Q2Toast, HTMLStencilElement {
         addEventListener<K extends keyof HTMLQ2ToastElementEventMap>(type: K, listener: (this: HTMLQ2ToastElement, ev: Q2ToastCustomEvent<HTMLQ2ToastElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5587,6 +5715,7 @@ declare global {
         "q2-stepper": HTMLQ2StepperElement;
         "q2-stepper-pane": HTMLQ2StepperPaneElement;
         "q2-stepper-vertical": HTMLQ2StepperVerticalElement;
+        "q2-surface": HTMLQ2SurfaceElement;
         "q2-tab-container": HTMLQ2TabContainerElement;
         "q2-tab-pane": HTMLQ2TabPaneElement;
         "q2-tag": HTMLQ2TagElement;
@@ -5800,6 +5929,7 @@ declare namespace LocalJSX {
         "onTctClick"?: (event: Q2BtnCustomEvent<any>) => void;
         /**
           * Defines the size of q2-btn, it renders as default size if not provided.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         "tabIndex"?: number;
@@ -5990,6 +6120,11 @@ declare namespace LocalJSX {
           * The user can type in the field. Only available in desktop browsers.
          */
         "typeable"?: boolean;
+        /**
+          * Show success styles when the calendar is in a valid state. The error state takes precedence when both are set.
+          * @default false
+         */
+        "valid"?: boolean;
         /**
           * Defines an explicit date whitelist.
           * @warning Must be a valid ISO date string.
@@ -6090,10 +6225,6 @@ declare namespace LocalJSX {
      * that adapts content visibility based on container width.
      */
     interface Q2CardImage {
-        /**
-          * Accessible label for the card image. When provided, this value is applied as `aria-label` on either the card container (non-clickable) or the wrapping button (clickable).
-         */
-        "accessibilityLabel"?: string;
         /**
           * Background style for the base layer. - `'primary'` | `'secondary'` | `'tertiary'`: Solid theme colors - `'gradient'`: Grayscale gradient (themable via CSS variables) - Custom string: URL/path to an image file (SVG, PNG, JPG)
           * @default 'primary'
@@ -6181,6 +6312,10 @@ declare namespace LocalJSX {
           * Overrides the default status banner text (which is the cardStatus value in uppercase). Maximum 14 characters (including spaces) to ensure the text fits within the banner.
          */
         "statusTextOverride"?: string;
+        /**
+          * Accessible label for the card image. When provided, this value is applied as `aria-label` on either the card container (non-clickable) or the wrapping button (clickable).
+         */
+        "tctAriaLabel"?: string;
         /**
           * The card vendor. Renders the vendor logo in the bottom-right of the card. Not rendered at tiny size.
          */
@@ -7947,6 +8082,11 @@ declare namespace LocalJSX {
           * @default 'text'
          */
         "type"?: InputType;
+        /**
+          * Displays a success state icon when the field does not have active errors.
+          * @default false
+         */
+        "valid"?: boolean;
         /**
           * Returns a read-only `ValidityState` object representing the validity states of the element. [See MDN for more information on ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState).
          */
@@ -8160,6 +8300,12 @@ declare namespace LocalJSX {
      * @summary Use for displaying localized text from translation keys.
      */
     interface Q2Loc {
+        /**
+          * When true, allows HTML tags in the localized string to be rendered as HTML.
+          * @warning Only use this with trusted localization strings, as it uses innerHTML and may expose XSS vulnerabilities. See the FAQ "Can I add HTML to my localization strings?" for usage guidance.
+          * @default false
+         */
+        "ignoreTag"?: boolean;
         /**
           * Any substitutions you would like to pass into the localization string.
          */
@@ -8267,7 +8413,7 @@ declare namespace LocalJSX {
     }
     /**
      * @name Modal
-     * @category Display
+     * @category Platform
      * @summary Use for focused interactions that require user attention before continuing.
      */
     interface Q2Modal {
@@ -9348,6 +9494,11 @@ declare namespace LocalJSX {
           * @default []
          */
         "selectedOptions"?: string[];
+        /**
+          * Determines whether to show a success state. The error state takes precedence when both are set.
+          * @default false
+         */
+        "valid"?: boolean;
         /**
           * The current value for the select. This should correspond to the value of a nested q2-option element. This property is only relevant for single-select implementations.
          */
@@ -9473,6 +9624,68 @@ declare namespace LocalJSX {
         currentStepId: string;
     }>) => void;
     }
+    /**
+     * @name Surface
+     * @category Display
+     * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
+     */
+    interface Q2Surface {
+        /**
+          * Applies a background color from the design-system token palette. When unset, the surface is transparent.
+         */
+        "background"?: 'default' | 'primary' | 'secondary' | 'tertiary';
+        /**
+          * Applies a gradient fade across the background.
+          * @info Direction and colors are customizable via CSS custom properties.
+          * @default false
+         */
+        "backgroundGradient"?: boolean;
+        /**
+          * Renders a visible border around the surface, optionally in a themed color.
+         */
+        "border"?: 'default' | 'primary' | 'secondary' | 'tertiary';
+        /**
+          * Renders the border as a gradient using the color set by the `border` prop. Takes precedence over a solid `border` when both are set.
+          * @info Requires `border` to be set to produce a colored gradient. Without `border`, falls back to the default border color.
+          * @default false
+         */
+        "borderGradient"?: boolean;
+        /**
+          * Makes the surface interactive, responding to clicks.
+          * @info Emits `tctClick` when clicked.
+          * @default false
+         */
+        "clickable"?: boolean;
+        /**
+          * Gives the component a drop shadow.
+          * @info 0 means no shadow; higher values appear more elevated.
+          * @default 0
+         */
+        "elevation"?: 0 | 1 | 2 | 3 | 4 | 5;
+        /**
+          * Adds internal padding applied uniformly on all sides.
+          * @info Individual axes can be overridden with `inset-x` and `inset-y`.
+          * @default 'none'
+         */
+        "inset"?: 'none' | 'compact' | 'normal' | 'comfortable';
+        /**
+          * Adds horizontal padding, overriding the horizontal component of `inset`.
+         */
+        "insetX"?: 'none' | 'compact' | 'normal' | 'comfortable';
+        /**
+          * Adds vertical padding, overriding the vertical component of `inset`.
+         */
+        "insetY"?: 'none' | 'compact' | 'normal' | 'comfortable';
+        /**
+          * Emitted when the surface is clicked and `clickable` is true.
+         */
+        "onTctClick"?: (event: Q2SurfaceCustomEvent<void>) => void;
+        /**
+          * Adds corner rounding on a scale from 0 (sharp) to 5 (most rounded).
+          * @default 0
+         */
+        "radius"?: 0 | 1 | 2 | 3 | 4 | 5;
+    }
     /**
      * @name Tab Container
      * @category Display
@@ -9729,6 +9942,11 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @name Toast
+     * @category Platform
+     * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
+     */
     interface Q2Toast {
         /**
           * Enables automatic dismissal after a duration.
@@ -9936,6 +10154,7 @@ declare namespace LocalJSX {
         "readonly": boolean;
         "startDate": string;
         "typeable": boolean;
+        "valid": boolean;
         "value": string | { toDate(): Date };
     }
     interface Q2CardAttributes {
@@ -9954,7 +10173,6 @@ declare namespace LocalJSX {
         "url": string;
     }
     interface Q2CardImageAttributes {
-        "accessibilityLabel": string;
         "background": 'primary' | 'secondary' | 'tertiary' | 'gradient' | string;
         "cardHolder": string;
         "cardHolderLabel": boolean;
@@ -9972,6 +10190,7 @@ declare namespace LocalJSX {
         "orientation": 'horizontal' | 'vertical';
         "overlay": 'dot' | string;
         "statusTextOverride": string;
+        "tctAriaLabel": string;
         "vendor": 'mastercard' | 'visa';
         "vendorColor": 'black' | 'brand' | 'white';
         "vendorLogo": string;
@@ -10315,6 +10534,7 @@ declare namespace LocalJSX {
         "step": number;
         "textHidden": boolean;
         "type": InputType;
+        "valid": boolean;
         "value": string;
     }
     interface Q2ItemAttributes {
@@ -10361,6 +10581,7 @@ declare namespace LocalJSX {
         "width": string;
     }
     interface Q2LocAttributes {
+        "ignoreTag": boolean;
         "value": string;
     }
     interface Q2MessageAttributes {
@@ -10580,6 +10801,7 @@ declare namespace LocalJSX {
         "popoverMode": 'legacy';
         "readonly": boolean;
         "searchable": boolean;
+        "valid": boolean;
         "value": string;
     }
     interface Q2StepperAttributes {
@@ -10598,6 +10820,18 @@ declare namespace LocalJSX {
     interface Q2StepperVerticalAttributes {
         "currentStepId": string;
     }
+    interface Q2SurfaceAttributes {
+        "background": 'default' | 'primary' | 'secondary' | 'tertiary';
+        "backgroundGradient": boolean;
+        "border": 'default' | 'primary' | 'secondary' | 'tertiary';
+        "borderGradient": boolean;
+        "clickable": boolean;
+        "elevation": 0 | 1 | 2 | 3 | 4 | 5;
+        "inset": 'none' | 'compact' | 'normal' | 'comfortable';
+        "insetX": 'none' | 'compact' | 'normal' | 'comfortable';
+        "insetY": 'none' | 'compact' | 'normal' | 'comfortable';
+        "radius": 0 | 1 | 2 | 3 | 4 | 5;
+    }
     interface Q2TabContainerAttributes {
         "color": 'alt' | undefined;
         "name": string;
@@ -10746,6 +10980,7 @@ declare namespace LocalJSX {
         "q2-stepper": Omit<Q2Stepper, keyof Q2StepperAttributes> & { [K in keyof Q2Stepper & keyof Q2StepperAttributes]?: Q2Stepper[K] } & { [K in keyof Q2Stepper & keyof Q2StepperAttributes as `attr:${K}`]?: Q2StepperAttributes[K] } & { [K in keyof Q2Stepper & keyof Q2StepperAttributes as `prop:${K}`]?: Q2Stepper[K] };
         "q2-stepper-pane": Omit<Q2StepperPane, keyof Q2StepperPaneAttributes> & { [K in keyof Q2StepperPane & keyof Q2StepperPaneAttributes]?: Q2StepperPane[K] } & { [K in keyof Q2StepperPane & keyof Q2StepperPaneAttributes as `attr:${K}`]?: Q2StepperPaneAttributes[K] } & { [K in keyof Q2StepperPane & keyof Q2StepperPaneAttributes as `prop:${K}`]?: Q2StepperPane[K] };
         "q2-stepper-vertical": Omit<Q2StepperVertical, keyof Q2StepperVerticalAttributes> & { [K in keyof Q2StepperVertical & keyof Q2StepperVerticalAttributes]?: Q2StepperVertical[K] } & { [K in keyof Q2StepperVertical & keyof Q2StepperVerticalAttributes as `attr:${K}`]?: Q2StepperVerticalAttributes[K] } & { [K in keyof Q2StepperVertical & keyof Q2StepperVerticalAttributes as `prop:${K}`]?: Q2StepperVertical[K] };
+        "q2-surface": Omit<Q2Surface, keyof Q2SurfaceAttributes> & { [K in keyof Q2Surface & keyof Q2SurfaceAttributes]?: Q2Surface[K] } & { [K in keyof Q2Surface & keyof Q2SurfaceAttributes as `attr:${K}`]?: Q2SurfaceAttributes[K] } & { [K in keyof Q2Surface & keyof Q2SurfaceAttributes as `prop:${K}`]?: Q2Surface[K] };
         "q2-tab-container": Omit<Q2TabContainer, keyof Q2TabContainerAttributes> & { [K in keyof Q2TabContainer & keyof Q2TabContainerAttributes]?: Q2TabContainer[K] } & { [K in keyof Q2TabContainer & keyof Q2TabContainerAttributes as `attr:${K}`]?: Q2TabContainerAttributes[K] } & { [K in keyof Q2TabContainer & keyof Q2TabContainerAttributes as `prop:${K}`]?: Q2TabContainer[K] };
         "q2-tab-pane": Omit<Q2TabPane, keyof Q2TabPaneAttributes> & { [K in keyof Q2TabPane & keyof Q2TabPaneAttributes]?: Q2TabPane[K] } & { [K in keyof Q2TabPane & keyof Q2TabPaneAttributes as `attr:${K}`]?: Q2TabPaneAttributes[K] } & { [K in keyof Q2TabPane & keyof Q2TabPaneAttributes as `prop:${K}`]?: Q2TabPane[K] };
         "q2-tag": Omit<Q2Tag, keyof Q2TagAttributes> & { [K in keyof Q2Tag & keyof Q2TagAttributes]?: Q2Tag[K] } & { [K in keyof Q2Tag & keyof Q2TagAttributes as `attr:${K}`]?: Q2TagAttributes[K] } & { [K in keyof Q2Tag & keyof Q2TagAttributes as `prop:${K}`]?: Q2Tag[K] };
@@ -10987,7 +11222,7 @@ declare module "@stencil/core" {
             "q2-meter": LocalJSX.IntrinsicElements["q2-meter"] & JSXBase.HTMLAttributes<HTMLQ2MeterElement>;
             /**
              * @name Modal
-             * @category Display
+             * @category Platform
              * @summary Use for focused interactions that require user attention before continuing.
              */
             "q2-modal": LocalJSX.IntrinsicElements["q2-modal"] & JSXBase.HTMLAttributes<HTMLQ2ModalElement>;
@@ -11106,6 +11341,12 @@ declare module "@stencil/core" {
              * @summary Use for guiding users through a multi-step workflow with vertical progress.
              */
             "q2-stepper-vertical": LocalJSX.IntrinsicElements["q2-stepper-vertical"] & JSXBase.HTMLAttributes<HTMLQ2StepperVerticalElement>;
+            /**
+             * @name Surface
+             * @category Display
+             * @summary An unopinionated visual primitive. A plain block by default that gains visual treatment via attributes.
+             */
+            "q2-surface": LocalJSX.IntrinsicElements["q2-surface"] & JSXBase.HTMLAttributes<HTMLQ2SurfaceElement>;
             /**
              * @name Tab Container
              * @category Display
@@ -11130,6 +11371,11 @@ declare module "@stencil/core" {
              * @summary Use for multi-line text input like messages, comments, or lengthy descriptions.
              */
             "q2-textarea": LocalJSX.IntrinsicElements["q2-textarea"] & JSXBase.HTMLAttributes<HTMLQ2TextareaElement>;
+            /**
+             * @name Toast
+             * @category Platform
+             * @summary Use for brief, non-intrusive notifications that appear temporarily and do not require user interaction.
+             */
             "q2-toast": LocalJSX.IntrinsicElements["q2-toast"] & JSXBase.HTMLAttributes<HTMLQ2ToastElement>;
             /**
              * @name Tooltip