@xplor-education/core-stencil-components 2.1.0 → 3.0.0

package/dist/hydrate/index.js

@@ -3298,6 +3298,7 @@ class XplorAlertDialog {
          * Persistent mode - prevents closing on backdrop click
          */
         this.persistent = true;
+        this.previouslyFocusedElement = null;
         this.handleBackdropClick = () => {
             if (!this.persistent) {
                 this.closeDialog();
@@ -3315,20 +3316,75 @@ class XplorAlertDialog {
     handleOpenChange(newValue) {
         if (newValue) {
             document.body.style.overflow = 'hidden';
+            this.previouslyFocusedElement = document.activeElement;
+            requestAnimationFrame(() => {
+                this.setInitialFocus();
+            });
         }
         else {
             document.body.style.overflow = '';
+            if (this.previouslyFocusedElement) {
+                this.previouslyFocusedElement.focus();
+                this.previouslyFocusedElement = null;
+            }
         }
     }
     disconnectedCallback() {
         document.body.style.overflow = '';
     }
+    handleKeyDown(event) {
+        if (!this.open)
+            return;
+        if (event.key === 'Escape' && !this.persistent) {
+            event.preventDefault();
+            this.closeDialog();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+    }
+    getFocusableElements() {
+        if (!this.dialogEl)
+            return [];
+        const selectors = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        return Array.from(this.dialogEl.querySelectorAll(selectors));
+    }
+    trapFocus(event) {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length === 0)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+    setInitialFocus() {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+        else if (this.dialogEl) {
+            this.dialogEl.focus();
+        }
+    }
     render() {
         if (!this.open) {
             return null;
         }
-        return (hAsync(Host, null, hAsync("div", { class: "xplor-alert-dialog__backdrop", onClick: this.handleBackdropClick }, hAsync("div", { class: "xplor-alert-dialog__card", style: { width: this.width }, onClick: this.handleCardClick }, hAsync("button", { type: "button", class: "xplor-alert-dialog__close-btn", onClick: this.closeDialog, "aria-label": "Close dialog" }, "\u2715"), hAsync("div", { class: "xplor-alert-dialog__title" }, hAsync("slot", { name: "title" })), hAsync("div", { class: "xplor-alert-dialog__text" }, hAsync("slot", { name: "text" })), hAsync("div", { class: "xplor-alert-dialog__actions" }, hAsync("slot", { name: "actions" }))))));
+        return (hAsync(Host, null, hAsync("div", { class: "xplor-alert-dialog__backdrop", onClick: this.handleBackdropClick }, hAsync("div", { class: "xplor-alert-dialog__card", style: { width: this.width }, onClick: this.handleCardClick, role: "alertdialog", "aria-modal": "true", "aria-labelledby": this.ariaLabel ? undefined : 'xplor-alert-dialog-title', "aria-label": this.ariaLabel, "aria-describedby": "xplor-alert-dialog-text", tabindex: "-1", ref: (el) => (this.dialogEl = el) }, hAsync("button", { type: "button", class: "xplor-alert-dialog__close-btn", onClick: this.closeDialog, "aria-label": "Close dialog" }, "\u2715"), hAsync("div", { class: "xplor-alert-dialog__title", id: "xplor-alert-dialog-title" }, hAsync("slot", { name: "title" })), hAsync("div", { class: "xplor-alert-dialog__text", id: "xplor-alert-dialog-text" }, hAsync("slot", { name: "text" })), hAsync("div", { class: "xplor-alert-dialog__actions" }, hAsync("slot", { name: "actions" }))))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "open": ["handleOpenChange"]
     }; }
@@ -3339,9 +3395,10 @@ class XplorAlertDialog {
         "$members$": {
             "open": [1028],
             "width": [1],
-            "persistent": [4]
+            "persistent": [4],
+            "ariaLabel": [1, "aria-label"]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -3818,10 +3875,10 @@ const AssistantInput = (props) => {
             enableVoiceInput && (hAsync("button", { type: "button", class: {
                     'xplor-assistant__voice-button': true,
                     'xplor-assistant__voice-button--listening': isListening,
-                }, onClick: handleVoiceClick, disabled: disabled || isLoading, title: isListening ? 'Stop listening' : 'Start voice input' },
+                }, onClick: handleVoiceClick, disabled: disabled || isLoading, title: isListening ? 'Stop listening' : 'Start voice input', "aria-label": "Voice input" },
                 hAsync("span", { class: "xplor-assistant__voice-icon", innerHTML: microphoneIcon }))),
             hAsync("input", { type: "text", class: "xplor-assistant__input", placeholder: placeholder, value: inputValue, onInput: handleInputChange, disabled: disabled || isLoading }),
-            hAsync("button", { type: "submit", class: "xplor-assistant__send-button", disabled: isSendDisabled, title: "Send message" },
+            hAsync("button", { type: "submit", class: "xplor-assistant__send-button", disabled: isSendDisabled, title: "Send message", "aria-label": "Send message" },
                 hAsync("span", { class: "xplor-assistant__send-icon", innerHTML: sendIcon })))));
 };
 
@@ -4083,7 +4140,7 @@ class XplorAssistant {
         return (hAsync(Host, null, hAsync("div", { class: {
                 'xplor-assistant': true,
                 'xplor-assistant--disabled': this.disabled,
-            }, style: { maxHeight: this.maxHeight } }, hAsync("div", { class: "xplor-assistant__messages", ref: (el) => (this.messagesContainerRef = el) }, this.messages.map((message) => (hAsync(AssistantMessage, { message: message, enableTextToSpeech: this.enableTextToSpeech, autoSpeak: false, isSpeaking: this.isSpeaking, onSpeak: this.handleSpeak, onStopSpeaking: this.handleStopSpeaking }))), this.isLoading && (hAsync("div", { class: "xplor-assistant__message xplor-assistant__message--assistant" }, hAsync(TypingIndicator, null))), this.error && this.apiEndpoint && (hAsync("div", { class: "xplor-assistant__error-banner" }, this.error))), this.quickReplies && this.quickReplies.length > 0 && (hAsync(QuickReplies, { replies: this.quickReplies, disabled: this.disabled || this.isLoading, onReplyClick: this.handleQuickReply })), hAsync(AssistantInput, { placeholder: this.placeholder, disabled: this.disabled, isLoading: this.isLoading, enableVoiceInput: this.enableVoiceInput && this.hasVoiceSupport, isListening: this.isListening, onSendMessage: this.handleSendMessage, onStartListening: this.handleStartListening, onStopListening: this.handleStopListening, inputValue: this.inputValue, setInputValue: this.setInputValue }))));
+            }, style: { maxHeight: this.maxHeight } }, hAsync("div", { class: "xplor-assistant__messages", ref: (el) => (this.messagesContainerRef = el), role: "log", "aria-live": "polite", "aria-busy": this.isLoading ? 'true' : 'false' }, this.messages.map((message) => (hAsync(AssistantMessage, { message: message, enableTextToSpeech: this.enableTextToSpeech, autoSpeak: false, isSpeaking: this.isSpeaking, onSpeak: this.handleSpeak, onStopSpeaking: this.handleStopSpeaking }))), this.isLoading && (hAsync("div", { class: "xplor-assistant__message xplor-assistant__message--assistant" }, hAsync(TypingIndicator, null))), this.error && this.apiEndpoint && (hAsync("div", { class: "xplor-assistant__error-banner" }, this.error))), this.quickReplies && this.quickReplies.length > 0 && (hAsync(QuickReplies, { replies: this.quickReplies, disabled: this.disabled || this.isLoading, onReplyClick: this.handleQuickReply })), hAsync(AssistantInput, { placeholder: this.placeholder, disabled: this.disabled, isLoading: this.isLoading, enableVoiceInput: this.enableVoiceInput && this.hasVoiceSupport, isListening: this.isListening, onSendMessage: this.handleSendMessage, onStartListening: this.handleStartListening, onStopListening: this.handleStopListening, inputValue: this.inputValue, setInputValue: this.setInputValue }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -4327,25 +4384,30 @@ class XplorAutocomplete {
     }
     render() {
         const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';
-        return (hAsync(Host, { key: '3f88b352e99fbaf327995f2392b22a589a838c72' }, hAsync("div", { key: '358c6a0fbae370f7225c17f9b859edc0d5a1cfc5', class: {
+        const listboxId = 'autocomplete-listbox';
+        const labelId = 'autocomplete-label';
+        const activeDescendantId = this.highlightedIndex >= 0 ? `autocomplete-option-${this.highlightedIndex}` : undefined;
+        return (hAsync(Host, { key: 'f76ac5f9d1cd6e6c9618ac3884bc86a2bfabb3c5' }, hAsync("div", { key: 'efd2bd854c305c56971b5d6e19a5b9eb497099f8', class: {
                 'autocomplete': true,
                 'autocomplete--disabled': this.disabled,
                 'autocomplete--readonly': this.readonly,
                 'autocomplete--open': this.isOpen,
-            } }, this.label && (hAsync("label", { key: 'e07d2fc33354bef628b7361eeb924cf00eafb989', class: "autocomplete__label" }, this.label)), hAsync("div", { key: '455efa54f13e4aa22d62df4f30dbfb42540d4baf', class: "autocomplete__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (hAsync("div", { key: 'e1f68cc007e84feb11f01bfcde8294a3b3a52122', class: "autocomplete__chips" }, this.selectedItems.map(value => {
+            } }, this.label && (hAsync("label", { key: '97bb161105b66181558d22519c9f0cd1287b2c49', class: "autocomplete__label", id: labelId }, this.label)), hAsync("div", { key: '128acf53793205be89a8d619ce548107aaed8b28', class: "autocomplete__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (hAsync("div", { key: '670da50897139688951c077db4b6116b88bfadfa', class: "autocomplete__chips" }, this.selectedItems.map(value => {
             const item = this.findItemByValue(value);
-            return (hAsync("div", { class: "autocomplete__chip" }, hAsync("span", { class: "autocomplete__chip-label" }, this.renderSelection && item ? this.renderSelection(item) : this.getSelectedItemLabel(value)), hAsync("button", { type: "button", class: "autocomplete__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly }, "\u00D7")));
-        }))), hAsync("input", { key: 'bfe3af918668f6003e11b3e331d7875773c31848', ref: (el) => (this.inputEl = el), type: "text", class: "autocomplete__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off" }), hAsync("div", { key: '6198fb2b029bd365c9929bdfe0b82815b3dd6bf2', class: "autocomplete__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (hAsync("button", { key: 'e997555b393f60ae3f4affd803a92ba39e95b48b', type: "button", class: "autocomplete__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), hAsync("span", { key: '0eab80a3ce9e55e403758ba0a53e89e7c3d3a36e', class: "autocomplete__icon" }, "\u25BC"))), this.isOpen && this.filteredItems.length > 0 && (hAsync("div", { key: '37a77dc04d78b8c8cdc4decedf65f0adda67f626', class: "autocomplete__dropdown", ref: (el) => (this.dropdownEl = el), style: { maxWidth: this.menuMaxWidth } }, this.filteredItems.map((item, index) => {
+            const chipLabel = this.getSelectedItemLabel(value);
+            return (hAsync("div", { class: "autocomplete__chip" }, hAsync("span", { class: "autocomplete__chip-label" }, this.renderSelection && item ? this.renderSelection(item) : chipLabel), hAsync("button", { type: "button", class: "autocomplete__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly, "aria-label": `Remove ${chipLabel}` }, "\u00D7")));
+        }))), hAsync("input", { key: '25e9e5111726cd720ab88a4a5ae25f84b48eee1e', ref: (el) => (this.inputEl = el), type: "text", class: "autocomplete__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-autocomplete": "list" }), hAsync("div", { key: '5128b893c4743a49439a279b0cb7094077ebd528', class: "autocomplete__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (hAsync("button", { key: '512d7956e79d9767e072462f1ec309b081716c86', type: "button", class: "autocomplete__clear", onClick: this.handleClear, "aria-label": "Clear selection" }, "\u00D7")), hAsync("span", { key: 'e0cfba3c1513b63f9697835ad6919d045c7011db', class: "autocomplete__icon", "aria-hidden": "true" }, "\u25BC"))), this.isOpen && this.filteredItems.length > 0 && (hAsync("div", { key: '9c100abedb5ee252df82994722c0da9d5787d1bf', class: "autocomplete__dropdown", ref: (el) => (this.dropdownEl = el), style: { maxWidth: this.menuMaxWidth }, role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Suggestions' }, this.filteredItems.map((item, index) => {
             const itemVal = this.getItemValue(item);
-            return (hAsync("div", { key: itemVal, "data-index": index, class: {
+            const isSelected = this.multiple
+                ? this.selectedItems.includes(itemVal)
+                : this.value === itemVal;
+            return (hAsync("div", { key: itemVal, id: `autocomplete-option-${index}`, "data-index": index, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : undefined, class: {
                     'autocomplete__item': true,
                     'autocomplete__item--highlighted': index === this.highlightedIndex,
-                    'autocomplete__item--selected': this.multiple
-                        ? this.selectedItems.includes(itemVal)
-                        : this.value === itemVal,
+                    'autocomplete__item--selected': isSelected,
                     'autocomplete__item--disabled': item.disabled,
                 }, onClick: () => this.selectItem(item) }, this.renderItem ? this.renderItem(item) : this.getItemText(item)));
-        }))), this.isOpen && this.filteredItems.length === 0 && (hAsync("div", { key: '0f27440009a83374a615acf39b400181f4c7189f', class: "autocomplete__dropdown", style: { maxWidth: this.menuMaxWidth } }, hAsync("div", { key: '634fb46e7f539c1cddfa11f2a30f80e34a684913', class: "autocomplete__no-results" }, "No results found"))))));
+        }))), this.isOpen && this.filteredItems.length === 0 && (hAsync("div", { key: '329f92d7f4bf36bb114909853e249978412ae82f', class: "autocomplete__dropdown", style: { maxWidth: this.menuMaxWidth }, role: "listbox", id: listboxId }, hAsync("div", { key: '400e97f955724f59830fb37b52d99c3723627e51', class: "autocomplete__no-results", role: "option", "aria-disabled": "true" }, "No results found"))))));
     }
     get el() { return getElement(this); }
     static get style() { return xplorAutocompleteCss; }
@@ -4357,6 +4419,7 @@ class XplorAutocomplete {
             "value": [1032],
             "placeholder": [1],
             "label": [1],
+            "ariaLabel": [1, "aria-label"],
             "disabled": [4],
             "readonly": [4],
             "clearable": [4],
@@ -4393,8 +4456,8 @@ class XplorAvatar {
             className += ` xpl-avatar--${this.size}`;
         if (this.color)
             className += ` xpl-avatar--${this.color}`;
-        const inner = (hAsync("div", { key: '2e2722f2649108b7fdc3fd51375e17ac47e6f1ff' }, this.src ? (hAsync("img", { alt: this.name, src: this.src })) : (hAsync("div", { class: "xpl-avatar__placeholder" }, hAsync("slot", null))), this.status && hAsync("div", { key: '1367e8fccd661b566d95cb1bf3a20467be7bc40f', class: `xpl-avatar__dot--${this.status}` })));
-        return (hAsync(Host, { key: 'ac12deb4b322146d75c650ba0abe6d96c35efd67' }, this.href && !this.disabled ? (hAsync("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (hAsync("div", { class: className + ' xpl-avatar--disabled' }, inner)) : (hAsync("div", { class: className }, inner))));
+        const inner = (hAsync("div", { key: '2e2722f2649108b7fdc3fd51375e17ac47e6f1ff' }, this.src ? (hAsync("img", { alt: this.name, src: this.src })) : (hAsync("div", { class: "xpl-avatar__placeholder" }, hAsync("slot", null))), this.status && hAsync("div", { key: '26fa57a9a697a110ef73434376715eda0e5134a5', class: `xpl-avatar__dot--${this.status}`, "aria-label": `Status: ${this.status}`, role: "img" })));
+        return (hAsync(Host, { key: '9c99cec20679f0d10fbcf9dffc70877c0dc879f9' }, this.href && !this.disabled ? (hAsync("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (hAsync("div", { class: className + ' xpl-avatar--disabled' }, inner)) : (hAsync("div", { class: className }, inner))));
     }
     static get style() { return xplorAvatarCss; }
     static get cmpMeta() { return {
@@ -4871,6 +4934,10 @@ class XplorBtnBackToParent {
          * Visual variant
          */
         this.variant = 'tonal';
+        /**
+         * Accessible label for the button
+         */
+        this.ariaLabel = 'Back to parent';
         this.handleClick = () => {
             this.back.emit();
         };
@@ -4883,7 +4950,7 @@ class XplorBtnBackToParent {
         const buttonStyles = {
             '--btn-size': this.size,
         };
-        return (hAsync(Host, { key: '9ea4d137e9f4c80d0f5586953c5d463f365f5205' }, hAsync("button", { key: '1e1839f03ca09a8a106a6f2ee2d7ca0a7b407588', class: buttonClasses, style: buttonStyles, onClick: this.handleClick }, hAsync("span", { key: '50f7ee25b402d4ee796670ab59ad3c1085a0138d', class: "xplor-btn-back-to-parent__icon" }, "\u2715"))));
+        return (hAsync(Host, { key: '0962b04ae634f044dd3e7c1eacf42b7d2c8e0f1e' }, hAsync("button", { key: '82cb8fa3218a17784a0ab360d328b68f2c0e6e81', class: buttonClasses, style: buttonStyles, onClick: this.handleClick, "aria-label": this.ariaLabel }, hAsync("span", { key: '784853baa5b013fc85a07054e446e6166eab7068', class: "xplor-btn-back-to-parent__icon" }, "\u2715"))));
     }
     static get style() { return xplorBtnBackToParentCss; }
     static get cmpMeta() { return {
@@ -4894,7 +4961,8 @@ class XplorBtnBackToParent {
             "inline": [4],
             "bgColor": [1, "bg-color"],
             "color": [1],
-            "variant": [1]
+            "variant": [1],
+            "ariaLabel": [1, "aria-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -4945,7 +5013,7 @@ class XplorBtnIcon {
             '--btn-size': typeof this.size === 'number' ? `${this.size}px` : this.size,
             '--icon-size': typeof this.iconSize === 'number' ? `${this.iconSize}px` : this.iconSize,
         };
-        return (hAsync(Host, { key: 'd5077956c7999278384896a9a7a6bc011a6c84fe' }, hAsync("button", { key: '8c58f798cdfd47607c4d7275d1a1d3c63c34d96d', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick }, hAsync("span", { key: 'b2da80152f63a20cd4c284103c344e1c95f76f10', class: "xplor-btn-icon__content" }, hAsync("slot", { key: 'de99b1a981800af7c0639cb0d1188268a9a408e1' })))));
+        return (hAsync(Host, { key: '9d87aab5e3af33201c71dffeab51a5a02cc61e98' }, hAsync("button", { key: 'c30b8c4aa51a957c84e7fff3d72e01961dec911c', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick, "aria-label": this.ariaLabel }, hAsync("span", { key: '99773527f599523638ce8463fe308826f01202cf', class: "xplor-btn-icon__content" }, hAsync("slot", { key: '14e1356bcecd1d2b8768cddbaf257f49bf92e5a7' })))));
     }
     static get style() { return xplorBtnIconCss; }
     static get cmpMeta() { return {
@@ -4956,7 +5024,8 @@ class XplorBtnIcon {
             "size": [8],
             "iconSize": [8, "icon-size"],
             "variant": [1],
-            "disabled": [4]
+            "disabled": [4],
+            "ariaLabel": [1, "aria-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -4998,6 +5067,10 @@ class XplorBtnMenu {
          * Whether the menu is open
          */
         this.show = false;
+        /**
+         * Index of the currently focused menu item for keyboard navigation
+         */
+        this.focusedIndex = -1;
         this.handleOutsideClick = (event) => {
             if (this.menuRef && !this.menuRef.contains(event.target)) {
                 this.show = false;
@@ -5005,10 +5078,16 @@ class XplorBtnMenu {
         };
         this.toggleMenu = () => {
             this.show = !this.show;
+            if (!this.show) {
+                this.focusedIndex = -1;
+            }
         };
         this.handleClickOption = (option) => {
+            var _a;
             this.xplorClick.emit(option);
             this.show = false;
+            this.focusedIndex = -1;
+            (_a = this.triggerBtnRef) === null || _a === void 0 ? void 0 : _a.focus();
         };
         this.isHidden = (key) => {
             return key !== null && this.hiddenKeys.includes(key);
@@ -5023,32 +5102,119 @@ class XplorBtnMenu {
     disconnectedCallback() {
         document.removeEventListener('click', this.handleOutsideClick);
     }
+    /**
+     * Returns the list of visible (non-hidden) options for keyboard navigation
+     */
+    getVisibleOptions() {
+        return this.options
+            .map((option, index) => ({ option, key: option.key || String(index) }))
+            .filter(({ key }) => !this.isHidden(key));
+    }
+    /**
+     * Focuses the menu item at the given index in the visible options list
+     */
+    focusMenuItem(index) {
+        if (this.menuRef) {
+            const items = this.menuRef.querySelectorAll('[role="menuitem"]');
+            if (items[index]) {
+                items[index].focus();
+            }
+        }
+    }
+    handleKeyDown(event) {
+        var _a, _b;
+        if (!this.show && (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ')) {
+            const target = event.target;
+            if (target === this.triggerBtnRef || ((_a = this.el.querySelector('[slot="activator"]')) === null || _a === void 0 ? void 0 : _a.contains(target))) {
+                if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    this.show = true;
+                    this.focusedIndex = 0;
+                    requestAnimationFrame(() => this.focusMenuItem(0));
+                }
+            }
+            return;
+        }
+        if (!this.show)
+            return;
+        const visibleOptions = this.getVisibleOptions();
+        const totalVisible = visibleOptions.length;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusedIndex = this.focusedIndex < totalVisible - 1 ? this.focusedIndex + 1 : 0;
+                this.focusMenuItem(this.focusedIndex);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusedIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : totalVisible - 1;
+                this.focusMenuItem(this.focusedIndex);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.show = false;
+                this.focusedIndex = -1;
+                (_b = this.triggerBtnRef) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.focusedIndex >= 0 && this.focusedIndex < totalVisible) {
+                    const { option, key } = visibleOptions[this.focusedIndex];
+                    if (!this.isDisabled(key)) {
+                        this.handleClickOption(option);
+                    }
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusedIndex = 0;
+                this.focusMenuItem(this.focusedIndex);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusedIndex = totalVisible - 1;
+                this.focusMenuItem(this.focusedIndex);
+                break;
+            case 'Tab':
+                this.show = false;
+                this.focusedIndex = -1;
+                break;
+        }
+    }
     render() {
-        return (hAsync(Host, { key: '3e9516c7c2b31794bf8d71eb5672e46d3210dbc8' }, hAsync("div", { key: 'e030d7ab1b7eee7fc8de9a6a519c69c285d01529', class: "xplor-btn-menu", ref: (el) => (this.menuRef = el) }, hAsync("slot", { key: '185cb5433a18d51ea7e2f9b9309f7570050fdcea', name: "activator" }, hAsync("button", { key: 'de5afd1f3e58b56301ea75724f0f1a5e04697f39', class: "xplor-btn-menu__button", onClick: this.toggleMenu }, hAsync("span", { key: '73eaed41e0a754d06753f0fa30ef32864f2841f8' }, this.label), hAsync("span", { key: '63bc890fe97154d02eb4da50e689f1db5226870f', class: "xplor-btn-menu__icon" }, "\u25BC"))), this.show && (hAsync("div", { key: '6f231d7e1feac5dca59c9ef03d45dcfeffcedcbf', class: "xplor-btn-menu__list" }, this.options.map((option, index) => {
+        const menuId = 'xplor-btn-menu-list';
+        let visibleIndex = 0;
+        return (hAsync(Host, { key: '20b1a4d54b992d5ea4b1a4cd8fbaa5699b1bc6ab' }, hAsync("div", { key: 'e23725f6fa432e19b59a3c0809706df45df02def', class: "xplor-btn-menu", ref: (el) => (this.menuRef = el) }, hAsync("slot", { key: 'ed385faab26b9a1bf83ed583261b0d22744a5b10', name: "activator" }, hAsync("button", { key: 'f0539b0092489e356b087cddd67bfb84cb31acf8', ref: (el) => (this.triggerBtnRef = el), class: "xplor-btn-menu__button", onClick: this.toggleMenu, "aria-haspopup": "menu", "aria-expanded": this.show ? 'true' : 'false', "aria-controls": this.show ? menuId : undefined, "aria-label": this.ariaLabel || this.label || 'Menu' }, hAsync("span", { key: 'b1126eb8ffc12a89b3dd1a83afd5f644226496ee' }, this.label), hAsync("span", { key: 'f9053a73065841d35278612e8f9d5345b3e1daf4', class: "xplor-btn-menu__icon", "aria-hidden": "true" }, "\u25BC"))), this.show && (hAsync("div", { key: '7b294e8b3702051c2adc317736d9bb3085137f27', class: "xplor-btn-menu__list", role: "menu", id: menuId, "aria-label": this.ariaLabel || this.label || 'Menu' }, this.options.map((option, index) => {
             const key = option.key || String(index);
             if (this.isHidden(key)) {
                 return null;
             }
-            return (hAsync("div", { key: key, class: {
+            const disabled = this.isDisabled(key);
+            const currentVisibleIndex = visibleIndex++;
+            return (hAsync("div", { key: key, role: "menuitem", tabindex: currentVisibleIndex === this.focusedIndex ? 0 : -1, "aria-disabled": disabled ? 'true' : undefined, class: {
                     'xplor-btn-menu__item': true,
-                    'xplor-btn-menu__item--disabled': this.isDisabled(key),
-                }, onClick: () => !this.isDisabled(key) && this.handleClickOption(option) }, hAsync("slot", { name: key }, option.label || '')));
+                    'xplor-btn-menu__item--disabled': disabled,
+                }, onClick: () => !disabled && this.handleClickOption(option) }, hAsync("slot", { name: key }, option.label || '')));
         }))))));
     }
+    get el() { return getElement(this); }
     static get style() { return xplorBtnMenuCss; }
     static get cmpMeta() { return {
         "$flags$": 6,
         "$tagName$": "xplor-btn-menu",
         "$members$": {
+            "ariaLabel": [1, "aria-label"],
             "label": [1],
             "options": [16],
             "hiddenKeys": [16, "hidden-keys"],
             "disabledKeys": [16, "disabled-keys"],
             "color": [1],
             "density": [1],
-            "show": [32]
+            "show": [32],
+            "focusedIndex": [32]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -5226,6 +5392,8 @@ class XplorButton {
         registerInstance(this, hostRef);
         this.type = 'secondary';
         this.mode = 'pg'; // 'dark', 'pg', 'office' (default: 'dark')
+        /** Whether the button is disabled */
+        this.disabled = false;
         /**
          * Icon to display (defaults to plus sign)
          */
@@ -5240,7 +5408,7 @@ class XplorButton {
     render() {
         const isIconOnly = !this.text && this.iconPosition !== null;
         const hasIcon = this.iconPosition !== null;
-        return (hAsync(Host, { key: '94fed7b7f39f8aca0273d5b6da123e1ce7d87d01' }, hAsync("slot", { key: 'fd6a53ce8ce00175207dff16d976379a0ab8040b' }, hAsync("button", { key: 'a688aabc8675ef63f3c18c2af4b0a24c8bc29de7', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'shadow': this.type !== 'minimal' && this.type !== 'text', 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction() }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && hAsync("span", { key: '82d9558a551bcc23ead90b3f42d0fcd94bd7301f', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
+        return (hAsync(Host, { key: '193c8139b43bdbaf108bf09d220b20d746f72cd7' }, hAsync("slot", { key: '61b731d8173a15bcd76fbbf16f0d1d97cbab6e34' }, hAsync("button", { key: '04486cbf547798161e7756a5999898bc46b298b5', role: "button", class: Object.assign({ 'x-button': true, [this.type]: true, 'shadow': this.type !== 'minimal' && this.type !== 'text', 'x-button--icon-only': isIconOnly, 'x-button--with-icon': hasIcon && !isIconOnly, 'x-button--icon-start': this.iconPosition === 'start' && !isIconOnly, 'x-button--icon-end': this.iconPosition === 'end' && !isIconOnly }, (this.styles ? { [this.styles]: true } : {})), onClick: () => this.clickAction && this.clickAction(), "aria-label": this.ariaLabel, "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled }, hasIcon && this.iconPosition === 'start' && this.renderIcon(), this.text && hAsync("span", { key: '07e204d356d830444e1b26979be6f1f3926ba551', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
     }
     static get style() { return xplorButtonCss; }
     static get cmpMeta() { return {
@@ -5253,6 +5421,8 @@ class XplorButton {
             "size": [1],
             "styles": [1],
             "clickAction": [16, "click-action"],
+            "ariaLabel": [1, "aria-label"],
+            "disabled": [4],
             "iconPosition": [1, "icon-position"],
             "icon": [1],
             "iconSvg": [1, "icon-svg"]
@@ -5341,10 +5511,12 @@ class XplorChatWidget {
 
 const xplorCheckboxCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\n  } */\n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n/* custom-checkbox.scss */\n:host {\n  display: inline-block;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n.checkbox-wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.checkbox {\n  width: 20px;\n  height: 20px;\n  border-radius: 4px;\n  border: 2px solid #6b7280;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  outline: none;\n  position: relative;\n}\n.checkbox.hover {\n  background: #d1fae5;\n  border-color: #059669;\n}\n.checkbox.focus {\n  background: #a7f3d0;\n  border-color: #059669;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);\n}\n.checkbox.pressed {\n  background: #6ee7b7;\n  border-color: #059669;\n}\n.checkbox.checked {\n  background: #059669;\n  border-color: #059669;\n}\n.checkbox.checked.hover {\n  background: #d1fae5;\n  border-color: #059669;\n}\n.checkbox.checked.hover .check-icon {\n  color: #059669;\n}\n.checkbox.checked.focus {\n  background: #a7f3d0;\n  border-color: #059669;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);\n}\n.checkbox.checked.focus .check-icon {\n  color: #059669;\n}\n.checkbox.checked.pressed {\n  background: #6ee7b7;\n  border-color: #059669;\n}\n.checkbox.checked.pressed .check-icon {\n  color: #059669;\n}\n.checkbox.indeterminate {\n  background: #059669;\n  border-color: #059669;\n}\n.checkbox.indeterminate.hover {\n  background: #d1fae5;\n  border-color: #059669;\n}\n.checkbox.indeterminate.hover .indeterminate-icon {\n  color: #059669;\n}\n.checkbox.indeterminate.focus {\n  background: #a7f3d0;\n  border-color: #059669;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);\n}\n.checkbox.indeterminate.focus .indeterminate-icon {\n  color: #059669;\n}\n.checkbox.indeterminate.pressed {\n  background: #6ee7b7;\n  border-color: #059669;\n}\n.checkbox.indeterminate.pressed .indeterminate-icon {\n  color: #059669;\n}\n.checkbox.error {\n  border-color: #ef4444;\n}\n.checkbox.error.hover {\n  background: #fee2e2;\n  border-color: #ef4444;\n}\n.checkbox.error.focus {\n  background: #fecaca;\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n.checkbox.error.pressed {\n  background: #fca5a5;\n  border-color: #ef4444;\n}\n.checkbox.error.checked {\n  background: #ef4444;\n  border-color: #ef4444;\n}\n.checkbox.error.checked.hover {\n  background: #fee2e2;\n  border-color: #ef4444;\n}\n.checkbox.error.checked.hover .check-icon {\n  color: #ef4444;\n}\n.checkbox.error.checked.focus {\n  background: #fecaca;\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n.checkbox.error.checked.focus .check-icon {\n  color: #ef4444;\n}\n.checkbox.error.checked.pressed {\n  background: #fca5a5;\n  border-color: #ef4444;\n}\n.checkbox.error.checked.pressed .check-icon {\n  color: #ef4444;\n}\n.checkbox.error.indeterminate {\n  background: #ef4444;\n  border-color: #ef4444;\n}\n.checkbox.error.indeterminate.hover {\n  background: #fee2e2;\n  border-color: #ef4444;\n}\n.checkbox.error.indeterminate.hover .indeterminate-icon {\n  color: #ef4444;\n}\n.checkbox.error.indeterminate.focus {\n  background: #fecaca;\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n.checkbox.error.indeterminate.focus .indeterminate-icon {\n  color: #ef4444;\n}\n.checkbox.error.indeterminate.pressed {\n  background: #fca5a5;\n  border-color: #ef4444;\n}\n.checkbox.error.indeterminate.pressed .indeterminate-icon {\n  color: #ef4444;\n}\n.checkbox.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  border-color: #d1d5db;\n  background: white;\n}\n.checkbox.disabled.checked, .checkbox.disabled.indeterminate {\n  background: #d1d5db;\n  border-color: #d1d5db;\n}\n\n.check-icon,\n.indeterminate-icon {\n  width: 16px;\n  height: 16px;\n  color: white;\n}\n\n.label {\n  font-size: 14px;\n  color: #374151;\n  user-select: none;\n}\n.checkbox.disabled ~ .label {\n  opacity: 0.4;\n}";
 
+let checkboxIdCounter = 0;
 class XplorCheckbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.checkboxChange = createEvent(this, "checkboxChange");
+        this.labelId = `xplor-checkbox-label-${++checkboxIdCounter}`;
         this.initialChecked = false;
         this.initialIndeterminate = false;
         this.disabled = false;
@@ -5416,7 +5588,7 @@ class XplorCheckbox {
         this.indeterminate = this.initialIndeterminate;
     }
     render() {
-        return (hAsync("div", { key: 'b8e50575c4ab946f2bd1949a552abf98218c3cc0', class: "checkbox-wrapper" }, hAsync("div", { key: '4e1ea41fed9f07346be31da5436eeb4d8961d559', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString() }, this.checked && (hAsync("svg", { key: 'de6740ce5950517792bbcacd5019af968d0d75f8', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, hAsync("path", { key: '25b2882bc42793685ce25b4a06ae35a3f33fb195', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (hAsync("svg", { key: 'a54be57758d0447a8575a1d141fa592e55e8cbdc', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, hAsync("path", { key: '12350f7a694cac2f3f18327a2a3626a414167a58', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && hAsync("span", { key: '8185cd091331cf4aed793dbdffcb674d478d5d3a', class: "label" }, this.label)));
+        return (hAsync("div", { key: '02d3efb24ac53caa742721720ec6d212eb159a55', class: "checkbox-wrapper" }, hAsync("div", { key: '1d1024d0dfb9328d607919dad86bfa25def7bf35', class: this.getCheckboxClass(), onClick: this.handleClick, onMouseEnter: () => this.isHovered = true, onMouseLeave: () => this.isHovered = false, onMouseDown: () => this.isPressed = true, onMouseUp: () => this.isPressed = false, onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "checkbox", "aria-checked": this.indeterminate ? 'mixed' : this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-labelledby": this.label ? this.labelId : undefined }, this.checked && (hAsync("svg", { key: 'e5bd243560546d47bfc77d753df3020fb1abb417', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, hAsync("path", { key: '19da038d854b218177b668da5b8e8c3489dd377d', d: "M13.3334 4L6.00002 11.3333L2.66669 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (hAsync("svg", { key: '069ce072241705fabb0a740271d7b6e6192e35a8', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, hAsync("path", { key: 'afc9851ff1e2ecb32cb7f0037c72844e8ae1a625', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && hAsync("span", { key: '4fbc5b3bbf78fd53aa0ee5a65e1a3b1b76cbb114', class: "label", id: this.labelId }, this.label)));
     }
     static get watchers() { return {
         "initialChecked": ["watchCheckedProp"],
@@ -5660,23 +5832,32 @@ class XplorCombobox {
     render() {
         const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';
         const showCreateOption = this.canCreateNew();
-        return (hAsync(Host, { key: '64bfbc829a52c048f8270ab328f73607bd94ebc1' }, hAsync("div", { key: '25d9cf959f68c555befdfd5d2351cbb1964b1e46', class: {
+        const listboxId = 'combobox-listbox';
+        const labelId = 'combobox-label';
+        const activeDescendantId = this.highlightedIndex >= 0 ? `combobox-option-${this.highlightedIndex}` : undefined;
+        return (hAsync(Host, { key: '5c3fb39153fe1a83d72b4ad3aa60d4602014916c' }, hAsync("div", { key: 'ed9f80ab76d19c842e9da6a016040fdf68395332', class: {
                 'combobox': true,
                 'combobox--disabled': this.disabled,
                 'combobox--readonly': this.readonly,
                 'combobox--open': this.isOpen,
-            } }, this.label && (hAsync("label", { key: '5d6afc2c5c9b3c84abca67469b87c1acb88b9517', class: "combobox__label" }, this.label)), hAsync("div", { key: '5d7666d518792cc71c7062453f308771499056f9', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (hAsync("div", { key: 'c16c2887b644a9c47034b70a949a7d4dcc403233', class: "combobox__chips" }, this.selectedItems.map(value => (hAsync("div", { class: "combobox__chip" }, hAsync("span", { class: "combobox__chip-label" }, this.getSelectedItemLabel(value)), hAsync("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly }, "\u00D7")))))), hAsync("input", { key: '28721137cc8339ac1c0881319dc4718ed2c04cf2', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off" }), hAsync("div", { key: 'ba914008002039d274efd11f9790e9d13613a048', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (hAsync("button", { key: '3b442197e1a6e0b94157dfb6f3a5d5e5529419dc', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), hAsync("span", { key: 'cdafaeb0392798f291892342d50a0cec7234b7a1', class: "combobox__icon" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (hAsync("div", { key: 'd50da0e18e34a079345c13498efbf3c61fb6be28', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el) }, this.filteredItems.map((item, index) => (hAsync("div", { key: item.value, "data-index": index, class: {
-                'combobox__item': true,
-                'combobox__item--highlighted': index === this.highlightedIndex,
-                'combobox__item--selected': this.multiple
-                    ? this.selectedItems.includes(item.value)
-                    : this.value === item.value,
-                'combobox__item--disabled': item.disabled,
-            }, onClick: () => this.selectItem(item) }, item.label))), showCreateOption && (hAsync("div", { key: '9801a00634c1b6a1ed4bf1f97dc5c5321dc8c189', "data-index": this.filteredItems.length, class: {
+            } }, this.label && (hAsync("label", { key: 'a5837bdc2fe30046a56a659a942c82c6612e5eed', class: "combobox__label", id: labelId }, this.label)), hAsync("div", { key: '84022a8390a2024ef29d7dbdb5bd3b34c1da2305', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (hAsync("div", { key: '7df2befc1d6104e8b5472c800fe30eda0ecac550', class: "combobox__chips" }, this.selectedItems.map(value => {
+            const chipLabel = this.getSelectedItemLabel(value);
+            return (hAsync("div", { class: "combobox__chip" }, hAsync("span", { class: "combobox__chip-label" }, chipLabel), hAsync("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly, "aria-label": `Remove ${chipLabel}` }, "\u00D7")));
+        }))), hAsync("input", { key: '4b01ffb37bfe750c24081ec839fcd6b70f87bde0', ref: (el) => (this.inputEl = el), type: "text", class: "combobox__input", placeholder: this.placeholder, value: this.searchQuery, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, disabled: this.disabled, readonly: this.readonly, autocomplete: "off", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-autocomplete": "list" }), hAsync("div", { key: 'f1fa0b56edeb6c5e25eebd34a9d143a0ecca1173', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (hAsync("button", { key: '5179310582b9aef4739985dbeefd35bda1bb86bb', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear selection" }, "\u00D7")), hAsync("span", { key: '93c5431addfcaf88e51d38907304a4e289c3183d', class: "combobox__icon", "aria-hidden": "true" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (hAsync("div", { key: '9fba0e29de90f8bdcdd4861fbb0fb06a20fa980b', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el), role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Options' }, this.filteredItems.map((item, index) => {
+            const isSelected = this.multiple
+                ? this.selectedItems.includes(item.value)
+                : this.value === item.value;
+            return (hAsync("div", { key: item.value, id: `combobox-option-${index}`, "data-index": index, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : undefined, class: {
+                    'combobox__item': true,
+                    'combobox__item--highlighted': index === this.highlightedIndex,
+                    'combobox__item--selected': isSelected,
+                    'combobox__item--disabled': item.disabled,
+                }, onClick: () => this.selectItem(item) }, item.label));
+        }), showCreateOption && (hAsync("div", { key: '880bc30bc32c87dfb9ecf9b706162299e80fd1c5', id: `combobox-option-${this.filteredItems.length}`, "data-index": this.filteredItems.length, role: "option", "aria-selected": "false", class: {
                 'combobox__item': true,
                 'combobox__item--create': true,
                 'combobox__item--highlighted': this.highlightedIndex === this.filteredItems.length,
-            }, onClick: () => this.createNewItem() }, hAsync("span", { key: '4d563ce7576c3caa2b343bfe18dbdf2c29f0ceb2', class: "combobox__create-label" }, this.createMessage, ":"), ' ', hAsync("strong", { key: 'e792de9d6e8586757271e0838b9035da7c3f47cb' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (hAsync("div", { key: 'f163e417e711ec833320a8f6d687a3202741b1fe', class: "combobox__dropdown" }, hAsync("div", { key: '30831097ffecac58be272ff9fe6931e2d7bd4a34', class: "combobox__no-results" }, "No results found"))))));
+            }, onClick: () => this.createNewItem() }, hAsync("span", { key: 'd0ff5841add7495a79a1e9453b87706971cf8907', class: "combobox__create-label" }, this.createMessage, ":"), ' ', hAsync("strong", { key: 'e1b1e94a5afce2ab3f5a714a7c593e59d9d22ff0' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (hAsync("div", { key: '0a95426511036f918cd42999cd1543fc26efbff2', class: "combobox__dropdown", role: "listbox", id: listboxId }, hAsync("div", { key: '551dc3ad968c049c5bbf2a9da71d45e203e15df7', class: "combobox__no-results", role: "option", "aria-disabled": "true" }, "No results found"))))));
     }
     get el() { return getElement(this); }
     static get style() { return xplorComboboxCss; }
@@ -5688,6 +5869,7 @@ class XplorCombobox {
             "value": [1032],
             "placeholder": [1],
             "label": [1],
+            "ariaLabel": [1, "aria-label"],
             "disabled": [4],
             "readonly": [4],
             "clearable": [4],
@@ -5884,18 +6066,24 @@ class XplorDatatable {
                 'horizontal-lines': this.horizontalLines,
                 'striped': this.striped,
                 'is-empty': this.items.length === 0,
-            }, style: hasHeight ? { height: tableHeight } : {} }, hAsync("table", { key: '5f46224fe7ecc2fd3781e11d592fee5c8d80e9f2', class: { 'hover': this.hover } }, hAsync("thead", { key: 'd20432aa1d6551dd324a60ed594cd5ebc2c80198' }, hAsync("tr", { key: '62cc50e679f8345caba6f92a7ae117b68728425d' }, this.canSelect && (hAsync("th", { key: 'dfffb0bf421458b192db6eae3538da8a752f5356', class: "select-column" }, hAsync("label", { key: '17cdb037cee9b2d0cce729e0761f03b4bca14354', class: "checkbox-label" }, hAsync("input", { key: 'ecba2511bab5cd9a25a01eb1e7038e1400492392', type: "checkbox", checked: this.allSelected, indeterminate: this.internalSelected.size > 0 &&
-                this.internalSelected.size < this.items.length, onChange: this.handleSelectAll })))), this.headers.map(header => (hAsync("th", { class: {
+            }, style: hasHeight ? { height: tableHeight } : {} }, hAsync("table", { key: '5f46224fe7ecc2fd3781e11d592fee5c8d80e9f2', class: { 'hover': this.hover } }, hAsync("thead", { key: 'd20432aa1d6551dd324a60ed594cd5ebc2c80198' }, hAsync("tr", { key: '62cc50e679f8345caba6f92a7ae117b68728425d' }, this.canSelect && (hAsync("th", { key: 'dfffb0bf421458b192db6eae3538da8a752f5356', class: "select-column" }, hAsync("label", { key: '17cdb037cee9b2d0cce729e0761f03b4bca14354', class: "checkbox-label" }, hAsync("input", { key: '668128d3f8238449b965df2825e164a2e12a4626', type: "checkbox", checked: this.allSelected, indeterminate: this.internalSelected.size > 0 &&
+                this.internalSelected.size < this.items.length, onChange: this.handleSelectAll, "aria-label": "Select all rows" })))), this.headers.map(header => (hAsync("th", { class: {
                 sortable: header.sortable !== false,
                 sorted: this.sortBy === header.value,
                 fixed: header.fixed,
                 [`align-${header.align || 'left'}`]: true,
-            }, style: header.width ? { width: typeof header.width === 'number' ? `${header.width}px` : header.width } : {}, onClick: () => header.sortable !== false && this.handleSort(header) }, hAsync("div", { class: "header-content" }, hAsync("span", null, header.text), header.sortable !== false && this.getSortIcon(header))))))), this.loading && this.skeletonLoader ? (this.renderSkeletonLoader()) : (hAsync("tbody", null, this.items.length === 0 ? (hAsync("tr", { class: "empty-row" }, hAsync("td", { colSpan: this.headers.length + (this.canSelect ? 1 : 0) }, hAsync("div", { class: "empty-state" }, hAsync("p", null, "No data available"))))) : (this.items.map(item => {
+            }, style: header.width ? { width: typeof header.width === 'number' ? `${header.width}px` : header.width } : {}, onClick: () => header.sortable !== false && this.handleSort(header), "aria-sort": header.sortable !== false && this.sortBy === header.value
+                ? this.sortDirection === 'asc'
+                    ? 'ascending'
+                    : this.sortDirection === 'desc'
+                        ? 'descending'
+                        : 'none'
+                : undefined }, hAsync("div", { class: "header-content" }, hAsync("span", null, header.text), header.sortable !== false && this.getSortIcon(header))))))), this.loading && this.skeletonLoader ? (this.renderSkeletonLoader()) : (hAsync("tbody", null, this.items.length === 0 ? (hAsync("tr", { class: "empty-row" }, hAsync("td", { colSpan: this.headers.length + (this.canSelect ? 1 : 0) }, hAsync("div", { class: "empty-state" }, hAsync("p", null, "No data available"))))) : (this.items.map(item => {
             const isSelected = this.internalSelected.has(item);
             return (hAsync("tr", { class: {
                     selected: isSelected,
                     clickable: true,
-                }, onClick: (e) => this.handleRowClick(item, e) }, this.canSelect && (hAsync("td", { class: "select-column" }, hAsync("label", { class: "checkbox-label" }, hAsync("input", { type: "checkbox", checked: isSelected, onChange: (e) => this.handleSelectOne(e, item) })))), this.headers.map(header => (hAsync("td", { class: `align-${header.align || 'left'}` }, hAsync("slot", { name: `item.${header.value}` }, item[header.value]))))));
+                }, onClick: (e) => this.handleRowClick(item, e), "aria-selected": this.canSelect ? isSelected ? 'true' : 'false' : undefined }, this.canSelect && (hAsync("td", { class: "select-column" }, hAsync("label", { class: "checkbox-label" }, hAsync("input", { type: "checkbox", checked: isSelected, onChange: (e) => this.handleSelectOne(e, item) })))), this.headers.map(header => (hAsync("td", { class: `align-${header.align || 'left'}` }, hAsync("slot", { name: `item.${header.value}` }, item[header.value]))))));
         })))))), this.pagination && this.pagination.total > 0 && this.renderPagination())));
     }
     get el() { return getElement(this); }
@@ -5933,6 +6121,7 @@ class XplorDatatable {
 
 const xplorDatePickerCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-date-picker {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-date-picker {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-date-picker {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-date-picker {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-date-picker {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-date-picker {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-date-picker, ul.sc-xplor-date-picker {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-date-picker li.sc-xplor-date-picker, ul.sc-xplor-date-picker li.sc-xplor-date-picker {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-date-picker, ul.mdc-list.sc-xplor-date-picker {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-date-picker li.mdc-list-item.sc-xplor-date-picker, ul.mdc-list.sc-xplor-date-picker li.mdc-list-item.sc-xplor-date-picker {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-date-picker {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-date-picker {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-date-picker {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-date-picker {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-date-picker .mdc-text-field--outlined.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-date-picker .mdc-notched-outline.sc-xplor-date-picker .mdc-notched-outline__notch.sc-xplor-date-picker {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-date-picker {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-date-picker:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-date-picker {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-date-picker-h {\n  display: block;\n  width: 100%;\n}\n\n.date-picker.sc-xplor-date-picker {\n  position: relative;\n  width: 100%;\n}\n.date-picker--disabled.sc-xplor-date-picker {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.date-picker__label.sc-xplor-date-picker {\n  display: block;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.date-picker__required.sc-xplor-date-picker {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.date-picker__field.sc-xplor-date-picker {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  transition: border-color 0.2s ease;\n  background: white;\n}\n.date-picker__field.sc-xplor-date-picker:focus-within {\n  border-color: #008480;\n  border-width: 2px;\n}\n.date-picker__field.sc-xplor-date-picker:focus-within .date-picker__input.sc-xplor-date-picker {\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.date-picker--error.sc-xplor-date-picker .date-picker__field.sc-xplor-date-picker {\n  border-color: #d32f2f;\n}\n.date-picker__input.sc-xplor-date-picker {\n  flex: 1;\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: none;\n  border-radius: 1rem;\n  outline: none;\n  background: transparent;\n}\n.date-picker__input.sc-xplor-date-picker::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.date-picker__input.sc-xplor-date-picker:disabled {\n  cursor: not-allowed;\n}\n.date-picker__actions.sc-xplor-date-picker {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding-right: 0.5rem;\n  flex-shrink: 0;\n}\n.date-picker__clear.sc-xplor-date-picker {\n  background: none;\n  border: none;\n  font-size: 1.25rem;\n  cursor: pointer;\n  padding: 0;\n  width: 1.5rem;\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.date-picker__clear.sc-xplor-date-picker:hover {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.date-picker__icon-btn.sc-xplor-date-picker {\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n.date-picker__icon-btn.sc-xplor-date-picker:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  color: #212121;\n}\n.date-picker__icon-btn.sc-xplor-date-picker:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.date-picker__icon-svg.sc-xplor-date-picker {\n  display: block;\n}\n.date-picker__text-display.sc-xplor-date-picker {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 4px;\n  color: #008480;\n  font-size: 1rem;\n  transition: background-color 0.2s;\n}\n.date-picker__text-display.sc-xplor-date-picker:hover {\n  background-color: rgba(0, 132, 128, 0.08);\n}\n.date-picker__text-value.sc-xplor-date-picker {\n  text-decoration: underline;\n}\n.date-picker__dropdown.sc-xplor-date-picker {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  z-index: 1000;\n  background-color: #fff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.date-picker__dropdown--top.sc-xplor-date-picker {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n.date-picker__details.sc-xplor-date-picker {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.date-picker__error-message.sc-xplor-date-picker {\n  color: #d32f2f;\n}";
 
+let datePickerIdCounter = 0;
 class XplorDatePicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -5967,6 +6156,9 @@ class XplorDatePicker {
         this.isOpen = false;
         this.inputText = '';
         this.dropdownPosition = 'bottom';
+        this.inputId = `xplor-date-picker-${++datePickerIdCounter}`;
+        this.labelId = `${this.inputId}-label`;
+        this.errorId = `${this.inputId}-error`;
         this.toggleDropdown = () => {
             if (this.disabled || this.readonly)
                 return;
@@ -6132,16 +6324,16 @@ class XplorDatePicker {
     }
     render() {
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
-        const calendarIcon = (hAsync("svg", { key: '9a8e37792f14af7af7f14ec86602b5c9bfb28b56', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, hAsync("rect", { key: 'bfbc6e0022ea0c4d5d9ebd49636d9d8b32c2d32c', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), hAsync("line", { key: '0d1fd4f951edd7bf388709e4db248d1421c67832', x1: "16", y1: "2", x2: "16", y2: "6" }), hAsync("line", { key: '0995228bc198c5a09de2c9213a4713c2b3e3f054', x1: "8", y1: "2", x2: "8", y2: "6" }), hAsync("line", { key: 'c938471721e6e72b25cbc7d46ddf823f5a37bfe5', x1: "3", y1: "10", x2: "21", y2: "10" })));
-        return (hAsync(Host, { key: '5acf3baf9f4d5cece68b25339a68a05f572a1bb9' }, hAsync("div", { key: 'b1c2d84e87ab4d99a1af317397c6b442fbb49f93', class: {
+        const calendarIcon = (hAsync("svg", { key: '8e3f3be13346ec15a3e4e2a9e9ccf3481cf8c87b', class: "date-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, hAsync("rect", { key: '1f5d918d65a44a7b8f9dec0609ef125c96b1ccdf', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), hAsync("line", { key: 'd2a5ccfbe2e4afe8ed5d9277c49b09169c6ae651', x1: "16", y1: "2", x2: "16", y2: "6" }), hAsync("line", { key: '8d114a93b8f1c4d8fc65360f34afaecc14148328', x1: "8", y1: "2", x2: "8", y2: "6" }), hAsync("line", { key: '40b3ab407c3872d6eda481a64f8210b505e202cc', x1: "3", y1: "10", x2: "21", y2: "10" })));
+        return (hAsync(Host, { key: '7c04e985b0a900863965311e69a336d859852e66' }, hAsync("div", { key: '15b17203d293c694130493bf45b8bd6d38c7bd36', class: {
                 'date-picker': true,
                 'date-picker--disabled': this.disabled,
                 'date-picker--error': !!this.error,
                 'date-picker--open': this.isOpen,
-            } }, this.label && (hAsync("label", { key: '94d43b8d44f60806824f4ef72fe4cb0113441351', class: "date-picker__label" }, this.label, this.required && hAsync("span", { key: '2ae8a33b2a46d7e81a990368390f52c167879013', class: "date-picker__required" }, "*"))), this.display === 'text' ? (hAsync("div", { class: "date-picker__text-display", onClick: this.handleTextClick }, hAsync("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (hAsync("div", { class: "date-picker__field" }, hAsync("input", { type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), hAsync("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (hAsync("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), hAsync("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (hAsync("div", { key: 'eff419a0def4d85e0df8e3182132eeeb57454cef', class: "date-picker__details" }, this.error && hAsync("div", { key: '554878b0d415e16dd8715f58db0da94259a2e3c8', class: "date-picker__error-message" }, this.error))), this.isOpen && (hAsync("div", { key: '75ec84dd8849b3007cb4f99b73098e52b458a476', class: {
+            } }, this.label && (hAsync("label", { key: 'e9e03dde337f9c2259611f1f1f4748bb92d86cfb', class: "date-picker__label", id: this.labelId, htmlFor: this.inputId }, this.label, this.required && hAsync("span", { key: '4e68d0071f5224c9fc30df8864898a4906f6efba', class: "date-picker__required" }, "*"))), this.display === 'text' ? (hAsync("div", { class: "date-picker__text-display", onClick: this.handleTextClick, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", role: "button", tabIndex: 0 }, hAsync("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (hAsync("div", { class: "date-picker__field" }, hAsync("input", { id: this.inputId, type: "text", class: "date-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor }, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", "aria-describedby": this.error ? this.errorId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined }), hAsync("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (hAsync("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), hAsync("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (hAsync("div", { key: '4e9fd12626bf5436604e28a236a304d60c452b50', class: "date-picker__details" }, this.error && hAsync("div", { key: 'a40425ac84ee81671f4289f4323db9a9a472d3c7', class: "date-picker__error-message", id: this.errorId }, this.error))), this.isOpen && (hAsync("div", { key: '86c55873b678dcfe74c09475cbde7657f1983799', class: {
                 'date-picker__dropdown': true,
                 'date-picker__dropdown--top': this.dropdownPosition === 'top',
-            } }, hAsync("xplor-inline-date-picker", { key: '74c870356063103474e60245888b8b2ae67fcd1a', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
+            } }, hAsync("xplor-inline-date-picker", { key: 'bd1636e13522a65ea6377857edea2928a6182282', selectedDate: this.value, min: this.min, max: this.max, readonly: this.readonly, color: this.color, startWeekOnSunday: this.startWeekOnSunday, onDateSelected: this.handleDateSelected }))))));
     }
     get el() { return getElement(this); }
     static get style() { return xplorDatePickerCss; }
@@ -6301,13 +6493,15 @@ class XplorDragAndDropInput {
         this.fileClear.emit();
     }
     render() {
-        return (hAsync(Host, { key: '1996cf8e0d65afed803bb07a2f7a54adb5bbfaa5' }, hAsync("div", { key: '6fcf52a709e3d6b7e64583f201260e1841076cef', class: "drag-drop-zone" }, hAsync("div", { key: 'a9c8bd35981166cf075bd9f0d215914ff87a0ff0', class: {
+        const progressValue = Math.min(Math.max(this.progress, 0), 100);
+        const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;
+        return (hAsync(Host, { key: '4ca1a26f1c043761a3bcafebf3ccdf57ec17467b' }, hAsync("div", { key: '60c9f55d838820e2d9c087fbb652559944ecfc36', class: "drag-drop-zone" }, hAsync("div", { key: 'f15e206b7f1e1741f5ee96681e000400e72d66b1', class: {
                 'drag-drop-card': true,
                 'drag-drop-card--dragover': this.dragover,
                 'drag-drop-card--disabled': this.disabled,
-            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave }, hAsync("div", { key: 'eec73d07cce31d43151a6af27a584f764cf104ec', class: "drag-drop-card__content" }, hAsync("svg", { key: '75fe85db121bdf98d91872f847235e42f3505021', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: '454bda7cf271281374b965182d15120ab00059e1', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), hAsync("path", { key: '8bc44934968795b791cd4183e18f3d72f7a195de', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), hAsync("h3", { key: 'e17238c5e6bdb38ef75c5513c88154696a046273', class: "drag-drop-card__title" }, this.label), hAsync("p", { key: 'b6aa94f6624a1fb09a56ca26dd31981aa56c3e8a', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), hAsync("p", { key: '0a6cb23bff2f8512e961cf3fae65463aec2f829e', class: "drag-drop-card__divider" }, "or"))), hAsync("div", { key: '8ad03f8da13062f5915005c80f88d41d4adc7e83', class: "drag-drop-card__action" }, hAsync("xplor-button", { key: '37dd6e0f4d61a6e4aa3e0648227b5c06b101d7f3', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog }))), this.currentFile && (hAsync("div", { key: '7ab8ffd9e6fa79c3adb83127c2263dbf1c8356af', class: "file-info" }, this.showProgress() && (hAsync("p", { key: '34e1f54d42c866012faad5462935400ad64fd69a', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), hAsync("div", { key: '891749a5bc2d928226cdcdf855b992a94c46ec0e', class: "file-info__card" }, hAsync("div", { key: 'df6230a7fed1e37536756d0d2ca79a7fa0f3f3b0', class: "file-info__icon" }, hAsync("svg", { key: '6f740a420e16cf0b8e1a008ac1e69a5356db1789', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: '0cc9aa35e50ec4c04662abcef793175d56337e71', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), hAsync("div", { key: 'cf0dc9b9592721a4e488fb852515273bdb5f75ad', class: "file-info__details" }, hAsync("p", { key: '082e3dc60b75a1b889c3390c140e32e232b57bff', class: "file-info__name" }, this.currentFile.name), hAsync("p", { key: '79da132f579221a718e4725e12dff7efb7b5f82f', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
+            }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, hAsync("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, hAsync("svg", { key: '23b8f38df073266201a01ec78a45b1cac924a3e4', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, hAsync("path", { key: 'eb1c750d1657fd578cf15c9bc16d5d1885d703e8', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), hAsync("path", { key: '04dc16407d2abd999fbef9cc02346d499644f0a7', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), hAsync("h3", { key: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), hAsync("p", { key: '69f3cf01f58dc8f3e2e13782be2a0274f2925a0d', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), hAsync("p", { key: '0a6221601983e61cb4a0afd4a5178377b59b4ce4', class: "drag-drop-card__divider" }, "or"))), hAsync("div", { key: '164c31d1407d492e415a086ae97dc8081a32eccc', class: "drag-drop-card__action" }, hAsync("xplor-button", { key: 'b47c05a246700472cebc32c551096ad17f12da77', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))), this.currentFile && (hAsync("div", { key: '6e74d72d3545bc85f91a6d55865743bde26eba78', class: "file-info", "aria-live": "polite" }, this.showProgress() && (hAsync("p", { key: '7884acf7b14ddcd052a11b53131e6fea03c0376d', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), hAsync("div", { key: '980b31adfde06383bdbe9d03f868a9cf907c83f8', class: "file-info__card" }, hAsync("div", { key: 'c9ed4fc96a229e748a461d788ed60a8b7c693f7c', class: "file-info__icon", "aria-hidden": "true" }, hAsync("svg", { key: '1749fafd0495beacdbbf2f89b2cf62c2530101db', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: '1b114d4b5b0f055534ba5f6a476d413600829c74', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), hAsync("div", { key: '45608139178d2d821a6aeb39d75b1aa4117ca12a', class: "file-info__details" }, hAsync("p", { key: '66df2443dd4dd310891e30f78ccd007df726afd3', class: "file-info__name" }, this.currentFile.name), hAsync("p", { key: 'f8efc8b19987c88e7ff7de242b7ad3df4ff5962e', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
             ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
-            : ''), this.showProgress() && (hAsync("div", { key: 'ff641e3fb53d0089c9392f1c77e7943783fa4745', class: "file-info__progress-row" }, hAsync("div", { key: '57bade7b09cd9700d6cdfe123b79b1f59d049b3e', class: "file-info__progress-bar" }, hAsync("div", { key: '8119c5937118adab06ae53257374964ced4b8446', class: "file-info__progress-fill", style: { width: `${Math.min(Math.max(this.progress, 0), 100)}%` } })), hAsync("span", { key: 'dca1ccade071119e10b724a8d0047ec966c78ed4', class: "file-info__progress-text" }, Math.round(this.progress), "%")))), hAsync("button", { key: 'e9142fab6e8f708cdd6063c6ff3659bd8e6f77e6', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": "Remove file" }, hAsync("svg", { key: 'bc48ad8ce10fbed57c5bcbed53d8f2931461b90e', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: '514e5299c4f288807c557035a0fa6c28fa770e3d', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), hAsync("input", { key: '38d92776629e98032272631ed3a26a018c2ea7cc', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect })));
+            : ''), this.showProgress() && (hAsync("div", { key: 'eb384d34fcb7908a39bb3dd1520389f8bc35a8fd', class: "file-info__progress-row" }, hAsync("div", { key: 'bbfb481fa86247c231db4c7505009d1a991c85d2', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, hAsync("div", { key: '8b93dcc26a1497783c4ef832b75c202e639a04ff', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), hAsync("span", { key: 'a429605ee278d74660a717bc04765ca21af60f64', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), hAsync("button", { key: '5ede3c138b788270b45a053ccf2504a35a5037ed', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, hAsync("svg", { key: '0a5c03471e01b7f59dadaff6c8ea08b746c8c4c2', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, hAsync("path", { key: '29a950f57d7a7d9aa74262f64fc055d8230e4453', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), hAsync("input", { key: '437111b2dbd80a8aaf1a2a4105bc8298431b2b95', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
     }
     static get style() { return xplorDragAndDropInputCss; }
     static get cmpMeta() { return {
@@ -6318,6 +6512,7 @@ class XplorDragAndDropInput {
             "accepts": [1],
             "label": [1],
             "browseLabel": [1, "browse-label"],
+            "ariaLabel": [1, "aria-label"],
             "progress": [2],
             "dragover": [32],
             "currentFile": [32],
@@ -6388,12 +6583,12 @@ class XplorExpansionPanel {
                 'expansion-panel': true,
                 'expansion-panel--open': this.open,
                 'expansion-panel--disabled': this.disabled,
-            } }, hAsync("button", { key: '4970230eb38600f662441cf741b1266af1c94221', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', type: "button" }, hAsync("div", { key: '5e3330870f44e2f0d0e9546cc3921f999c585ad2', class: "expansion-panel__header-content" }, hAsync("slot", { key: 'f8cf1d3dcc8201c311adb40544adc59dc10643b2', name: "header" })), hAsync("span", { key: 'bed27404d65c83a0aed80b6f63847a3b221756c4', class: {
+            } }, hAsync("button", { key: '5c2b82b2f13395137413e7f86160ac132c44b7ee', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.panelId}-content`, type: "button" }, hAsync("div", { key: 'c1534981f842b0b7d75a6c8135a12fb6f209639c', class: "expansion-panel__header-content" }, hAsync("slot", { key: '01c5a0a1dfacdf730ec82dc0a09916d159d1c016', name: "header" })), hAsync("span", { key: 'f82ea607638e601be6b956f9ad5c6d31d6461ec6', class: {
                 'expansion-panel__icon': true,
                 'expansion-panel__icon--open': this.open,
-            } }, "\u25BC")), hAsync("div", { key: '2c39930ed945844bde37acd8eb76cc5d321fb9e1', class: "expansion-panel__content", style: {
+            } }, "\u25BC")), hAsync("div", { key: '385abb97450d912cda5fbd3bc5a5e48ea8ce8a0d', class: "expansion-panel__content", id: `${this.panelId}-content`, role: "region", "aria-labelledby": this.panelId, style: {
                 maxHeight: this.open ? `${this.contentHeight}px` : '0',
-            } }, hAsync("div", { key: 'db622a60396115228e0a3929f1a0765b7a0bf87f', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, hAsync("slot", { key: 'd88edfbce0ab807cdb3d21230e1e97caf6183cce' }))))));
+            } }, hAsync("div", { key: '12c32ef07b6084b8528bf4800101afe0707adf05', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, hAsync("slot", { key: 'a18755879b94fc09948ed8128d73cfb3b0639885' }))))));
     }
     get el() { return getElement(this); }
     static get style() { return xplorExpansionPanelCss; }
@@ -6449,7 +6644,7 @@ class XplorExpansionPanels {
         this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
     }
     render() {
-        return (hAsync(Host, { key: 'c55c8eef4f6f134c83f2f8dffcb434401596a095' }, hAsync("div", { key: '6611efdac4749c89180d34af7893577e09356ed1', class: "expansion-panels" }, hAsync("slot", { key: 'ef8283e142cbd8fd6535c85a939455d99bdcc33e' }))));
+        return (hAsync(Host, { key: 'c55c8eef4f6f134c83f2f8dffcb434401596a095' }, hAsync("div", { key: 'd29c006de658c679ce5cfa2a465b9e5756b8bba5', class: "expansion-panels", "aria-label": "Accordion" }, hAsync("slot", { key: '32560ca5fa3b041e6e1f5f8011df9fef8f50cc6f' }))));
     }
     static get style() { return xplorExpansionPanelsCss; }
     static get cmpMeta() { return {
@@ -6608,11 +6803,11 @@ class XplorFileUpload {
         return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
     }
     render() {
-        return (hAsync(Host, { key: '9c3ad81ff741fe6324a5e8af562c740965024df1' }, hAsync("div", { key: 'b0b9bb545ce5a4e74c38bc6b49f7681f6e10dd89', class: "file-upload" }, hAsync("div", { key: 'd1f1198c0d47009ffa85cc1188d292029b979111', class: {
+        return (hAsync(Host, { key: '9c3ad81ff741fe6324a5e8af562c740965024df1' }, hAsync("div", { key: 'b0b9bb545ce5a4e74c38bc6b49f7681f6e10dd89', class: "file-upload" }, hAsync("div", { key: '791a95676b8e640b7dbd84b6ccf95627e5a10d7e', class: {
                 'file-upload__dropzone': true,
                 'file-upload__dropzone--dragging': this.isDragging,
                 'file-upload__dropzone--disabled': this.disabled,
-            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, hAsync("input", { key: '1625dae6ee5648ea0dee0673a892420d0dab2e7c', ref: (el) => (this.fileInputEl = el), type: "file", accept: this.accepts, multiple: this.multiple, disabled: this.disabled, onChange: this.handleFileSelect, class: "file-upload__input" }), hAsync("div", { key: '2d1e0ff6e55dd56df7ff04829128dd74eb05d350', class: "file-upload__content" }, hAsync("svg", { key: 'aab4f33389ed3cddc4d6a30300d384209058f64e', class: "file-upload__icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: '51da727eaa0d9394184b54c845ae70c0de2c9c5c', d: "M12 15V3M12 3L8 7M12 3L16 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), hAsync("path", { key: '38123b6c7c9c898040a225d851ff7b488f8fedf4', d: "M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })), hAsync("p", { key: '530f416409a178f0dc9de208476085452e66156a', class: "file-upload__text" }, "Drag & drop files here or", ' ', hAsync("button", { key: '9465171b3ee487fbf0e7aa75da09709eb061a32e', type: "button", class: "file-upload__button", onClick: this.handleButtonClick, disabled: this.disabled }, this.label)), hAsync("p", { key: 'b94b0c91a37fc218362a25ffe46d77929a6752f5', class: "file-upload__hint" }, "Max size: ", this.formatFileSize(this.maxSize), this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`))), this.error && (hAsync("div", { key: '46a708db58e94110d41a8b86571dd29e58e76ae2', class: "file-upload__error", role: "alert" }, this.error)), this.files.length > 0 && (hAsync("div", { key: '95d2aadf7587f759ecd3b55a84b7d6a7ec8c61ac', class: "file-upload__files" }, this.files.map((file) => (hAsync("div", { key: file.id, class: "file-upload__file" }, file.dataUrl && (hAsync("img", { src: file.dataUrl, alt: file.name, class: "file-upload__preview" })), hAsync("div", { class: "file-upload__file-info" }, hAsync("span", { class: "file-upload__file-name", title: file.name }, file.name), hAsync("span", { class: "file-upload__file-size" }, this.formatFileSize(file.size))), hAsync("button", { type: "button", class: "file-upload__remove", onClick: () => this.handleRemoveFile(file), "aria-label": `Remove ${file.name}` }, "\u00D7")))))))));
+            }, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop, "aria-label": `Drop zone for file upload. ${this.accepts !== '*/*' ? `Accepts: ${this.accepts}.` : ''} Maximum size: ${this.formatFileSize(this.maxSize)}` }, hAsync("input", { key: 'c2b392d7fdd995819bceec3fa6122f457d78c2a4', ref: (el) => (this.fileInputEl = el), type: "file", accept: this.accepts, multiple: this.multiple, disabled: this.disabled, onChange: this.handleFileSelect, class: "file-upload__input" }), hAsync("div", { key: '33e9ca40b7db3df954ea7221104a5191807ff05a', class: "file-upload__content" }, hAsync("svg", { key: '84c718d713b36dd0b227a234c9b05f7a54bfeb02', class: "file-upload__icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: '21c50cf95b559252a2604352a6d14b0b051d5480', d: "M12 15V3M12 3L8 7M12 3L16 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), hAsync("path", { key: '51d16f53f6553d9df2348e10f163b174efb61913', d: "M2 17L2 19C2 20.1046 2.89543 21 4 21L20 21C21.1046 21 22 20.1046 22 19L22 17", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })), hAsync("p", { key: '854efe384b8f181d5200d959db6633a6492c28f1', class: "file-upload__text" }, "Drag & drop files here or", ' ', hAsync("button", { key: 'e83a3a2f6e6caee30173579c6397edacd6e1c8a8', type: "button", class: "file-upload__button", onClick: this.handleButtonClick, disabled: this.disabled }, this.label)), hAsync("p", { key: 'a667e6665ce619f854c247626454efad11131568', class: "file-upload__hint" }, "Max size: ", this.formatFileSize(this.maxSize), this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`))), this.error && (hAsync("div", { key: '872a3eceb9eebbd35a06c0d841cf486e13bd48ea', class: "file-upload__error", role: "alert" }, this.error)), this.files.length > 0 && (hAsync("div", { key: '15cc50322682fd1d555d313d089f18f92bfbb77d', class: "file-upload__files" }, this.files.map((file) => (hAsync("div", { key: file.id, class: "file-upload__file" }, file.dataUrl && (hAsync("img", { src: file.dataUrl, alt: file.name, class: "file-upload__preview" })), hAsync("div", { class: "file-upload__file-info" }, hAsync("span", { class: "file-upload__file-name", title: file.name }, file.name), hAsync("span", { class: "file-upload__file-size" }, this.formatFileSize(file.size))), hAsync("button", { type: "button", class: "file-upload__remove", onClick: () => this.handleRemoveFile(file), "aria-label": `Remove ${file.name}` }, "\u00D7")))))))));
     }
     static get style() { return xplorFileUploadCss; }
     static get cmpMeta() { return {
@@ -6726,6 +6921,7 @@ class XplorInlineDatePicker {
          * Whether to start week on Sunday (default: true)
          */
         this.startWeekOnSunday = true;
+        this.focusedDay = 0;
         this.monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
         this.dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
         this.dayNamesStartMonday = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
@@ -6820,7 +7016,7 @@ class XplorInlineDatePicker {
                         'xplor-inline-date-picker__day--today': isToday,
                         'xplor-inline-date-picker__day--selected': isSelected,
                         'xplor-inline-date-picker__day--disabled': isDisabled,
-                    }, onClick: () => !isDisabled && this.selectDate(day) }, day));
+                    }, onClick: () => !isDisabled && this.selectDate(day), role: "gridcell", "aria-selected": isSelected ? 'true' : 'false', "aria-current": isToday ? 'date' : undefined, "aria-disabled": isDisabled ? 'true' : undefined, tabIndex: day === this.focusedDay ? 0 : -1, "data-day": day }, day));
             }
             return days;
         };
@@ -6840,12 +7036,75 @@ class XplorInlineDatePicker {
         this.currentYear = date.getFullYear();
         this.currentMonth = date.getMonth();
         this.viewDate = new Date(this.currentYear, this.currentMonth, 1);
+        this.focusedDay = date.getDate();
+    }
+    handleKeyDown(event) {
+        const daysInMonth = this.getDaysInMonth();
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                if (this.focusedDay > 1) {
+                    this.focusedDay--;
+                }
+                else {
+                    this.previousMonth();
+                    this.focusedDay = this.getDaysInMonth();
+                }
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                if (this.focusedDay < daysInMonth) {
+                    this.focusedDay++;
+                }
+                else {
+                    this.nextMonth();
+                    this.focusedDay = 1;
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this.focusedDay > 7) {
+                    this.focusedDay -= 7;
+                }
+                else {
+                    this.previousMonth();
+                    this.focusedDay = this.getDaysInMonth() - (7 - this.focusedDay);
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (this.focusedDay + 7 <= daysInMonth) {
+                    this.focusedDay += 7;
+                }
+                else {
+                    const remainder = this.focusedDay + 7 - daysInMonth;
+                    this.nextMonth();
+                    this.focusedDay = remainder;
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.focusedDay >= 1 && this.focusedDay <= daysInMonth) {
+                    this.selectDate(this.focusedDay);
+                }
+                break;
+            default:
+                return;
+        }
+        // Focus the day cell after render
+        requestAnimationFrame(() => {
+            const dayEl = this.el.querySelector(`[data-day="${this.focusedDay}"]`);
+            if (dayEl)
+                dayEl.focus();
+        });
     }
     render() {
         const sidebarDate = this.getSidebarDate();
         const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;
-        return (hAsync(Host, { key: '0a63c50c59ddc6ca12df01ba421b351ba7fa163a' }, hAsync("div", { key: '961a428446372ebab3e7ca008100742d5452a137', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, hAsync("div", { key: '5ff94e618f8f292e13dcc3898c6b6be40536d64e', class: "xplor-inline-date-picker__sidebar" }, hAsync("div", { key: '1e96cb361882d9e58d9b720beff37d211d1552aa', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), hAsync("div", { key: 'ce3bc570cc6ff6b4063cce28ada4da65cc97b3bb', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), hAsync("div", { key: 'bcf8017b90193d0eed5b10d72454f9dc1051756e', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), hAsync("div", { key: '7f36d03964d552ee8201493c920c0ec2d1119f89', class: "xplor-inline-date-picker__calendar" }, hAsync("div", { key: '05eca5f4d4b0a0bc7ef237185a3d31ca7202b2ff', class: "xplor-inline-date-picker__header" }, hAsync("button", { key: '91db152c009b87605a9fb21949d8cad5ef40a230', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), hAsync("div", { key: '86299244563f9338281b5f107b3fef04053ec164', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), hAsync("button", { key: 'f6a9e7caa26114c06e0b10e1e5fddebe9388efcb', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), hAsync("div", { key: 'f8de6b4d65c8ad58beeb97455c71d75c55668c6d', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (hAsync("div", { class: "xplor-inline-date-picker__weekday" }, day)))), hAsync("div", { key: '267c3f7076c41ad34873501151b567fdda572dcd', class: "xplor-inline-date-picker__days" }, this.renderCalendarDays())))));
+        return (hAsync(Host, { key: '80febb025a7aa5f0ca6f1e2370eb4258bee8d248' }, hAsync("div", { key: 'debf9345ef19400a3eaefeff63e41639e6fd0a81', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, hAsync("div", { key: 'c3580aeec39d5305aa9b03e1198ed98ef7321a5d', class: "xplor-inline-date-picker__sidebar" }, hAsync("div", { key: 'f657dcf267477af5390386d61aaa01836b3e70a5', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), hAsync("div", { key: '66283f6555f37ba7100be5af9d21ac3a7c99f3fa', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), hAsync("div", { key: 'f479af2fc60e60060a4b43f62b18d1164b762efd', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), hAsync("div", { key: '7c60d94c66b60653cd03c0b7e0585bef5cf4fdb0', class: "xplor-inline-date-picker__calendar" }, hAsync("div", { key: 'ac94d2e0c42be967c28af3fa2ccad0316f7220a6', class: "xplor-inline-date-picker__header" }, hAsync("button", { key: '02ab5127e6d25a6832277997177ae760f9e3e602', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), hAsync("div", { key: '11ec1328d212eea25df1d30e5608ac744a91a74b', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), hAsync("button", { key: '40a7d69baca4784254fbde45a5b2488c6ee94c2c', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), hAsync("div", { key: 'ee2b65a6d095192b41c1f2f81dc326fee817ddda', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (hAsync("div", { class: "xplor-inline-date-picker__weekday" }, day)))), hAsync("div", { key: 'a789c627f00ff649d40fe099b53fa35bc561a148', class: "xplor-inline-date-picker__days", role: "grid" }, this.renderCalendarDays())))));
     }
+    get el() { return getElement(this); }
     static get style() { return xplorInlineDatePickerCss; }
     static get cmpMeta() { return {
         "$flags$": 2,
@@ -6859,9 +7118,10 @@ class XplorInlineDatePicker {
             "startWeekOnSunday": [4, "start-week-on-sunday"],
             "currentYear": [32],
             "currentMonth": [32],
-            "viewDate": [32]
+            "viewDate": [32],
+            "focusedDay": [32]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -6922,11 +7182,13 @@ class XplorInlineSwitch {
 
 const xplorInputFileCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-input-file {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-file {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-file {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-file {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-file {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-file {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-file, ul.sc-xplor-input-file {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-file li.sc-xplor-input-file, ul.sc-xplor-input-file li.sc-xplor-input-file {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-file, ul.mdc-list.sc-xplor-input-file {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-file li.mdc-list-item.sc-xplor-input-file, ul.mdc-list.sc-xplor-input-file li.mdc-list-item.sc-xplor-input-file {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-file {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-file {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-file {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-file {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-file .mdc-text-field--outlined.sc-xplor-input-file .mdc-notched-outline__notch.sc-xplor-input-file {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-file .mdc-notched-outline__notch.sc-xplor-input-file {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-file .mdc-notched-outline.sc-xplor-input-file .mdc-notched-outline__notch.sc-xplor-input-file {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-file {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-file:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-file {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-file-h {\n  display: block;\n}\n\n.xplor-input-file.sc-xplor-input-file {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-file__label.sc-xplor-input-file {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-file__field.sc-xplor-input-file {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1rem;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  cursor: pointer;\n  transition: border-color 0.2s ease;\n  gap: 0.75rem;\n}\n.xplor-input-file__field.sc-xplor-input-file:hover:not(.xplor-input-file--disabled .xplor-input-file__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-file__field.sc-xplor-input-file:focus-within {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-file--disabled.sc-xplor-input-file .xplor-input-file__field.sc-xplor-input-file {\n  background-color: rgba(0, 0, 0, 0.04);\n  cursor: not-allowed;\n}\n.xplor-input-file--disabled.sc-xplor-input-file .xplor-input-file__placeholder.sc-xplor-input-file, .xplor-input-file--disabled.sc-xplor-input-file .xplor-input-file__icon.sc-xplor-input-file {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-file__icon.sc-xplor-input-file {\n  font-size: 1.25rem;\n  color: rgba(0, 0, 0, 0.54);\n  flex-shrink: 0;\n}\n.xplor-input-file__content.sc-xplor-input-file {\n  flex: 1;\n  min-width: 0;\n}\n.xplor-input-file__placeholder.sc-xplor-input-file {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-file__chips.sc-xplor-input-file {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-items: center;\n}\n.xplor-input-file__chip.sc-xplor-input-file {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.75rem;\n  background-color: #673AB7;\n  color: white;\n  border-radius: 1rem;\n  font-size: 0.875rem;\n  max-width: 100%;\n}\n.xplor-input-file__chip-text.sc-xplor-input-file {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.xplor-input-file__chip-size.sc-xplor-input-file {\n  font-size: 0.75rem;\n  opacity: 0.8;\n  white-space: nowrap;\n}\n.xplor-input-file__additional.sc-xplor-input-file {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-left: 0.5rem;\n}\n.xplor-input-file__clear.sc-xplor-input-file {\n  position: relative;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: none;\n  background: transparent;\n  color: rgba(0, 0, 0, 0.54);\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-file__clear.sc-xplor-input-file:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-file__clear.sc-xplor-input-file:active {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.xplor-input-file__input.sc-xplor-input-file {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.xplor-input-file__input.sc-xplor-input-file:disabled {\n  cursor: not-allowed;\n}\n.xplor-input-file__counter.sc-xplor-input-file {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.6);\n  padding: 0 1rem;\n}";
 
+let inputFileIdCounter = 0;
 class XplorInputFile {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.attach = createEvent(this, "attach");
         this.xplorClear = createEvent(this, "xplorClear");
+        this.inputId = `xplor-input-file-${++inputFileIdCounter}`;
         /**
          * Input label
          */
@@ -7001,7 +7263,7 @@ class XplorInputFile {
         };
         const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
         const additionalCount = this.selectedFiles.length - this.maxChips;
-        return (hAsync(Host, { key: 'b8022fdd28a3e0087bc2a044856c3013d1f32245' }, hAsync("div", { key: '11c0494c76f5aed1fe03cff7b706c7bc809becda', class: containerClasses }, this.label && (hAsync("label", { key: 'fca295123c0766e9ff4b1ae28abfc2662a345992', class: "xplor-input-file__label" }, this.label)), hAsync("div", { key: 'a63356f0857b420f1f707caa2e5e6ac587616949', class: "xplor-input-file__field" }, hAsync("span", { key: 'f2b6f89f35d36a71a4c2bae38175cd16f897102d', class: "xplor-input-file__icon" }, this.prependInnerIcon), hAsync("div", { key: '0b6b59139696a1a1e9aee3f10b7069743f4d1934', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (hAsync("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (hAsync("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (hAsync("div", { class: "xplor-input-file__chip", key: file.name }, hAsync("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (hAsync("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (hAsync("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (hAsync("button", { key: 'b0f312f157de2caf74c8c630d7c109fb6af4d7c0', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), hAsync("input", { key: '1b36ee20fe74f12cb0634fa8a6f11f0b18a8869c', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (hAsync("div", { key: '3db41f5660476718819e7315edbc59a9fa834178', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
+        return (hAsync(Host, { key: 'f4cdb8be9b2a73258a308e31c07f9a8077ae39c8' }, hAsync("div", { key: '3a43a67ebb7354d1965b808d5252c70939fa917e', class: containerClasses }, this.label && (hAsync("label", { key: '03a177574387efc0a1a7aa3ea05c1425d18a0db9', class: "xplor-input-file__label", htmlFor: this.inputId }, this.label)), hAsync("div", { key: 'ca9c5943b0471244343e507955352af0b72eab76', class: "xplor-input-file__field" }, hAsync("span", { key: '4570d02fbed6e939b153a69ca444cf4c2be7230f', class: "xplor-input-file__icon" }, this.prependInnerIcon), hAsync("div", { key: '408231a07d2ccbdca8e57a7ae36de017f01940bc', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (hAsync("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (hAsync("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (hAsync("div", { class: "xplor-input-file__chip", key: file.name }, hAsync("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (hAsync("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (hAsync("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (hAsync("button", { key: 'da690e16f90d31d9def263a69d4ceef18e185aab', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), hAsync("input", { key: 'f72a3b3295ce47aa4dcad63751f12256fcc20c01', id: this.inputId, ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange, "aria-label": this.label || 'Choose file' })), this.counter && this.selectedFiles.length > 0 && (hAsync("div", { key: '495dd2d0314549a384085706df7f2ab722169edf', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
     }
     static get style() { return xplorInputFileCss; }
     static get cmpMeta() { return {
@@ -7028,10 +7290,12 @@ class XplorInputFile {
 
 const xplorInputSearchCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-input-search {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-search {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-search {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-search {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-search {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-search {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-search, ul.sc-xplor-input-search {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-search li.sc-xplor-input-search, ul.sc-xplor-input-search li.sc-xplor-input-search {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-search, ul.mdc-list.sc-xplor-input-search {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-search li.mdc-list-item.sc-xplor-input-search, ul.mdc-list.sc-xplor-input-search li.mdc-list-item.sc-xplor-input-search {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-search {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-search {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-search {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-search {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-search .mdc-text-field--outlined.sc-xplor-input-search .mdc-notched-outline__notch.sc-xplor-input-search {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-search .mdc-notched-outline__notch.sc-xplor-input-search {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-search .mdc-notched-outline.sc-xplor-input-search .mdc-notched-outline__notch.sc-xplor-input-search {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-search {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-search:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-search {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-search-h {\n  display: block;\n}\n\n.xplor-input-search.sc-xplor-input-search {\n  display: flex;\n  flex-direction: column;\n}\n.xplor-input-search__field.sc-xplor-input-search {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  background-color: white;\n  transition: border-color 0.2s ease;\n  padding-right: 0.375rem;\n}\n.xplor-input-search__field.sc-xplor-input-search:hover:not(.xplor-input-search--disabled .xplor-input-search__field) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-search--focused.sc-xplor-input-search .xplor-input-search__field.sc-xplor-input-search {\n  border-color: #008480;\n  border-width: 2px;\n  padding-right: calc(0.375rem - 1px);\n}\n.xplor-input-search--focused.sc-xplor-input-search .xplor-input-search__input.sc-xplor-input-search {\n  padding-left: calc(1rem - 1px);\n}\n.xplor-input-search__input.sc-xplor-input-search {\n  flex: 1;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: none;\n  outline: none;\n  background: transparent;\n  min-width: 0;\n}\n.xplor-input-search__input.sc-xplor-input-search::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-search__input.sc-xplor-input-search:disabled {\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.xplor-input-search__button.sc-xplor-input-search {\n  min-height: 0;\n  min-width: 0;\n  height: 2.5rem;\n  width: 2.5rem;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background-color: #008480;\n  color: white;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n  flex-shrink: 0;\n}\n.xplor-input-search__button.sc-xplor-input-search:hover:not(:disabled) {\n  background-color: #006D6A;\n}\n.xplor-input-search__button.sc-xplor-input-search:active:not(:disabled) {\n  background-color: #005755;\n}\n.xplor-input-search__button.sc-xplor-input-search:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n.xplor-input-search__icon.sc-xplor-input-search {\n  width: 1.25rem;\n  height: 1.25rem;\n  fill: currentColor;\n}\n.xplor-input-search--compact.sc-xplor-input-search .xplor-input-search__input.sc-xplor-input-search {\n  padding: 0.625rem 1rem;\n}\n.xplor-input-search--compact.sc-xplor-input-search .xplor-input-search__button.sc-xplor-input-search {\n  height: 2rem;\n  width: 2rem;\n}\n.xplor-input-search--compact.sc-xplor-input-search .xplor-input-search__icon.sc-xplor-input-search {\n  width: 1rem;\n  height: 1rem;\n}\n.xplor-input-search--comfortable.sc-xplor-input-search .xplor-input-search__input.sc-xplor-input-search {\n  padding: 1rem 1rem;\n}\n.xplor-input-search--comfortable.sc-xplor-input-search .xplor-input-search__button.sc-xplor-input-search {\n  height: 2.75rem;\n  width: 2.75rem;\n}\n.xplor-input-search--comfortable.sc-xplor-input-search .xplor-input-search__icon.sc-xplor-input-search {\n  width: 1.375rem;\n  height: 1.375rem;\n}\n.xplor-input-search--disabled.sc-xplor-input-search .xplor-input-search__field.sc-xplor-input-search {\n  background-color: rgba(0, 0, 0, 0.04);\n}";
 
+let inputSearchIdCounter = 0;
 class XplorInputSearch {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.search = createEvent(this, "search");
+        this.inputId = `xplor-input-search-${++inputSearchIdCounter}`;
         /**
          * Search value
          */
@@ -7077,9 +7341,9 @@ class XplorInputSearch {
             'xplor-input-search--focused': this.isFocused,
             'xplor-input-search--disabled': this.disabled,
         };
-        return (hAsync(Host, { key: '5b56e2a7105a8046e9d8a0260e4ccc3e3f74f2d1' }, hAsync("div", { key: '1056cd0367b2a02a9ca0b6327ee64fe451aa822f', class: containerClasses }, hAsync("div", { key: 'b52566008beabead371696c73213c0c44d71caad', class: "xplor-input-search__field" }, hAsync("input", { key: '59c5434a7cedc56128d8acb5d3718e89a4521f60', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+        return (hAsync(Host, { key: '943cf40e14806c8d2645e8e08c7868f1bbe1d585' }, hAsync("div", { key: 'a073a7da5206a8f97ad4576628bb5688572709ed', class: containerClasses }, hAsync("div", { key: '52d484023b8d5275d22a2b890fc73c0b758a7899', class: "xplor-input-search__field" }, hAsync("input", { key: 'b520a1127ec5aefe99a8ea92d329823e0380ac63', id: this.inputId, type: "search", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
                 backgroundColor: this.bgColor,
-            } }), hAsync("slot", { key: '8a1ff9183e52e0b1907a2d592cf26ce92b8c3eb2', name: "append-inner" }, hAsync("button", { key: '9680a805a44074e1ca6544fc6cc1b6dc56b3cd3c', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, hAsync("svg", { key: 'b5889fd0aed963aa7f31a11fa705597caaa3d000', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, hAsync("path", { key: '78cd1c79a24b46b662d3be5bea287db253c0abe9', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
+            }, role: "searchbox", "aria-label": "Search" }), hAsync("slot", { key: '2e352e10096c529d275071cffa6ff8062faf27a3', name: "append-inner" }, hAsync("button", { key: 'ce5993a34434803f80ff05fc07993ea7865f7120', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button", "aria-label": "Search" }, hAsync("svg", { key: '518d76a88181e3286d14102ceced2e1dae0b6a8c', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, hAsync("path", { key: 'f7253605b82900a022475c107b4719612f614564', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
     }
     static get style() { return xplorInputSearchCss; }
     static get cmpMeta() { return {
@@ -7161,6 +7425,7 @@ class XplorInputSelect {
         this.isOpen = false;
         this.isFocused = false;
         this.menuPosition = null;
+        this.highlightedIndex = -1;
         this.updateMenuPosition = () => {
             if (this.fieldRef) {
                 const rect = this.fieldRef.getBoundingClientRect();
@@ -7180,8 +7445,12 @@ class XplorInputSelect {
             if (!this.disabled && !this.readonly) {
                 if (!this.isOpen) {
                     this.updateMenuPosition();
+                    this.highlightedIndex = -1;
                 }
                 this.isOpen = !this.isOpen;
+                if (!this.isOpen) {
+                    this.highlightedIndex = -1;
+                }
             }
         };
         this.handleOptionClick = (option) => {
@@ -7226,6 +7495,82 @@ class XplorInputSelect {
     disconnectedCallback() {
         document.removeEventListener('click', this.handleOutsideClick);
     }
+    handleKeyDown(event) {
+        var _a;
+        const totalOptions = this.options.length;
+        if (totalOptions === 0)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.updateMenuPosition();
+                    this.isOpen = true;
+                    this.highlightedIndex = 0;
+                }
+                else {
+                    this.highlightedIndex = this.highlightedIndex < totalOptions - 1 ? this.highlightedIndex + 1 : 0;
+                }
+                this.scrollToHighlightedOption();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.updateMenuPosition();
+                    this.isOpen = true;
+                    this.highlightedIndex = totalOptions - 1;
+                }
+                else {
+                    this.highlightedIndex = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : totalOptions - 1;
+                }
+                this.scrollToHighlightedOption();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.isOpen && this.highlightedIndex >= 0 && this.highlightedIndex < totalOptions) {
+                    this.handleOptionClick(this.options[this.highlightedIndex]);
+                }
+                else if (!this.isOpen) {
+                    this.toggleDropdown();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.isOpen = false;
+                this.highlightedIndex = -1;
+                (_a = this.fieldRef) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+            case 'Home':
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.highlightedIndex = 0;
+                    this.scrollToHighlightedOption();
+                }
+                break;
+            case 'End':
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.highlightedIndex = totalOptions - 1;
+                    this.scrollToHighlightedOption();
+                }
+                break;
+            case 'Tab':
+                this.isOpen = false;
+                this.highlightedIndex = -1;
+                break;
+        }
+    }
+    scrollToHighlightedOption() {
+        requestAnimationFrame(() => {
+            if (this.selectRef && this.highlightedIndex >= 0) {
+                const highlightedEl = this.selectRef.querySelector(`[data-option-index="${this.highlightedIndex}"]`);
+                if (highlightedEl) {
+                    highlightedEl.scrollIntoView({ block: 'nearest' });
+                }
+            }
+        });
+    }
     render() {
         const containerClasses = {
             'xplor-input-select': true,
@@ -7235,21 +7580,39 @@ class XplorInputSelect {
             'xplor-input-select--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (hAsync(Host, { key: 'e5865a9d55129458a5357cf05f15115f1007019b' }, hAsync("div", { key: '66d54f5d1bb7514301427de3ad5bbf7746309cec', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (hAsync("label", { key: 'dfa166182add3a83872a05e4a20b77f654921231', class: "xplor-input-select__label" }, this.label, this.required && hAsync("span", { key: '0da6997f30e1861b35e67e80974fce115560cc9b', class: "xplor-input-select__required" }, "*"))), hAsync("div", { key: 'f828546abc6121bcabcdbc905a0e43aa012bb5a9', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el) }, hAsync("div", { key: '13692cc57a5c3c1da3915ca80f8324d091732ebb', class: "xplor-input-select__value" }, this.getDisplayValue()), hAsync("span", { key: '0a372cf751bc459d957130c50fb4387405e9f21f', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (hAsync("div", { key: '13e8536c6ce8220041364675d459dc2ee3ef7613', class: "xplor-input-select__menu", style: {
+        const listboxId = 'input-select-listbox';
+        const labelId = 'input-select-label';
+        const errorId = 'input-select-error';
+        const helperId = 'input-select-helper';
+        const activeDescendantId = this.highlightedIndex >= 0 ? `input-select-option-${this.highlightedIndex}` : undefined;
+        // Build aria-describedby from error/helper text
+        const describedByParts = [];
+        if (this.error)
+            describedByParts.push(errorId);
+        if (!this.error && this.helperText)
+            describedByParts.push(helperId);
+        const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
+        return (hAsync(Host, { key: '4c7693dfd1a0a4ac74ed4f4ff5024d4375acd3a8' }, hAsync("div", { key: 'bcd180aa7fbccfae34ce29b1c9bbe6329bf87476', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (hAsync("label", { key: '85c20aecaf25a7fc260c79a15e4d4bb30804213d', class: "xplor-input-select__label", id: labelId }, this.label, this.required && hAsync("span", { key: '82c8dbcb5d7e77c42e0a6e54b69cbb514563ac2b', class: "xplor-input-select__required" }, "*"))), hAsync("div", { key: 'b7cfc5c895fc57f3eac6e66aa5fd431a89dd07bb', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el), role: "combobox", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": this.isOpen ? listboxId : undefined, "aria-activedescendant": activeDescendantId, "aria-labelledby": this.label ? labelId : undefined, "aria-label": !this.label ? (this.ariaLabel || this.placeholder) : undefined, "aria-describedby": ariaDescribedBy, "aria-required": this.required ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined }, hAsync("div", { key: '1125703089a34186cbbfaba5e51d6ea50c5f4239', class: "xplor-input-select__value" }, this.getDisplayValue()), hAsync("span", { key: 'e33ab0424fddc90d1f48ef2b285e70fd3eeaff8a', class: "xplor-input-select__arrow", "aria-hidden": "true" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (hAsync("div", { key: 'b1fb47a1d217c4156250bded2c9e9ae9bdebf603', class: "xplor-input-select__menu", role: "listbox", id: listboxId, "aria-label": this.label || this.ariaLabel || 'Options', "aria-multiselectable": this.multiple ? 'true' : undefined, style: {
                 position: 'fixed',
                 top: `${this.menuPosition.top}px`,
                 left: `${this.menuPosition.left}px`,
                 width: `${this.menuPosition.width}px`,
-            } }, this.options.length === 0 ? (hAsync("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (hAsync("div", { key: option.value, class: {
-                'xplor-input-select__option': true,
-                'xplor-input-select__option--selected': this.isSelected(option),
-            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (hAsync("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), hAsync("div", { class: "xplor-input-select__option-content" }, hAsync("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (hAsync("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (hAsync("div", { key: '240b60564cf80cc66b879bb4431885270c64db5b', class: "xplor-input-select__details" }, this.error && hAsync("div", { key: 'bbb2a2e796650c153e901aa87188a386c2f5b9f7', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && hAsync("div", { key: 'a36ccb1626e1b5a9d19f2ee106213fd943177aa8', class: "xplor-input-select__helper-text" }, this.helperText))))));
+            } }, this.options.length === 0 ? (hAsync("div", { class: "xplor-input-select__empty", role: "option", "aria-disabled": "true" }, "No options available")) : (this.options.map((option, index) => {
+            const selected = this.isSelected(option);
+            return (hAsync("div", { key: option.value, id: `input-select-option-${index}`, "data-option-index": index, role: "option", "aria-selected": selected ? 'true' : 'false', class: {
+                    'xplor-input-select__option': true,
+                    'xplor-input-select__option--selected': selected,
+                    'xplor-input-select__option--highlighted': index === this.highlightedIndex,
+                }, onClick: () => this.handleOptionClick(option) }, this.multiple && (hAsync("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: selected, readOnly: true, tabindex: -1, "aria-checked": selected ? 'true' : 'false', "aria-hidden": "true" })), hAsync("div", { class: "xplor-input-select__option-content" }, hAsync("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (hAsync("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle)))));
+        })))), showDetails && (hAsync("div", { key: '0a4f46b2460cd068fe27635cbe45d054c06e9538', class: "xplor-input-select__details" }, this.error && hAsync("div", { key: '2d0f44af6a4c115bf3ed66764092b29cf117d57e', class: "xplor-input-select__error-message", id: errorId, role: "alert" }, this.error), !this.error && this.helperText && hAsync("div", { key: 'ee93ffdd070c853b1d779235d6c57e368d75bcf1', class: "xplor-input-select__helper-text", id: helperId }, this.helperText))))));
     }
+    get el() { return getElement(this); }
     static get style() { return xplorInputSelectCss; }
     static get cmpMeta() { return {
         "$flags$": 2,
         "$tagName$": "xplor-input-select",
         "$members$": {
+            "ariaLabel": [1, "aria-label"],
             "value": [1032],
             "label": [1],
             "placeholder": [1],
@@ -7265,9 +7628,10 @@ class XplorInputSelect {
             "required": [4],
             "isOpen": [32],
             "isFocused": [32],
-            "menuPosition": [32]
+            "menuPosition": [32],
+            "highlightedIndex": [32]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -7318,7 +7682,7 @@ class XplorInputSend {
         return (hAsync(Host, { key: '87d0d49d2a9e9061152b294e6b7a91ffae7f39b0' }, hAsync("div", { key: 'ef857693127c5945ff78c20e431609b051df32e7', class: {
                 'input-send': true,
                 'input-send--disabled': this.disabled,
-            } }, hAsync("input", { key: '93aca7121d132bb72d812db77f8ff85be31a00aa', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength }), hAsync("xplor-button", { key: '92b64ec5e3c14cace28aacb12f58185e07b63f71', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
+            } }, hAsync("input", { key: 'ab468e8669120fef885db5e1dd4da774acfd2f74', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength, "aria-label": this.placeholder || 'Type a message' }), hAsync("xplor-button", { key: '216e72c5c263f0a18e4d8b4f03d253776376c6b3', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
     }
     static get style() { return xplorInputSendCss; }
     static get cmpMeta() { return {
@@ -7341,6 +7705,7 @@ class XplorInputSend {
 
 const xplorInputTextCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-input-text {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-text {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-text {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-text, ul.sc-xplor-input-text {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text li.sc-xplor-input-text, ul.sc-xplor-input-text li.sc-xplor-input-text {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-text {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-text {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text .mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-text {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-text:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-text {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-h {\n  display: block;\n}\n\n.xplor-input-text.sc-xplor-input-text {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-text__label.sc-xplor-input-text {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-text__required.sc-xplor-input-text {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-text__field.sc-xplor-input-text {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.xplor-input-text__input.sc-xplor-input-text {\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  outline: none;\n  transition: border-color 0.2s ease;\n}\n.xplor-input-text__input.sc-xplor-input-text::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text__input.sc-xplor-input-text:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-text__input.sc-xplor-input-text:focus {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text__input.sc-xplor-input-text:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.xplor-input-text__input.sc-xplor-input-text:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n  border-color: #d32f2f;\n}\n.xplor-input-text__details.sc-xplor-input-text {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-text__error-message.sc-xplor-input-text {\n  color: #d32f2f;\n}\n.xplor-input-text__helper-text.sc-xplor-input-text {\n  color: rgba(0, 0, 0, 0.6);\n}";
 
+let inputTextIdCounter = 0;
 class XplorInputText {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -7348,6 +7713,9 @@ class XplorInputText {
         this.xplorChange = createEvent(this, "xplorChange");
         this.xplorFocus = createEvent(this, "xplorFocus");
         this.xplorBlur = createEvent(this, "xplorBlur");
+        this.inputId = `xplor-input-text-${++inputTextIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         /**
          * Input value
          */
@@ -7424,9 +7792,9 @@ class XplorInputText {
             'xplor-input-text--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (hAsync(Host, { key: 'eefd18f18a4a0303cccca87db9256d2d7033e767' }, hAsync("div", { key: 'cf152d49ce4ed953162467a4cc6d9e8392380d4c', class: containerClasses }, this.label && (hAsync("label", { key: '78e7c0178ec1dedda68f6fdce7cb1f1dd13840fd', class: "xplor-input-text__label" }, this.label, this.required && hAsync("span", { key: '1eaf01ca583263e7047444bbfe6b2636d8fde241', class: "xplor-input-text__required" }, "*"))), hAsync("div", { key: '7318153a1c55ad38196cea03555238b8f2c37d51', class: "xplor-input-text__field" }, hAsync("input", { key: '41c1c60d8dbdea750477a17d32b110ef826e73a6', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (hAsync(Host, { key: '74d78e4b2d95f642b57606b0e8315d3064de446e' }, hAsync("div", { key: '7852dd1859fec108d191f612c1f02763edb4f419', class: containerClasses }, this.label && (hAsync("label", { key: 'e9f627130b2ed1f07d9eb6a91f7b40b79cafd550', class: "xplor-input-text__label", htmlFor: this.inputId }, this.label, this.required && hAsync("span", { key: 'a4763b2c5e5a3702b126528845dfcdb5d42e9e3d', class: "xplor-input-text__required" }, "*"))), hAsync("div", { key: 'fce0f4b127098b1c88200f36190d2a89214b3341', class: "xplor-input-text__field" }, hAsync("input", { key: '63ce8a595f7ea39f9ab011fe00c11530ce256c6c', id: this.inputId, type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            } }), hAsync("slot", { key: '48461bf663591d51ebd1ee4b6fbdc25680b322fb', name: "append-inner" })), showDetails && (hAsync("div", { key: '5ed0aecf6e5751e771882f9ab9cd58aafb44ba01', class: "xplor-input-text__details" }, this.error && hAsync("div", { key: 'b34fffee42d3f663b923a1b9fe14c7a0a19539b2', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && hAsync("div", { key: '7bf60893cc66f8916ebe3bc3bace1e827812541d', class: "xplor-input-text__helper-text" }, this.helperText))), hAsync("slot", { key: 'c10099eb2c41e38cc65170a5acb6897b949b8173', name: "append" }))));
+            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), hAsync("slot", { key: 'a24e700dcbd30d21ff559b6a8fa189d260e3a470', name: "append-inner" })), showDetails && (hAsync("div", { key: 'b20cd03b0d9d4fb0ab52f9fe0c7bb03488f88401', class: "xplor-input-text__details" }, this.error && hAsync("div", { key: 'cbc084358dfb8c457d97ae66a21f3068ad5ccabb', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && hAsync("div", { key: 'a1ab582138c63ed2f1830910e7a5b740c0f71909', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), hAsync("slot", { key: '30f30e929242a463a86a6470ceae0d708714cf8f', name: "append" }))));
     }
     static get style() { return xplorInputTextCss; }
     static get cmpMeta() { return {
@@ -7455,12 +7823,16 @@ class XplorInputText {
 
 const xplorInputTextAreaCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-input-text-area {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-text-area {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text-area {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-text-area {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-text-area {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-text-area {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-text-area, ul.sc-xplor-input-text-area {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text-area li.sc-xplor-input-text-area, ul.sc-xplor-input-text-area li.sc-xplor-input-text-area {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text-area, ul.mdc-list.sc-xplor-input-text-area {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area, ul.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text-area {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-text-area {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text-area {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-text-area {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text-area .mdc-text-field--outlined.sc-xplor-input-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text-area .mdc-notched-outline.sc-xplor-input-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-text-area {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-text-area:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-text-area {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-area-h {\n  display: block;\n}\n\n.xplor-input-text-area.sc-xplor-input-text-area {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.xplor-input-text-area__label.sc-xplor-input-text-area {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.xplor-input-text-area__required.sc-xplor-input-text-area {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.xplor-input-text-area__field.sc-xplor-input-text-area {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area {\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 1rem;\n  outline: none;\n  resize: vertical;\n  min-height: 56px;\n  transition: border-color 0.2s ease;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:focus {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n  resize: none;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area {\n  position: absolute;\n  right: 0.75rem;\n  top: 0.75rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  border: none;\n  background: transparent;\n  color: rgba(0, 0, 0, 0.54);\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s ease;\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area:active {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.xplor-input-text-area--error.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {\n  border-color: #d32f2f;\n}\n.xplor-input-text-area__details.sc-xplor-input-text-area {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.xplor-input-text-area__error-message.sc-xplor-input-text-area {\n  color: #d32f2f;\n}\n.xplor-input-text-area__helper-text.sc-xplor-input-text-area {\n  color: rgba(0, 0, 0, 0.6);\n}";
 
+let inputTextAreaIdCounter = 0;
 class XplorInputTextArea {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.xplorInput = createEvent(this, "xplorInput");
         this.xplorChange = createEvent(this, "xplorChange");
         this.xplorClear = createEvent(this, "xplorClear");
+        this.inputId = `xplor-input-text-area-${++inputTextAreaIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         /**
          * Input value
          */
@@ -7539,9 +7911,9 @@ class XplorInputTextArea {
         };
         const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (hAsync(Host, { key: '310d900ed96c59bc8b0f19d40fc1573c1a08c220' }, hAsync("div", { key: '0a1903c53b92932e7a98bf910c00b912a1fa078e', class: containerClasses }, this.label && (hAsync("label", { key: '9c86a8f36b0007ecfdba4c70e3c76fa65a34d4e6', class: "xplor-input-text-area__label" }, this.label, this.required && hAsync("span", { key: '5d57cbb3cd28c4533cfd42286bf16924f9937b4c', class: "xplor-input-text-area__required" }, "*"))), hAsync("div", { key: '09feb36c8fe79b5a366d8c0f93495a363ec6596f', class: "xplor-input-text-area__field" }, hAsync("textarea", { key: 'e05d3c094930b2993b5c959b1dfce569ad1b01d0', class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
+        return (hAsync(Host, { key: 'c03b31f6576f7a103227964d33a40cb4e659c3ce' }, hAsync("div", { key: '3f29fe2801d281c6e110a512156527cabce854a8', class: containerClasses }, this.label && (hAsync("label", { key: 'b2d3bcb28e66d80a43fbca6e6bc37f1c967982ba', class: "xplor-input-text-area__label", htmlFor: this.inputId }, this.label, this.required && hAsync("span", { key: '73c21af6cba3faff373a0d1700a8577ee3fffb46', class: "xplor-input-text-area__required" }, "*"))), hAsync("div", { key: 'f9f60ad9aa09747bdd77b51f7576d4d9811b5c81', class: "xplor-input-text-area__field" }, hAsync("textarea", { key: 'd41b249092b9478a5fb323042a1e7397b1326dd0', id: this.inputId, class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
                 backgroundColor: this.bgColor,
-            } }), showClearButton && (hAsync("button", { key: '3e95a44af498eb259fab45a653ed3ed2ce7ef3b7', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (hAsync("div", { key: 'cf21757ef973e21a44abba969baad7b88c0a273a', class: "xplor-input-text-area__details" }, this.error && hAsync("div", { key: 'bdfd559501f15f928a44ed7cfe797bb47b614092', class: "xplor-input-text-area__error-message" }, this.error), !this.error && this.helperText && hAsync("div", { key: '0eb05a84b610b3971e76cbd5f566f32ba260eacb', class: "xplor-input-text-area__helper-text" }, this.helperText))))));
+            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), showClearButton && (hAsync("button", { key: '8cb817547c0c494c2f82216a9f07a78bc4c5314d', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (hAsync("div", { key: 'e0f4d72ac96eda8ce0913cb80f11a65b1adfc0c4', class: "xplor-input-text-area__details" }, this.error && hAsync("div", { key: '7eb06f00783c62614af72fc769b585b167f8d25b', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && hAsync("div", { key: 'c9f5ad0158da20c2a743e7fb304a04eeb6a0270b', class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))))));
     }
     static get style() { return xplorInputTextAreaCss; }
     static get cmpMeta() { return {
@@ -7571,6 +7943,7 @@ class XplorInputTextArea {
 
 const xplorInputTextSecondaryCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-input-text-secondary {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-input-text-secondary {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-input-text-secondary {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-input-text-secondary {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-text-secondary {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-input-text-secondary {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-input-text-secondary, ul.sc-xplor-input-text-secondary {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-input-text-secondary li.sc-xplor-input-text-secondary, ul.sc-xplor-input-text-secondary li.sc-xplor-input-text-secondary {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-input-text-secondary, ul.mdc-list.sc-xplor-input-text-secondary {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-input-text-secondary li.mdc-list-item.sc-xplor-input-text-secondary, ul.mdc-list.sc-xplor-input-text-secondary li.mdc-list-item.sc-xplor-input-text-secondary {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text-secondary {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-text-secondary {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text-secondary {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-text-secondary {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text-secondary .mdc-text-field--outlined.sc-xplor-input-text-secondary .mdc-notched-outline__notch.sc-xplor-input-text-secondary {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-text-secondary .mdc-notched-outline__notch.sc-xplor-input-text-secondary {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text-secondary .mdc-notched-outline.sc-xplor-input-text-secondary .mdc-notched-outline__notch.sc-xplor-input-text-secondary {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-text-secondary {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-text-secondary:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-text-secondary {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-secondary-h {\n  display: block;\n}\n\n.input-secondary.sc-xplor-input-text-secondary {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n.input-secondary__label.sc-xplor-input-text-secondary {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin-bottom: 0.25rem;\n}\n.input-secondary__required.sc-xplor-input-text-secondary {\n  color: #d32f2f;\n  margin-left: 0.25rem;\n}\n.input-secondary__field.sc-xplor-input-text-secondary {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.input-secondary__input.sc-xplor-input-text-secondary {\n  width: 100%;\n  padding: 0.875rem 1rem;\n  font-size: 1rem;\n  font-family: inherit;\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 16px;\n  outline: none;\n  transition: border-color 0.2s ease, border-width 0.2s ease;\n}\n.input-secondary__input.sc-xplor-input-text-secondary::placeholder {\n  color: rgba(0, 0, 0, 0.38);\n}\n.input-secondary__input.sc-xplor-input-text-secondary:hover:not(:disabled) {\n  border-color: rgba(0, 0, 0, 0.6);\n}\n.input-secondary__input.sc-xplor-input-text-secondary:focus {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.input-secondary__input.sc-xplor-input-text-secondary:disabled {\n  background-color: rgba(0, 0, 0, 0.04);\n  color: rgba(0, 0, 0, 0.38);\n  cursor: not-allowed;\n}\n.input-secondary__input.sc-xplor-input-text-secondary:read-only {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.input-secondary--dirty.sc-xplor-input-text-secondary .input-secondary__input.sc-xplor-input-text-secondary {\n  border-color: #008480;\n  border-width: 2px;\n  padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.input-secondary--error.sc-xplor-input-text-secondary .input-secondary__input.sc-xplor-input-text-secondary {\n  border-color: #d32f2f;\n}\n.input-secondary__details.sc-xplor-input-text-secondary {\n  min-height: 1.25rem;\n  padding: 0 1rem;\n  font-size: 0.75rem;\n}\n.input-secondary__error-message.sc-xplor-input-text-secondary {\n  color: #d32f2f;\n}\n.input-secondary__helper-text.sc-xplor-input-text-secondary {\n  color: rgba(0, 0, 0, 0.6);\n}";
 
+let inputTextSecondaryIdCounter = 0;
 class XplorInputTextSecondary {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -7578,6 +7951,9 @@ class XplorInputTextSecondary {
         this.xplorChange = createEvent(this, "xplorChange");
         this.xplorFocus = createEvent(this, "xplorFocus");
         this.xplorBlur = createEvent(this, "xplorBlur");
+        this.inputId = `xplor-input-text-secondary-${++inputTextSecondaryIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         this.value = '';
         this.label = '';
         this.placeholder = '';
@@ -7619,9 +7995,9 @@ class XplorInputTextSecondary {
             'input-secondary--dirty': this.isDirty,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (hAsync(Host, { key: 'd6c2b61f7fc153bd32577086f5c0ffcc335cbf4a' }, hAsync("div", { key: 'b7cfabd013e84a7b72e6ca4cd7cd592bcd9de4df', class: containerClasses }, this.label && (hAsync("label", { key: 'd5dfe32ab50128b1a3ff824e82b98f4ae75fcd17', class: "input-secondary__label" }, this.label, this.required && hAsync("span", { key: '5de6c309872715b1bdd1f0aad9f577618f43f63f', class: "input-secondary__required" }, "*"))), hAsync("div", { key: '5295e7d9cc7ee5ab401ee5a1182241791f2d81db', class: "input-secondary__field" }, hAsync("input", { key: '146cf2b3413de110e7aaadd19fc8da7bb824af4a', type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+        return (hAsync(Host, { key: 'cba1682d9584d1dad7da1974dee2ba86423e5a8b' }, hAsync("div", { key: '2dd7399f266c15a9654dcb8075edd69501f464e0', class: containerClasses }, this.label && (hAsync("label", { key: '445608b567e7673386bb99791f63e852c6b95627', class: "input-secondary__label", htmlFor: this.inputId }, this.label, this.required && hAsync("span", { key: '3e926e2b17ada694064559525a86dab2f64bbb39', class: "input-secondary__required" }, "*"))), hAsync("div", { key: 'f2b73b8eed06c0ad8931e67e8d26e6d13effa14d', class: "input-secondary__field" }, hAsync("input", { key: 'dd3506bb5fd1e14f3e30600f3b00b28446f7fa87', id: this.inputId, type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 backgroundColor: this.bgColor,
-            } }), hAsync("slot", { key: '8b72be3ae83c0de2f8c9f70198c012c0a25fb470', name: "append-inner" })), showDetails && (hAsync("div", { key: 'a540ae6fd62ca09ca1ce337fd71d9b93950071d0', class: "input-secondary__details" }, this.error && hAsync("div", { key: '1b899f4df036b2d648d7d6f87767d0ced8202a73', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && hAsync("div", { key: 'ec2ba7e7cfc715235360bf9444bb054301537dc3', class: "input-secondary__helper-text" }, this.helperText))), hAsync("slot", { key: '8dfc77b85e9d89c8c3fdbae4569e7b1ddc6ccb0d', name: "append" }))));
+            }, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), hAsync("slot", { key: 'ae3d7ee9248d8098e36bd44a8e07454cbdfecb32', name: "append-inner" })), showDetails && (hAsync("div", { key: '9cf7faef29234709d7301ede1d635dda4eabf3ac', class: "input-secondary__details" }, this.error && hAsync("div", { key: '7315826f15369e3a98cd629d484a34bc373f753d', class: "input-secondary__error-message", id: this.errorId }, this.error), !this.error && this.helperText && hAsync("div", { key: '356726d208da52b6e4c973f06511132a26f70069', class: "input-secondary__helper-text", id: this.helperId }, this.helperText))), hAsync("slot", { key: '190b4ed0fd2e6253dcae23ac4637bab3e0b26d81', name: "append" }))));
     }
     static get style() { return xplorInputTextSecondaryCss; }
     static get cmpMeta() { return {
@@ -7671,6 +8047,10 @@ class XplorInputTitle {
          * Whether the input is readonly
          */
         this.readonly = false;
+        /**
+         * Accessible label for the input
+         */
+        this.ariaLabel = 'Title';
         this.handleInput = (event) => {
             const target = event.target;
             this.value = target.value;
@@ -7683,7 +8063,7 @@ class XplorInputTitle {
         };
     }
     render() {
-        return (hAsync(Host, { key: '8aaf2d386451218e3261ffec5c37d512905776ef' }, hAsync("input", { key: '0b79c0e500edcbd89a1e6f7bf4e1ea1b584b7a3e', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
+        return (hAsync(Host, { key: '1e49e53ce1525bdfa81b550739c97b3927a919e6' }, hAsync("input", { key: '74dd032886da4bca30a5f38a15b18903f03c5095', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, "aria-label": this.ariaLabel, onInput: this.handleInput, onChange: this.handleChange })));
     }
     static get style() { return xplorInputTitleCss; }
     static get cmpMeta() { return {
@@ -7693,7 +8073,8 @@ class XplorInputTitle {
             "value": [1025],
             "placeholder": [1],
             "disabled": [4],
-            "readonly": [4]
+            "readonly": [4],
+            "ariaLabel": [1, "aria-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7706,16 +8087,19 @@ const xplorLinksCss = ":host{display:block}.x-link{display:block;padding:0.5rem
 class XplorLinks {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** Alt text for the image */
+        this.imageAlt = '';
     }
     render() {
-        return (hAsync(Host, { key: '4e672b4eb8d386705f07f8d647a4a4cdabde607f', class: `theme-${this.brand}` }, hAsync("a", { key: '8b23a97b669f6682588a568cc644a17cc92c8364', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), hAsync("div", { key: '0b6bc1a1c77648137899cb8e554a93f1e56e4a15', class: "bg-black p-2 rounded-md flex justify-center" }, hAsync("h1", { key: 'c2f23df8712e1763bf9d6910c0bea40a5ff476bf', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), hAsync("div", { key: 'e09c835f279ae0c2f70f2864ab4afa5942e1c900', class: "bg-white py-24 sm:py-32" }, hAsync("div", { key: '5b390160da6205dc508018ab53a5f09ab80602d1', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, hAsync("div", { key: 'd7cf64efb0c15d643a74f67c11a3b9bc0807cd6d', class: "max-w-xl" }, hAsync("h2", { key: '78c877f919bd7098a79de55f2ef65d7538f418c5', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), hAsync("p", { key: '74b69e6d9f0d99b8653704e9fac32fa4ce50f211', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), hAsync("ul", { key: 'c8e457f3529ad8340c84d5bad80431b3c42318c8', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, hAsync("li", { key: '7cc055d330ab0ef28a10965f4fae52ba48b0f957' }, hAsync("div", { key: '47faf4cf76fe5363bde5c318abd8a9ff21972f00', class: "flex items-center gap-x-6" }, hAsync("img", { key: 'ecea3e92117d535dbd3c97d0868d5888c61a3b26', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), hAsync("div", { key: '4978dd776ab303b667c5a5a8e2c90e2a51b30829' }, hAsync("h3", { key: 'f49b65df05b1659a27dd6a5c82c11e1b9e18306d', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), hAsync("p", { key: 'e74b5a0caf90fef101dcbdf01e2aa6d823f0e36d', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+        return (hAsync(Host, { key: 'e26ac5962cb44c6e05a39034e76b6f35d076cb60', class: `theme-${this.brand}` }, hAsync("a", { key: '030c76cf101abf498a2828bffef051f5e01d3a65', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), hAsync("div", { key: '13ef22eb8e5ddc49976006b138b7bac0e379d85c', class: "bg-black p-2 rounded-md flex justify-center" }, hAsync("h1", { key: '39e7adc65ee5b26b4be9c111eabdb295fc964065', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), hAsync("div", { key: 'dae9ed47cdaa4afb6a6b70ca82c9b3c280f39215', class: "bg-white py-24 sm:py-32" }, hAsync("div", { key: '32f746f7ec8c3337fff37e445dfb7e31a42e68c9', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, hAsync("div", { key: '309dfd3930301f77cf83eea80579063d1c4aee85', class: "max-w-xl" }, hAsync("h2", { key: '6fac68cca56d79303a1d92b86d059f7f91296b3e', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), hAsync("p", { key: 'd759f98a1c30f4636592a5aa5ffa8f06cfa93dbe', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), hAsync("ul", { key: '978c9a043988f63c53b2ec9f7e0e73367dd72f41', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, hAsync("li", { key: '6ae95678b9ef5ed2ad60c62661aa4a6c966f2740' }, hAsync("div", { key: '0a98faa21b7216205d1ad44d977bcade55ce3162', class: "flex items-center gap-x-6" }, hAsync("img", { key: '58c7a75c098911ca434d5de959ca358a80cb5598', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: this.imageAlt }), hAsync("div", { key: '314a9de00a4ac46b67a12cc57ca8392ccea7cfd8' }, hAsync("h3", { key: 'd87b6c4fcdcf68e7bd9b9b29428cfe10de9e03fd', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), hAsync("p", { key: '254489d8c64e765276fbfb72cd88221a0e2575ad', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
     }
     static get style() { return xplorLinksCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
         "$tagName$": "xplor-links",
         "$members$": {
-            "brand": [1]
+            "brand": [1],
+            "imageAlt": [1, "image-alt"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -7761,6 +8145,7 @@ class XplorModal {
          * Whether to show the title area (for spacing)
          */
         this.showTitle = true;
+        this.previouslyFocusedElement = null;
         this.handleBackdropClick = () => {
             if (!this.persistent) {
                 this.closeModal();
@@ -7777,14 +8162,68 @@ class XplorModal {
     handleOpenChange(newValue) {
         if (newValue) {
             document.body.style.overflow = 'hidden';
+            this.previouslyFocusedElement = document.activeElement;
+            requestAnimationFrame(() => {
+                this.setInitialFocus();
+            });
         }
         else {
             document.body.style.overflow = '';
+            if (this.previouslyFocusedElement) {
+                this.previouslyFocusedElement.focus();
+                this.previouslyFocusedElement = null;
+            }
         }
     }
     disconnectedCallback() {
         document.body.style.overflow = '';
     }
+    handleKeyDown(event) {
+        if (!this.open)
+            return;
+        if (event.key === 'Escape' && !this.persistent) {
+            event.preventDefault();
+            this.closeModal();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+    }
+    getFocusableElements() {
+        if (!this.dialogEl)
+            return [];
+        const selectors = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        return Array.from(this.dialogEl.querySelectorAll(selectors));
+    }
+    trapFocus(event) {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length === 0)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+    setInitialFocus() {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+        else if (this.dialogEl) {
+            this.dialogEl.focus();
+        }
+    }
     render() {
         if (!this.open) {
             return null;
@@ -7801,8 +8240,12 @@ class XplorModal {
                 width: this.width,
                 maxWidth: this.maxWidth,
                 maxHeight: this.maxHeight,
-            }, onClick: this.handleCardClick }, hAsync("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), hAsync("div", { class: "xplor-modal__title" }, hAsync("slot", { name: "title" })), hAsync("div", { class: "xplor-modal__subtitle" }, hAsync("slot", { name: "subtitle" })), hAsync("div", { class: bodyClasses }, this.loading ? (hAsync("div", { class: "xplor-modal__loading" }, hAsync("div", { class: "xplor-modal__spinner" }))) : (hAsync("slot", { name: "body" }))), hAsync("div", { class: "xplor-modal__actions" }, hAsync("slot", { name: "actions" }))))));
+            }, onClick: this.handleCardClick, role: "dialog", "aria-modal": "true", "aria-labelledby": this.ariaLabel ? undefined : 'xplor-modal-title', "aria-label": this.ariaLabel, tabindex: "-1", ref: (el) => (this.dialogEl = el) }, hAsync("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), hAsync("div", { class: "xplor-modal__title", id: "xplor-modal-title" }, hAsync("slot", { name: "title" })), hAsync("div", { class: "xplor-modal__subtitle" }, hAsync("slot", { name: "subtitle" })), hAsync("div", { class: bodyClasses }, this.loading ? (hAsync("div", { class: "xplor-modal__loading", role: "status", "aria-label": "Loading" }, hAsync("div", { class: "xplor-modal__spinner" }))) : ([
+            hAsync("slot", { name: "body" }),
+            hAsync("slot", null)
+        ])), hAsync("div", { class: "xplor-modal__actions" }, hAsync("slot", { name: "actions" }))))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "open": ["handleOpenChange"]
     }; }
@@ -7818,9 +8261,10 @@ class XplorModal {
             "scrollable": [4],
             "persistent": [4],
             "loading": [4],
-            "showTitle": [4, "show-title"]
+            "showTitle": [4, "show-title"],
+            "ariaLabel": [1, "aria-label"]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -7886,8 +8330,45 @@ class XplorNavTabs {
             this.xplorChange.emit(item.value);
         };
     }
+    handleKeyDown(event) {
+        const enabledItems = this.items.filter(item => !item.disabled);
+        if (enabledItems.length === 0)
+            return;
+        const currentIndex = enabledItems.findIndex(item => item.value === this.value);
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = enabledItems.length - 1;
+                break;
+            default:
+                return;
+        }
+        const newItem = enabledItems[newIndex];
+        this.value = newItem.value;
+        this.xplorChange.emit(newItem.value);
+        // Focus the newly active tab button
+        const buttons = this.el.querySelectorAll('button[role="tab"]');
+        const allItemIndex = this.items.indexOf(newItem);
+        const targetButton = buttons[allItemIndex];
+        if (targetButton) {
+            targetButton.focus();
+        }
+    }
     render() {
-        return (hAsync(Host, { key: '30bab02780d071338f386b6a72559bbd65212118' }, hAsync("div", { key: '2684dbbd4a812bbb88d55baeb42b281c2f3bf753', class: {
+        return (hAsync(Host, { key: '1a94314129f0f6c94df3196ef7e2a493b6626fd7' }, hAsync("div", { key: '71b0ee2d2baab1fed571ed88f04fc49754b2952e', class: {
                 'nav-tabs': true,
                 'nav-tabs--grow': this.grow,
                 [`nav-tabs--${this.color}`]: true,
@@ -7895,8 +8376,9 @@ class XplorNavTabs {
                 'nav-tabs__tab': true,
                 'nav-tabs__tab--active': this.value === item.value,
                 'nav-tabs__tab--disabled': item.disabled,
-            }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', type: "button" }, item.label))), hAsync("slot", { key: 'dae806f8f498015b5837c799cb024fc3d688cc8d' }))));
+            }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', tabIndex: this.value === item.value ? 0 : -1, type: "button" }, item.label))), hAsync("slot", { key: 'fbf08f6785a81babc1c29359f0dff202dca18d6c' }))));
     }
+    get el() { return getElement(this); }
     static get style() { return xplorNavTabsCss; }
     static get cmpMeta() { return {
         "$flags$": 6,
@@ -7907,26 +8389,119 @@ class XplorNavTabs {
             "color": [1],
             "grow": [4]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[0, "keydown", "handleKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
 }
 
-const xplorRadioBtnCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\n  } */\n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n  display: block;\n}";
+const xplorRadioBtnCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\n  } */\n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n  display: inline-block;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n.radio-wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n.radio-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.radio {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid #9ca3af;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  outline: none;\n  position: relative;\n  flex-shrink: 0;\n}\n.radio.hover {\n  border-color: #059669;\n  background: #d1fae5;\n}\n.radio.focus {\n  border-color: #059669;\n  background: #a7f3d0;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);\n}\n.radio.pressed {\n  border-color: #059669;\n  background: #6ee7b7;\n}\n.radio.checked {\n  border-color: #059669;\n}\n.radio.checked.hover {\n  background: #d1fae5;\n}\n.radio.checked.hover .radio-inner {\n  background: #059669;\n}\n.radio.checked.focus {\n  background: #a7f3d0;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);\n}\n.radio.checked.focus .radio-inner {\n  background: #059669;\n}\n.radio.checked.pressed {\n  background: #6ee7b7;\n}\n.radio.checked.pressed .radio-inner {\n  background: #059669;\n}\n.radio.error {\n  border-color: #ef4444;\n}\n.radio.error.hover {\n  background: #fee2e2;\n  border-color: #ef4444;\n}\n.radio.error.focus {\n  background: #fecaca;\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);\n}\n.radio.error.pressed {\n  background: #fca5a5;\n  border-color: #ef4444;\n}\n.radio.error.checked .radio-inner {\n  background: #ef4444;\n}\n.radio.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  border-color: #d1d5db;\n  background: white;\n}\n.radio.disabled.checked {\n  border-color: #9ca3af;\n}\n.radio.disabled.checked .radio-inner {\n  background: #9ca3af;\n}\n\n.radio-inner {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #059669;\n  transform: scale(0);\n  transition: transform 0.15s ease;\n}\n.radio-inner--visible {\n  transform: scale(1);\n}\n\n.label {\n  font-size: 14px;\n  color: #374151;\n  user-select: none;\n}\n\n.radio-wrapper--disabled .label {\n  opacity: 0.4;\n}";
 
 class XplorRadioBtn {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.radioChange = createEvent(this, "radioChange");
+        /** The label text displayed next to the radio button */
+        this.label = '';
+        /** The value associated with this radio button */
+        this.value = '';
+        /** The name attribute to group radio buttons together */
+        this.name = '';
+        /** Whether this radio button is initially selected */
+        this.initialChecked = false;
+        /** Whether this radio button is disabled */
+        this.disabled = false;
+        /** Whether this radio button is in an error state */
+        this.error = false;
+        this.checked = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isPressed = false;
+        this.handleClick = () => {
+            if (this.disabled || this.checked)
+                return;
+            // Deselect all siblings in the same name group
+            this.getSiblingRadios().forEach(radio => radio.deselect());
+            this.checked = true;
+            this.radioChange.emit({ value: this.value, checked: this.checked });
+        };
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.isPressed = true;
+                this.handleClick();
+            }
+        };
+        this.handleKeyUp = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.isPressed = false;
+            }
+        };
+        this.getRadioClass = () => {
+            const classes = ['radio'];
+            if (this.checked)
+                classes.push('checked');
+            if (this.disabled)
+                classes.push('disabled');
+            if (this.error)
+                classes.push('error');
+            if (this.isHovered && !this.disabled)
+                classes.push('hover');
+            if (this.isFocused && !this.disabled)
+                classes.push('focus');
+            if (this.isPressed && !this.disabled)
+                classes.push('pressed');
+            return classes.join(' ');
+        };
+    }
+    watchCheckedProp(newValue) {
+        this.checked = newValue;
+    }
+    componentWillLoad() {
+        this.checked = this.initialChecked;
+    }
+    /** Programmatically deselect this radio button */
+    async deselect() {
+        this.checked = false;
+    }
+    getSiblingRadios() {
+        if (!this.name)
+            return [];
+        const parent = this.el.parentElement;
+        if (!parent)
+            return [];
+        const all = Array.from(parent.querySelectorAll(`xplor-radio-btn[name="${this.name}"]`));
+        return all.filter(radio => radio !== this.el);
     }
     render() {
-        return (hAsync(Host, { key: '350aae21c138b87e3dfce7ebdb2d74747d5abc93' }, hAsync("h1", { key: 'f7546bbab5c85aa0ed4d180116200790444f8c5f' }, "I'm a button"), hAsync("slot", { key: '79492d83d93da17775f56c21e2a600cafdea2c44' })));
+        return (hAsync("label", { key: 'dee9c14f54e292d18b3267ca5e2000aca36b0456', class: {
+                'radio-wrapper': true,
+                'radio-wrapper--disabled': this.disabled,
+            } }, hAsync("div", { key: '30bd9ba24abb9b37e6baa55d6ba767a2058cd1d0', class: this.getRadioClass(), onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onMouseDown: () => (this.isPressed = true), onMouseUp: () => (this.isPressed = false), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label }, hAsync("div", { key: 'd09a47486e2041f12cbdeadd29fd537cab41db3b', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (hAsync("span", { key: 'd8b820cd1b843f33a99a64c236f3f53a1c68be70', class: "label" }, this.label))));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "initialChecked": ["watchCheckedProp"]
+    }; }
     static get style() { return xplorRadioBtnCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
         "$tagName$": "xplor-radio-btn",
-        "$members$": undefined,
+        "$members$": {
+            "label": [1],
+            "value": [1],
+            "name": [1],
+            "initialChecked": [4, "initial-checked"],
+            "disabled": [4],
+            "error": [4],
+            "checked": [32],
+            "isHovered": [32],
+            "isFocused": [32],
+            "isPressed": [32],
+            "deselect": [64]
+        },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
@@ -7943,11 +8518,11 @@ class XplorSectionCard {
         this.padding = '1.5rem';
     }
     render() {
-        return (hAsync(Host, { key: 'f0bb8af2883a5441f3e325c4267ad3cec5716c9a' }, hAsync("div", { key: 'a7611e3f28ca8d84782146adb2b906c789f4a338', class: {
+        return (hAsync(Host, { key: '14876af087f131508ff26d4fefbba1792fb1f092' }, hAsync("div", { key: '38bf7ff900f46b701416e2a3483c66728939cf8c', class: {
                 'section-card': true,
                 'section-card--outlined': this.outlined,
                 'section-card--rounded': this.rounded,
-            }, style: { padding: this.padding } }, hAsync("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), hAsync("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), hAsync("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, hAsync("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" })), hAsync("div", { key: 'd71137c24f428c4001c06c3038565368423e71cd', class: "section-card__actions" }, hAsync("slot", { key: '06b994a9fb3626a0054b6192b5bb666b89710f54', name: "actions" })))));
+            }, style: { padding: this.padding } }, hAsync("slot", { key: '2189b986d9b08b1ef6168af7a5fe24da4a599301', name: "title" }), hAsync("slot", { key: 'c3efe60808ac203e0c9a63c7c636dee242856bf0', name: "subtitle" }), hAsync("div", { key: 'cf9d94651682ca4d1da25ccadbbfe2168295a326', class: "section-card__body" }, hAsync("slot", { key: '732633bbbe5ad06f1c10222e81929a33ba06a12c', name: "body" }), hAsync("slot", { key: 'e403abfc1b71759aab693c700b5ed8be1215f30e' })), hAsync("div", { key: '89ffdd8215a88483635d1542a56a6f446abf61c4', class: "section-card__actions" }, hAsync("slot", { key: 'e21b2e8b8cd048c4a0dfd369684186b547cc7611', name: "actions" })))));
     }
     static get style() { return xplorSectionCardCss; }
     static get cmpMeta() { return {
@@ -7970,13 +8545,18 @@ class XplorSectionHeading {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.size = 'medium';
+        /**
+         * Heading level (1-6), renders as h1-h6. Defaults to 2.
+         */
+        this.level = 2;
     }
     render() {
-        return (hAsync(Host, { key: '6ee4041528bf178feb4b641c6f6f937c28ed2e8e' }, hAsync("span", { key: 'e9758f23fe78a18f5ebf77092225c4d3b2a29965', class: {
+        const HeadingTag = `h${this.level}`;
+        return (hAsync(Host, { key: 'dbd9dc5f552dd6a20d6a5e39efd636ced45df7cb' }, hAsync(HeadingTag, { key: '90ceffcb3383b8d167e11e42cb6a2e915ddeec1b', class: {
                 'section-heading': true,
                 'section-heading--small': this.size === 'small',
                 'section-heading--large': this.size === 'large',
-            } }, hAsync("slot", { key: 'e0191f9f23da9858ffbb204554fec2c1012d1cd3' }, this.text))));
+            } }, hAsync("slot", { key: 'dd861c58c3e59e0bb4b0e7195ecaaa55ffab4912' }, this.text))));
     }
     static get style() { return xplorSectionHeadingCss; }
     static get cmpMeta() { return {
@@ -7984,7 +8564,8 @@ class XplorSectionHeading {
         "$tagName$": "xplor-section-heading",
         "$members$": {
             "size": [1],
-            "text": [1]
+            "text": [1],
+            "level": [2]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8175,18 +8756,23 @@ class XplorTable {
         if (this.hasScrolled)
             className += ' xpl-table--has-scrolled';
         const paginatedData = this.getPaginatedData();
-        return (hAsync(Host, { key: '3f20eb245a5a7cb281d4d62c4decd5479a4a172f', class: "xplor-table" }, hAsync("div", { key: '1a28e8efbe4743b4dc77cfe62eeb21f317a9cbea', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, hAsync("div", { key: 'a20608a0f5d4cde341974fb887f6bf0fcd1bce2d', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (hAsync(Host, { key: 'da8ded4b349560e2272fd0ffa1395ffc04d92769', class: "xplor-table" }, hAsync("div", { key: '5cddb71e28a6eb512bbe0a209816fb8ba8050e22', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, hAsync("div", { key: '24abe132c8b2889e656f39b197dcb2348cf7c49b', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, hAsync("div", { key: '179d76f9152adf12775024ab4b8a272539ae1931', class: "mb-6" }, hAsync("h1", { key: '636955cf3e3b34e0dfd96d61b1dc055a8bd25421', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), hAsync("div", { key: 'dbb17a39f87faf48f840cb0a0912e766d26fd3c6', class: "flex flex-wrap items-center gap-4 mb-6" }, hAsync("div", { key: '093859d4da39cdbda7c9d2bdde59dbe18e6379bc', class: "flex items-center gap-2" }, hAsync("label", { key: '01a133d35d6b97bb2c4e231ae6ebe8f4082f2955', class: "text-sm text-gray-600 font-medium" }, "Date Range"), hAsync("select", { key: 'df99b873a684c2ae59f4d8ee5f2df68de8d0424d', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
+            } }, hAsync("div", { key: 'afd56f434c013d1175c198790562f60cbed5d6ce', class: "mb-6" }, hAsync("h1", { key: 'ba650cfc24623c63910f9dfb7547272dc2adbe68', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), hAsync("div", { key: '4150efe6295d6697a787322e6bc8550d82296b69', class: "flex flex-wrap items-center gap-4 mb-6" }, hAsync("div", { key: '1bef7dc05a99081de7b2cf0588c58fb4cd0cb429', class: "flex items-center gap-2" }, hAsync("label", { key: 'ce45f248fd5151412bd64f75038996e3febf09a1', class: "text-sm text-gray-600 font-medium" }, "Date Range"), hAsync("select", { key: 'cc7b10bb86619c119bb3d4f5ab5267f733ad7805', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
             // value={this.selectedDateRange}
-            onInput: this.handleDateRangeChange }, hAsync("option", { key: '7886a61f2329e9ed9cc8ee7a2cf6addea173cca1', value: "All" }, "All"), hAsync("option", { key: '582f916607bb0cf80e0bae5bc0d6a2a555629139', value: "Today" }, "Today"), hAsync("option", { key: 'e6b1b8b081ee25a4ed86a41e2de2e18a904b0696', value: "This Week" }, "This Week"), hAsync("option", { key: '9db97f27a005fe23d2e5c60f8920b867a8f6c6e5', value: "This Month" }, "This Month"), hAsync("option", { key: '3328f1c88fe0da23ede3010441f0fe4e2063b2ec', value: "Custom" }, "Custom Range")), hAsync("button", { key: '31041e09d90e476f7c795b29eb6f11b014ff7bfd', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, hAsync("svg", { key: '1bafb7b5f685358f03d9c4aab68ae30eb49118dd', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: 'e59bce624afdfb75f2c0118fc6ff83daab003246', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), hAsync("button", { key: '67ff7cd34e44e071f73d5d4e4f46df5ae386aa00', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), hAsync("button", { key: '5b23efc3355a5e4907b06696e29ca1f5b9d5c4f2', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, hAsync("svg", { key: 'f787cf0f0759c4536786bc3e1ce2db99324ba085', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '1a21159e06c0371d4d43abc98a1e5d2c4919fa2f', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), hAsync("table", { key: '7ba170b68b794cd1dc031e801405d0f09c8d0e8f', class: `w-full ${className}` }, this.columns && (hAsync("thead", { key: 'e79458ad7b197620a6ba37084fd009a3685340cc' }, this.columns.map((column, i) => {
+            onInput: this.handleDateRangeChange }, hAsync("option", { key: '62474a4b5ad2fd7ba9f0806bf7bb26b487df04ff', value: "All" }, "All"), hAsync("option", { key: 'aba4fb209168ae645d87475f0467ba38ee258f7e', value: "Today" }, "Today"), hAsync("option", { key: '8203884e17bdcd012f90245dde1b9aec9abf16ed', value: "This Week" }, "This Week"), hAsync("option", { key: '7a721035e8d8e31d61869f7513b586e06d06b1e9', value: "This Month" }, "This Month"), hAsync("option", { key: '9a1d085c513236cb746cc9a6ebac1c48c8e35214', value: "Custom" }, "Custom Range")), hAsync("button", { key: '7119eae652a26a19f774fe2a3e2564a993937caa', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, hAsync("svg", { key: 'c430ab8a591ebd2e9c7cf14dd0f0758419be1178', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '8330e74a528e0890375f9277d8dc7481bb88e8f9', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), hAsync("button", { key: '85dc3c28587d7ce09cdb8dfe50e2b44f0f04b7c9', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), hAsync("button", { key: '36d9d5fc49d73a0944c7abf1f5b96932d9789f0b', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, hAsync("svg", { key: '81cbf1b31e01c1d4fbba64b53b21bc26146d6f84', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: 'd3c68b2337d4a4ab9a8d218d9aa722814d548e1b', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), hAsync("table", { key: '782e125327cea0381296ab5a3f2e3ddec6f42f24', class: `w-full ${className}` }, this.columns && (hAsync("thead", { key: 'ad3958e4d04f974dd47136da227afb662ff6cc7f' }, this.columns.map((column, i) => {
             const iconType = getIconType(this.sortTypeArray[i]);
             const isColumnSortable = !!(this.isSortable &&
                 this.sortableColumns[i]);
-            return (hAsync("th", { class: "text-left py-3 px-4 text-sm font-medium text-gray-600" }, this.multiselect && i === 0 ? (hAsync("label", { onClick: (e) => {
+            return (hAsync("th", { class: "text-left py-3 px-4 text-sm font-medium text-gray-600", "aria-sort": isColumnSortable && this.sortTypeArray[i]
+                    ? this.sortTypeArray[i] === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                    : isColumnSortable
+                        ? 'none'
+                        : undefined }, this.multiselect && i === 0 ? (hAsync("label", { onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    debugger;
                     if (isColumnSortable) {
                         this.sortBy(i);
                     }
@@ -8200,11 +8786,11 @@ class XplorTable {
                     this.selected.some((a) => a), onClick: (e) => {
                     e.stopPropagation();
                     this.selectAll(e);
-                }, type: "checkbox", value: `select-all-${this.selectAllValue}` }), column, isColumnSortable &&
+                }, type: "checkbox", value: `select-all-${this.selectAllValue}`, "aria-label": "Select all rows" }), column, isColumnSortable &&
                 !!this.sortTypeArray[i] && (hAsync("xpl-icon", { icon: iconType, size: 16 })))) : (hAsync("label", { onClick: () => isColumnSortable &&
                     this.sortBy(i), class: isColumnSortable
                     ? 'cursor-pointer'
-                    : '' }, column, isColumnSortable &&
+                    : '', "aria-label": isColumnSortable ? `Sort by ${column}` : undefined }, column, isColumnSortable &&
                 !!this.sortTypeArray[i] && (hAsync("svg", { width: "11", height: "6", viewBox: "0 0 11 6", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M10.5 5.5L5.5 0.5L0.5 5.5L10.5 5.5Z", fill: "currentColor" }))
             // <xpl-icon
             //     icon={iconType}
@@ -8212,11 +8798,11 @@ class XplorTable {
             //     id="__xpl-icon-sort"
             // ></xpl-icon>
             )))));
-        }))), hAsync("tbody", { key: '138ffddb19a8573fc00894a5e9b981cecbe3ac40' }, paginatedData.map((row, rowNum) => (hAsync("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (hAsync("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (hAsync("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, hAsync("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
+        }))), hAsync("tbody", { key: '1168d8fb9e1f324b37abdc1e8a899bb14dedf786' }, paginatedData.map((row, rowNum) => (hAsync("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (hAsync("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (hAsync("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, hAsync("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
                 .length > 0
                 ? this
                     .selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}` }), hAsync("div", { innerHTML: cell }))) : (hAsync("div", { innerHTML: cell })))))))))), hAsync("div", { key: 'e82751ff914c2279cecdfbaa176e97f6e935732a', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, hAsync("div", { key: '4ed42566de46b43af24a36884832017947f117ef', class: "flex items-center gap-2" }, hAsync("button", { key: 'a0c61305cbcace0eda2964da23085f58a8fc31a7', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, hAsync("svg", { key: '322225c61fc14d0c6d8a201a3ff07cce094822c7', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: 'ae66792c0cf51383d2657ff5302383e4067761ce', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), hAsync("button", { key: 'bc660dbbcf14d7ddf25820c337d212c11804b988', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, hAsync("svg", { key: '365d59f74128819af1f163f125e393994a2e69ad', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '0b7c6305962e722c161d30e3b3ffe804c5d4c73e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), hAsync("span", { key: '2e0245cf9e2d23a944492432cd5c33bb915ecd2b', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), hAsync("div", { key: '5692bf81ffa24c2e10c8edb7d7a5ff6655816f7a', class: "flex items-center gap-2" }, hAsync("button", { key: 'f60c4847070a3eb4e19e59c7c25141ce68ddbe81', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, hAsync("svg", { key: '5f45f52d2dd1718691f582e765dd7cc3aa476dce', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: 'ad63a63e8956c6648781d7160761f8e310c5becc', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), hAsync("button", { key: '2ee1f6498fb0ccb4e2ea9a4e4d7651053b97851c', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, hAsync("svg", { key: 'e247cc56f3cfc8d870a7891fd0c457645473e3e1', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '791f2af81bce193fbfcb41985feccec5338cee80', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
+                : `xpl-table-checkbox-${rowNum}` }), hAsync("div", { innerHTML: cell }))) : (hAsync("div", { innerHTML: cell })))))))))), hAsync("div", { key: 'dddc5e97acb0270689af29fdfbb0a96018074f48', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, hAsync("div", { key: 'e7a37384aacfcd801b904082b028dd7b646b7938', class: "flex items-center gap-2" }, hAsync("button", { key: '0d099c93f970f255015df19a10736c76317f3d58', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, hAsync("svg", { key: '3ef73d6177480ef3c6bb2e0ba3c11faf93fad40a', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '61447e4f959176a412b9702dfd5f0c126dfd1dcf', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), hAsync("button", { key: '5d996706416e30beeb36b3ccf5f49a0f728c9d46', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, hAsync("svg", { key: 'a4e874b1db8cb252698f36497aebbfd8dfef9f7d', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '9ea64241e49ebfdc43f26317c1403a0dec074a2e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), hAsync("span", { key: '25c2b77e2d374c782bef6907bbaa5f7d1c2b9a51', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), hAsync("div", { key: '6586812fde391e75b56da67db64eeece80629dbc', class: "flex items-center gap-2" }, hAsync("button", { key: 'f63385fd3ccae39ecb97b10fc92f204fb3e2fd62', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, hAsync("svg", { key: '2024b6fa282b30ffcd8870dab2f50c0f1af0f4ef', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '397312376d85ef4262c42f0f4382371aeb0c5eef', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), hAsync("button", { key: 'bb42b666d217a21b3f2b91b28eaa39a96ad403ba', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, hAsync("svg", { key: '2e8f28f57ef6fd799559ae70c3c9bc9d7d74cdc3', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '02270640aefaf430f27acf75465bfc5b30d2a881', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8257,11 +8843,11 @@ class XplorTextBubble {
         this.color = 'orange';
     }
     render() {
-        return (hAsync(Host, { key: '61174051f7acc2747a0c95e1599a8ca04a9bc5e6' }, hAsync("div", { key: 'fe266a910f906422a4e5d9e73d4f4d0570fa8c79', class: {
+        return (hAsync(Host, { key: 'bd93a7c09ef941a3c5a18b8b6b0704b2c9842b23' }, hAsync("div", { key: '234e72bed4c9cdf297901639130b452dd82392cf', class: {
                 'text-bubble': true,
                 'text-bubble--green': this.color === 'green',
                 'text-bubble--orange': this.color === 'orange',
-            } }, hAsync("slot", { key: '1286ac72861f5da019bece897343778d40acdc36' }))));
+            } }, hAsync("slot", { key: '92c5fe22e00dd2506b15d49333ba8e31021d9bbf' }))));
     }
     static get style() { return xplorTextBubbleCss; }
     static get cmpMeta() { return {
@@ -8408,10 +8994,10 @@ class XplorTextField {
     }
     render() {
         const labelFloating = this.isFocused || this.hasValue;
-        return (hAsync(Host, { key: '93fdd30e48260ae52b33c18368637b1e7fdd7b6b' }, hAsync("div", { key: 'ef93e7bc3588c225dfb7fef553f1146aecfcc027', class: this.computedClasses }, hAsync("div", { key: '5ffdd5634f410b2432e549403040e9ce7fdb0da4', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, hAsync("div", { key: '08ab012b2ccb2698256f149563cc1ed47052e694', class: "xplor-text-field__input-wrapper" }, this.label && (hAsync("label", { key: 'c4f359a167cb4cb47ba39355c56f7249523d8ef7', class: {
+        return (hAsync(Host, { key: '3c7117a290dc3f7157270b083559266c94ad21b8' }, hAsync("div", { key: 'f97ceed7ef938aed090f297d070cd240b658d8a7', class: this.computedClasses }, hAsync("div", { key: '81ba47f6a22762d85e33052765896949e87e824f', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, hAsync("div", { key: '33190e56a1443af9e4891d4a166442daa52ecb79', class: "xplor-text-field__input-wrapper" }, this.label && (hAsync("label", { key: 'a44ab99f0e1719b2a93edcd7963c89476154f2f6', class: {
                 'xplor-text-field__label': true,
                 'xplor-text-field__label--floating': labelFloating,
-            } }, hAsync("slot", { key: 'cfd751bb2bbe51c6a847b6ac6317559b06feae39', name: "label" }, this.label), this.required && hAsync("span", { key: '0d53dea42c4b288ec44c699aac77670ff45167b9', class: "xplor-text-field__required" }, "*"))), hAsync("input", { key: 'cbb7810c082c222a6aebe67fbfdfcce7804ff82c', ref: (el) => (this.inputElement = el), class: "xplor-text-field__input", type: this.type, value: this.value, placeholder: this.isFocused ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, maxlength: this.maxlength, min: this.min, max: this.max, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : 'false', "aria-describedby": this.hasError ? 'error-messages' : undefined }), hAsync("div", { key: '24a63d349c6a425854ed76c6ddb4a30ed5e91566', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (hAsync("button", { key: '9145e93c91f67f98f0759370515552c66aeaae28', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, hAsync("svg", { key: '8dc823a286290bc563939bdee1b13bac39a6596d', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: 'd2f82e862b8331992aadd769366ef4bae2b744fd', d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })))), hAsync("slot", { key: '40cc5d4ba05c8e13a4697af6da86069b8f8d0003', name: "append-inner" })), hAsync("fieldset", { key: 'd066e7b23972b722cd9e1dca0a008ba3e412cde7', class: "xplor-text-field__outline" }, hAsync("legend", { key: 'b8a3597b17f85b6877499cf7d984a874b0a124eb', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? hAsync("span", null, this.label, this.required && '*') : hAsync("span", null, "\u200B")))), hAsync("div", { key: 'b116ffbdb2e0fa04aee252137c3300c5939df4e4', class: "xplor-text-field__append" }, hAsync("slot", { key: '5ff712dd69e453d488f3fc3cdad49a72ed9d5779', name: "append" }))), this.showDetails && (hAsync("div", { key: '48ffb972bfb61eab4c33c61a4610f54ab6172cf6', class: "xplor-text-field__details" }, this.hasError && (hAsync("div", { key: '301bcf461bc00f3c4f5c5a322781f43a8451a597', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (hAsync("div", { class: "xplor-text-field__error" }, error))))))))));
+            } }, hAsync("slot", { key: 'c2299aedeb64c404c6bb7b6c0a29c9daae67fc44', name: "label" }, this.label), this.required && hAsync("span", { key: '0d6ed2e883c3a651986470ef89f7be59ba33a645', class: "xplor-text-field__required" }, "*"))), hAsync("input", { key: 'de966a8eb84dd86bd8a0e529561badffe71d3d46', ref: (el) => (this.inputElement = el), class: "xplor-text-field__input", type: this.type, value: this.value, placeholder: this.isFocused ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, maxlength: this.maxlength, min: this.min, max: this.max, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : 'false', "aria-describedby": this.hasError ? 'error-messages' : undefined }), hAsync("div", { key: 'b0bcd17da89b2f63f25d212f863d875489175a8c', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (hAsync("button", { key: '0cac263bf21ccc5536d62d420ce493e906811fd6', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, hAsync("svg", { key: '2c02a7e8a9dbe7f9d133fc3c3156389db914bf73', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: 'bfaf865c53bb90b7d14ba27e419ca131e4107bfd', d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })))), hAsync("slot", { key: '82eb809592dcc52a9c447c837b614d57e47f1678', name: "append-inner" })), hAsync("fieldset", { key: '828c5d47eab64b6ff91edd9d739c87fdaa88c589', class: "xplor-text-field__outline" }, hAsync("legend", { key: 'e1fef5e2002b8ea21c07c8f06272c6f53785f8b0', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? hAsync("span", null, this.label, this.required && '*') : hAsync("span", null, "\u200B")))), hAsync("div", { key: 'f5d2af691c5e9adb1295bbc4eb74b5510ab203f6', class: "xplor-text-field__append" }, hAsync("slot", { key: '8b26d1a847bfbbecd77067d2addb2a555464684e', name: "append" }))), this.showDetails && (hAsync("div", { key: '63acbf8b66a619b74769b5aba9559da813e3081e', class: "xplor-text-field__details" }, this.hasError && (hAsync("div", { key: 'c1e72205a335a0cf361ebb1936d19a0a6e1f52fd', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (hAsync("div", { class: "xplor-text-field__error" }, error))))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8739,16 +9325,16 @@ class XplorTimePicker {
     }
     render() {
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
-        const clockIcon = (hAsync("svg", { key: '9b8bc8f441d31aaa0c92e49e5c1a669f48c7ca6e', class: "time-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, hAsync("circle", { key: 'a21fb969eeb8690b82879ebc9a6c51b1cd7aafa7', cx: "12", cy: "12", r: "10" }), hAsync("polyline", { key: '3a9baa3e13e7b8c34291a3755122262d868c61ed', points: "12 6 12 12 16 14" })));
-        return (hAsync(Host, { key: 'd33be9ec453c217585e40c0eb8b0c0960c7bb382' }, hAsync("div", { key: '7ab538480696c0f08acd0855801f800bfe8c8862', class: {
+        const clockIcon = (hAsync("svg", { key: '4ceaab6e781f50e8a90c075c56cfadabb647d44a', class: "time-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, hAsync("circle", { key: '468d7d3f69e93dfa1dbd1c57922c62747d0332fc', cx: "12", cy: "12", r: "10" }), hAsync("polyline", { key: 'c6e3f11bc952645e9016ff95b3a712394c4a22b8', points: "12 6 12 12 16 14" })));
+        return (hAsync(Host, { key: 'c645e604a3e24895a27018db69116ab12f83f8bf' }, hAsync("div", { key: '67a035080a85b790df31f65292babdddf4e4e61b', class: {
                 'time-picker': true,
                 'time-picker--disabled': this.disabled,
                 'time-picker--error': !!this.error,
                 'time-picker--open': this.isOpen,
-            } }, this.label && (hAsync("label", { key: '360dc161f783af2b499223cdadac2232e3e78ba5', class: "time-picker__label" }, this.label, this.required && hAsync("span", { key: '78a2e4b030a913d992580d6ce1651a74ad5aab5e', class: "time-picker__required" }, "*"))), hAsync("div", { key: 'e17649b5447152ea129bd56d491c878fca99a2bd', class: "time-picker__field" }, hAsync("input", { key: '4d14139c735efafc6267e0a08e7087e61f38fea1', type: "text", class: "time-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), hAsync("div", { key: '84d7dbcc0f16b6f99453998b9daa27e6106cfc40', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (hAsync("button", { key: 'a70fedda5e74f4940fe098c9d78fe68a1bc0b54d', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), hAsync("button", { key: 'a1fd37c75457a5dd93da61318e6ee40c206cf5e1', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (hAsync("div", { key: '32d5afad7a12bbe4fe427f095d8683c80f91982e', class: "time-picker__details" }, this.error && hAsync("div", { key: 'd8b06c272ddc8f89b629a4829d72268853f2de59', class: "time-picker__error-message" }, this.error))), this.isOpen && (hAsync("div", { key: 'e32482cb95af8020176a98d430da82cd14e22d47', class: "time-picker__dropdown" }, hAsync("div", { key: 'fda4e88d54bbe1aee73c559ed4739d8af92a1312', class: "time-picker__columns" }, hAsync("div", { key: 'f6b11e869323e3ead50450c50c1513917e7d54b8', class: "time-picker__column" }, hAsync("button", { key: '006920c8b6f9482c71e86e51b57941ba9b01ac1a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), hAsync("div", { key: '8d24980d4686acb684198234be4e5795bb260a68', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), hAsync("button", { key: 'd3bacc27468fce121f8fd9d33bbdc017471d186a', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), hAsync("div", { key: '47b37a654b39d927bc8d61631f37b1f4668ddf4f', class: "time-picker__separator" }, ":"), hAsync("div", { key: '06338eaa14004fe3db215d8dd3aab3148e187e1e', class: "time-picker__column" }, hAsync("button", { key: '2ef570ff9b18c21d5380a4d84b04ce9ae2e2b29a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), hAsync("div", { key: 'd6b0499440d0316ef9ce34564b3430580890a3d4', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), hAsync("button", { key: 'da3cae735a153e422c8916575e6450ff60944b84', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
-            hAsync("div", { key: 'ac3ae8aaeff962e05ce23463e38ce8e1757125d6', class: "time-picker__separator" }, ":"),
-            hAsync("div", { key: 'bacd826ab467fcfbe31bb0bfb0e14482792a83a7', class: "time-picker__column" }, hAsync("button", { key: '9f5160fbe4c64aabd12b7b1b0a862ad67b5d1c0b', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), hAsync("div", { key: 'e0de300ff5896edefc657e0c700ef63022896ba0', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), hAsync("button", { key: 'ddd4a3851c3b95fbb204df8be210ff45770a5d4a', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
-        ], hAsync("div", { key: '9475cca4161ce49d5542f9e80e67cca0fa8d6e47', class: "time-picker__column time-picker__column--period" }, hAsync("button", { key: '478377c07a24bf7d42efb8ead573f212fd71a5e5', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), hAsync("div", { key: 'c1f4614e726d95eea32c5b02ad906a9455588594', class: "time-picker__value time-picker__value--period" }, this.period), hAsync("button", { key: '26c95e4dcec81c18808ff42861a3ac319e43ea73', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
+            } }, this.label && (hAsync("label", { key: 'fc39aebaf65eb55a47e36b9e502329938a50deac', class: "time-picker__label" }, this.label, this.required && hAsync("span", { key: 'f55931cd0b55c17176fa0f3da333f44b57b7e6a9', class: "time-picker__required" }, "*"))), hAsync("div", { key: '3f4e57bf5c2973baaa0e53ec9bed0658e23c4c9c', class: "time-picker__field" }, hAsync("input", { key: 'd893bd5ed3793a2e3d4aae60f16846db6c3d84a4', type: "text", class: "time-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), hAsync("div", { key: '7cb62a66b55645c2bc3c18a60abcb0098f4700d9', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (hAsync("button", { key: 'a547394c2508cddbcad2f3ebc52e7f361cab8f2e', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), hAsync("button", { key: '48bac21bb410015f81b539205bafad2f556ced51', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (hAsync("div", { key: 'f10a2918e0d2cd57c7fc1d64f24e3fd4038463be', class: "time-picker__details" }, this.error && hAsync("div", { key: 'da588b32f0fb80a797b44df89a4526ab337ec491', class: "time-picker__error-message" }, this.error))), this.isOpen && (hAsync("div", { key: 'b23b28c312732c033a28bcb39f862311554d599c', class: "time-picker__dropdown" }, hAsync("div", { key: 'fd8811287be54584fac873644be6da4d9a90a918', class: "time-picker__columns" }, hAsync("div", { key: '9373ac9977bb02507c09673783ecc9fc34f796f6', class: "time-picker__column" }, hAsync("button", { key: '64506ff04f398acf50e11e15adfabfc8a6e2950a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), hAsync("div", { key: 'b593fe8ea7cc1c1620f534a010d0828297845f8a', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), hAsync("button", { key: '1b2729ac84afa3aa5cbace2b027a8be77de7453c', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), hAsync("div", { key: 'cfc0910a6a02a6545d03dc6fd56dce45e389825b', class: "time-picker__separator" }, ":"), hAsync("div", { key: '084da53c62bfe3cfb2cf8843761509393541b82d', class: "time-picker__column" }, hAsync("button", { key: '017378d4bd006957267a242fd5da84bb5364626a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), hAsync("div", { key: '344202f97262fbf267b872927c054d1fbcc636c4', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), hAsync("button", { key: '690a243ddce9f3da11d172647202e65212e87b53', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
+            hAsync("div", { key: '6ca3eae6b03f75773a39d1eb67b0db8cbf00021d', class: "time-picker__separator" }, ":"),
+            hAsync("div", { key: 'ce31e8550cff9783229d58f866f5b2cab6b236e6', class: "time-picker__column" }, hAsync("button", { key: '6be3f03bb5cb13f95d9381e22ed4ef27a2c31786', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), hAsync("div", { key: 'faae89dc8d1a40f7a91df944c33d6cb0347dab72', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), hAsync("button", { key: '2e6094b085acefb6b80c835fc49d6d0c6fcde192', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
+        ], hAsync("div", { key: '2b029185906910cf1336726691b491bd8cd10421', class: "time-picker__column time-picker__column--period" }, hAsync("button", { key: 'a1cced2dca331985851a8b2a71733cdc75540339', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), hAsync("div", { key: 'b17134d423b342cb077af961e9a684a985ed6f13', class: "time-picker__value time-picker__value--period" }, this.period), hAsync("button", { key: '4c4d04f7ba212eb7babccf6ec2ead94fa63dcb04', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
     }
     get el() { return getElement(this); }
     static get style() { return xplorTimePickerCss; }
@@ -8784,6 +9370,7 @@ class XplorTimePicker {
 
 const xplorTooltipCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  \n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    \n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    \n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce.sc-xplor-tooltip {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce.sc-xplor-tooltip {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-tooltip {\n  color: var(--color-primary);\n  \n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; \n}\n\nh2.sc-xplor-tooltip {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; \n  letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-tooltip {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; \n}\n\n.overline.sc-xplor-tooltip {\n  color: var(--grey-1100252525, #252525);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; \n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol.sc-xplor-tooltip, ul.sc-xplor-tooltip {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-tooltip li.sc-xplor-tooltip, ul.sc-xplor-tooltip li.sc-xplor-tooltip {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-tooltip, ul.mdc-list.sc-xplor-tooltip {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-tooltip li.mdc-list-item.sc-xplor-tooltip, ul.mdc-list.sc-xplor-tooltip li.mdc-list-item.sc-xplor-tooltip {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-tooltip {\n  color: var(--Orange-900-Primary, #db3b03);\n  \n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; \n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-tooltip {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-tooltip {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-tooltip {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-tooltip .mdc-text-field--outlined.sc-xplor-tooltip .mdc-notched-outline__notch.sc-xplor-tooltip {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-tooltip .mdc-notched-outline__notch.sc-xplor-tooltip {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-tooltip .mdc-notched-outline.sc-xplor-tooltip .mdc-notched-outline__notch.sc-xplor-tooltip {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-tooltip {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-tooltip:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-tooltip {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-tooltip-h {\n  display: inline-block;\n  position: relative;\n}\n\n.tooltip-trigger.sc-xplor-tooltip {\n  display: inline-flex;\n  cursor: pointer;\n}\n\n.tooltip.sc-xplor-tooltip {\n  position: fixed;\n  z-index: 9999;\n  background-color: #424242;\n  color: #fff;\n  border-radius: 4px;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  line-height: 1.4;\n  max-width: 300px;\n  word-wrap: break-word;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  pointer-events: none;\n  opacity: 0;\n  animation: tooltipFadeIn 0.2s ease forwards;\n}\n\n@keyframes tooltipFadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n.tooltip__content.sc-xplor-tooltip {\n  position: relative;\n  z-index: 1;\n}\n\n.tooltip__arrow.sc-xplor-tooltip {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background-color: #424242;\n  z-index: 0;\n}\n\n.tooltip--top.sc-xplor-tooltip .tooltip__arrow.sc-xplor-tooltip {\n  margin-top: -6px;\n  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip--bottom.sc-xplor-tooltip .tooltip__arrow.sc-xplor-tooltip {\n  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip--left.sc-xplor-tooltip .tooltip__arrow.sc-xplor-tooltip {\n  margin-left: -6px;\n  display: block;\n  box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.tooltip--right.sc-xplor-tooltip .tooltip__arrow.sc-xplor-tooltip {\n  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);\n}";
 
+let tooltipIdCounter = 0;
 class XplorTooltip {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -8794,6 +9381,7 @@ class XplorTooltip {
         this.disabled = false;
         this.tooltipStyle = {};
         this.arrowStyle = {};
+        this.tooltipId = `xplor-tooltip-${++tooltipIdCounter}`;
         this.handleMouseEnter = () => {
             if (this.disabled)
                 return;
@@ -8809,6 +9397,16 @@ class XplorTooltip {
                 this.hideTooltip();
             }, 100);
         };
+        this.handleFocusIn = () => {
+            if (this.disabled)
+                return;
+            this.showTooltip();
+        };
+        this.handleFocusOut = () => {
+            if (this.disabled)
+                return;
+            this.hideTooltip();
+        };
         this.handleClick = () => {
             if (this.disabled)
                 return;
@@ -8835,12 +9433,16 @@ class XplorTooltip {
         if (this.triggerEl) {
             this.triggerEl.addEventListener('mouseenter', this.handleMouseEnter);
             this.triggerEl.addEventListener('mouseleave', this.handleMouseLeave);
+            this.triggerEl.addEventListener('focusin', this.handleFocusIn);
+            this.triggerEl.addEventListener('focusout', this.handleFocusOut);
         }
     }
     cleanupListeners() {
         if (this.triggerEl) {
             this.triggerEl.removeEventListener('mouseenter', this.handleMouseEnter);
             this.triggerEl.removeEventListener('mouseleave', this.handleMouseLeave);
+            this.triggerEl.removeEventListener('focusin', this.handleFocusIn);
+            this.triggerEl.removeEventListener('focusout', this.handleFocusOut);
         }
     }
     handleDocumentClick(event) {
@@ -8925,10 +9527,10 @@ class XplorTooltip {
         };
     }
     render() {
-        return (hAsync(Host, { key: '472521bc51295f0b7dcc4d17c0aef70df5c7181e' }, hAsync("div", { key: '9458cc629deea68c914e7214a762498ff9c3d4c8', class: "tooltip-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleClick }, hAsync("slot", { key: 'f5f6d6c85270fdca9b345dc9fed31b776c5d6358', name: "trigger" })), this.open && (hAsync("div", { key: 'd56f6b7f8e2d4c0b6425a85a290e330978645e74', class: {
+        return (hAsync(Host, { key: '135c627d93956798eef4e842ec256a0f156c771a' }, hAsync("div", { key: '1a4253fa4f893d7726227c346c9ebc850c7ee463', class: "tooltip-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleClick, "aria-describedby": this.open ? this.tooltipId : undefined }, hAsync("slot", { key: '8970f94fa612b40e573a66102533b1f54387b9b2', name: "trigger" })), this.open && (hAsync("div", { key: 'c1b873e3b9ccaf8747c772672282e63615528be7', class: {
                 'tooltip': true,
                 [`tooltip--${this.position}`]: true,
-            }, style: this.tooltipStyle, ref: (el) => (this.tooltipEl = el), role: "tooltip" }, hAsync("div", { key: '0b5735ca4b5d591dbec6f6ca6b2e47233b391198', class: "tooltip__content" }, hAsync("slot", { key: 'c4e8c76025b546b8aa485f3f9d37ee7ecf7fbddd' }, this.content)), this.arrow && (hAsync("div", { key: '373c339feda5732f8c5f2307deea89f2d66969ba', class: "tooltip__arrow", style: this.arrowStyle }))))));
+            }, style: this.tooltipStyle, ref: (el) => (this.tooltipEl = el), role: "tooltip", id: this.tooltipId }, hAsync("div", { key: '93af160a6f7fc1776ca358f3f91f0fecb381ce8d', class: "tooltip__content" }, hAsync("slot", { key: 'cb1c56d228c3f494d668dad73e2af6b303af9f42' }, this.content)), this.arrow && (hAsync("div", { key: '9d528e58c6b772c4b72096533bdb1f0df710aa8f', class: "tooltip__arrow", style: this.arrowStyle }))))));
     }
     get el() { return getElement(this); }
     static get style() { return xplorTooltipCss; }