@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,493 @@
-import{isDbIconName as e,createDbIcon as t}from"./db-icons.js";const i=["s","m","l"],r=["bottom-left","bottom-right","top-left","top-right"],s=["primary","secondary","tertiary","danger","ghost"];class DbDropdown extends HTMLElement{constructor(){super(...arguments),this.focusedIndex=-1,this.onTriggerActivate=null,this.lastTriggerSignature="",this.handleTriggerKeyDown=e=>{if(("Enter"===e.key||" "===e.key||"ArrowDown"===e.key)&&!this.open)return e.preventDefault(),this.open=!0,requestAnimationFrame(()=>this.focusItem(0)),void this.render();"Escape"===e.key&&this.open&&(e.preventDefault(),this.open=!1,this.render())},this.handleDocumentKeyDown=e=>{if(!this.open)return;if("Escape"===e.key)return e.preventDefault(),this.open=!1,this.render(),void this.triggerWrap?.querySelector("[aria-haspopup]")?.focus();const t=this.enabledItems();if(!t.length)return;const i=t.findIndex(e=>this.parsedItems.indexOf(e)===this.focusedIndex);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusItem(i<0?0:this.parsedItems.indexOf(t[(i+1)%t.length]));break;case"ArrowUp":e.preventDefault(),this.focusItem(i<0?0:this.parsedItems.indexOf(t[(i-1+t.length)%t.length]));break;case"Home":e.preventDefault(),this.focusItem(this.parsedItems.indexOf(t[0]));break;case"End":e.preventDefault(),this.focusItem(this.parsedItems.indexOf(t[t.length-1]));break;case"Enter":case" ":{e.preventDefault();const t=this.parsedItems[this.focusedIndex];!t||t.divider||t.disabled||this.selectItem(t);break}}},this.handleDocumentMouseDown=e=>{this.open&&(this.contains(e.target)||(this.open=!1,this.render()))}}static get observedAttributes(){return["options","items","placeholder","label","value","size","placement","full-width","disabled","open","trigger-variant","trigger-icon","icon-only"]}get parsedItems(){const e=this.getAttribute("items");if(e)try{const t=JSON.parse(e);if(Array.isArray(t))return t}catch{}return(this.getAttribute("options")||"").split(",").map(e=>e.trim()).filter(Boolean).map((e,t)=>({id:`option-${t}`,label:e}))}get options(){return this.parsedItems.map(e=>e.label||e.id)}set options(e){this.setAttribute("options",Array.isArray(e)?e.join(","):e)}get items(){return this.parsedItems}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get value(){return this.getAttribute("value")||""}set value(e){e?this.setAttribute("value",e):this.removeAttribute("value")}get open(){return this.hasAttribute("open")}set open(e){const t=this.open;this.toggleAttribute("open",e),t!==e&&this.dispatchEvent(new CustomEvent("db-open",{detail:{open:e},bubbles:!0,composed:!0}))}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",e)}get size(){return this.getAttribute("size")||"m"}set size(e){this.setAttribute("size",e)}get placement(){return this.getAttribute("placement")||"bottom-left"}set placement(e){this.setAttribute("placement",e)}get placeholder(){return this.getAttribute("placeholder")||""}set placeholder(e){e?this.setAttribute("placeholder",e):this.removeAttribute("placeholder")}get label(){return this.getAttribute("label")||""}set label(e){e?this.setAttribute("label",e):this.removeAttribute("label")}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(e){this.toggleAttribute("full-width",e)}connectedCallback(){requestAnimationFrame(()=>this.render()),document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.unbindTrigger()}attributeChangedCallback(e){this.isConnected&&("open"!==e||this.open||(this.focusedIndex=-1),this.render())}resolvedSize(){return i.includes(this.size)?this.size:"m"}resolvedPlacement(){return r.includes(this.placement)?this.placement:"bottom-left"}menuItemIconSize(){const e=this.resolvedSize();return"s"===e?14:"l"===e?18:16}triggerLabel(){return this.label?this.label:this.placeholder?this.placeholder:this.value?this.value:"메뉴"}enabledItems(){return this.parsedItems.filter(e=>!e.disabled&&!e.divider)}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap||e===this.menu||e===this.defaultTrigger,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[]).filter(e=>!isInternalNode(e))}hasCustomTrigger(){return this.collectTriggerChildren().length>0}bindTrigger(){this.triggerWrap&&(this.unbindTrigger(),this.onTriggerActivate=e=>{this.disabled||(e.preventDefault(),e.stopPropagation(),this.toggleOpen())},this.triggerWrap.addEventListener("click",this.onTriggerActivate),this.triggerWrap.addEventListener("keydown",this.handleTriggerKeyDown))}unbindTrigger(){this.triggerWrap&&this.onTriggerActivate&&this.triggerWrap.removeEventListener("click",this.onTriggerActivate),this.triggerWrap&&this.triggerWrap.removeEventListener("keydown",this.handleTriggerKeyDown),this.onTriggerActivate=null}toggleOpen(){this.disabled||(this.open=!this.open,this.open&&requestAnimationFrame(()=>this.focusItem(0)),this.render())}triggerSignature(){return[this.resolvedSize(),this.getAttribute("trigger-variant")||"tertiary",this.hasAttribute("icon-only")?"1":"0",this.getAttribute("trigger-icon")||"",this.fullWidth?"1":"0"].join("|")}renderDefaultTrigger(){const t=this.resolvedSize(),i=this.getAttribute("trigger-variant")||"tertiary",r=s.includes(i)?i:"tertiary",n=this.hasAttribute("icon-only"),a=this.getAttribute("trigger-icon"),o=document.createElement("db-button");if(o.setAttribute("type","button"),o.setAttribute("variant",r),o.setAttribute("size",t),o.className="designbase-wc-dropdown__trigger",o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-label",this.triggerLabel()),this.fullWidth&&o.setAttribute("full-width",""),n)o.setAttribute("icon-only",""),o.setAttribute("start-icon",a&&e(a)?a:"edit"),o.removeAttribute("end-icon");else{o.removeAttribute("icon-only"),a&&e(a)?o.setAttribute("start-icon",a):o.removeAttribute("start-icon");const t=document.createElement("span");t.className="designbase-wc-dropdown__trigger-label",t.textContent=this.triggerLabel(),o.append(t),o.setAttribute("end-icon","chevron-down")}return o}syncDefaultTriggerState(e){e.setAttribute("aria-expanded",String(this.open)),e.setAttribute("aria-label",this.triggerLabel()),e.classList.toggle("designbase-wc-dropdown__trigger--open",this.open),this.disabled?e.setAttribute("disabled",""):e.removeAttribute("disabled");const t=e.querySelector(".designbase-wc-dropdown__trigger-label");t&&(t.textContent=this.triggerLabel())}ensureStructure(){this.triggerWrap||(this.triggerWrap=document.createElement("div"),this.triggerWrap.className="designbase-wc-dropdown__trigger-wrap",this.triggerWrap.setAttribute("data-wc-internal","")),this.menu||(this.menu=document.createElement("div"),this.menu.className="designbase-wc-dropdown__menu",this.menu.setAttribute("data-wc-internal",""),this.menu.setAttribute("role","menu")),this.contains(this.triggerWrap)||this.append(this.triggerWrap),this.triggerWrap.contains(this.menu)||this.triggerWrap.append(this.menu),Array.from(this.children).forEach(e=>{e===this.triggerWrap||e.hasAttribute("data-wc-internal")||this.triggerWrap.insertBefore(e,this.menu)})}renderTrigger(){const e=this.collectTriggerChildren();if(e.length>0){this.defaultTrigger?.remove(),this.defaultTrigger=void 0;Array.from(this.triggerWrap.children).filter(e=>e!==this.menu&&e!==this.defaultTrigger).forEach(e=>e.remove()),e.forEach(e=>{e.setAttribute("aria-haspopup","menu"),e.setAttribute("aria-expanded",String(this.open)),e.classList.toggle("designbase-wc-dropdown__trigger--open",this.open),this.triggerWrap.insertBefore(e,this.menu||null)})}else{Array.from(this.triggerWrap.children).filter(e=>e!==this.menu&&e!==this.defaultTrigger).forEach(e=>e.remove()),this.defaultTrigger&&this.triggerSignature()===this.lastTriggerSignature||(this.defaultTrigger?.remove(),this.defaultTrigger=this.renderDefaultTrigger(),this.lastTriggerSignature=this.triggerSignature(),this.triggerWrap.insertBefore(this.defaultTrigger,this.menu||null)),this.syncDefaultTriggerState(this.defaultTrigger)}this.bindTrigger()}renderMenu(){const e=this.resolvedPlacement();this.menu.className=`designbase-wc-dropdown__menu designbase-wc-dropdown__menu--${e}${this.open?" designbase-wc-dropdown__menu--open":""}`,this.menu.setAttribute("aria-hidden",String(!this.open)),this.menu.setAttribute("aria-label",this.triggerLabel()),this.menu.replaceChildren();const i=this.menuItemIconSize();this.parsedItems.forEach((e,r)=>{if(e.divider){const e=document.createElement("div");return e.className="designbase-wc-dropdown__divider",e.setAttribute("role","separator"),void this.menu?.append(e)}e.id||e.label||String(r);const s=e.label||e.id,n=Boolean(e.disabled||this.disabled),a=this.focusedIndex===r,o=document.createElement("button");if(o.type="button",o.className=["designbase-wc-dropdown__item",n&&"designbase-wc-dropdown__item--disabled",a&&"designbase-wc-dropdown__item--focused"].filter(Boolean).join(" "),o.setAttribute("role","menuitem"),o.disabled=n,o.tabIndex=a?0:-1,o.dataset.index=String(r),e.icon){const r=t(e.icon,i);r.classList.add("designbase-wc-dropdown__item-icon"),o.append(r)}const d=document.createElement("span");d.className="designbase-wc-dropdown__item-label",d.textContent=s,o.append(d),o.addEventListener("click",t=>{t.stopPropagation(),this.selectItem(e)}),this.menu?.append(o)})}render(){const e=this.resolvedSize();this.className=["designbase-wc-dropdown",`designbase-wc-dropdown--${e}`,this.open&&"designbase-wc-dropdown--open",this.fullWidth&&"designbase-wc-dropdown--full-width",this.disabled&&"designbase-wc-dropdown--disabled"].filter(Boolean).join(" "),this.ensureStructure(),this.renderTrigger(),this.renderMenu()}selectItem(e){e.disabled||e.divider||(this.open=!1,this.focusedIndex=-1,this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e.label||e.id,id:e.id,item:e},bubbles:!0,composed:!0})),this.render(),this.triggerWrap?.querySelector("[aria-haspopup]")?.focus())}focusItem(e){const t=this.enabledItems();if(!t.length)return;const i=t[Math.max(0,Math.min(e,t.length-1))],r=this.parsedItems.indexOf(i);this.focusedIndex=r;Array.from(this.menu?.querySelectorAll(".designbase-wc-dropdown__item")||[]).forEach(e=>{const t=Number(e.dataset.index)===r;e.classList.toggle("designbase-wc-dropdown__item--focused",t),e.tabIndex=t?0:-1,t&&e.focus()})}}customElements.get("db-dropdown")||customElements.define("db-dropdown",DbDropdown);export{DbDropdown};
+import { isDbIconName, createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const PLACEMENTS = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
+const TRIGGER_VARIANTS = ['primary', 'secondary', 'tertiary', 'danger', 'ghost'];
+class DbDropdown extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.focusedIndex = -1;
+        this.onTriggerActivate = null;
+        this.lastTriggerSignature = '';
+        this.handleTriggerKeyDown = (event) => {
+            if ((event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') && !this.open) {
+                event.preventDefault();
+                this.open = true;
+                requestAnimationFrame(() => this.focusItem(0));
+                this.render();
+                return;
+            }
+            if (event.key === 'Escape' && this.open) {
+                event.preventDefault();
+                this.open = false;
+                this.render();
+            }
+        };
+        this.handleDocumentKeyDown = (event) => {
+            if (!this.open)
+                return;
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.open = false;
+                this.render();
+                this.triggerWrap?.querySelector('[aria-haspopup]')?.focus();
+                return;
+            }
+            const enabled = this.enabledItems();
+            if (!enabled.length)
+                return;
+            const currentEnabledIndex = enabled.findIndex((item) => this.parsedItems.indexOf(item) === this.focusedIndex);
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.focusItem(currentEnabledIndex < 0
+                        ? 0
+                        : this.parsedItems.indexOf(enabled[(currentEnabledIndex + 1) % enabled.length]));
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.focusItem(currentEnabledIndex < 0
+                        ? 0
+                        : this.parsedItems.indexOf(enabled[(currentEnabledIndex - 1 + enabled.length) % enabled.length]));
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this.focusItem(this.parsedItems.indexOf(enabled[0]));
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusItem(this.parsedItems.indexOf(enabled[enabled.length - 1]));
+                    break;
+                case 'Enter':
+                case ' ': {
+                    event.preventDefault();
+                    const item = this.parsedItems[this.focusedIndex];
+                    if (item && !item.divider && !item.disabled) {
+                        this.selectItem(item);
+                    }
+                    break;
+                }
+            }
+        };
+        this.handleDocumentMouseDown = (event) => {
+            if (!this.open)
+                return;
+            if (!this.contains(event.target)) {
+                this.open = false;
+                this.render();
+            }
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'options',
+            'items',
+            'placeholder',
+            'label',
+            'value',
+            'size',
+            'placement',
+            'full-width',
+            'disabled',
+            'open',
+            'trigger-variant',
+            'trigger-icon',
+            'icon-only',
+        ];
+    }
+    get parsedItems() {
+        const itemsAttr = this.getAttribute('items');
+        if (itemsAttr) {
+            try {
+                const parsed = JSON.parse(itemsAttr);
+                if (Array.isArray(parsed))
+                    return parsed;
+            }
+            catch {
+                // fall through
+            }
+        }
+        return (this.getAttribute('options') || '')
+            .split(',')
+            .map((option) => option.trim())
+            .filter(Boolean)
+            .map((label, index) => ({ id: `option-${index}`, label }));
+    }
+    get options() {
+        return this.parsedItems.map((item) => item.label || item.id);
+    }
+    set options(value) {
+        this.setAttribute('options', Array.isArray(value) ? value.join(',') : value);
+    }
+    get items() {
+        return this.parsedItems;
+    }
+    set items(value) {
+        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    get value() {
+        return this.getAttribute('value') || '';
+    }
+    set value(value) {
+        if (value)
+            this.setAttribute('value', value);
+        else
+            this.removeAttribute('value');
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        const wasOpen = this.open;
+        this.toggleAttribute('open', value);
+        if (wasOpen !== value) {
+            this.dispatchEvent(new CustomEvent('db-open', {
+                detail: { open: value },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        this.toggleAttribute('disabled', value);
+    }
+    get size() {
+        return this.getAttribute('size') || 'm';
+    }
+    set size(value) {
+        this.setAttribute('size', value);
+    }
+    get placement() {
+        return this.getAttribute('placement') || 'bottom-left';
+    }
+    set placement(value) {
+        this.setAttribute('placement', value);
+    }
+    get placeholder() {
+        return this.getAttribute('placeholder') || '';
+    }
+    set placeholder(value) {
+        if (value)
+            this.setAttribute('placeholder', value);
+        else
+            this.removeAttribute('placeholder');
+    }
+    get label() {
+        return this.getAttribute('label') || '';
+    }
+    set label(value) {
+        if (value)
+            this.setAttribute('label', value);
+        else
+            this.removeAttribute('label');
+    }
+    get fullWidth() {
+        return this.hasAttribute('full-width');
+    }
+    set fullWidth(value) {
+        this.toggleAttribute('full-width', value);
+    }
+    connectedCallback() {
+        requestAnimationFrame(() => this.render());
+        document.addEventListener('mousedown', this.handleDocumentMouseDown);
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+        this.unbindTrigger();
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'open' && !this.open) {
+            this.focusedIndex = -1;
+        }
+        this.render();
+    }
+    resolvedSize() {
+        return SIZES.includes(this.size) ? this.size : 'm';
+    }
+    resolvedPlacement() {
+        return PLACEMENTS.includes(this.placement)
+            ? this.placement
+            : 'bottom-left';
+    }
+    menuItemIconSize() {
+        const resolvedSize = this.resolvedSize();
+        return resolvedSize === 's' ? 14 : resolvedSize === 'l' ? 18 : 16;
+    }
+    triggerLabel() {
+        if (this.label)
+            return this.label;
+        if (this.placeholder)
+            return this.placeholder;
+        if (this.value)
+            return this.value;
+        return '메뉴';
+    }
+    enabledItems() {
+        return this.parsedItems.filter((item) => !item.disabled && !item.divider);
+    }
+    collectTriggerChildren() {
+        const isInternalNode = (child) => child.hasAttribute('data-wc-internal') ||
+            child === this.triggerWrap ||
+            child === this.menu ||
+            child === this.defaultTrigger;
+        const fromHost = Array.from(this.children).filter((child) => !isInternalNode(child));
+        if (fromHost.length > 0)
+            return fromHost;
+        return Array.from(this.triggerWrap?.children || []).filter((child) => !isInternalNode(child));
+    }
+    hasCustomTrigger() {
+        return this.collectTriggerChildren().length > 0;
+    }
+    bindTrigger() {
+        if (!this.triggerWrap)
+            return;
+        this.unbindTrigger();
+        this.onTriggerActivate = (event) => {
+            if (this.disabled)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.toggleOpen();
+        };
+        this.triggerWrap.addEventListener('click', this.onTriggerActivate);
+        this.triggerWrap.addEventListener('keydown', this.handleTriggerKeyDown);
+    }
+    unbindTrigger() {
+        if (this.triggerWrap && this.onTriggerActivate) {
+            this.triggerWrap.removeEventListener('click', this.onTriggerActivate);
+        }
+        if (this.triggerWrap) {
+            this.triggerWrap.removeEventListener('keydown', this.handleTriggerKeyDown);
+        }
+        this.onTriggerActivate = null;
+    }
+    toggleOpen() {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+        if (this.open) {
+            requestAnimationFrame(() => this.focusItem(0));
+        }
+        this.render();
+    }
+    triggerSignature() {
+        return [
+            this.resolvedSize(),
+            this.getAttribute('trigger-variant') || 'tertiary',
+            this.hasAttribute('icon-only') ? '1' : '0',
+            this.getAttribute('trigger-icon') || '',
+            this.fullWidth ? '1' : '0',
+        ].join('|');
+    }
+    renderDefaultTrigger() {
+        const resolvedSize = this.resolvedSize();
+        const triggerVariant = this.getAttribute('trigger-variant') || 'tertiary';
+        const safeVariant = TRIGGER_VARIANTS.includes(triggerVariant)
+            ? triggerVariant
+            : 'tertiary';
+        const iconOnly = this.hasAttribute('icon-only');
+        const triggerIcon = this.getAttribute('trigger-icon');
+        const button = document.createElement('db-button');
+        button.setAttribute('type', 'button');
+        button.setAttribute('variant', safeVariant);
+        button.setAttribute('size', resolvedSize);
+        button.className = 'designbase-wc-dropdown__trigger';
+        button.setAttribute('aria-haspopup', 'menu');
+        button.setAttribute('aria-label', this.triggerLabel());
+        if (this.fullWidth)
+            button.setAttribute('full-width', '');
+        if (iconOnly) {
+            button.setAttribute('icon-only', '');
+            button.setAttribute('start-icon', triggerIcon && isDbIconName(triggerIcon) ? triggerIcon : 'edit');
+            button.removeAttribute('end-icon');
+        }
+        else {
+            button.removeAttribute('icon-only');
+            if (triggerIcon && isDbIconName(triggerIcon)) {
+                button.setAttribute('start-icon', triggerIcon);
+            }
+            else {
+                button.removeAttribute('start-icon');
+            }
+            const labelEl = document.createElement('span');
+            labelEl.className = 'designbase-wc-dropdown__trigger-label';
+            labelEl.textContent = this.triggerLabel();
+            button.append(labelEl);
+            button.setAttribute('end-icon', 'chevron-down');
+        }
+        return button;
+    }
+    syncDefaultTriggerState(button) {
+        button.setAttribute('aria-expanded', String(this.open));
+        button.setAttribute('aria-label', this.triggerLabel());
+        button.classList.toggle('designbase-wc-dropdown__trigger--open', this.open);
+        if (this.disabled)
+            button.setAttribute('disabled', '');
+        else
+            button.removeAttribute('disabled');
+        const labelEl = button.querySelector('.designbase-wc-dropdown__trigger-label');
+        if (labelEl)
+            labelEl.textContent = this.triggerLabel();
+    }
+    ensureStructure() {
+        if (!this.triggerWrap) {
+            this.triggerWrap = document.createElement('div');
+            this.triggerWrap.className = 'designbase-wc-dropdown__trigger-wrap';
+            this.triggerWrap.setAttribute('data-wc-internal', '');
+        }
+        if (!this.menu) {
+            this.menu = document.createElement('div');
+            this.menu.className = 'designbase-wc-dropdown__menu';
+            this.menu.setAttribute('data-wc-internal', '');
+            this.menu.setAttribute('role', 'menu');
+        }
+        if (!this.contains(this.triggerWrap)) {
+            this.append(this.triggerWrap);
+        }
+        if (!this.triggerWrap.contains(this.menu)) {
+            this.triggerWrap.append(this.menu);
+        }
+        Array.from(this.children).forEach((child) => {
+            if (child === this.triggerWrap || child.hasAttribute('data-wc-internal'))
+                return;
+            this.triggerWrap.insertBefore(child, this.menu);
+        });
+    }
+    renderTrigger() {
+        const customChildren = this.collectTriggerChildren();
+        if (customChildren.length > 0) {
+            this.defaultTrigger?.remove();
+            this.defaultTrigger = undefined;
+            const existingCustom = Array.from(this.triggerWrap.children).filter((child) => child !== this.menu && child !== this.defaultTrigger);
+            existingCustom.forEach((child) => child.remove());
+            customChildren.forEach((child) => {
+                child.setAttribute('aria-haspopup', 'menu');
+                child.setAttribute('aria-expanded', String(this.open));
+                child.classList.toggle('designbase-wc-dropdown__trigger--open', this.open);
+                this.triggerWrap.insertBefore(child, this.menu || null);
+            });
+        }
+        else {
+            const existingCustom = Array.from(this.triggerWrap.children).filter((child) => child !== this.menu && child !== this.defaultTrigger);
+            existingCustom.forEach((child) => child.remove());
+            if (!this.defaultTrigger || this.triggerSignature() !== this.lastTriggerSignature) {
+                this.defaultTrigger?.remove();
+                this.defaultTrigger = this.renderDefaultTrigger();
+                this.lastTriggerSignature = this.triggerSignature();
+                this.triggerWrap.insertBefore(this.defaultTrigger, this.menu || null);
+            }
+            // 최초 생성/재사용 여부와 관계없이 항상 상태(disabled·open·aria)를 동기화한다.
+            this.syncDefaultTriggerState(this.defaultTrigger);
+        }
+        this.bindTrigger();
+    }
+    renderMenu() {
+        const resolvedPlacement = this.resolvedPlacement();
+        this.menu.className = `designbase-wc-dropdown__menu designbase-wc-dropdown__menu--${resolvedPlacement}${this.open ? ' designbase-wc-dropdown__menu--open' : ''}`;
+        this.menu.setAttribute('aria-hidden', String(!this.open));
+        this.menu.setAttribute('aria-label', this.triggerLabel());
+        this.menu.replaceChildren();
+        const iconSize = this.menuItemIconSize();
+        this.parsedItems.forEach((item, index) => {
+            if (item.divider) {
+                const divider = document.createElement('div');
+                divider.className = 'designbase-wc-dropdown__divider';
+                divider.setAttribute('role', 'separator');
+                this.menu?.append(divider);
+                return;
+            }
+            item.id || item.label || String(index);
+            const itemLabel = item.label || item.id;
+            const isDisabled = Boolean(item.disabled || this.disabled);
+            const isFocused = this.focusedIndex === index;
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = [
+                'designbase-wc-dropdown__item',
+                isDisabled && 'designbase-wc-dropdown__item--disabled',
+                isFocused && 'designbase-wc-dropdown__item--focused',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            button.setAttribute('role', 'menuitem');
+            button.disabled = isDisabled;
+            button.tabIndex = isFocused ? 0 : -1;
+            button.dataset.index = String(index);
+            if (item.icon) {
+                const icon = createDbIcon(item.icon, iconSize);
+                icon.classList.add('designbase-wc-dropdown__item-icon');
+                button.append(icon);
+            }
+            const itemLabelEl = document.createElement('span');
+            itemLabelEl.className = 'designbase-wc-dropdown__item-label';
+            itemLabelEl.textContent = itemLabel;
+            button.append(itemLabelEl);
+            button.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.selectItem(item);
+            });
+            this.menu?.append(button);
+        });
+    }
+    render() {
+        const resolvedSize = this.resolvedSize();
+        this.className = [
+            'designbase-wc-dropdown',
+            `designbase-wc-dropdown--${resolvedSize}`,
+            this.open && 'designbase-wc-dropdown--open',
+            this.fullWidth && 'designbase-wc-dropdown--full-width',
+            this.disabled && 'designbase-wc-dropdown--disabled',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.ensureStructure();
+        this.renderTrigger();
+        this.renderMenu();
+    }
+    selectItem(item) {
+        if (item.disabled || item.divider)
+            return;
+        this.open = false;
+        this.focusedIndex = -1;
+        this.dispatchEvent(new CustomEvent('db-change', {
+            detail: {
+                value: item.label || item.id,
+                id: item.id,
+                item,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+        this.render();
+        this.triggerWrap?.querySelector('[aria-haspopup]')?.focus();
+    }
+    focusItem(index) {
+        const enabled = this.enabledItems();
+        if (!enabled.length)
+            return;
+        const target = enabled[Math.max(0, Math.min(index, enabled.length - 1))];
+        const targetIndex = this.parsedItems.indexOf(target);
+        this.focusedIndex = targetIndex;
+        const buttons = Array.from(this.menu?.querySelectorAll('.designbase-wc-dropdown__item') || []);
+        buttons.forEach((button) => {
+            const buttonIndex = Number(button.dataset.index);
+            const focused = buttonIndex === targetIndex;
+            button.classList.toggle('designbase-wc-dropdown__item--focused', focused);
+            button.tabIndex = focused ? 0 : -1;
+            if (focused)
+                button.focus();
+        });
+    }
+}
+if (!customElements.get('db-dropdown')) {
+    customElements.define('db-dropdown', DbDropdown);
+}
+
+export { DbDropdown };