@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-select.js

@@ -1 +1,571 @@
-import{getDbComponentIconSize as e,createDbIcon as t}from"./db-icons.js";import"./db-checkbox.js";const s=["s","m","l"];class DbSelect extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.built=!1,this.searchTerm="",this.focusedIndex=-1,this.handleTriggerClick=()=>{this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.open=!this.open,this.open&&this.searchable&&setTimeout(()=>this.searchInput?.focus(),0))},this.handleTriggerFocus=()=>{this.trigger?.classList.add("designbase-wc-select__trigger--focused")},this.handleTriggerBlur=()=>{this.trigger?.classList.remove("designbase-wc-select__trigger--focused")},this.handleClear=e=>{e.stopPropagation();const t=[];this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)},this.handleSearchInput=()=>{this.searchTerm=this.searchInput?.value||"",this.focusedIndex=-1,this.syncOptions()},this.handleDocumentMouseDown=e=>{this.contains(e.target)||(this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions())},this.handleDocumentKeyDown=e=>{if(!this.contains(document.activeElement))return;if(!this.open)return void("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!0));const t=this.getFilteredOptions();switch(e.key){case"Escape":e.preventDefault(),this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1,this.syncOptions();break;case"ArrowDown":e.preventDefault(),this.focusedIndex=Math.min(this.focusedIndex+1,t.length-1),this.syncOptions();break;case"ArrowUp":e.preventDefault(),this.focusedIndex=Math.max(this.focusedIndex-1,0),this.syncOptions();break;case"Enter":e.preventDefault(),this.focusedIndex>=0&&t[this.focusedIndex]&&this.selectOption(t[this.focusedIndex])}}}static get observedAttributes(){return["options","value","placeholder","label","size","full-width","disabled","readonly","required","error","error-message","helper-text","multiple","searchable","show-clear-button","open","max-height","position","dropdown-width","name"]}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get open(){return this.hasAttribute("open")}set open(e){this.toggleAttribute("open",e),this.syncOpenState()}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value"),this.syncTrigger(),this.syncOptions()}connectedCallback(){this.built||this.build(),this.syncState(),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown)}formResetCallback(){this.removeAttribute("value"),this.internals.setFormValue(null),this.built&&(this.syncTrigger(),this.syncOptions())}formDisabledCallback(e){this.toggleAttribute("disabled",e)}attributeChangedCallback(e){if(this.built){if("open"!==e)return"value"===e?(this.syncTrigger(),void this.syncOptions()):void this.syncState();this.syncOpenState()}}get multiple(){return this.hasAttribute("multiple")}set multiple(e){this.toggleAttribute("multiple",Boolean(e))}get searchable(){return this.hasAttribute("searchable")}set searchable(e){this.toggleAttribute("searchable",Boolean(e))}get showClearButton(){return!this.hasAttribute("show-clear-button")||"false"!==this.getAttribute("show-clear-button")}parseOptions(){const e=this.getAttribute("options")||"[]";try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean).map(e=>({value:e,label:e}))}}parseSelectedValues(){const e=this.getAttribute("value")||"";if(!e)return[];if(this.multiple)try{const t=JSON.parse(e);return Array.isArray(t)?t.map(String):[]}catch{return e.split(",").map(e=>e.trim()).filter(Boolean)}return e?[e]:[]}setSelectedValues(e){this.multiple?e.length?this.setAttribute("value",JSON.stringify(e)):this.removeAttribute("value"):e[0]?this.setAttribute("value",e[0]):this.removeAttribute("value")}getIconSize(){const t=this.getAttribute("size")||"m";return e(s.includes(t)?t:"m")}syncIndicatorIcons(){const e=this.getIconSize();this.clearButton?.replaceChildren(t("close",e)),this.chevronEl&&this.chevronEl.replaceChildren(t(this.open?"chevron-up":"chevron-down",e))}build(){const e=this.getAttribute("id")||`db-select-${Math.random().toString(36).slice(2)}`,s=`${e}-listbox`;this.hasAttribute("id")||this.setAttribute("id",e),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-select__label",this.trigger=document.createElement("div"),this.trigger.className="designbase-wc-select__trigger",this.trigger.tabIndex=0,this.trigger.setAttribute("role","combobox"),this.trigger.setAttribute("aria-haspopup","listbox"),this.trigger.setAttribute("aria-controls",s),this.trigger.addEventListener("click",this.handleTriggerClick),this.trigger.addEventListener("focus",this.handleTriggerFocus),this.trigger.addEventListener("blur",this.handleTriggerBlur),this.valueEl=document.createElement("div"),this.valueEl.className="designbase-wc-select__value",this.indicatorsEl=document.createElement("div"),this.indicatorsEl.className="designbase-wc-select__indicators",this.clearButton=document.createElement("button"),this.clearButton.type="button",this.clearButton.className="designbase-wc-select__clear-button",this.clearButton.setAttribute("aria-label","모든 값 지우기"),this.clearButton.hidden=!0,this.clearButton.appendChild(t("close",this.getIconSize())),this.clearButton.addEventListener("click",this.handleClear),this.chevronEl=document.createElement("div"),this.chevronEl.className="designbase-wc-select__chevron",this.indicatorsEl.append(this.clearButton,this.chevronEl),this.trigger.append(this.valueEl,this.indicatorsEl),this.dropdown=document.createElement("div"),this.dropdown.className="designbase-wc-select__dropdown",this.searchWrap=document.createElement("div"),this.searchWrap.className="designbase-wc-select__search",this.searchWrap.hidden=!0,this.searchInput=document.createElement("input"),this.searchInput.type="text",this.searchInput.className="designbase-wc-select__search-input",this.searchInput.placeholder="옵션 검색",this.searchInput.addEventListener("input",this.handleSearchInput),this.searchInput.addEventListener("mousedown",e=>e.stopPropagation()),this.searchInput.addEventListener("click",e=>e.stopPropagation()),this.searchWrap.appendChild(this.searchInput),this.optionsEl=document.createElement("div"),this.optionsEl.className="designbase-wc-select__options",this.optionsEl.id=s,this.optionsEl.setAttribute("role","listbox"),this.dropdown.append(this.searchWrap,this.optionsEl),this.helperEl=document.createElement("p"),this.helperEl.className="designbase-wc-select__helper-text",this.errorEl=document.createElement("p"),this.errorEl.className="designbase-wc-select__error-message",this.append(this.labelEl,this.trigger,this.dropdown,this.helperEl,this.errorEl),this.built=!0}getFilteredOptions(){const e=this.parseOptions();if(!this.searchable||!this.searchTerm)return e;const t=this.searchTerm.toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))}selectOption(e){if(e.disabled)return;const t=this.parseSelectedValues();let s;this.multiple?s=t.includes(e.value)?t.filter(t=>t!==e.value):[...t,e.value]:(s=[e.value],this.open=!1,this.searchTerm="",this.searchInput&&(this.searchInput.value=""),this.focusedIndex=-1),this.setSelectedValues(s),this.syncTrigger(),this.syncOptions(),this.dispatchChange(s)}dispatchChange(e){const t=this.parseOptions();if(this.multiple){const s=new FormData;return e.forEach(e=>s.append(this.name||"select",e)),this.internals.setFormValue(e.length?s:null),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,labels:e.map(e=>t.find(t=>t.value===e)?.label||e)},bubbles:!0,composed:!0}))}const s=e[0]||"",i=t.find(e=>e.value===s)?.label||"";this.internals.setFormValue(s||null),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:s,label:i},bubbles:!0,composed:!0}))}syncState(){if(!this.trigger||!this.dropdown||!this.optionsEl)return;const e=s.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",t="top"===this.getAttribute("position")?"top":"bottom",i="full"===this.getAttribute("dropdown-width")?"full":"auto",n=Number(this.getAttribute("max-height")||200),a=this.getAttribute("label")||"",r=this.getAttribute("helper-text")||"",l=this.getAttribute("error-message")||"",h=this.hasAttribute("error"),c=this.getAttribute("id")||"";this.className=["designbase-wc-select",`designbase-wc-select--${e}`,this.open&&"designbase-wc-select--open",h&&"designbase-wc-select--error",this.hasAttribute("disabled")&&"designbase-wc-select--disabled",this.hasAttribute("readonly")&&"designbase-wc-select--readonly",this.hasAttribute("full-width")&&"designbase-wc-select--full-width",this.multiple&&"designbase-wc-select--multiple",this.searchable&&"designbase-wc-select--searchable"].filter(Boolean).join(" ");const o=this.parseSelectedValues();if(this.classList.toggle("designbase-wc-select--has-value",o.length>0),this.labelEl){const e=this.hasAttribute("required")?'<span class="designbase-wc-select__required" aria-hidden="true">*</span>':"";this.labelEl.innerHTML=a?`${this.escape(a)}${e}`:"",this.labelEl.hidden=!a}this.dropdown.className=["designbase-wc-select__dropdown",`designbase-wc-select__dropdown--${i}`,`designbase-wc-select__dropdown--${t}`,this.open&&"designbase-wc-select__dropdown--open"].filter(Boolean).join(" "),this.optionsEl.style.maxHeight=`${n}px`,this.searchWrap&&(this.searchWrap.hidden=!this.searchable);const d=`${c}-helper`,u=`${c}-error`;h&&l?(this.errorEl.id=u,this.errorEl.textContent=l,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.trigger.setAttribute("aria-describedby",u),this.trigger.setAttribute("aria-invalid","true")):r?(this.helperEl.id=d,this.helperEl.textContent=r,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.trigger.setAttribute("aria-describedby",d),this.trigger.removeAttribute("aria-invalid")):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.trigger.removeAttribute("aria-describedby"),this.trigger.removeAttribute("aria-invalid")),this.hasAttribute("disabled")||this.hasAttribute("readonly")?this.trigger.tabIndex=-1:this.trigger.tabIndex=0,this.syncOpenState(),this.syncTrigger(),this.syncOptions(),this.syncIndicatorIcons()}syncOpenState(){this.trigger&&this.dropdown&&this.chevronEl&&(this.trigger.setAttribute("aria-expanded",String(this.open)),this.classList.toggle("designbase-wc-select--open",this.open),this.dropdown.classList.toggle("designbase-wc-select__dropdown--open",this.open),this.syncIndicatorIcons())}syncTrigger(){if(!this.valueEl||!this.clearButton)return;const e=this.parseOptions(),s=this.parseSelectedValues(),i=this.getAttribute("placeholder")||"선택하세요",n=s.length>0,a=n&&this.showClearButton&&!this.hasAttribute("disabled")&&!this.hasAttribute("readonly");if(this.valueEl.replaceChildren(),this.multiple)if(0===s.length){const e=document.createElement("span");e.className="designbase-wc-select__placeholder",e.textContent=i,this.valueEl.appendChild(e)}else{const i=document.createElement("div");i.className="designbase-wc-select__tags",s.forEach(n=>{const a=e.find(e=>e.value===n),r=document.createElement("span");r.className="designbase-wc-select__tag";const l=document.createElement("span");l.className="designbase-wc-select__tag-label",l.textContent=a?.label||n;const h=document.createElement("button");h.type="button",h.className="designbase-wc-select__tag-remove",h.setAttribute("aria-label",`${a?.label||n} 제거`),h.appendChild(t("close",12)),h.addEventListener("click",e=>{e.stopPropagation();const t=s.filter(e=>e!==n);this.setSelectedValues(t),this.syncTrigger(),this.syncOptions(),this.dispatchChange(t)}),r.append(l,h),i.appendChild(r)}),this.valueEl.appendChild(i)}else{const t=document.createElement("span");t.className="designbase-wc-select__single-value";const a=e.find(e=>e.value===s[0]);t.textContent=n?a?.label||s[0]:i,n||t.classList.add("designbase-wc-select__placeholder"),this.valueEl.appendChild(t)}this.clearButton.hidden=!a,this.clearButton.setAttribute("aria-hidden",a?"false":"true"),this.classList.toggle("designbase-wc-select--has-value",n)}syncOptions(){if(!this.optionsEl)return;const e=this.getFilteredOptions(),t=this.parseSelectedValues(),s=this.getAttribute("id")||"db-select";if(this.optionsEl.replaceChildren(),0===e.length){const e=document.createElement("div");return e.className="designbase-wc-select__no-options",e.textContent=this.searchTerm?"검색 결과가 없습니다.":"옵션이 없습니다.",void this.optionsEl.appendChild(e)}e.forEach((e,i)=>{const n=t.includes(e.value),a=i===this.focusedIndex,r=document.createElement("div");if(r.className=["designbase-wc-select__option",n&&"designbase-wc-select__option--selected",a&&"designbase-wc-select__option--focused",e.disabled&&"designbase-wc-select__option--disabled"].filter(Boolean).join(" "),r.id=`${s}-option-${i}`,r.setAttribute("role","option"),r.setAttribute("aria-selected",String(n)),r.addEventListener("click",()=>this.selectOption(e)),this.multiple){const t=document.createElement("div");t.className="designbase-wc-select__checkbox";const s=document.createElement("db-checkbox");s.setAttribute("size","s"),s.setAttribute("has-label","false"),n&&s.setAttribute("checked",""),e.disabled&&s.setAttribute("disabled",""),t.appendChild(s),r.appendChild(t)}const l=document.createElement("span");l.className="designbase-wc-select__option-label",l.textContent=e.label,r.appendChild(l),this.optionsEl.appendChild(r)}),this.focusedIndex>=0?this.trigger?.setAttribute("aria-activedescendant",`${s}-option-${this.focusedIndex}`):this.trigger?.removeAttribute("aria-activedescendant")}escape(e){return e.replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[e]||e))}}DbSelect.formAssociated=!0,customElements.get("db-select")||customElements.define("db-select",DbSelect);export{DbSelect};
+import { getDbComponentIconSize, createDbIcon } from './db-icons.js';
+import './db-checkbox.js';
+
+const SIZES = ['s', 'm', 'l'];
+class DbSelect extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        this.built = false;
+        this.searchTerm = '';
+        this.focusedIndex = -1;
+        this.handleTriggerClick = () => {
+            if (this.hasAttribute('disabled') || this.hasAttribute('readonly'))
+                return;
+            this.open = !this.open;
+            if (this.open && this.searchable) {
+                setTimeout(() => this.searchInput?.focus(), 0);
+            }
+        };
+        this.handleTriggerFocus = () => {
+            this.trigger?.classList.add('designbase-wc-select__trigger--focused');
+        };
+        this.handleTriggerBlur = () => {
+            this.trigger?.classList.remove('designbase-wc-select__trigger--focused');
+        };
+        this.handleClear = (event) => {
+            event.stopPropagation();
+            const next = [];
+            this.setSelectedValues(next);
+            this.syncTrigger();
+            this.syncOptions();
+            this.dispatchChange(next);
+        };
+        this.handleSearchInput = () => {
+            this.searchTerm = this.searchInput?.value || '';
+            this.focusedIndex = -1;
+            this.syncOptions();
+        };
+        this.handleDocumentMouseDown = (event) => {
+            if (!this.contains(event.target)) {
+                this.open = false;
+                this.searchTerm = '';
+                if (this.searchInput)
+                    this.searchInput.value = '';
+                this.focusedIndex = -1;
+                this.syncOptions();
+            }
+        };
+        this.handleDocumentKeyDown = (event) => {
+            if (!this.contains(document.activeElement))
+                return;
+            if (!this.open) {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    this.open = true;
+                }
+                return;
+            }
+            const filtered = this.getFilteredOptions();
+            switch (event.key) {
+                case 'Escape':
+                    event.preventDefault();
+                    this.open = false;
+                    this.searchTerm = '';
+                    if (this.searchInput)
+                        this.searchInput.value = '';
+                    this.focusedIndex = -1;
+                    this.syncOptions();
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.focusedIndex = Math.min(this.focusedIndex + 1, filtered.length - 1);
+                    this.syncOptions();
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+                    this.syncOptions();
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    if (this.focusedIndex >= 0 && filtered[this.focusedIndex]) {
+                        this.selectOption(filtered[this.focusedIndex]);
+                    }
+                    break;
+            }
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'options',
+            'value',
+            'placeholder',
+            'label',
+            'size',
+            'full-width',
+            'disabled',
+            'readonly',
+            'required',
+            'error',
+            'error-message',
+            'helper-text',
+            'multiple',
+            'searchable',
+            'show-clear-button',
+            'open',
+            'max-height',
+            'position',
+            'dropdown-width',
+            'name',
+        ];
+    }
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(value) {
+        this.setAttribute('name', value);
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        this.toggleAttribute('open', value);
+        this.syncOpenState();
+    }
+    get value() {
+        return this.getAttribute('value') || '';
+    }
+    set value(value) {
+        if (value)
+            this.setAttribute('value', value);
+        else
+            this.removeAttribute('value');
+        this.syncTrigger();
+        this.syncOptions();
+    }
+    connectedCallback() {
+        if (!this.built) {
+            this.build();
+        }
+        this.syncState();
+        document.addEventListener('mousedown', this.handleDocumentMouseDown);
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    formResetCallback() {
+        this.removeAttribute('value');
+        this.internals.setFormValue(null);
+        if (this.built) {
+            this.syncTrigger();
+            this.syncOptions();
+        }
+    }
+    formDisabledCallback(disabled) {
+        this.toggleAttribute('disabled', disabled);
+    }
+    attributeChangedCallback(name) {
+        if (!this.built)
+            return;
+        if (name === 'open') {
+            this.syncOpenState();
+            return;
+        }
+        if (name === 'value') {
+            this.syncTrigger();
+            this.syncOptions();
+            return;
+        }
+        this.syncState();
+    }
+    get multiple() {
+        return this.hasAttribute('multiple');
+    }
+    set multiple(value) {
+        this.toggleAttribute('multiple', Boolean(value));
+    }
+    get searchable() {
+        return this.hasAttribute('searchable');
+    }
+    set searchable(value) {
+        this.toggleAttribute('searchable', Boolean(value));
+    }
+    get showClearButton() {
+        if (!this.hasAttribute('show-clear-button')) {
+            return true;
+        }
+        return this.getAttribute('show-clear-button') !== 'false';
+    }
+    parseOptions() {
+        const raw = this.getAttribute('options') || '[]';
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return raw.split(',').map((item) => item.trim()).filter(Boolean).map((label) => ({ value: label, label }));
+        }
+    }
+    parseSelectedValues() {
+        const raw = this.getAttribute('value') || '';
+        if (!raw)
+            return [];
+        if (this.multiple) {
+            try {
+                const parsed = JSON.parse(raw);
+                return Array.isArray(parsed) ? parsed.map(String) : [];
+            }
+            catch {
+                return raw.split(',').map((item) => item.trim()).filter(Boolean);
+            }
+        }
+        return raw ? [raw] : [];
+    }
+    setSelectedValues(values) {
+        if (this.multiple) {
+            if (values.length)
+                this.setAttribute('value', JSON.stringify(values));
+            else
+                this.removeAttribute('value');
+        }
+        else {
+            if (values[0])
+                this.setAttribute('value', values[0]);
+            else
+                this.removeAttribute('value');
+        }
+    }
+    getIconSize() {
+        const size = this.getAttribute('size') || 'm';
+        return getDbComponentIconSize(SIZES.includes(size) ? size : 'm');
+    }
+    syncIndicatorIcons() {
+        const iconPx = this.getIconSize();
+        this.clearButton?.replaceChildren(createDbIcon('close', iconPx));
+        if (this.chevronEl) {
+            this.chevronEl.replaceChildren(createDbIcon(this.open ? 'chevron-up' : 'chevron-down', iconPx));
+        }
+    }
+    build() {
+        const id = this.getAttribute('id') || `db-select-${Math.random().toString(36).slice(2)}`;
+        const listboxId = `${id}-listbox`;
+        if (!this.hasAttribute('id'))
+            this.setAttribute('id', id);
+        this.labelEl = document.createElement('label');
+        this.labelEl.className = 'designbase-wc-select__label';
+        this.trigger = document.createElement('div');
+        this.trigger.className = 'designbase-wc-select__trigger';
+        this.trigger.tabIndex = 0;
+        this.trigger.setAttribute('role', 'combobox');
+        this.trigger.setAttribute('aria-haspopup', 'listbox');
+        this.trigger.setAttribute('aria-controls', listboxId);
+        this.trigger.addEventListener('click', this.handleTriggerClick);
+        this.trigger.addEventListener('focus', this.handleTriggerFocus);
+        this.trigger.addEventListener('blur', this.handleTriggerBlur);
+        this.valueEl = document.createElement('div');
+        this.valueEl.className = 'designbase-wc-select__value';
+        this.indicatorsEl = document.createElement('div');
+        this.indicatorsEl.className = 'designbase-wc-select__indicators';
+        this.clearButton = document.createElement('button');
+        this.clearButton.type = 'button';
+        this.clearButton.className = 'designbase-wc-select__clear-button';
+        this.clearButton.setAttribute('aria-label', '모든 값 지우기');
+        this.clearButton.hidden = true;
+        this.clearButton.appendChild(createDbIcon('close', this.getIconSize()));
+        this.clearButton.addEventListener('click', this.handleClear);
+        this.chevronEl = document.createElement('div');
+        this.chevronEl.className = 'designbase-wc-select__chevron';
+        this.indicatorsEl.append(this.clearButton, this.chevronEl);
+        this.trigger.append(this.valueEl, this.indicatorsEl);
+        this.dropdown = document.createElement('div');
+        this.dropdown.className = 'designbase-wc-select__dropdown';
+        this.searchWrap = document.createElement('div');
+        this.searchWrap.className = 'designbase-wc-select__search';
+        this.searchWrap.hidden = true;
+        this.searchInput = document.createElement('input');
+        this.searchInput.type = 'text';
+        this.searchInput.className = 'designbase-wc-select__search-input';
+        this.searchInput.placeholder = '옵션 검색';
+        this.searchInput.addEventListener('input', this.handleSearchInput);
+        this.searchInput.addEventListener('mousedown', (event) => event.stopPropagation());
+        this.searchInput.addEventListener('click', (event) => event.stopPropagation());
+        this.searchWrap.appendChild(this.searchInput);
+        this.optionsEl = document.createElement('div');
+        this.optionsEl.className = 'designbase-wc-select__options';
+        this.optionsEl.id = listboxId;
+        this.optionsEl.setAttribute('role', 'listbox');
+        this.dropdown.append(this.searchWrap, this.optionsEl);
+        this.helperEl = document.createElement('p');
+        this.helperEl.className = 'designbase-wc-select__helper-text';
+        this.errorEl = document.createElement('p');
+        this.errorEl.className = 'designbase-wc-select__error-message';
+        this.append(this.labelEl, this.trigger, this.dropdown, this.helperEl, this.errorEl);
+        this.built = true;
+    }
+    getFilteredOptions() {
+        const options = this.parseOptions();
+        if (!this.searchable || !this.searchTerm)
+            return options;
+        const term = this.searchTerm.toLowerCase();
+        return options.filter((option) => option.label.toLowerCase().includes(term));
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        const selected = this.parseSelectedValues();
+        let next;
+        if (this.multiple) {
+            next = selected.includes(option.value)
+                ? selected.filter((value) => value !== option.value)
+                : [...selected, option.value];
+        }
+        else {
+            next = [option.value];
+            this.open = false;
+            this.searchTerm = '';
+            if (this.searchInput)
+                this.searchInput.value = '';
+            this.focusedIndex = -1;
+        }
+        this.setSelectedValues(next);
+        this.syncTrigger();
+        this.syncOptions();
+        this.dispatchChange(next);
+    }
+    dispatchChange(values) {
+        const options = this.parseOptions();
+        if (this.multiple) {
+            const formData = new FormData();
+            values.forEach((v) => formData.append(this.name || 'select', v));
+            this.internals.setFormValue(values.length ? formData : null);
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+            this.dispatchEvent(new CustomEvent('db-change', {
+                detail: {
+                    value: values,
+                    labels: values.map((value) => options.find((option) => option.value === value)?.label || value),
+                },
+                bubbles: true,
+                composed: true,
+            }));
+            return;
+        }
+        const value = values[0] || '';
+        const label = options.find((option) => option.value === value)?.label || '';
+        this.internals.setFormValue(value || null);
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+        this.dispatchEvent(new CustomEvent('db-change', {
+            detail: { value, label },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    syncState() {
+        if (!this.trigger || !this.dropdown || !this.optionsEl)
+            return;
+        const size = SIZES.includes((this.getAttribute('size') || 'm'))
+            ? (this.getAttribute('size') || 'm')
+            : 'm';
+        const position = this.getAttribute('position') === 'top' ? 'top' : 'bottom';
+        const dropdownWidth = this.getAttribute('dropdown-width') === 'full' ? 'full' : 'auto';
+        const maxHeight = Number(this.getAttribute('max-height') || 200);
+        const label = this.getAttribute('label') || '';
+        const helperText = this.getAttribute('helper-text') || '';
+        const errorMessage = this.getAttribute('error-message') || '';
+        const hasError = this.hasAttribute('error');
+        const id = this.getAttribute('id') || '';
+        this.className = [
+            'designbase-wc-select',
+            `designbase-wc-select--${size}`,
+            this.open && 'designbase-wc-select--open',
+            hasError && 'designbase-wc-select--error',
+            this.hasAttribute('disabled') && 'designbase-wc-select--disabled',
+            this.hasAttribute('readonly') && 'designbase-wc-select--readonly',
+            this.hasAttribute('full-width') && 'designbase-wc-select--full-width',
+            this.multiple && 'designbase-wc-select--multiple',
+            this.searchable && 'designbase-wc-select--searchable',
+        ].filter(Boolean).join(' ');
+        const selectedForState = this.parseSelectedValues();
+        this.classList.toggle('designbase-wc-select--has-value', selectedForState.length > 0);
+        if (this.labelEl) {
+            const requiredMark = this.hasAttribute('required') ? '<span class="designbase-wc-select__required" aria-hidden="true">*</span>' : '';
+            this.labelEl.innerHTML = label ? `${this.escape(label)}${requiredMark}` : '';
+            this.labelEl.hidden = !label;
+        }
+        this.dropdown.className = [
+            'designbase-wc-select__dropdown',
+            `designbase-wc-select__dropdown--${dropdownWidth}`,
+            `designbase-wc-select__dropdown--${position}`,
+            this.open && 'designbase-wc-select__dropdown--open',
+        ].filter(Boolean).join(' ');
+        this.optionsEl.style.maxHeight = `${maxHeight}px`;
+        if (this.searchWrap) {
+            this.searchWrap.hidden = !this.searchable;
+        }
+        const helperId = `${id}-helper`;
+        const errorId = `${id}-error`;
+        if (hasError && errorMessage) {
+            this.errorEl.id = errorId;
+            this.errorEl.textContent = errorMessage;
+            this.errorEl.hidden = false;
+            this.helperEl.hidden = true;
+            this.trigger.setAttribute('aria-describedby', errorId);
+            this.trigger.setAttribute('aria-invalid', 'true');
+        }
+        else if (helperText) {
+            this.helperEl.id = helperId;
+            this.helperEl.textContent = helperText;
+            this.helperEl.hidden = false;
+            this.errorEl.hidden = true;
+            this.trigger.setAttribute('aria-describedby', helperId);
+            this.trigger.removeAttribute('aria-invalid');
+        }
+        else {
+            this.helperEl.hidden = true;
+            this.errorEl.hidden = true;
+            this.trigger.removeAttribute('aria-describedby');
+            this.trigger.removeAttribute('aria-invalid');
+        }
+        if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) {
+            this.trigger.tabIndex = -1;
+        }
+        else {
+            this.trigger.tabIndex = 0;
+        }
+        this.syncOpenState();
+        this.syncTrigger();
+        this.syncOptions();
+        this.syncIndicatorIcons();
+    }
+    syncOpenState() {
+        if (!this.trigger || !this.dropdown || !this.chevronEl)
+            return;
+        this.trigger.setAttribute('aria-expanded', String(this.open));
+        this.classList.toggle('designbase-wc-select--open', this.open);
+        this.dropdown.classList.toggle('designbase-wc-select__dropdown--open', this.open);
+        this.syncIndicatorIcons();
+    }
+    syncTrigger() {
+        if (!this.valueEl || !this.clearButton)
+            return;
+        const options = this.parseOptions();
+        const selected = this.parseSelectedValues();
+        const placeholder = this.getAttribute('placeholder') || '선택하세요';
+        const hasValue = selected.length > 0;
+        const showClear = hasValue
+            && this.showClearButton
+            && !this.hasAttribute('disabled')
+            && !this.hasAttribute('readonly');
+        this.valueEl.replaceChildren();
+        if (this.multiple) {
+            if (selected.length === 0) {
+                const placeholderEl = document.createElement('span');
+                placeholderEl.className = 'designbase-wc-select__placeholder';
+                placeholderEl.textContent = placeholder;
+                this.valueEl.appendChild(placeholderEl);
+            }
+            else {
+                const tags = document.createElement('div');
+                tags.className = 'designbase-wc-select__tags';
+                selected.forEach((value) => {
+                    const option = options.find((item) => item.value === value);
+                    const tag = document.createElement('span');
+                    tag.className = 'designbase-wc-select__tag';
+                    const tagLabel = document.createElement('span');
+                    tagLabel.className = 'designbase-wc-select__tag-label';
+                    tagLabel.textContent = option?.label || value;
+                    const removeButton = document.createElement('button');
+                    removeButton.type = 'button';
+                    removeButton.className = 'designbase-wc-select__tag-remove';
+                    removeButton.setAttribute('aria-label', `${option?.label || value} 제거`);
+                    removeButton.appendChild(createDbIcon('close', 12));
+                    removeButton.addEventListener('click', (event) => {
+                        event.stopPropagation();
+                        const next = selected.filter((item) => item !== value);
+                        this.setSelectedValues(next);
+                        this.syncTrigger();
+                        this.syncOptions();
+                        this.dispatchChange(next);
+                    });
+                    tag.append(tagLabel, removeButton);
+                    tags.appendChild(tag);
+                });
+                this.valueEl.appendChild(tags);
+            }
+        }
+        else {
+            const single = document.createElement('span');
+            single.className = 'designbase-wc-select__single-value';
+            const selectedOption = options.find((option) => option.value === selected[0]);
+            single.textContent = hasValue ? (selectedOption?.label || selected[0]) : placeholder;
+            if (!hasValue) {
+                single.classList.add('designbase-wc-select__placeholder');
+            }
+            this.valueEl.appendChild(single);
+        }
+        this.clearButton.hidden = !showClear;
+        this.clearButton.setAttribute('aria-hidden', showClear ? 'false' : 'true');
+        this.classList.toggle('designbase-wc-select--has-value', hasValue);
+    }
+    syncOptions() {
+        if (!this.optionsEl)
+            return;
+        const options = this.getFilteredOptions();
+        const selected = this.parseSelectedValues();
+        const id = this.getAttribute('id') || 'db-select';
+        this.optionsEl.replaceChildren();
+        if (options.length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'designbase-wc-select__no-options';
+            empty.textContent = this.searchTerm ? '검색 결과가 없습니다.' : '옵션이 없습니다.';
+            this.optionsEl.appendChild(empty);
+            return;
+        }
+        options.forEach((option, index) => {
+            const isSelected = selected.includes(option.value);
+            const isFocused = index === this.focusedIndex;
+            const optionEl = document.createElement('div');
+            optionEl.className = [
+                'designbase-wc-select__option',
+                isSelected && 'designbase-wc-select__option--selected',
+                isFocused && 'designbase-wc-select__option--focused',
+                option.disabled && 'designbase-wc-select__option--disabled',
+            ].filter(Boolean).join(' ');
+            optionEl.id = `${id}-option-${index}`;
+            optionEl.setAttribute('role', 'option');
+            optionEl.setAttribute('aria-selected', String(isSelected));
+            optionEl.addEventListener('click', () => this.selectOption(option));
+            if (this.multiple) {
+                const checkboxWrap = document.createElement('div');
+                checkboxWrap.className = 'designbase-wc-select__checkbox';
+                const checkbox = document.createElement('db-checkbox');
+                checkbox.setAttribute('size', 's');
+                checkbox.setAttribute('has-label', 'false');
+                if (isSelected)
+                    checkbox.setAttribute('checked', '');
+                if (option.disabled)
+                    checkbox.setAttribute('disabled', '');
+                checkboxWrap.appendChild(checkbox);
+                optionEl.appendChild(checkboxWrap);
+            }
+            const label = document.createElement('span');
+            label.className = 'designbase-wc-select__option-label';
+            label.textContent = option.label;
+            optionEl.appendChild(label);
+            this.optionsEl.appendChild(optionEl);
+        });
+        if (this.focusedIndex >= 0) {
+            this.trigger?.setAttribute('aria-activedescendant', `${id}-option-${this.focusedIndex}`);
+        }
+        else {
+            this.trigger?.removeAttribute('aria-activedescendant');
+        }
+    }
+    escape(value) {
+        return value.replace(/[&<>"']/g, (char) => ({
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#39;',
+        }[char] || char));
+    }
+}
+DbSelect.formAssociated = true;
+if (!customElements.get('db-select')) {
+    customElements.define('db-select', DbSelect);
+}
+
+export { DbSelect };