@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,493 +1 @@
-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 };
+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};