q2-tecton-elements 1.67.2 → 1.68.0

package/dist/collection/components/q2-dropdown/q2-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-dropdown.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown/q2-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n/**\n * @name Dropdown\n * @category Display\n * @summary Use for menus of contextual actions triggered by a button click.\n * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type=\"custom\"` to use the control slot.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the q2-dropdown.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the q2-dropdown.\n */\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    optionList: HTMLQ2OptionListElement;\n    optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this._alignOptionStructure();\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) {\n            this.popoverElement?.scrollContainerTo({ top: 0 });\n        } else {\n            this.optionList.setActiveElement(null);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Gets the outerHTML for top/bottom slotted elements.\n     */\n    @Method()\n    async _getSlotsHtml() {\n        return [\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-top']`)).map(slot => ({\n                slot: 'top',\n                html: slot.outerHTML,\n            })),\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-bottom']`)).map(slot => ({\n                slot: 'bottom',\n                html: slot.outerHTML,\n            })),\n        ];\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/) or\n     * [Option](https://tecton.q2developer.com/design-system/q2-option/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, or the dropdown is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        const target = item ? itemBtn : option;\n        if (!target || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        target.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * This method only applies to the deprecated `q2-dropdown-item` element, since\n     * `q2-option` (its replacement) does not support the `removable` attribute.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * If the dropdown is disabled, this method does nothing.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _alignOptionStructure(elem: Element = this.hostElement) {\n        Array.from(elem.children).forEach(el => {\n            if (el.tagName === 'Q2-OPTION') {\n                el.setAttribute('_hide-selected-block', '');\n            } else if (el.tagName === 'Q2-OPTGROUP') {\n                this._alignOptionStructure(el);\n            }\n        });\n    }\n\n    _clickItem(value: string) {\n        if (!value || this.disabled) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n        option?.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLElement;\n        if (target.localName === 'q2-option-list') {\n            event.stopPropagation();\n        }\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = function () {\n                            return window.TectonElements?.navigateTo?.(\n                                menuItemData.featureName,\n                                menuItemData.moduleName,\n                                queryParams\n                            );\n                        };\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = function () {\n                            return window.TectonElements?.showOverpanel?.(\n                                `${menuItemData.featureName}.${menuItemData.moduleName}`,\n                                queryParams,\n                                undefined,\n                                true\n                            );\n                        };\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    tabIndex={0}\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <slot name=\"popover-top\" />\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <slot name=\"popover-bottom\" />\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-dropdown.js","sourceRoot":"","sources":["../../../../src/components/q2-dropdown/q2-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { shouldShowActionSheet, showActionSheetList } from '@/utils/action-sheet';\nimport { Component, ComponentInterface, Prop, Method, Element, Watch, h, Fragment, Listen } from '@stencil/core';\nimport {\n    handleAriaLabel,\n    handleRenamedProp,\n    isEventFromElement,\n    loc,\n    overrideFocus,\n    waitForNextPaint,\n} from 'src/utils';\n\n/**\n * @name Dropdown\n * @category Display\n * @summary Use for menus of contextual actions triggered by a button click.\n * @slot control - An optional slot to provide custom content as the clickable interface. The Dropdown **must** have `type=\"custom\"` to use the control slot.\n * @slot popover-top - An optional slot to display custom content persistently at the top of the q2-dropdown.\n * @slot popover-bottom - An optional slot to display custom content persistently at the bottom of the q2-dropdown.\n */\n@Component({ tag: 'q2-dropdown', shadow: true, styleUrl: 'q2-dropdown.scss' })\nexport class Q2Dropdown implements ComponentInterface {\n    // #region Own Properties\n\n    controlElement?: HTMLQ2BtnElement;\n    dropdownItemSelector: string = 'q2-dropdown-item:not([disabled]):not([separator])';\n    optionList: HTMLQ2OptionListElement;\n    optionSelector: string = 'q2-option:not([disabled]):not([separator])';\n    popoverElement?: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region Public Property API\n\n    @Prop({ reflect: true })\n    additionalContext: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    alignment: 'left' | 'right';\n\n    /** @deprecated */\n    @Prop({ reflect: true, mutable: true })\n    ariaLabel: string;\n\n    /** If `true`, component expands to fill the width of its parent element. */\n    @Prop({ reflect: true })\n    block: boolean;\n\n    /**\n     * Tells the outlet what the type of object being passed in as contextValue.\n     * This will allow for the hierarchy resolution logic to work to determine if an option should or should not be shown.\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    context: string;\n\n    /**\n     * Passes important information to the outlet (e.g., pass an account id that your platform can use to look up what module to show for that account type).\n     *\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    contextValue: string;\n\n    /** Indicates the menu cannot be focused or interacted with. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /** If `true`, it takes up 100% width. */\n    @Prop({ reflect: true })\n    fullWidth: boolean;\n\n    /**\n     * Hide's the field's `<label>` element from view.\n     * @warning\n     * Only use when a visible label is impractical.\n     */\n    @Prop({ reflect: true, mutable: true })\n    hideLabel: boolean;\n\n    /**\n     * Instructs the component to use the action sheet workflow for displaying its options.\n     *\n     * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).\n     */\n    @Prop()\n    hoist: boolean = !!window.Tecton?.useActionSheets;\n\n    /** The icon that will render within the toggle button. You may use any of the `q2-icon` types. */\n    @Prop({ reflect: true })\n    icon: string;\n\n    /**\n     * The text that appears within the button.\n     * @warning\n     * This property should not be used if the `type` is `icon`.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    label: string;\n\n    /**\n     * Identifies this menu as an outlet. Used in conjunction with context and, optionally, `contextValue`.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /**\n     * Determine whether the popover is open or closed.\n     *\n     * @readonly\n     */\n    @Prop({ reflect: true, mutable: true })\n    open: boolean;\n\n    /** Determines the label that is applied to the option list for accessibility purposes. */\n    @Prop()\n    optionListLabel: string;\n\n    /** @deprecated */\n    @Prop({ reflect: true })\n    popDirection: 'up' | 'down';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'left'; // being used in dropdown.scss\n\n    /**\n     * Force the direction of the popover dropdown when it opens.\n     * If no value is passed, the component will auto-detect the direction based on available space.\n     */\n    @Prop({ mutable: true })\n    popoverDirection: 'up' | 'down';\n\n    /**\n     * Force the maximum height of the popover. This value will be interpreted as pixels.\n     * If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.\n     */\n    @Prop()\n    popoverMaxHeight: number;\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number;\n\n    /**\n     * Determines the display mode of the popover.\n     *\n     * Providing a value of `legacy` instructs the popover to use absolute positioning instead of fixed positioning.\n     *\n     * @info\n     * This is a temporary solution to work around styling issues related to using fixed positioning for the popover\n     * when nested inside of elements with transform properties. This will be removed once the popover API is available\n     * for use.\n     */\n    @Prop({ mutable: true })\n    popoverMode: 'legacy' = null;\n\n    /**\n     * Use with `context` to tell the outlet where it appears. It will be matched with the appropriately configured module for that context.\n     * @info\n     * Only applicable when using `<q2-dropdown>` for outlets.\n     */\n    @Prop({ reflect: true })\n    resolvedType: string;\n\n    /** The type of button used as the menu toggle.\n     * @info\n     * Type must be \"custom\" to use the custom button slot.\n     */\n    @Prop({ reflect: true })\n    type: 'icon' | 'fab' | 'custom' | 'primary' | 'secondary' | 'neutral' = 'icon';\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad() {\n        this._alignOptionStructure();\n        this.popDirectionHandler();\n        this.alignmentHandler();\n        this.ariaLabelHandler();\n    }\n\n    componentDidLoad() {\n        this.orchestrateResolvedMenuItems();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusToggle();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateChangeHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (!open) {\n            this.popoverElement?.scrollContainerTo({ top: 0 });\n            this.optionList.setActiveElement(null);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Gets the outerHTML for top/bottom slotted elements.\n     */\n    @Method()\n    async _getSlotsHtml() {\n        return [\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-top']`)).map(slot => ({\n                slot: 'top',\n                html: slot.outerHTML,\n            })),\n            ...Array.from(this.hostElement.querySelectorAll(`[slot='popover-bottom']`)).map(slot => ({\n                slot: 'bottom',\n                html: slot.outerHTML,\n            })),\n        ];\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to hide the popover if it is showing.\n     * @testOnly\n     */\n    @Method()\n    async closePopover() {\n        if (!this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates clicking the dropdown `<button>` to show the popover if it is hidden.\n     * @testOnly\n     */\n    @Method()\n    async openPopover() {\n        if (this.open || this.disabled) return;\n        this._togglePopover();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/) or\n     * [Option](https://tecton.q2developer.com/design-system/q2-option/).\n     *\n     * If the dropdown is closed, this will open it before selecting the item.\n     *\n     * If the value does not match any item's value, or the dropdown is disabled, this method does nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        const itemBtn = item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item');\n        const target = item ? itemBtn : option;\n        if (!target || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        target.click();\n        await waitForNextPaint();\n    }\n\n    /**\n     * Emulates opening the dropdown and selecting a\n     * [Dropdown Item](https://tecton.q2developer.com/design-system/q2-dropdown-item/)'s *remove* button.\n     *\n     * This method only applies to the deprecated `q2-dropdown-item` element, since\n     * `q2-option` (its replacement) does not support the `removable` attribute.\n     *\n     * If the dropdown is closed, this will open it before selecting the remove item button.\n     *\n     * If the dropdown is disabled, this method does nothing.\n     *\n     * Requirements for this method to work properly:\n     * - Provided `value` matches the item's `value` property\n     * - Item has the `removable` property enabled\n     * @testOnly\n     */\n    @Method()\n    async selectRemoveItem(value: string) {\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const removeButton = item?.shadowRoot.querySelector<HTMLButtonElement>('.remove-dropdown-item');\n        if (!item || !removeButton || this.disabled) return;\n        if (!this.open) {\n            this.controlElement?.click();\n            await waitForNextPaint();\n        }\n        removeButton.click();\n        await waitForNextPaint();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('additionalContext')\n    additionalContextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('alignment')\n    alignmentHandler() {\n        handleRenamedProp(this, 'alignment', 'popoverAlignment');\n    }\n\n    @Watch('ariaLabel')\n    ariaLabelHandler() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('context')\n    contextHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('contextValue')\n    contextValueHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('name')\n    nameHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    @Watch('popDirection')\n    popDirectionHandler() {\n        handleRenamedProp(this, 'popDirection', 'popoverDirection');\n    }\n\n    @Watch('resolvedType')\n    resolvedTypeHandler() {\n        this.orchestrateResolvedMenuItems();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get determineDropdownItemCount() {\n        return this.hostElement.querySelectorAll(this.dropdownItemSelector).length;\n    }\n\n    get hasCustomControl() {\n        return !!this.hostElement.querySelector('[slot=control]');\n    }\n\n    get toggleButtonProps() {\n        const allowedIntents = ['primary', 'secondary', 'neutral'];\n        const allowedTypes = ['icon', 'fab', 'custom', ...allowedIntents];\n        const type = allowedTypes.includes(this.type) ? this.type : '';\n        const icon = type === 'icon';\n        const fab = type === 'fab';\n        const custom = type === 'custom';\n        let intent;\n        if (allowedIntents.includes(type)) {\n            intent = type === 'neutral' ? type : `workflow-${type}`;\n        }\n        const active = this.open;\n        const disabled = !!this.disabled;\n        const ariaExpanded = this.open;\n        const className = !icon && !fab && !intent ? 'unstyled' : '';\n\n        return {\n            icon,\n            fab,\n            intent,\n            active,\n            disabled,\n            ariaExpanded,\n            className,\n            custom,\n        };\n    }\n\n    _alignOptionStructure(elem: Element = this.hostElement) {\n        Array.from(elem.children).forEach(el => {\n            if (el.tagName === 'Q2-OPTION') {\n                el.setAttribute('_hide-selected-block', '');\n            } else if (el.tagName === 'Q2-OPTGROUP') {\n                this._alignOptionStructure(el);\n            }\n        });\n    }\n\n    _clickItem(value: string) {\n        if (!value || this.disabled) return;\n        const item = this.hostElement.querySelector<HTMLQ2DropdownItemElement>(\n            `${this.dropdownItemSelector}[value=\"${value}\"]`\n        );\n        const option = this.hostElement.querySelector<HTMLQ2OptionElement>(`${this.optionSelector}[value=\"${value}\"]`);\n        item?.shadowRoot.querySelector<HTMLButtonElement>('.dropdown-item')?.click();\n        option?.click();\n    }\n\n    async _handleActionSheet(event: MouseEvent | KeyboardEvent) {\n        const { value } = await showActionSheetList(this, event);\n        this._clickItem(value);\n        this.controlElement.focus();\n    }\n\n    _togglePopover() {\n        const { controlElement } = this;\n        if (!controlElement) return;\n        controlElement.click();\n        controlElement.focus();\n        controlElement.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    focusToggle = () => {\n        this.controlElement.focus();\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (this.popoverElement?.contains(relatedTarget)) return;\n        if (this.hostElement.contains(relatedTarget)) return;\n        this.open = false;\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLElement;\n        if (target.localName === 'q2-option-list') {\n            event.stopPropagation();\n        }\n        if (target.localName === 'click-elsewhere') {\n            event.stopPropagation();\n            const { popoverElement } = this;\n            if (!popoverElement) return;\n            popoverElement.open = false;\n        }\n    };\n\n    onPopoverState = (event: CustomEvent<{ open: boolean; action: string }>) => {\n        if (event.detail.open) return;\n        this.controlElement.focus();\n    };\n\n    onToggleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this)) {\n            this._handleActionSheet(event);\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    onToggleKeydown = async (event: KeyboardEvent) => {\n        const isTabMetaOrCtrl = event.metaKey || event.ctrlKey || event.key === 'Tab';\n        if (isTabMetaOrCtrl) return;\n\n        event.preventDefault();\n        this.popoverElement.controlElement = this.controlElement;\n        if (shouldShowActionSheet(this, event)) {\n            this._handleActionSheet(event);\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    orchestrateResolvedMenuItems() {\n        if (!this.name || !this.context) {\n            // this is only for contextual menu outlets\n            this.removeResolvedElements();\n            return;\n        }\n\n        this.resolveMenuItemElements()\n            .then(data => {\n                this.removeResolvedElements();\n                data.forEach(element => {\n                    this.hostElement.appendChild(element);\n                });\n            })\n            .catch(err => {\n                this.removeResolvedElements();\n                throw err;\n            });\n    }\n\n    removeResolvedElements() {\n        const resolvedElements = this.hostElement.querySelectorAll('q2-dropdown-item.resolved-menu-item');\n        resolvedElements.forEach(element => this.hostElement.removeChild(element));\n    }\n\n    resolveMenu() {\n        return (\n            this.name &&\n            window.TectonElements &&\n            window.TectonElements.resolveMenu(this.name, this.contextValue, this.resolvedType, this.additionalContext)\n        );\n    }\n\n    resolveMenuItemElements() {\n        return this.resolveMenu().then(datas => {\n            return datas.map(menuItemData => {\n                let onClickFn;\n                let queryParams;\n                if (menuItemData['tct-ctxid']) {\n                    queryParams = {};\n                    queryParams[menuItemData.contextIdParamName] = menuItemData['tct-ctxid'];\n                }\n\n                switch (menuItemData.action) {\n                    case 'navigateTo':\n                        onClickFn = function () {\n                            return window.TectonElements?.navigateTo?.(\n                                menuItemData.featureName,\n                                menuItemData.moduleName,\n                                queryParams\n                            );\n                        };\n                        break;\n                    case 'showOverpanel':\n                        onClickFn = function () {\n                            return window.TectonElements?.showOverpanel?.(\n                                `${menuItemData.featureName}.${menuItemData.moduleName}`,\n                                queryParams,\n                                undefined,\n                                true\n                            );\n                        };\n                        break;\n                }\n\n                const newDropdownItem = document.createElement('q2-dropdown-item');\n                newDropdownItem.setAttribute('value', menuItemData.itemLabel);\n                newDropdownItem.classList.add('resolved-menu-item');\n                newDropdownItem.textContent = menuItemData.itemLabel;\n                newDropdownItem.onclick = onClickFn;\n\n                return newDropdownItem;\n            });\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const btnProps = this.toggleButtonProps;\n        return (\n            <click-elsewhere\n                class={this.open ? 'dropdown-open' : ''}\n                onChange={this.onClickElsewhere}\n                test-id=\"dropdownContainer\"\n            >\n                <q2-btn\n                    tabIndex={0}\n                    ref={el => (this.controlElement = el)}\n                    class={btnProps.className}\n                    onClick={this.onToggleClick}\n                    onKeyDown={this.onToggleKeydown}\n                    fab={btnProps.fab}\n                    intent={btnProps.intent}\n                    onFocusout={this.handleFocusOut}\n                    active={btnProps.active}\n                    disabled={btnProps.disabled}\n                    ariaExpanded={`${!!btnProps.ariaExpanded}`}\n                    label={this.hideLabel && this.label ? loc(this.label) : undefined}\n                    hideLabel={this.hideLabel}\n                    ariaHasPopup=\"menu\"\n                    test-id=\"dropdownButton\"\n                    block={this.block}\n                    description={loc('tecton.element.dropdown.itemCount', [this.determineDropdownItemCount])}\n                >\n                    {this.hasCustomControl ? (\n                        <div\n                            test-id=\"dropdownControl\"\n                            class={btnProps.custom ? '' : 'hidden'}\n                        >\n                            <slot name=\"control\" />\n                        </div>\n                    ) : (\n                        <Fragment>\n                            {this.label && !this.hideLabel && (\n                                <span class=\"dropdown-button-text\">{loc(this.label)}</span>\n                            )}\n                            {this.icon ? <q2-icon type={this.icon} /> : ' '}\n                        </Fragment>\n                    )}\n                </q2-btn>\n                <q2-popover\n                    ref={el => (this.popoverElement = el)}\n                    controlElement={this.controlElement}\n                    open={this.open}\n                    max-height={this.popoverMaxHeight}\n                    onFocusout={this.handleFocusOut}\n                    minHeight={this.popoverMinHeight}\n                    direction={this.popoverDirection}\n                    align={this.popoverAlignment}\n                    mode={this.popoverMode || undefined}\n                    block={this.block}\n                >\n                    <slot name=\"popover-top\" />\n                    <q2-option-list\n                        onPopoverState={this.onPopoverState}\n                        id=\"option-list\"\n                        ref={el => (this.optionList = el)}\n                        type=\"menu\"\n                        label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                        no-select\n                    >\n                        <slot />\n                    </q2-option-list>\n                    <slot name=\"popover-bottom\" />\n                </q2-popover>\n            </click-elsewhere>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.css

@@ -65,6 +65,17 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-dropdown-item-disabled-opacity: (<number>) Controls the opacity of the dropdown item when disabled.
+ * @prop --tct-dropdown-item-focus-box-shadow: (*) Controls the box shadow applied to the focused dropdown item button when the item is not disabled.
+ * @prop --tct-dropdown-item-font-color?: (<color>) Controls the optional text color of the dropdown item content.
+ * @prop --tct-dropdown-item-font-size?: (<length-percentage>) Controls the optional font size of the dropdown item content.
+ * @prop --tct-dropdown-item-hover-background: (<color>) Controls the background color of the dropdown item on hover and focus.
+ * @prop --tct-dropdown-item-hover-color?: (<color>) Controls the optional text color of the dropdown item on hover and focus.
+ * @prop --tct-dropdown-item-min-height: (<length>) Controls the minimum height of the dropdown item.
+ * @prop --tct-dropdown-item-separator-color: (<color>) Controls the color of the dropdown item separator border.
+ * @prop --tct-dropdown-item-tween: (*) Controls the transition timing of the dropdown item's interactive state changes.
+ */
 .dropdown-separator {
   --comp-default-separator-margin: 0 var(--tct-scale-1, var(--app-scale-3x, 15px));
   margin: var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));

package/dist/collection/components/q2-editable-field/q2-editable-field.css

@@ -65,6 +65,11 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-editable-field-btn-hover-background: (<color>) Controls the background color of the editable field action buttons (begin, save, cancel) on hover.
+ * @prop --tct-editable-field-btn-icon-stroke-primary: (<color>) Controls the primary stroke color of the editable field action button icons.
+ * @prop --tct-editable-field-btn-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the editable field action button icons.
+ */
 :host {
   display: inline-block;
   max-width: 100%;

package/dist/collection/components/q2-editable-field/test/q2-editable-field-test.vr.js

@@ -0,0 +1,89 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const LONG_VALUE = 'A very long value that should be truncated with ellipsis instead of wrapping to multiple lines';
+const VARIANTS = [
+    {
+        name: 'read-default',
+        html: `<q2-editable-field label="My editable field" value="Editable content"></q2-editable-field>`,
+    },
+    {
+        name: 'read-block',
+        html: `<q2-editable-field label="My editable field" value="Editable content" block></q2-editable-field>`,
+    },
+    {
+        name: 'read-persistent-label',
+        html: `<q2-editable-field label="My editable field" value="Editable content" persistent-label block></q2-editable-field>`,
+    },
+    {
+        name: 'read-hide-label',
+        html: `<q2-editable-field label="My editable field" value="Editable content" hide-label block></q2-editable-field>`,
+    },
+    {
+        name: 'read-truncated',
+        html: `<q2-editable-field label="My editable field" value="${LONG_VALUE}" truncated block></q2-editable-field>`,
+    },
+    {
+        name: 'read-disabled',
+        html: `<q2-editable-field label="My editable field" value="Editable content" disabled block></q2-editable-field>`,
+    },
+    {
+        name: 'edit-default',
+        html: `<q2-editable-field id="ef" label="My editable field" value="Editable content" editing block></q2-editable-field>`,
+    },
+    {
+        name: 'edit-disabled',
+        html: `<q2-editable-field id="ef" label="My editable field" value="Editable content" editing disabled block></q2-editable-field>`,
+    },
+    {
+        name: 'edit-with-hints',
+        html: `<q2-editable-field id="ef" label="My editable field" value="Editable content" editing block></q2-editable-field>`,
+        setupScript: `document.getElementById('ef').hints = ['Helper text'];`,
+    },
+    {
+        name: 'edit-with-errors',
+        html: `<q2-editable-field id="ef" label="My editable field" value="Editable content" editing block></q2-editable-field>`,
+        setupScript: `document.getElementById('ef').errors = ['Required field'];`,
+    },
+    {
+        name: 'edit-currency',
+        html: `<q2-editable-field id="ef" label="Amount" value="1234.56" type="currency" editing block></q2-editable-field>`,
+    },
+];
+const buildContent = (variant) => variant.setupScript ? `${variant.html}<script>${variant.setupScript}</script>` : variant.html;
+const READ_DEFAULT = VARIANTS.find(v => v.name === 'read-default');
+const EDIT_DEFAULT = VARIANTS.find(v => v.name === 'edit-default');
+const restingCase = (variant, theme) => {
+    test(`q2-editable-field--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, buildContent(variant), { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-editable-field--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-editable-field--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, buildContent(variant), { theme, setupLoc: true });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-editable-field--${variant.name}--focus--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-editable-field--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, buildContent(variant), { theme, setupLoc: true });
+        // Hover the edit button (host-level hover surfaces edit-button hover styling).
+        await page.locator('q2-editable-field').hover();
+        await expect(page).toHaveScreenshot(`q2-editable-field--${variant.name}--hover--${theme}.png`);
+    });
+};
+test.describe('q2-editable-field — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    for (const theme of THEMES) {
+        focusCase(READ_DEFAULT, theme);
+        hoverCase(READ_DEFAULT, theme);
+        focusCase(EDIT_DEFAULT, theme);
+    }
+});
+//# sourceMappingURL=q2-editable-field-test.vr.js.map

package/dist/collection/components/q2-editable-field/test/q2-editable-field-test.vr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-editable-field-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-editable-field/test/q2-editable-field-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = {\n    name: string;\n    html: string;\n    /** Optional JS-set props (hints/errors are arrays — must be set programmatically). */\n    setupScript?: string;\n};\n\nconst LONG_VALUE = 'A very long value that should be truncated with ellipsis instead of wrapping to multiple lines';\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'read-default',\n        html: `<q2-editable-field label=\"My editable field\" value=\"Editable content\"></q2-editable-field>`,\n    },\n    {\n        name: 'read-block',\n        html: `<q2-editable-field label=\"My editable field\" value=\"Editable content\" block></q2-editable-field>`,\n    },\n    {\n        name: 'read-persistent-label',\n        html: `<q2-editable-field label=\"My editable field\" value=\"Editable content\" persistent-label block></q2-editable-field>`,\n    },\n    {\n        name: 'read-hide-label',\n        html: `<q2-editable-field label=\"My editable field\" value=\"Editable content\" hide-label block></q2-editable-field>`,\n    },\n    {\n        name: 'read-truncated',\n        html: `<q2-editable-field label=\"My editable field\" value=\"${LONG_VALUE}\" truncated block></q2-editable-field>`,\n    },\n    {\n        name: 'read-disabled',\n        html: `<q2-editable-field label=\"My editable field\" value=\"Editable content\" disabled block></q2-editable-field>`,\n    },\n    {\n        name: 'edit-default',\n        html: `<q2-editable-field id=\"ef\" label=\"My editable field\" value=\"Editable content\" editing block></q2-editable-field>`,\n    },\n    {\n        name: 'edit-disabled',\n        html: `<q2-editable-field id=\"ef\" label=\"My editable field\" value=\"Editable content\" editing disabled block></q2-editable-field>`,\n    },\n    {\n        name: 'edit-with-hints',\n        html: `<q2-editable-field id=\"ef\" label=\"My editable field\" value=\"Editable content\" editing block></q2-editable-field>`,\n        setupScript: `document.getElementById('ef').hints = ['Helper text'];`,\n    },\n    {\n        name: 'edit-with-errors',\n        html: `<q2-editable-field id=\"ef\" label=\"My editable field\" value=\"Editable content\" editing block></q2-editable-field>`,\n        setupScript: `document.getElementById('ef').errors = ['Required field'];`,\n    },\n    {\n        name: 'edit-currency',\n        html: `<q2-editable-field id=\"ef\" label=\"Amount\" value=\"1234.56\" type=\"currency\" editing block></q2-editable-field>`,\n    },\n];\n\nconst buildContent = (variant: Variant) =>\n    variant.setupScript ? `${variant.html}<script>${variant.setupScript}</script>` : variant.html;\n\nconst READ_DEFAULT = VARIANTS.find(v => v.name === 'read-default')!;\nconst EDIT_DEFAULT = VARIANTS.find(v => v.name === 'edit-default')!;\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-editable-field--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, buildContent(variant), { theme, setupLoc: true });\n        await expect(page).toHaveScreenshot(`q2-editable-field--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-editable-field--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, buildContent(variant), { theme, setupLoc: true });\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-editable-field--${variant.name}--focus--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-editable-field--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, buildContent(variant), { theme, setupLoc: true });\n        // Hover the edit button (host-level hover surfaces edit-button hover styling).\n        await page.locator('q2-editable-field').hover();\n        await expect(page).toHaveScreenshot(`q2-editable-field--${variant.name}--hover--${theme}.png`);\n    });\n};\n\ntest.describe('q2-editable-field — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n    for (const theme of THEMES) {\n        focusCase(READ_DEFAULT, theme);\n        hoverCase(READ_DEFAULT, theme);\n        focusCase(EDIT_DEFAULT, theme);\n    }\n});\n"]}

package/dist/collection/components/q2-example/q2-example.js

@@ -118,7 +118,7 @@ export class Q2Example {
             }, onClick: () => this.tctClick.emit(), role: "menu" }, h("slot", null))));
     }
     render() {
-        return h(Host, { key: '6ffb94ccdcae5f6a0762f80b2d022997345f5cc0', attribute: "navigation" }, this.renderMenuInner());
+        return h(Host, { key: '7878622b0f2a455617e109b9aa32290bffc00a92', attribute: "navigation" }, this.renderMenuInner());
     }
     static get is() { return "q2-example"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-file-picker/q2-file-picker.css

@@ -132,6 +132,70 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-file-picker-margin: (<length-percentage>+) Controls the outer margin of the file picker host.
+ * @prop --tct-file-picker-margin-top: (<length-percentage>) Controls the top margin of the file picker host when --tct-file-picker-margin is not set.
+ * @prop --tct-file-picker-margin-bottom: (<length-percentage>) Controls the bottom margin of the file picker host when --tct-file-picker-margin is not set.
+ * @prop --tct-file-picker-section-gap: (<length-percentage>) Controls the gap between items in the file list.
+ * @prop --tct-file-picker-heading-gap: (<length-percentage>) Controls the gap between heading elements.
+ * @prop --tct-file-picker-file-item-gap: (<length-percentage>) Controls the gap between file picker rows.
+ * @prop --tct-file-picker-file-item-icon-size: (<length>) Controls the size of the success/error icons on file items.
+ * @prop --tct-file-picker-file-item-loading-size: (<length>) Controls the font size driving the loading spinner inside file items.
+ * @prop --tct-file-picker-file-item-loading-margin-bottom: (<length-percentage>) Controls the bottom margin of the loading spinner inside file items.
+ * @prop --tct-file-picker-label-color: (<color>) Controls the text color of the file picker label.
+ * @prop --tct-file-picker-label-font-size: (<length-percentage>) Controls the font size of the file picker label.
+ * @prop --tct-file-picker-label-font-weight: (<number>) Controls the font weight of the file picker label.
+ * @prop --tct-file-picker-label-text-align: (<custom-ident>) Controls the text alignment of the file picker label.
+ * @prop --tct-file-picker-description-text-color: (<color>) Controls the text color of the file picker description.
+ * @prop --tct-file-picker-description-font-size: (<length-percentage>) Controls the font size of the file picker description.
+ * @prop --tct-file-picker-description-font-weight: (<number>) Controls the font weight of the file picker description.
+ * @prop --tct-file-picker-description-text-align: (<custom-ident>) Controls the text alignment of the file picker description.
+ * @prop --tct-file-picker-browse-link-font-weight: (<number>) Controls the font weight of the "browse" link inside the drop zone.
+ * @prop --tct-file-picker-drop-zone-background: (<color>) Controls the background color of the drop zone in its default state.
+ * @prop --tct-file-picker-drop-zone-border-color: (<color>) Controls the border color of the drop zone.
+ * @prop --tct-file-picker-drop-zone-border-radius: (<length-percentage>) Controls the corner radius of the drop zone.
+ * @prop --tct-file-picker-drop-zone-border-style: (<custom-ident>) Controls the border style of the drop zone.
+ * @prop --tct-file-picker-drop-zone-border-width: (<length>+) Controls the border width of the drop zone.
+ * @prop --tct-file-picker-drop-zone-color: (<color>) Controls the text color of inactive drop zone elements.
+ * @prop --tct-file-picker-drop-zone-text-color: (<color>) Controls the text color of the active drop zone message.
+ * @prop --tct-file-picker-drop-zone-font-size: (<length-percentage>) Controls the font size of drop zone text.
+ * @prop --tct-file-picker-drop-zone-font-weight: (<number>) Controls the font weight of drop zone text.
+ * @prop --tct-file-picker-drop-zone-text-margin-top: (<length-percentage>) Controls the top margin of the active drop zone message.
+ * @prop --tct-file-picker-drop-zone-icon-color: (<color>) Controls the stroke color of the drop zone icon.
+ * @prop --tct-file-picker-drop-zone-height: (<length>) Controls the height of the drop zone.
+ * @prop --tct-file-picker-drop-zone-padding: (<length-percentage>+) Controls the inner padding of the drop zone.
+ * @prop --tct-file-picker-drop-zone-width: (<length-percentage>) Controls the width of the drop zone.
+ * @prop --tct-file-picker-drop-zone-max-width: (<length-percentage>) Controls the maximum width of the drop zone.
+ * @prop --tct-file-picker-drop-zone-min-width: (<length-percentage>) Controls the minimum width of the drop zone.
+ * @prop --tct-file-picker-drop-zone-highlighted-background: (<color>) Controls the background color of the drop zone when actively dragged over.
+ * @prop --tct-file-picker-drop-zone-highlighted-border: (<color>) Controls the border color of the drop zone when actively dragged over.
+ * @prop --tct-file-picker-drop-zone-disabled-opacity: (<number>) Controls the opacity of the drop zone when disabled.
+ * @prop --tct-file-picker-item-border-color: (<color>) Controls the border color of file items.
+ * @prop --tct-file-picker-item-border-radius: (<length-percentage>) Controls the corner radius of file items.
+ * @prop --tct-file-picker-item-border-width: (<length>) Controls the border width of file items.
+ * @prop --tct-file-picker-item-padding: (<length-percentage>+) Controls the inner padding of file items.
+ * @prop --tct-file-picker-item-font-size: (<length-percentage>) Controls the font size of file item details (body text).
+ * @prop --tct-file-picker-item-font-weight: (<number>) Controls the font weight of file item details (body text).
+ * @prop --tct-file-picker-item-name-color: (<color>) Controls the text color of the file name.
+ * @prop --tct-file-picker-item-name-font-size: (<length-percentage>) Controls the font size of the file name.
+ * @prop --tct-file-picker-item-name-font-weight: (<number>) Controls the font weight of the file name.
+ * @prop --tct-file-picker-item-close-btn-color: (<color>) Controls the color of the file item close (remove) button.
+ * @prop --tct-file-picker-item-close-btn-hover-color: (<color>) Controls the color of the file item close button on hover.
+ * @prop --tct-file-picker-item-close-btn-active-color: (<color>) Controls the color of the file item close button when active.
+ * @prop --tct-file-picker-item-close-btn-hover-focus-ring-color: (<color>) Controls the focus ring color of the file item close button on hover and focus.
+ * @prop --tct-file-picker-item-close-btn-border-radius: (<length-percentage>) Controls the corner radius of the file item close button.
+ * @prop --tct-file-picker-list-max-height: (<length-percentage>) Controls the maximum height of the file list container before scrolling.
+ * @prop --tct-file-picker-scrollbar-color: (<color>) Controls the scrollbar thumb color of the file list container.
+ * @prop --tct-file-picker-loading-size: (<length>) Controls the font size driving the picker-level loading spinner.
+ * @prop --tct-file-picker-loading-file-color: (<color>) Controls the text color of the loading-file message.
+ * @prop --tct-file-picker-loading-file-font-size: (<length-percentage>) Controls the font size of the loading-file message.
+ * @prop --tct-file-picker-loading-file-font-weight: (<number>) Controls the font weight of the loading-file message.
+ * @prop --tct-file-picker-loading-message-color: (<color>) Controls the text color of the loading status message.
+ * @prop --tct-file-picker-loading-message-font-size: (<length-percentage>) Controls the font size of the loading status message.
+ * @prop --tct-file-picker-loading-message-font-weight: (<number>) Controls the font weight of the loading status message.
+ * @prop --tct-file-picker-loading-message-margin-top: (<length-percentage>) Controls the top margin of the loading status message.
+ * @prop --tct-file-picker-loading-message-margin-bottom: (<length-percentage>) Controls the bottom margin of the loading status message.
+ */
 @keyframes growFromCenterFadeIn {
   from {
     transform: scaleX(0.75) scaleY(0.75);

package/dist/collection/components/q2-file-picker/test/q2-file-picker-test.vr.js

@@ -0,0 +1,92 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+const DESC = 'This is some description text for the file picker.';
+const VARIANTS = [
+    {
+        name: 'browse-default',
+        html: `<q2-file-picker label="Label" description="${DESC}" file-types="pdf"></q2-file-picker>`,
+    },
+    {
+        name: 'browse-no-label-or-description',
+        html: `<q2-file-picker file-types="pdf"></q2-file-picker>`,
+    },
+    {
+        name: 'browse-disabled',
+        html: `<q2-file-picker label="Label" description="${DESC}" file-types="pdf" disabled></q2-file-picker>`,
+    },
+    {
+        name: 'browse-button-size-small',
+        html: `<q2-file-picker label="Label" file-types="pdf" button-size="small"></q2-file-picker>`,
+    },
+    {
+        name: 'browse-button-size-large',
+        html: `<q2-file-picker label="Label" file-types="pdf" button-size="large"></q2-file-picker>`,
+    },
+    {
+        name: 'browse-drop-default',
+        html: `<q2-file-picker variant="browse-drop" label="Label" description="${DESC}" file-types="pdf"></q2-file-picker>`,
+    },
+    {
+        name: 'browse-drop-no-label-or-description',
+        html: `<q2-file-picker variant="browse-drop" file-types="pdf"></q2-file-picker>`,
+    },
+    {
+        name: 'browse-drop-disabled',
+        html: `<q2-file-picker variant="browse-drop" label="Label" description="${DESC}" file-types="pdf" disabled></q2-file-picker>`,
+    },
+    {
+        name: 'browse-drop-with-status-uploaded',
+        html: `<q2-file-picker id="fp" variant="browse-drop" label="Label" file-types="pdf"></q2-file-picker>`,
+        setupScript: `document.getElementById('fp').status = [{ name: 'report.pdf', status: 'uploaded' }];`,
+    },
+    {
+        name: 'browse-drop-with-status-failed',
+        html: `<q2-file-picker id="fp" variant="browse-drop" label="Label" file-types="pdf"></q2-file-picker>`,
+        setupScript: `document.getElementById('fp').status = [{ name: 'report.pdf', status: 'failed', message: 'Upload failed' }];`,
+    },
+    {
+        name: 'browse-drop-with-status-mixed',
+        html: `<q2-file-picker id="fp" variant="browse-drop" label="Label" file-types="pdf"></q2-file-picker>`,
+        setupScript: `document.getElementById('fp').status = [
+            { name: 'report-good.pdf', status: 'uploaded' },
+            { name: 'report-bad.pdf', status: 'failed', message: 'Upload failed' }
+        ];`,
+    },
+];
+const buildContent = (variant) => variant.setupScript ? `${variant.html}<script>${variant.setupScript}</script>` : variant.html;
+const BROWSE_DEFAULT = VARIANTS.find(v => v.name === 'browse-default');
+const BROWSE_DROP_DEFAULT = VARIANTS.find(v => v.name === 'browse-drop-default');
+const restingCase = (variant, theme) => {
+    test(`q2-file-picker--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await setupPage(page, buildContent(variant), { theme, setupLoc: true });
+        await expect(page).toHaveScreenshot(`q2-file-picker--${variant.name}--resting--${theme}.png`);
+    });
+};
+const focusCase = (variant, theme) => {
+    test(`q2-file-picker--${variant.name}--focus — ${theme}`, async ({ page }) => {
+        await setupPage(page, buildContent(variant), { theme, setupLoc: true });
+        await page.keyboard.press('Tab');
+        await expect(page).toHaveScreenshot(`q2-file-picker--${variant.name}--focus--${theme}.png`);
+    });
+};
+const hoverCase = (variant, theme) => {
+    test(`q2-file-picker--${variant.name}--hover — ${theme}`, async ({ page }) => {
+        await setupPage(page, buildContent(variant), { theme, setupLoc: true });
+        await page.locator('q2-file-picker').hover();
+        await expect(page).toHaveScreenshot(`q2-file-picker--${variant.name}--hover--${theme}.png`);
+    });
+};
+test.describe('q2-file-picker — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    for (const theme of THEMES) {
+        focusCase(BROWSE_DEFAULT, theme);
+        hoverCase(BROWSE_DEFAULT, theme);
+        focusCase(BROWSE_DROP_DEFAULT, theme);
+    }
+});
+//# sourceMappingURL=q2-file-picker-test.vr.js.map

package/dist/collection/components/q2-file-picker/test/q2-file-picker-test.vr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-file-picker-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-file-picker/test/q2-file-picker-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\ntype Variant = {\n    name: string;\n    html: string;\n    /** Optional JS-set props (status is an array — must be set programmatically). */\n    setupScript?: string;\n};\n\nconst DESC = 'This is some description text for the file picker.';\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'browse-default',\n        html: `<q2-file-picker label=\"Label\" description=\"${DESC}\" file-types=\"pdf\"></q2-file-picker>`,\n    },\n    {\n        name: 'browse-no-label-or-description',\n        html: `<q2-file-picker file-types=\"pdf\"></q2-file-picker>`,\n    },\n    {\n        name: 'browse-disabled',\n        html: `<q2-file-picker label=\"Label\" description=\"${DESC}\" file-types=\"pdf\" disabled></q2-file-picker>`,\n    },\n    {\n        name: 'browse-button-size-small',\n        html: `<q2-file-picker label=\"Label\" file-types=\"pdf\" button-size=\"small\"></q2-file-picker>`,\n    },\n    {\n        name: 'browse-button-size-large',\n        html: `<q2-file-picker label=\"Label\" file-types=\"pdf\" button-size=\"large\"></q2-file-picker>`,\n    },\n    {\n        name: 'browse-drop-default',\n        html: `<q2-file-picker variant=\"browse-drop\" label=\"Label\" description=\"${DESC}\" file-types=\"pdf\"></q2-file-picker>`,\n    },\n    {\n        name: 'browse-drop-no-label-or-description',\n        html: `<q2-file-picker variant=\"browse-drop\" file-types=\"pdf\"></q2-file-picker>`,\n    },\n    {\n        name: 'browse-drop-disabled',\n        html: `<q2-file-picker variant=\"browse-drop\" label=\"Label\" description=\"${DESC}\" file-types=\"pdf\" disabled></q2-file-picker>`,\n    },\n    {\n        name: 'browse-drop-with-status-uploaded',\n        html: `<q2-file-picker id=\"fp\" variant=\"browse-drop\" label=\"Label\" file-types=\"pdf\"></q2-file-picker>`,\n        setupScript: `document.getElementById('fp').status = [{ name: 'report.pdf', status: 'uploaded' }];`,\n    },\n    {\n        name: 'browse-drop-with-status-failed',\n        html: `<q2-file-picker id=\"fp\" variant=\"browse-drop\" label=\"Label\" file-types=\"pdf\"></q2-file-picker>`,\n        setupScript: `document.getElementById('fp').status = [{ name: 'report.pdf', status: 'failed', message: 'Upload failed' }];`,\n    },\n    {\n        name: 'browse-drop-with-status-mixed',\n        html: `<q2-file-picker id=\"fp\" variant=\"browse-drop\" label=\"Label\" file-types=\"pdf\"></q2-file-picker>`,\n        setupScript: `document.getElementById('fp').status = [\n            { name: 'report-good.pdf', status: 'uploaded' },\n            { name: 'report-bad.pdf', status: 'failed', message: 'Upload failed' }\n        ];`,\n    },\n];\n\nconst buildContent = (variant: Variant) =>\n    variant.setupScript ? `${variant.html}<script>${variant.setupScript}</script>` : variant.html;\n\nconst BROWSE_DEFAULT = VARIANTS.find(v => v.name === 'browse-default')!;\nconst BROWSE_DROP_DEFAULT = VARIANTS.find(v => v.name === 'browse-drop-default')!;\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-file-picker--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await setupPage(page, buildContent(variant), { theme, setupLoc: true });\n        await expect(page).toHaveScreenshot(`q2-file-picker--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst focusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-file-picker--${variant.name}--focus — ${theme}`, async ({ page }) => {\n        await setupPage(page, buildContent(variant), { theme, setupLoc: true });\n        await page.keyboard.press('Tab');\n        await expect(page).toHaveScreenshot(`q2-file-picker--${variant.name}--focus--${theme}.png`);\n    });\n};\n\nconst hoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-file-picker--${variant.name}--hover — ${theme}`, async ({ page }) => {\n        await setupPage(page, buildContent(variant), { theme, setupLoc: true });\n        await page.locator('q2-file-picker').hover();\n        await expect(page).toHaveScreenshot(`q2-file-picker--${variant.name}--hover--${theme}.png`);\n    });\n};\n\ntest.describe('q2-file-picker — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n    for (const theme of THEMES) {\n        focusCase(BROWSE_DEFAULT, theme);\n        hoverCase(BROWSE_DEFAULT, theme);\n        focusCase(BROWSE_DROP_DEFAULT, theme);\n    }\n});\n"]}

package/dist/collection/components/q2-form/q2-form.css

@@ -65,28 +65,42 @@ button {
   visibility: hidden;
 }
 
-.container {
-  --tct-input-margin: var(--comp-spacing);
-  --tct-select-margin: var(--comp-spacing);
-  --tct-calendar-margin: var(--comp-spacing);
-  --tct-file-picker-margin: var(--comp-spacing);
-  --tct-textarea-margin: var(--comp-spacing);
-  --tct-checkbox-group-margin: var(--comp-spacing);
-  --tct-radio-group-margin: var(--comp-spacing);
-}
-:host([spacing=none]) .container {
+/**
+ * @prop --tct-form-spacing-none: (<length-percentage>+) Controls the margin applied to form input children when spacing is none.
+ * @prop --tct-form-spacing-compact: (<length-percentage>+) Controls the margin applied to form input children when spacing is compact.
+ * @prop --tct-form-spacing-normal: (<length-percentage>+) Controls the margin applied to form input children when spacing is normal.
+ * @prop --tct-form-spacing-comfortable: (<length-percentage>+) Controls the margin applied to form input children when spacing is comfortable.
+ */
+:host([spacing=none]) {
   --comp-spacing-none: var(--app-scale-0x, 0px);
-  --comp-spacing: var(--tct-form-spacing-none, var(--comp-spacing-none) 0);
+  --comp-spacing: var(--tct-form-spacing-none, var(--comp-spacing-none));
+}
+
+:host([spacing=compact]) {
+  --comp-spacing-compact: var(--app-scale-1x, 5px);
+  --comp-spacing: var(--tct-form-spacing-compact, var(--comp-spacing-compact));
 }
-:host([spacing=compact]) .container {
-  --comp-spacing-compact: var(--app-scale-3x, 15px);
-  --comp-spacing: var(--tct-form-spacing-compact, var(--comp-spacing-compact) 0);
+
+:host(:not([spacing])),
+:host([spacing=normal]) {
+  --comp-spacing-normal: var(--app-scale-3x, 15px);
+  --comp-spacing: var(--tct-form-spacing-normal, var(--comp-spacing-normal));
 }
-:host(:not([spacing]), [spacing=normal]) .container {
-  --comp-spacing-normal: var(--app-scale-5x, 25px);
-  --comp-spacing: var(--tct-form-spacing-normal, var(--comp-spacing-normal) 0);
+
+:host([spacing=comfortable]) {
+  --comp-spacing-comfortable: var(--app-scale-5x, 25px);
+  --comp-spacing: var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable));
 }
-:host([spacing=comfortable]) .container {
-  --comp-spacing-comfortable: var(--app-scale-7x, 35px);
-  --comp-spacing: var(--tct-form-spacing-comfortable, var(--comp-spacing-comfortable) 0);
+
+.container {
+  --tct-input-margin: 0;
+  --tct-select-margin: 0;
+  --tct-calendar-margin: 0;
+  --tct-file-picker-margin: 0;
+  --tct-textarea-margin: 0;
+  --tct-checkbox-group-margin: 0;
+  --tct-radio-group-margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--comp-spacing);
 }

package/dist/collection/components/q2-form/q2-form.js

@@ -13,7 +13,7 @@ export class Q2Form {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '6720d1cf81a23420db41de84fce56398ff932018', class: "container" }, h("slot", { key: '48165fa24f2eb15d66fdfa63b6c122c0dc320714' })));
+        return (h("div", { key: 'b01b965b3fc436b4155245fa747e4c8922304114', class: "container" }, h("slot", { key: '039fd27f2a80825f14a6247eb330eac983638389' })));
     }
     static get is() { return "q2-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-formatted-text/q2-formatted-text.css

@@ -65,6 +65,20 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-formatted-text-color?: (<color>) Controls the optional text color of the formatted text in its default size.
+ * @prop --tct-formatted-text-font-size?: (<length-percentage>) Controls the optional font size of the formatted text in its default size.
+ * @prop --tct-formatted-text-font-weight?: (<number>) Controls the optional font weight of the formatted text in its default size.
+ * @prop --tct-formatted-text-small-color?: (<color>) Controls the optional text color of the formatted text in the small size.
+ * @prop --tct-formatted-text-small-font-size: (<length-percentage>) Controls the font size of the formatted text in the small size.
+ * @prop --tct-formatted-text-small-font-weight: (<number>) Controls the font weight of the formatted text in the small size.
+ * @prop --tct-formatted-text-medium-color?: (<color>) Controls the optional text color of the formatted text in the medium size.
+ * @prop --tct-formatted-text-medium-font-size: (<length-percentage>) Controls the font size of the formatted text in the medium size.
+ * @prop --tct-formatted-text-medium-font-weight: (<number>) Controls the font weight of the formatted text in the medium size.
+ * @prop --tct-formatted-text-large-color?: (<color>) Controls the optional text color of the formatted text in the large size.
+ * @prop --tct-formatted-text-large-font-size: (<length-percentage>) Controls the font size of the formatted text in the large size.
+ * @prop --tct-formatted-text-large-font-weight: (<number>) Controls the font weight of the formatted text in the large size.
+ */
 :host {
   display: inline-block;
 }