q2-tecton-elements 1.65.0 → 1.66.1

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

@@ -4,6 +4,8 @@ import { ComponentInterface } from '../../stencil-public-runtime';
  * @category Display
  * @summary Use for menus of contextual actions triggered by a button click.
  * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type="custom"` to use the control slot.
+ * @slot popover-top - An optional slot to display custom content persistently at the top of the q2-dropdown.
+ * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the q2-dropdown.
  */
 export declare class Q2Dropdown implements ComponentInterface {
     controlElement?: HTMLQ2BtnElement;
@@ -36,6 +38,8 @@ export declare class Q2Dropdown implements ComponentInterface {
     contextValue: string;
     /** Indicates the menu cannot be focused or interacted with. */
     disabled: boolean;
+    /** If `true`, it takes up 100% width. */
+    fullWidth: boolean;
     /**
      * Hide's the field's `<label>` element from view.
      * @warning
@@ -115,6 +119,13 @@ export declare class Q2Dropdown implements ComponentInterface {
     popoverStateChangeHandler({ detail: { open } }: CustomEvent<{
         open: boolean;
     }>): void;
+    /**
+     * Gets the outerHTML for top/bottom slotted elements.
+     */
+    _getSlotsHtml(): Promise<{
+        slot: string;
+        html: string;
+    }[]>;
     /**
      * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.
      * @testOnly
@@ -126,19 +137,27 @@ export declare class Q2Dropdown implements ComponentInterface {
      */
     openPopover(): Promise<void>;
     /**
-     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/).
+     * Emulates opening the dropdown and selecting a
+     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/) or
+     * [Option](https://tecton.q2developer.com/design-system/q2-option/).
      *
      * If the dropdown is closed, this will open it before selecting the item.
      *
-     * If the value does not match any item's value, this method does nothing.
+     * If the value does not match any item's value, or the dropdown is disabled, this method does nothing.
      * @testOnly
      */
     selectItem(value: string): Promise<void>;
     /**
-     * Emulates opening the dropdown and selecting a [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.
+     * Emulates opening the dropdown and selecting a
+     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.
+     *
+     * This method only applies to the deprecated `q2-dropdown-item` element, since
+     * `q2-option` (its replacement) does not support the `removable` attribute.
      *
      * If the dropdown is closed, this will open it before selecting the remove item button.
      *
+     * If the dropdown is disabled, this method does nothing.
+     *
      * Requirements for this method to work properly:
      * - Provided `value` matches the item's `value` property
      * - Item has the `removable` property enabled

package/dist/types/components/q2-grid-area/q2-grid-area.d.ts

@@ -11,6 +11,7 @@ export type TQ2GridAreaZIndexOptions = 'auto' | number;
  * @summary Use as a positioned cell within a Grid layout.
  */
 export declare class Q2GridArea {
+    hostElement: HTMLElement;
     /**
      * Sets the vertical alignment behavior of the q2-grid-area component within its grid track at the baseline viewport size.
      * When set to `auto`, the grid area will inherit this property from the parent q2-grid component.
@@ -164,6 +165,7 @@ export declare class Q2GridArea {
     xsZIndex: TQ2GridAreaZIndexOptions;
     /** Sets the z-index of the grid area at the baseline viewport size.*/
     zIndex: TQ2GridAreaZIndexOptions;
+    componentWillLoad(): void;
     get computedLgZIndex(): TQ2GridAreaZIndexOptions;
     get computedMdZIndex(): TQ2GridAreaZIndexOptions;
     get computedSmZIndex(): TQ2GridAreaZIndexOptions;

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

@@ -250,9 +250,8 @@ export declare class Q2Input {
     change: EventEmitter<IEventDetail>;
     /**
      * Emitted when the field value is cleared.
-     *
-     * Requires the `clearable` prop to be set to `true`.
-     *
+     * Emitted with `{ source: 'input' }` when search text is cleared by keyboard.
+     * Emitted with `{ source: 'button' }` when search text is cleared by clicking clear icon.
      * @deprecated Use 'tctClear' instead
      */
     clear: EventEmitter<undefined>;
@@ -281,8 +280,8 @@ export declare class Q2Input {
     tctChange: EventEmitter<IEventDetail>;
     /**
      * Emitted when the field value is cleared.
-     *
-     * Requires the `clearable` prop to be set to `true`.
+     * Emitted with `{ source: 'input' }` when search text is cleared by keyboard.
+     * Emitted with `{ source: 'button' }` when search text is cleared by clicking clear icon.
      */
     tctClear: EventEmitter<undefined>;
     /**

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

@@ -2,7 +2,8 @@
  * @name Item
  * @category Display
  * @summary Use for laying out structured content with header, body, and footer text, icons, and actions.
- * @slot bullet - An optional slot to display custom content in the bullet area.
+ * @slot decorator - An optional slot to display custom content in the decorator area.
+ * Supports either [Icon](https://tecton.q2developer.com/design-system/q2-icon/) or [Avatar](https://tecton.q2developer.com/design-system/q2-avatar/).
  * Use this to provide a visual indicator or icon for your item.
  *
  * @slot header - An optional slot to display custom content in the header area.
@@ -12,7 +13,7 @@
  * Use this to provide the main content of your item.
  *
  * @slot action - An optional slot to display custom content in the action area.
- * Use this to provide buttons or interactive elements related to the item.
+ * Supports buttons, checkboxes, dropdowns, or other interactive elements related to the item.
  *
  * @slot footer - An optional slot to display custom content in the footer area.
  * Use this to provide additional information or actions related to the item.
@@ -27,11 +28,11 @@ export declare class Q2Item {
     componentDidLoad(): void;
     delegateFocus(event: FocusEvent): void;
     get actionClasses(): string;
-    get bulletClasses(): string;
+    get decoratorClasses(): string;
     get footerClasses(): string;
     get hasActionSlotContent(): boolean;
     get hasBodySlotContent(): boolean;
-    get hasBulletSlotContent(): boolean;
+    get hasDecoratorSlotContent(): boolean;
     get hasFooterSlotContent(): boolean;
     get hasHeaderSlotContent(): boolean;
     get itemClasses(): string;

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

@@ -8,6 +8,10 @@ export declare class Q2Link implements ComponentInterface {
     hostElement: HTMLElement;
     /** Determines whether the component and `tctClick` event are disabled. */
     disabled: boolean;
+    /** If `true`, the label will be truncated with an ellipsis when it's too long. */
+    ellipsis: boolean;
+    /** If `true`, it takes up 100% width. */
+    fullWidth: boolean;
     /** The link when clicked. */
     href: string;
     /** The [q2-icon](https://tecton.q2developer.com/design-system/q2-icon/) to display when `variant` is set to "standalone". */

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

@@ -16,8 +16,12 @@ export declare class Q2Pagination implements ComponentInterface {
     resizeObserver: ResizeObserver;
     hostElement: HTMLElement;
     isSmall: boolean;
-    /** Indicates the horizontal alignment of pagination elements */
-    alignment: 'left' | 'center' | 'right';
+    /**
+     * Indicates the horizontal alignment of pagination elements
+     * @info
+     * When using the 'stacked' version, the default alignment is 'center'. When using the unstacked version, the default alignment is 'right'.
+     */
+    alignment?: 'left' | 'center' | 'right';
     /** Determines whether the component uses dynamic resizing behavior. This is disabled when `pagesOnly`, `recordsOnly`, or `stacked` is true. */
     autoSize: boolean;
     /** Allows the component to be disabled should the state of the page require this  */
@@ -49,7 +53,11 @@ export declare class Q2Pagination implements ComponentInterface {
     recordsOnly: boolean;
     /** Description of the record type to be displayed alongside the record count. */
     recordType: string;
-    /** Allows the component to be displayed in a stacked layout. This disables the `autoSize` feature. */
+    /**
+     * Allows the component to be displayed in a stacked layout. This disables the `autoSize` feature.
+     * @info
+     * When set to true, the default alignment will be 'center'. When false, the default alignment is 'right'.
+     */
     stacked: boolean;
     /** The total number of records to paginate. */
     total: number;

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

@@ -158,7 +158,6 @@ export declare class Q2Select implements ComponentInterface {
      * option values. Ignore the `tctVModel` property it's only included for Vue
      * v-model compatibility.
      *
-     * @deprecated Use 'tctChange' instead
      * @legacyEvent
      */
     tctChange: EventEmitter<{
@@ -182,7 +181,7 @@ export declare class Q2Select implements ComponentInterface {
         value: string;
         selectedOptions: string[];
     }>): void;
-    onClearHandler(): void;
+    onClearHandler(event: CustomEvent): void;
     handleSelectedDisplay(event: CustomEvent): void;
     delegateFocus(event: FocusEvent): void;
     handleFocusout(event: FocusEvent): void;

package/dist/types/components/q2-tab-pane/q2-tab-pane.d.ts

@@ -6,6 +6,7 @@ import { Q2Badge } from '../q2-badge/q2-badge';
  * @summary Use as a single tab within a Tab Container.
  */
 export declare class Q2TabPane implements ComponentInterface {
+    hostElement: HTMLElement;
     /** Adds a `q2-badge` component with the number provided right next to the tab pane label. */
     badgeCount: number;
     /**
@@ -49,6 +50,7 @@ export declare class Q2TabPane implements ComponentInterface {
      * @private
      */
     badge: EventEmitter<boolean>;
+    componentWillLoad(): void;
     badgeObserver(): void;
     render(): any;
 }

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

@@ -0,0 +1,67 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @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.
+ */
+export declare class Q2Toast implements ComponentInterface {
+    private autoCloseTimer?;
+    private closeAnimationTimeMs;
+    private closeTimer?;
+    hostElement: HTMLElement;
+    isClosing: boolean;
+    isOpen: boolean;
+    /** Enables automatic dismissal after a duration. */
+    autoClose: boolean;
+    /** Controls whether the close button is displayed. */
+    closable: boolean;
+    /** The duration in milliseconds before auto dismissal. */
+    duration: number;
+    /** Manually hide the icon where it would otherwise appear. */
+    hideIcon: boolean;
+    /** Optional icon type to display. */
+    icon: string;
+    /** Optional message for the toast body. */
+    message: string;
+    /**
+     * Convenience prop for persistent toasts. When true, sets autoClose to false and closable to true.
+     * Aligns with acceptance criteria for showPersistent behavior.
+     */
+    showPersistent: boolean;
+    /** Controls the visual size of the toast. */
+    size: 'large' | 'small';
+    /** Optional title for the toast. */
+    tctTitle: string;
+    /** Optional time marker for the footer. */
+    time: string;
+    /** The visual status of the toast. */
+    type: 'warning' | 'info' | 'alert' | 'success' | 'default' | 'error';
+    /** Emitted when the toast is dismissed. */
+    tctClose: EventEmitter<{
+        reason: 'close' | 'timeout';
+    }>;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    onAutoCloseChange(): void;
+    onShowPersistentChange(): void;
+    onSizeChange(): void;
+    get ariaLive(): 'assertive' | 'polite';
+    get ariaRole(): 'alert' | 'status';
+    get hasIconSlot(): boolean;
+    get isLarge(): boolean;
+    get resolvedIcon(): string;
+    get resolvedType(): 'warning' | 'info' | 'alert' | 'success' | 'default';
+    get shouldShowIcon(): boolean;
+    get showFooter(): boolean;
+    get srTypeLabel(): string;
+    get toastClasses(): string;
+    clearAutoClose(): void;
+    clearCloseTimer(): void;
+    dismiss(reason: 'close' | 'timeout'): void;
+    onCloseClick: () => void;
+    startAutoClose(): void;
+    renderIcon(): any;
+    render(): any;
+}