@tessera-ui/core 0.4.0

package/dist/collection/components/select/select.js

@@ -0,0 +1,527 @@
+import { h, Host } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+/**
+ * @slot - Default slot for `<option>` elements.
+ *
+ * @part base - The outer wrapper.
+ * @part label - The label element.
+ * @part trigger - The select trigger button.
+ * @part dropdown - The dropdown panel.
+ * @part option - An option in the dropdown list.
+ * @part help-text - The help text wrapper.
+ * @part error-text - The error message wrapper.
+ */
+export class TsSelect {
+    hostEl;
+    inputId = generateId('ts-select');
+    triggerEl;
+    /** The current value. */
+    value = '';
+    /** Placeholder text when no value is selected. */
+    placeholder;
+    /** Renders the select as disabled. */
+    disabled = false;
+    /** The select size. */
+    size = 'md';
+    /** Label text displayed above the select. */
+    label;
+    /** Help text displayed below the select. */
+    helpText;
+    /** Renders the select in an error state. */
+    error = false;
+    /** Error message displayed below the select. */
+    errorMessage;
+    /** Makes the select required. */
+    required = false;
+    /** Name attribute for form submission. */
+    name;
+    /** Allow multiple selections. */
+    multiple = false;
+    /** Whether the dropdown is open. */
+    isOpen = false;
+    /** The index of the currently focused option. */
+    focusedIndex = -1;
+    /** Parsed options from slotted <option> elements. */
+    options = [];
+    /** Emitted when the value changes. */
+    tsChange;
+    /** Emitted when the select gains focus. */
+    tsFocus;
+    /** Emitted when the select loses focus. */
+    tsBlur;
+    handleValueChange() {
+        // Value was changed externally; ensure UI is in sync
+    }
+    handleDocumentClick(event) {
+        if (this.isOpen && !this.hostEl.contains(event.target)) {
+            this.close();
+        }
+    }
+    componentWillLoad() {
+        this.parseOptions();
+    }
+    componentDidLoad() {
+        // Observe slot changes to re-parse options
+        const slot = this.hostEl.shadowRoot?.querySelector('.select__hidden-slot slot');
+        slot?.addEventListener('slotchange', () => this.parseOptions());
+    }
+    parseOptions() {
+        const slottedOptions = this.hostEl.querySelectorAll('option');
+        this.options = Array.from(slottedOptions).map((opt) => ({
+            value: opt.value,
+            label: opt.textContent?.trim() ?? opt.value,
+            disabled: opt.disabled,
+        }));
+    }
+    open() {
+        if (this.disabled)
+            return;
+        this.isOpen = true;
+        this.focusedIndex = this.options.findIndex((o) => o.value === this.value);
+        if (this.focusedIndex < 0)
+            this.focusedIndex = 0;
+    }
+    close() {
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        this.triggerEl?.focus();
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.value = option.value;
+        this.tsChange.emit({ value: this.value });
+        this.close();
+    }
+    handleTriggerClick = () => {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    };
+    handleTriggerKeydown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.open();
+                }
+                else if (event.key === 'Enter' || event.key === ' ') {
+                    if (this.focusedIndex >= 0 && this.options[this.focusedIndex]) {
+                        this.selectOption(this.options[this.focusedIndex]);
+                    }
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isOpen) {
+                    this.open();
+                }
+                break;
+            case 'Escape':
+                if (this.isOpen) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+        }
+    };
+    handleDropdownKeydown = (event) => {
+        const enabledOptions = this.options.filter((o) => !o.disabled);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveFocus(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveFocus(-1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.focusedIndex >= 0 && this.options[this.focusedIndex] && !this.options[this.focusedIndex].disabled) {
+                    this.selectOption(this.options[this.focusedIndex]);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusedIndex = enabledOptions.length > 0 ? this.options.indexOf(enabledOptions[0]) : 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusedIndex = enabledOptions.length > 0 ? this.options.indexOf(enabledOptions[enabledOptions.length - 1]) : this.options.length - 1;
+                break;
+        }
+    };
+    moveFocus(direction) {
+        let next = this.focusedIndex + direction;
+        while (next >= 0 && next < this.options.length && this.options[next].disabled) {
+            next += direction;
+        }
+        if (next >= 0 && next < this.options.length) {
+            this.focusedIndex = next;
+        }
+    }
+    handleFocus = () => {
+        this.tsFocus.emit();
+    };
+    handleBlur = () => {
+        this.tsBlur.emit();
+    };
+    getDisplayText() {
+        const selected = this.options.find((o) => o.value === this.value);
+        return selected?.label ?? '';
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasError = this.error && !!this.errorMessage;
+        const labelId = `${this.inputId}-label`;
+        const helpId = `${this.inputId}-help`;
+        const errorId = `${this.inputId}-error`;
+        const listboxId = `${this.inputId}-listbox`;
+        const displayText = this.getDisplayText();
+        return (h(Host, { key: '9b3a0e36fdea320fce2428978bcf5052fdfd4de9', class: {
+                'ts-select': true,
+                [`ts-select--${this.size}`]: true,
+                'ts-select--open': this.isOpen,
+                'ts-select--disabled': this.disabled,
+                'ts-select--error': this.error,
+            } }, this.label && (h("label", { key: '71a6c856fc09aa61ac26c4481e572f2ae5e45bdf', class: "select__label", part: "label", id: labelId }, this.label, this.required && h("span", { key: 'fa1aa9a6d2dde47fdec5e8d0728b8f5a65589430', class: "select__required", "aria-hidden": "true" }, " *"))), h("div", { key: 'f3897e2538d5133ce07ab4591cbd52a1321ec938', class: "select__container" }, h("button", { key: 'f78d7565c491639e1007026b1e979e7fe7cdc185', ref: (el) => (this.triggerEl = el), class: {
+                'select__trigger': true,
+                'select__trigger--open': this.isOpen,
+                'select__trigger--error': this.error,
+                'select__trigger--disabled': this.disabled,
+            }, part: "trigger", type: "button", role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-labelledby": this.label ? labelId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, disabled: this.disabled, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("span", { key: '47ef7c569d488efcdbdcb0c4dde6bda31b71783a', class: { 'select__display': true, 'select__display--placeholder': !displayText } }, displayText || this.placeholder || '\u00A0'), h("svg", { key: 'a416413862109fa8fcf9a4a2b82c6b37fa6a0336', class: "select__chevron", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: 'aea2702514b5b0a8e5981e3b901d2b5f74b5ac45', d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.isOpen && (h("div", { key: '61c28bf0a413a73460f9ecf14e5dd85e82502249', class: "select__dropdown", part: "dropdown", role: "listbox", id: listboxId, "aria-labelledby": this.label ? labelId : undefined, onKeyDown: this.handleDropdownKeydown }, this.options.map((option, index) => (h("div", { class: {
+                'select__option': true,
+                'select__option--selected': option.value === this.value,
+                'select__option--focused': index === this.focusedIndex,
+                'select__option--disabled': option.disabled,
+            }, part: "option", role: "option", "aria-selected": option.value === this.value ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, onClick: () => this.selectOption(option) }, option.label)))))), h("div", { key: 'a9a59b1565505fd6262a81ce202f1bd4fbb3af1f', class: "select__hidden-slot" }, h("slot", { key: '7f5a9e5b313694ff80f0b86e4d1268a20d165556' })), hasError && (h("div", { key: 'b91fafea4a65f2d95822b560c2e75ff7d5ff4831', class: "select__error", part: "error-text", id: errorId, role: "alert" }, this.errorMessage)), !hasError && this.helpText && (h("div", { key: 'aed81b58a86b674c53c28c4dd1c97d0e4a2b8cc3', class: "select__help", part: "help-text", id: helpId }, this.helpText))));
+    }
+    static get is() { return "ts-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text when no value is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the select as disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The select size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed above the select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Help text displayed below the select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-text"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the select in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message displayed below the select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the select required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple selections."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "focusedIndex": {},
+            "options": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes."
+                },
+                "complexType": {
+                    "original": "TsSelectChangeEventDetail",
+                    "resolved": "TsSelectChangeEventDetail",
+                    "references": {
+                        "TsSelectChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSelectChangeEventDetail",
+                            "referenceLocation": "TsSelectChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tsFocus",
+                "name": "tsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select gains focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsBlur",
+                "name": "tsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the select loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=select.js.map

package/dist/collection/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Watch, h, Host, Element, Listen } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsSelectChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\ninterface SelectOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\n/**\n * @slot - Default slot for `<option>` elements.\n *\n * @part base - The outer wrapper.\n * @part label - The label element.\n * @part trigger - The select trigger button.\n * @part dropdown - The dropdown panel.\n * @part option - An option in the dropdown list.\n * @part help-text - The help text wrapper.\n * @part error-text - The error message wrapper.\n */\n@Component({\n  tag: 'ts-select',\n  styleUrl: 'select.css',\n  shadow: true,\n})\nexport class TsSelect {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-select');\n  private triggerEl?: HTMLElement;\n\n  /** The current value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Placeholder text when no value is selected. */\n  @Prop() placeholder?: string;\n\n  /** Renders the select as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The select size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label text displayed above the select. */\n  @Prop() label?: string;\n\n  /** Help text displayed below the select. */\n  @Prop() helpText?: string;\n\n  /** Renders the select in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Error message displayed below the select. */\n  @Prop() errorMessage?: string;\n\n  /** Makes the select required. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Allow multiple selections. */\n  @Prop({ reflect: true }) multiple = false;\n\n  /** Whether the dropdown is open. */\n  @State() isOpen = false;\n\n  /** The index of the currently focused option. */\n  @State() focusedIndex = -1;\n\n  /** Parsed options from slotted <option> elements. */\n  @State() options: SelectOption[] = [];\n\n  /** Emitted when the value changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsSelectChangeEventDetail>;\n\n  /** Emitted when the select gains focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the select loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  handleValueChange(): void {\n    // Value was changed externally; ensure UI is in sync\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent): void {\n    if (this.isOpen && !this.hostEl.contains(event.target as Node)) {\n      this.close();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.parseOptions();\n  }\n\n  componentDidLoad(): void {\n    // Observe slot changes to re-parse options\n    const slot = this.hostEl.shadowRoot?.querySelector('.select__hidden-slot slot');\n    slot?.addEventListener('slotchange', () => this.parseOptions());\n  }\n\n  private parseOptions(): void {\n    const slottedOptions = this.hostEl.querySelectorAll('option');\n    this.options = Array.from(slottedOptions).map((opt) => ({\n      value: opt.value,\n      label: opt.textContent?.trim() ?? opt.value,\n      disabled: opt.disabled,\n    }));\n  }\n\n  private open(): void {\n    if (this.disabled) return;\n    this.isOpen = true;\n    this.focusedIndex = this.options.findIndex((o) => o.value === this.value);\n    if (this.focusedIndex < 0) this.focusedIndex = 0;\n  }\n\n  private close(): void {\n    this.isOpen = false;\n    this.focusedIndex = -1;\n    this.triggerEl?.focus();\n  }\n\n  private selectOption(option: SelectOption): void {\n    if (option.disabled) return;\n    this.value = option.value;\n    this.tsChange.emit({ value: this.value });\n    this.close();\n  }\n\n  private handleTriggerClick = (): void => {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  };\n\n  private handleTriggerKeydown = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.open();\n        } else if (event.key === 'Enter' || event.key === ' ') {\n          if (this.focusedIndex >= 0 && this.options[this.focusedIndex]) {\n            this.selectOption(this.options[this.focusedIndex]);\n          }\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.open();\n        }\n        break;\n      case 'Escape':\n        if (this.isOpen) {\n          event.preventDefault();\n          this.close();\n        }\n        break;\n    }\n  };\n\n  private handleDropdownKeydown = (event: KeyboardEvent): void => {\n    const enabledOptions = this.options.filter((o) => !o.disabled);\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(-1);\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.focusedIndex >= 0 && this.options[this.focusedIndex] && !this.options[this.focusedIndex].disabled) {\n          this.selectOption(this.options[this.focusedIndex]);\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        this.close();\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.focusedIndex = enabledOptions.length > 0 ? this.options.indexOf(enabledOptions[0]) : 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        this.focusedIndex = enabledOptions.length > 0 ? this.options.indexOf(enabledOptions[enabledOptions.length - 1]) : this.options.length - 1;\n        break;\n    }\n  };\n\n  private moveFocus(direction: number): void {\n    let next = this.focusedIndex + direction;\n    while (next >= 0 && next < this.options.length && this.options[next].disabled) {\n      next += direction;\n    }\n    if (next >= 0 && next < this.options.length) {\n      this.focusedIndex = next;\n    }\n  }\n\n  private handleFocus = (): void => {\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.tsBlur.emit();\n  };\n\n  private getDisplayText(): string {\n    const selected = this.options.find((o) => o.value === this.value);\n    return selected?.label ?? '';\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasError = this.error && !!this.errorMessage;\n    const labelId = `${this.inputId}-label`;\n    const helpId = `${this.inputId}-help`;\n    const errorId = `${this.inputId}-error`;\n    const listboxId = `${this.inputId}-listbox`;\n    const displayText = this.getDisplayText();\n\n    return (\n      <Host\n        class={{\n          'ts-select': true,\n          [`ts-select--${this.size}`]: true,\n          'ts-select--open': this.isOpen,\n          'ts-select--disabled': this.disabled,\n          'ts-select--error': this.error,\n        }}\n      >\n        {this.label && (\n          <label class=\"select__label\" part=\"label\" id={labelId}>\n            {this.label}\n            {this.required && <span class=\"select__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        <div class=\"select__container\">\n          <button\n            ref={(el) => (this.triggerEl = el)}\n            class={{\n              'select__trigger': true,\n              'select__trigger--open': this.isOpen,\n              'select__trigger--error': this.error,\n              'select__trigger--disabled': this.disabled,\n            }}\n            part=\"trigger\"\n            type=\"button\"\n            role=\"combobox\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-haspopup=\"listbox\"\n            aria-controls={listboxId}\n            aria-labelledby={this.label ? labelId : undefined}\n            aria-invalid={this.error ? 'true' : undefined}\n            aria-required={this.required ? 'true' : undefined}\n            disabled={this.disabled}\n            onClick={this.handleTriggerClick}\n            onKeyDown={this.handleTriggerKeydown}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          >\n            <span class={{ 'select__display': true, 'select__display--placeholder': !displayText }}>\n              {displayText || this.placeholder || '\\u00A0'}\n            </span>\n            <svg class=\"select__chevron\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M4 6L8 10L12 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </button>\n\n          {this.isOpen && (\n            <div\n              class=\"select__dropdown\"\n              part=\"dropdown\"\n              role=\"listbox\"\n              id={listboxId}\n              aria-labelledby={this.label ? labelId : undefined}\n              onKeyDown={this.handleDropdownKeydown}\n            >\n              {this.options.map((option, index) => (\n                <div\n                  class={{\n                    'select__option': true,\n                    'select__option--selected': option.value === this.value,\n                    'select__option--focused': index === this.focusedIndex,\n                    'select__option--disabled': option.disabled,\n                  }}\n                  part=\"option\"\n                  role=\"option\"\n                  aria-selected={option.value === this.value ? 'true' : 'false'}\n                  aria-disabled={option.disabled ? 'true' : undefined}\n                  onClick={() => this.selectOption(option)}\n                >\n                  {option.label}\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Hidden slot to capture <option> elements */}\n        <div class=\"select__hidden-slot\">\n          <slot />\n        </div>\n\n        {hasError && (\n          <div class=\"select__error\" part=\"error-text\" id={errorId} role=\"alert\">\n            {this.errorMessage}\n          </div>\n        )}\n\n        {!hasError && this.helpText && (\n          <div class=\"select__help\" part=\"help-text\" id={helpId}>\n            {this.helpText}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}