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

package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Bc5o_4vY.js');
+var index = require('./index-BjAapk2n.js');
 
 const xplorAlertDialogCss = "@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-alert-dialog {\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-alert-dialog {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-alert-dialog {\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-alert-dialog {\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-alert-dialog {\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-alert-dialog {\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-alert-dialog, ul.sc-xplor-alert-dialog {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-alert-dialog li.sc-xplor-alert-dialog, ul.sc-xplor-alert-dialog li.sc-xplor-alert-dialog {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-alert-dialog, ul.mdc-list.sc-xplor-alert-dialog {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-alert-dialog li.mdc-list-item.sc-xplor-alert-dialog, ul.mdc-list.sc-xplor-alert-dialog li.mdc-list-item.sc-xplor-alert-dialog {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-alert-dialog {\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-alert-dialog {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-alert-dialog {\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-alert-dialog {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-alert-dialog .mdc-text-field--outlined.sc-xplor-alert-dialog .mdc-notched-outline__notch.sc-xplor-alert-dialog {\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-alert-dialog .mdc-notched-outline__notch.sc-xplor-alert-dialog {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-alert-dialog .mdc-notched-outline.sc-xplor-alert-dialog .mdc-notched-outline__notch.sc-xplor-alert-dialog {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-alert-dialog {\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-alert-dialog:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-alert-dialog {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-alert-dialog-h {\n  display: contents;\n}\n\n.xplor-alert-dialog__backdrop.sc-xplor-alert-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 2000;\n  padding: 1rem;\n}\n.xplor-alert-dialog__card.sc-xplor-alert-dialog {\n  position: relative;\n  background-color: white;\n  border-radius: 0.5rem;\n  padding: 3.75rem 1.25rem;\n  min-height: 320px;\n  max-width: 90vw;\n  max-height: 90vh;\n  overflow: auto;\n  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);\n  animation: xplor-dialog-fade-in 0.2s ease-out;\n}\n.xplor-alert-dialog__close-btn.sc-xplor-alert-dialog {\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n  width: 2rem;\n  height: 2rem;\n  border: none;\n  background: transparent;\n  color: rgba(0, 0, 0, 0.54);\n  font-size: 1.5rem;\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  z-index: 1;\n}\n.xplor-alert-dialog__close-btn.sc-xplor-alert-dialog:hover {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-alert-dialog__close-btn.sc-xplor-alert-dialog:active {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n.xplor-alert-dialog__title.sc-xplor-alert-dialog {\n  padding-top: 0;\n  margin-bottom: 1rem;\n  font-size: 1.25rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-alert-dialog__text.sc-xplor-alert-dialog {\n  margin-bottom: 1.5rem;\n  color: rgba(0, 0, 0, 0.87);\n}\n.xplor-alert-dialog__actions.sc-xplor-alert-dialog {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-end;\n}\n\n@keyframes xplor-dialog-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}";
 
