q2-tecton-elements 1.67.2 → 1.68.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-otp.js","sourceRoot":"","sources":["../../../../src/components/q2-otp/q2-otp.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';\n\n/**\n * @name One-Time Password\n * @category Forms\n * @summary Use for entering a short one-time verification code.\n */\n@Component({ tag: 'q2-otp', shadow: true, styleUrl: 'q2-otp.scss' })\nexport class Q2Otp {\n    // #region Own Properties\n\n    private readonly defaultSendCodeLabel = 'tecton.element.otp.sendCode';\n    private readonly defaultSendCodeLabelValue = 'Send code';\n    private readonly defaultSubmitLabel = 'tecton.element.otp.verify';\n    private readonly defaultSubmitLabelValue = 'Verify';\n    guid = createGuid();\n    hasAutoFocused = false;\n    inputRef: HTMLInputElement;\n    sendCodeRef: HTMLElement;\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    hasFocus: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Focuses the first one-time password field when the component loads. */\n    @Prop({ reflect: true })\n    autoFocus: boolean = false;\n\n    /** Triggers submission when the last field is filled. */\n    @Prop({ reflect: true })\n    autoSubmit: boolean = false;\n\n    /** Clears all fields and returns focus to the first field when `state` becomes `error`. */\n    @Prop({ reflect: true })\n    clearOnError: boolean = false;\n\n    /** Disables all one-time password fields. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * Error message rendered below the submit area.\n     * @localizable\n     */\n    @Prop()\n    errorMessage: string;\n\n    /**\n     * Helper text content.\n     * @localizable\n     */\n    @Prop()\n    helperText: string;\n\n    /**\n     * Visible label above the one-time password fields.\n     * @localizable\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Number of one-time password fields. */\n    @Prop({ reflect: true })\n    length: number = 4 | 6 | 8;\n\n    /** Obscures entered characters. */\n    @Prop({ reflect: true })\n    masked: boolean = false;\n\n    /**\n     * Button text during processing.\n     * @localizable\n     */\n    @Prop()\n    processingLabel: string;\n\n    /**\n     * Button text for the send-code action.\n     * @localizable\n     */\n    @Prop()\n    sendCodeLabel: string;\n\n    /** Toggles helper text visibility. */\n    @Prop({ reflect: true })\n    showHelperText: boolean = false;\n\n    /**\n     * Renders fields in two equal groups with a dash separator.\n     * @private\n     */\n    @Prop({ reflect: true })\n    split: boolean = false;\n\n    /**\n     * Sets the visual status for the one-time password fields.\n     *\n     * - `ready` — Shows the send-code button and hides the input fields until the user requests a code.\n     * - `error` — Displays an error style on the fields. If `errorMessage` is set, it renders below the submit area.\n     *   When `clearOnError` is enabled, all fields are cleared and focus returns to the first field.\n     * - `success` — Locks the input, replaces the submit button with a success indicator, and displays the\n     *   `successMessage` if provided.\n     * - `verifying` — Locks the input and puts the submit button into a loading state. When combined with `autoSubmit`,\n     *   a processing overlay with `processingLabel` is shown over the fields.\n     */\n    @Prop({ reflect: true, mutable: true })\n    state: 'error' | 'ready' | 'success' | 'verifying' | undefined;\n\n    /**\n     * Renders a submit button with this label.\n     * @localizable\n     */\n    @Prop()\n    submitLabel: string;\n\n    /**\n     * Success message rendered below the submit area.\n     * @localizable\n     */\n    @Prop()\n    successMessage: string;\n\n    /** The composed one-time password value. */\n    @Prop({ mutable: true })\n    value: string = '';\n\n    // #endregion\n    // #region Events\n\n    /** Emitted when the fields are cleared. */\n    @Event()\n    tctClear: EventEmitter<{ value: string }>;\n\n    /** Emitted when all fields are filled. */\n    @Event()\n    tctComplete: EventEmitter<{ value: string }>;\n\n    /** Emitted when any field value changes. */\n    @Event()\n    tctInput: EventEmitter<{ value: string }>;\n\n    /** Emitted when the send-code button is clicked. */\n    @Event()\n    tctSendCode: EventEmitter<void>;\n\n    /** Emitted when the submit button is clicked or auto-submit triggers. */\n    @Event()\n    tctSubmit: EventEmitter<{ value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    componentWillLoad(): void {\n        this.value = this.filterDigits(this.value);\n    }\n\n    componentDidLoad(): void {\n        overrideFocus(this.hostElement);\n        this.focusOnLoad();\n    }\n\n    componentDidRender(): void {\n        this.focusOnLoad();\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('focus')\n    onHostElementFocus(event: FocusEvent): void {\n        if (this.disabled || this.locksInput) return;\n        if (!isEventFromElement(event, this.hostElement)) return;\n        if (this.isAwaitingSendCode) {\n            this.sendCodeRef?.focus();\n            return;\n        }\n        this.inputRef?.focus();\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Clears all fields, focuses the first field, and emits `tctClear`.\n     */\n    @Method()\n    async clear(): Promise<void> {\n        this.clearValue(true);\n    }\n\n    /**\n     * Clears the component and resets error, success, and processing state.\n     */\n    @Method()\n    async reset(): Promise<void> {\n        this.clearValue(true);\n        this.state = undefined;\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('autoFocus')\n    autoFocusObserver(): void {\n        this.focusOnLoad();\n    }\n\n    @Watch('length')\n    lengthObserver(): void {\n        if (this.value.length > this.normalizedLength) {\n            this.value = this.value.slice(0, this.normalizedLength);\n        }\n    }\n\n    @Watch('state')\n    stateObserver(state: string | null): void {\n        if (state === null) {\n            Promise.resolve().then(() => {\n                if (this.state === null) this.state = undefined;\n            });\n            return;\n        }\n\n        if (state === 'error' && this.clearOnError) {\n            this.clearValue(true);\n        }\n    }\n\n    @Watch('value')\n    valueObserver(): void {\n        const digits = this.filterDigits(this.value);\n        if (digits !== this.value) {\n            this.value = digits;\n        }\n        if (this.inputRef && this.inputRef.value !== digits) {\n            this.inputRef.value = digits;\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get activeSlotIndex(): number {\n        return Math.min(this.value.length, this.normalizedLength - 1);\n    }\n\n    get componentId(): string {\n        return `q2-otp-${this.guid}`;\n    }\n\n    get describedBy(): string | undefined {\n        const ids = [];\n        if (this.state === 'error' && this.errorMessage) ids.push(this.messageId);\n        if (this.state === 'success' && this.successMessage) ids.push(this.messageId);\n        return ids.length ? ids.join(' ') : undefined;\n    }\n\n    get hasVisibleHelperText(): boolean {\n        return this.showHelperText && !!this.helperText;\n    }\n\n    get helperTextId(): string {\n        return `${this.componentId}-helper-text`;\n    }\n\n    get inputAriaLabel(): string {\n        const inputLabel = `${this.localizedLabel} (${this.normalizedLength} ${loc('tecton.element.otp.digits')})`;\n        return [this.hasVisibleHelperText ? this.localizedHelperText : '', inputLabel].filter(Boolean).join(' ');\n    }\n\n    get isAwaitingSendCode(): boolean {\n        return this.state === 'ready';\n    }\n\n    get isComplete(): boolean {\n        return this.value.length === this.normalizedLength;\n    }\n\n    get isSuccess(): boolean {\n        return this.state === 'success';\n    }\n\n    get isVerifying(): boolean {\n        return this.state === 'verifying';\n    }\n\n    get labelId(): string {\n        return `${this.componentId}-label`;\n    }\n\n    get localizedHelperText(): string {\n        return loc(this.helperText);\n    }\n\n    get localizedLabel(): string {\n        return loc(this.label);\n    }\n\n    get localizedProcessingLabel(): string {\n        return loc(this.processingLabel || 'Verifying');\n    }\n\n    get localizedSendCodeLabel(): string {\n        if (this.sendCodeLabel) return loc(this.sendCodeLabel);\n\n        const localizedLabel = loc(this.defaultSendCodeLabel);\n        return localizedLabel === this.defaultSendCodeLabel ? this.defaultSendCodeLabelValue : localizedLabel;\n    }\n\n    get localizedSubmitLabel(): string {\n        if (this.submitLabel) return loc(this.submitLabel);\n\n        const localizedLabel = loc(this.defaultSubmitLabel);\n        return localizedLabel === this.defaultSubmitLabel ? this.defaultSubmitLabelValue : localizedLabel;\n    }\n\n    get locksInput(): boolean {\n        return this.isVerifying || this.isSuccess;\n    }\n\n    get messageId(): string {\n        return `${this.componentId}-message`;\n    }\n\n    get normalizedLength() {\n        const length = Number(this.length);\n        return [4, 6, 8].includes(length) ? length : 6;\n    }\n\n    clearValue(emitEvent = false): void {\n        this.value = '';\n        if (this.inputRef) this.inputRef.value = '';\n        this.inputRef?.focus();\n        if (emitEvent) this.tctClear.emit({ value: '' });\n    }\n\n    filterDigits(value: string): string {\n        return value.replace(/\\D/g, '').slice(0, this.normalizedLength);\n    }\n\n    focusOnLoad(): void {\n        if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput) return;\n\n        setTimeout(() => {\n            if (!this.autoFocus || this.hasAutoFocused || this.disabled || this.locksInput || !this.inputRef) {\n                return;\n            }\n\n            this.hasAutoFocused = true;\n            this.hasFocus = true;\n            this.inputRef.focus();\n        }, 100);\n    }\n\n    handleComplete(digits: string): void {\n        this.tctComplete.emit({ value: digits });\n\n        if (this.autoSubmit) {\n            setTimeout(() => this.submit(digits), 150);\n        }\n    }\n\n    handleFocusIn = () => {\n        if (this.state === 'error') {\n            this.value = '';\n            if (this.inputRef) this.inputRef.value = '';\n            this.state = undefined;\n        }\n        this.hasFocus = true;\n    };\n\n    handleFocusOut = (event: FocusEvent) => {\n        if (this.autoFocus && this.hasAutoFocused && !this.value && !event.relatedTarget) {\n            return;\n        }\n        this.hasFocus = false;\n    };\n\n    handleInputEvent = () => {\n        if (this.disabled || this.locksInput) {\n            this.inputRef.value = this.value;\n            return;\n        }\n\n        const digits = this.filterDigits(this.inputRef.value);\n        this.inputRef.value = digits;\n\n        if (this.state === 'error') {\n            this.state = undefined;\n        }\n\n        this.value = digits;\n        this.tctInput.emit({ value: digits });\n\n        if (digits.length === this.normalizedLength) {\n            this.handleComplete(digits);\n        }\n    };\n\n    handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== 'Enter') return;\n        if (this.disabled || this.locksInput || !this.isComplete) return;\n\n        event.preventDefault();\n        this.submit();\n    };\n\n    handlePaste = (event: ClipboardEvent) => {\n        event.preventDefault();\n        if (this.disabled || this.locksInput) return;\n\n        const pastedValue = event.clipboardData?.getData('text') ?? '';\n        const digits = this.filterDigits(pastedValue);\n\n        this.inputRef.value = digits;\n\n        if (this.state === 'error') {\n            this.state = undefined;\n        }\n\n        this.value = digits;\n        this.tctInput.emit({ value: digits });\n\n        if (digits.length === this.normalizedLength) {\n            this.handleComplete(digits);\n        }\n    };\n\n    handleSendCodeClick = () => {\n        if (this.disabled) return;\n\n        this.inputRef?.focus();\n        this.state = undefined;\n        this.tctSendCode.emit();\n    };\n\n    handleSubmitClick = () => {\n        if (this.isVerifying || this.isSuccess) return;\n        this.submit();\n    };\n\n    submit(value = this.value): void {\n        this.state = 'verifying';\n        this.tctSubmit.emit({ value });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderFields() {\n        return Array.from({ length: this.normalizedLength }, (_, index) => {\n            const char = this.value[index] || '';\n            const isActive = this.hasFocus && index === this.activeSlotIndex;\n            const hasValue = !!char;\n\n            return [\n                this.split && index === this.normalizedLength / 2 && (\n                    <span\n                        aria-hidden=\"true\"\n                        class=\"otp-separator\"\n                    >\n                        -\n                    </span>\n                ),\n                <div\n                    class={{\n                        'otp-slot': true,\n                        'is-active': isActive,\n                        'has-value': hasValue,\n                    }}\n                >\n                    {isActive && !hasValue ? (\n                        <span\n                            class=\"otp-caret\"\n                            aria-hidden=\"true\"\n                        />\n                    ) : this.masked && hasValue ? (\n                        <span class=\"otp-dot\" />\n                    ) : (\n                        <span class=\"otp-char\">{char}</span>\n                    )}\n                </div>,\n            ];\n        });\n    }\n\n    renderHelperText() {\n        if (!this.hasVisibleHelperText) return;\n        return (\n            <div\n                class=\"helper-text\"\n                id={this.helperTextId}\n            >\n                {this.localizedHelperText}\n            </div>\n        );\n    }\n\n    renderLabel() {\n        if (!this.label) return;\n        return (\n            <div\n                class=\"otp-label\"\n                id={this.labelId}\n            >\n                {this.localizedLabel}\n            </div>\n        );\n    }\n\n    renderMessage() {\n        if (this.state === 'error' && this.errorMessage) {\n            return (\n                <q2-message\n                    appearance=\"minimal\"\n                    class=\"otp-message\"\n                    id={this.messageId}\n                    type=\"error\"\n                >\n                    {loc(this.errorMessage)}\n                </q2-message>\n            );\n        }\n\n        if (this.state === 'success' && this.successMessage) {\n            return (\n                <q2-message\n                    appearance=\"minimal\"\n                    class=\"otp-message\"\n                    id={this.messageId}\n                    type=\"success\"\n                >\n                    {loc(this.successMessage)}\n                </q2-message>\n            );\n        }\n    }\n\n    renderProcessingOverlay() {\n        if (this.autoSubmit && this.isVerifying) {\n            return (\n                <div class=\"processing-overlay\">\n                    <q2-loading label={this.localizedProcessingLabel} />\n                </div>\n            );\n        }\n    }\n\n    renderSendCodeButton() {\n        if (!this.isAwaitingSendCode) return;\n\n        return (\n            <q2-btn\n                block\n                class=\"send-code-button\"\n                disabled={this.disabled}\n                intent=\"workflow-primary\"\n                label={this.localizedSendCodeLabel}\n                onClick={this.handleSendCodeClick}\n                ref={el => (this.sendCodeRef = el)}\n            />\n        );\n    }\n\n    renderSubmitArea() {\n        if (this.isSuccess) {\n            return (\n                <q2-btn\n                    block\n                    class=\"submit-button\"\n                    intent=\"neutral\"\n                    onClick={this.handleSubmitClick}\n                >\n                    <q2-icon type=\"checkmark\" />\n                    {loc('Success')}\n                </q2-btn>\n            );\n        }\n\n        return (\n            <q2-btn\n                block\n                class=\"submit-button\"\n                disabled={this.disabled || !this.isComplete}\n                intent=\"workflow-primary\"\n                label={this.isVerifying ? this.localizedProcessingLabel : this.localizedSubmitLabel}\n                loading={this.isVerifying}\n                onClick={this.handleSubmitClick}\n            />\n        );\n    }\n\n    render() {\n        return (\n            <div\n                aria-busy={this.isVerifying ? 'true' : undefined}\n                aria-labelledby={this.label ? this.labelId : undefined}\n                class={{\n                    'otp-container': true,\n                    'has-focus': this.hasFocus,\n                    'is-masked': this.masked,\n                    'send-code-pending': this.isAwaitingSendCode,\n                    'state-error': this.state === 'error',\n                    'state-success': this.state === 'success',\n                    'state-verifying': this.isVerifying,\n                    [`length-${this.normalizedLength}`]: true,\n                }}\n                role=\"group\"\n            >\n                {this.renderSendCodeButton()}\n                <div class={{ 'otp-content': true, 'send-code-hidden': this.isAwaitingSendCode }}>\n                    {this.renderLabel()}\n                    <div class=\"otp-control-group\">\n                        <div class=\"fields-shell\">\n                            <div class=\"fields-container\">\n                                <input\n                                    aria-describedby={this.describedBy}\n                                    aria-invalid={this.state === 'error' ? 'true' : 'false'}\n                                    aria-label={this.inputAriaLabel}\n                                    autocomplete=\"one-time-code\"\n                                    autofocus={this.autoFocus}\n                                    class=\"otp-hidden-input\"\n                                    disabled={this.disabled || this.isVerifying || this.isSuccess}\n                                    inputmode=\"numeric\"\n                                    maxLength={this.normalizedLength}\n                                    onBlur={this.handleFocusOut}\n                                    onFocus={this.handleFocusIn}\n                                    onInput={this.handleInputEvent}\n                                    onKeyDown={this.handleKeyDown}\n                                    onPaste={this.handlePaste}\n                                    pattern=\"[0-9]*\"\n                                    ref={el => (this.inputRef = el)}\n                                    test-id=\"q2OtpInput\"\n                                    type=\"text\"\n                                    value={this.value}\n                                />\n                                {this.renderFields()}\n                            </div>\n                            {this.renderProcessingOverlay()}\n                        </div>\n                        {this.renderSubmitArea()}\n                        {this.renderMessage()}\n                    </div>\n                    {this.renderHelperText()}\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

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

