q2-tecton-elements 1.71.2 → 1.72.0

package/dist/types/components/q2-radio-group/q2-radio-group.d.ts

@@ -1,3 +1,4 @@
+import { Q2ResizeObserverCustomEvent } from "../../components";
 import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 /**
  * @name Radio Group
@@ -9,6 +10,7 @@ export declare class Q2RadioGroup implements ComponentInterface {
     _id: string;
     mutationObserver: MutationObserver;
     hostElement: HTMLElement;
+    responsiveOrientation: 'vertical' | 'horizontal';
     /** Determines if all radios in the group are put into a `disabled` state. */
     disabled: boolean;
     /** Determines if the component should display in an errant state. */
@@ -28,6 +30,14 @@ export declare class Q2RadioGroup implements ComponentInterface {
     name: string;
     /** 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. */
+    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.
+     */
+    orientationThreshold: number;
     /** Determines if all radios in the group can be focused, but not interacted with. */
     readonly: boolean;
     /** Provides alignment direction for tile-style radio group. */
@@ -70,9 +80,13 @@ export declare class Q2RadioGroup implements ComponentInterface {
     handleDeprecatedTilelayout(tilelayout: boolean): void;
     tileLayoutUpdated(tileLayout: boolean): void;
     valueUpdated(newVal: string): void;
+    get computedOrientation(): 'vertical' | 'horizontal';
     get inputId(): string;
     get radioElements(): HTMLQ2RadioElement[];
     checkedRadioExists: () => void;
+    handleResize: (event: Q2ResizeObserverCustomEvent<{
+        entries: ResizeObserverEntry[];
+    }>) => void;
     inputDom(): any;
     onInnerRadioChange: (event: CustomEvent) => void;
     onMutationObserved: () => void;

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

@@ -20,6 +20,7 @@ export declare class Q2Select implements ComponentInterface {
     originalSearchable: boolean;
     popoverElement?: HTMLQ2PopoverElement;
     popoverTopContainer?: HTMLDivElement;
+    removingSelectedDisplay: boolean;
     scheduledAfterRender: (() => void)[];
     statusMessageTimer: NodeJS.Timeout;
     hostElement: HTMLElement;
@@ -114,7 +115,12 @@ export declare class Q2Select implements ComponentInterface {
      * Takes priority over `optional` if both are `true`.
      */
     readonly: boolean;
-    /** Enables search functionality. */
+    /**
+     * 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.
+     */
     searchable: boolean;
     /**
      * Each item in this array should correspond to the value of a `q2-option` element.
@@ -229,7 +235,7 @@ export declare class Q2Select implements ComponentInterface {
     }): Promise<void>;
     ariaLabelObserver(): void;
     handleMultilineOptionsUpdate(newValue: any, oldValue: any): void;
-    openChanged(isOpen: boolean): void;
+    openChanged(isOpen: boolean, wasOpen?: boolean): void;
     searchableChanged(newVal: boolean): void;
     buildStructuredSelectedOptions(): void;
     valueUpdated(): void;

package/dist/types/components.d.ts

@@ -498,7 +498,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.
          */
@@ -1627,6 +1635,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 +1660,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 +2083,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 
@@ -2231,7 +2254,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 +2264,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 +2286,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 +2589,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 +2602,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).
          */
@@ -3186,6 +3218,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.
          */
@@ -3594,6 +3637,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;
@@ -5035,6 +5079,7 @@ declare global {
         new (): HTMLQ2MeterElement;
     };
     interface HTMLQ2ModalElementEventMap {
+        "tctBackdropClick": undefined;
         "tctClick": any;
         "tctClose": any;
         "tctOpen": any;
@@ -6254,7 +6299,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.
          */
@@ -7349,7 +7402,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 +7418,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 +7491,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 +7520,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 +7943,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 
@@ -8082,7 +8150,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 +8160,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 +8182,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 +8508,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 +8520,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 +8533,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.
          */
@@ -9116,6 +9197,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.
          */
@@ -9504,6 +9596,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;
@@ -10201,7 +10294,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';
@@ -10420,10 +10521,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 +10625,7 @@ declare namespace LocalJSX {
         "type": string;
     }
     interface Q2InputAttributes {
+        "_ariaDescription": string;
         "_preventEntry": boolean;
         "_role": 'combobox' | undefined;
         "_updateValueOnInput": boolean;
@@ -10562,6 +10666,7 @@ declare namespace LocalJSX {
         "type": InputType;
         "valid": boolean;
         "value": string;
+        "visibleLastCount": number;
     }
     interface Q2ItemAttributes {
         "clickable": boolean;
@@ -10635,6 +10740,7 @@ declare namespace LocalJSX {
         "closable": boolean;
         "customMarkup": string;
         "description": string;
+        "fullWidthButton": boolean;
         "icon": string;
         "imageSrc": string;
         "title": string;
@@ -10757,6 +10863,8 @@ declare namespace LocalJSX {
         "label": string;
         "name": string;
         "optional": boolean;
+        "orientation": 'vertical' | 'horizontal';
+        "orientationThreshold": number;
         "readonly": boolean;
         "tileAlignment": 'left' | 'center' | 'right';
         "tilelayout": boolean;

package/dist/types/utils/test/vr-helpers.d.ts

@@ -7,6 +7,8 @@ export declare const FONT_SCALE_PX = 17;
 export declare const FONT_SCALE_SUFFIX = "scaled-font-size";
 export interface SetupPageOptions {
     theme?: Theme;
+    /** Controls component motion during the test. Defaults to reduced for stable screenshots. */
+    motion?: 'normal' | 'reduced';
     /**
      * Bootstrap the localization system before Stencil hydrates. Pass `true` to install
      * a loc() that resolves the default en-US strings (accurate for components like

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "q2-tecton-elements",
-    "version": "1.71.2",
+    "version": "1.72.0",
     "description": "Q2 Tecton Custom Elements",
     "license": "MIT",
     "author": "Q2 Tecton Team",
@@ -63,7 +63,7 @@
     },
     "dependencies": {
         "@stencil/core": "~4.43.0",
-        "q2-tecton-common": "1.71.2",
+        "q2-tecton-common": "1.72.0",
         "swiper": "^12.1.2"
     },
     "devDependencies": {
@@ -85,5 +85,5 @@
         "rollup-plugin-istanbul": "^5.0.0"
     },
     "packageManager": "pnpm@10.27.0",
-    "gitHead": "7f59041ab15cbd3707d1b874babe55287419a019"
+    "gitHead": "58ab249f4500298654564c867104baf7ba7ceb52"
 }