npm - @xplor-education/core-stencil-components - Versions diffs - 2.0.0 → 3.0.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (314) hide show

package/components/xplor-autocomplete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-autocomplete.js","mappings":"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","names":["XplorAutocomplete","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-autocomplete/xplor-autocomplete.scss?tag=xplor-autocomplete&encapsulation=scoped","src/components/xplor-autocomplete/xplor-autocomplete.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.autocomplete {\n position: relative;\n width: 100%;\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &--readonly {\n .autocomplete__input {\n background-color: #f5f5f5;\n }\n }\n}\n\n.autocomplete__label {\n display: block;\n font-size: 0.875rem;\n font-weight: 500;\n color: #424242;\n margin-bottom: 0.5rem;\n}\n\n.autocomplete__input-wrapper {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n border: 1px solid #bdbdbd;\n border-radius: 4px;\n padding: 0.5rem;\n background-color: #fff;\n transition: border-color 0.2s, box-shadow 0.2s;\n\n &:focus-within {\n border-color: #1976d2;\n box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n }\n}\n\n.autocomplete__chips {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.autocomplete__chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n background-color: #e3f2fd;\n border-radius: 16px;\n font-size: 0.875rem;\n color: #1976d2;\n}\n\n.autocomplete__chip-label {\n line-height: 1;\n}\n\n.autocomplete__chip-remove {\n background: none;\n border: none;\n font-size: 1.25rem;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #1976d2;\n border-radius: 50%;\n transition: background-color 0.2s;\n\n &:hover:not(:disabled) {\n background-color: rgba(25, 118, 210, 0.1);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\n.autocomplete__input {\n flex: 1;\n min-width: 120px;\n border: none;\n outline: none;\n font-family: inherit;\n font-size: 1rem;\n padding: 0.25rem;\n background: transparent;\n color: #212121;\n\n &::placeholder {\n color: #9e9e9e;\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &[readonly] {\n cursor: default;\n }\n}\n\n.autocomplete__actions {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n}\n\n.autocomplete__clear {\n background: none;\n border: none;\n font-size: 1.25rem;\n line-height: 1;\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 &:hover {\n background-color: #f5f5f5;\n color: #212121;\n }\n}\n\n.autocomplete__icon {\n font-size: 0.75rem;\n color: #757575;\n pointer-events: none;\n transition: transform 0.2s;\n\n .autocomplete--open & {\n transform: rotate(180deg);\n }\n}\n\n.autocomplete__dropdown {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n}\n\n.autocomplete__item {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n color: #212121;\n\n &:hover:not(&--disabled) {\n background-color: #f5f5f5;\n }\n\n &--highlighted {\n background-color: #e3f2fd;\n }\n\n &--selected {\n background-color: #1976d2;\n color: #fff;\n\n &:hover {\n background-color: #1565c0;\n }\n }\n\n &--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\n.autocomplete__no-results {\n padding: 1rem;\n text-align: center;\n color: #757575;\n font-size: 0.875rem;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface AutocompleteItem {\n label: string;\n value: any;\n disabled?: boolean;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-autocomplete',\n styleUrl: 'xplor-autocomplete.scss',\n scoped: true,\n})\nexport class XplorAutocomplete {\n @Element() el: HTMLElement;\n\n /*\n Array of items to display in the dropdown\n /\n @Prop() items: AutocompleteItem[] = [];\n\n /\n Selected value\n /\n @Prop({ mutable: true }) value: any = null;\n\n /\n Placeholder text\n /\n @Prop() placeholder: string = 'Search...';\n\n /\n Label for the input\n /\n @Prop() label: string;\n\n /\n Disable the autocomplete\n /\n @Prop() disabled: boolean = false;\n\n /\n Make the autocomplete readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Clear button\n /\n @Prop() clearable: boolean = false;\n\n /\n Allow multiple selection\n /\n @Prop() multiple: boolean = false;\n\n /\n Minimum characters to trigger search\n /\n @Prop() minSearchLength: number = 0;\n\n /\n Key to extract value from item objects\n /\n @Prop() itemValue: string = 'value';\n\n /\n Key to extract display text from item objects\n /\n @Prop() itemText: string = 'label';\n\n /\n Max width of the dropdown menu\n /\n @Prop() menuMaxWidth: string = '100%';\n\n /\n Custom render function for dropdown items\n /\n @Prop() renderItem: (item: AutocompleteItem) => any;\n\n /\n Custom render function for selected items (chips)\n */\n @Prop() renderSelection: (item: AutocompleteItem) => any;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: AutocompleteItem[] = [];\n @State() selectedItems: any[] = [];\n @State() highlightedIndex: number = -1;\n\n @Event() xplorChange: EventEmitter<any>;\n @Event() xplorSelect: EventEmitter<AutocompleteItem>;\n @Event() xplorClear: EventEmitter<void>;\n @Event() xplorSearch: EventEmitter<string>;\n\n private inputEl: HTMLInputElement;\n private dropdownEl: HTMLDivElement;\n\n private getItemValue(item: AutocompleteItem): any {\n return item[this.itemValue] !== undefined ? item[this.itemValue] : item.value;\n }\n\n private getItemText(item: AutocompleteItem): string {\n return item[this.itemText] !== undefined ? String(item[this.itemText]) : String(item.label);\n }\n\n componentWillLoad() {\n this.filterItems();\n if (this.value !== null) {\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedItems = this.value;\n } else if (!this.multiple) {\n const selectedItem = this.items.find(item => this.getItemValue(item) === this.value);\n if (selectedItem) {\n this.searchQuery = this.getItemText(selectedItem);\n }\n }\n }\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n const target = event.target as Node;\n if (!this.el.contains(target)) {\n this.isOpen = false;\n }\n }\n\n private filterItems() {\n if (this.searchQuery.length < this.minSearchLength) {\n this.filteredItems = this.items;\n return;\n }\n\n const query = this.searchQuery.toLowerCase();\n this.filteredItems = this.items.filter(item =>\n this.getItemText(item).toLowerCase().includes(query)\n );\n }\n\n private handleInputFocus = () => {\n if (this.disabled \|\| this.readonly) return;\n this.isOpen = true;\n this.highlightedIndex = -1;\n };\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.searchQuery = input.value;\n this.filterItems();\n this.isOpen = true;\n this.highlightedIndex = -1;\n this.xplorSearch.emit(this.searchQuery);\n\n if (!this.multiple && this.searchQuery === '') {\n this.value = null;\n this.xplorChange.emit(null);\n }\n };\n\n private handleInputKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.isOpen = true;\n this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredItems.length - 1);\n this.scrollToHighlighted();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);\n this.scrollToHighlighted();\n break;\n\n case 'Enter':\n event.preventDefault();\n if (this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredItems.length) {\n this.selectItem(this.filteredItems[this.highlightedIndex]);\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.isOpen = false;\n this.inputEl?.blur();\n break;\n\n case 'Backspace':\n if (this.multiple && this.searchQuery === '' && this.selectedItems.length > 0) {\n event.preventDefault();\n this.removeItem(this.selectedItems[this.selectedItems.length - 1]);\n }\n break;\n }\n };\n\n private scrollToHighlighted() {\n if (this.dropdownEl && this.highlightedIndex >= 0) {\n const highlightedEl = this.dropdownEl.querySelector(`[data-index=\"${this.highlightedIndex}\"]`) as HTMLElement;\n if (highlightedEl) {\n highlightedEl.scrollIntoView({ block: 'nearest' });\n }\n }\n }\n\n private selectItem(item: AutocompleteItem) {\n if (item.disabled) return;\n\n const itemVal = this.getItemValue(item);\n\n if (this.multiple) {\n if (!this.selectedItems.includes(itemVal)) {\n this.selectedItems = [...this.selectedItems, itemVal];\n this.value = this.selectedItems;\n this.xplorChange.emit(this.value);\n }\n this.searchQuery = '';\n this.filterItems();\n } else {\n this.value = itemVal;\n this.searchQuery = this.getItemText(item);\n this.isOpen = false;\n this.xplorChange.emit(this.value);\n }\n\n this.xplorSelect.emit(item);\n this.inputEl?.focus();\n }\n\n private removeItem(value: any) {\n this.selectedItems = this.selectedItems.filter(v => v !== value);\n this.value = this.selectedItems;\n this.xplorChange.emit(this.value);\n }\n\n private handleClear = () => {\n this.value = this.multiple ? [] : null;\n this.selectedItems = [];\n this.searchQuery = '';\n this.filterItems();\n this.xplorChange.emit(this.value);\n this.xplorClear.emit();\n this.inputEl?.focus();\n };\n\n private getSelectedItemLabel(value: any): string {\n const item = this.items.find(i => this.getItemValue(i) === value);\n return item ? this.getItemText(item) : value;\n }\n\n private findItemByValue(value: any): AutocompleteItem \| undefined {\n return this.items.find(i => this.getItemValue(i) === value);\n }\n\n render() {\n const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';\n\n return (\n <Host>\n <div\n class={{\n 'autocomplete': true,\n 'autocomplete--disabled': this.disabled,\n 'autocomplete--readonly': this.readonly,\n 'autocomplete--open': this.isOpen,\n }}\n >\n {this.label && (\n <label class=\"autocomplete__label\">{this.label}</label>\n )}\n\n <div class=\"autocomplete__input-wrapper\">\n {this.multiple && this.selectedItems.length > 0 && (\n <div class=\"autocomplete__chips\">\n {this.selectedItems.map(value => {\n const item = this.findItemByValue(value);\n return (\n <div class=\"autocomplete__chip\">\n <span class=\"autocomplete__chip-label\">\n {this.renderSelection && item ? this.renderSelection(item) : this.getSelectedItemLabel(value)}\n </span>\n <button\n type=\"button\"\n class=\"autocomplete__chip-remove\"\n onClick={() => this.removeItem(value)}\n disabled={this.disabled \|\| this.readonly}\n >\n ×\n </button>\n </div>\n );\n })}\n </div>\n )}\n\n <input\n ref={(el) => (this.inputEl = el)}\n type=\"text\"\n class=\"autocomplete__input\"\n placeholder={this.placeholder}\n value={this.searchQuery}\n onFocus={this.handleInputFocus}\n onInput={this.handleInputChange}\n onKeyDown={this.handleInputKeyDown}\n disabled={this.disabled}\n readonly={this.readonly}\n autocomplete=\"off\"\n />\n\n <div class=\"autocomplete__actions\">\n {this.clearable && hasValue && !this.disabled && !this.readonly && (\n <button\n type=\"button\"\n class=\"autocomplete__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n ×\n </button>\n )}\n <span class=\"autocomplete__icon\">▼</span>\n </div>\n </div>\n\n {this.isOpen && this.filteredItems.length > 0 && (\n <div class=\"autocomplete__dropdown\" ref={(el) => (this.dropdownEl = el)} style={{ maxWidth: this.menuMaxWidth }}>\n {this.filteredItems.map((item, index) => {\n const itemVal = this.getItemValue(item);\n return (\n <div\n key={itemVal}\n data-index={index}\n class={{\n 'autocomplete__item': true,\n 'autocomplete__item--highlighted': index === this.highlightedIndex,\n 'autocomplete__item--selected': this.multiple\n ? this.selectedItems.includes(itemVal)\n : this.value === itemVal,\n 'autocomplete__item--disabled': item.disabled,\n }}\n onClick={() => this.selectItem(item)}\n >\n {this.renderItem ? this.renderItem(item) : this.getItemText(item)}\n </div>\n );\n })}\n </div>\n )}\n\n {this.isOpen && this.filteredItems.length === 0 && (\n <div class=\"autocomplete__dropdown\" style={{ maxWidth: this.menuMaxWidth }}>\n <div class=\"autocomplete__no-results\">No results found</div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-autocomplete.js","mappings":"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","names":["XplorAutocomplete","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-autocomplete/xplor-autocomplete.scss?tag=xplor-autocomplete&encapsulation=scoped","src/components/xplor-autocomplete/xplor-autocomplete.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.autocomplete {\n position: relative;\n width: 100%;\n\n &--disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &--readonly {\n .autocomplete__input {\n background-color: #f5f5f5;\n }\n }\n}\n\n.autocomplete__label {\n display: block;\n font-size: 0.875rem;\n font-weight: 500;\n color: #424242;\n margin-bottom: 0.5rem;\n}\n\n.autocomplete__input-wrapper {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.5rem;\n border: 1px solid #bdbdbd;\n border-radius: 4px;\n padding: 0.5rem;\n background-color: #fff;\n transition: border-color 0.2s, box-shadow 0.2s;\n\n &:focus-within {\n border-color: #1976d2;\n box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n }\n}\n\n.autocomplete__chips {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.autocomplete__chip {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0.5rem;\n background-color: #e3f2fd;\n border-radius: 16px;\n font-size: 0.875rem;\n color: #1976d2;\n}\n\n.autocomplete__chip-label {\n line-height: 1;\n}\n\n.autocomplete__chip-remove {\n background: none;\n border: none;\n font-size: 1.25rem;\n line-height: 1;\n cursor: pointer;\n padding: 0;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #1976d2;\n border-radius: 50%;\n transition: background-color 0.2s;\n\n &:hover:not(:disabled) {\n background-color: rgba(25, 118, 210, 0.1);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\n.autocomplete__input {\n flex: 1;\n min-width: 120px;\n border: none;\n outline: none;\n font-family: inherit;\n font-size: 1rem;\n padding: 0.25rem;\n background: transparent;\n color: #212121;\n\n &::placeholder {\n color: #9e9e9e;\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &[readonly] {\n cursor: default;\n }\n}\n\n.autocomplete__actions {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n flex-shrink: 0;\n}\n\n.autocomplete__clear {\n background: none;\n border: none;\n font-size: 1.25rem;\n line-height: 1;\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 &:hover {\n background-color: #f5f5f5;\n color: #212121;\n }\n}\n\n.autocomplete__icon {\n font-size: 0.75rem;\n color: #757575;\n pointer-events: none;\n transition: transform 0.2s;\n\n .autocomplete--open & {\n transform: rotate(180deg);\n }\n}\n\n.autocomplete__dropdown {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: #fff;\n border: 1px solid #e0e0e0;\n border-radius: 4px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n z-index: 1000;\n}\n\n.autocomplete__item {\n padding: 0.75rem 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n color: #212121;\n\n &:hover:not(&--disabled) {\n background-color: #f5f5f5;\n }\n\n &--highlighted {\n background-color: #e3f2fd;\n }\n\n &--selected {\n background-color: #1976d2;\n color: #fff;\n\n &:hover {\n background-color: #1565c0;\n }\n }\n\n &--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\n.autocomplete__no-results {\n padding: 1rem;\n text-align: center;\n color: #757575;\n font-size: 0.875rem;\n}","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface AutocompleteItem {\n label: string;\n value: any;\n disabled?: boolean;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-autocomplete',\n styleUrl: 'xplor-autocomplete.scss',\n scoped: true,\n})\nexport class XplorAutocomplete {\n @Element() el: HTMLElement;\n\n /*\n Array of items to display in the dropdown\n /\n @Prop() items: AutocompleteItem[] = [];\n\n /\n Selected value\n /\n @Prop({ mutable: true }) value: any = null;\n\n /\n Placeholder text\n /\n @Prop() placeholder: string = 'Search...';\n\n /\n Label for the input\n /\n @Prop() label: string;\n\n /\n Accessible label for the input when no visible label is provided\n /\n @Prop() ariaLabel: string;\n\n /\n Disable the autocomplete\n /\n @Prop() disabled: boolean = false;\n\n /\n Make the autocomplete readonly\n /\n @Prop() readonly: boolean = false;\n\n /\n Clear button\n /\n @Prop() clearable: boolean = false;\n\n /\n Allow multiple selection\n /\n @Prop() multiple: boolean = false;\n\n /\n Minimum characters to trigger search\n /\n @Prop() minSearchLength: number = 0;\n\n /\n Key to extract value from item objects\n /\n @Prop() itemValue: string = 'value';\n\n /\n Key to extract display text from item objects\n /\n @Prop() itemText: string = 'label';\n\n /\n Max width of the dropdown menu\n /\n @Prop() menuMaxWidth: string = '100%';\n\n /\n Custom render function for dropdown items\n /\n @Prop() renderItem: (item: AutocompleteItem) => any;\n\n /\n Custom render function for selected items (chips)\n */\n @Prop() renderSelection: (item: AutocompleteItem) => any;\n\n @State() isOpen: boolean = false;\n @State() searchQuery: string = '';\n @State() filteredItems: AutocompleteItem[] = [];\n @State() selectedItems: any[] = [];\n @State() highlightedIndex: number = -1;\n\n @Event() xplorChange: EventEmitter<any>;\n @Event() xplorSelect: EventEmitter<AutocompleteItem>;\n @Event() xplorClear: EventEmitter<void>;\n @Event() xplorSearch: EventEmitter<string>;\n\n private inputEl: HTMLInputElement;\n private dropdownEl: HTMLDivElement;\n\n private getItemValue(item: AutocompleteItem): any {\n return item[this.itemValue] !== undefined ? item[this.itemValue] : item.value;\n }\n\n private getItemText(item: AutocompleteItem): string {\n return item[this.itemText] !== undefined ? String(item[this.itemText]) : String(item.label);\n }\n\n componentWillLoad() {\n this.filterItems();\n if (this.value !== null) {\n if (this.multiple && Array.isArray(this.value)) {\n this.selectedItems = this.value;\n } else if (!this.multiple) {\n const selectedItem = this.items.find(item => this.getItemValue(item) === this.value);\n if (selectedItem) {\n this.searchQuery = this.getItemText(selectedItem);\n }\n }\n }\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n const target = event.target as Node;\n if (!this.el.contains(target)) {\n this.isOpen = false;\n }\n }\n\n private filterItems() {\n if (this.searchQuery.length < this.minSearchLength) {\n this.filteredItems = this.items;\n return;\n }\n\n const query = this.searchQuery.toLowerCase();\n this.filteredItems = this.items.filter(item =>\n this.getItemText(item).toLowerCase().includes(query)\n );\n }\n\n private handleInputFocus = () => {\n if (this.disabled \|\| this.readonly) return;\n this.isOpen = true;\n this.highlightedIndex = -1;\n };\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.searchQuery = input.value;\n this.filterItems();\n this.isOpen = true;\n this.highlightedIndex = -1;\n this.xplorSearch.emit(this.searchQuery);\n\n if (!this.multiple && this.searchQuery === '') {\n this.value = null;\n this.xplorChange.emit(null);\n }\n };\n\n private handleInputKeyDown = (event: KeyboardEvent) => {\n if (this.disabled \|\| this.readonly) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.isOpen = true;\n this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredItems.length - 1);\n this.scrollToHighlighted();\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.highlightedIndex = Math.max(this.highlightedIndex - 1, -1);\n this.scrollToHighlighted();\n break;\n\n case 'Enter':\n event.preventDefault();\n if (this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredItems.length) {\n this.selectItem(this.filteredItems[this.highlightedIndex]);\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.isOpen = false;\n this.inputEl?.blur();\n break;\n\n case 'Backspace':\n if (this.multiple && this.searchQuery === '' && this.selectedItems.length > 0) {\n event.preventDefault();\n this.removeItem(this.selectedItems[this.selectedItems.length - 1]);\n }\n break;\n }\n };\n\n private scrollToHighlighted() {\n if (this.dropdownEl && this.highlightedIndex >= 0) {\n const highlightedEl = this.dropdownEl.querySelector(`[data-index=\"${this.highlightedIndex}\"]`) as HTMLElement;\n if (highlightedEl) {\n highlightedEl.scrollIntoView({ block: 'nearest' });\n }\n }\n }\n\n private selectItem(item: AutocompleteItem) {\n if (item.disabled) return;\n\n const itemVal = this.getItemValue(item);\n\n if (this.multiple) {\n if (!this.selectedItems.includes(itemVal)) {\n this.selectedItems = [...this.selectedItems, itemVal];\n this.value = this.selectedItems;\n this.xplorChange.emit(this.value);\n }\n this.searchQuery = '';\n this.filterItems();\n } else {\n this.value = itemVal;\n this.searchQuery = this.getItemText(item);\n this.isOpen = false;\n this.xplorChange.emit(this.value);\n }\n\n this.xplorSelect.emit(item);\n this.inputEl?.focus();\n }\n\n private removeItem(value: any) {\n this.selectedItems = this.selectedItems.filter(v => v !== value);\n this.value = this.selectedItems;\n this.xplorChange.emit(this.value);\n }\n\n private handleClear = () => {\n this.value = this.multiple ? [] : null;\n this.selectedItems = [];\n this.searchQuery = '';\n this.filterItems();\n this.xplorChange.emit(this.value);\n this.xplorClear.emit();\n this.inputEl?.focus();\n };\n\n private getSelectedItemLabel(value: any): string {\n const item = this.items.find(i => this.getItemValue(i) === value);\n return item ? this.getItemText(item) : value;\n }\n\n private findItemByValue(value: any): AutocompleteItem \| undefined {\n return this.items.find(i => this.getItemValue(i) === value);\n }\n\n render() {\n const hasValue = this.multiple ? this.selectedItems.length > 0 : this.value !== null && this.searchQuery !== '';\n const listboxId = 'autocomplete-listbox';\n const labelId = 'autocomplete-label';\n const activeDescendantId = this.highlightedIndex >= 0 ? `autocomplete-option-${this.highlightedIndex}` : undefined;\n\n return (\n <Host>\n <div\n class={{\n 'autocomplete': true,\n 'autocomplete--disabled': this.disabled,\n 'autocomplete--readonly': this.readonly,\n 'autocomplete--open': this.isOpen,\n }}\n >\n {this.label && (\n <label class=\"autocomplete__label\" id={labelId}>{this.label}</label>\n )}\n\n <div class=\"autocomplete__input-wrapper\">\n {this.multiple && this.selectedItems.length > 0 && (\n <div class=\"autocomplete__chips\">\n {this.selectedItems.map(value => {\n const item = this.findItemByValue(value);\n const chipLabel = this.getSelectedItemLabel(value);\n return (\n <div class=\"autocomplete__chip\">\n <span class=\"autocomplete__chip-label\">\n {this.renderSelection && item ? this.renderSelection(item) : chipLabel}\n </span>\n <button\n type=\"button\"\n class=\"autocomplete__chip-remove\"\n onClick={() => this.removeItem(value)}\n disabled={this.disabled \|\| this.readonly}\n aria-label={`Remove ${chipLabel}`}\n >\n ×\n </button>\n </div>\n );\n })}\n </div>\n )}\n\n <input\n ref={(el) => (this.inputEl = el)}\n type=\"text\"\n class=\"autocomplete__input\"\n placeholder={this.placeholder}\n value={this.searchQuery}\n onFocus={this.handleInputFocus}\n onInput={this.handleInputChange}\n onKeyDown={this.handleInputKeyDown}\n disabled={this.disabled}\n readonly={this.readonly}\n autocomplete=\"off\"\n role=\"combobox\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-controls={this.isOpen ? listboxId : undefined}\n aria-activedescendant={activeDescendantId}\n aria-labelledby={this.label ? labelId : undefined}\n aria-label={!this.label ? (this.ariaLabel \|\| this.placeholder) : undefined}\n aria-autocomplete=\"list\"\n />\n\n <div class=\"autocomplete__actions\">\n {this.clearable && hasValue && !this.disabled && !this.readonly && (\n <button\n type=\"button\"\n class=\"autocomplete__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear selection\"\n >\n ×\n </button>\n )}\n <span class=\"autocomplete__icon\" aria-hidden=\"true\">▼</span>\n </div>\n </div>\n\n {this.isOpen && this.filteredItems.length > 0 && (\n <div\n class=\"autocomplete__dropdown\"\n ref={(el) => (this.dropdownEl = el)}\n style={{ maxWidth: this.menuMaxWidth }}\n role=\"listbox\"\n id={listboxId}\n aria-label={this.label \|\| this.ariaLabel \|\| 'Suggestions'}\n >\n {this.filteredItems.map((item, index) => {\n const itemVal = this.getItemValue(item);\n const isSelected = this.multiple\n ? this.selectedItems.includes(itemVal)\n : this.value === itemVal;\n return (\n <div\n key={itemVal}\n id={`autocomplete-option-${index}`}\n data-index={index}\n role=\"option\"\n aria-selected={isSelected ? 'true' : 'false'}\n aria-disabled={item.disabled ? 'true' : undefined}\n class={{\n 'autocomplete__item': true,\n 'autocomplete__item--highlighted': index === this.highlightedIndex,\n 'autocomplete__item--selected': isSelected,\n 'autocomplete__item--disabled': item.disabled,\n }}\n onClick={() => this.selectItem(item)}\n >\n {this.renderItem ? this.renderItem(item) : this.getItemText(item)}\n </div>\n );\n })}\n </div>\n )}\n\n {this.isOpen && this.filteredItems.length === 0 && (\n <div class=\"autocomplete__dropdown\" style={{ maxWidth: this.menuMaxWidth }} role=\"listbox\" id={listboxId}>\n <div class=\"autocomplete__no-results\" role=\"option\" aria-disabled=\"true\">No results found</div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-avatar-and-name.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-B1W2qj2l.js';
+import { d as defineCustomElement$2 } from './p-B3zR7peH.js';
 const xplorAvatarAndNameCss = "@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-avatar-and-name {\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-avatar-and-name {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-avatar-and-name {\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-avatar-and-name {\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-avatar-and-name {\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-avatar-and-name {\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-avatar-and-name, ul.sc-xplor-avatar-and-name {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-avatar-and-name li.sc-xplor-avatar-and-name, ul.sc-xplor-avatar-and-name li.sc-xplor-avatar-and-name {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-avatar-and-name, ul.mdc-list.sc-xplor-avatar-and-name {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-avatar-and-name li.mdc-list-item.sc-xplor-avatar-and-name, ul.mdc-list.sc-xplor-avatar-and-name li.mdc-list-item.sc-xplor-avatar-and-name {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-avatar-and-name {\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-avatar-and-name {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-avatar-and-name {\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-avatar-and-name {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-avatar-and-name .mdc-text-field--outlined.sc-xplor-avatar-and-name .mdc-notched-outline__notch.sc-xplor-avatar-and-name {\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-avatar-and-name .mdc-notched-outline__notch.sc-xplor-avatar-and-name {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-avatar-and-name .mdc-notched-outline.sc-xplor-avatar-and-name .mdc-notched-outline__notch.sc-xplor-avatar-and-name {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn.sc-xplor-avatar-and-name {\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-avatar-and-name:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-avatar-and-name {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-avatar-and-name-h {\n  display: inline-block;\n}\n\n.avatar-and-name.sc-xplor-avatar-and-name {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.avatar-and-name__text.sc-xplor-avatar-and-name {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: #212121;\n  line-height: 1.5;\n}";

package/components/xplor-avatar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { X as XplorAvatar$1, d as defineCustomElement$1 } from './p-B1W2qj2l.js';
+import { X as XplorAvatar$1, d as defineCustomElement$1 } from './p-B3zR7peH.js';
 const XplorAvatar = XplorAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/components/xplor-btn-back-to-parent.js CHANGED Viewed

@@ -27,6 +27,10 @@ const XplorBtnBackToParent$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnBa
          * Visual variant
          */
         this.variant = 'tonal';
+        /**
+         * Accessible label for the button
+         */
+        this.ariaLabel = 'Back to parent';
         this.handleClick = () => {
             this.back.emit();
         };
@@ -39,7 +43,7 @@ const XplorBtnBackToParent$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnBa
         const buttonStyles = {
             '--btn-size': this.size,
         };
-        return (h(Host, { key: '9ea4d137e9f4c80d0f5586953c5d463f365f5205' }, h("button", { key: '1e1839f03ca09a8a106a6f2ee2d7ca0a7b407588', class: buttonClasses, style: buttonStyles, onClick: this.handleClick }, h("span", { key: '50f7ee25b402d4ee796670ab59ad3c1085a0138d', class: "xplor-btn-back-to-parent__icon" }, "\u2715"))));
+        return (h(Host, { key: '0962b04ae634f044dd3e7c1eacf42b7d2c8e0f1e' }, h("button", { key: '82cb8fa3218a17784a0ab360d328b68f2c0e6e81', class: buttonClasses, style: buttonStyles, onClick: this.handleClick, "aria-label": this.ariaLabel }, h("span", { key: '784853baa5b013fc85a07054e446e6166eab7068', class: "xplor-btn-back-to-parent__icon" }, "\u2715"))));
     }
     static get style() { return xplorBtnBackToParentCss; }
 }, [2, "xplor-btn-back-to-parent", {
@@ -47,7 +51,8 @@ const XplorBtnBackToParent$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnBa
         "inline": [4],
         "bgColor": [1, "bg-color"],
         "color": [1],
-        "variant": [1]
+        "variant": [1],
+        "ariaLabel": [1, "aria-label"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/xplor-btn-back-to-parent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-btn-back-to-parent.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,wrPAAwrP;;MCO3sPA,sBAAoB,iBAAAC,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AALjC,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,SAAS;AAEhC;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,WAAW;AAEnC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA+C,OAAO;~~AAO7D~~,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AAClB,SAAC;~~AAwBF~~;~~IAtBC~~,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,0BAA0B,EAAE,IAAI;YAChC,kCAAkC,EAAE,IAAI,CAAC,MAAM;SAChD;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,YAAY,EAAE,IAAI,CAAC,IAAI;SACxB;~~QAED~~,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,~~EAEzB~~,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gCAAgC,aAAS,CAC9C,CACJ~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorBtnBackToParent","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.scss?tag=xplor-btn-back-to-parent&encapsulation=scoped","src/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.xplor-btn-back-to-parent {\n position: absolute;\n right: 1rem;\n top: 1rem;\n font-size: 1rem;\n z-index: 1;\n padding: 0;\n width: var(--btn-size, 2.25rem);\n height: var(--btn-size, 2.25rem);\n border: none;\n border-radius: 4px;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: #008480;\n transition: background-color 0.2s ease;\n\n &__icon {\n font-size: 1rem;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n background-color: #E6F7F7;\n }\n\n &--inline {\n position: relative;\n top: 0;\n right: 0;\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'xplor-btn-back-to-parent',\n styleUrl: 'xplor-btn-back-to-parent.scss',\n scoped: true,\n})\nexport class XplorBtnBackToParent {\n /*\n Button size\n /\n @Prop() size: string = '2.25rem';\n\n /\n Whether to use inline (relative) positioning instead of absolute\n /\n @Prop() inline: boolean = false;\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Text/icon color\n /\n @Prop() color: string = 'secondary';\n\n /\n Visual variant\n /\n @Prop() variant: 'text' \| 'outlined' \| 'elevated' \| 'tonal' = 'tonal';\n\n /\n Back event (emitted on click)\n */\n @Event() back: EventEmitter<void>;\n\n private handleClick = () => {\n this.back.emit();\n };\n\n render() {\n const buttonClasses = {\n 'xplor-btn-back-to-parent': true,\n 'xplor-btn-back-to-parent--inline': this.inline,\n };\n\n const buttonStyles = {\n '--btn-size': this.size,\n };\n\n return (\n <Host>\n <button\n class={buttonClasses}\n style={buttonStyles}\n onClick={this.handleClick}\n >\n <span class=\"xplor-btn-back-to-parent__icon\">✕</span>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-btn-back-to-parent.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,wrPAAwrP;;MCO3sPA,sBAAoB,iBAAAC,kBAAA,CAAA,MAAA,oBAAA,SAAAC,CAAA,CAAA;AALjC,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,SAAS;AAEhC;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/B;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,OAAO;AAEjC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,WAAW;AAEnC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA+C,OAAO;AAErE;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAW,gBAAgB;AAOpC,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AAClB,SAAC;AAyBF;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,0BAA0B,EAAE,IAAI;YAChC,kCAAkC,EAAE,IAAI,CAAC,MAAM;SAChD;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,YAAY,EAAE,IAAI,CAAC,IAAI;SACxB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,EACb,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAE1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gCAAgC,aAAS,CAC9C,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnBackToParent","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.scss?tag=xplor-btn-back-to-parent&encapsulation=scoped","src/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.xplor-btn-back-to-parent {\n position: absolute;\n right: 1rem;\n top: 1rem;\n font-size: 1rem;\n z-index: 1;\n padding: 0;\n width: var(--btn-size, 2.25rem);\n height: var(--btn-size, 2.25rem);\n border: none;\n border-radius: 4px;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n color: #008480;\n transition: background-color 0.2s ease;\n\n &__icon {\n font-size: 1rem;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n background-color: #E6F7F7;\n }\n\n &--inline {\n position: relative;\n top: 0;\n right: 0;\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'xplor-btn-back-to-parent',\n styleUrl: 'xplor-btn-back-to-parent.scss',\n scoped: true,\n})\nexport class XplorBtnBackToParent {\n /*\n Button size\n /\n @Prop() size: string = '2.25rem';\n\n /\n Whether to use inline (relative) positioning instead of absolute\n /\n @Prop() inline: boolean = false;\n\n /\n Background color\n /\n @Prop() bgColor: string = 'white';\n\n /\n Text/icon color\n /\n @Prop() color: string = 'secondary';\n\n /\n Visual variant\n /\n @Prop() variant: 'text' \| 'outlined' \| 'elevated' \| 'tonal' = 'tonal';\n\n /\n Accessible label for the button\n /\n @Prop() ariaLabel: string = 'Back to parent';\n\n /\n Back event (emitted on click)\n */\n @Event() back: EventEmitter<void>;\n\n private handleClick = () => {\n this.back.emit();\n };\n\n render() {\n const buttonClasses = {\n 'xplor-btn-back-to-parent': true,\n 'xplor-btn-back-to-parent--inline': this.inline,\n };\n\n const buttonStyles = {\n '--btn-size': this.size,\n };\n\n return (\n <Host>\n <button\n class={buttonClasses}\n style={buttonStyles}\n onClick={this.handleClick}\n aria-label={this.ariaLabel}\n >\n <span class=\"xplor-btn-back-to-parent__icon\">✕</span>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-btn-icon.js CHANGED Viewed

@@ -44,7 +44,7 @@ const XplorBtnIcon$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnIcon exten
             '--btn-size': typeof this.size === 'number' ? `${this.size}px` : this.size,
             '--icon-size': typeof this.iconSize === 'number' ? `${this.iconSize}px` : this.iconSize,
         };
-        return (h(Host, { key: 'd5077956c7999278384896a9a7a6bc011a6c84fe' }, h("button", { key: '8c58f798cdfd47607c4d7275d1a1d3c63c34d96d', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick }, h("span", { key: 'b2da80152f63a20cd4c284103c344e1c95f76f10', class: "xplor-btn-icon__content" }, h("slot", { key: 'de99b1a981800af7c0639cb0d1188268a9a408e1' })))));
+        return (h(Host, { key: '9d87aab5e3af33201c71dffeab51a5a02cc61e98' }, h("button", { key: 'c30b8c4aa51a957c84e7fff3d72e01961dec911c', class: buttonClasses, style: buttonStyles, disabled: this.disabled, onClick: this.handleClick, "aria-label": this.ariaLabel }, h("span", { key: '99773527f599523638ce8463fe308826f01202cf', class: "xplor-btn-icon__content" }, h("slot", { key: '14e1356bcecd1d2b8768cddbaf257f49bf92e5a7' })))));
     }
     static get style() { return xplorBtnIconCss; }
 }, [6, "xplor-btn-icon", {
@@ -52,7 +52,8 @@ const XplorBtnIcon$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnIcon exten
         "size": [8],
         "iconSize": [8, "icon-size"],
         "variant": [1],
-        "disabled": [4]
+        "disabled": [4],
+        "ariaLabel": [1, "aria-label"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/xplor-btn-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-btn-icon.js","mappings":";;AAAA,MAAM,eAAe,GAAG,wjUAAwjU;;MCOnkUA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAiD,WAAW;AAEzE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAoB,IAAI;AAEpC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAoB,IAAI;AAExC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA+C,UAAU;AAExE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;~~AAOzB~~,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE/B,SAAC;~~AA8BF~~;~~IA5BC~~,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,CAAC,mBAAmB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AACvC,YAAA,CAAC,mBAAmB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YACzC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;SAC1C;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,YAAY,EAAE,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA,GAAG,IAAI,CAAC,IAAI;YAC1E,aAAa,EAAE,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAI,EAAA,CAAA,GAAG,IAAI,CAAC,QAAQ;SACxF;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,~~CAAA~~,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EACE~~,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,~~EAEzB~~,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACA,CACJ~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorBtnIcon","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-icon/xplor-btn-icon.scss?tag=xplor-btn-icon&encapsulation=scoped","src/components/xplor-btn-icon/xplor-btn-icon.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.xplor-btn-icon {\n min-width: 0;\n min-height: 0;\n width: var(--btn-size, 32px);\n height: var(--btn-size, 32px);\n padding: 0;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n position: relative;\n\n &__content {\n font-size: var(--icon-size, 18px);\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n // Elevated variant (default)\n &--elevated {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),\n 0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n }\n\n // Text variant\n &--text {\n box-shadow: none;\n }\n\n // Outlined variant\n &--outlined {\n border: 1px solid currentColor;\n box-shadow: none;\n }\n\n // Tonal variant\n &--tonal {\n box-shadow: none;\n }\n\n // Color variants\n &--primary {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #EC7702;\n color: white;\n }\n\n &.xplor-btn-icon--outlined {\n background-color: transparent;\n color: #EC7702;\n border-color: #EC7702;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #FFF3E6;\n color: #EC7702;\n }\n\n &:hover:not(.xplor-btn-icon--disabled) {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #D66A02;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #FFE7CC;\n }\n }\n }\n\n &--secondary {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #008480;\n color: white;\n }\n\n &.xplor-btn-icon--outlined {\n background-color: transparent;\n color: #008480;\n border-color: #008480;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #E6F7F7;\n color: #008480;\n }\n\n &:hover:not(.xplor-btn-icon--disabled) {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #006D6A;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #008480;\n color: white;\n }\n }\n }\n\n &--success {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #489951;\n color: white;\n }\n\n &.xplor-btn-icon--outlined {\n background-color: transparent;\n color: #489951;\n border-color: #489951;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #E8F5E9;\n color: #489951;\n }\n\n &:hover:not(.xplor-btn-icon--disabled) {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #3D8044;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #D0EBD2;\n }\n }\n }\n\n &--disabled {\n opacity: 0.38;\n cursor: not-allowed;\n pointer-events: none;\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'xplor-btn-icon',\n styleUrl: 'xplor-btn-icon.scss',\n scoped: true,\n})\nexport class XplorBtnIcon {\n /*\n Button color variant\n /\n @Prop() color: 'primary' \| 'secondary' \| 'success' \| string = 'secondary';\n\n /\n Button size (can be pixel value like '32' or '48')\n /\n @Prop() size: string \| number = '32';\n\n /\n Icon size\n /\n @Prop() iconSize: string \| number = '18';\n\n /\n Visual variant\n /\n @Prop() variant: 'text' \| 'outlined' \| 'elevated' \| 'tonal' = 'elevated';\n\n /\n Whether the button is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Click event\n */\n @Event() xplorClick: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent) => {\n if (!this.disabled) {\n this.xplorClick.emit(event);\n }\n };\n\n render() {\n const buttonClasses = {\n 'xplor-btn-icon': true,\n [`xplor-btn-icon--${this.color}`]: true,\n [`xplor-btn-icon--${this.variant}`]: true,\n 'xplor-btn-icon--disabled': this.disabled,\n };\n\n const buttonStyles = {\n '--btn-size': typeof this.size === 'number' ? `${this.size}px` : this.size,\n '--icon-size': typeof this.iconSize === 'number' ? `${this.iconSize}px` : this.iconSize,\n };\n\n return (\n <Host>\n <button\n class={buttonClasses}\n style={buttonStyles}\n disabled={this.disabled}\n onClick={this.handleClick}\n >\n <span class=\"xplor-btn-icon__content\">\n <slot />\n </span>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-btn-icon.js","mappings":";;AAAA,MAAM,eAAe,GAAG,wjUAAwjU;;MCOnkUA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAiD,WAAW;AAEzE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAoB,IAAI;AAEpC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAoB,IAAI;AAExC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA+C,UAAU;AAExE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAYzB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE/B,SAAC;AA+BF;IA7BC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,CAAC,mBAAmB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AACvC,YAAA,CAAC,mBAAmB,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YACzC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;SAC1C;AAED,QAAA,MAAM,YAAY,GAAG;YACnB,YAAY,EAAE,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA,GAAG,IAAI,CAAC,IAAI;YAC1E,aAAa,EAAE,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAI,EAAA,CAAA,GAAG,IAAI,CAAC,QAAQ;SACxF;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EACb,IAAI,CAAC,SAAS,EAAA,EAE1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorBtnIcon","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-icon/xplor-btn-icon.scss?tag=xplor-btn-icon&encapsulation=scoped","src/components/xplor-btn-icon/xplor-btn-icon.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n.xplor-btn-icon {\n min-width: 0;\n min-height: 0;\n width: var(--btn-size, 32px);\n height: var(--btn-size, 32px);\n padding: 0;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n position: relative;\n\n &__content {\n font-size: var(--icon-size, 18px);\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n // Elevated variant (default)\n &--elevated {\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),\n 0px 2px 2px 0px rgba(0, 0, 0, 0.14),\n 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n }\n\n // Text variant\n &--text {\n box-shadow: none;\n }\n\n // Outlined variant\n &--outlined {\n border: 1px solid currentColor;\n box-shadow: none;\n }\n\n // Tonal variant\n &--tonal {\n box-shadow: none;\n }\n\n // Color variants\n &--primary {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #EC7702;\n color: white;\n }\n\n &.xplor-btn-icon--outlined {\n background-color: transparent;\n color: #EC7702;\n border-color: #EC7702;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #FFF3E6;\n color: #EC7702;\n }\n\n &:hover:not(.xplor-btn-icon--disabled) {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #D66A02;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #FFE7CC;\n }\n }\n }\n\n &--secondary {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #008480;\n color: white;\n }\n\n &.xplor-btn-icon--outlined {\n background-color: transparent;\n color: #008480;\n border-color: #008480;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #E6F7F7;\n color: #008480;\n }\n\n &:hover:not(.xplor-btn-icon--disabled) {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #006D6A;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #008480;\n color: white;\n }\n }\n }\n\n &--success {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #489951;\n color: white;\n }\n\n &.xplor-btn-icon--outlined {\n background-color: transparent;\n color: #489951;\n border-color: #489951;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #E8F5E9;\n color: #489951;\n }\n\n &:hover:not(.xplor-btn-icon--disabled) {\n &.xplor-btn-icon--elevated,\n &.xplor-btn-icon--text {\n background-color: #3D8044;\n }\n\n &.xplor-btn-icon--tonal {\n background-color: #D0EBD2;\n }\n }\n }\n\n &--disabled {\n opacity: 0.38;\n cursor: not-allowed;\n pointer-events: none;\n }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'xplor-btn-icon',\n styleUrl: 'xplor-btn-icon.scss',\n scoped: true,\n})\nexport class XplorBtnIcon {\n /*\n Button color variant\n /\n @Prop() color: 'primary' \| 'secondary' \| 'success' \| string = 'secondary';\n\n /\n Button size (can be pixel value like '32' or '48')\n /\n @Prop() size: string \| number = '32';\n\n /\n Icon size\n /\n @Prop() iconSize: string \| number = '18';\n\n /\n Visual variant\n /\n @Prop() variant: 'text' \| 'outlined' \| 'elevated' \| 'tonal' = 'elevated';\n\n /\n Whether the button is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Accessible label for the icon button (required for screen readers)\n /\n @Prop() ariaLabel: string;\n\n /\n Click event\n */\n @Event() xplorClick: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent) => {\n if (!this.disabled) {\n this.xplorClick.emit(event);\n }\n };\n\n render() {\n const buttonClasses = {\n 'xplor-btn-icon': true,\n [`xplor-btn-icon--${this.color}`]: true,\n [`xplor-btn-icon--${this.variant}`]: true,\n 'xplor-btn-icon--disabled': this.disabled,\n };\n\n const buttonStyles = {\n '--btn-size': typeof this.size === 'number' ? `${this.size}px` : this.size,\n '--icon-size': typeof this.iconSize === 'number' ? `${this.iconSize}px` : this.iconSize,\n };\n\n return (\n <Host>\n <button\n class={buttonClasses}\n style={buttonStyles}\n disabled={this.disabled}\n onClick={this.handleClick}\n aria-label={this.ariaLabel}\n >\n <span class=\"xplor-btn-icon__content\">\n <slot />\n </span>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-btn-menu.js CHANGED Viewed

@@ -35,6 +35,10 @@ const XplorBtnMenu$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnMenu exten
          * 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;
@@ -42,10 +46,16 @@ const XplorBtnMenu$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnMenu exten
         };
         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);
@@ -60,28 +70,115 @@ const XplorBtnMenu$1 = /*@__PURE__*/ proxyCustomElement(class XplorBtnMenu exten
     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 (h(Host, { key: '3e9516c7c2b31794bf8d71eb5672e46d3210dbc8' }, h("div", { key: 'e030d7ab1b7eee7fc8de9a6a519c69c285d01529', class: "xplor-btn-menu", ref: (el) => (this.menuRef = el) }, h("slot", { key: '185cb5433a18d51ea7e2f9b9309f7570050fdcea', name: "activator" }, h("button", { key: 'de5afd1f3e58b56301ea75724f0f1a5e04697f39', class: "xplor-btn-menu__button", onClick: this.toggleMenu }, h("span", { key: '73eaed41e0a754d06753f0fa30ef32864f2841f8' }, this.label), h("span", { key: '63bc890fe97154d02eb4da50e689f1db5226870f', class: "xplor-btn-menu__icon" }, "\u25BC"))), this.show && (h("div", { key: '6f231d7e1feac5dca59c9ef03d45dcfeffcedcbf', class: "xplor-btn-menu__list" }, this.options.map((option, index) => {
+        const menuId = 'xplor-btn-menu-list';
+        let visibleIndex = 0;
+        return (h(Host, { key: '20b1a4d54b992d5ea4b1a4cd8fbaa5699b1bc6ab' }, h("div", { key: 'e23725f6fa432e19b59a3c0809706df45df02def', class: "xplor-btn-menu", ref: (el) => (this.menuRef = el) }, h("slot", { key: 'ed385faab26b9a1bf83ed583261b0d22744a5b10', name: "activator" }, 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' }, h("span", { key: 'b1126eb8ffc12a89b3dd1a83afd5f644226496ee' }, this.label), h("span", { key: 'f9053a73065841d35278612e8f9d5345b3e1daf4', class: "xplor-btn-menu__icon", "aria-hidden": "true" }, "\u25BC"))), this.show && (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) => {
             const key = option.key || String(index);
             if (this.isHidden(key)) {
                 return null;
             }
-            return (h("div", { key: key, class: {
+            const disabled = this.isDisabled(key);
+            const currentVisibleIndex = visibleIndex++;
+            return (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) }, h("slot", { name: key }, option.label || '')));
+                    'xplor-btn-menu__item--disabled': disabled,
+                }, onClick: () => !disabled && this.handleClickOption(option) }, h("slot", { name: key }, option.label || '')));
         }))))));
     }
+    get el() { return this; }
     static get style() { return xplorBtnMenuCss; }
 }, [6, "xplor-btn-menu", {
+        "ariaLabel": [1, "aria-label"],
         "label": [1],
         "options": [16],
         "hiddenKeys": [16, "hidden-keys"],
         "disabledKeys": [16, "disabled-keys"],
         "color": [1],
         "density": [1],
-        "show": [32]
-    }]);
+        "show": [32],
+        "focusedIndex": [32]
+    }, [[0, "keydown", "handleKeyDown"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/xplor-btn-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-btn-menu.js","mappings":"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","names":["XplorBtnMenu","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-menu/xplor-btn-menu.scss?tag=xplor-btn-menu&encapsulation=scoped","src/components/xplor-btn-menu/xplor-btn-menu.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n}\n\n.xplor-btn-menu {\n position: relative;\n display: inline-block;\n\n &__button {\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n padding: 0.5rem 1rem;\n border: 1px solid #008480;\n border-radius: 4px;\n background-color: transparent;\n color: #008480;\n cursor: pointer;\n font-size: inherit;\n font-family: inherit;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: rgba(0, 132, 128, 0.04);\n }\n }\n\n &__icon {\n font-size: 0.75rem;\n line-height: 1;\n }\n\n &__list {\n position: absolute;\n top: calc(100% + 0.25rem);\n left: 0;\n min-width: 200px;\n background: white;\n border-radius: 4px;\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n z-index: 1000;\n overflow: hidden;\n }\n\n &__item {\n padding: 0.75rem 1rem;\n border-bottom: 1px solid #e0e0e0;\n text-align: center;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:hover:not(&--disabled) {\n background-color: #f5f5f5;\n }\n\n &:last-child {\n border-bottom: none;\n }\n\n &--disabled {\n opacity: 0.38;\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\nexport interface MenuOption {\n key?: string;\n label: string;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-btn-menu',\n styleUrl: 'xplor-btn-menu.scss',\n scoped: true,\n})\nexport class XplorBtnMenu {\n /*\n Button label\n /\n @Prop() label: string = '';\n\n /\n Menu options\n /\n @Prop() options: MenuOption[] = [];\n\n /\n Hidden option keys\n /\n @Prop() hiddenKeys: string[] = [];\n\n /\n Disabled option keys\n /\n @Prop() disabledKeys: string[] = [];\n\n /\n Button color\n /\n @Prop() color: string = 'secondary';\n\n /\n Button density (compact, default, comfortable)\n /\n @Prop() density: string = 'default';\n\n /\n Whether the menu is open\n /\n @State() show: boolean = false;\n\n /\n Click event - emits the clicked option\n */\n @Event() xplorClick: EventEmitter<MenuOption>;\n\n private menuRef: HTMLDivElement;\n\n componentDidLoad() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n\n private handleOutsideClick = (event: MouseEvent) => {\n if (this.menuRef && !this.menuRef.contains(event.target as Node)) {\n this.show = false;\n }\n };\n\n private toggleMenu = () => {\n this.show = !this.show;\n };\n\n private handleClickOption = (option: MenuOption) => {\n this.xplorClick.emit(option);\n this.show = false;\n };\n\n private isHidden = (key: string \| null): boolean => {\n return key !== null && this.hiddenKeys.includes(key);\n };\n\n private isDisabled = (key: string \| null): boolean => {\n return key !== null && this.disabledKeys.includes(key);\n };\n\n render() {\n return (\n <Host>\n <div class=\"xplor-btn-menu\" ref={(el) => (this.menuRef = el)}>\n <slot name=\"activator\">\n <button\n class=\"xplor-btn-menu__button\"\n onClick={this.toggleMenu}\n >\n <span>{this.label}</span>\n <span class=\"xplor-btn-menu__icon\">▼</span>\n </button>\n </slot>\n\n {this.show && (\n <div class=\"xplor-btn-menu__list\">\n {this.options.map((option, index) => {\n const key = option.key \|\| String(index);\n if (this.isHidden(key)) {\n return null;\n }\n\n return (\n <div\n key={key}\n class={{\n 'xplor-btn-menu__item': true,\n 'xplor-btn-menu__item--disabled': this.isDisabled(key),\n }}\n onClick={() => !this.isDisabled(key) && this.handleClickOption(option)}\n >\n <slot name={key}>{option.label \|\| ''}</slot>\n </div>\n );\n })}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-btn-menu.js","mappings":"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","names":["XplorBtnMenu","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-btn-menu/xplor-btn-menu.scss?tag=xplor-btn-menu&encapsulation=scoped","src/components/xplor-btn-menu/xplor-btn-menu.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n}\n\n.xplor-btn-menu {\n position: relative;\n display: inline-block;\n\n &__button {\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n padding: 0.5rem 1rem;\n border: 1px solid #008480;\n border-radius: 4px;\n background-color: transparent;\n color: #008480;\n cursor: pointer;\n font-size: inherit;\n font-family: inherit;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: rgba(0, 132, 128, 0.04);\n }\n }\n\n &__icon {\n font-size: 0.75rem;\n line-height: 1;\n }\n\n &__list {\n position: absolute;\n top: calc(100% + 0.25rem);\n left: 0;\n min-width: 200px;\n background: white;\n border-radius: 4px;\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),\n 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n z-index: 1000;\n overflow: hidden;\n }\n\n &__item {\n padding: 0.75rem 1rem;\n border-bottom: 1px solid #e0e0e0;\n text-align: center;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:hover:not(&--disabled) {\n background-color: #f5f5f5;\n }\n\n &:last-child {\n border-bottom: none;\n }\n\n &--disabled {\n opacity: 0.38;\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface MenuOption {\n key?: string;\n label: string;\n [key: string]: any;\n}\n\n@Component({\n tag: 'xplor-btn-menu',\n styleUrl: 'xplor-btn-menu.scss',\n scoped: true,\n})\nexport class XplorBtnMenu {\n @Element() el: HTMLElement;\n\n /*\n Accessible label for the menu trigger button when no visible label is provided\n /\n @Prop() ariaLabel: string;\n\n /\n Button label\n /\n @Prop() label: string = '';\n\n /\n Menu options\n /\n @Prop() options: MenuOption[] = [];\n\n /\n Hidden option keys\n /\n @Prop() hiddenKeys: string[] = [];\n\n /\n Disabled option keys\n /\n @Prop() disabledKeys: string[] = [];\n\n /\n Button color\n /\n @Prop() color: string = 'secondary';\n\n /\n Button density (compact, default, comfortable)\n /\n @Prop() density: string = 'default';\n\n /\n Whether the menu is open\n /\n @State() show: boolean = false;\n\n /\n Index of the currently focused menu item for keyboard navigation\n /\n @State() focusedIndex: number = -1;\n\n /\n Click event - emits the clicked option\n /\n @Event() xplorClick: EventEmitter<MenuOption>;\n\n private menuRef: HTMLDivElement;\n private triggerBtnRef: HTMLButtonElement;\n\n componentDidLoad() {\n document.addEventListener('click', this.handleOutsideClick);\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this.handleOutsideClick);\n }\n\n private handleOutsideClick = (event: MouseEvent) => {\n if (this.menuRef && !this.menuRef.contains(event.target as Node)) {\n this.show = false;\n }\n };\n\n private toggleMenu = () => {\n this.show = !this.show;\n if (!this.show) {\n this.focusedIndex = -1;\n }\n };\n\n private handleClickOption = (option: MenuOption) => {\n this.xplorClick.emit(option);\n this.show = false;\n this.focusedIndex = -1;\n this.triggerBtnRef?.focus();\n };\n\n /\n Returns the list of visible (non-hidden) options for keyboard navigation\n /\n private getVisibleOptions(): { option: MenuOption; key: string }[] {\n return this.options\n .map((option, index) => ({ option, key: option.key \|\| String(index) }))\n .filter(({ key }) => !this.isHidden(key));\n }\n\n /\n Focuses the menu item at the given index in the visible options list\n */\n private focusMenuItem(index: number) {\n if (this.menuRef) {\n const items = this.menuRef.querySelectorAll('[role=\"menuitem\"]');\n if (items[index]) {\n (items[index] as HTMLElement).focus();\n }\n }\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (!this.show && (event.key === 'ArrowDown' \|\| event.key === 'Enter' \|\| event.key === ' ')) {\n const target = event.target as HTMLElement;\n if (target === this.triggerBtnRef \|\| this.el.querySelector('[slot=\"activator\"]')?.contains(target)) {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.show = true;\n this.focusedIndex = 0;\n requestAnimationFrame(() => this.focusMenuItem(0));\n }\n }\n return;\n }\n\n if (!this.show) return;\n\n const visibleOptions = this.getVisibleOptions();\n const totalVisible = visibleOptions.length;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.focusedIndex = this.focusedIndex < totalVisible - 1 ? this.focusedIndex + 1 : 0;\n this.focusMenuItem(this.focusedIndex);\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n this.focusedIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : totalVisible - 1;\n this.focusMenuItem(this.focusedIndex);\n break;\n\n case 'Escape':\n event.preventDefault();\n this.show = false;\n this.focusedIndex = -1;\n this.triggerBtnRef?.focus();\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (this.focusedIndex >= 0 && this.focusedIndex < totalVisible) {\n const { option, key } = visibleOptions[this.focusedIndex];\n if (!this.isDisabled(key)) {\n this.handleClickOption(option);\n }\n }\n break;\n\n case 'Home':\n event.preventDefault();\n this.focusedIndex = 0;\n this.focusMenuItem(this.focusedIndex);\n break;\n\n case 'End':\n event.preventDefault();\n this.focusedIndex = totalVisible - 1;\n this.focusMenuItem(this.focusedIndex);\n break;\n\n case 'Tab':\n this.show = false;\n this.focusedIndex = -1;\n break;\n }\n }\n\n private isHidden = (key: string \| null): boolean => {\n return key !== null && this.hiddenKeys.includes(key);\n };\n\n private isDisabled = (key: string \| null): boolean => {\n return key !== null && this.disabledKeys.includes(key);\n };\n\n render() {\n const menuId = 'xplor-btn-menu-list';\n let visibleIndex = 0;\n\n return (\n <Host>\n <div class=\"xplor-btn-menu\" ref={(el) => (this.menuRef = el)}>\n <slot name=\"activator\">\n <button\n ref={(el) => (this.triggerBtnRef = el)}\n class=\"xplor-btn-menu__button\"\n onClick={this.toggleMenu}\n aria-haspopup=\"menu\"\n aria-expanded={this.show ? 'true' : 'false'}\n aria-controls={this.show ? menuId : undefined}\n aria-label={this.ariaLabel \|\| this.label \|\| 'Menu'}\n >\n <span>{this.label}</span>\n <span class=\"xplor-btn-menu__icon\" aria-hidden=\"true\">▼</span>\n </button>\n </slot>\n\n {this.show && (\n <div class=\"xplor-btn-menu__list\" role=\"menu\" id={menuId} aria-label={this.ariaLabel \|\| this.label \|\| 'Menu'}>\n {this.options.map((option, index) => {\n const key = option.key \|\| String(index);\n if (this.isHidden(key)) {\n return null;\n }\n\n const disabled = this.isDisabled(key);\n const currentVisibleIndex = visibleIndex++;\n\n return (\n <div\n key={key}\n role=\"menuitem\"\n tabindex={currentVisibleIndex === this.focusedIndex ? 0 : -1}\n aria-disabled={disabled ? 'true' : undefined}\n class={{\n 'xplor-btn-menu__item': true,\n 'xplor-btn-menu__item--disabled': disabled,\n }}\n onClick={() => !disabled && this.handleClickOption(option)}\n >\n <slot name={key}>{option.label \|\| ''}</slot>\n </div>\n );\n })}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/xplor-btn-tooltip.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$3 } from './p-CBSi5kQB.js';
-import { d as defineCustomElement$2 } from './p-CTD6SyTD.js';
+import { d as defineCustomElement$3 } from './p-Bs_ocvfe.js';
+import { d as defineCustomElement$2 } from './p-D4jVa8dE.js';
 const xplorBtnTooltipCss = "@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-btn-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-btn-tooltip {\n    width: 600px !important;\n  }\n}\nh1.sc-xplor-btn-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-btn-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-btn-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-btn-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-btn-tooltip, ul.sc-xplor-btn-tooltip {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip, ul.sc-xplor-btn-tooltip li.sc-xplor-btn-tooltip {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip, ul.mdc-list.sc-xplor-btn-tooltip li.mdc-list-item.sc-xplor-btn-tooltip {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label.sc-xplor-btn-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-btn-tooltip {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-btn-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-btn-tooltip {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-btn-tooltip .mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-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-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-tooltip {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-btn-tooltip .mdc-notched-outline.sc-xplor-btn-tooltip .mdc-notched-outline__notch.sc-xplor-btn-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-btn-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-btn-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-btn-tooltip {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-btn-tooltip-h {\n  display: inline-block;\n}";

package/components/xplor-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { X as XplorButton$1, d as defineCustomElement$1 } from './p-CBSi5kQB.js';
+import { X as XplorButton$1, d as defineCustomElement$1 } from './p-Bs_ocvfe.js';
 const XplorButton = XplorButton$1;
 const defineCustomElement = defineCustomElement$1;

package/components/xplor-chat-widget.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$3 } from './p-CBSi5kQB.js';
-import { d as defineCustomElement$2 } from './p-BK_ATKuB.js';
+import { d as defineCustomElement$3 } from './p-Bs_ocvfe.js';
+import { d as defineCustomElement$2 } from './p-DxxjL3sU.js';
 const xplorChatWidgetCss = "/* 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}\n\n.container {\n  display: flex;\n  margin-top: 20px;\n}";

package/components/xplor-checkbox.js CHANGED Viewed

@@ -2,12 +2,14 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 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$1 = /*@__PURE__*/ proxyCustomElement(class XplorCheckbox extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.checkboxChange = createEvent(this, "checkboxChange");
+        this.labelId = `xplor-checkbox-label-${++checkboxIdCounter}`;
         this.initialChecked = false;
         this.initialIndeterminate = false;
         this.disabled = false;
@@ -79,7 +81,7 @@ const XplorCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class XplorCheckbox ext
         this.indeterminate = this.initialIndeterminate;
     }
     render() {
-        return (h("div", { key: 'b8e50575c4ab946f2bd1949a552abf98218c3cc0', class: "checkbox-wrapper" }, 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 && (h("svg", { key: 'de6740ce5950517792bbcacd5019af968d0d75f8', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, 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 && (h("svg", { key: 'a54be57758d0447a8575a1d141fa592e55e8cbdc', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '12350f7a694cac2f3f18327a2a3626a414167a58', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '8185cd091331cf4aed793dbdffcb674d478d5d3a', class: "label" }, this.label)));
+        return (h("div", { key: '02d3efb24ac53caa742721720ec6d212eb159a55', class: "checkbox-wrapper" }, 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 && (h("svg", { key: 'e5bd243560546d47bfc77d753df3020fb1abb417', class: "check-icon", viewBox: "0 0 16 16", fill: "none" }, 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 && (h("svg", { key: '069ce072241705fabb0a740271d7b6e6192e35a8', class: "indeterminate-icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'afc9851ff1e2ecb32cb7f0037c72844e8ae1a625', d: "M3.33331 8H12.6666", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), this.label && h("span", { key: '4fbc5b3bbf78fd53aa0ee5a65e1a3b1b76cbb114', class: "label", id: this.labelId }, this.label)));
     }
     static get watchers() { return {
         "initialChecked": ["watchCheckedProp"],