@@ -65,6 +65,28 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-pagination-color?: (<color>) Controls the optional text color of the pagination container.
+ * @prop --tct-pagination-font-size?: (<length-percentage>) Controls the optional font size of pagination text.
+ * @prop --tct-pagination-font-weight?: (<number>) Controls the optional font weight of pagination text.
+ * @prop --tct-pagination-height: (<length>) Controls the height of the pagination container and input wrapper.
+ * @prop --tct-pagination-column-gap: (<length-percentage>) Controls the column gap between pagination groups.
+ * @prop --tct-pagination-row-gap: (<length-percentage>) Controls the row gap between pagination groups in the stacked layout.
+ * @prop --tct-pagination-controls-gap: (<length-percentage>) Controls the gap between elements within the input-display controls.
+ * @prop --tct-pagination-btn-gap?: (<length-percentage>) Controls the optional gap between previous/next buttons in the button group.
+ * @prop --tct-pagination-btn-border?: (*) Controls the optional border shorthand of pagination buttons.
+ * @prop --tct-pagination-btn-border-radius?: (<length-percentage>) Controls the optional corner radius of pagination buttons.
+ * @prop --tct-pagination-btn-hover-background: (<color>) Controls the background color of pagination buttons on hover.
+ * @prop --tct-pagination-btn-icon-stroke-primary: (<color>) Controls the primary stroke color of pagination button icons.
+ * @prop --tct-pagination-btn-icon-stroke-secondary: (<color>) Controls the secondary stroke color of pagination button icons.
+ * @prop --tct-pagination-icon-color: (<color>) Controls the color of pagination icons (non-button icons).
+ * @prop --tct-pagination-icon-size: (<length>) Controls the size of pagination icons (non-button icons).
+ * @prop --tct-pagination-input-height: (<length>) Controls the height of the pagination page-number input.
+ * @prop --tct-pagination-input-width: (<length>) Controls the width of the pagination page-number input.
+ * @prop --tct-pagination-select-height: (<length>) Controls the height of the per-page select input.
+ * @prop --tct-pagination-perpage-width: (<length-percentage>) Controls the width of the per-page select.
+ * @prop --tct-pagination-perpage-min-width: (<length>) Controls the minimum width of the per-page select.
+ */
 :host {
   display: flex;
   width: 100%;

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

@@ -304,7 +304,7 @@ export class Q2Pagination {
                 total,
             });
         }
