@tet/tet-components 1.3.93-testing → 1.3.94-production

package/dist/collection/components/simple/inputs/tet-expandable-input/tet-expandable-input.js

@@ -1,5 +1,10 @@
 import { Host, h } from "@stencil/core";
 import { getConvertedPixels } from "../../../../services/utils/index";
+/* The height of the component in pixels for each size */
+const componentSizes = {
+    default: 44,
+    small: 36,
+};
 /**
  * The expandable input uses the default input functionality with addition of extended state on focus.
  * It supports left and right icons as well as fully closed state with round icon for small containers or screens.
@@ -10,23 +15,35 @@ export class TetExpandableInput {
          * The currently running animation
          */
         this.animation = null;
+        this.setupInput = () => {
+            this.handleInputEventListeners();
+            this.setupInputWidth();
+        };
         /**
-         * The currently running animation
+         * The method to handle hasInputValue state.
          */
-        this.mobileClosedSize = 44;
-        this.setupInput = () => {
-            this.inputHtmlElement.addEventListener('click', () => {
-                this.setState(true);
-            });
-            this.host.addEventListener('focus', () => {
-                this.setState(true);
-            });
-            const minWidth = getConvertedPixels(getComputedStyle(this.host).getPropertyValue('--expandable-input-container-min-width'));
-            this.mobileClosedSize = Math.max(this.inputHtmlElement.offsetHeight, minWidth);
-            const minHeight = getConvertedPixels(getComputedStyle(this.host).getPropertyValue('--expandable-input-container-height'));
-            this.mobileClosedSize = Math.max(this.inputHtmlElement.offsetHeight, minHeight);
-            this.inputWrapper.style.width =
-                this.mode === 'mobile' ? `${this.mobileClosedSize}px` : `${getConvertedPixels(this.closedWidth)}px`;
+        this.handleHasInputValueState = (event) => {
+            const { target } = event;
+            if (target instanceof HTMLInputElement) {
+                this.hasInputValue = target.value.length > 0;
+            }
+        };
+        /**
+         * Handles closing the input when the Escape key is pressed and the input is expanded.
+         */
+        this.handleCloseInputOnEsc = (event) => {
+            if (this.expanded && event.key === 'Escape') {
+                this.host.blur();
+            }
+        };
+        /**
+         * Handles closing the input when the close button element is activated.
+         */
+        this.handleCloseButtonAction = (event) => {
+            if (event.type === 'click' ||
+                (event.type === 'keydown' && 'key' in event && (event.key === 'Enter' || event.key === ' '))) {
+                this.host.blur();
+            }
         };
         /**
          * Handles the animation of the input.
@@ -62,9 +79,9 @@ export class TetExpandableInput {
             }
         };
         this.expanded = false;
+        this.hasInputValue = false;
         this.class = '';
         this.placeholder = '';
-        this.type = 'text';
         this.value = '';
         this.disabled = false;
         this.accessibilityLabel = '';
@@ -72,15 +89,12 @@ export class TetExpandableInput {
         this.closedWidth = '18.375rem';
         this.animationDuration = 300;
         this.error = false;
-        this.label = '';
         this.iconLeft = '';
         this.iconRight = '';
-        this.iconClosed = '';
-        this.iconLeftClickCallback = undefined;
         this.iconRightClickCallback = undefined;
         this.validators = [];
         this.manualValidation = false;
-        this.theme = 'classic';
+        this.theme = 'light';
         this.size = 'default';
         this.closeInputText = '';
         this.darkMode = false;
@@ -88,6 +102,9 @@ export class TetExpandableInput {
     onModeChange() {
         this.setState(this.expanded);
     }
+    onSizeChange() {
+        this.setupInputWidth();
+    }
     /**
      * Returns the HTML input element.
      */
@@ -112,14 +129,17 @@ export class TetExpandableInput {
      * @param changeState Determines whether the `expanded` state should be changed with animation. Optional parameter.
      */
     async setState(expanded) {
-        var _a;
+        var _a, _b;
+        if (this.disabled) {
+            return;
+        }
         if (expanded) {
             this.expand();
-            this.inputCloseHandler();
+            (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.remove('hide');
         }
         else {
             this.shrink();
-            (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
+            (_b = this.closeInputHtmlElement) === null || _b === void 0 ? void 0 : _b.classList.add('hide');
         }
     }
     /**
@@ -128,29 +148,35 @@ export class TetExpandableInput {
     onBlur() {
         this.setState(false);
     }
+    /**
+     * The handler method for the focus event.
+     */
+    onFocus() {
+        this.setState(true);
+    }
     /**
      * Event called once after component is fully loaded
      */
     componentDidLoad() {
         this.setupInput();
     }
+    disconnectedCallback() {
+        this.inputHtmlElement.removeEventListener('keydown', this.handleCloseInputOnEsc);
+        this.inputHtmlElement.removeEventListener('input', this.handleHasInputValueState);
+    }
     /**
-     * The method to handle input close element states.
+     * The method to handle input width.
      */
-    inputCloseHandler() {
-        var _a, _b, _c;
-        (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.remove('hide');
-        (_b = this.closeInputHtmlElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => {
-            var _a;
-            this.host.blur();
-            (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
-        });
-        (_c = this.closeInputHtmlElement) === null || _c === void 0 ? void 0 : _c.addEventListener('keydown', (e) => {
-            var _a;
-            if (['Enter', ' '].includes(e.key)) {
-                (_a = this.closeInputHtmlElement) === null || _a === void 0 ? void 0 : _a.classList.add('hide');
-            }
-        });
+    setupInputWidth() {
+        var _a;
+        const minWidth = componentSizes[this.size] / 16 + 'rem';
+        (_a = this.animation) === null || _a === void 0 ? void 0 : _a.cancel();
+        this.inputWrapper.style.width =
+            this.mode !== 'desktop-expanded' ? `${minWidth}` : `${getConvertedPixels(this.closedWidth) / 16}rem`;
+    }
+    handleInputEventListeners() {
+        this.inputHtmlElement.addEventListener('keydown', this.handleCloseInputOnEsc);
+        this.inputHtmlElement.addEventListener('input', this.handleHasInputValueState);
     }
     /**
      * Expands the input to the width of the host element's width
@@ -186,8 +212,10 @@ export class TetExpandableInput {
         // Await dom changes before animation.
         setTimeout(async () => {
             this.expanded = false;
+            this.clear();
+            const closedSize = componentSizes[this.size];
             const animationStartWidth = this.inputWrapper.offsetWidth;
-            const animationEndWidth = this.mode === 'mobile' ? this.mobileClosedSize : getConvertedPixels(this.closedWidth);
+            const animationEndWidth = this.mode !== 'desktop-expanded' ? closedSize : getConvertedPixels(this.closedWidth);
             await this.animateWidth(animationStartWidth, animationEndWidth);
             // Emit `expanded` state after animation.
             this.afterStateChange.emit({
@@ -208,13 +236,14 @@ export class TetExpandableInput {
      * Determines if the placeholder text and the action icon (right) must be rendered
      */
     get renderInputContent() {
-        return this.expanded || this.mode === 'desktop';
+        return this.expanded || this.mode === 'desktop-expanded';
     }
     /**
      * Clears input value.
      */
     async clear() {
         this.inputHtmlElement.querySelector('input').value = '';
+        this.hasInputValue = false;
     }
     /**
      * Render close input button.
@@ -224,18 +253,19 @@ export class TetExpandableInput {
             return (h("span", { class: {
                     'input-close': true,
                     'hide': true,
-                    [this.theme]: true,
-                }, ref: (closeInputElement) => (this.closeInputHtmlElement = closeInputElement), tabindex: 0 }, this.closeInputText));
+                    [this.darkMode ? 'dark' : this.theme]: true,
+                }, ref: (closeInputElement) => (this.closeInputHtmlElement = closeInputElement), tabindex: 0, role: "button", onClick: this.handleCloseButtonAction, onKeyDown: this.handleCloseButtonAction }, this.closeInputText));
         }
         return '';
     }
     render() {
-        return (h(Host, { key: '6cd2cab58f78b7e4ed9f40b39dfdf36d714baa50', class: { small: this.size === 'small' } }, h("div", { key: '647a7c5652618d30289ff778387dca88cae01071', class: {
+        return (h(Host, { key: '1a2dd7822beebbb1af6585649eca59de9d7f5ebd' }, h("div", { key: '0315f3cdf0c4201fdbbe1a2f8f0a3e1e0cbe8f50', class: {
                 container: true,
                 expanded: this.expanded,
                 [this.mode]: true,
-                dark: this.darkMode
-            }, tabIndex: -1 }, h("div", { key: '847fab4cd5a24f904488338854ce365a2ce7ebdc', class: "input-wrapper", ref: (element) => (this.inputWrapper = element), tabIndex: -1 }, h("tet-input", { key: 'ce27e47efb55acaeed1e52b2a40b68a129f48c1a', class: "tet-input expandable", label: this.label, "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-type": this.type, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.renderInputContent ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
+                [this.darkMode ? 'dark' : this.theme]: true,
+                [this.size]: true,
+            }, tabIndex: -1 }, h("div", { key: '7140d2a79ee3158c52fd5296e2a1d51ca04c8a82', class: "input-wrapper", ref: (element) => (this.inputWrapper = element), tabIndex: -1 }, h("tet-input", { key: '956656db0ac78f3c4b22913d35d75366fc6c2f09', class: "tet-input expandable", "input-class": this.class, "input-placeholder": this.renderInputContent ? this.placeholder : '', "accessibility-label": this.accessibilityLabel, "input-value": this.value, "input-disabled": this.disabled, error: this.error, "icon-left": this.iconLeft, "icon-right": this.hasInputValue && this.expanded ? this.iconRight : '', iconRightClickCallback: this.iconRightClickCallback, theme: this.darkMode ? 'dark' : this.theme, ref: (inputElement) => (this.inputHtmlElement = inputElement) }), this.closeButton))));
     }
     static get is() { return "tet-expandable-input"; }
     static get encapsulation() { return "shadow"; }
@@ -287,24 +317,6 @@ export class TetExpandableInput {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of the input."
-                },
-                "attribute": "input-type",
-                "reflect": false,
-                "defaultValue": "'text'"
-            },
             "value": {
                 "type": "string",
                 "mutable": false,
@@ -363,15 +375,15 @@ export class TetExpandableInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'mobile' | 'desktop'",
-                    "resolved": "\"desktop\" | \"mobile\"",
+                    "original": "'mobile' | 'desktop' | 'desktop-expanded'",
+                    "resolved": "\"desktop\" | \"desktop-expanded\" | \"mobile\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The mode to render the component in. Mainly affects the closed state."
+                    "text": "The mode to render the component in. Affects the closed state and component height."
                 },
                 "attribute": "mode",
                 "reflect": false,
@@ -431,24 +443,6 @@ export class TetExpandableInput {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the input label."
-                },
-                "attribute": "label",
-                "reflect": false,
-                "defaultValue": "''"
-            },
             "iconLeft": {
                 "type": "string",
                 "mutable": false,
@@ -485,39 +479,6 @@ export class TetExpandableInput {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "iconClosed": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the icon to show in case of closed state of the small mode"
-                },
-                "attribute": "icon-closed",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "iconLeftClickCallback": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The callback function of the click event for the left icon."
-                }
-            },
             "iconRightClickCallback": {
                 "type": "unknown",
                 "mutable": false,
@@ -577,8 +538,8 @@ export class TetExpandableInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'classic' | 'dark' | 'mint'",
-                    "resolved": "\"classic\" | \"dark\" | \"mint\"",
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
                     "references": {}
                 },
                 "required": false,
@@ -589,15 +550,21 @@ export class TetExpandableInput {
                 },
                 "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "'classic'"
+                "defaultValue": "'light'"
             },
             "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'small'",
+                    "original": "TetExpandableInputSize",
                     "resolved": "\"default\" | \"small\"",
-                    "references": {}
+                    "references": {
+                        "TetExpandableInputSize": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/simple/inputs/tet-expandable-input/tet-expandable-input.tsx",
+                            "id": "src/components/simple/inputs/tet-expandable-input/tet-expandable-input.tsx::TetExpandableInputSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -638,7 +605,10 @@ export class TetExpandableInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `theme = \"dark\"` instead."
+                        }],
                     "text": "The prop for dark mode."
                 },
                 "attribute": "dark-mode",
@@ -649,7 +619,8 @@ export class TetExpandableInput {
     }
     static get states() {
         return {
-            "expanded": {}
+            "expanded": {},
+            "hasInputValue": {}
         };
     }
     static get events() {
@@ -805,6 +776,9 @@ export class TetExpandableInput {
         return [{
                 "propName": "mode",
                 "methodName": "onModeChange"
+            }, {
+                "propName": "size",
+                "methodName": "onSizeChange"
             }];
     }
     static get listeners() {
@@ -814,6 +788,12 @@ export class TetExpandableInput {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "focus",
+                "method": "onFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/simple/lists/tet-text-list/tet-text-list.css

@@ -7146,7 +7146,7 @@
   --tc-alert-colorwave-warning-dark: var(--tc-yellow-10-dark);
   --tc-alert-colorwave-error-dark: var(--tc-red-10-dark);
   --tc-alert-colorwave-neutral-dark: var(--tc-violet-10-dark);
-  --tc-modal-primary-dark: var(--tc-grey-20-dark);
+  --tc-modal-primary-dark: var(--tc-grey-minus-10-dark);
   --tc-gradient-green-lin1-dark: rgba(32, 60, 46, 1);
   --tc-gradient-green-lin2-dark: rgba(19, 41, 10, 1);
   --tc-gradient-green-accent-dark: rgba(19, 41, 10, 1);

package/dist/collection/components/simple/text-blocks/tet-dialog/test/tet-dialog.spec.js

@@ -23,7 +23,7 @@ describe('tet-dialog', () => {
       <tet-dialog is-open="">
         <mock:shadow-root>
           <dialog>
-            <div part="overlay" class="dialog__overlay dialog__overlay--visible">
+            <div part="overlay" class="dialog--theme-classic dialog__overlay dialog__overlay--visible">
               <div part="dialog" class="dialog dialog--theme-classic" aria-labelledby="dialog-title" >
                 <div part="header" class="dialog__header">
                   <slot name="header">
@@ -55,7 +55,7 @@ describe('tet-dialog', () => {
       <tet-dialog is-open="">
         <mock:shadow-root>
           <dialog>
-            <div part="overlay" class="dialog__overlay dialog__overlay--visible">
+            <div part="overlay" class="dialog--theme-classic dialog__overlay dialog__overlay--visible">
               <div part="dialog" class="dialog dialog--theme-classic" aria-labelledby="dialog-title" >
                 <div part="header" class="dialog__header">
                   <slot name="header">

package/dist/collection/components/simple/text-blocks/tet-dialog/tet-dialog.css

@@ -360,6 +360,7 @@
    * @prop --dialog-title-font-size: The font size of the modal title.
    * @prop --dialog-text-color: The text color of the modal.
    * @prop --dialog-background-color: The background color of the modal.
+   * @prop --dialog-overlay-color: The overlay color of the modal.
    * @prop --dialog-footer-border-color: The top border color of the modal footer.
    *
    * @prop --dialog-close-icon-color: The color of the dialog close icon.
@@ -375,7 +376,8 @@
   --dialog-align-items: flex-start;
   --dialog-title-font-size: 1.25rem;
   --dialog-text-color: var(--tc-text-primary);
-  --dialog-background-color: var(--tc-layer-primary);
+  --dialog-background-color: var(--tc-modal-primary);
+  --dialog-overlay-color: rgba(18, 19, 21, 0.40);
   --dialog-footer-border-color: var(--tc-border-quaternary);
   --dialog-close-icon-color: var(--tc-icon-primary);
   --dialog-close-icon-background-hover-color: var(--tc-menu-item-hover);
@@ -410,7 +412,8 @@ dialog .dialog:focus-visible {
 }
 dialog .dialog--theme-dark {
   --dialog-text-color: var(--tc-text-primary-dark);
-  --dialog-background-color: var(--tc-grey-20-dark);
+  --dialog-background-color: var(--tc-modal-primary-dark);
+  --dialog-overlay-color: rgba(38, 41, 44, 0.40);
   --dialog-footer-border-color: var(--tc-border-quaternary-dark);
   --dialog-close-icon-color: var(--tc-icon-primary-dark);
   --dialog-close-icon-background-hover-color: var(--tc-menu-item-hover-dark);
@@ -425,6 +428,7 @@ dialog .dialog--theme-dark .dialog__close-button:focus-visible {
 dialog .dialog--theme-dark-secondary {
   --dialog-text-color: rgb(255, 255, 255);
   --dialog-background-color: rgb(35, 40, 46);
+  --dialog-overlay-color: rgba(38, 41, 44, 0.40);
   --dialog-footer-border-color: rgb(67, 75, 86);
   --dialog-close-icon-color: var(--dialog-text-color);
   --dialog-close-icon-background-hover-color: var(--tc-menu-item-hover-dark);
@@ -441,7 +445,7 @@ dialog .dialog__overlay {
   align-items: center;
   justify-content: center;
   padding: var(--dialog-overlay-padding);
-  background: rgba(0, 0, 0, 0.32);
+  background: var(--dialog-overlay-color);
   opacity: 0;
   visibility: hidden;
 }

package/dist/collection/components/simple/text-blocks/tet-dialog/tet-dialog.js

@@ -117,7 +117,11 @@ export class TetDialog {
     }
     render() {
         const { isOpen, theme, footerDisplay, handleClickOverlay } = this;
-        return (h(Host, { key: 'c86d9fb6b40169952c74ba86183ac3b305c95a46' }, h("dialog", { key: '6f58cb89c2d97ed7c4712683a5afab118f19a0f8', ref: (el) => (this.dialogContainer = el) }, h("div", { key: 'd0f90b96861640b0e073007364f72fdc6b96b22d', part: "overlay", class: { 'dialog__overlay': true, 'dialog__overlay--visible': isOpen }, onClick: handleClickOverlay }, h("div", { key: 'a61f9d7e21c05279346bc21671960db44ea4fe84', part: "dialog", class: { dialog: true, [`dialog--theme-${theme}`]: true }, "aria-labelledby": this.hideHeader ? null : this.titleId }, this.renderHeader(), h("div", { key: 'fdfa607d85ee252573bb901a22d1a7440a9e8638', part: "body", class: "dialog__body" }, h("slot", { key: '23553797fdcba40e240798e0f3633a943070537e' })), h("div", { key: '4efe39bc76c80cf593cde6c9c8fd9562b082fb5a', part: "footer", class: { dialog__footer: true, [`dialog__footer--${footerDisplay}`]: true } }, h("slot", { key: 'af85da0d3a3b4f7f54a4b0144af5114a2ec457a4', name: "footer" })))))));
+        return (h(Host, { key: 'c86d9fb6b40169952c74ba86183ac3b305c95a46' }, h("dialog", { key: '6f58cb89c2d97ed7c4712683a5afab118f19a0f8', ref: (el) => (this.dialogContainer = el) }, h("div", { key: 'dcbbcd9b24325531a2f9307ee286df93e6698183', part: "overlay", class: {
+                'dialog__overlay': true,
+                'dialog__overlay--visible': isOpen,
+                [`dialog--theme-${theme}`]: true
+            }, onClick: handleClickOverlay }, h("div", { key: 'ff1b6bb76336de706f4cefd7b120bdee6a673591', part: "dialog", class: { dialog: true, [`dialog--theme-${theme}`]: true }, "aria-labelledby": this.hideHeader ? null : this.titleId }, this.renderHeader(), h("div", { key: 'b3afc812bd78aff2051cc9eba008b2d018325ea5', part: "body", class: "dialog__body" }, h("slot", { key: 'c76ee1d333f984e16cc18944a370db676e4ace99' })), h("div", { key: 'b11f8656508c10fb42010367e0fa52a3a777c195', part: "footer", class: { dialog__footer: true, [`dialog__footer--${footerDisplay}`]: true } }, h("slot", { key: 'd82c8d1d5942c27cdcad791197e4f6c6a424ef7b', name: "footer" })))))));
     }
     static get is() { return "tet-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/services/utils/index.js

@@ -11,10 +11,11 @@ import { throttle } from "./throttle";
 import { executeUntil } from "./execute-until";
 import { intersection } from "./array";
 import { waitForElement } from "./wait-for-element";
+import { isFocusableElementOrChild } from "./isFocusableElementOrChild";
 // Utility classes
 import { InertiaScroll } from "./inertia-scroll";
 export { 
 // Utility functions
-debounce, debounceAsync, throttle, normalize, capitalize, reactive, isPromise, isObject, isFunction, isEmpty, isUndefinedOrNull, flatten, randomString, convertRemToPx, getRemSize, getConvertedPixels, formatPrice, executeUntil, intersection, waitForElement, 
+debounce, debounceAsync, throttle, normalize, capitalize, reactive, isPromise, isObject, isFunction, isEmpty, isUndefinedOrNull, flatten, randomString, convertRemToPx, getRemSize, getConvertedPixels, formatPrice, executeUntil, intersection, waitForElement, isFocusableElementOrChild, 
 // Utility classes
 InertiaScroll, };

package/dist/collection/services/utils/isFocusableElementOrChild.js

@@ -0,0 +1,40 @@
+/**
+ * Determines if the given element or any of its descendants (including shadow DOM) is focusable.
+ * Used to decide whether a tabpanel should receive a tabindex for keyboard navigation.
+ */
+const focusableSelectors = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    '[tabindex]:not([tabindex="-1"])',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]'
+];
+const isFocusable = (element) => {
+    return element.matches(focusableSelectors.join(','));
+};
+const isFocusableElementOrChild = (element) => {
+    if (!element)
+        return false;
+    // If element itself is focusable
+    if (isFocusable(element))
+        return true;
+    // If element has shadow root, check inside it
+    if (element instanceof HTMLElement && element.shadowRoot) {
+        const focusableElements = element.shadowRoot.querySelectorAll(focusableSelectors.join(','));
+        if (focusableElements.length > 0)
+            return true;
+    }
+    // Check children recursively
+    for (const child of Array.from(element.children)) {
+        if (isFocusableElementOrChild(child)) {
+            return true;
+        }
+    }
+    return false;
+};
+export { isFocusableElementOrChild };

package/dist/collection/services/utils/isFocusableElementOrChild.spec.js

@@ -0,0 +1,67 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { isFocusableElementOrChild } from "./isFocusableElementOrChild";
+import { TetButton } from "../../components/basic/buttons/tet-button/tet-button";
+import { TetContainer } from "../../components/basic/container/tet-container/tet-container";
+fdescribe('isFocusableElementOrChild', () => {
+    it('returns false for null', () => {
+        expect(isFocusableElementOrChild(null)).toBe(false);
+    });
+    it('returns true for a focusable element (button)', () => {
+        const btn = document.createElement('button');
+        expect(isFocusableElementOrChild(btn)).toBe(true);
+    });
+    it('returns true for a focusable element (input)', () => {
+        const input = document.createElement('input');
+        expect(isFocusableElementOrChild(input)).toBe(true);
+    });
+    it('returns false for a non-focusable element (div)', () => {
+        const div = document.createElement('div');
+        expect(isFocusableElementOrChild(div)).toBe(false);
+    });
+    it('returns true for a non-focusable parent with a focusable child', () => {
+        const div = document.createElement('div');
+        const btn = document.createElement('button');
+        div.appendChild(btn);
+        expect(isFocusableElementOrChild(div)).toBe(true);
+    });
+    it('returns false for a disabled button', () => {
+        const btn = document.createElement('button');
+        btn.setAttribute('disabled', '');
+        expect(isFocusableElementOrChild(btn)).toBe(false);
+    });
+    it('returns true for an element with tabindex="0"', () => {
+        const div = document.createElement('div');
+        div.setAttribute('tabindex', '0');
+        expect(isFocusableElementOrChild(div)).toBe(true);
+    });
+    it('returns false for an element with tabindex="-1"', () => {
+        const div = document.createElement('div');
+        div.setAttribute('tabindex', '-1');
+        expect(isFocusableElementOrChild(div)).toBe(false);
+    });
+    it('returns true for a focusable element inside shadow DOM', async () => {
+        const page = await newSpecPage({
+            components: [TetButton],
+            html: `<tet-button></tet-button>`
+        });
+        expect(isFocusableElementOrChild(page.root)).toBe(true);
+    });
+    it('returns false for a non-focusable element inside shadow DOM', async () => {
+        const page = await newSpecPage({
+            components: [TetContainer],
+            html: `<tet-container></tet-container>`
+        });
+        expect(isFocusableElementOrChild(page.root)).toBe(false);
+    });
+    it('returns false for a non-focusable element with non-focusable children', () => {
+        const div = document.createElement('div');
+        const span = document.createElement('span');
+        div.appendChild(span);
+        expect(isFocusableElementOrChild(div)).toBe(false);
+    });
+    it('returns true for a contenteditable element', () => {
+        const div = document.createElement('div');
+        div.setAttribute('contenteditable', 'true');
+        expect(isFocusableElementOrChild(div)).toBe(true);
+    });
+});

package/dist/components/index.js

@@ -88,7 +88,7 @@ import { TetThankYouViewV3 } from './tet-thank-you-view-v3.js';
 import { TetTooltip } from './tet-tooltip.js';
 import { TetTvGiftBlock } from './tet-tv-gift-block.js';
 import { TetTvGiftList } from './tet-tv-gift-list.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-37ed3ebb.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-599035b8.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {