q2-tecton-elements 1.50.1 → 1.51.0

package/dist/components/q2-tab-container.js.map

@@ -1 +1 @@
-{"file":"q2-tab-container.js","mappings":"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","names":["Q2TabContainer"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(tab-container-border-color),\n            --tct-gray-11,\n            --t-gray-11,\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            color var-list(--tct-tween-2, --app-tween-2, unquote('0.4s ease')),\n            border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveToTab(Math.max(index, 0), false);\n            this.value = tab.dataset.value;\n        });\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-tab-container.js","mappings":"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","names":["Q2TabContainer"],"sources":["src/components/q2-tab-container/q2-tab-container.scss?tag=q2-tab-container&encapsulation=shadow","src/components/q2-tab-container/q2-tab-container.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nbutton {\n    cursor: pointer;\n    margin: 0;\n}\n\n.tab-container {\n    position: relative;\n}\n\nul {\n    --comp-container-padding: #{var-list(--tct-scale-1, --app-scale-1x, 5px)\n        var-list(--tct-scale-1, --app-scale-1x, 5px) 0};\n    padding: var-list(var-prefixer(tab-container-padding), --comp-container-padding);\n    margin: var-list(var-prefixer(tab-container-margin), 0);\n    display: flex;\n    gap: var-list(var-prefixer(tab-gap), --tct-scale-1, --app-scale-1x, 5px);\n    list-style: none;\n    border-bottom: 1px solid\n        var-list(\n            var-prefixer(tab-container-border-color),\n            --tct-gray-11,\n            --t-gray-11,\n            --tct-gray-l1,\n            --app-gray-l1,\n            #cccccc\n        );\n    overflow-x: auto;\n    align-items: center;\n    @include hidden-scrollbar();\n\n    @media print {\n        &.no-print {\n            display: none;\n        }\n    }\n}\n\nli {\n    flex: 0 0 auto;\n\n    button {\n        background: var-list(--tct-tab-inactive-background, var-prefixer(tab-inactive-bg-color), transparent);\n        border-width: var-list(var-prefixer(tab-inactive-border-width), unquote('0 0 3px 0'));\n        border-color: var-list(var-prefixer(tab-inactive-border-color), transparent);\n        border-style: var-list(var-prefixer(tab-inactive-border-style), solid);\n        border-radius: var-list(var-prefixer(tab-border-radius), 0);\n        width: var-list(var-prefixer(tab-width), 100%);\n        text-align: var-list(var-prefixer(tab-text-align), center);\n        text-decoration: var-list(var-prefixer(tab-text-decoration), none);\n        padding: var-list(var-prefixer(tab-padding), --tct-scale-2, --app-scale-2x, 10px);\n        color: var-list(var-prefixer(tab-inactive-color), inherit);\n        font-size: var-list(var-prefixer(tab-font-size), 17px);\n        display: block;\n        transition:\n            color var-list(--tct-tween-2, --app-tween-2, unquote('0.4s ease')),\n            border-color var-list(--tct-tween-1, --app-tween-1, unquote('0.2s ease'));\n\n        :host([type='section']) & {\n            --comp-tab-section-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: var-list(--tct-tab-section-font-size, inherit);\n            padding: var-list(var-prefixer(tab-section-padding), --comp-tab-section-padding);\n        }\n\n        &:hover {\n            color: var-list(var-prefixer(tab-hover-color), var-prefixer(tab-active-color), #2e2e2e);\n            background: var-list(--tct-tab-hover-background, var-prefixer(tab-hover-bg-color), inherit);\n            width: var-list(var-prefixer(tab-hover-width), 100%);\n        }\n\n        &[aria-selected='true'] {\n            color: var-list(var-prefixer(tab-active-color), #2e2e2e);\n            border-color: var-list(var-prefixer(tab-active-border-color), currentcolor);\n            border-style: var-list(var-prefixer(tab-active-border-style), solid);\n            width: var-list(var-prefixer(tab-active-width), 100%);\n            background: var-list(--tct-tab-active-background, var-prefixer(tab-active-bg-color), inherit);\n        }\n\n        :host([color='alt']) & {\n            color: var-list(var-prefixer(tab-alt-inactive-color), inherit);\n\n            &:hover,\n            &[aria-selected='true'] {\n                color: var-list(var-prefixer(tab-alt-active-color), inherit);\n            }\n        }\n\n        @media screen and (max-width: 767px) {\n            --comp-tab-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px)\n                var-list(--tct-scale-1, --app-scale-1x, 5px)};\n            font-size: inherit;\n            padding: var-list(var-prefixer(tab-padding), --comp-tab-padding);\n        }\n    }\n}\n\n.tab-content {\n    --comp-tab-content-padding: #{var-list(--tct-scale-2, --app-scale-2x, 10px) 0};\n    padding: var-list(\n        --tct-tab-container-content-padding,\n        var-prefixer(tab-content-padding),\n        --comp-tab-content-padding\n    );\n    background: var-list(--tct-tab-container-content-backgrond, none);\n\n    &:focus {\n        outline: none;\n        box-shadow: none;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 44px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n\n.tab-pane-badge {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    q2-badge {\n        margin-left: 5px;\n        margin-right: 5px;\n    }\n}\n","import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Event,\n    EventEmitter,\n    State,\n    Listen,\n    Watch,\n    h,\n    Fragment,\n    Method,\n} from '@stencil/core';\nimport { createGuid, loc, overrideFocus, isEventFromElement } from 'src/utils';\nimport { JSX } from '../../components';\nimport { Q2Badge } from '../q2-badge/q2-badge';\n\ntype TabPane = {\n    label: string;\n    value: string;\n    badgeCount: number;\n    badgeDescription: string;\n    badgeTheme: Q2Badge['theme'];\n    badgeStatus: Q2Badge['status'];\n};\n\n@Component({ tag: 'q2-tab-container', shadow: true, styleUrl: 'q2-tab-container.scss' })\nexport class Q2TabContainer implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    lastScrolled: number = new Date(null).getTime();\n    listElement: HTMLUListElement;\n    mutationObserver: MutationObserver;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    hasLeft: boolean = false;\n\n    @State()\n    hasRight: boolean = false;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    @State()\n    tabs: TabPane[];\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls which variables are used to color the tab controls.\n     *\n     * - `undefined` (default)\n     *   - Uses `--t-tab-active` and `--t-tab-inactive`.\n     * - `alt`\n     *   - Uses `--t-tab-alt-active` and `--t-tab-alt-inactive`.\n     *   - The default fallback for these variables is `inherit`.\n     */\n    @Prop({ reflect: true })\n    color: 'alt' | undefined;\n\n    /**\n     * Used to establish a relationship between `q2-tab-container` and its associated tab panes.\n     * @warning\n     * The element can fail if this property is not set. Nested tab containers without the `name` property will not render correctly.\n     */\n    @Prop({ reflect: true })\n    name: string;\n\n    /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */\n    @Prop({ reflect: true })\n    noPrint: boolean = false;\n\n    /** Determines the font size of the tab controls. */\n    @Prop({ reflect: true })\n    type: 'main' | 'section';\n\n    /** Corresponds to the value of the selected tab pane. */\n    @Prop({ reflect: true, mutable: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected tab changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ value: string }>;\n\n    /**\n     * Emitted when the component has finished rendering.\n     * @private\n     */\n    @Event()\n    settled: EventEmitter<undefined>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver.disconnect();\n        this.mutationObserver.disconnect();\n        this.resizeObserver = null;\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.updateTabData);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.updateTabData();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        this.scheduledAfterRender.push(() => {\n            const hasTabs = this.tabs.length > 0;\n            if (!hasTabs) return;\n            const tab = this.moveToTab(Math.max(index, 0), false);\n            this.value = tab.dataset.value;\n        });\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n        this.settled.emit();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('badge')\n    onBadge() {\n        this.setTabs();\n    }\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.value = event.detail.value;\n        }\n    }\n\n    @Listen('focus')\n    onFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        const index = this.tabs.findIndex(el => el.value === this.selectedTabValue);\n        this.moveToTab(index, true);\n    }\n\n    @Listen('resize', { target: 'window' })\n    onResize() {\n        this.checkScrollState();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('name')\n    nameObserver() {\n        this.updateTabData();\n    }\n\n    @Watch('value')\n    valueObserver() {\n        this.updateTabData();\n        this.scheduledAfterRender.push(this.resizeIframe);\n        const index = this.tabs.findIndex(el => el.value === this.value);\n        if (index > -1) {\n            this.scheduledAfterRender.push(() => this.moveToTab(index, false));\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get selectedTabValue() {\n        return this.value || this.tabPanes[0].value || '';\n    }\n\n    get tabList() {\n        return this.hostElement.shadowRoot.querySelector('.tab-list');\n    }\n\n    get tabPanes() {\n        const tabPanes = this.hostElement.querySelectorAll<HTMLQ2TabPaneElement | HTMLTectonTabPaneElement>(\n            'q2-tab-pane, tecton-tab-pane'\n        );\n\n        if (tabPanes.length === 0) {\n            return [];\n        }\n\n        return Array.from(tabPanes).filter(pane => pane.name === this.name);\n    }\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = scrollLeft > 0;\n        this.showScrollRight = scrollWidth > Math.ceil(scrollLeft) + clientWidth;\n    };\n\n    moveToAdjacentTab = (value: string, direction: 'next' | 'prev' | 'first' | 'last') => {\n        const index = this.tabs.map(({ value }) => value).indexOf(value);\n\n        let newIndex;\n        switch (direction) {\n            case 'next':\n                newIndex = Math.min(index + 1, this.tabs.length - 1);\n                break;\n\n            case 'prev':\n                newIndex = Math.max(index - 1, 0);\n                break;\n\n            case 'first':\n                newIndex = 0;\n                break;\n\n            case 'last':\n                newIndex = this.tabs.length - 1;\n                break;\n        }\n\n        if (index === newIndex) return;\n\n        this.moveToTab(newIndex, true);\n    };\n\n    moveToTab = (index: number, shouldFocus: boolean = true) => {\n        const focusedValue = this.tabs[index].value;\n        const focusedTab = this.listElement.querySelector<HTMLButtonElement>(`[data-value=\"${focusedValue}\"]`);\n        if (shouldFocus) {\n            focusedTab.focus({ preventScroll: true });\n        }\n\n        const left = focusedTab.offsetLeft - this.listElement.clientWidth / 2;\n        this.listElement.scrollTo({\n            left,\n            behavior: 'smooth',\n        });\n\n        return focusedTab;\n    };\n\n    onScrollBtnClick = (direction?: 'left' | 'right') => {\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        const halfWidth = Math.floor(clientWidth / 2);\n        let scrollAmount: number = 0;\n        if (direction === 'left') {\n            scrollAmount = -Math.min(halfWidth, Math.abs(scrollLeft));\n        } else {\n            scrollAmount = Math.min(halfWidth, Math.abs(scrollWidth - scrollLeft - clientWidth));\n        }\n        this.listElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n    };\n\n    onSlotChange = () => {\n        this.checkScrollState();\n    };\n\n    onTabClick = (event: MouseEvent) => {\n        const targetValue = ((event.target as HTMLButtonElement).closest('button[role=\"tab\"]') as HTMLButtonElement)\n            .dataset.value;\n        const isAlreadySelected = this.value === targetValue;\n        if (isAlreadySelected) return;\n\n        this.change.emit({\n            value: targetValue,\n        });\n    };\n\n    onTabKeyDown = (event: KeyboardEvent) => {\n        const value = (event.target as HTMLElement).dataset.value;\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'next');\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'prev');\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'first');\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.moveToAdjacentTab(value, 'last');\n                break;\n\n            case 'Space':\n            case 'Enter':\n                event.preventDefault();\n                this.change.emit({ value });\n                break;\n        }\n    };\n\n    resizeIframe() {\n        return window.TectonElements?.resizeIframe?.();\n    }\n\n    setTabs = () => {\n        this.tabs = this.tabPanes.map(({ label, value, badgeCount, badgeDescription, badgeTheme, badgeStatus }) => ({\n            label: (label && loc(label)) || '',\n            value,\n            badgeCount,\n            badgeDescription,\n            badgeTheme,\n            badgeStatus,\n        }));\n    };\n\n    updateTabData = () => {\n        this.updateTabPaneProps();\n        this.setTabs();\n    };\n\n    updateTabPaneProps = () => {\n        this.tabPanes.forEach((tab, index) => {\n            tab.selected = tab.value === this.selectedTabValue;\n            tab.guid = this.guid;\n            tab.index = index;\n        });\n    };\n\n    // #endregion\n    // #region Test Methods API\n\n    /**\n     * A method to select a tab pane corresponding with the value.\n     *\n     * @testOnly\n     */\n    @Method()\n    async selectTab(value: string) {\n        const paneButton = this.hostElement.shadowRoot.querySelector(`[test-id=\"tabLink\"][data-value=\"${value}\"]`);\n        (paneButton as HTMLButtonElement)?.click();\n    }\n    // #endregion\n    // #region Render Methods\n\n    renderTab(tab: TabPane, index: number): JSX.IntrinsicElements {\n        const { label, value } = tab;\n        const isSelected = this.selectedTabValue === value;\n        return (\n            <li role=\"presentation\">\n                <button\n                    id={`tab-${this.guid}-${index}`}\n                    data-value={value}\n                    test-id=\"tabLink\"\n                    tabIndex={isSelected ? 0 : -1}\n                    role=\"tab\"\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    onClick={this.onTabClick}\n                    onKeyDown={this.onTabKeyDown}\n                >\n                    {tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected)}\n                </button>\n            </li>\n        );\n    }\n\n    renderTabWithBadge(tab: TabPane, isSelected: boolean): JSX.IntrinsicElements {\n        let theme;\n        if (!tab.badgeStatus && isSelected) theme = tab.badgeTheme || 'primary';\n        let description;\n        if (tab.badgeDescription) description = loc(tab.badgeDescription);\n        else if (tab.badgeStatus) description = loc(`tecton.element.tab.pane.${tab.badgeStatus}`, [tab.badgeCount]);\n        else description = loc('tecton.element.tab.pane.new');\n\n        return (\n            <div\n                class=\"tab-pane-badge\"\n                aria-label={`${tab.label}, ${tab.badgeCount} ${description}`}\n            >\n                {tab.label}\n                <q2-badge\n                    value={tab.badgeCount}\n                    theme={theme}\n                    status={tab.badgeStatus}\n                />\n            </div>\n        );\n    }\n\n    render() {\n        return (\n            <Fragment>\n                <div class=\"tab-container\">\n                    {this.scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!this.showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!this.showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hidden={!this.showScrollLeft}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-left\"\n                                    label=\"scroll left\"\n                                ></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hidden={!this.showScrollRight}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon\n                                    type=\"chevron-right\"\n                                    label=\"scroll right\"\n                                ></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        class={this.noPrint ? 'no-print' : null}\n                        role=\"tablist\"\n                    >\n                        {this.tabs.map((tab, index) => this.renderTab(tab, index))}\n                    </ul>\n                </div>\n                <div class=\"tab-content\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-tab-pane.js

@@ -28,7 +28,7 @@ const Q2TabPane$1 = /*@__PURE__*/ proxyCustomElement(class Q2TabPane extends HTM
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'c21a87ba74c63595e124125cd91d317242ef0d4a', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: '305ded1dbb739e7c7115c49f952186b1fde76895' })));
+        return (h("div", { key: '3cd86f02e748fc4e77059cb31b5e478acf22d27a', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, h("slot", { key: 'b5d23f0194a61be45bc488480e0c9047ac07f367' })));
     }
     static get watchers() { return {
         "badgeCount": ["badgeObserver"],

package/dist/components/q2-tag.js

@@ -79,6 +79,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
         this.optionListLabel = 'options';
         this.popoverAlignment = 'right';
         this.popoverDirection = undefined;
+        this.popoverMaxHeight = undefined;
         this.popoverMinHeight = 150;
         this.theme = undefined;
     }
@@ -151,7 +152,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
         const wrapperClassNames = ['tag'];
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h(Host, { key: 'c9fc6f73127ff99fd620e57432929663cdbb37f1', role: this.optionCount > 0 ? 'list' : undefined }, h("click-elsewhere", { key: '8346fc899733f03207e2ff2d6835ce8296722cf1', onChange: this.onClickElsewhere }, this.optionCount ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, this.label), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount > 0 && (h("q2-popover", { key: '7c058fb98f9a6b0eb8ecbafb2deca06a267d73fa', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: '49286a6bb2c45428ca7098c23ed69eff6c4896b4', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '12d582a691fdbcd7dcee38963e91cd20857aba04' })))))));
+        return (h(Host, { key: 'e3db4189c64feb619ea9c7f377b6f9ea52a48927', role: this.optionCount > 0 ? 'list' : undefined }, h("click-elsewhere", { key: '4e8c4a8acca059010017761cc8b1fa7457eb3862', onChange: this.onClickElsewhere }, this.optionCount ? (h(Fragment, null, h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, h("div", { class: wrapperClassNames.join(' ') }, this.label), h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, h("div", { class: wrapperClassNames.join(' ') }, this.label))), this.optionCount > 0 && (h("q2-popover", { key: 'fd1665df7aa579bd92b691bd90ac87f330dedd70', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, h("q2-option-list", { key: 'fe431b250446c2bd7da6cd0b27b24731e142ceca', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, h("slot", { key: '4836b67e24c40a941dd659c72f7cc99e7568f9eb' })))))));
     }
     get hostElement() { return this; }
     static get style() { return Q2TagStyle0; }
@@ -162,6 +163,7 @@ const Q2Tag$1 = /*@__PURE__*/ proxyCustomElement(class Q2Tag extends HTMLElement
         "optionListLabel": [1, "option-list-label"],
         "popoverAlignment": [1025, "popover-alignment"],
         "popoverDirection": [1, "popover-direction"],
+        "popoverMaxHeight": [2, "popover-max-height"],
         "popoverMinHeight": [2, "popover-min-height"],
         "theme": [513],
         "optionCount": [32],

package/dist/components/q2-tag.js.map

@@ -1 +1 @@
-{"file":"q2-tag.js","mappings":"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","names":["Q2Tag"],"sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.tag {\n    display: flex;\n    width: max-content;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\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    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determine whether the popover is open or closed. */\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 = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\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()\n    popoverDirection: 'up' | 'down';\n\n    /** @deprecated */\n    @Prop()\n    popoverMinHeight: number = 150;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad(): void {\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        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION') return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = 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.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\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    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, open } = this;\n        const wrapperClassNames = ['tag'];\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <Host role={this.optionCount > 0 ? 'list' : undefined}>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {this.optionCount ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                        </div>\n                    )}\n\n                    {this.optionCount > 0 && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-tag.js","mappings":"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","names":["Q2Tag"],"sources":["src/components/q2-tag/q2-tag.scss?tag=q2-tag&encapsulation=shadow","src/components/q2-tag/q2-tag.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: inline-block;\n    position: relative;\n    line-height: 0;\n}\n\n:host(:not(:last-child)) {\n    margin-inline-end: var-list(var-prefixer(tag-margin), --app-scale-2x, 10px);\n}\n\n.tag-wrapper {\n    --comp-tag-btn-size: #{var-list(var-prefixer(tag-btn-size), --app-scale-6x, 30px)};\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    --comp-tag-color: #{var-list(var-prefixer(tag-color), --t-gray-3, #262626)};\n    background: var(--comp-tag-background);\n    color: var(--comp-tag-color);\n    border-radius: var-list(var-prefixer(tag-border-radius), --app-border-radius-1, 4px);\n    position: relative;\n\n    :host([theme='primary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-primary-background, --t-primary, #0079c1)};\n        --comp-tag-color: #{var-list(--tct-tag-primary-font-color, --t-primary-text, #ffffff)};\n    }\n\n    :host([theme='secondary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-secondary-background, --t-secondary, #b3c2cc)};\n        --comp-tag-color: #{var-list(--tct-tag-secondary-font-color, --t-secondary-text, #141414)};\n    }\n\n    :host([theme='tertiary']) & {\n        --comp-tag-background: #{var-list(--tct-tag-tertiary-background, --t-tertiary, #e8f5fc)};\n        --comp-tag-color: #{var-list(--tct-tag-tertiary-font-color, --t-tertiary-text, #141414)};\n    }\n}\n\n.tag {\n    display: flex;\n    width: max-content;\n    height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    line-height: var-list(var-prefixer(tag-height), --app-scale-6x, 30px);\n    padding-inline: var-list(var-prefixer(tag-padding-inline), --app-scale-3x, 15px);\n}\n\n.tag.has-options {\n    padding-right: 6px;\n}\n\n.btn-wrapper {\n    --comp-tag-clickable-size: #{var-list(var-prefixer(tag-clickable-size), 44px)};\n    --comp-tag-btn-offset: calc(calc(calc(var(--comp-tag-clickable-size) - var(--comp-tag-btn-size)) / 2) * -1);\n    --comp-tag-background: #{var-list(var-prefixer(tag-background), --t-gray-13, #e6e6e6)};\n    height: var(--comp-tag-clickable-size);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    right: var(--comp-tag-btn-offset);\n    top: var(--comp-tag-btn-offset);\n    cursor: pointer;\n}\n\nbutton {\n    height: var(--comp-tag-btn-size);\n    stroke: var(--comp-tag-color);\n    --tct-icon-stroke-primary: var(--comp-tag-color);\n    cursor: pointer;\n    border: 0;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    padding-right: 6px;\n    --tct-icon-size: 18px;\n}\n","import {\n    Component,\n    State,\n    Prop,\n    h,\n    ComponentInterface,\n    Host,\n    Listen,\n    Method,\n    Element,\n    EventEmitter,\n    Event,\n    Fragment,\n} from '@stencil/core';\nimport { isEventFromElement, loc, overrideFocus, waitForNextPaint } from 'src/utils';\nimport { shouldShowActionSheet, showActionSheetList } from 'src/utils/action-sheet';\n\n@Component({ tag: 'q2-tag', shadow: true, styleUrl: 'q2-tag.scss' })\nexport class Q2Tag implements ComponentInterface {\n    // #region Own Properties\n\n    dropdownBtn: HTMLButtonElement;\n    mutationObserver: MutationObserver;\n    optionList: HTMLQ2OptionListElement;\n    popoverElement: HTMLQ2PopoverElement;\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    optionCount: number;\n\n    // #endregion\n    // #region Public Property API\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    /**\n     * The text that populates the label.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determine whether the popover is open or closed. */\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 = 'options';\n\n    /** Aligns the popover dropdown to the left or right side of the input field. */\n    @Prop({ mutable: true })\n    popoverAlignment: 'left' | 'right' = 'right';\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()\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 = 150;\n\n    /** The color of the element. */\n    @Prop({ reflect: true })\n    theme: 'primary' | 'secondary' | 'tertiary';\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when a provided option is clicked.\n     *\n     * Requires at least one option to be provided.\n     */\n    @Event()\n    click: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.determineOptionCount);\n        observer.observe(this.hostElement, { childList: true, attributes: true });\n        this.mutationObserver = observer;\n    }\n\n    componentDidLoad(): void {\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        if (!this.optionCount) return;\n        this.dropdownBtn.focus();\n    }\n\n    @Listen('popoverStateChanged')\n    popoverStateHandler({ detail: { open } }: CustomEvent<{ open: boolean }>) {\n        if (this.open !== open) this.open = open;\n        if (open) return;\n        this.optionList.setActiveElement(null);\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closePopover() {\n        if (!this.optionCount || !this.open) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async openPopover() {\n        if (!this.optionCount || this.open) return;\n        this._togglePopover();\n    }\n\n    @Method()\n    async selectOption(value) {\n        if (!this.optionCount) return;\n        await this.openPopover();\n        await waitForNextPaint();\n        const allOptions = await this.optionList.getOptions();\n        const desiredOption = allOptions.find(option => option.value === value);\n        desiredOption?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    _togglePopover() {\n        const { dropdownBtn } = this;\n        dropdownBtn?.click();\n        dropdownBtn?.focus();\n        dropdownBtn.dispatchEvent(new FocusEvent('focus'));\n    }\n\n    determineOptionCount = () => {\n        const numberOfOptions = this.hostElement.querySelectorAll('q2-option').length;\n        this.optionCount = numberOfOptions;\n    };\n\n    handleButtonFocusout = async (event: FocusEvent) => {\n        const relatedTarget = event.relatedTarget as unknown as HTMLElement;\n        if (relatedTarget?.tagName === 'Q2-OPTION') return;\n        this.open = false;\n    };\n\n    handleChange = event => {\n        event.stopPropagation();\n        if (!this.optionCount) return;\n        const { value } = event.detail;\n\n        this.click.emit({ value });\n    };\n\n    handleClick = async (event: MouseEvent) => {\n        event.stopPropagation();\n        this.popoverElement.controlElement = this.dropdownBtn;\n        if (shouldShowActionSheet(this)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            await this.popoverElement.toggle();\n        }\n    };\n\n    handleKeydown = 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.dropdownBtn;\n        if (shouldShowActionSheet(this, event)) {\n            const { value } = await showActionSheetList(this, event);\n            this.click.emit({ value });\n        } else {\n            this.optionList.handleExternalKeydown(event);\n        }\n    };\n\n    handleWrapperClick = () => {\n        this.dropdownBtn.focus();\n        this.dropdownBtn.click();\n    };\n\n    onClickElsewhere = (event: CustomEvent) => {\n        const target = event.target as HTMLClickElsewhereElement;\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    // #endregion\n    // #region Render Methods\n\n    renderHiddenElement() {\n        return (\n            <div\n                id=\"option-description\"\n                class=\"sr\"\n                aria-hidden=\"true\"\n            >\n                {loc('tecton.element.optionList.optionCount', [this.optionCount])}\n            </div>\n        );\n    }\n\n    render() {\n        const { optionCount, open } = this;\n        const wrapperClassNames = ['tag'];\n        if (optionCount) wrapperClassNames.push('has-options');\n\n        return (\n            <Host role={this.optionCount > 0 ? 'list' : undefined}>\n                <click-elsewhere onChange={this.onClickElsewhere}>\n                    {this.optionCount ? (\n                        <Fragment>\n                            <div\n                                class=\"btn-wrapper\"\n                                onClick={this.handleWrapperClick}\n                            >\n                                <button\n                                    class=\"tag-wrapper\"\n                                    ref={el => (this.dropdownBtn = el)}\n                                    test-id=\"btn-control\"\n                                    type=\"button\"\n                                    role=\"combobox\"\n                                    onClick={this.handleClick}\n                                    onKeyDown={this.handleKeydown}\n                                    onFocusout={this.handleButtonFocusout}\n                                    aria-controls=\"option-list\"\n                                    aria-expanded={open ? 'true' : 'false'}\n                                    aria-describedby=\"option-description\"\n                                >\n                                    <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                                    <q2-icon type=\"options\"></q2-icon>\n                                </button>\n                            </div>\n                            {this.renderHiddenElement()}\n                        </Fragment>\n                    ) : (\n                        <div\n                            class=\"tag-wrapper\"\n                            onClick={e => e.stopPropagation()}\n                        >\n                            <div class={wrapperClassNames.join(' ')}>{this.label}</div>\n                        </div>\n                    )}\n\n                    {this.optionCount > 0 && (\n                        <q2-popover\n                            ref={el => (this.popoverElement = el)}\n                            controlElement={this.dropdownBtn}\n                            open={this.open}\n                            maxHeight={this.popoverMaxHeight}\n                            minHeight={this.popoverMinHeight}\n                            direction={this.popoverDirection}\n                            align={this.popoverAlignment}\n                        >\n                            <q2-option-list\n                                id=\"option-list\"\n                                ref={el => (this.optionList = el)}\n                                onChange={this.handleChange}\n                                type=\"menu\"\n                                align=\"right\"\n                                label={loc('tecton.element.optionList.label', [this.optionListLabel])}\n                                no-select\n                            >\n                                <slot />\n                            </q2-option-list>\n                        </q2-popover>\n                    )}\n                </click-elsewhere>\n            </Host>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/components/q2-textarea.js

@@ -1,5 +1,5 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createGuid, g as setMessageHeight, o as overrideFocus, i as isEventFromElement, l as loc, e as labelDOM, m as messagesDOM } from './index2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { g as debounce, c as createGuid, s as setMessageHeight, o as overrideFocus, i as isEventFromElement, l as loc, r as renderLabel, j as renderMessages } from './index2.js';
 import { d as defineCustomElement$2 } from './q2-icon2.js';
 
 const q2TextareaCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{--comp-default-margin:var(--tct-textarea-margin-top, var(--t-textarea-margin-top, var(--app-scale-6x, 30px))) 0 var(--tct-textarea-margin-bottom, var(--t-textarea-margin-bottom, var(--app-scale-6x, 30px)));display:block;margin:var(--tct-textarea-margin, var(--comp-default-margin));font-size:var(--tct-textarea-font-size, var(--t-textarea-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}label{--comp-label-padding:var(--tct-textarea-label-padding, 0 var(--tct-textarea-label-padding-right, var(--t-textarea-label-padding-right, 0)) 0 var(--tct-textarea-label-padding-left, var(--t-textarea-label-padding-left, 0)));--comp-label-margin:var(--tct-textarea-label-margin, var(--tct-textarea-label-margin-top, var(--t-textarea-label-margin-top, 0)) 0 var(--tct-textarea-label-margin-bottom, var(--t-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));display:block;padding:var(--comp-label-padding);margin:var(--comp-label-margin);color:var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit));font-size:var(--tct-textarea-label-font-size, var(--t-textarea-label-font-size, inherit));font-weight:var(--tct-textarea-label-font-weight, var(--t-textarea-label-font-weight, 600));text-transform:var(--tct-textarea-label-text-transform, var(--t-textarea-label-text-transform, none));letter-spacing:var(--tct-textarea-label-letter-spacing, var(--t-textarea-label-letter-spacing, normal));transition:color var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.has-error label{color:var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit)))}:hover label{color:var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}.has-error :hover label{color:var(--tct-textarea-error-hover-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-hover-label-font-color, var(--tct-textarea-label-font-color, inherit)))))}:host(:focus-within) label{color:var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit)))}:host(:focus-within) .has-error label{color:var(--tct-textarea-error-focus-label-font-color, var(--tct-textarea-error-label-font-color, var(--t-textarea-error-label-font-color, var(--tct-textarea-focus-label-font-color, var(--tct-textarea-label-font-color, var(--t-textarea-label-font-color, inherit))))))}.optional-tag{--comp-label-optional-margin:var(--tct-textarea-label-optional-margin, 0 0 0 var(--tct-textarea-label-optional-margin-left, var(--t-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-textarea-label-optional-font-color, var(--t-textarea-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-textarea-label-optional-font-size, var(--t-textarea-label-optional-font-size, 12px));font-weight:var(--tct-textarea-label-optional-font-weight, var(--t-textarea-label-optional-font-weight, 400))}.input-container{min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));height:100%;--comp-default-border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 4px));--comp-textarea-border-top-left-radius:var(--tct-textarea-border-top-left-radius, var(--t-textarea-border-top-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-top-right-radius:var(--tct-textarea-border-top-right-radius, var(--t-textarea-border-top-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-right-radius:var(--tct-textarea-border-bottom-right-radius, var(--t-textarea-border-bottom-right-radius, var(--comp-default-border-radius)));--comp-textarea-border-bottom-left-radius:var(--tct-textarea-border-bottom-left-radius, var(--t-textarea-border-bottom-left-radius, var(--comp-default-border-radius)));--comp-textarea-border-radius:var(--comp-textarea-border-top-left-radius)\n      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)\n      var(--comp-textarea-border-bottom-left-radius);--comp-textarea-border-width:var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) var(--tct-textarea-border-right-width, var(--t-textarea-border-right-width, 1px)) var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) var(--tct-textarea-border-left-width, var(--t-textarea-border-left-width, 1px));--comp-textarea-icon-clearance:34px}:host([disabled]) .input-container{cursor:not-allowed;opacity:var(--tct-textarea-disabled-opacity, var(--t-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.content-container{--comp-textarea-min-height:46px;--comp-textarea-min-width:150px;position:relative;display:inline-block;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));min-width:var(--tct-textarea-min-width, var(--t-textarea-min-width, var(--comp-textarea-min-width)))}:host(:not([cols])) .content-container{width:100%}textarea{--comp-textarea-padding:var(--tct-textarea-padding, var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))) var(--tct-textarea-horizontal-padding, var(--t-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))));--comp-textarea-border-color:var(--tct-textarea-border-color, var(--t-textarea-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #949494)))));--comp-textarea-background:var(--tct-textarea-background, var(--tct-textarea-bg, var(--t-textarea-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd)))))));--comp-textarea-hover-ring-color:var(--tct-textarea-hover-ring-color);--comp-textarea-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-textarea-hover-ring-color), var(--tct-textarea-hover-box-shadow, 0 0 transparent);resize:none;height:100%;-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;min-height:var(--tct-textarea-min-height, var(--t-textarea-min-height, var(--comp-textarea-min-height)));padding:var(--comp-textarea-padding);background:var(--comp-textarea-background);color:var(--tct-textarea-font-color, var(--t-textarea-font-color, var(--t-input-font-color, inherit)));border-width:var(--comp-textarea-border-width);border-style:solid;border-color:var(--comp-textarea-border-color);border-radius:var(--comp-textarea-border-radius);box-shadow:var(--tct-textarea-box-shadow, var(--t-textarea-box-shadow, none));scrollbar-width:thin;scrollbar-color:var(--t-a11y-gray-color) transparent;--comp-textarea-tween:var(--tct-textarea-tween, var(--t-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))));transition:border-width var(--comp-textarea-tween), border-color var(--comp-textarea-tween), box-shadow var(--comp-textarea-tween)}textarea::-webkit-scrollbar{width:var(--app-scale-1x);height:var(--app-scale-1x);margin:var(--app-scale-1x)}textarea::-webkit-scrollbar-thumb{background:var(--t-a11y-gray-color);border-radius:2px}textarea::-webkit-scrollbar-track{background:transparent}textarea:not([cols]){width:100%}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance);border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-background, var(--comp-textarea-background))}textarea:hover{border-color:var(--tct-textarea-hover-border-color, var(--comp-textarea-border-color));background:var(--tct-textarea-hover-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))}.has-error textarea:hover{border-color:var(--tct-textarea-error-hover-border-color, var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a))));background:var(--tct-textarea-error-hover-background, var(--tct-textarea-error-background, var(--comp-textarea-background)));box-shadow:var(--tct-textarea-error-hover-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-hover-box-shadow, var(--comp-textarea-hover-ring))))}textarea:focus{border-color:var(--tct-textarea-focus-border-color, var(--comp-textarea-border-color));background:var(--tct-textarea-focus-background, var(--comp-textarea-background));box-shadow:var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))}.has-error textarea:focus{border-color:var(--tct-textarea-error-focus-border-color, var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-textarea-error-focus-background, var(--tct-textarea-error-background, var(--tct-textarea-focus-background, var(--comp-textarea-background))));box-shadow:var(--tct-textarea-error-focus-box-shadow, var(--tct-textarea-error-box-shadow, var(--tct-textarea-focus-box-shadow, var(--const-double-focus-ring))))}textarea::placeholder{color:var(--tct-textarea-placeholder-font-color, var(--t-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))))}textarea[disabled]{cursor:not-allowed}textarea.resize-vertical-auto{overflow:hidden}.has-error textarea{padding-right:var(--comp-textarea-icon-clearance)}.has-error textarea:not(:focus){border-color:var(--tct-textarea-error-border-color, var(--t-textarea-error-border-color, var(--const-stoplight-alert, #d20a0a)))}q2-icon{margin-top:calc(var(--tct-textarea-border-top-width, var(--t-textarea-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-textarea-border-bottom-width, var(--t-textarea-border-bottom-width, 1px)) / 2);pointer-events:none;position:absolute;top:var(--tct-textarea-vertical-padding, var(--t-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))));color:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))));right:0;margin-right:var(--tct-scale-2x, var(--app-scale-2x, 10px));--tct-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))));--t-icon-stroke-primary:var(--tct-textarea-icon-stroke-primary, var(--t-textarea-icon-stroke-primary, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))))}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--t-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));box-shadow:var(--tct-textarea-message-box-shadow, var(--t-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-textarea-messages-tween, var(--t-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:2px;z-index:1;position:absolute;width:100%;color:var(--tct-textarea-messages-font-color, var(--t-textarea-messages-font-color, inherit))}.max-length{color:var(--tct-textarea-max-length-color, var(--t-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-textarea-max-length-font-size, var(--t-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));position:absolute;right:0}.btn-resize{--tct-textarea-resize-icon-padding:calc(\n      calc(\n              var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px))) - var(--tct-textarea-resize-icon-size, var(--t-textarea-resize-icon-size, 12px))\n          ) / 2\n  );width:var(--tct-textarea-resize-btn-width, var(--t-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)));height:var(--tct-textarea-resize-btn-height, var(--t-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px)));background:var(--tct-textarea-resize-btn-background, var(--t-textarea-resize-btn-background, transparent));stroke:var(--tct-textarea-resize-color, var(--t-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77))));border:0;position:absolute;right:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);bottom:calc(var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding)) * -1 + 2px);display:block;padding:var(--tct-textarea-resize-icon-padding, var(--t-textarea-resize-icon-padding));font-size:0}.btn-resize:focus{outline:none;box-shadow:none}:host([resize=both]) .btn-resize{cursor:se-resize}:host([resize=vertical]) .btn-resize,:host([resize=vertical-auto]) .btn-resize{cursor:s-resize}:host([resize=horizontal]) .btn-resize{cursor:e-resize}";
@@ -12,6 +12,10 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
         this.__attachShadow();
         this.change = createEvent(this, "change", 7);
         this.input = createEvent(this, "input", 7);
+        this.debouncedScreenReaderCharacterCount = debounce(() => {
+            this.updateScreenReaderCharacterCount();
+        }, 2000);
+        this.describeByScreenReaderCharacterCount = true;
         this.guid = createGuid();
         this.scheduledAfterRender = [];
         this.checkCols = () => {
@@ -65,6 +69,7 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
         };
         this.onTextareaBlur = () => {
             const { valueOnFocus, textareaField: { value }, } = this;
+            this.describeByScreenReaderCharacterCount = true;
             this.hasFocus = false;
             setMessageHeight(this);
             if (valueOnFocus !== value)
@@ -83,7 +88,10 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
         this.onTextareaInput = (event) => {
             event.stopPropagation();
             const value = event.target.value;
+            this.describeByScreenReaderCharacterCount = false;
             this.increaseHeightIfOverflowing();
+            if (this.maxlength)
+                this.debouncedScreenReaderCharacterCount();
             this.input.emit({ value });
         };
         this.onTouchMove = (event) => {
@@ -105,8 +113,13 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
             document.addEventListener('touchmove', this.onTouchMove);
             document.addEventListener('touchend', this.onTouchMove);
         };
+        this.updateScreenReaderCharacterCount = () => {
+            var _a;
+            this.screenReaderCharacterCount = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        };
         this.downParams = undefined;
         this.hasFocus = undefined;
+        this.screenReaderCharacterCount = undefined;
         this.cols = undefined;
         this.disabled = undefined;
         this.errors = undefined;
@@ -129,6 +142,9 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
         if (isNaN(this.maxlength)) {
             this.maxlength = undefined;
         }
+        if (this.maxlength) {
+            this.updateScreenReaderCharacterCount();
+        }
     }
     componentDidLoad() {
         overrideFocus(this.hostElement);
@@ -182,6 +198,11 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
     hintsObserver() {
         this.hasFocus && this.scheduledAfterRender.push(() => setMessageHeight(this));
     }
+    maxlengthObserver() {
+        if (this.maxlength) {
+            this.updateScreenReaderCharacterCount();
+        }
+    }
     rowsObserver() {
         this.contentContainer.style.height = null;
     }
@@ -200,7 +221,17 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
         return Array.isArray(this.errors) && this.errors.length > 0;
     }
     get inputDescribedBy() {
-        return this.showMessages ? `${this.inputId}-description` : undefined;
+        let describedBy = undefined;
+        if (this.showMessages) {
+            describedBy = `${this.inputId}-description`;
+        }
+        // Remove screen reader character count from described by after typing
+        // starts to avoid double announcement. It's needed on focus to announce
+        // the character count when field gains focus.
+        if (this.maxlength && this.describeByScreenReaderCharacterCount) {
+            describedBy = describedBy ? `${describedBy} ${this.inputId}-max-length` : `${this.inputId}-max-length`;
+        }
+        return describedBy;
     }
     get inputId() {
         return `input-guid-${this.guid}`;
@@ -223,14 +254,6 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
         const focusClass = this.hasFocus ? ' has-focus' : '';
         return `field-container${errorClass}${valueClass}${focusClass}`;
     }
-    inputDOM() {
-        const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';
-        return (h("div", { class: "input-container" }, h("textarea", { id: this.inputId, class: textareaClasses, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": loc('tecton.element.input.resize'), tabIndex: -1 }, h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
-    }
-    maxLengthDOM() {
-        var _a;
-        return (h("div", { class: "max-length", "aria-hidden": "true" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, "/", this.maxlength));
-    }
     setHeight(event) {
         var _a, _b;
         const { contentContainer, resize, downParams: { height, y }, } = this;
@@ -260,14 +283,26 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
     }
     // #endregion
     // #region Render Methods
+    renderInput() {
+        const textareaClasses = this.resize === 'vertical-auto' ? 'resize-vertical-auto' : '';
+        return (h("div", { class: "input-container" }, h("textarea", { id: this.inputId, class: textareaClasses, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, "test-id": "inputField", maxLength: this.maxlength, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-required": `${!this.optional}`, "aria-label": this.hideLabel && this.label, spellcheck: this.spellcheck, rows: this.rows || 3, cols: this.cols, value: this.value, ref: el => (this.textareaField = el), readonly: !!this.readonly, disabled: !!this.disabled, maxlength: this.maxlength, onInput: this.onTextareaInput, onChange: this.onTextareaChange, onFocus: this.onTextareaFocus, onBlur: this.onTextareaBlur }), this.hasError ? (h("q2-icon", { type: "error", class: "icon-error" })) : (''), this.showResize && (h("button", { onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart, class: "btn-resize", "aria-label": loc('tecton.element.input.resize'), tabIndex: -1 }, h("svg", { "aria-hidden": "true", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.5 11.5l3-3m-7 3l7-7m-11 7l11-11", fill: "none", "stroke-stroke-linecap": "square" }))))));
+    }
+    renderMaxLength() {
+        var _a;
+        return (h(Fragment, null, h("div", { class: "max-length", "aria-hidden": "true" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, "/", this.maxlength), h("div", { "aria-live": "polite", class: "sr", id: `${this.inputId}-max-length`, "test-id": "max-length-sr" }, loc('tecton.element.textarea.characterCount.screenReader', [
+            this.screenReaderCharacterCount,
+            this.maxlength,
+        ]))));
+    }
     render() {
-        return (h("div", { key: 'b4c03a5742684b04b9794fddb0bb8d8677d57be5', class: this.wrapperClasses }, labelDOM(this), h("div", { key: 'e80bd2b2e9e2344479def41185418f34b8feb40c', class: "content-container", ref: el => (this.contentContainer = el) }, this.inputDOM(), this.maxlength ? this.maxLengthDOM() : '', messagesDOM(this))));
+        return (h("div", { key: '054133483b317d5298a8fb08671d84e917888a3a', class: this.wrapperClasses }, renderLabel(this), h("div", { key: 'dd234ec95a89c23a473c9987a64a5dcfecd7fd44', class: "content-container", ref: el => (this.contentContainer = el) }, this.renderInput(), this.maxlength ? this.renderMaxLength() : '', renderMessages(this))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
         "cols": ["colsObserver"],
         "errors": ["errorsObserver"],
         "hints": ["hintsObserver"],
+        "maxlength": ["maxlengthObserver"],
         "rows": ["rowsObserver"],
         "value": ["valueObserver"]
     }; }
@@ -290,11 +325,13 @@ const Q2Textarea$1 = /*@__PURE__*/ proxyCustomElement(class Q2Textarea extends H
         "value": [1025],
         "downParams": [32],
         "hasFocus": [32],
+        "screenReaderCharacterCount": [32],
         "setValue": [64]
     }, [[0, "change", "onHostElementChange"], [0, "focus", "onHostElementFocus"], [0, "input", "onHostElementInput"]], {
         "cols": ["colsObserver"],
         "errors": ["errorsObserver"],
         "hints": ["hintsObserver"],
+        "maxlength": ["maxlengthObserver"],
         "rows": ["rowsObserver"],
         "value": ["valueObserver"]
     }]);