-        return (h("nav", { key: '0947c1d04f042cb5f096d74146cc700e7993f277', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: '6da46e6c76dffa66026057e53c7515bcf00576e0', class: "description", "test-id": "description" }, pagesOnly
+        return (h("nav", { key: '8763672430fe7db0f31881ddb56ae2e145db2e1d', class: this.containerClasses.join(' '), ref: el => (this.containerElement = el), "aria-label": loc('tecton.element.pagination.title') }, h("div", { key: 'ed956602d3b7d8aef4265f98e9c83224e3d9ddfb', class: "description", "test-id": "description" }, pagesOnly
             ? loc('tecton.element.pagination.pages', {
                 current: page,
                 total: totalPages,
@@ -313,10 +313,10 @@ export class Q2Pagination {
                 range: currentRange,
                 recordType: recordType.toLowerCase(),
                 total: total.toLocaleString(),
-            })), h("div", { key: '35963f235d6b549eedb8c9a443ecde053ecd8682', class: "controls" }, h("div", { key: '7016ffd2c95a76d34fd7ca112472a2a1067d7012', class: "btn-group" }, h("q2-btn", { key: 'a2a826b5ed84cedf548eaaf8aa2a8f95ad5085e6', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '7ebc8f748c55786954292287b4f593841a367e28', type: "chevron-double-left" })), h("q2-btn", { key: 'dfd853b3bee34fe837dc9c621829fa59c44bc81c', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '519ef8ea441d04291b4393ba1ab03cd2198e88b3', type: "chevron-left" }))), h("div", { key: 'fd9d2f84689b857d134babd6d7d38de5f347488d', class: "input-display", hidden: isFullViewHidden }, h("span", { key: 'c8a48d708096badc6796a9caef840c807aa06db7', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '1e9965fa782cdf724e261294ad22eb34305c1c69', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'e61dc0d32f806ffbee54736755f8c2c8fb3dc2a4', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
+            })), h("div", { key: '97e385cf0f32b0f4aff62c501010eda743f731d4', class: "controls" }, h("div", { key: '5a21d4a3cd3d20fb7e533001537ba6533a135b7e', class: "btn-group" }, h("q2-btn", { key: 'fab99b68ddede211b84ea09ec2c0aa908b20c84f', ref: el => (this.firstPageBtn = el), label: loc('tecton.element.pagination.goToFirstPage'), disabled: disabled || onFirstPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(1), "test-id": "firstPageBtn", "hide-label": true }, h("q2-icon", { key: '78ddca1e5e40f1006ccc76d37a2acbef3a9b367e', type: "chevron-double-left" })), h("q2-btn", { key: 'ee99beff9982742339575be746768f0e0ba4b7dd', ref: el => (this.prevPageBtn = el), label: prevButtonLabel, disabled: disabled || onFirstPage, onTctClick: () => this.handlePageChange(page - 1), "test-id": "prevPageBtn", "hide-label": true }, h("q2-icon", { key: '2217e33508d661f4633aae1fc2a7606239c5cca3', type: "chevron-left" }))), h("div", { key: '0ef2e367f04e294dc5d55155d9cd1dd438b5d1e9', class: "input-display", hidden: isFullViewHidden }, h("span", { key: '94e65818ce517fe5b3039dc28321cf02f9bdd62a', "aria-hidden": "true" }, loc('tecton.element.pagination.page')), h("div", { key: '77b516a12af1e9473713088085481b41e7378dc6', class: "input-wrapper", onClick: () => this.inputField.dispatchEvent(new FocusEvent('focus')) }, h("q2-input", { key: 'f994ddf1fd6cbfe66bd7551f3d08d752177d079b', ref: el => (this.inputField = el), type: "number", value: `${page}`, min: 1, max: this.totalPages, hideLabel: true, optional: true, label: `${loc('tecton.element.pagination.page')} (${loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()])})`, onChange: event => event.stopImmediatePropagation(), onTctChange: event => {
                 event.stopPropagation();
                 this.handlePageChange(event.detail.value);
-            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: 'ea7d626698765518e2e5dcd2118b20106413134d', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: 'eb93f6858f18c382d5ebe97007c7de6a3313e6cf', class: "btn-group" }, h("q2-btn", { key: '0ab9275fbfbc3514571f2fb308b1a15345816cf5', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '9968130c79eaaa564f1ca47ccc9e09a0d9ec564b', type: "chevron-right" })), h("q2-btn", { key: '08c3ebf15360ba2f1ccf56d2b12c458a2ebdb71e', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: '83351e90f2645f9c2e8854ff46a684a9f43f339b', type: "chevron-double-right" })))), h("div", { key: 'dcdb653d221e0a92910a6ece5e234126e66c8410', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
+            }, "test-id": "pageInput", current: "page", disabled: disabled })), h("span", { key: '5e2e425ef6f23d54014d1ac55cfc70dc637b8ac6', "aria-hidden": "true" }, loc('tecton.element.pagination.ofPages', [totalPages.toLocaleString()]))), h("div", { key: '0c786061e114793b5ea6a99dac53e3419a48867c', class: "btn-group" }, h("q2-btn", { key: '57bd0ac272a6d80000795511615ed198d0baf6ee', ref: el => (this.nextPageBtn = el), label: nextButtonLabel, disabled: disabled || onLastPage, onTctClick: () => this.handlePageChange(page + 1), "test-id": "nextPageBtn", "hide-label": true }, h("q2-icon", { key: '939f705dee78a26c664c82f783481316f5ff0813', type: "chevron-right" })), h("q2-btn", { key: '5e3c35772a15c571bad68f57f53494fe83af0959', ref: el => (this.lastPageBtn = el), label: "tecton.element.pagination.goToLastPage", disabled: disabled || onLastPage, hidden: isFullViewHidden, onTctClick: () => this.handlePageChange(totalPages), "test-id": "lastPageBtn", "hide-label": true }, h("q2-icon", { key: 'f9d2eb19cc20b1b2e68e8f0dfd0825a3a6f83263', type: "chevron-double-right" })))), h("div", { key: '983fb48580f634ff33f5ba6bec3af9304c67c99d', class: "per-page", hidden: isFullViewHidden || !((_a = this.perPageIncrements) === null || _a === void 0 ? void 0 : _a.length) }, showPerPageSelect && this.renderPerPage())));
     }
     static get is() { return "q2-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-pagination/test/q2-pagination-test.vr.js

@@ -0,0 +1,145 @@
+import { expect } from "@playwright/test";
+import { test } from "@stencil/playwright";
+import { setupPage, THEMES } from "../../../utils/test/vr-helpers";
+// q2-pagination renders ~700px wide; the default 600px viewport clips the
+// per-page selector. Widen for every snapshot in this file.
+const PAGINATION_VIEWPORT = { width: 900, height: 600 };
+const widenAndSetup = async (page, html, theme) => {
+    await page.setViewportSize(PAGINATION_VIEWPORT);
+    await setupPage(page, html, { theme, setupLoc: true });
+};
+// Mid-page so prev/next are both enabled and exercise hover/focus styling.
+const MID_PAGE = `record-type="Accounts" total="1000" page="50" per-page="10"`;
+const FIRST_PAGE = `record-type="Accounts" total="1000" page="1" per-page="10"`;
+const VARIANTS = [
+    {
+        name: 'default-autosize',
+        html: `<div style="width: 700px"><q2-pagination ${MID_PAGE} auto-size="true" per-page-increments="[10,20,50]"></q2-pagination></div>`,
+    },
+    {
+        name: 'default-no-select',
+        html: `<div style="width: 700px"><q2-pagination ${FIRST_PAGE} auto-size="true"></q2-pagination></div>`,
+    },
+    {
+        name: 'no-autosize',
+        html: `<div style="width: 700px"><q2-pagination ${MID_PAGE} auto-size="false" per-page-increments="[10,20,50]"></q2-pagination></div>`,
+    },
+    {
+        name: 'pages-only',
+        html: `<div style="width: 700px"><q2-pagination ${MID_PAGE} pages-only="true"></q2-pagination></div>`,
+    },
+    {
+        name: 'records-only',
+        html: `<div style="width: 700px"><q2-pagination ${FIRST_PAGE} records-only="true"></q2-pagination></div>`,
+    },
+    {
+        name: 'disabled',
+        html: `<div style="width: 700px"><q2-pagination ${MID_PAGE} auto-size="true" per-page-increments="[10,20,50]" disabled="true"></q2-pagination></div>`,
+    },
+    {
+        name: 'last-page',
+        html: `<div style="width: 700px"><q2-pagination record-type="Accounts" total="100" page="10" per-page="10" auto-size="true" per-page-increments="[10,20,50]"></q2-pagination></div>`,
+    },
+    {
+        name: 'stacked',
+        html: `<div style="width: 700px"><q2-pagination ${FIRST_PAGE} stacked per-page-increments="[10,20,50]"></q2-pagination></div>`,
+    },
+    {
+        name: 'alignment-center',
+        html: `<div style="width: 700px"><q2-pagination ${MID_PAGE} auto-size="true" per-page-increments="[10,20,50]" alignment="center"></q2-pagination></div>`,
+    },
+    {
+        name: 'alignment-left',
+        html: `<div style="width: 700px"><q2-pagination ${MID_PAGE} auto-size="true" per-page-increments="[10,20,50]" alignment="left"></q2-pagination></div>`,
+    },
+];
+const restingCase = (variant, theme) => {
+    test(`q2-pagination--${variant.name}--resting — ${theme}`, async ({ page }) => {
+        await widenAndSetup(page, variant.html, theme);
+        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--resting--${theme}.png`);
+    });
+};
+const DEFAULT_VARIANT = VARIANTS.find(v => v.name === 'default-autosize');
+const focusInnerControl = async (page, testId) => {
+    await page.locator('q2-pagination').evaluate((el, id) => {
+        var _a, _b;
+        const qBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`q2-btn[test-id="${id}"]`);
+        const native = (_b = qBtn === null || qBtn === void 0 ? void 0 : qBtn.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+        if (!native)
+            throw new Error(`${id} native button not found`);
+        native.focus();
+    }, testId);
+};
+const focusPageInput = async (page) => {
+    await page.locator('q2-pagination').evaluate((el) => {
+        var _a, _b;
+        const input = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('q2-input[test-id="pageInput"]');
+        const native = (_b = input === null || input === void 0 ? void 0 : input.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+        if (!native)
+            throw new Error('pageInput native input not found');
+        native.focus();
+    });
+};
+const hoverInnerControl = async (page, selector) => {
+    await page.locator('q2-pagination').locator(selector).hover();
+};
+const pageInputFocusCase = (variant, theme) => {
+    test(`q2-pagination--${variant.name}--page-input-focus — ${theme}`, async ({ page }) => {
+        await widenAndSetup(page, variant.html, theme);
+        await focusPageInput(page);
+        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--page-input-focus--${theme}.png`);
+    });
+};
+const pageInputHoverCase = (variant, theme) => {
+    test(`q2-pagination--${variant.name}--page-input-hover — ${theme}`, async ({ page }) => {
+        await widenAndSetup(page, variant.html, theme);
+        await hoverInnerControl(page, 'q2-input[test-id="pageInput"]');
+        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--page-input-hover--${theme}.png`);
+    });
+};
+const prevBtnHoverCase = (variant, theme) => {
+    test(`q2-pagination--${variant.name}--prev-btn-hover — ${theme}`, async ({ page }) => {
+        await widenAndSetup(page, variant.html, theme);
+        await hoverInnerControl(page, 'q2-btn[test-id="prevPageBtn"]');
+        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--prev-btn-hover--${theme}.png`);
+    });
+};
+const prevBtnFocusCase = (variant, theme) => {
+    test(`q2-pagination--${variant.name}--prev-btn-focus — ${theme}`, async ({ page }) => {
+        await widenAndSetup(page, variant.html, theme);
+        await focusInnerControl(page, 'prevPageBtn');
+        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--prev-btn-focus--${theme}.png`);
+    });
+};
+const nextBtnHoverCase = (variant, theme) => {
+    test(`q2-pagination--${variant.name}--next-btn-hover — ${theme}`, async ({ page }) => {
+        await widenAndSetup(page, variant.html, theme);
+        await hoverInnerControl(page, 'q2-btn[test-id="nextPageBtn"]');
+        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--next-btn-hover--${theme}.png`);
+    });
+};
+const nextBtnFocusCase = (variant, theme) => {
+    test(`q2-pagination--${variant.name}--next-btn-focus — ${theme}`, async ({ page }) => {
+        await widenAndSetup(page, variant.html, theme);
+        await focusInnerControl(page, 'nextPageBtn');
+        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--next-btn-focus--${theme}.png`);
+    });
+};
+test.describe('q2-pagination — variants × themes', () => {
+    for (const variant of VARIANTS) {
+        for (const theme of THEMES) {
+            restingCase(variant, theme);
+        }
+    }
+    if (DEFAULT_VARIANT) {
+        for (const theme of THEMES) {
+            pageInputFocusCase(DEFAULT_VARIANT, theme);
+            pageInputHoverCase(DEFAULT_VARIANT, theme);
+            prevBtnHoverCase(DEFAULT_VARIANT, theme);
+            prevBtnFocusCase(DEFAULT_VARIANT, theme);
+            nextBtnHoverCase(DEFAULT_VARIANT, theme);
+            nextBtnFocusCase(DEFAULT_VARIANT, theme);
+        }
+    }
+});
+//# sourceMappingURL=q2-pagination-test.vr.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-pagination-test.vr.js","sourceRoot":"","sources":["../../../../../src/components/q2-pagination/test/q2-pagination-test.vr.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@playwright/test';\nimport type { Page } from '@playwright/test';\nimport { test } from '@stencil/playwright';\nimport { setupPage, THEMES, Theme } from '../../../utils/test/vr-helpers';\n\n// q2-pagination renders ~700px wide; the default 600px viewport clips the\n// per-page selector. Widen for every snapshot in this file.\nconst PAGINATION_VIEWPORT = { width: 900, height: 600 };\n\nconst widenAndSetup = async (page: Page, html: string, theme: Theme) => {\n    await page.setViewportSize(PAGINATION_VIEWPORT);\n    await setupPage(page, html, { theme, setupLoc: true });\n};\n\ntype Variant = { name: string; html: string };\n\n// Mid-page so prev/next are both enabled and exercise hover/focus styling.\nconst MID_PAGE = `record-type=\"Accounts\" total=\"1000\" page=\"50\" per-page=\"10\"`;\nconst FIRST_PAGE = `record-type=\"Accounts\" total=\"1000\" page=\"1\" per-page=\"10\"`;\n\nconst VARIANTS: Variant[] = [\n    {\n        name: 'default-autosize',\n        html: `<div style=\"width: 700px\"><q2-pagination ${MID_PAGE} auto-size=\"true\" per-page-increments=\"[10,20,50]\"></q2-pagination></div>`,\n    },\n    {\n        name: 'default-no-select',\n        html: `<div style=\"width: 700px\"><q2-pagination ${FIRST_PAGE} auto-size=\"true\"></q2-pagination></div>`,\n    },\n    {\n        name: 'no-autosize',\n        html: `<div style=\"width: 700px\"><q2-pagination ${MID_PAGE} auto-size=\"false\" per-page-increments=\"[10,20,50]\"></q2-pagination></div>`,\n    },\n    {\n        name: 'pages-only',\n        html: `<div style=\"width: 700px\"><q2-pagination ${MID_PAGE} pages-only=\"true\"></q2-pagination></div>`,\n    },\n    {\n        name: 'records-only',\n        html: `<div style=\"width: 700px\"><q2-pagination ${FIRST_PAGE} records-only=\"true\"></q2-pagination></div>`,\n    },\n    {\n        name: 'disabled',\n        html: `<div style=\"width: 700px\"><q2-pagination ${MID_PAGE} auto-size=\"true\" per-page-increments=\"[10,20,50]\" disabled=\"true\"></q2-pagination></div>`,\n    },\n    {\n        name: 'last-page',\n        html: `<div style=\"width: 700px\"><q2-pagination record-type=\"Accounts\" total=\"100\" page=\"10\" per-page=\"10\" auto-size=\"true\" per-page-increments=\"[10,20,50]\"></q2-pagination></div>`,\n    },\n    {\n        name: 'stacked',\n        html: `<div style=\"width: 700px\"><q2-pagination ${FIRST_PAGE} stacked per-page-increments=\"[10,20,50]\"></q2-pagination></div>`,\n    },\n    {\n        name: 'alignment-center',\n        html: `<div style=\"width: 700px\"><q2-pagination ${MID_PAGE} auto-size=\"true\" per-page-increments=\"[10,20,50]\" alignment=\"center\"></q2-pagination></div>`,\n    },\n    {\n        name: 'alignment-left',\n        html: `<div style=\"width: 700px\"><q2-pagination ${MID_PAGE} auto-size=\"true\" per-page-increments=\"[10,20,50]\" alignment=\"left\"></q2-pagination></div>`,\n    },\n];\n\nconst restingCase = (variant: Variant, theme: Theme) => {\n    test(`q2-pagination--${variant.name}--resting — ${theme}`, async ({ page }) => {\n        await widenAndSetup(page, variant.html, theme);\n        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--resting--${theme}.png`);\n    });\n};\n\nconst DEFAULT_VARIANT = VARIANTS.find(v => v.name === 'default-autosize');\n\nconst focusInnerControl = async (page: import('@playwright/test').Page, testId: string) => {\n    await page.locator('q2-pagination').evaluate((el: HTMLElement, id: string) => {\n        const qBtn = el.shadowRoot?.querySelector<HTMLElement>(`q2-btn[test-id=\"${id}\"]`);\n        const native = qBtn?.shadowRoot?.querySelector<HTMLButtonElement>('button');\n        if (!native) throw new Error(`${id} native button not found`);\n        native.focus();\n    }, testId);\n};\n\nconst focusPageInput = async (page: import('@playwright/test').Page) => {\n    await page.locator('q2-pagination').evaluate((el: HTMLElement) => {\n        const input = el.shadowRoot?.querySelector<HTMLElement>('q2-input[test-id=\"pageInput\"]');\n        const native = input?.shadowRoot?.querySelector<HTMLInputElement>('input');\n        if (!native) throw new Error('pageInput native input not found');\n        native.focus();\n    });\n};\n\nconst hoverInnerControl = async (page: import('@playwright/test').Page, selector: string) => {\n    await page.locator('q2-pagination').locator(selector).hover();\n};\n\nconst pageInputFocusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-pagination--${variant.name}--page-input-focus — ${theme}`, async ({ page }) => {\n        await widenAndSetup(page, variant.html, theme);\n        await focusPageInput(page);\n        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--page-input-focus--${theme}.png`);\n    });\n};\n\nconst pageInputHoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-pagination--${variant.name}--page-input-hover — ${theme}`, async ({ page }) => {\n        await widenAndSetup(page, variant.html, theme);\n        await hoverInnerControl(page, 'q2-input[test-id=\"pageInput\"]');\n        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--page-input-hover--${theme}.png`);\n    });\n};\n\nconst prevBtnHoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-pagination--${variant.name}--prev-btn-hover — ${theme}`, async ({ page }) => {\n        await widenAndSetup(page, variant.html, theme);\n        await hoverInnerControl(page, 'q2-btn[test-id=\"prevPageBtn\"]');\n        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--prev-btn-hover--${theme}.png`);\n    });\n};\n\nconst prevBtnFocusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-pagination--${variant.name}--prev-btn-focus — ${theme}`, async ({ page }) => {\n        await widenAndSetup(page, variant.html, theme);\n        await focusInnerControl(page, 'prevPageBtn');\n        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--prev-btn-focus--${theme}.png`);\n    });\n};\n\nconst nextBtnHoverCase = (variant: Variant, theme: Theme) => {\n    test(`q2-pagination--${variant.name}--next-btn-hover — ${theme}`, async ({ page }) => {\n        await widenAndSetup(page, variant.html, theme);\n        await hoverInnerControl(page, 'q2-btn[test-id=\"nextPageBtn\"]');\n        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--next-btn-hover--${theme}.png`);\n    });\n};\n\nconst nextBtnFocusCase = (variant: Variant, theme: Theme) => {\n    test(`q2-pagination--${variant.name}--next-btn-focus — ${theme}`, async ({ page }) => {\n        await widenAndSetup(page, variant.html, theme);\n        await focusInnerControl(page, 'nextPageBtn');\n        await expect(page).toHaveScreenshot(`q2-pagination--${variant.name}--next-btn-focus--${theme}.png`);\n    });\n};\n\ntest.describe('q2-pagination — variants × themes', () => {\n    for (const variant of VARIANTS) {\n        for (const theme of THEMES) {\n            restingCase(variant, theme);\n        }\n    }\n    if (DEFAULT_VARIANT) {\n        for (const theme of THEMES) {\n            pageInputFocusCase(DEFAULT_VARIANT, theme);\n            pageInputHoverCase(DEFAULT_VARIANT, theme);\n            prevBtnHoverCase(DEFAULT_VARIANT, theme);\n            prevBtnFocusCase(DEFAULT_VARIANT, theme);\n            nextBtnHoverCase(DEFAULT_VARIANT, theme);\n            nextBtnFocusCase(DEFAULT_VARIANT, theme);\n        }\n    }\n});\n"]}

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

@@ -65,6 +65,59 @@ button {
   visibility: hidden;
 }
 
+/**
+ * @prop --tct-pill-margin: (<length-percentage>) Controls the trailing inline margin between sibling pills.
+ * @prop --tct-pill-min-height: (<length>) Controls the minimum height of the pill (and its popover container).
+ * @prop --tct-pill-max-width: (<length-percentage>) Controls the maximum width of the pill label when options are present.
+ * @prop --tct-pill-disabled-opacity: (<number>) Controls the opacity of the pill when disabled.
+ * @prop --tct-pill-btn-height: (<length>) Controls the height of the pill button.
+ * @prop --tct-pill-btn-padding-inline: (<length-percentage>+) Controls the inline padding of the pill button.
+ * @prop --tct-pill-btn-border-radius: (<length-percentage>) Controls the corner radius of the pill button.
+ * @prop --tct-pill-btn-border-width: (<length>+) Controls the border width of the pill button.
+ * @prop --tct-pill-btn-border-color: (<color>) Controls the border color of the pill button in the default state.
+ * @prop --tct-pill-btn-background: (<color>) Controls the background color of the pill button in the default state.
+ * @prop --tct-pill-btn-box-shadow?: (*) Controls the optional box shadow of the pill button in the default state.
+ * @prop --tct-pill-btn-backdrop-filter?: (*) Controls the optional backdrop-filter of the pill button in the default state.
+ * @prop --tct-pill-btn-color: (<color>) Controls the text color of the pill button in the default state.
+ * @prop --tct-pill-btn-font-size: (<length-percentage>) Controls the font size of the pill button.
+ * @prop --tct-pill-btn-font-weight: (<number>) Controls the font weight of the pill button.
+ * @prop --tct-pill-btn-tween: (*) Controls the transition timing of the pill button's interactive state changes.
+ * @prop --tct-pill-btn-focus-box-shadow: (*) Controls the box shadow of the pill button when focused.
+ * @prop --tct-pill-btn-focus-visible-box-shadow: (*) Controls the box shadow of the pill button when focused via keyboard.
+ * @prop --tct-pill-hover-btn-background: (<color>) Controls the background color of the pill button on hover.
+ * @prop --tct-pill-hover-close-btn-background: (<color>) Controls the background color of the close button on hover when the pill is active.
+ * @prop --tct-pill-hover-close-btn-border-color: (<color>) Controls the border color of the close button on hover when the pill is active.
+ * @prop --tct-pill-active-btn-background: (<color>) Controls the background color of the pill button when active in the default theme.
+ * @prop --tct-pill-active-btn-color: (<color>) Controls the text color of the pill button when active.
+ * @prop --tct-pill-active-btn-border-color: (<color>) Controls the border color of the pill button when active in the default theme.
+ * @prop --tct-pill-active-btn-box-shadow?: (*) Controls the optional box shadow of the pill button when active.
+ * @prop --tct-pill-active-btn-backdrop-filter?: (*) Controls the optional backdrop-filter of the pill button when active.
+ * @prop --tct-pill-icon-gap: (<length-percentage>) Controls the gap between the pill label and trailing icon.
+ * @prop --tct-pill-icon-size: (<length>) Controls the size of the pill's trailing icon.
+ * @prop --tct-pill-icon-stroke: (<color>) Controls the stroke color of the pill's trailing icon.
+ * @prop --tct-pill-icon-stroke-width?: (<number>) Controls the optional stroke width of the pill's trailing icon.
+ * @prop --tct-pill-primary-active-background: (<color>) Controls the background color of the pill button when active and theme is primary.
+ * @prop --tct-pill-primary-active-font-color: (<color>) Controls the text color of the pill button when active and theme is primary.
+ * @prop --tct-pill-primary-active-border-color: (<color>) Controls the border color of the pill button when active and theme is primary.
+ * @prop --tct-pill-primary-active-hover-background: (<color>) Controls the background color of the pill button when active and theme is primary, on hover.
+ * @prop --tct-pill-primary-active-hover-border-color: (<color>) Controls the border color of the pill button when active and theme is primary, on hover.
+ * @prop --tct-pill-primary-active-btn-box-shadow?: (*) Controls the optional box shadow of the pill button when active and theme is primary.
+ * @prop --tct-pill-primary-active-backdrop-filter?: (*) Controls the optional backdrop-filter of the pill button when active and theme is primary.
+ * @prop --tct-pill-secondary-active-background: (<color>) Controls the background color of the pill button when active and theme is secondary.
+ * @prop --tct-pill-secondary-active-font-color: (<color>) Controls the text color of the pill button when active and theme is secondary.
+ * @prop --tct-pill-secondary-active-border-color: (<color>) Controls the border color of the pill button when active and theme is secondary.
+ * @prop --tct-pill-secondary-active-hover-background: (<color>) Controls the background color of the pill button when active and theme is secondary, on hover.
+ * @prop --tct-pill-secondary-active-hover-border-color: (<color>) Controls the border color of the pill button when active and theme is secondary, on hover.
+ * @prop --tct-pill-secondary-active-box-shadow?: (*) Controls the optional box shadow of the pill button when active and theme is secondary.
+ * @prop --tct-pill-secondary-active-backdrop-filter?: (*) Controls the optional backdrop-filter of the pill button when active and theme is secondary.
+ * @prop --tct-pill-tertiary-active-background: (<color>) Controls the background color of the pill button when active and theme is tertiary.
+ * @prop --tct-pill-tertiary-active-font-color: (<color>) Controls the text color of the pill button when active and theme is tertiary.
+ * @prop --tct-pill-tertiary-active-border-color: (<color>) Controls the border color of the pill button when active and theme is tertiary.
+ * @prop --tct-pill-tertiary-active-hover-background: (<color>) Controls the background color of the pill button when active and theme is tertiary, on hover.
+ * @prop --tct-pill-tertiary-active-hover-border-color: (<color>) Controls the border color of the pill button when active and theme is tertiary, on hover.
+ * @prop --tct-pill-tertiary-active-box-shadow?: (*) Controls the optional box shadow of the pill button when active and theme is tertiary.
+ * @prop --tct-pill-tertiary-active-backdrop-filter?: (*) Controls the optional backdrop-filter of the pill button when active and theme is tertiary.
+ */
 :host {
   display: inline-block;
   position: relative;

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

@@ -333,19 +333,24 @@ export class Q2Pill {
     // #endregion
     // #region Local Methods
     get buttonContent() {
-        const { label, selectedOptions, selectedOptionElements, optionCount } = this;
-        if (!optionCount || selectedOptionElements.length === 0)
-            return loc(label);
-        else if (selectedOptionElements.length === 1)
-            return `${loc(selectedOptionElements[0].display)}`;
-        return loc('tecton.element.pill.activeCount', { count: selectedOptions.length });
-    }
-    get truncatedButtonContent() {
-        const { maxLength, buttonContent } = this;
-        if (maxLength && buttonContent.length > maxLength)
-            return `${buttonContent.substring(0, maxLength)}…`;
-        else
-            return buttonContent;
+        const { label, selectedOptionElements, optionCount, maxLength } = this;
+        const count = selectedOptionElements.length;
+        let text;
+        if (!optionCount || count === 0) {
+            text = loc(label);
+        }
+        else if (count === 1) {
+            text = loc(selectedOptionElements[0].display);
+        }
+        else {
+            const firstDisplay = loc(selectedOptionElements[0].display);
+            const suffix = ` +${count - 1}`;
+            return {
+                text: `${firstDisplay}${suffix}`,
+                truncatedText: `${this._truncate(firstDisplay, maxLength)}${suffix}`,
+            };
+        }
+        return { text, truncatedText: this._truncate(text, maxLength) };
     }
     _togglePopover() {
         const { primaryBtn } = this;
@@ -353,6 +358,9 @@ export class Q2Pill {
         primaryBtn === null || primaryBtn === void 0 ? void 0 : primaryBtn.focus();
         primaryBtn.dispatchEvent(new FocusEvent('focus'));
     }
+    _truncate(text = '', maxLength = 0) {
+        return maxLength && text.length > maxLength ? `${text.substring(0, maxLength)}…` : text;
+    }
     // #endregion
     // #region Render Methods
     renderHiddenElement() {
@@ -367,12 +375,13 @@ export class Q2Pill {
     }
     render() {
         const { optionCount, active, open } = this;
+        const { text, truncatedText } = this.buttonContent;
         const wrapperClassNames = ['btn-wrapper'];
         if (optionCount || active)
             wrapperClassNames.push('has-icon');
         if (optionCount)
             wrapperClassNames.push('has-options');
-        return (h("click-elsewhere", { key: '1f6a917d21078d5007387acd85fb7c03736db6ae', onChange: this.onClickElsewhere }, h("div", { key: '346b5d9651e27827e304377f9009edd50a141102', class: wrapperClassNames.join(' ') }, h("div", { key: 'c261c06b88781ea9af6f2b0f0a335476c0c7e89a', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'b717af900dc54f65de00aef3ee59dade83f6da21', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": `${this.buttonContent}${!optionCount && active ? ` ${loc('tecton.element.pill.active')}` : ''}`, "aria-describedby": (optionCount && 'option-description') || undefined }, this.truncatedButtonContent)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: '4d415fbec7b43fe7f2b8abff0e3a02467028cdb4', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '75e71787bad82eb4a5682a2315d7f5dcbd3c3b82', class: "popover-content" }, h("div", { key: '5de5d4a2f606e4b936ee46fda3aded8b09e17854', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: '6d971654eb266bd5a3c37e04cde81dd7d6876ca5', name: "popover-top" })), h("q2-option-list", { key: '670e99d6859d673e781eba1e6eee87ee8ac728b4', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: 'fde147d6d4c6deca9952ebdd5f022f0d348bf75e' })), h("div", { key: 'f8704bee883058f635b936fe03e888eaa9b3ce35', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: '6761a2e76fbba5410a974eb0a24110c0c135b84e', name: "popover-bottom" })))))));
+        return (h("click-elsewhere", { key: '0af6d3ca759838e5ef540ed2746a10907c1eb31d', onChange: this.onClickElsewhere }, h("div", { key: '79345714aa98cfaabb6e7e00b0ac1eb66085144a', class: wrapperClassNames.join(' ') }, h("div", { key: '95bb0453d6871d829292caf5143f1c35ff5e4142', class: "btn-height-wrapper", ref: el => (this.primaryBtnWrapper = el), onClick: this.handleWrapperClick, tabIndex: -1 }, h("button", { key: 'b640d20887ef7e45345d266b69e428951c8c02ac', class: "btn-primary", "test-id": "btn-control", type: "button", role: (optionCount && 'combobox') || undefined, ref: el => (this.primaryBtn = el), onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleFocusOut, disabled: this.disabled, "aria-roledescription": !optionCount && 'filter', "aria-controls": (optionCount && 'option-list') || undefined, "aria-expanded": (optionCount && `${!!open}`) || undefined, "aria-label": text, "aria-pressed": !optionCount ? `${!!active}` : undefined, "aria-describedby": (optionCount && 'option-description') || undefined }, truncatedText)), this.renderIcon(), !!optionCount && this.renderHiddenElement()), this.optionCount > 0 && (h("q2-popover", { key: 'a9d86ad663999c5008427746ebadd3319f9d8368', ref: el => (this.popoverElement = el), controlElement: this.primaryBtn, open: this.open, "max-height": this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment, onFocusout: this.handleFocusOut }, h("div", { key: '516e72df5497552a4c8f863d9dfeb60c93a56ef2', class: "popover-content" }, h("div", { key: 'e2973903570f235f5814855924487d93312a5ea0', ref: el => (this.popoverTopContainer = el), class: "popover-top-container", tabindex: "-1", hidden: !this.hasPopoverTop, onKeyDown: this.handleKeydown }, h("slot", { key: 'c8184daffd49fbb8021e935801e16c9362d0153c', name: "popover-top" })), h("q2-option-list", { key: '7d0645106f16399fa90345ed7ff13d1ce8d7537d', type: "listbox", ref: el => (this.optionList = el), id: "option-list", onChange: this.handleChange, multiple: this.multiple, selectedOptions: this.selectedOptions, onReady: () => this.updateSelectedOptionElements(), onPopoverState: this.onPopoverState, label: loc('tecton.element.optionList.label', [this.optionListLabel]) }, h("slot", { key: '35525f5931d910a9a899c839b82ae82e1951ce60' })), h("div", { key: '602c7fdf35b20085d45698f1db471cb4c0883e26', ref: el => (this.popoverBottomContainer = el), class: "popover-bottom-container", tabindex: "-1", hidden: !this.hasPopoverBottom, onKeyDown: this.handleKeydown }, h("slot", { key: 'be13e0e756eb9aa9bf961b7bfc375aabcfc2804a', name: "popover-bottom" })))))));
     }
     static get is() { return "q2-pill"; }
     static get encapsulation() { return "shadow"; }