@@ -21,6 +21,7 @@ const XplorAlertDialog = class {
          * Persistent mode - prevents closing on backdrop click
          */
         this.persistent = true;
+        this.previouslyFocusedElement = null;
         this.handleBackdropClick = () => {
             if (!this.persistent) {
                 this.closeDialog();
@@ -38,20 +39,75 @@ const XplorAlertDialog = class {
     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 (index.h(index.Host, null, index.h("div", { class: "xplor-alert-dialog__backdrop", onClick: this.handleBackdropClick }, index.h("div", { class: "xplor-alert-dialog__card", style: { width: this.width }, onClick: this.handleCardClick }, index.h("button", { type: "button", class: "xplor-alert-dialog__close-btn", onClick: this.closeDialog, "aria-label": "Close dialog" }, "\u2715"), index.h("div", { class: "xplor-alert-dialog__title" }, index.h("slot", { name: "title" })), index.h("div", { class: "xplor-alert-dialog__text" }, index.h("slot", { name: "text" })), index.h("div", { class: "xplor-alert-dialog__actions" }, index.h("slot", { name: "actions" }))))));
+        return (index.h(index.Host, null, index.h("div", { class: "xplor-alert-dialog__backdrop", onClick: this.handleBackdropClick }, index.h("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) }, index.h("button", { type: "button", class: "xplor-alert-dialog__close-btn", onClick: this.closeDialog, "aria-label": "Close dialog" }, "\u2715"), index.h("div", { class: "xplor-alert-dialog__title", id: "xplor-alert-dialog-title" }, index.h("slot", { name: "title" })), index.h("div", { class: "xplor-alert-dialog__text", id: "xplor-alert-dialog-text" }, index.h("slot", { name: "text" })), index.h("div", { class: "xplor-alert-dialog__actions" }, index.h("slot", { name: "actions" }))))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "open": ["handleOpenChange"]
     }; }
@@ -517,10 +573,10 @@ const AssistantInput = (props) => {
             enableVoiceInput && (index.h("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" },
                 index.h("span", { class: "xplor-assistant__voice-icon", innerHTML: microphoneIcon }))),
             index.h("input", { type: "text", class: "xplor-assistant__input", placeholder: placeholder, value: inputValue, onInput: handleInputChange, disabled: disabled || isLoading }),
-            index.h("button", { type: "submit", class: "xplor-assistant__send-button", disabled: isSendDisabled, title: "Send message" },
+            index.h("button", { type: "submit", class: "xplor-assistant__send-button", disabled: isSendDisabled, title: "Send message", "aria-label": "Send message" },
                 index.h("span", { class: "xplor-assistant__send-icon", innerHTML: sendIcon })))));
 };
 
@@ -782,7 +838,7 @@ const XplorAssistant = class {
         return (index.h(index.Host, null, index.h("div", { class: {
                 'xplor-assistant': true,
                 'xplor-assistant--disabled': this.disabled,
-            }, style: { maxHeight: this.maxHeight } }, index.h("div", { class: "xplor-assistant__messages", ref: (el) => (this.messagesContainerRef = el) }, this.messages.map((message) => (index.h(AssistantMessage, { message: message, enableTextToSpeech: this.enableTextToSpeech, autoSpeak: false, isSpeaking: this.isSpeaking, onSpeak: this.handleSpeak, onStopSpeaking: this.handleStopSpeaking }))), this.isLoading && (index.h("div", { class: "xplor-assistant__message xplor-assistant__message--assistant" }, index.h(TypingIndicator, null))), this.error && this.apiEndpoint && (index.h("div", { class: "xplor-assistant__error-banner" }, this.error))), this.quickReplies && this.quickReplies.length > 0 && (index.h(QuickReplies, { replies: this.quickReplies, disabled: this.disabled || this.isLoading, onReplyClick: this.handleQuickReply })), index.h(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 } }, index.h("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) => (index.h(AssistantMessage, { message: message, enableTextToSpeech: this.enableTextToSpeech, autoSpeak: false, isSpeaking: this.isSpeaking, onSpeak: this.handleSpeak, onStopSpeaking: this.handleStopSpeaking }))), this.isLoading && (index.h("div", { class: "xplor-assistant__message xplor-assistant__message--assistant" }, index.h(TypingIndicator, null))), this.error && this.apiEndpoint && (index.h("div", { class: "xplor-assistant__error-banner" }, this.error))), this.quickReplies && this.quickReplies.length > 0 && (index.h(QuickReplies, { replies: this.quickReplies, disabled: this.disabled || this.isLoading, onReplyClick: this.handleQuickReply })), index.h(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 index.getElement(this); }
     static get watchers() { return {
@@ -992,25 +1048,30 @@ const XplorAutocomplete = class {
     }
     render() {
         const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';
-        return (index.h(index.Host, { key: '3f88b352e99fbaf327995f2392b22a589a838c72' }, index.h("div", { key: '358c6a0fbae370f7225c17f9b859edc0d5a1cfc5', class: {
+        const listboxId = 'autocomplete-listbox';
+        const labelId = 'autocomplete-label';
+        const activeDescendantId = this.highlightedIndex >= 0 ? `autocomplete-option-${this.highlightedIndex}` : undefined;
+        return (index.h(index.Host, { key: 'f76ac5f9d1cd6e6c9618ac3884bc86a2bfabb3c5' }, index.h("div", { key: 'efd2bd854c305c56971b5d6e19a5b9eb497099f8', class: {
                 'autocomplete': true,
                 'autocomplete--disabled': this.disabled,
                 'autocomplete--readonly': this.readonly,
                 'autocomplete--open': this.isOpen,
-            } }, this.label && (index.h("label", { key: 'e07d2fc33354bef628b7361eeb924cf00eafb989', class: "autocomplete__label" }, this.label)), index.h("div", { key: '455efa54f13e4aa22d62df4f30dbfb42540d4baf', class: "autocomplete__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (index.h("div", { key: 'e1f68cc007e84feb11f01bfcde8294a3b3a52122', class: "autocomplete__chips" }, this.selectedItems.map(value => {
+            } }, this.label && (index.h("label", { key: '97bb161105b66181558d22519c9f0cd1287b2c49', class: "autocomplete__label", id: labelId }, this.label)), index.h("div", { key: '128acf53793205be89a8d619ce548107aaed8b28', class: "autocomplete__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (index.h("div", { key: '670da50897139688951c077db4b6116b88bfadfa', class: "autocomplete__chips" }, this.selectedItems.map(value => {
             const item = this.findItemByValue(value);
-            return (index.h("div", { class: "autocomplete__chip" }, index.h("span", { class: "autocomplete__chip-label" }, this.renderSelection && item ? this.renderSelection(item) : this.getSelectedItemLabel(value)), index.h("button", { type: "button", class: "autocomplete__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly }, "\u00D7")));
-        }))), index.h("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" }), index.h("div", { key: '6198fb2b029bd365c9929bdfe0b82815b3dd6bf2', class: "autocomplete__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (index.h("button", { key: 'e997555b393f60ae3f4affd803a92ba39e95b48b', type: "button", class: "autocomplete__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), index.h("span", { key: '0eab80a3ce9e55e403758ba0a53e89e7c3d3a36e', class: "autocomplete__icon" }, "\u25BC"))), this.isOpen && this.filteredItems.length > 0 && (index.h("div", { key: '37a77dc04d78b8c8cdc4decedf65f0adda67f626', class: "autocomplete__dropdown", ref: (el) => (this.dropdownEl = el), style: { maxWidth: this.menuMaxWidth } }, this.filteredItems.map((item, index$1) => {
+            const chipLabel = this.getSelectedItemLabel(value);
+            return (index.h("div", { class: "autocomplete__chip" }, index.h("span", { class: "autocomplete__chip-label" }, this.renderSelection && item ? this.renderSelection(item) : chipLabel), index.h("button", { type: "button", class: "autocomplete__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly, "aria-label": `Remove ${chipLabel}` }, "\u00D7")));
+        }))), index.h("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" }), index.h("div", { key: '5128b893c4743a49439a279b0cb7094077ebd528', class: "autocomplete__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (index.h("button", { key: '512d7956e79d9767e072462f1ec309b081716c86', type: "button", class: "autocomplete__clear", onClick: this.handleClear, "aria-label": "Clear selection" }, "\u00D7")), index.h("span", { key: 'e0cfba3c1513b63f9697835ad6919d045c7011db', class: "autocomplete__icon", "aria-hidden": "true" }, "\u25BC"))), this.isOpen && this.filteredItems.length > 0 && (index.h("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$1) => {
             const itemVal = this.getItemValue(item);
-            return (index.h("div", { key: itemVal, "data-index": index$1, class: {
+            const isSelected = this.multiple
+                ? this.selectedItems.includes(itemVal)
+                : this.value === itemVal;
+            return (index.h("div", { key: itemVal, id: `autocomplete-option-${index$1}`, "data-index": index$1, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : undefined, class: {
                     'autocomplete__item': true,
                     'autocomplete__item--highlighted': index$1 === 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 && (index.h("div", { key: '0f27440009a83374a615acf39b400181f4c7189f', class: "autocomplete__dropdown", style: { maxWidth: this.menuMaxWidth } }, index.h("div", { key: '634fb46e7f539c1cddfa11f2a30f80e34a684913', class: "autocomplete__no-results" }, "No results found"))))));
+        }))), this.isOpen && this.filteredItems.length === 0 && (index.h("div", { key: '329f92d7f4bf36bb114909853e249978412ae82f', class: "autocomplete__dropdown", style: { maxWidth: this.menuMaxWidth }, role: "listbox", id: listboxId }, index.h("div", { key: '400e97f955724f59830fb37b52d99c3723627e51', class: "autocomplete__no-results", role: "option", "aria-disabled": "true" }, "No results found"))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -1030,8 +1091,8 @@ const XplorAvatar = class {
             className += ` xpl-avatar--${this.size}`;
         if (this.color)
             className += ` xpl-avatar--${this.color}`;
-        const inner = (index.h("div", { key: '2e2722f2649108b7fdc3fd51375e17ac47e6f1ff' }, this.src ? (index.h("img", { alt: this.name, src: this.src })) : (index.h("div", { class: "xpl-avatar__placeholder" }, index.h("slot", null))), this.status && index.h("div", { key: '1367e8fccd661b566d95cb1bf3a20467be7bc40f', class: `xpl-avatar__dot--${this.status}` })));
-        return (index.h(index.Host, { key: 'ac12deb4b322146d75c650ba0abe6d96c35efd67' }, this.href && !this.disabled ? (index.h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (index.h("div", { class: className + ' xpl-avatar--disabled' }, inner)) : (index.h("div", { class: className }, inner))));
+        const inner = (index.h("div", { key: '2e2722f2649108b7fdc3fd51375e17ac47e6f1ff' }, this.src ? (index.h("img", { alt: this.name, src: this.src })) : (index.h("div", { class: "xpl-avatar__placeholder" }, index.h("slot", null))), this.status && index.h("div", { key: '26fa57a9a697a110ef73434376715eda0e5134a5', class: `xpl-avatar__dot--${this.status}`, "aria-label": `Status: ${this.status}`, role: "img" })));
+        return (index.h(index.Host, { key: '9c99cec20679f0d10fbcf9dffc70877c0dc879f9' }, this.href && !this.disabled ? (index.h("a", { href: this.href, class: className, target: this.target }, inner)) : this.href && this.disabled ? (index.h("div", { class: className + ' xpl-avatar--disabled' }, inner)) : (index.h("div", { class: className }, inner))));
     }
 };
 XplorAvatar.style = xplorAvatarCss;
@@ -1372,6 +1433,10 @@ const XplorBtnBackToParent = class {
          * Visual variant
          */
         this.variant = 'tonal';
+        /**
+         * Accessible label for the button
+         */
+        this.ariaLabel = 'Back to parent';
         this.handleClick = () => {
             this.back.emit();
         };
@@ -1384,7 +1449,7 @@ const XplorBtnBackToParent = class {
         const buttonStyles = {
             '--btn-size': this.size,
         };
-        return (index.h(index.Host, { key: '9ea4d137e9f4c80d0f5586953c5d463f365f5205' }, index.h("button", { key: '1e1839f03ca09a8a106a6f2ee2d7ca0a7b407588', class: buttonClasses, style: buttonStyles, onClick: this.handleClick }, index.h("span", { key: '50f7ee25b402d4ee796670ab59ad3c1085a0138d', class: "xplor-btn-back-to-parent__icon" }, "\u2715"))));
+        return (index.h(index.Host, { key: '0962b04ae634f044dd3e7c1eacf42b7d2c8e0f1e' }, index.h("button", { key: '82cb8fa3218a17784a0ab360d328b68f2c0e6e81', class: buttonClasses, style: buttonStyles, onClick: this.handleClick, "aria-label": this.ariaLabel }, index.h("span", { key: '784853baa5b013fc85a07054e446e6166eab7068', class: "xplor-btn-back-to-parent__icon" }, "\u2715"))));
     }
 };
 XplorBtnBackToParent.style = xplorBtnBackToParentCss;
@@ -1432,7 +1497,7 @@ const XplorBtnIcon = class {
             '--btn-size': typeof this.size === 'number' ? `${this.size}px` : this.size,
             '--icon-size': typeof this.iconSize === 'number' ? `${this.iconSize}px` : this.iconSize,
         };
-        return (index.h(index.Host, { key: 'd5077956c7999278384896a9a7a6bc011a6c84fe' }, index.h("button", { key: '8c58f798cdfd47607c4d7275d1a1d3c63c34d96d', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick }, index.h("span", { key: 'b2da80152f63a20cd4c284103c344e1c95f76f10', class: "xplor-btn-icon__content" }, index.h("slot", { key: 'de99b1a981800af7c0639cb0d1188268a9a408e1' })))));
+        return (index.h(index.Host, { key: '9d87aab5e3af33201c71dffeab51a5a02cc61e98' }, index.h("button", { key: 'c30b8c4aa51a957c84e7fff3d72e01961dec911c', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick, "aria-label": this.ariaLabel }, index.h("span", { key: '99773527f599523638ce8463fe308826f01202cf', class: "xplor-btn-icon__content" }, index.h("slot", { key: '14e1356bcecd1d2b8768cddbaf257f49bf92e5a7' })))));
     }
 };
 XplorBtnIcon.style = xplorBtnIconCss;
@@ -1471,6 +1536,10 @@ const XplorBtnMenu = class {
          * 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;
@@ -1478,10 +1547,16 @@ const XplorBtnMenu = class {
         };
         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);
@@ -1496,18 +1571,103 @@ const XplorBtnMenu = class {
     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 (index.h(index.Host, { key: '3e9516c7c2b31794bf8d71eb5672e46d3210dbc8' }, index.h("div", { key: 'e030d7ab1b7eee7fc8de9a6a519c69c285d01529', class: "xplor-btn-menu", ref: (el) => (this.menuRef = el) }, index.h("slot", { key: '185cb5433a18d51ea7e2f9b9309f7570050fdcea', name: "activator" }, index.h("button", { key: 'de5afd1f3e58b56301ea75724f0f1a5e04697f39', class: "xplor-btn-menu__button", onClick: this.toggleMenu }, index.h("span", { key: '73eaed41e0a754d06753f0fa30ef32864f2841f8' }, this.label), index.h("span", { key: '63bc890fe97154d02eb4da50e689f1db5226870f', class: "xplor-btn-menu__icon" }, "\u25BC"))), this.show && (index.h("div", { key: '6f231d7e1feac5dca59c9ef03d45dcfeffcedcbf', class: "xplor-btn-menu__list" }, this.options.map((option, index$1) => {
+        const menuId = 'xplor-btn-menu-list';
+        let visibleIndex = 0;
+        return (index.h(index.Host, { key: '20b1a4d54b992d5ea4b1a4cd8fbaa5699b1bc6ab' }, index.h("div", { key: 'e23725f6fa432e19b59a3c0809706df45df02def', class: "xplor-btn-menu", ref: (el) => (this.menuRef = el) }, index.h("slot", { key: 'ed385faab26b9a1bf83ed583261b0d22744a5b10', name: "activator" }, index.h("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' }, index.h("span", { key: 'b1126eb8ffc12a89b3dd1a83afd5f644226496ee' }, this.label), index.h("span", { key: 'f9053a73065841d35278612e8f9d5345b3e1daf4', class: "xplor-btn-menu__icon", "aria-hidden": "true" }, "\u25BC"))), this.show && (index.h("div", { key: '7b294e8b3702051c2adc317736d9bb3085137f27', class: "xplor-btn-menu__list", role: "menu", id: menuId, "aria-label": this.ariaLabel || this.label || 'Menu' }, this.options.map((option, index$1) => {
             const key = option.key || String(index$1);
             if (this.isHidden(key)) {
                 return null;
             }
-            return (index.h("div", { key: key, class: {
+            const disabled = this.isDisabled(key);
+            const currentVisibleIndex = visibleIndex++;
+            return (index.h("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) }, index.h("slot", { name: key }, option.label || '')));
+                    'xplor-btn-menu__item--disabled': disabled,
+                }, onClick: () => !disabled && this.handleClickOption(option) }, index.h("slot", { name: key }, option.label || '')));
         }))))));
     }
+    get el() { return index.getElement(this); }
 };
 XplorBtnMenu.style = xplorBtnMenuCss;
 
@@ -1631,6 +1791,8 @@ const XplorButton = class {
         index.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)
          */
@@ -1645,7 +1807,7 @@ const XplorButton = class {
     render() {
         const isIconOnly = !this.text && this.iconPosition !== null;
         const hasIcon = this.iconPosition !== null;
-        return (index.h(index.Host, { key: '94fed7b7f39f8aca0273d5b6da123e1ce7d87d01' }, index.h("slot", { key: 'fd6a53ce8ce00175207dff16d976379a0ab8040b' }, index.h("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 && index.h("span", { key: '82d9558a551bcc23ead90b3f42d0fcd94bd7301f', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
+        return (index.h(index.Host, { key: '193c8139b43bdbaf108bf09d220b20d746f72cd7' }, index.h("slot", { key: '61b731d8173a15bcd76fbbf16f0d1d97cbab6e34' }, index.h("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 && index.h("span", { key: '07e204d356d830444e1b26979be6f1f3926ba551', class: "button-text" }, this.text), hasIcon && this.iconPosition === 'end' && this.renderIcon()))));
     }
 };
 XplorButton.style = xplorButtonCss;
@@ -1714,10 +1876,12 @@ XplorChatWidget.style = xplorChatWidgetCss;
 
 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;
 const XplorCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.checkboxChange = index.createEvent(this, "checkboxChange");
+        this.labelId = `xplor-checkbox-label-${++checkboxIdCounter}`;
         this.initialChecked = false;
         this.initialIndeterminate = false;
         this.disabled = false;
@@ -1789,7 +1953,7 @@ const XplorCheckbox = class {
         this.indeterminate = this.initialIndeterminate;
     }
     render() {
-        return (index.h("div", { key: 'b8e50575c4ab946f2bd1949a552abf98218c3cc0', class: "checkbox-wrapper" }, index.h("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 && (index.h("svg", { key: 'de6740ce5950517792bbcacd5019af968d0d75f8', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, index.h("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 && (index.h("svg", { key: 'a54be57758d0447a8575a1d141fa592e55e8cbdc', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { key: '12350f7a694cac2f3f18327a2a3626a414167a58', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && index.h("span", { key: '8185cd091331cf4aed793dbdffcb674d478d5d3a', class: "label" }, this.label)));
+        return (index.h("div", { key: '02d3efb24ac53caa742721720ec6d212eb159a55', class: "checkbox-wrapper" }, index.h("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 && (index.h("svg", { key: 'e5bd243560546d47bfc77d753df3020fb1abb417', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, index.h("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 && (index.h("svg", { key: '069ce072241705fabb0a740271d7b6e6192e35a8', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { key: 'afc9851ff1e2ecb32cb7f0037c72844e8ae1a625', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && index.h("span", { key: '4fbc5b3bbf78fd53aa0ee5a65e1a3b1b76cbb114', class: "label", id: this.labelId }, this.label)));
     }
     static get watchers() { return {
         "initialChecked": ["watchCheckedProp"],
@@ -2014,23 +2178,32 @@ const XplorCombobox = class {
     render() {
         const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';
         const showCreateOption = this.canCreateNew();
-        return (index.h(index.Host, { key: '64bfbc829a52c048f8270ab328f73607bd94ebc1' }, index.h("div", { key: '25d9cf959f68c555befdfd5d2351cbb1964b1e46', class: {
+        const listboxId = 'combobox-listbox';
+        const labelId = 'combobox-label';
+        const activeDescendantId = this.highlightedIndex >= 0 ? `combobox-option-${this.highlightedIndex}` : undefined;
+        return (index.h(index.Host, { key: '5c3fb39153fe1a83d72b4ad3aa60d4602014916c' }, index.h("div", { key: 'ed9f80ab76d19c842e9da6a016040fdf68395332', class: {
                 'combobox': true,
                 'combobox--disabled': this.disabled,
                 'combobox--readonly': this.readonly,
                 'combobox--open': this.isOpen,
-            } }, this.label && (index.h("label", { key: '5d6afc2c5c9b3c84abca67469b87c1acb88b9517', class: "combobox__label" }, this.label)), index.h("div", { key: '5d7666d518792cc71c7062453f308771499056f9', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (index.h("div", { key: 'c16c2887b644a9c47034b70a949a7d4dcc403233', class: "combobox__chips" }, this.selectedItems.map(value => (index.h("div", { class: "combobox__chip" }, index.h("span", { class: "combobox__chip-label" }, this.getSelectedItemLabel(value)), index.h("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly }, "\u00D7")))))), index.h("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" }), index.h("div", { key: 'ba914008002039d274efd11f9790e9d13613a048', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (index.h("button", { key: '3b442197e1a6e0b94157dfb6f3a5d5e5529419dc', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), index.h("span", { key: 'cdafaeb0392798f291892342d50a0cec7234b7a1', class: "combobox__icon" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (index.h("div", { key: 'd50da0e18e34a079345c13498efbf3c61fb6be28', class: "combobox__dropdown", ref: (el) => (this.dropdownEl = el) }, this.filteredItems.map((item, index$1) => (index.h("div", { key: item.value, "data-index": index$1, class: {
-                'combobox__item': true,
-                'combobox__item--highlighted': index$1 === 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 && (index.h("div", { key: '9801a00634c1b6a1ed4bf1f97dc5c5321dc8c189', "data-index": this.filteredItems.length, class: {
+            } }, this.label && (index.h("label", { key: 'a5837bdc2fe30046a56a659a942c82c6612e5eed', class: "combobox__label", id: labelId }, this.label)), index.h("div", { key: '84022a8390a2024ef29d7dbdb5bd3b34c1da2305', class: "combobox__input-wrapper" }, this.multiple && this.selectedItems.length > 0 && (index.h("div", { key: '7df2befc1d6104e8b5472c800fe30eda0ecac550', class: "combobox__chips" }, this.selectedItems.map(value => {
+            const chipLabel = this.getSelectedItemLabel(value);
+            return (index.h("div", { class: "combobox__chip" }, index.h("span", { class: "combobox__chip-label" }, chipLabel), index.h("button", { type: "button", class: "combobox__chip-remove", onClick: () => this.removeItem(value), disabled: this.disabled || this.readonly, "aria-label": `Remove ${chipLabel}` }, "\u00D7")));
+        }))), index.h("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" }), index.h("div", { key: 'f1fa0b56edeb6c5e25eebd34a9d143a0ecca1173', class: "combobox__actions" }, this.clearable && hasValue && !this.disabled && !this.readonly && (index.h("button", { key: '5179310582b9aef4739985dbeefd35bda1bb86bb', type: "button", class: "combobox__clear", onClick: this.handleClear, "aria-label": "Clear selection" }, "\u00D7")), index.h("span", { key: '93c5431addfcaf88e51d38907304a4e289c3183d', class: "combobox__icon", "aria-hidden": "true" }, "\u25BC"))), this.isOpen && (this.filteredItems.length > 0 || showCreateOption) && (index.h("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$1) => {
+            const isSelected = this.multiple
+                ? this.selectedItems.includes(item.value)
+                : this.value === item.value;
+            return (index.h("div", { key: item.value, id: `combobox-option-${index$1}`, "data-index": index$1, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : undefined, class: {
+                    'combobox__item': true,
+                    'combobox__item--highlighted': index$1 === this.highlightedIndex,
+                    'combobox__item--selected': isSelected,
+                    'combobox__item--disabled': item.disabled,
+                }, onClick: () => this.selectItem(item) }, item.label));
+        }), showCreateOption && (index.h("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() }, index.h("span", { key: '4d563ce7576c3caa2b343bfe18dbdf2c29f0ceb2', class: "combobox__create-label" }, this.createMessage, ":"), ' ', index.h("strong", { key: 'e792de9d6e8586757271e0838b9035da7c3f47cb' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (index.h("div", { key: 'f163e417e711ec833320a8f6d687a3202741b1fe', class: "combobox__dropdown" }, index.h("div", { key: '30831097ffecac58be272ff9fe6931e2d7bd4a34', class: "combobox__no-results" }, "No results found"))))));
+            }, onClick: () => this.createNewItem() }, index.h("span", { key: 'd0ff5841add7495a79a1e9453b87706971cf8907', class: "combobox__create-label" }, this.createMessage, ":"), ' ', index.h("strong", { key: 'e1b1e94a5afce2ab3f5a714a7c593e59d9d22ff0' }, "\"", this.searchQuery, "\""))))), this.isOpen && this.filteredItems.length === 0 && !showCreateOption && (index.h("div", { key: '0a95426511036f918cd42999cd1543fc26efbff2', class: "combobox__dropdown", role: "listbox", id: listboxId }, index.h("div", { key: '551dc3ad968c049c5bbf2a9da71d45e203e15df7', class: "combobox__no-results", role: "option", "aria-disabled": "true" }, "No results found"))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -2213,18 +2386,24 @@ const XplorDatatable = class {
                 'horizontal-lines': this.horizontalLines,
                 'striped': this.striped,
                 'is-empty': this.items.length === 0,
-            }, style: hasHeight ? { height: tableHeight } : {} }, index.h("table", { key: '5f46224fe7ecc2fd3781e11d592fee5c8d80e9f2', class: { 'hover': this.hover } }, index.h("thead", { key: 'd20432aa1d6551dd324a60ed594cd5ebc2c80198' }, index.h("tr", { key: '62cc50e679f8345caba6f92a7ae117b68728425d' }, this.canSelect && (index.h("th", { key: 'dfffb0bf421458b192db6eae3538da8a752f5356', class: "select-column" }, index.h("label", { key: '17cdb037cee9b2d0cce729e0761f03b4bca14354', class: "checkbox-label" }, index.h("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 => (index.h("th", { class: {
+            }, style: hasHeight ? { height: tableHeight } : {} }, index.h("table", { key: '5f46224fe7ecc2fd3781e11d592fee5c8d80e9f2', class: { 'hover': this.hover } }, index.h("thead", { key: 'd20432aa1d6551dd324a60ed594cd5ebc2c80198' }, index.h("tr", { key: '62cc50e679f8345caba6f92a7ae117b68728425d' }, this.canSelect && (index.h("th", { key: 'dfffb0bf421458b192db6eae3538da8a752f5356', class: "select-column" }, index.h("label", { key: '17cdb037cee9b2d0cce729e0761f03b4bca14354', class: "checkbox-label" }, index.h("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 => (index.h("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) }, index.h("div", { class: "header-content" }, index.h("span", null, header.text), header.sortable !== false && this.getSortIcon(header))))))), this.loading && this.skeletonLoader ? (this.renderSkeletonLoader()) : (index.h("tbody", null, this.items.length === 0 ? (index.h("tr", { class: "empty-row" }, index.h("td", { colSpan: this.headers.length + (this.canSelect ? 1 : 0) }, index.h("div", { class: "empty-state" }, index.h("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 }, index.h("div", { class: "header-content" }, index.h("span", null, header.text), header.sortable !== false && this.getSortIcon(header))))))), this.loading && this.skeletonLoader ? (this.renderSkeletonLoader()) : (index.h("tbody", null, this.items.length === 0 ? (index.h("tr", { class: "empty-row" }, index.h("td", { colSpan: this.headers.length + (this.canSelect ? 1 : 0) }, index.h("div", { class: "empty-state" }, index.h("p", null, "No data available"))))) : (this.items.map(item => {
             const isSelected = this.internalSelected.has(item);
             return (index.h("tr", { class: {
                     selected: isSelected,
                     clickable: true,
-                }, onClick: (e) => this.handleRowClick(item, e) }, this.canSelect && (index.h("td", { class: "select-column" }, index.h("label", { class: "checkbox-label" }, index.h("input", { type: "checkbox", checked: isSelected, onChange: (e) => this.handleSelectOne(e, item) })))), this.headers.map(header => (index.h("td", { class: `align-${header.align || 'left'}` }, index.h("slot", { name: `item.${header.value}` }, item[header.value]))))));
+                }, onClick: (e) => this.handleRowClick(item, e), "aria-selected": this.canSelect ? isSelected ? 'true' : 'false' : undefined }, this.canSelect && (index.h("td", { class: "select-column" }, index.h("label", { class: "checkbox-label" }, index.h("input", { type: "checkbox", checked: isSelected, onChange: (e) => this.handleSelectOne(e, item) })))), this.headers.map(header => (index.h("td", { class: `align-${header.align || 'left'}` }, index.h("slot", { name: `item.${header.value}` }, item[header.value]))))));
         })))))), this.pagination && this.pagination.total > 0 && this.renderPagination())));
     }
     get el() { return index.getElement(this); }
@@ -2237,6 +2416,7 @@ XplorDatatable.style = xplorDatatableCss;
 
 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;
 const XplorDatePicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -2271,6 +2451,9 @@ const XplorDatePicker = class {
         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;
@@ -2436,22 +2619,22 @@ const XplorDatePicker = class {
     }
     render() {
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
-        const calendarIcon = (index.h("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" }, index.h("rect", { key: 'bfbc6e0022ea0c4d5d9ebd49636d9d8b32c2d32c', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), index.h("line", { key: '0d1fd4f951edd7bf388709e4db248d1421c67832', x1: "16", y1: "2", x2: "16", y2: "6" }), index.h("line", { key: '0995228bc198c5a09de2c9213a4713c2b3e3f054', x1: "8", y1: "2", x2: "8", y2: "6" }), index.h("line", { key: 'c938471721e6e72b25cbc7d46ddf823f5a37bfe5', x1: "3", y1: "10", x2: "21", y2: "10" })));
-        return (index.h(index.Host, { key: '5acf3baf9f4d5cece68b25339a68a05f572a1bb9' }, index.h("div", { key: 'b1c2d84e87ab4d99a1af317397c6b442fbb49f93', class: {
+        const calendarIcon = (index.h("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" }, index.h("rect", { key: '1f5d918d65a44a7b8f9dec0609ef125c96b1ccdf', x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }), index.h("line", { key: 'd2a5ccfbe2e4afe8ed5d9277c49b09169c6ae651', x1: "16", y1: "2", x2: "16", y2: "6" }), index.h("line", { key: '8d114a93b8f1c4d8fc65360f34afaecc14148328', x1: "8", y1: "2", x2: "8", y2: "6" }), index.h("line", { key: '40b3ab407c3872d6eda481a64f8210b505e202cc', x1: "3", y1: "10", x2: "21", y2: "10" })));
+        return (index.h(index.Host, { key: '7c04e985b0a900863965311e69a336d859852e66' }, index.h("div", { key: '15b17203d293c694130493bf45b8bd6d38c7bd36', class: {
                 'date-picker': true,
                 'date-picker--disabled': this.disabled,
                 'date-picker--error': !!this.error,
                 'date-picker--open': this.isOpen,
-            } }, this.label && (index.h("label", { key: '94d43b8d44f60806824f4ef72fe4cb0113441351', class: "date-picker__label" }, this.label, this.required && index.h("span", { key: '2ae8a33b2a46d7e81a990368390f52c167879013', class: "date-picker__required" }, "*"))), this.display === 'text' ? (index.h("div", { class: "date-picker__text-display", onClick: this.handleTextClick }, index.h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (index.h("div", { class: "date-picker__field" }, index.h("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 } }), index.h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (index.h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), index.h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (index.h("div", { key: 'eff419a0def4d85e0df8e3182132eeeb57454cef', class: "date-picker__details" }, this.error && index.h("div", { key: '554878b0d415e16dd8715f58db0da94259a2e3c8', class: "date-picker__error-message" }, this.error))), this.isOpen && (index.h("div", { key: '75ec84dd8849b3007cb4f99b73098e52b458a476', class: {
+            } }, this.label && (index.h("label", { key: 'e9e03dde337f9c2259611f1f1f4748bb92d86cfb', class: "date-picker__label", id: this.labelId, htmlFor: this.inputId }, this.label, this.required && index.h("span", { key: '4e68d0071f5224c9fc30df8864898a4906f6efba', class: "date-picker__required" }, "*"))), this.display === 'text' ? (index.h("div", { class: "date-picker__text-display", onClick: this.handleTextClick, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "dialog", role: "button", tabIndex: 0 }, index.h("span", { class: "date-picker__text-value" }, this.value ? this.formatDateForDisplay(this.value) : this.placeholder), calendarIcon)) : (index.h("div", { class: "date-picker__field" }, index.h("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 }), index.h("div", { class: "date-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (index.h("button", { type: "button", class: "date-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), index.h("button", { type: "button", class: "date-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open calendar" }, calendarIcon)))), showDetails && (index.h("div", { key: '4e9fd12626bf5436604e28a236a304d60c452b50', class: "date-picker__details" }, this.error && index.h("div", { key: 'a40425ac84ee81671f4289f4323db9a9a472d3c7', class: "date-picker__error-message", id: this.errorId }, this.error))), this.isOpen && (index.h("div", { key: '86c55873b678dcfe74c09475cbde7657f1983799', class: {
                 'date-picker__dropdown': true,
                 'date-picker__dropdown--top': this.dropdownPosition === 'top',
-            } }, index.h("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 }))))));
+            } }, index.h("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 index.getElement(this); }
 };
 XplorDatePicker.style = xplorDatePickerCss;
 
-const xplorDragAndDropInputCss = "@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-drag-and-drop-input {\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-drag-and-drop-input {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input {\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-drag-and-drop-input {\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-drag-and-drop-input {\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-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n  display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n  position: relative;\n  padding-bottom: 2.5rem;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n  display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n  background-color: #f5f5f5;\n  border-radius: 8px;\n  border: 2px dashed var(--color-secondary);\n  min-height: 160px;\n  padding: 1rem 1.5rem 2rem;\n  text-align: center;\n  transition: all 0.2s ease;\n  cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n  border-color: var(--color-secondary);\n  background-color: #eeeeee;\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n  border: 2px dashed var(--color-secondary);\n  background-color: #eeeeee;\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0 0;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n  color: var(--color-secondary);\n  width: 40px;\n  height: 40px;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0;\n  margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n  position: absolute;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: #616161;\n  margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  background-color: #ffffff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  background-color: var(--color-secondary-50, #f3e5f5);\n  color: var(--color-secondary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  color: #000000;\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: var(--color-secondary);\n  margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  height: 6px;\n  background-color: #eeeeee;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n  height: 100%;\n  background-color: var(--color-secondary);\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: #757575;\n  flex-shrink: 0;\n  min-width: 32px;\n  text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: none;\n  background-color: #eeeeee;\n  color: #757575;\n  cursor: pointer;\n  padding: 0;\n  transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n  background-color: #e0e0e0;\n  color: #424242;\n}\n\n@media (max-width: 768px) {\n  .drag-drop-card.sc-xplor-drag-and-drop-input {\n    min-height: 140px;\n  }\n  .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n    font-size: 16px;\n    line-height: 22px;\n  }\n  .drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n    font-size: 13px;\n    line-height: 18px;\n  }\n}";
+const xplorDragAndDropInputCss = "@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-drag-and-drop-input {\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-drag-and-drop-input {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input {\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-drag-and-drop-input {\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-drag-and-drop-input {\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-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\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-drag-and-drop-input:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n  margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n  margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n  margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n  margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n  margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n  margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n  margin-left: 5rem;\n  margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n  margin-top: 5rem;\n  margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n  margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n  margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n  margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n  margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n  margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n  margin-left: 3.5rem;\n  margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n  margin-top: 3.5rem;\n  margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n  margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n  margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n  margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n  margin-left: 3rem;\n  margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n  margin-top: 3rem;\n  margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n  margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n  margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n  margin-left: 2.5rem;\n  margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n  margin-top: 2.5rem;\n  margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n  margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n  margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n  margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n  margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n  margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n  margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n  margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n  margin-left: 1.25rem;\n  margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n  margin-top: 1.25rem;\n  margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n  margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n  margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n  margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n  margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n  margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n  margin-left: 0.75rem;\n  margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n  margin-top: 0.75rem;\n  margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n  margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n  margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n  margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n  margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n  margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n  padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n  padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n  padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n  padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n  padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n  padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n  padding-left: 5rem;\n  padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n  padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n  padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n  padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n  padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n  padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n  padding-left: 3.5rem;\n  padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n  padding-top: 3.5rem;\n  padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n  padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n  padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n  padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n  padding-left: 3rem;\n  padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n  padding-top: 3rem;\n  padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n  padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n  padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n  padding-left: 2.5rem;\n  padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n  padding-top: 2.5rem;\n  padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n  padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n  padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n  padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n  padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n  padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n  padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n  padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n  padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n  padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n  padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n  padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n  padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n  padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n  padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n  padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n  padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n  padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n  display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n  position: relative;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n  display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n  background-color: #f5f5f5;\n  border-radius: 8px;\n  border: 2px dashed var(--color-secondary);\n  min-height: 160px;\n  padding: 1.5rem;\n  text-align: center;\n  transition: all 0.2s ease;\n  cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n  border-color: var(--color-secondary);\n  background-color: #eeeeee;\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n  border: 2px dashed var(--color-secondary);\n  background-color: #eeeeee;\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n  color: var(--color-secondary);\n  width: 40px;\n  height: 40px;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 18px;\n  font-weight: 700;\n  line-height: 24px;\n  letter-spacing: 0;\n  margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n  color: #000000;\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n  margin-top: 0.25rem;\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n  margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  color: #616161;\n  margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n  background-color: #ffffff;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n  background-color: var(--color-secondary-50, #f3e5f5);\n  color: var(--color-secondary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n  color: #000000;\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: var(--color-secondary);\n  margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n  flex: 1;\n  height: 6px;\n  background-color: #eeeeee;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n  height: 100%;\n  background-color: var(--color-secondary);\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n  font-family: Inter, sans-serif;\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 18px;\n  color: #757575;\n  flex-shrink: 0;\n  min-width: 32px;\n  text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  border: none;\n  background-color: #eeeeee;\n  color: #757575;\n  cursor: pointer;\n  padding: 0;\n  transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n  background-color: #e0e0e0;\n  color: #424242;\n}\n\n@media (max-width: 768px) {\n  .drag-drop-card.sc-xplor-drag-and-drop-input {\n    min-height: 140px;\n  }\n  .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n    font-size: 16px;\n    line-height: 22px;\n  }\n  .drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n    font-size: 13px;\n    line-height: 18px;\n  }\n}";
 
 const DEFAULT_ACCEPT_ALL$1 = '*' + '/' + '*';
 const XplorDragAndDropInput = class {
@@ -2574,13 +2757,15 @@ const XplorDragAndDropInput = class {
         this.fileClear.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '1996cf8e0d65afed803bb07a2f7a54adb5bbfaa5' }, index.h("div", { key: '6fcf52a709e3d6b7e64583f201260e1841076cef', class: "drag-drop-zone" }, index.h("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 (index.h(index.Host, { key: '4ca1a26f1c043761a3bcafebf3ccdf57ec17467b' }, index.h("div", { key: '60c9f55d838820e2d9c087fbb652559944ecfc36', class: "drag-drop-zone" }, index.h("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 }, index.h("div", { key: 'eec73d07cce31d43151a6af27a584f764cf104ec', class: "drag-drop-card__content" }, index.h("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" }, index.h("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" }), index.h("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" })), index.h("h3", { key: 'e17238c5e6bdb38ef75c5513c88154696a046273', class: "drag-drop-card__title" }, this.label), index.h("p", { key: 'b6aa94f6624a1fb09a56ca26dd31981aa56c3e8a', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), index.h("p", { key: '0a6cb23bff2f8512e961cf3fae65463aec2f829e', class: "drag-drop-card__divider" }, "or"))), index.h("div", { key: '8ad03f8da13062f5915005c80f88d41d4adc7e83', class: "drag-drop-card__action" }, index.h("xplor-button", { key: '37dd6e0f4d61a6e4aa3e0648227b5c06b101d7f3', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog }))), this.currentFile && (index.h("div", { key: '7ab8ffd9e6fa79c3adb83127c2263dbf1c8356af', class: "file-info" }, this.showProgress() && (index.h("p", { key: '34e1f54d42c866012faad5462935400ad64fd69a', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), index.h("div", { key: '891749a5bc2d928226cdcdf855b992a94c46ec0e', class: "file-info__card" }, index.h("div", { key: 'df6230a7fed1e37536756d0d2ca79a7fa0f3f3b0', class: "file-info__icon" }, index.h("svg", { key: '6f740a420e16cf0b8e1a008ac1e69a5356db1789', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, index.h("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" }))), index.h("div", { key: 'cf0dc9b9592721a4e488fb852515273bdb5f75ad', class: "file-info__details" }, index.h("p", { key: '082e3dc60b75a1b889c3390c140e32e232b57bff', class: "file-info__name" }, this.currentFile.name), index.h("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 }, index.h("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, index.h("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" }, index.h("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" }), index.h("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" })), index.h("h3", { key: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL$1 && (index.h("p", { key: 'cd9a640967ce9cd8c959000771d78a57fe1df4ea', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())), index.h("div", { key: 'c9a3987e06aceba90a379f6f5264998c218497a1', class: "drag-drop-card__action" }, index.h("xplor-button", { key: 'a26dd92027f90fb052ce3fa5cc456b18b5732b41', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (index.h("div", { key: '75258825a2415d4f78dc05caa4931c2b65675c10', class: "file-info", "aria-live": "polite" }, this.showProgress() && (index.h("p", { key: '643fca5089d411ac0c2ac7cb2d8548450e18df49', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), index.h("div", { key: '6829f00a6550dee83fc60496c6534272443c2974', class: "file-info__card" }, index.h("div", { key: 'cb234a2213fc3ae39993b11cb3d99878d643878f', class: "file-info__icon", "aria-hidden": "true" }, index.h("svg", { key: 'f657669caa7dd95b095b419908f94cf16e8530d7', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: 'ef502814c77090e682f8b7e3e2d41dc3434a14fa', 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" }))), index.h("div", { key: '6bcc15939b14fbcfa71408e733489933e9322efa', class: "file-info__details" }, index.h("p", { key: '9840cd50a70cfec9ceb8588116677ed0da2d5b14', class: "file-info__name" }, this.currentFile.name), index.h("p", { key: 'f8aaf5f729278070ebd1d3a8137460dab67a130a', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
             ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
-            : ''), this.showProgress() && (index.h("div", { key: 'ff641e3fb53d0089c9392f1c77e7943783fa4745', class: "file-info__progress-row" }, index.h("div", { key: '57bade7b09cd9700d6cdfe123b79b1f59d049b3e', class: "file-info__progress-bar" }, index.h("div", { key: '8119c5937118adab06ae53257374964ced4b8446', class: "file-info__progress-fill", style: { width: `${Math.min(Math.max(this.progress, 0), 100)}%` } })), index.h("span", { key: 'dca1ccade071119e10b724a8d0047ec966c78ed4', class: "file-info__progress-text" }, Math.round(this.progress), "%")))), index.h("button", { key: 'e9142fab6e8f708cdd6063c6ff3659bd8e6f77e6', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": "Remove file" }, index.h("svg", { key: 'bc48ad8ce10fbed57c5bcbed53d8f2931461b90e', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, index.h("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" })))))), index.h("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() && (index.h("div", { key: 'e30ab7e1514f72034cac41f748df00cd19423d2d', class: "file-info__progress-row" }, index.h("div", { key: '4ef4e335b0154adc44d940784ac0f01358fa4fd0', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, index.h("div", { key: '3328873cc9d457401ccfe46c3cee8c7c7d5280ab', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), index.h("span", { key: 'f3fab0a39db233a16bb1fefdbb15c2174808543d', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), index.h("button", { key: '70ff008be7088ff5744130ffecab2694eceff8ff', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, index.h("svg", { key: '0c6957c250bde4af18641704ba8b248ff8b815b4', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, index.h("path", { key: '0131e03966350788114f5ac999488c19d0186f90', 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" })))))), index.h("input", { key: 'a40511c99ac1292d5eb5a37be23a235b5103ab65', 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 })));
     }
 };
 XplorDragAndDropInput.style = xplorDragAndDropInputCss;
@@ -2592,7 +2777,7 @@ const XplorDropdown = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'bfd5bc76c18f4c7882ec47389978338eec81b1d1' }, index.h("select", { key: '54310c80fdda944ca6d9cc8faaf643e79d4a5f32', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (index.h("option", { value: option, selected: this.selected === option }, option))))));
+        return (index.h(index.Host, { key: '51c3f9372a79efeeffc662149ada3cd50c76fcbf' }, index.h("select", { key: '5bf6285178fd454f76089f62ad17d49654e88bf8', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (index.h("option", { value: option, selected: this.selected === option }, option))))));
     }
 };
 XplorDropdown.style = xplorDropdownCss;
@@ -2628,16 +2813,16 @@ const XplorExpansionPanel = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f2b19e6a1ad6315341e0840e2c000a1123caa7e0' }, index.h("div", { key: '1cb9ca368efb2f9e16c64c3987546f3d16981a2b', class: {
+        return (index.h(index.Host, { key: '3db1f2fc99643b6c032e49d12c8eedb06ae2ceb9' }, index.h("div", { key: 'ba08fc1332346fd14e2614184a2da5f99c90e217', class: {
                 'expansion-panel': true,
                 'expansion-panel--open': this.open,
                 'expansion-panel--disabled': this.disabled,
-            } }, index.h("button", { key: '4970230eb38600f662441cf741b1266af1c94221', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', type: "button" }, index.h("div", { key: '5e3330870f44e2f0d0e9546cc3921f999c585ad2', class: "expansion-panel__header-content" }, index.h("slot", { key: 'f8cf1d3dcc8201c311adb40544adc59dc10643b2', name: "header" })), index.h("span", { key: 'bed27404d65c83a0aed80b6f63847a3b221756c4', class: {
+            } }, index.h("button", { key: 'b370c00ac9b58af67594679a7c28915d7ecaf622', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.panelId}-content`, type: "button" }, index.h("div", { key: '7a2a65a0189cb9fbdbca615091f6e13e3d94b748', class: "expansion-panel__header-content" }, index.h("slot", { key: 'a20162d047d41cf219fb412973a92c3f16844640', name: "header" })), index.h("span", { key: '4dd148cb2d4461285fce95de5bf8cbb3df36e7b7', class: {
                 'expansion-panel__icon': true,
                 'expansion-panel__icon--open': this.open,
-            } }, "\u25BC")), index.h("div", { key: '2c39930ed945844bde37acd8eb76cc5d321fb9e1', class: "expansion-panel__content", style: {
+            } }, "\u25BC")), index.h("div", { key: '9d8a260d927387f5dd1e7e3d429f86d31f2689bf', class: "expansion-panel__content", id: `${this.panelId}-content`, role: "region", "aria-labelledby": this.panelId, style: {
                 maxHeight: this.open ? `${this.contentHeight}px` : '0',
-            } }, index.h("div", { key: 'db622a60396115228e0a3929f1a0765b7a0bf87f', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, index.h("slot", { key: 'd88edfbce0ab807cdb3d21230e1e97caf6183cce' }))))));
+            } }, index.h("div", { key: '0ac08b6ca30a0fabc7e44f2c8737ee29fccec08a', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, index.h("slot", { key: '94753fe13b1378a95cac9cb4c940aedbc127c1b0' }))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -2680,7 +2865,7 @@ const XplorExpansionPanels = class {
         this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
     }
     render() {
-        return (index.h(index.Host, { key: 'c55c8eef4f6f134c83f2f8dffcb434401596a095' }, index.h("div", { key: '6611efdac4749c89180d34af7893577e09356ed1', class: "expansion-panels" }, index.h("slot", { key: 'ef8283e142cbd8fd6535c85a939455d99bdcc33e' }))));
+        return (index.h(index.Host, { key: '70452b8f734ded39c59a984b6a21e010d6512905' }, index.h("div", { key: '60ba67dc176b9cc141dd12d56e9f3e977eccd859', class: "expansion-panels", "aria-label": "Accordion" }, index.h("slot", { key: '99b9f4d51d54b8145ea0964638eecf687c2c8432' }))));
     }
 };
 XplorExpansionPanels.style = xplorExpansionPanelsCss;
@@ -2826,11 +3011,11 @@ const XplorFileUpload = class {
         return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
     }
     render() {
-        return (index.h(index.Host, { key: '9c3ad81ff741fe6324a5e8af562c740965024df1' }, index.h("div", { key: 'b0b9bb545ce5a4e74c38bc6b49f7681f6e10dd89', class: "file-upload" }, index.h("div", { key: 'd1f1198c0d47009ffa85cc1188d292029b979111', class: {
+        return (index.h(index.Host, { key: '9c3ad81ff741fe6324a5e8af562c740965024df1' }, index.h("div", { key: 'b0b9bb545ce5a4e74c38bc6b49f7681f6e10dd89', class: "file-upload" }, index.h("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 }, index.h("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" }), index.h("div", { key: '2d1e0ff6e55dd56df7ff04829128dd74eb05d350', class: "file-upload__content" }, index.h("svg", { key: 'aab4f33389ed3cddc4d6a30300d384209058f64e', class: "file-upload__icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '51da727eaa0d9394184b54c845ae70c0de2c9c5c', d: "M12 15V3M12 3L8 7M12 3L16 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("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" })), index.h("p", { key: '530f416409a178f0dc9de208476085452e66156a', class: "file-upload__text" }, "Drag & drop files here or", ' ', index.h("button", { key: '9465171b3ee487fbf0e7aa75da09709eb061a32e', type: "button", class: "file-upload__button", onClick: this.handleButtonClick, disabled: this.disabled }, this.label)), index.h("p", { key: 'b94b0c91a37fc218362a25ffe46d77929a6752f5', class: "file-upload__hint" }, "Max size: ", this.formatFileSize(this.maxSize), this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`))), this.error && (index.h("div", { key: '46a708db58e94110d41a8b86571dd29e58e76ae2', class: "file-upload__error", role: "alert" }, this.error)), this.files.length > 0 && (index.h("div", { key: '95d2aadf7587f759ecd3b55a84b7d6a7ec8c61ac', class: "file-upload__files" }, this.files.map((file) => (index.h("div", { key: file.id, class: "file-upload__file" }, file.dataUrl && (index.h("img", { src: file.dataUrl, alt: file.name, class: "file-upload__preview" })), index.h("div", { class: "file-upload__file-info" }, index.h("span", { class: "file-upload__file-name", title: file.name }, file.name), index.h("span", { class: "file-upload__file-size" }, this.formatFileSize(file.size))), index.h("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)}` }, index.h("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" }), index.h("div", { key: '33e9ca40b7db3df954ea7221104a5191807ff05a', class: "file-upload__content" }, index.h("svg", { key: '84c718d713b36dd0b227a234c9b05f7a54bfeb02', class: "file-upload__icon", width: "48", height: "48", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '21c50cf95b559252a2604352a6d14b0b051d5480', d: "M12 15V3M12 3L8 7M12 3L16 7", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("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" })), index.h("p", { key: '854efe384b8f181d5200d959db6633a6492c28f1', class: "file-upload__text" }, "Drag & drop files here or", ' ', index.h("button", { key: 'e83a3a2f6e6caee30173579c6397edacd6e1c8a8', type: "button", class: "file-upload__button", onClick: this.handleButtonClick, disabled: this.disabled }, this.label)), index.h("p", { key: 'a667e6665ce619f854c247626454efad11131568', class: "file-upload__hint" }, "Max size: ", this.formatFileSize(this.maxSize), this.accepts !== '*/*' && ` • Accepts: ${this.accepts}`))), this.error && (index.h("div", { key: '872a3eceb9eebbd35a06c0d841cf486e13bd48ea', class: "file-upload__error", role: "alert" }, this.error)), this.files.length > 0 && (index.h("div", { key: '15cc50322682fd1d555d313d089f18f92bfbb77d', class: "file-upload__files" }, this.files.map((file) => (index.h("div", { key: file.id, class: "file-upload__file" }, file.dataUrl && (index.h("img", { src: file.dataUrl, alt: file.name, class: "file-upload__preview" })), index.h("div", { class: "file-upload__file-info" }, index.h("span", { class: "file-upload__file-name", title: file.name }, file.name), index.h("span", { class: "file-upload__file-size" }, this.formatFileSize(file.size))), index.h("button", { type: "button", class: "file-upload__remove", onClick: () => this.handleRemoveFile(file), "aria-label": `Remove ${file.name}` }, "\u00D7")))))))));
     }
 };
 XplorFileUpload.style = xplorFileUploadCss;
@@ -2873,9 +3058,9 @@ const XplorInlineCheckbox = class {
             'xplor-inline-checkbox--disabled': this.disabled,
             'xplor-inline-checkbox--checked': this.checked,
         };
-        return (index.h(index.Host, { key: '2273357108dc65e665f9fdd9dcece4d4ed8edac3' }, index.h("label", { key: '630091008ad489a1cc4c0e71ef1ae802ef4b0c89', class: containerClasses }, index.h("input", { key: '0c823ba53cb0d25d4823e42bcb037efaeddff405', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
+        return (index.h(index.Host, { key: '34aa08258f2a12280c9709f94883af3e0423175f' }, index.h("label", { key: 'fd6fe47c8e1da57aba09a4ce7cbc95f7e1947dfe', class: containerClasses }, index.h("input", { key: '17a4c41cb304ae9826476d22ffa18d9bf5810ed5', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
                 accentColor: this.color,
-            } }), this.label && index.h("span", { key: '9e1bbb0bd85cc7cfe7d760501507d68dcc3bf3c2', class: "xplor-inline-checkbox__label" }, this.label), index.h("slot", { key: '7a95d78de68af2887149bd6eb9f08330b9c57d6b' }))));
+            } }), this.label && index.h("span", { key: '31afabdf1498e609f06530f1db28a05b2a0ba00b', class: "xplor-inline-checkbox__label" }, this.label), index.h("slot", { key: '2a32c92c16906869dd82272590dd83ebc1905e71' }))));
     }
 };
 XplorInlineCheckbox.style = xplorInlineCheckboxCss;
@@ -2911,6 +3096,7 @@ const XplorInlineDatePicker = class {
          * 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'];
@@ -3005,7 +3191,7 @@ const XplorInlineDatePicker = class {
                         '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;
         };
@@ -3025,12 +3211,75 @@ const XplorInlineDatePicker = class {
         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 (index.h(index.Host, { key: '0a63c50c59ddc6ca12df01ba421b351ba7fa163a' }, index.h("div", { key: '961a428446372ebab3e7ca008100742d5452a137', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, index.h("div", { key: '5ff94e618f8f292e13dcc3898c6b6be40536d64e', class: "xplor-inline-date-picker__sidebar" }, index.h("div", { key: '1e96cb361882d9e58d9b720beff37d211d1552aa', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), index.h("div", { key: 'ce3bc570cc6ff6b4063cce28ada4da65cc97b3bb', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), index.h("div", { key: 'bcf8017b90193d0eed5b10d72454f9dc1051756e', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), index.h("div", { key: '7f36d03964d552ee8201493c920c0ec2d1119f89', class: "xplor-inline-date-picker__calendar" }, index.h("div", { key: '05eca5f4d4b0a0bc7ef237185a3d31ca7202b2ff', class: "xplor-inline-date-picker__header" }, index.h("button", { key: '91db152c009b87605a9fb21949d8cad5ef40a230', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), index.h("div", { key: '86299244563f9338281b5f107b3fef04053ec164', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), index.h("button", { key: 'f6a9e7caa26114c06e0b10e1e5fddebe9388efcb', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), index.h("div", { key: 'f8de6b4d65c8ad58beeb97455c71d75c55668c6d', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (index.h("div", { class: "xplor-inline-date-picker__weekday" }, day)))), index.h("div", { key: '267c3f7076c41ad34873501151b567fdda572dcd', class: "xplor-inline-date-picker__days" }, this.renderCalendarDays())))));
+        return (index.h(index.Host, { key: '031460c16f831f29173bbac372ee4de5b0473828' }, index.h("div", { key: 'b0d890fec94358a882d10a30b229196ee8fc4ea5', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, index.h("div", { key: '2d5496299d0091d1960fb8507726f15828d68313', class: "xplor-inline-date-picker__sidebar" }, index.h("div", { key: 'b1645b35975a52e916eb6d18ccda16c3b90519c3', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), index.h("div", { key: 'b812bbbd4686d06d6c4c602846c870777847c9ca', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), index.h("div", { key: 'd78744d1b353ddafa302693ac105837f33be736e', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), index.h("div", { key: '1e0519719bff8801a3f6a7d23c8140b4017656d8', class: "xplor-inline-date-picker__calendar" }, index.h("div", { key: '1f13bb35c2bbbc921f6f4d0a4dde12e47d010c81', class: "xplor-inline-date-picker__header" }, index.h("button", { key: 'dd726c543dc74ed85bb3dd128b45e5a74ffde1f6', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), index.h("div", { key: 'ffb6cf26f1b1a0ef2c75ccb827f38110a6cfbdbe', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), index.h("button", { key: '69b0c08aae5b24b2814c37be40de942ed2ff8abb', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), index.h("div", { key: '25ef6b996fdccc121b44f6dafe018aef316ab09d', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (index.h("div", { class: "xplor-inline-date-picker__weekday" }, day)))), index.h("div", { key: '6d092079f76ab7c06fcdb07c8d43d0cd9ace8faa', class: "xplor-inline-date-picker__days", role: "grid" }, this.renderCalendarDays())))));
     }
+    get el() { return index.getElement(this); }
 };
 XplorInlineDatePicker.style = xplorInlineDatePickerCss;
 
@@ -3068,18 +3317,20 @@ const XplorInlineSwitch = class {
             'xplor-inline-switch--disabled': this.disabled,
             'xplor-inline-switch--checked': this.checked,
         };
-        return (index.h(index.Host, { key: 'd881ff0653ee51f1ddc8c146ccc6f70f3c128e3b' }, index.h("label", { key: '2ffe4cdf99f925c5973657769f056cffb8bea283', class: containerClasses, style: { '--switch-color': this.color } }, index.h("input", { key: '60fb990d1dce371c3579da91bd0d9fd4dd50f82b', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), index.h("span", { key: '28e9f5444653009f4b56d510c2d73ba710e93115', class: "xplor-inline-switch__track" }, index.h("span", { key: 'f002449aa843c0b268dbc38d94dbf44a0e68d0de', class: "xplor-inline-switch__thumb" })), this.label && index.h("span", { key: 'f460d55e6cbaab94806c8025a1d17cd4d4b6790b', class: "xplor-inline-switch__label" }, this.label), index.h("slot", { key: '59e3248368aab93dd48287f3facdbe9221a39f5b' }))));
+        return (index.h(index.Host, { key: 'ac7b6e824b55bd184f81fd5a36174ee765bd649d' }, index.h("label", { key: 'e4042ad1236aba72343231013d9d0784593dcf26', class: containerClasses, style: { '--switch-color': this.color } }, index.h("input", { key: '9e5b96a0367a55785f0c87f74cf9ba0850e227c6', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), index.h("span", { key: 'c35a3721624cfddd2448d9420a5e8c85a8a51108', class: "xplor-inline-switch__track" }, index.h("span", { key: '6b9026daf7d5641378d8243ed7b1b7e424db8171', class: "xplor-inline-switch__thumb" })), this.label && index.h("span", { key: '46423101cb78df16e84b5b79baa9a2a8c88bc91b', class: "xplor-inline-switch__label" }, this.label), index.h("slot", { key: '0841e31a5d0a9b27c3e8eeafff0218e92a4bf24a' }))));
     }
 };
 XplorInlineSwitch.style = xplorInlineSwitchCss;
 
 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;
 const XplorInputFile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.attach = index.createEvent(this, "attach");
         this.xplorClear = index.createEvent(this, "xplorClear");
+        this.inputId = `xplor-input-file-${++inputFileIdCounter}`;
         /**
          * Input label
          */
@@ -3154,17 +3405,19 @@ const XplorInputFile = class {
         };
         const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
         const additionalCount = this.selectedFiles.length - this.maxChips;
-        return (index.h(index.Host, { key: 'b8022fdd28a3e0087bc2a044856c3013d1f32245' }, index.h("div", { key: '11c0494c76f5aed1fe03cff7b706c7bc809becda', class: containerClasses }, this.label && (index.h("label", { key: 'fca295123c0766e9ff4b1ae28abfc2662a345992', class: "xplor-input-file__label" }, this.label)), index.h("div", { key: 'a63356f0857b420f1f707caa2e5e6ac587616949', class: "xplor-input-file__field" }, index.h("span", { key: 'f2b6f89f35d36a71a4c2bae38175cd16f897102d', class: "xplor-input-file__icon" }, this.prependInnerIcon), index.h("div", { key: '0b6b59139696a1a1e9aee3f10b7069743f4d1934', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (index.h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (index.h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (index.h("div", { class: "xplor-input-file__chip", key: file.name }, index.h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (index.h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (index.h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (index.h("button", { key: 'b0f312f157de2caf74c8c630d7c109fb6af4d7c0', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), index.h("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 && (index.h("div", { key: '3db41f5660476718819e7315edbc59a9fa834178', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
+        return (index.h(index.Host, { key: '855205ba51f297ec42d8e0a6e6a8632575f14266' }, index.h("div", { key: 'b3f5e11bae52b44c70d44964128e7a921002dbb1', class: containerClasses }, this.label && (index.h("label", { key: '8ed4472b4d74227d3f383733d70fdce13724b3c2', class: "xplor-input-file__label", htmlFor: this.inputId }, this.label)), index.h("div", { key: '3796c38f41eb6cabb61a71341e2172d6afe588da', class: "xplor-input-file__field" }, index.h("span", { key: '5c252125213d25d051549308974241fa1764e77c', class: "xplor-input-file__icon" }, this.prependInnerIcon), index.h("div", { key: 'eb7e79be04bd2c7d6c5a38669486fafa79da2886', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (index.h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (index.h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (index.h("div", { class: "xplor-input-file__chip", key: file.name }, index.h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (index.h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (index.h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (index.h("button", { key: '3de68e44d93f65880e9db5d94a285bc36f5a5b27', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), index.h("input", { key: '2744056445124a7c857f4b56271cd343e50ed9f2', 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 && (index.h("div", { key: '3bd470d17e927b0fbe7776ad67513bb52d91109e', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
     }
 };
 XplorInputFile.style = xplorInputFileCss;
 
 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;
 const XplorInputSearch = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.search = index.createEvent(this, "search");
+        this.inputId = `xplor-input-search-${++inputSearchIdCounter}`;
         /**
          * Search value
          */
@@ -3210,9 +3463,9 @@ const XplorInputSearch = class {
             'xplor-input-search--focused': this.isFocused,
             'xplor-input-search--disabled': this.disabled,
         };
-        return (index.h(index.Host, { key: '5b56e2a7105a8046e9d8a0260e4ccc3e3f74f2d1' }, index.h("div", { key: '1056cd0367b2a02a9ca0b6327ee64fe451aa822f', class: containerClasses }, index.h("div", { key: 'b52566008beabead371696c73213c0c44d71caad', class: "xplor-input-search__field" }, index.h("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 (index.h(index.Host, { key: '159334f666a4d38aaeeba61788fc73ae85511f1c' }, index.h("div", { key: 'de6a7c4d9097bdabc955bd2f85ce9c6f9f35aa19', class: containerClasses }, index.h("div", { key: 'b14ca74cb368ef4efa67330f5b5fc76b54828c33', class: "xplor-input-search__field" }, index.h("input", { key: '1f8e4d2842d4f45fa3ca7e2b3de7b697a75abd02', 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,
-            } }), index.h("slot", { key: '8a1ff9183e52e0b1907a2d592cf26ce92b8c3eb2', name: "append-inner" }, index.h("button", { key: '9680a805a44074e1ca6544fc6cc1b6dc56b3cd3c', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, index.h("svg", { key: 'b5889fd0aed963aa7f31a11fa705597caaa3d000', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, index.h("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" }), index.h("slot", { key: '3b914900d3b529b142ec31d8835ebfa83497b877', name: "append-inner" }, index.h("button", { key: '83ffab122b79d64e5fadb6ff0abf508847ecb721', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button", "aria-label": "Search" }, index.h("svg", { key: 'b0d8e393c391b3ca214bb1cd8b1673eb3b634a88', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, index.h("path", { key: '78d38f7b9e578cf8519edcc7eea19ffa294aba74', 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" }))))))));
     }
 };
 XplorInputSearch.style = xplorInputSearchCss;
@@ -3278,6 +3531,7 @@ const XplorInputSelect = class {
         this.isOpen = false;
         this.isFocused = false;
         this.menuPosition = null;
+        this.highlightedIndex = -1;
         this.updateMenuPosition = () => {
             if (this.fieldRef) {
                 const rect = this.fieldRef.getBoundingClientRect();
@@ -3297,8 +3551,12 @@ const XplorInputSelect = class {
             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) => {
@@ -3343,6 +3601,82 @@ const XplorInputSelect = class {
     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,
@@ -3352,16 +3686,33 @@ const XplorInputSelect = class {
             'xplor-input-select--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (index.h(index.Host, { key: 'e5865a9d55129458a5357cf05f15115f1007019b' }, index.h("div", { key: '66d54f5d1bb7514301427de3ad5bbf7746309cec', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (index.h("label", { key: 'dfa166182add3a83872a05e4a20b77f654921231', class: "xplor-input-select__label" }, this.label, this.required && index.h("span", { key: '0da6997f30e1861b35e67e80974fce115560cc9b', class: "xplor-input-select__required" }, "*"))), index.h("div", { key: 'f828546abc6121bcabcdbc905a0e43aa012bb5a9', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el) }, index.h("div", { key: '13692cc57a5c3c1da3915ca80f8324d091732ebb', class: "xplor-input-select__value" }, this.getDisplayValue()), index.h("span", { key: '0a372cf751bc459d957130c50fb4387405e9f21f', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (index.h("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 (index.h(index.Host, { key: '4c7693dfd1a0a4ac74ed4f4ff5024d4375acd3a8' }, index.h("div", { key: 'bcd180aa7fbccfae34ce29b1c9bbe6329bf87476', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (index.h("label", { key: '85c20aecaf25a7fc260c79a15e4d4bb30804213d', class: "xplor-input-select__label", id: labelId }, this.label, this.required && index.h("span", { key: '82c8dbcb5d7e77c42e0a6e54b69cbb514563ac2b', class: "xplor-input-select__required" }, "*"))), index.h("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 }, index.h("div", { key: '1125703089a34186cbbfaba5e51d6ea50c5f4239', class: "xplor-input-select__value" }, this.getDisplayValue()), index.h("span", { key: 'e33ab0424fddc90d1f48ef2b285e70fd3eeaff8a', class: "xplor-input-select__arrow", "aria-hidden": "true" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (index.h("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 ? (index.h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (index.h("div", { key: option.value, class: {
-                'xplor-input-select__option': true,
-                'xplor-input-select__option--selected': this.isSelected(option),
-            }, onClick: () => this.handleOptionClick(option) }, this.multiple && (index.h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), index.h("div", { class: "xplor-input-select__option-content" }, index.h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (index.h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (index.h("div", { key: '240b60564cf80cc66b879bb4431885270c64db5b', class: "xplor-input-select__details" }, this.error && index.h("div", { key: 'bbb2a2e796650c153e901aa87188a386c2f5b9f7', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && index.h("div", { key: 'a36ccb1626e1b5a9d19f2ee106213fd943177aa8', class: "xplor-input-select__helper-text" }, this.helperText))))));
+            } }, this.options.length === 0 ? (index.h("div", { class: "xplor-input-select__empty", role: "option", "aria-disabled": "true" }, "No options available")) : (this.options.map((option, index$1) => {
+            const selected = this.isSelected(option);
+            return (index.h("div", { key: option.value, id: `input-select-option-${index$1}`, "data-option-index": index$1, 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$1 === this.highlightedIndex,
+                }, onClick: () => this.handleOptionClick(option) }, this.multiple && (index.h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: selected, readOnly: true, tabindex: -1, "aria-checked": selected ? 'true' : 'false', "aria-hidden": "true" })), index.h("div", { class: "xplor-input-select__option-content" }, index.h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (index.h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle)))));
+        })))), showDetails && (index.h("div", { key: '0a4f46b2460cd068fe27635cbe45d054c06e9538', class: "xplor-input-select__details" }, this.error && index.h("div", { key: '2d0f44af6a4c115bf3ed66764092b29cf117d57e', class: "xplor-input-select__error-message", id: errorId, role: "alert" }, this.error), !this.error && this.helperText && index.h("div", { key: 'ee93ffdd070c853b1d779235d6c57e368d75bcf1', class: "xplor-input-select__helper-text", id: helperId }, this.helperText))))));
     }
+    get el() { return index.getElement(this); }
 };
 XplorInputSelect.style = xplorInputSelectCss;
 
@@ -3407,16 +3758,17 @@ const XplorInputSend = class {
         this.internalValue = this.value;
     }
     render() {
-        return (index.h(index.Host, { key: '87d0d49d2a9e9061152b294e6b7a91ffae7f39b0' }, index.h("div", { key: 'ef857693127c5945ff78c20e431609b051df32e7', class: {
+        return (index.h(index.Host, { key: 'bcce41da602a265f2ee48f278e1f173dcb7a478c' }, index.h("div", { key: '5db92c3276ea1e021fa872d8f7b34e0c20b6d6ea', class: {
                 'input-send': true,
                 'input-send--disabled': this.disabled,
-            } }, index.h("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 }), index.h("xplor-button", { key: '92b64ec5e3c14cace28aacb12f58185e07b63f71', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
+            } }, index.h("input", { key: '9395e4d6f8190e3010fd9c0323a4a4c51643c998', 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' }), index.h("xplor-button", { key: 'f4d9784400fd7c31c2766af49fe3971216f5828f', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
     }
 };
 XplorInputSend.style = xplorInputSendCss;
 
 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;
 const XplorInputText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -3424,6 +3776,9 @@ const XplorInputText = class {
         this.xplorChange = index.createEvent(this, "xplorChange");
         this.xplorFocus = index.createEvent(this, "xplorFocus");
         this.xplorBlur = index.createEvent(this, "xplorBlur");
+        this.inputId = `xplor-input-text-${++inputTextIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         /**
          * Input value
          */
@@ -3500,21 +3855,25 @@ const XplorInputText = class {
             'xplor-input-text--error': !!this.error,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (index.h(index.Host, { key: 'eefd18f18a4a0303cccca87db9256d2d7033e767' }, index.h("div", { key: 'cf152d49ce4ed953162467a4cc6d9e8392380d4c', class: containerClasses }, this.label && (index.h("label", { key: '78e7c0178ec1dedda68f6fdce7cb1f1dd13840fd', class: "xplor-input-text__label" }, this.label, this.required && index.h("span", { key: '1eaf01ca583263e7047444bbfe6b2636d8fde241', class: "xplor-input-text__required" }, "*"))), index.h("div", { key: '7318153a1c55ad38196cea03555238b8f2c37d51', class: "xplor-input-text__field" }, index.h("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 (index.h(index.Host, { key: 'c7da02996d0b420a58337eb30bec6d38fe9e395f' }, index.h("div", { key: '229582f2e17300332a14fd58ff60cd1a43d10f40', class: containerClasses }, this.label && (index.h("label", { key: '2fc2d7c76396e98397df42d6b793d070d061c918', class: "xplor-input-text__label", htmlFor: this.inputId }, this.label, this.required && index.h("span", { key: '2bc7348d1a415a36aae485c61743b0fd3f98d363', class: "xplor-input-text__required" }, "*"))), index.h("div", { key: 'f6f79203738d3827dbd06faaea60f94022d5d965', class: "xplor-input-text__field" }, index.h("input", { key: 'ff6a346441f195cd71c5e6c585fffd24b79ce181', 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,
-            } }), index.h("slot", { key: '48461bf663591d51ebd1ee4b6fbdc25680b322fb', name: "append-inner" })), showDetails && (index.h("div", { key: '5ed0aecf6e5751e771882f9ab9cd58aafb44ba01', class: "xplor-input-text__details" }, this.error && index.h("div", { key: 'b34fffee42d3f663b923a1b9fe14c7a0a19539b2', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && index.h("div", { key: '7bf60893cc66f8916ebe3bc3bace1e827812541d', class: "xplor-input-text__helper-text" }, this.helperText))), index.h("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 }), index.h("slot", { key: 'fa160af8991c46e7418960e2058d85a912aa182c', name: "append-inner" })), showDetails && (index.h("div", { key: 'bd131696fea277bcc3c727cb2a9a901a9c360f53', class: "xplor-input-text__details" }, this.error && index.h("div", { key: '7a5351abc5cb7ed0dc1a5a71262f86a34230020a', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && index.h("div", { key: '7457664c7a216c5c4a9c18de4030a76796dd97bc', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), index.h("slot", { key: '2acc8a1746276cb19b6d8a0b2dd0054a5fa7f6ac', name: "append" }))));
     }
 };
 XplorInputText.style = xplorInputTextCss;
 
 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;
 const XplorInputTextArea = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.xplorInput = index.createEvent(this, "xplorInput");
         this.xplorChange = index.createEvent(this, "xplorChange");
         this.xplorClear = index.createEvent(this, "xplorClear");
+        this.inputId = `xplor-input-text-area-${++inputTextAreaIdCounter}`;
+        this.errorId = `${this.inputId}-error`;
+        this.helperId = `${this.inputId}-helper`;
         /**
          * Input value
          */
@@ -3593,15 +3952,16 @@ const XplorInputTextArea = class {
         };
         const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (index.h(index.Host, { key: '310d900ed96c59bc8b0f19d40fc1573c1a08c220' }, index.h("div", { key: '0a1903c53b92932e7a98bf910c00b912a1fa078e', class: containerClasses }, this.label && (index.h("label", { key: '9c86a8f36b0007ecfdba4c70e3c76fa65a34d4e6', class: "xplor-input-text-area__label" }, this.label, this.required && index.h("span", { key: '5d57cbb3cd28c4533cfd42286bf16924f9937b4c', class: "xplor-input-text-area__required" }, "*"))), index.h("div", { key: '09feb36c8fe79b5a366d8c0f93495a363ec6596f', class: "xplor-input-text-area__field" }, index.h("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 (index.h(index.Host, { key: '8d29b69ab2e27bd4e1b285cf2c592b22a79518f2' }, index.h("div", { key: 'd6fa4df24c83488f1e88e8e9ddffeed3c4ebd0d7', class: containerClasses }, this.label && (index.h("label", { key: '5be952c8c6ce762a578d22da1b883512118ea3d4', class: "xplor-input-text-area__label", htmlFor: this.inputId }, this.label, this.required && index.h("span", { key: '20c3fd980d575e9e0c3f5573d02556bf9e14099e', class: "xplor-input-text-area__required" }, "*"))), index.h("div", { key: 'bd37545a117401be68d17f0346321e35d39e544a', class: "xplor-input-text-area__field" }, index.h("textarea", { key: '164d86d89c96572adca9deec4292b8339c8efd50', 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 && (index.h("button", { key: '3e95a44af498eb259fab45a653ed3ed2ce7ef3b7', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (index.h("div", { key: 'cf21757ef973e21a44abba969baad7b88c0a273a', class: "xplor-input-text-area__details" }, this.error && index.h("div", { key: 'bdfd559501f15f928a44ed7cfe797bb47b614092', class: "xplor-input-text-area__error-message" }, this.error), !this.error && this.helperText && index.h("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 && (index.h("button", { key: 'a818cd20c397af9517c1ed013f534ee2d53ccfc3', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (index.h("div", { key: '6b2a6d5a6d8d7e66eef815dbebf3e2ea1c4f80b7', class: "xplor-input-text-area__details" }, this.error && index.h("div", { key: '8e22ad68e9a5609b7abfa30751685c570c0e3dca', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && index.h("div", { key: '0eaa1976d2ac0c2e25c301fd23e690f28d9a3494', class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))))));
     }
 };
 XplorInputTextArea.style = xplorInputTextAreaCss;
 
 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;
 const XplorInputTextSecondary = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -3609,6 +3969,9 @@ const XplorInputTextSecondary = class {
         this.xplorChange = index.createEvent(this, "xplorChange");
         this.xplorFocus = index.createEvent(this, "xplorFocus");
         this.xplorBlur = index.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 = '';
@@ -3650,9 +4013,9 @@ const XplorInputTextSecondary = class {
             'input-secondary--dirty': this.isDirty,
         };
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
-        return (index.h(index.Host, { key: 'd6c2b61f7fc153bd32577086f5c0ffcc335cbf4a' }, index.h("div", { key: 'b7cfabd013e84a7b72e6ca4cd7cd592bcd9de4df', class: containerClasses }, this.label && (index.h("label", { key: 'd5dfe32ab50128b1a3ff824e82b98f4ae75fcd17', class: "input-secondary__label" }, this.label, this.required && index.h("span", { key: '5de6c309872715b1bdd1f0aad9f577618f43f63f', class: "input-secondary__required" }, "*"))), index.h("div", { key: '5295e7d9cc7ee5ab401ee5a1182241791f2d81db', class: "input-secondary__field" }, index.h("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 (index.h(index.Host, { key: '805c82be35d46be51ebc3e29e78345ae81bf1368' }, index.h("div", { key: 'df8e81a6553efbd0dade36a7d5871e8d1d789213', class: containerClasses }, this.label && (index.h("label", { key: '289689dbe52f2ae19af90664ae99240eee499d61', class: "input-secondary__label", htmlFor: this.inputId }, this.label, this.required && index.h("span", { key: '7e711647c5cdc04033f2f774eee8d810835685ae', class: "input-secondary__required" }, "*"))), index.h("div", { key: '6cab22daaade60aa7e5130afda2f2692c1ae73b1', class: "input-secondary__field" }, index.h("input", { key: 'eb9cc2994c5f68d15683c4584ac270bcb5c20664', 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,
-            } }), index.h("slot", { key: '8b72be3ae83c0de2f8c9f70198c012c0a25fb470', name: "append-inner" })), showDetails && (index.h("div", { key: 'a540ae6fd62ca09ca1ce337fd71d9b93950071d0', class: "input-secondary__details" }, this.error && index.h("div", { key: '1b899f4df036b2d648d7d6f87767d0ced8202a73', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && index.h("div", { key: 'ec2ba7e7cfc715235360bf9444bb054301537dc3', class: "input-secondary__helper-text" }, this.helperText))), index.h("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 }), index.h("slot", { key: 'e51cb67efac2e7037c2a903d78164348ce56998d', name: "append-inner" })), showDetails && (index.h("div", { key: '5c490ba173da365e8b9393ffee34a4259e9b3dbd', class: "input-secondary__details" }, this.error && index.h("div", { key: '4415c1feb83542ef0f0202fc48dfb13effc9d4c4', class: "input-secondary__error-message", id: this.errorId }, this.error), !this.error && this.helperText && index.h("div", { key: 'fb7e6c208fef2ea8139325438c19612538e1d845', class: "input-secondary__helper-text", id: this.helperId }, this.helperText))), index.h("slot", { key: 'e2479a9561cb0bf63f1115b2fc0b1d768bc705ed', name: "append" }))));
     }
 };
 XplorInputTextSecondary.style = xplorInputTextSecondaryCss;
@@ -3680,6 +4043,10 @@ const XplorInputTitle = class {
          * 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;
@@ -3692,7 +4059,7 @@ const XplorInputTitle = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '8aaf2d386451218e3261ffec5c37d512905776ef' }, index.h("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 (index.h(index.Host, { key: 'ef2d69909fe74019c12da557fa136e0389336e05' }, index.h("input", { key: 'dfdc0a0072ec511a1edfc68a6fad9e4169064f8f', 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 })));
     }
 };
 XplorInputTitle.style = xplorInputTitleCss;
@@ -3702,9 +4069,11 @@ const xplorLinksCss = ":host{display:block}.x-link{display:block;padding:0.5rem
 const XplorLinks = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Alt text for the image */
+        this.imageAlt = '';
     }
     render() {
-        return (index.h(index.Host, { key: '4e672b4eb8d386705f07f8d647a4a4cdabde607f', class: `theme-${this.brand}` }, index.h("a", { key: '8b23a97b669f6682588a568cc644a17cc92c8364', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), index.h("div", { key: '0b6bc1a1c77648137899cb8e554a93f1e56e4a15', class: "bg-black p-2 rounded-md flex justify-center" }, index.h("h1", { key: 'c2f23df8712e1763bf9d6910c0bea40a5ff476bf', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), index.h("div", { key: 'e09c835f279ae0c2f70f2864ab4afa5942e1c900', class: "bg-white py-24 sm:py-32" }, index.h("div", { key: '5b390160da6205dc508018ab53a5f09ab80602d1', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, index.h("div", { key: 'd7cf64efb0c15d643a74f67c11a3b9bc0807cd6d', class: "max-w-xl" }, index.h("h2", { key: '78c877f919bd7098a79de55f2ef65d7538f418c5', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), index.h("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.")), index.h("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" }, index.h("li", { key: '7cc055d330ab0ef28a10965f4fae52ba48b0f957' }, index.h("div", { key: '47faf4cf76fe5363bde5c318abd8a9ff21972f00', class: "flex items-center gap-x-6" }, index.h("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: "" }), index.h("div", { key: '4978dd776ab303b667c5a5a8e2c90e2a51b30829' }, index.h("h3", { key: 'f49b65df05b1659a27dd6a5c82c11e1b9e18306d', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), index.h("p", { key: 'e74b5a0caf90fef101dcbdf01e2aa6d823f0e36d', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+        return (index.h(index.Host, { key: '1d0963855eaf79dacbae5d6a5b86cc6b6ae84632', class: `theme-${this.brand}` }, index.h("a", { key: 'd95d148b5745909e17a51e7d44e6412956a4844b', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), index.h("div", { key: '05c27ca582f5d298e00a46240700088f3ef1c250', class: "bg-black p-2 rounded-md flex justify-center" }, index.h("h1", { key: '9f4180eef39b9006277a72534d385ce3b742e40c', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), index.h("div", { key: 'fe5ffb8f988e0df18e53a04873d6dfe63e7ca26e', class: "bg-white py-24 sm:py-32" }, index.h("div", { key: '09bd7b00cd955c991e662f3f71addac329d4b189', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, index.h("div", { key: '36f6bd91ab4db26df78b21e533c2f584ba656d26', class: "max-w-xl" }, index.h("h2", { key: '165380866054da7add2a455b15370f4cd8a7ad65', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), index.h("p", { key: '726b4e94c27bafe707c6a48f6604a28cb15d1c47', 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.")), index.h("ul", { key: 'a884c969151b0b935d40e5a98d9418d5a8bcc415', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, index.h("li", { key: 'c5b4adca7d9a2038462dcd2958b95b5a7c661314' }, index.h("div", { key: '4a013658a1982d345000bbce12ace33b5e6bd2d8', class: "flex items-center gap-x-6" }, index.h("img", { key: 'c93cc4184e758ca5d1b9942bbbec8a5afb219732', 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 }), index.h("div", { key: 'a05b6b18dbf663af70b0c7840d034973b2cc15df' }, index.h("h3", { key: '7d6ff8ca21af23e69497e067f346b3b0b61de42c', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), index.h("p", { key: '33528098f6f09a748251f49a8e0b377992f2c4e1', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
     }
 };
 XplorLinks.style = xplorLinksCss;
@@ -3747,6 +4116,7 @@ const XplorModal = class {
          * Whether to show the title area (for spacing)
          */
         this.showTitle = true;
+        this.previouslyFocusedElement = null;
         this.handleBackdropClick = () => {
             if (!this.persistent) {
                 this.closeModal();
@@ -3763,14 +4133,68 @@ const XplorModal = class {
     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;
@@ -3787,8 +4211,12 @@ const XplorModal = class {
                 width: this.width,
                 maxWidth: this.maxWidth,
                 maxHeight: this.maxHeight,
-            }, onClick: this.handleCardClick }, index.h("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), index.h("div", { class: "xplor-modal__title" }, index.h("slot", { name: "title" })), index.h("div", { class: "xplor-modal__subtitle" }, index.h("slot", { name: "subtitle" })), index.h("div", { class: bodyClasses }, this.loading ? (index.h("div", { class: "xplor-modal__loading" }, index.h("div", { class: "xplor-modal__spinner" }))) : (index.h("slot", { name: "body" }))), index.h("div", { class: "xplor-modal__actions" }, index.h("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) }, index.h("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), index.h("div", { class: "xplor-modal__title", id: "xplor-modal-title" }, index.h("slot", { name: "title" })), index.h("div", { class: "xplor-modal__subtitle" }, index.h("slot", { name: "subtitle" })), index.h("div", { class: bodyClasses }, this.loading ? (index.h("div", { class: "xplor-modal__loading", role: "status", "aria-label": "Loading" }, index.h("div", { class: "xplor-modal__spinner" }))) : ([
+            index.h("slot", { name: "body" }),
+            index.h("slot", null)
+        ])), index.h("div", { class: "xplor-modal__actions" }, index.h("slot", { name: "actions" }))))));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "open": ["handleOpenChange"]
     }; }
@@ -3821,7 +4249,7 @@ const XplorModalPersistent = class {
         this.loading = false;
     }
     render() {
-        return (index.h(index.Host, { key: '60cd29fcdff8efad4d0b24f4532acb86e4f6220b' }, index.h("xplor-modal", { key: '6252525de022fcc1098e2e179c4aedb81ebb15d3', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, index.h("slot", { key: '484eeecc00f647e920878512f5e6bd61b41ba825', name: "title", slot: "title" }), index.h("slot", { key: 'e3fb52e2f19fdd4346fc4d014a0391dcc3e7c156', name: "subtitle", slot: "subtitle" }), index.h("slot", { key: 'aa8a47b1afa24229269c08783fe0b69c5a258adc', name: "body", slot: "body" }), index.h("slot", { key: '8d1711d5e3223922596a26ce4eb9d30288c259ed', name: "actions", slot: "actions" }))));
+        return (index.h(index.Host, { key: '884f843600d455676714efef74a7102467cf7fe5' }, index.h("xplor-modal", { key: 'c3886708722829887adb5213f4eb98470ad16132', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, index.h("slot", { key: '0f6b7f60e3f9354994b00f15ee7056c2b5f4a454', name: "title", slot: "title" }), index.h("slot", { key: '03a625acfe4a23677d1e532d56b0797c9d0f6457', name: "subtitle", slot: "subtitle" }), index.h("slot", { key: '57d9c7c4897299b0bb84de291e202d6c00d3914f', name: "body", slot: "body" }), index.h("slot", { key: '9290ae4fede095d8e11f32396029e59da7212e16', name: "actions", slot: "actions" }))));
     }
 };
 
@@ -3841,8 +4269,45 @@ const XplorNavTabs = class {
             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 (index.h(index.Host, { key: '30bab02780d071338f386b6a72559bbd65212118' }, index.h("div", { key: '2684dbbd4a812bbb88d55baeb42b281c2f3bf753', class: {
+        return (index.h(index.Host, { key: '1a94314129f0f6c94df3196ef7e2a493b6626fd7' }, index.h("div", { key: '71b0ee2d2baab1fed571ed88f04fc49754b2952e', class: {
                 'nav-tabs': true,
                 'nav-tabs--grow': this.grow,
                 [`nav-tabs--${this.color}`]: true,
@@ -3850,20 +4315,102 @@ const XplorNavTabs = class {
                 '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))), index.h("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))), index.h("slot", { key: 'fbf08f6785a81babc1c29359f0dff202dca18d6c' }))));
     }
+    get el() { return index.getElement(this); }
 };
 XplorNavTabs.style = xplorNavTabsCss;
 
-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}";
 
 const XplorRadioBtn = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.radioChange = index.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 (index.h(index.Host, { key: '350aae21c138b87e3dfce7ebdb2d74747d5abc93' }, index.h("h1", { key: 'f7546bbab5c85aa0ed4d180116200790444f8c5f' }, "I'm a button"), index.h("slot", { key: '79492d83d93da17775f56c21e2a600cafdea2c44' })));
+        return (index.h("label", { key: '305a0c3d610686e8c11180c15db8d1ce4ca98c60', class: {
+                'radio-wrapper': true,
+                'radio-wrapper--disabled': this.disabled,
+            } }, index.h("div", { key: 'ed0dd418bf295430c8cf1edd4b43519b3cf04018', 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 }, index.h("div", { key: 'ae6dd96a65601ba50d3e6e919b95983d3e47e8e5', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (index.h("span", { key: 'b5647a8ad15d03187ba2f8c670846e9025ffba7e', class: "label" }, this.label))));
     }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "initialChecked": ["watchCheckedProp"]
+    }; }
 };
 XplorRadioBtn.style = xplorRadioBtnCss;
 
@@ -3881,7 +4428,7 @@ const XplorSectionCard = class {
                 'section-card': true,
                 'section-card--outlined': this.outlined,
                 'section-card--rounded': this.rounded,
-            }, style: { padding: this.padding } }, index.h("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), index.h("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), index.h("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, index.h("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" })), index.h("div", { key: 'd71137c24f428c4001c06c3038565368423e71cd', class: "section-card__actions" }, index.h("slot", { key: '06b994a9fb3626a0054b6192b5bb666b89710f54', name: "actions" })))));
+            }, style: { padding: this.padding } }, index.h("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), index.h("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), index.h("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, index.h("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" }), index.h("slot", { key: '75faafcde4f79d7c7df0be49986420f147ccfde5' })), index.h("div", { key: 'f1f14d4cacef1580309321953d95d6b64825332e', class: "section-card__actions" }, index.h("slot", { key: '8e0520be390119389ac64f7fddd86c9e81ccd47c', name: "actions" })))));
     }
 };
 XplorSectionCard.style = xplorSectionCardCss;
@@ -3892,13 +4439,18 @@ const XplorSectionHeading = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.size = 'medium';
+        /**
+         * Heading level (1-6), renders as h1-h6. Defaults to 2.
+         */
+        this.level = 2;
     }
     render() {
-        return (index.h(index.Host, { key: '6ee4041528bf178feb4b641c6f6f937c28ed2e8e' }, index.h("span", { key: 'e9758f23fe78a18f5ebf77092225c4d3b2a29965', class: {
+        const HeadingTag = `h${this.level}`;
+        return (index.h(index.Host, { key: '8d792fa1f7111c3de496e616c6c0d59a9f3bff0d' }, index.h(HeadingTag, { key: '56cc9b857b645d2b6de1d9b736b77c47011bc0aa', class: {
                 'section-heading': true,
                 'section-heading--small': this.size === 'small',
                 'section-heading--large': this.size === 'large',
-            } }, index.h("slot", { key: 'e0191f9f23da9858ffbb204554fec2c1012d1cd3' }, this.text))));
+            } }, index.h("slot", { key: 'c5820f563cbb67872c43018493553d9f1fe703f3' }, this.text))));
     }
 };
 XplorSectionHeading.style = xplorSectionHeadingCss;
@@ -4086,18 +4638,23 @@ const XplorTable = class {
         if (this.hasScrolled)
             className += ' xpl-table--has-scrolled';
         const paginatedData = this.getPaginatedData();
-        return (index.h(index.Host, { key: '3f20eb245a5a7cb281d4d62c4decd5479a4a172f', class: "xplor-table" }, index.h("div", { key: '1a28e8efbe4743b4dc77cfe62eeb21f317a9cbea', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, index.h("div", { key: 'a20608a0f5d4cde341974fb887f6bf0fcd1bce2d', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (index.h(index.Host, { key: '34a091e309fac05f19d2e895d6eaf9bcd6bd52b2', class: "xplor-table" }, index.h("div", { key: '63f1baa12c4a579a94e88b6afa955cedc55ebcbc', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, index.h("div", { key: 'a51f74e5a00e6286dc69d1cf63cbedbc52cf2323', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, index.h("div", { key: '179d76f9152adf12775024ab4b8a272539ae1931', class: "mb-6" }, index.h("h1", { key: '636955cf3e3b34e0dfd96d61b1dc055a8bd25421', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), index.h("div", { key: 'dbb17a39f87faf48f840cb0a0912e766d26fd3c6', class: "flex flex-wrap items-center gap-4 mb-6" }, index.h("div", { key: '093859d4da39cdbda7c9d2bdde59dbe18e6379bc', class: "flex items-center gap-2" }, index.h("label", { key: '01a133d35d6b97bb2c4e231ae6ebe8f4082f2955', class: "text-sm text-gray-600 font-medium" }, "Date Range"), index.h("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",
+            } }, index.h("div", { key: 'dd162973f151d437264803738951403fd118a325', class: "mb-6" }, index.h("h1", { key: 'cd20f65851fe73c7e22eca544c19460d1e8cfa41', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), index.h("div", { key: '4ccbb826c4d36a04d7abb229cb30b33b721302aa', class: "flex flex-wrap items-center gap-4 mb-6" }, index.h("div", { key: '2ec4358cab245173935bfd10750d426a95327649', class: "flex items-center gap-2" }, index.h("label", { key: '8a42d1fc73b38675efbb4d489ef52f490d355155', class: "text-sm text-gray-600 font-medium" }, "Date Range"), index.h("select", { key: 'bf158ae8de2d8350cb4a17882e876374f56d1191', 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 }, index.h("option", { key: '7886a61f2329e9ed9cc8ee7a2cf6addea173cca1', value: "All" }, "All"), index.h("option", { key: '582f916607bb0cf80e0bae5bc0d6a2a555629139', value: "Today" }, "Today"), index.h("option", { key: 'e6b1b8b081ee25a4ed86a41e2de2e18a904b0696', value: "This Week" }, "This Week"), index.h("option", { key: '9db97f27a005fe23d2e5c60f8920b867a8f6c6e5', value: "This Month" }, "This Month"), index.h("option", { key: '3328f1c88fe0da23ede3010441f0fe4e2063b2ec', value: "Custom" }, "Custom Range")), index.h("button", { key: '31041e09d90e476f7c795b29eb6f11b014ff7bfd', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, index.h("svg", { key: '1bafb7b5f685358f03d9c4aab68ae30eb49118dd', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("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" })))), index.h("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"), index.h("button", { key: '5b23efc3355a5e4907b06696e29ca1f5b9d5c4f2', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, index.h("svg", { key: 'f787cf0f0759c4536786bc3e1ce2db99324ba085', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("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"))), index.h("table", { key: '7ba170b68b794cd1dc031e801405d0f09c8d0e8f', class: `w-full ${className}` }, this.columns && (index.h("thead", { key: 'e79458ad7b197620a6ba37084fd009a3685340cc' }, this.columns.map((column, i) => {
+            onInput: this.handleDateRangeChange }, index.h("option", { key: '8d30107e14b3ae11283eab5c0dc5bb5e1625f206', value: "All" }, "All"), index.h("option", { key: 'e6ff573c014679027844de6fa074987c2af2747b', value: "Today" }, "Today"), index.h("option", { key: 'b2442d598fd4901bee4864d5eafb73fc36defed6', value: "This Week" }, "This Week"), index.h("option", { key: 'b8d65f2882d81ba062e005c19d8969df2ddf541b', value: "This Month" }, "This Month"), index.h("option", { key: 'e64697e70ba6daa1cedb3d4b35318cd473ad55ff', value: "Custom" }, "Custom Range")), index.h("button", { key: '5aca4cd7f522efa1fb6669a281c2f124a5f3c08a', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, index.h("svg", { key: 'c64b7b245059c5c93abb2f8d1fba598d59d2697e', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: 'd7f81604c3df7684dd33105f369ece2f25002426', "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" })))), index.h("button", { key: '77e48fda9b868095074045507842dcb32a7ac3fb', 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"), index.h("button", { key: '7f7a214ecb2e66828438dce866e134fe75910ebb', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, index.h("svg", { key: 'af830e634d4115487fb3e5ebc4ab085a864990ff', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: '396c756b2fbe057f019872573f0fb44a6ef882f2', "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"))), index.h("table", { key: '984119ef9ca031d2cf21f40f888653e508157176', class: `w-full ${className}` }, this.columns && (index.h("thead", { key: 'a3ffca2c981bfbc8323d537507c2b416f4f39306' }, this.columns.map((column, i) => {
             const iconType = getIconType(this.sortTypeArray[i]);
             const isColumnSortable = !!(this.isSortable &&
                 this.sortableColumns[i]);
-            return (index.h("th", { class: "text-left py-3 px-4 text-sm font-medium text-gray-600" }, this.multiselect && i === 0 ? (index.h("label", { onClick: (e) => {
+            return (index.h("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 ? (index.h("label", { onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    debugger;
                     if (isColumnSortable) {
                         this.sortBy(i);
                     }
@@ -4111,11 +4668,11 @@ const XplorTable = class {
                     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] && (index.h("xpl-icon", { icon: iconType, size: 16 })))) : (index.h("label", { onClick: () => isColumnSortable &&
                     this.sortBy(i), class: isColumnSortable
                     ? 'cursor-pointer'
-                    : '' }, column, isColumnSortable &&
+                    : '', "aria-label": isColumnSortable ? `Sort by ${column}` : undefined }, column, isColumnSortable &&
                 !!this.sortTypeArray[i] && (index.h("svg", { width: "11", height: "6", viewBox: "0 0 11 6", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M10.5 5.5L5.5 0.5L0.5 5.5L10.5 5.5Z", fill: "currentColor" }))
             // <xpl-icon
             //     icon={iconType}
@@ -4123,11 +4680,11 @@ const XplorTable = class {
             //     id="__xpl-icon-sort"
             // ></xpl-icon>
             )))));
-        }))), index.h("tbody", { key: '138ffddb19a8573fc00894a5e9b981cecbe3ac40' }, paginatedData.map((row, rowNum) => (index.h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (index.h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (index.h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, index.h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
+        }))), index.h("tbody", { key: 'b1794bf469839753599bca48a72153c8f53544e6' }, paginatedData.map((row, rowNum) => (index.h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (index.h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (index.h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, index.h("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}` }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell })))))))))), index.h("div", { key: 'e82751ff914c2279cecdfbaa176e97f6e935732a', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, index.h("div", { key: '4ed42566de46b43af24a36884832017947f117ef', class: "flex items-center gap-2" }, index.h("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 }, index.h("svg", { key: '322225c61fc14d0c6d8a201a3ff07cce094822c7', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: 'ae66792c0cf51383d2657ff5302383e4067761ce', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), index.h("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 }, index.h("svg", { key: '365d59f74128819af1f163f125e393994a2e69ad', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: '0b7c6305962e722c161d30e3b3ffe804c5d4c73e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), index.h("span", { key: '2e0245cf9e2d23a944492432cd5c33bb915ecd2b', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), index.h("div", { key: '5692bf81ffa24c2e10c8edb7d7a5ff6655816f7a', class: "flex items-center gap-2" }, index.h("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 }, index.h("svg", { key: '5f45f52d2dd1718691f582e765dd7cc3aa476dce', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: 'ad63a63e8956c6648781d7160761f8e310c5becc', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), index.h("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 }, index.h("svg", { key: 'e247cc56f3cfc8d870a7891fd0c457645473e3e1', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("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}` }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell })))))))))), index.h("div", { key: '130cceed1d88934092f1a3a92a67d984b8bd465b', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, index.h("div", { key: '616ce36b0aa536f161eb9aa30b41acb18153208b', class: "flex items-center gap-2" }, index.h("button", { key: '10977dacc1cf364504c1cff031beb62a423f48be', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, index.h("svg", { key: '3e7fe6e2411178be935d7c210eb5c6cf081a2d54', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: '167a9ccaac38d293a86ff3983e5d0d6a222c91b4', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), index.h("button", { key: '9ee908d6b52468a365c7173e3e3367b7b1945061', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, index.h("svg", { key: '286915694ecc0b480bf25e15baf3eb6423b68919', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: 'f6983747c83e973f777bcadb9045c53da5d10674', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), index.h("span", { key: '1c619cd20140f8d73d461b4f2b661116b0059353', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), index.h("div", { key: '1201039d99ac6d48f1075b36a602333dfe6d54e5', class: "flex items-center gap-2" }, index.h("button", { key: '828195335b1064d85f625f476b63da21ff37af71', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, index.h("svg", { key: '7c2770e6e31871e8ded8b3831695f1f39bd5b7ec', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: '2f260f911a89596b76826930f2d4c5f25aab180a', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), index.h("button", { key: 'aed318f01b51e8f78ab7b2d10543b00154970b0e', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, index.h("svg", { key: '70e04a5ce5106d5c1b3c3f653d156608c03dc0f8', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: '25d7d949b2aa75ce8d268d8a472becd75b9eb3cb', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -4143,11 +4700,11 @@ const XplorTextBubble = class {
         this.color = 'orange';
     }
     render() {
-        return (index.h(index.Host, { key: '61174051f7acc2747a0c95e1599a8ca04a9bc5e6' }, index.h("div", { key: 'fe266a910f906422a4e5d9e73d4f4d0570fa8c79', class: {
+        return (index.h(index.Host, { key: '935620a5fe11efe0b04bb35b1f2a61782f628fef' }, index.h("div", { key: '54efffa810a98239e535863a74bbcaa13dddb01e', class: {
                 'text-bubble': true,
                 'text-bubble--green': this.color === 'green',
                 'text-bubble--orange': this.color === 'orange',
-            } }, index.h("slot", { key: '1286ac72861f5da019bece897343778d40acdc36' }))));
+            } }, index.h("slot", { key: 'c44912756dc8798305a68fa9ef2496610e0b73dd' }))));
     }
 };
 XplorTextBubble.style = xplorTextBubbleCss;
@@ -4284,10 +4841,10 @@ const XplorTextField = class {
     }
     render() {
         const labelFloating = this.isFocused || this.hasValue;
-        return (index.h(index.Host, { key: '93fdd30e48260ae52b33c18368637b1e7fdd7b6b' }, index.h("div", { key: 'ef93e7bc3588c225dfb7fef553f1146aecfcc027', class: this.computedClasses }, index.h("div", { key: '5ffdd5634f410b2432e549403040e9ce7fdb0da4', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, index.h("div", { key: '08ab012b2ccb2698256f149563cc1ed47052e694', class: "xplor-text-field__input-wrapper" }, this.label && (index.h("label", { key: 'c4f359a167cb4cb47ba39355c56f7249523d8ef7', class: {
+        return (index.h(index.Host, { key: '7f96fd0fd49e24f55f29c839ce949ed4852ccd09' }, index.h("div", { key: 'a92aff2394b383f4e2189d239928b09e83df69c9', class: this.computedClasses }, index.h("div", { key: '80a9df3c874ba25b6d9072b01f113bd3615291de', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, index.h("div", { key: '42de5abcd54384fd509d9788eb9534a1de2cc65a', class: "xplor-text-field__input-wrapper" }, this.label && (index.h("label", { key: '4668b75b97b1e95c3817924bd8d3a9c1355ba7ab', class: {
                 'xplor-text-field__label': true,
                 'xplor-text-field__label--floating': labelFloating,
-            } }, index.h("slot", { key: 'cfd751bb2bbe51c6a847b6ac6317559b06feae39', name: "label" }, this.label), this.required && index.h("span", { key: '0d53dea42c4b288ec44c699aac77670ff45167b9', class: "xplor-text-field__required" }, "*"))), index.h("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 }), index.h("div", { key: '24a63d349c6a425854ed76c6ddb4a30ed5e91566', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (index.h("button", { key: '9145e93c91f67f98f0759370515552c66aeaae28', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, index.h("svg", { key: '8dc823a286290bc563939bdee1b13bac39a6596d', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, index.h("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" })))), index.h("slot", { key: '40cc5d4ba05c8e13a4697af6da86069b8f8d0003', name: "append-inner" })), index.h("fieldset", { key: 'd066e7b23972b722cd9e1dca0a008ba3e412cde7', class: "xplor-text-field__outline" }, index.h("legend", { key: 'b8a3597b17f85b6877499cf7d984a874b0a124eb', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? index.h("span", null, this.label, this.required && '*') : index.h("span", null, "\u200B")))), index.h("div", { key: 'b116ffbdb2e0fa04aee252137c3300c5939df4e4', class: "xplor-text-field__append" }, index.h("slot", { key: '5ff712dd69e453d488f3fc3cdad49a72ed9d5779', name: "append" }))), this.showDetails && (index.h("div", { key: '48ffb972bfb61eab4c33c61a4610f54ab6172cf6', class: "xplor-text-field__details" }, this.hasError && (index.h("div", { key: '301bcf461bc00f3c4f5c5a322781f43a8451a597', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (index.h("div", { class: "xplor-text-field__error" }, error))))))))));
+            } }, index.h("slot", { key: 'c6f596aa30b8d263072a43f133bd2f049c22ed36', name: "label" }, this.label), this.required && index.h("span", { key: '4efc5c1726c5e0841502bb85726eb638391c60d1', class: "xplor-text-field__required" }, "*"))), index.h("input", { key: '2f226f284910e76ecc23e6cc3416c32782678a73', 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 }), index.h("div", { key: '6068500f640c4144b8bbf1dcaaf8b216de9281c1', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (index.h("button", { key: '94eedd8a810932066690bf5dc6613d54dc7377e6', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, index.h("svg", { key: 'c325d1129f9987992183ffd1ce7e585e70fb3db3', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '02845166093ed8edc7670149cedb4e042d8626f4', 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" })))), index.h("slot", { key: 'af66e74670e30d12a5dc2f94bce768fc32a9716a', name: "append-inner" })), index.h("fieldset", { key: '3c4b60c284876a8c198d9a332db6fca5e9d91c81', class: "xplor-text-field__outline" }, index.h("legend", { key: '9d97a8b65d1787f5e8f4d0a4892fb9c85f839553', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? index.h("span", null, this.label, this.required && '*') : index.h("span", null, "\u200B")))), index.h("div", { key: '53440d0311b2147598fa1dbf241629d7ec401d82', class: "xplor-text-field__append" }, index.h("slot", { key: '71caef9c6e34db94282fcb36ee341477c7523023', name: "append" }))), this.showDetails && (index.h("div", { key: '2b468deb8dabcd038e7728512cf68702cfad7d02', class: "xplor-text-field__details" }, this.hasError && (index.h("div", { key: '103e96cac4c46e52bbb5700fc9c64fc3ef7dc114', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (index.h("div", { class: "xplor-text-field__error" }, error))))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -4586,16 +5143,16 @@ const XplorTimePicker = class {
     }
     render() {
         const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
-        const clockIcon = (index.h("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" }, index.h("circle", { key: 'a21fb969eeb8690b82879ebc9a6c51b1cd7aafa7', cx: "12", cy: "12", r: "10" }), index.h("polyline", { key: '3a9baa3e13e7b8c34291a3755122262d868c61ed', points: "12 6 12 12 16 14" })));
-        return (index.h(index.Host, { key: 'd33be9ec453c217585e40c0eb8b0c0960c7bb382' }, index.h("div", { key: '7ab538480696c0f08acd0855801f800bfe8c8862', class: {
+        const clockIcon = (index.h("svg", { key: '17e815e14889cbd5a7b8d9f2fc7a119c38978245', 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" }, index.h("circle", { key: 'f2dd15cf2d0e2dd5e83665b268729ad42bd2f691', cx: "12", cy: "12", r: "10" }), index.h("polyline", { key: '1a75a6347d834e0709e4dd44ad0afd32520615ff', points: "12 6 12 12 16 14" })));
+        return (index.h(index.Host, { key: '0b7f26197f0e8a6b6b26aa07f623cc4a64ba0ea4' }, index.h("div", { key: 'f6e15abeed537c65f0e690d44cd8ce8412426a23', class: {
                 'time-picker': true,
                 'time-picker--disabled': this.disabled,
                 'time-picker--error': !!this.error,
                 'time-picker--open': this.isOpen,
-            } }, this.label && (index.h("label", { key: '360dc161f783af2b499223cdadac2232e3e78ba5', class: "time-picker__label" }, this.label, this.required && index.h("span", { key: '78a2e4b030a913d992580d6ce1651a74ad5aab5e', class: "time-picker__required" }, "*"))), index.h("div", { key: 'e17649b5447152ea129bd56d491c878fca99a2bd', class: "time-picker__field" }, index.h("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 } }), index.h("div", { key: '84d7dbcc0f16b6f99453998b9daa27e6106cfc40', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (index.h("button", { key: 'a70fedda5e74f4940fe098c9d78fe68a1bc0b54d', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), index.h("button", { key: 'a1fd37c75457a5dd93da61318e6ee40c206cf5e1', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (index.h("div", { key: '32d5afad7a12bbe4fe427f095d8683c80f91982e', class: "time-picker__details" }, this.error && index.h("div", { key: 'd8b06c272ddc8f89b629a4829d72268853f2de59', class: "time-picker__error-message" }, this.error))), this.isOpen && (index.h("div", { key: 'e32482cb95af8020176a98d430da82cd14e22d47', class: "time-picker__dropdown" }, index.h("div", { key: 'fda4e88d54bbe1aee73c559ed4739d8af92a1312', class: "time-picker__columns" }, index.h("div", { key: 'f6b11e869323e3ead50450c50c1513917e7d54b8', class: "time-picker__column" }, index.h("button", { key: '006920c8b6f9482c71e86e51b57941ba9b01ac1a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), index.h("div", { key: '8d24980d4686acb684198234be4e5795bb260a68', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), index.h("button", { key: 'd3bacc27468fce121f8fd9d33bbdc017471d186a', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), index.h("div", { key: '47b37a654b39d927bc8d61631f37b1f4668ddf4f', class: "time-picker__separator" }, ":"), index.h("div", { key: '06338eaa14004fe3db215d8dd3aab3148e187e1e', class: "time-picker__column" }, index.h("button", { key: '2ef570ff9b18c21d5380a4d84b04ce9ae2e2b29a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), index.h("div", { key: 'd6b0499440d0316ef9ce34564b3430580890a3d4', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), index.h("button", { key: 'da3cae735a153e422c8916575e6450ff60944b84', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
-            index.h("div", { key: 'ac3ae8aaeff962e05ce23463e38ce8e1757125d6', class: "time-picker__separator" }, ":"),
-            index.h("div", { key: 'bacd826ab467fcfbe31bb0bfb0e14482792a83a7', class: "time-picker__column" }, index.h("button", { key: '9f5160fbe4c64aabd12b7b1b0a862ad67b5d1c0b', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), index.h("div", { key: 'e0de300ff5896edefc657e0c700ef63022896ba0', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), index.h("button", { key: 'ddd4a3851c3b95fbb204df8be210ff45770a5d4a', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
-        ], index.h("div", { key: '9475cca4161ce49d5542f9e80e67cca0fa8d6e47', class: "time-picker__column time-picker__column--period" }, index.h("button", { key: '478377c07a24bf7d42efb8ead573f212fd71a5e5', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), index.h("div", { key: 'c1f4614e726d95eea32c5b02ad906a9455588594', class: "time-picker__value time-picker__value--period" }, this.period), index.h("button", { key: '26c95e4dcec81c18808ff42861a3ac319e43ea73', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
+            } }, this.label && (index.h("label", { key: '3a824d847af9373e93bb72026fddaa899633462f', class: "time-picker__label" }, this.label, this.required && index.h("span", { key: '70a02a316b6a610178d0d67912d285585f778d35', class: "time-picker__required" }, "*"))), index.h("div", { key: '99f32b42a52ab84ad9399b5eebd4fc3dd52c03c7', class: "time-picker__field" }, index.h("input", { key: '48ad49c0173ebfebdb2cf328cd8658df40824068', 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 } }), index.h("div", { key: '375560c783c400b52bcf96ac3b14ac285ab26b40', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (index.h("button", { key: '0716d483500bd91e0ae289568b6e22d80e667cd5', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), index.h("button", { key: '118766793e1c508c0acccc1b9a3ea486c4e2d1dc', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (index.h("div", { key: 'b758cd4077af9f46c95ae9aee64cca1610cc6246', class: "time-picker__details" }, this.error && index.h("div", { key: '37f5fe76dbb2c39147202e549ed24ceaf74da530', class: "time-picker__error-message" }, this.error))), this.isOpen && (index.h("div", { key: 'cad94d2b88058f488951c437e6a1c77601f7fc2e', class: "time-picker__dropdown" }, index.h("div", { key: '1a2a60fc179eeacaf4891a8e99cbb7d0a871686c', class: "time-picker__columns" }, index.h("div", { key: 'e9b84703525a010884064c1b7a61f5db726b7dff', class: "time-picker__column" }, index.h("button", { key: '155f2c76f63b8ad0be071456fc1ac8ed36c28912', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), index.h("div", { key: '6f49e3b3ebed597ef27b61e0144bf65f288620a8', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), index.h("button", { key: '7d14a1f6dd7ab392a76d936e054ca3c308da7666', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), index.h("div", { key: '9244f886b97f2ae29e71ada6070b75bcec71e22b', class: "time-picker__separator" }, ":"), index.h("div", { key: '34a8f59c8fa8486c947e0d6079b6df773a86f187', class: "time-picker__column" }, index.h("button", { key: 'f996fa4638ae84bbcd3bce34c0c40669021a0e61', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), index.h("div", { key: '161581c941572a3d0390b0efdbbf6c24e0ca4830', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), index.h("button", { key: '9fa3ee821b78caf94b388b335980ab7cc28110a5', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
+            index.h("div", { key: '4362983fe6d9ce187354b5423ff352ac13ee8917', class: "time-picker__separator" }, ":"),
+            index.h("div", { key: '8dda8c23ab9774bd946136054c537dd0adb8e45b', class: "time-picker__column" }, index.h("button", { key: '40338612d17dc3a8cf323e6c29942cb0cc0233c7', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), index.h("div", { key: 'ff2d19c8f91070d5b53264266ff6541924613c38', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), index.h("button", { key: '985894586447b8e62c4c7c4075cfae8f8cc2eacf', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
+        ], index.h("div", { key: '22ea57820f5e2fb0beea1f2302efc009daf9b687', class: "time-picker__column time-picker__column--period" }, index.h("button", { key: '2d9bd33e505e980debd0fc692ddf072b3bb3eacd', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), index.h("div", { key: 'd7540347cfa54e16f25e506701d1f1ff03452537', class: "time-picker__value time-picker__value--period" }, this.period), index.h("button", { key: '31b927a17b3be2749ac62968539fb7873bcd2f0e', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -4603,6 +5160,7 @@ XplorTimePicker.style = xplorTimePickerCss;
 
 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;
 const XplorTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -4613,6 +5171,7 @@ const XplorTooltip = class {
         this.disabled = false;
         this.tooltipStyle = {};
         this.arrowStyle = {};
+        this.tooltipId = `xplor-tooltip-${++tooltipIdCounter}`;
         this.handleMouseEnter = () => {
             if (this.disabled)
                 return;
@@ -4628,6 +5187,16 @@ const XplorTooltip = class {
                 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;
@@ -4654,12 +5223,16 @@ const XplorTooltip = class {
         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) {
@@ -4744,10 +5317,10 @@ const XplorTooltip = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '472521bc51295f0b7dcc4d17c0aef70df5c7181e' }, index.h("div", { key: '9458cc629deea68c914e7214a762498ff9c3d4c8', class: "tooltip-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleClick }, index.h("slot", { key: 'f5f6d6c85270fdca9b345dc9fed31b776c5d6358', name: "trigger" })), this.open && (index.h("div", { key: 'd56f6b7f8e2d4c0b6425a85a290e330978645e74', class: {
+        return (index.h(index.Host, { key: '135c627d93956798eef4e842ec256a0f156c771a' }, index.h("div", { key: '1a4253fa4f893d7726227c346c9ebc850c7ee463', class: "tooltip-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleClick, "aria-describedby": this.open ? this.tooltipId : undefined }, index.h("slot", { key: '8970f94fa612b40e573a66102533b1f54387b9b2', name: "trigger" })), this.open && (index.h("div", { key: 'c1b873e3b9ccaf8747c772672282e63615528be7', class: {
                 'tooltip': true,
                 [`tooltip--${this.position}`]: true,
-            }, style: this.tooltipStyle, ref: (el) => (this.tooltipEl = el), role: "tooltip" }, index.h("div", { key: '0b5735ca4b5d591dbec6f6ca6b2e47233b391198', class: "tooltip__content" }, index.h("slot", { key: 'c4e8c76025b546b8aa485f3f9d37ee7ecf7fbddd' }, this.content)), this.arrow && (index.h("div", { key: '373c339feda5732f8c5f2307deea89f2d66969ba', class: "tooltip__arrow", style: this.arrowStyle }))))));
+            }, style: this.tooltipStyle, ref: (el) => (this.tooltipEl = el), role: "tooltip", id: this.tooltipId }, index.h("div", { key: '93af160a6f7fc1776ca358f3f91f0fecb381ce8d', class: "tooltip__content" }, index.h("slot", { key: 'cb1c56d228c3f494d668dad73e2af6b303af9f42' }, this.content)), this.arrow && (index.h("div", { key: '9d528e58c6b772c4b72096533bdb1f0df710aa8f', class: "tooltip__arrow", style: this.arrowStyle }))))));
     }
     get el() { return index.getElement(this); }
 };