@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-search-bar.js

@@ -1 +1,668 @@
-import{getDbComponentIconSize as e,createDbIcon as t}from"./db-icons.js";const s=["s","m","l"],a=["vertical","horizontal"];class DbSearchBar extends HTMLElement{constructor(){super(...arguments),this.recentSearches=[],this.isFocused=!1,this.currentSuggestion=0,this.scrollParents=[]}static get observedAttributes(){return["value","default-value","placeholder","size","disabled","readonly","full-width","show-shortcut","shortcut-label","enable-recent-searches","recent-searches-key","recent-searches-layout","suggested-searches","suggestion-rolling-interval","categories","selected-category","search-results","empty-state-message"]}getResolvedSize(){const e=this.getAttribute("size")||"m";return s.includes(e)?e:"m"}getIconPx(){return e(this.getResolvedSize())}syncIcons(){const e=this.getIconPx();this.querySelector(".designbase-wc-search-bar__search-icon")?.replaceChildren(t("search",e)),this.clearButton?.replaceChildren(t("close",e))}hasInputValue(){return Boolean((this.input?.value??this.getAttribute("value")??"").trim())}get value(){return this.input?.value??this.getAttribute("value")??""}set value(e){this.setAttribute("value",e),this.input&&(this.input.value=e)}connectedCallback(){this.loadRecentSearches(),this.render(),this.bindGlobalShortcut()}disconnectedCallback(){this.clearSuggestionInterval(),this.unbindGlobalShortcut(),this.detachDropdownPortal(),this.blurTimer&&clearTimeout(this.blurTimer)}attributeChangedCallback(e){if(this.isConnected)return"value"===e&&this.input?(this.input.value=this.getAttribute("value")||"",this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"disabled"===e||"readonly"===e||"placeholder"===e||"show-shortcut"===e||"shortcut-label"===e||"selected-category"===e||"search-results"===e||"empty-state-message"===e||"suggested-searches"===e?(this.syncAttributes(),this.syncPlaceholder(),this.updateDropdown(),void this.syncSuggestionRolling()):"enable-recent-searches"===e||"recent-searches-key"===e?(this.loadRecentSearches(),void this.updateDropdown()):void("categories"!==e&&"recent-searches-layout"!==e?this.render():this.updateDropdown())}focus(){this.input?.focus()}parseJsonArray(e){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}getRecentSearchesKey(){return this.getAttribute("recent-searches-key")||"searchbar-recent-searches"}loadRecentSearches(){if(this.hasAttribute("enable-recent-searches"))try{const e=localStorage.getItem(this.getRecentSearchesKey());this.recentSearches=e?JSON.parse(e):[],Array.isArray(this.recentSearches)||(this.recentSearches=[])}catch{this.recentSearches=[]}else this.recentSearches=[]}saveRecentSearches(){try{localStorage.setItem(this.getRecentSearchesKey(),JSON.stringify(this.recentSearches))}catch{}}clearSuggestionInterval(){this.suggestionInterval&&(clearInterval(this.suggestionInterval),this.suggestionInterval=void 0)}syncSuggestionRolling(){this.clearSuggestionInterval();const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=Number(this.getAttribute("suggestion-rolling-interval")||5e3);e.length>0&&!t&&(this.suggestionInterval=setInterval(()=>{this.currentSuggestion=(this.currentSuggestion+1)%e.length,this.syncPlaceholder(),this.updateDropdown()},s))}syncPlaceholder(){if(!this.input)return;const e=this.parseJsonArray("suggested-searches"),t=this.hasInputValue(),s=this.getAttribute("placeholder")||"검색...";e.length>0&&!t?this.input.placeholder=e[this.currentSuggestion]||s:this.input.placeholder=s}syncValueState(){const e=this.hasInputValue();this.classList.toggle("designbase-wc-search-bar--has-value",e),this.clearButton&&(this.clearButton.hidden=!e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.shortcutBadge&&(this.shortcutBadge.hidden=!this.hasAttribute("show-shortcut")||e||this.hasAttribute("disabled")||this.hasAttribute("readonly")),this.syncIcons()}syncAttributes(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("disabled"),a=this.hasAttribute("readonly"),n=this.hasAttribute("show-shortcut");this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${s.includes(e)?e:"m"}`,t&&"designbase-wc-search-bar--disabled",a&&"designbase-wc-search-bar--readonly",this.hasAttribute("full-width")&&"designbase-wc-search-bar--full-width",Boolean(this.hasInputValue())&&"designbase-wc-search-bar--has-value"].filter(Boolean).join(" "),this.input&&(this.input.disabled=t,this.input.readOnly=a),this.shortcutBadge&&(this.shortcutBadge.hidden=!n||this.hasInputValue()||t||a,this.shortcutBadge.textContent=this.getAttribute("shortcut-label")||"⌘K"),this.syncValueState()}bindGlobalShortcut(){this.unbindGlobalShortcut(),!this.hasAttribute("show-shortcut")||this.hasAttribute("disabled")||this.hasAttribute("readonly")||(this.globalKeyHandler=e=>{const t=e.metaKey||e.ctrlKey;let s="k";const a=(this.getAttribute("shortcut-label")||"⌘K").slice(-1).toLowerCase();a&&(s=a),t&&e.key.toLowerCase()===s&&(e.preventDefault(),this.focus())},window.addEventListener("keydown",this.globalKeyHandler))}unbindGlobalShortcut(){this.globalKeyHandler&&(window.removeEventListener("keydown",this.globalKeyHandler),this.globalKeyHandler=void 0)}positionDropdown(){if(!this.dropdown||this.dropdown.hidden)return;const e=this.getBoundingClientRect(),t=this.input?.getBoundingClientRect(),s=t??e;this.dropdown.style.top=`${s.bottom+4}px`,this.dropdown.style.left=`${e.left}px`,this.dropdown.style.width=`${e.width}px`,this.dropdown.style.right="auto"}bindRepositionListeners(){if(this.repositionHandler)return;this.repositionHandler=()=>{requestAnimationFrame(()=>this.positionDropdown())},window.addEventListener("scroll",this.repositionHandler,!0),window.addEventListener("resize",this.repositionHandler),this.scrollParents=[];let e=this.parentElement;for(;e&&e!==document.body;){const t=getComputedStyle(e),s=/(auto|scroll|overlay)/.test(t.overflowY),a=/(auto|scroll|overlay)/.test(t.overflow);(s||a)&&e.scrollHeight>e.clientHeight&&(e.addEventListener("scroll",this.repositionHandler,{passive:!0}),this.scrollParents.push(e)),e=e.parentElement}}unbindRepositionListeners(){this.repositionHandler&&(window.removeEventListener("scroll",this.repositionHandler,!0),window.removeEventListener("resize",this.repositionHandler),this.scrollParents.forEach(e=>e.removeEventListener("scroll",this.repositionHandler)),this.scrollParents=[],this.repositionHandler=void 0)}attachDropdownPortal(){this.dropdown&&!this.dropdown.hidden&&(this.dropdown.classList.add("designbase-wc-search-bar__dropdown--portal"),this.dropdown.parentElement!==document.body&&document.body.append(this.dropdown),requestAnimationFrame(()=>this.positionDropdown()),this.repositionHandler||this.bindRepositionListeners())}detachDropdownPortal(){this.unbindRepositionListeners(),this.dropdown&&(this.dropdown.classList.remove("designbase-wc-search-bar__dropdown--portal"),this.dropdown.style.top="",this.dropdown.style.left="",this.dropdown.style.width="",this.dropdown.style.right="",this.dropdown.parentElement===document.body&&this.isConnected&&this.append(this.dropdown))}shouldShowDropdown(){const e=this.hasInputValue(),t=this.parseJsonArray("categories"),s=this.parseJsonArray("suggested-searches"),a=this.getAttribute("search-results"),n=this.getAttribute("empty-state-message");return this.isFocused&&(t.length>0||this.hasAttribute("enable-recent-searches")&&this.recentSearches.length>0&&!e||s.length>0&&!e||null!==a&&e||Boolean(n)&&!e&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===s.length)}formatSearchResult(e){if("string"==typeof e||"number"==typeof e)return String(e);if(e&&"object"==typeof e){const t=e;if("string"==typeof t.title)return t.title;if("string"==typeof t.label)return t.label}return String(e)}handleSearch(e){const t=(e??this.value).trim();t&&(this.dispatchEvent(new CustomEvent("db-search",{detail:{value:t},bubbles:!0,composed:!0})),this.hasAttribute("enable-recent-searches")&&(this.recentSearches=[t,...this.recentSearches.filter(e=>e!==t)].slice(0,10),this.saveRecentSearches(),this.updateDropdown()))}updateDropdown(){if(!this.dropdown)return;const s=this.shouldShowDropdown();if(this.dropdown.hidden=!s,this.classList.toggle("designbase-wc-search-bar--dropdown-open",s),!s)return this.dropdown.replaceChildren(),void this.detachDropdownPortal();this.dropdown.replaceChildren();const n=this.hasInputValue(),r=this.parseJsonArray("categories"),i=this.parseJsonArray("suggested-searches"),o=this.getAttribute("selected-category")||"",c=this.parseJsonArray("search-results"),h=this.getAttribute("empty-state-message"),d=a.includes(this.getAttribute("recent-searches-layout")||"vertical")&&this.getAttribute("recent-searches-layout")||"vertical";if(r.length>0){const e=document.createElement("div");e.className="designbase-wc-search-bar__categories",r.forEach(t=>{const s=document.createElement("db-chip");s.setAttribute("label",t),s.setAttribute("size","s"),s.setAttribute("variant",t===o?"primary":"default"),s.setAttribute("clickable",""),s.addEventListener("mousedown",e=>{e.preventDefault(),this.setAttribute("selected-category",t),this.dispatchEvent(new CustomEvent("db-category-change",{detail:{category:t},bubbles:!0,composed:!0})),this.updateDropdown()}),e.append(s)}),this.dropdown.append(e)}if(n&&this.hasAttribute("search-results")){const e=document.createElement("div");if(e.className="designbase-wc-search-bar__results",c.length>0){const t=document.createElement("ul");t.className="designbase-wc-search-bar__results-list",c.forEach((e,s)=>{const a=document.createElement("li");a.className="designbase-wc-search-bar__result-item",a.textContent=this.formatSearchResult(e),a.addEventListener("mousedown",t=>{t.preventDefault(),this.isFocused=!1,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-search-result-click",{detail:{result:e,index:s},bubbles:!0,composed:!0}))}),t.append(a)}),e.append(t)}else{const t=document.createElement("div");t.className="designbase-wc-search-bar__results-empty",t.textContent="검색 결과가 없습니다.",e.append(t)}return this.dropdown.append(e),void this.attachDropdownPortal()}if(this.hasAttribute("enable-recent-searches")&&!n&&this.recentSearches.length>0){const s=document.createElement("div");s.className=`designbase-wc-search-bar__recent-searches designbase-wc-search-bar__recent-searches--${d}`;const a=document.createElement("div");a.className="designbase-wc-search-bar__recent-header";const n=document.createElement("span");n.className="designbase-wc-search-bar__recent-title",n.textContent="최근 검색어";const r=document.createElement("button");r.type="button",r.className="designbase-wc-search-bar__clear-all-button",r.setAttribute("aria-label","모든 최근 검색어 삭제"),r.textContent="전체 삭제",r.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=[];try{localStorage.removeItem(this.getRecentSearchesKey())}catch{}this.updateDropdown()}),a.append(n,r);const i=document.createElement("div");i.className="designbase-wc-search-bar__recent-list",this.recentSearches.forEach(s=>{const a=document.createElement("div");a.className="designbase-wc-search-bar__recent-item";const n=document.createElement("button");n.type="button",n.className="designbase-wc-search-bar__recent-search-button",n.textContent=s,n.addEventListener("mousedown",e=>{if(e.preventDefault(),!this.input)return;this.input.value=s,this.setAttribute("value",s),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(s);const t={value:s};this.dispatchEvent(new CustomEvent("db-input",{detail:t,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:t,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()});const r=document.createElement("button");r.type="button",r.className="designbase-wc-search-bar__recent-remove-button",r.setAttribute("aria-label",`${s} 삭제`),r.append(t("close",e("s"))),r.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=this.recentSearches.filter(e=>e!==s),this.saveRecentSearches(),this.updateDropdown()}),a.append(n,r),i.append(a)}),s.append(a,i),this.dropdown.append(s)}if(i.length>0&&!n){const e=document.createElement("div");e.className="designbase-wc-search-bar__suggestions";const t=document.createElement("div");t.className="designbase-wc-search-bar__suggestions-header";const s=document.createElement("span");s.className="designbase-wc-search-bar__suggestions-title",s.textContent="추천 검색어",t.append(s);const a=document.createElement("div");a.className="designbase-wc-search-bar__suggestions-list",i.forEach((e,t)=>{const s=document.createElement("button");s.type="button",s.className=["designbase-wc-search-bar__suggestion-item",t===this.currentSuggestion&&"designbase-wc-search-bar__suggestion-item--active"].filter(Boolean).join(" "),s.textContent=e,s.addEventListener("mousedown",t=>{if(t.preventDefault(),!this.input)return;this.clearSuggestionInterval(),this.input.value=e,this.setAttribute("value",e),this.syncValueState(),this.syncPlaceholder(),this.handleSearch(e);const s={value:e};this.dispatchEvent(new CustomEvent("db-input",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:s,bubbles:!0,composed:!0})),this.isFocused=!1,this.updateDropdown()}),a.append(s)}),e.append(t,a),this.dropdown.append(e)}if(h&&!n&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===i.length){const e=document.createElement("div");e.className="designbase-wc-search-bar__empty-state",e.textContent=h,this.dropdown.append(e)}this.attachDropdownPortal()}render(){const e=this.getAttribute("size")||"m",a=this.hasAttribute("disabled"),n=this.hasAttribute("readonly"),r=this.hasAttribute("full-width"),i=this.hasAttribute("show-shortcut"),o=this.getAttribute("value")??this.getAttribute("default-value")??"",c=Boolean(o.trim()),h=this.getIconPx();this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${s.includes(e)?e:"m"}`,a&&"designbase-wc-search-bar--disabled",n&&"designbase-wc-search-bar--readonly",r&&"designbase-wc-search-bar--full-width",c&&"designbase-wc-search-bar--has-value",this.shouldShowDropdown()&&"designbase-wc-search-bar--dropdown-open"].filter(Boolean).join(" "),this.setAttribute("role","search"),this.clearSuggestionInterval(),this.detachDropdownPortal(),this.replaceChildren();const d=document.createElement("div");d.className="designbase-wc-search-bar__container";const l=document.createElement("div");l.className="designbase-wc-search-bar__search-icon",l.setAttribute("aria-hidden","true"),l.append(t("search",h));const u=document.createElement("input");if(u.type="text",u.className="designbase-wc-search-bar__input",u.value=o,u.disabled=a,u.readOnly=n,u.setAttribute("aria-label","검색어 입력"),this.input=u,i){const t=document.createElement("db-badge");t.className="designbase-wc-search-bar__shortcut-badge",t.setAttribute("size","l"===e?"m":"s"),t.setAttribute("variant","secondary"),t.setAttribute("badge-style","text"),t.setAttribute("aria-hidden","true"),t.textContent=this.getAttribute("shortcut-label")||"⌘K",t.hidden=c||a||n,this.shortcutBadge=t,d.append(l,u,t)}else d.append(l,u);const b=document.createElement("button");b.type="button",b.className="designbase-wc-search-bar__clear-button",b.setAttribute("aria-label","검색어 지우기"),b.hidden=!c||a||n,b.append(t("close",h)),this.clearButton=b,d.append(b);const p=document.createElement("div");p.className="designbase-wc-search-bar__dropdown",p.hidden=!0,p.addEventListener("mousedown",e=>{e.preventDefault()}),this.dropdown=p,u.addEventListener("input",()=>{this.setAttribute("value",u.value),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling();const e={value:u.value};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),u.addEventListener("keydown",e=>{"Enter"===e.key&&this.handleSearch()}),u.addEventListener("focus",()=>{this.isFocused=!0,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-focus",{bubbles:!0,composed:!0}))}),u.addEventListener("blur",()=>{this.isFocused=!1,this.blurTimer&&clearTimeout(this.blurTimer),this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-blur",{bubbles:!0,composed:!0}))}),b.addEventListener("click",()=>{u.value="",this.setAttribute("value",""),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling(),u.focus(),this.dispatchEvent(new CustomEvent("db-clear",{bubbles:!0,composed:!0}));const e={value:""};this.dispatchEvent(new CustomEvent("db-input",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:e,bubbles:!0,composed:!0}))}),this.append(d,p),this.syncIcons(),this.syncPlaceholder(),this.syncSuggestionRolling(),this.bindGlobalShortcut(),this.updateDropdown()}}customElements.get("db-search-bar")||customElements.define("db-search-bar",DbSearchBar);export{DbSearchBar};
+import { getDbComponentIconSize, createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const RECENT_LAYOUTS = ['vertical', 'horizontal'];
+class DbSearchBar extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.recentSearches = [];
+        this.isFocused = false;
+        this.currentSuggestion = 0;
+        this.scrollParents = [];
+    }
+    static get observedAttributes() {
+        return [
+            'value',
+            'default-value',
+            'placeholder',
+            'size',
+            'disabled',
+            'readonly',
+            'full-width',
+            'show-shortcut',
+            'shortcut-label',
+            'enable-recent-searches',
+            'recent-searches-key',
+            'recent-searches-layout',
+            'suggested-searches',
+            'suggestion-rolling-interval',
+            'categories',
+            'selected-category',
+            'search-results',
+            'empty-state-message',
+        ];
+    }
+    getResolvedSize() {
+        const size = this.getAttribute('size') || 'm';
+        return SIZES.includes(size) ? size : 'm';
+    }
+    getIconPx() {
+        return getDbComponentIconSize(this.getResolvedSize());
+    }
+    syncIcons() {
+        const iconPx = this.getIconPx();
+        this.querySelector('.designbase-wc-search-bar__search-icon')?.replaceChildren(createDbIcon('search', iconPx));
+        this.clearButton?.replaceChildren(createDbIcon('close', iconPx));
+    }
+    hasInputValue() {
+        return Boolean((this.input?.value ?? this.getAttribute('value') ?? '').trim());
+    }
+    get value() {
+        return this.input?.value ?? this.getAttribute('value') ?? '';
+    }
+    set value(nextValue) {
+        this.setAttribute('value', nextValue);
+        if (this.input)
+            this.input.value = nextValue;
+    }
+    connectedCallback() {
+        this.loadRecentSearches();
+        this.render();
+        this.bindGlobalShortcut();
+    }
+    disconnectedCallback() {
+        this.clearSuggestionInterval();
+        this.unbindGlobalShortcut();
+        this.detachDropdownPortal();
+        if (this.blurTimer)
+            clearTimeout(this.blurTimer);
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'value' && this.input) {
+            this.input.value = this.getAttribute('value') || '';
+            this.syncValueState();
+            this.syncPlaceholder();
+            this.updateDropdown();
+            this.syncSuggestionRolling();
+            return;
+        }
+        if (name === 'disabled' ||
+            name === 'readonly' ||
+            name === 'placeholder' ||
+            name === 'show-shortcut' ||
+            name === 'shortcut-label' ||
+            name === 'selected-category' ||
+            name === 'search-results' ||
+            name === 'empty-state-message' ||
+            name === 'suggested-searches') {
+            this.syncAttributes();
+            this.syncPlaceholder();
+            this.updateDropdown();
+            this.syncSuggestionRolling();
+            return;
+        }
+        if (name === 'enable-recent-searches' || name === 'recent-searches-key') {
+            this.loadRecentSearches();
+            this.updateDropdown();
+            return;
+        }
+        if (name === 'categories' || name === 'recent-searches-layout') {
+            this.updateDropdown();
+            return;
+        }
+        this.render();
+    }
+    focus() {
+        this.input?.focus();
+    }
+    parseJsonArray(attributeName) {
+        try {
+            const parsed = JSON.parse(this.getAttribute(attributeName) || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    getRecentSearchesKey() {
+        return this.getAttribute('recent-searches-key') || 'searchbar-recent-searches';
+    }
+    loadRecentSearches() {
+        if (!this.hasAttribute('enable-recent-searches')) {
+            this.recentSearches = [];
+            return;
+        }
+        try {
+            const stored = localStorage.getItem(this.getRecentSearchesKey());
+            this.recentSearches = stored ? JSON.parse(stored) : [];
+            if (!Array.isArray(this.recentSearches))
+                this.recentSearches = [];
+        }
+        catch {
+            this.recentSearches = [];
+        }
+    }
+    saveRecentSearches() {
+        try {
+            localStorage.setItem(this.getRecentSearchesKey(), JSON.stringify(this.recentSearches));
+        }
+        catch {
+            // ignore storage errors
+        }
+    }
+    clearSuggestionInterval() {
+        if (this.suggestionInterval) {
+            clearInterval(this.suggestionInterval);
+            this.suggestionInterval = undefined;
+        }
+    }
+    syncSuggestionRolling() {
+        this.clearSuggestionInterval();
+        const suggestions = this.parseJsonArray('suggested-searches');
+        const hasValue = this.hasInputValue();
+        const interval = Number(this.getAttribute('suggestion-rolling-interval') || 5000);
+        if (suggestions.length > 0 && !hasValue) {
+            this.suggestionInterval = setInterval(() => {
+                this.currentSuggestion = (this.currentSuggestion + 1) % suggestions.length;
+                this.syncPlaceholder();
+                this.updateDropdown();
+            }, interval);
+        }
+    }
+    syncPlaceholder() {
+        if (!this.input)
+            return;
+        const suggestions = this.parseJsonArray('suggested-searches');
+        const hasValue = this.hasInputValue();
+        const placeholder = this.getAttribute('placeholder') || '검색...';
+        if (suggestions.length > 0 && !hasValue) {
+            this.input.placeholder = suggestions[this.currentSuggestion] || placeholder;
+        }
+        else {
+            this.input.placeholder = placeholder;
+        }
+    }
+    syncValueState() {
+        const hasValue = this.hasInputValue();
+        this.classList.toggle('designbase-wc-search-bar--has-value', hasValue);
+        if (this.clearButton) {
+            this.clearButton.hidden = !hasValue || this.hasAttribute('disabled') || this.hasAttribute('readonly');
+        }
+        if (this.shortcutBadge) {
+            this.shortcutBadge.hidden =
+                !this.hasAttribute('show-shortcut') ||
+                    hasValue ||
+                    this.hasAttribute('disabled') ||
+                    this.hasAttribute('readonly');
+        }
+        this.syncIcons();
+    }
+    syncAttributes() {
+        const size = this.getAttribute('size') || 'm';
+        const disabled = this.hasAttribute('disabled');
+        const readOnly = this.hasAttribute('readonly');
+        const showShortcut = this.hasAttribute('show-shortcut');
+        this.className = [
+            'designbase-wc-search-bar',
+            `designbase-wc-search-bar--${SIZES.includes(size) ? size : 'm'}`,
+            disabled && 'designbase-wc-search-bar--disabled',
+            readOnly && 'designbase-wc-search-bar--readonly',
+            this.hasAttribute('full-width') && 'designbase-wc-search-bar--full-width',
+            Boolean(this.hasInputValue()) && 'designbase-wc-search-bar--has-value',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        if (this.input) {
+            this.input.disabled = disabled;
+            this.input.readOnly = readOnly;
+        }
+        if (this.shortcutBadge) {
+            this.shortcutBadge.hidden = !showShortcut || this.hasInputValue() || disabled || readOnly;
+            this.shortcutBadge.textContent = this.getAttribute('shortcut-label') || '⌘K';
+        }
+        this.syncValueState();
+    }
+    bindGlobalShortcut() {
+        this.unbindGlobalShortcut();
+        if (!this.hasAttribute('show-shortcut') || this.hasAttribute('disabled') || this.hasAttribute('readonly')) {
+            return;
+        }
+        this.globalKeyHandler = (event) => {
+            const isModifier = event.metaKey || event.ctrlKey;
+            let keyToMatch = 'k';
+            const shortcutLabel = this.getAttribute('shortcut-label') || '⌘K';
+            const lastChar = shortcutLabel.slice(-1).toLowerCase();
+            if (lastChar)
+                keyToMatch = lastChar;
+            if (isModifier && event.key.toLowerCase() === keyToMatch) {
+                event.preventDefault();
+                this.focus();
+            }
+        };
+        window.addEventListener('keydown', this.globalKeyHandler);
+    }
+    unbindGlobalShortcut() {
+        if (this.globalKeyHandler) {
+            window.removeEventListener('keydown', this.globalKeyHandler);
+            this.globalKeyHandler = undefined;
+        }
+    }
+    positionDropdown() {
+        if (!this.dropdown || this.dropdown.hidden)
+            return;
+        const hostRect = this.getBoundingClientRect();
+        const inputRect = this.input?.getBoundingClientRect();
+        const anchorRect = inputRect ?? hostRect;
+        this.dropdown.style.top = `${anchorRect.bottom + 4}px`;
+        this.dropdown.style.left = `${hostRect.left}px`;
+        this.dropdown.style.width = `${hostRect.width}px`;
+        this.dropdown.style.right = 'auto';
+    }
+    bindRepositionListeners() {
+        if (this.repositionHandler)
+            return;
+        this.repositionHandler = () => {
+            requestAnimationFrame(() => this.positionDropdown());
+        };
+        window.addEventListener('scroll', this.repositionHandler, true);
+        window.addEventListener('resize', this.repositionHandler);
+        this.scrollParents = [];
+        let parent = this.parentElement;
+        while (parent && parent !== document.body) {
+            const style = getComputedStyle(parent);
+            const scrollableY = /(auto|scroll|overlay)/.test(style.overflowY);
+            const scrollable = /(auto|scroll|overlay)/.test(style.overflow);
+            if ((scrollableY || scrollable) && parent.scrollHeight > parent.clientHeight) {
+                parent.addEventListener('scroll', this.repositionHandler, { passive: true });
+                this.scrollParents.push(parent);
+            }
+            parent = parent.parentElement;
+        }
+    }
+    unbindRepositionListeners() {
+        if (!this.repositionHandler)
+            return;
+        window.removeEventListener('scroll', this.repositionHandler, true);
+        window.removeEventListener('resize', this.repositionHandler);
+        this.scrollParents.forEach((parent) => parent.removeEventListener('scroll', this.repositionHandler));
+        this.scrollParents = [];
+        this.repositionHandler = undefined;
+    }
+    attachDropdownPortal() {
+        if (!this.dropdown || this.dropdown.hidden)
+            return;
+        this.dropdown.classList.add('designbase-wc-search-bar__dropdown--portal');
+        if (this.dropdown.parentElement !== document.body) {
+            document.body.append(this.dropdown);
+        }
+        requestAnimationFrame(() => this.positionDropdown());
+        if (!this.repositionHandler) {
+            this.bindRepositionListeners();
+        }
+    }
+    detachDropdownPortal() {
+        this.unbindRepositionListeners();
+        if (!this.dropdown)
+            return;
+        this.dropdown.classList.remove('designbase-wc-search-bar__dropdown--portal');
+        this.dropdown.style.top = '';
+        this.dropdown.style.left = '';
+        this.dropdown.style.width = '';
+        this.dropdown.style.right = '';
+        if (this.dropdown.parentElement === document.body && this.isConnected) {
+            this.append(this.dropdown);
+        }
+    }
+    shouldShowDropdown() {
+        const hasValue = this.hasInputValue();
+        const categories = this.parseJsonArray('categories');
+        const suggestions = this.parseJsonArray('suggested-searches');
+        const searchResults = this.getAttribute('search-results');
+        const emptyStateMessage = this.getAttribute('empty-state-message');
+        return (this.isFocused &&
+            (categories.length > 0 ||
+                (this.hasAttribute('enable-recent-searches') && this.recentSearches.length > 0 && !hasValue) ||
+                (suggestions.length > 0 && !hasValue) ||
+                (searchResults !== null && hasValue) ||
+                (Boolean(emptyStateMessage) &&
+                    !hasValue &&
+                    (!this.hasAttribute('enable-recent-searches') || this.recentSearches.length === 0) &&
+                    suggestions.length === 0)));
+    }
+    formatSearchResult(result) {
+        if (typeof result === 'string' || typeof result === 'number')
+            return String(result);
+        if (result && typeof result === 'object') {
+            const record = result;
+            if (typeof record.title === 'string')
+                return record.title;
+            if (typeof record.label === 'string')
+                return record.label;
+        }
+        return String(result);
+    }
+    handleSearch(searchValue) {
+        const searchTerm = (searchValue ?? this.value).trim();
+        if (!searchTerm)
+            return;
+        this.dispatchEvent(new CustomEvent('db-search', {
+            detail: { value: searchTerm },
+            bubbles: true,
+            composed: true,
+        }));
+        if (this.hasAttribute('enable-recent-searches')) {
+            this.recentSearches = [searchTerm, ...this.recentSearches.filter((item) => item !== searchTerm)].slice(0, 10);
+            this.saveRecentSearches();
+            this.updateDropdown();
+        }
+    }
+    updateDropdown() {
+        if (!this.dropdown)
+            return;
+        const show = this.shouldShowDropdown();
+        this.dropdown.hidden = !show;
+        this.classList.toggle('designbase-wc-search-bar--dropdown-open', show);
+        if (!show) {
+            this.dropdown.replaceChildren();
+            this.detachDropdownPortal();
+            return;
+        }
+        this.dropdown.replaceChildren();
+        const hasValue = this.hasInputValue();
+        const categories = this.parseJsonArray('categories');
+        const suggestions = this.parseJsonArray('suggested-searches');
+        const selectedCategory = this.getAttribute('selected-category') || '';
+        const searchResults = this.parseJsonArray('search-results');
+        const emptyStateMessage = this.getAttribute('empty-state-message');
+        const recentLayout = RECENT_LAYOUTS.includes((this.getAttribute('recent-searches-layout') || 'vertical'))
+            ? this.getAttribute('recent-searches-layout') || 'vertical'
+            : 'vertical';
+        if (categories.length > 0) {
+            const categoriesEl = document.createElement('div');
+            categoriesEl.className = 'designbase-wc-search-bar__categories';
+            categories.forEach((category) => {
+                const chip = document.createElement('db-chip');
+                chip.setAttribute('label', category);
+                chip.setAttribute('size', 's');
+                chip.setAttribute('variant', category === selectedCategory ? 'primary' : 'default');
+                chip.setAttribute('clickable', '');
+                chip.addEventListener('mousedown', (event) => {
+                    event.preventDefault();
+                    this.setAttribute('selected-category', category);
+                    this.dispatchEvent(new CustomEvent('db-category-change', {
+                        detail: { category },
+                        bubbles: true,
+                        composed: true,
+                    }));
+                    this.updateDropdown();
+                });
+                categoriesEl.append(chip);
+            });
+            this.dropdown.append(categoriesEl);
+        }
+        if (hasValue && this.hasAttribute('search-results')) {
+            const results = document.createElement('div');
+            results.className = 'designbase-wc-search-bar__results';
+            if (searchResults.length > 0) {
+                const list = document.createElement('ul');
+                list.className = 'designbase-wc-search-bar__results-list';
+                searchResults.forEach((result, index) => {
+                    const item = document.createElement('li');
+                    item.className = 'designbase-wc-search-bar__result-item';
+                    item.textContent = this.formatSearchResult(result);
+                    item.addEventListener('mousedown', (event) => {
+                        event.preventDefault();
+                        this.isFocused = false;
+                        this.updateDropdown();
+                        this.dispatchEvent(new CustomEvent('db-search-result-click', {
+                            detail: { result, index },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    });
+                    list.append(item);
+                });
+                results.append(list);
+            }
+            else {
+                const empty = document.createElement('div');
+                empty.className = 'designbase-wc-search-bar__results-empty';
+                empty.textContent = '검색 결과가 없습니다.';
+                results.append(empty);
+            }
+            this.dropdown.append(results);
+            this.attachDropdownPortal();
+            return;
+        }
+        if (this.hasAttribute('enable-recent-searches') && !hasValue && this.recentSearches.length > 0) {
+            const recent = document.createElement('div');
+            recent.className = `designbase-wc-search-bar__recent-searches designbase-wc-search-bar__recent-searches--${recentLayout}`;
+            const header = document.createElement('div');
+            header.className = 'designbase-wc-search-bar__recent-header';
+            const title = document.createElement('span');
+            title.className = 'designbase-wc-search-bar__recent-title';
+            title.textContent = '최근 검색어';
+            const clearAll = document.createElement('button');
+            clearAll.type = 'button';
+            clearAll.className = 'designbase-wc-search-bar__clear-all-button';
+            clearAll.setAttribute('aria-label', '모든 최근 검색어 삭제');
+            clearAll.textContent = '전체 삭제';
+            clearAll.addEventListener('mousedown', (event) => {
+                event.preventDefault();
+                this.recentSearches = [];
+                try {
+                    localStorage.removeItem(this.getRecentSearchesKey());
+                }
+                catch {
+                    // ignore
+                }
+                this.updateDropdown();
+            });
+            header.append(title, clearAll);
+            const list = document.createElement('div');
+            list.className = 'designbase-wc-search-bar__recent-list';
+            this.recentSearches.forEach((searchTerm) => {
+                const item = document.createElement('div');
+                item.className = 'designbase-wc-search-bar__recent-item';
+                const searchButton = document.createElement('button');
+                searchButton.type = 'button';
+                searchButton.className = 'designbase-wc-search-bar__recent-search-button';
+                searchButton.textContent = searchTerm;
+                searchButton.addEventListener('mousedown', (event) => {
+                    event.preventDefault();
+                    if (!this.input)
+                        return;
+                    this.input.value = searchTerm;
+                    this.setAttribute('value', searchTerm);
+                    this.syncValueState();
+                    this.syncPlaceholder();
+                    this.handleSearch(searchTerm);
+                    const detail = { value: searchTerm };
+                    this.dispatchEvent(new CustomEvent('db-input', { detail, bubbles: true, composed: true }));
+                    this.dispatchEvent(new CustomEvent('db-change', { detail, bubbles: true, composed: true }));
+                    this.isFocused = false;
+                    this.updateDropdown();
+                });
+                const removeButton = document.createElement('button');
+                removeButton.type = 'button';
+                removeButton.className = 'designbase-wc-search-bar__recent-remove-button';
+                removeButton.setAttribute('aria-label', `${searchTerm} 삭제`);
+                removeButton.append(createDbIcon('close', getDbComponentIconSize('s')));
+                removeButton.addEventListener('mousedown', (event) => {
+                    event.preventDefault();
+                    this.recentSearches = this.recentSearches.filter((item) => item !== searchTerm);
+                    this.saveRecentSearches();
+                    this.updateDropdown();
+                });
+                item.append(searchButton, removeButton);
+                list.append(item);
+            });
+            recent.append(header, list);
+            this.dropdown.append(recent);
+        }
+        if (suggestions.length > 0 && !hasValue) {
+            const suggestionsEl = document.createElement('div');
+            suggestionsEl.className = 'designbase-wc-search-bar__suggestions';
+            const header = document.createElement('div');
+            header.className = 'designbase-wc-search-bar__suggestions-header';
+            const title = document.createElement('span');
+            title.className = 'designbase-wc-search-bar__suggestions-title';
+            title.textContent = '추천 검색어';
+            header.append(title);
+            const list = document.createElement('div');
+            list.className = 'designbase-wc-search-bar__suggestions-list';
+            suggestions.forEach((suggestion, index) => {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = [
+                    'designbase-wc-search-bar__suggestion-item',
+                    index === this.currentSuggestion && 'designbase-wc-search-bar__suggestion-item--active',
+                ]
+                    .filter(Boolean)
+                    .join(' ');
+                button.textContent = suggestion;
+                button.addEventListener('mousedown', (event) => {
+                    event.preventDefault();
+                    if (!this.input)
+                        return;
+                    this.clearSuggestionInterval();
+                    this.input.value = suggestion;
+                    this.setAttribute('value', suggestion);
+                    this.syncValueState();
+                    this.syncPlaceholder();
+                    this.handleSearch(suggestion);
+                    const detail = { value: suggestion };
+                    this.dispatchEvent(new CustomEvent('db-input', { detail, bubbles: true, composed: true }));
+                    this.dispatchEvent(new CustomEvent('db-change', { detail, bubbles: true, composed: true }));
+                    this.isFocused = false;
+                    this.updateDropdown();
+                });
+                list.append(button);
+            });
+            suggestionsEl.append(header, list);
+            this.dropdown.append(suggestionsEl);
+        }
+        if (emptyStateMessage &&
+            !hasValue &&
+            (!this.hasAttribute('enable-recent-searches') || this.recentSearches.length === 0) &&
+            suggestions.length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'designbase-wc-search-bar__empty-state';
+            empty.textContent = emptyStateMessage;
+            this.dropdown.append(empty);
+        }
+        this.attachDropdownPortal();
+    }
+    render() {
+        const size = this.getAttribute('size') || 'm';
+        const disabled = this.hasAttribute('disabled');
+        const readOnly = this.hasAttribute('readonly');
+        const fullWidth = this.hasAttribute('full-width');
+        const showShortcut = this.hasAttribute('show-shortcut');
+        const initialValue = this.getAttribute('value') ?? this.getAttribute('default-value') ?? '';
+        const hasInitialValue = Boolean(initialValue.trim());
+        const iconPx = this.getIconPx();
+        this.className = [
+            'designbase-wc-search-bar',
+            `designbase-wc-search-bar--${SIZES.includes(size) ? size : 'm'}`,
+            disabled && 'designbase-wc-search-bar--disabled',
+            readOnly && 'designbase-wc-search-bar--readonly',
+            fullWidth && 'designbase-wc-search-bar--full-width',
+            hasInitialValue && 'designbase-wc-search-bar--has-value',
+            this.shouldShowDropdown() && 'designbase-wc-search-bar--dropdown-open',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.setAttribute('role', 'search');
+        this.clearSuggestionInterval();
+        this.detachDropdownPortal();
+        this.replaceChildren();
+        const container = document.createElement('div');
+        container.className = 'designbase-wc-search-bar__container';
+        const searchIcon = document.createElement('div');
+        searchIcon.className = 'designbase-wc-search-bar__search-icon';
+        searchIcon.setAttribute('aria-hidden', 'true');
+        searchIcon.append(createDbIcon('search', iconPx));
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'designbase-wc-search-bar__input';
+        input.value = initialValue;
+        input.disabled = disabled;
+        input.readOnly = readOnly;
+        input.setAttribute('aria-label', '검색어 입력');
+        this.input = input;
+        if (showShortcut) {
+            const shortcutBadge = document.createElement('db-badge');
+            shortcutBadge.className = 'designbase-wc-search-bar__shortcut-badge';
+            shortcutBadge.setAttribute('size', size === 'l' ? 'm' : 's');
+            shortcutBadge.setAttribute('variant', 'secondary');
+            shortcutBadge.setAttribute('badge-style', 'text');
+            shortcutBadge.setAttribute('aria-hidden', 'true');
+            shortcutBadge.textContent = this.getAttribute('shortcut-label') || '⌘K';
+            shortcutBadge.hidden = hasInitialValue || disabled || readOnly;
+            this.shortcutBadge = shortcutBadge;
+            container.append(searchIcon, input, shortcutBadge);
+        }
+        else {
+            container.append(searchIcon, input);
+        }
+        const clearButton = document.createElement('button');
+        clearButton.type = 'button';
+        clearButton.className = 'designbase-wc-search-bar__clear-button';
+        clearButton.setAttribute('aria-label', '검색어 지우기');
+        clearButton.hidden = !hasInitialValue || disabled || readOnly;
+        clearButton.append(createDbIcon('close', iconPx));
+        this.clearButton = clearButton;
+        container.append(clearButton);
+        const dropdown = document.createElement('div');
+        dropdown.className = 'designbase-wc-search-bar__dropdown';
+        dropdown.hidden = true;
+        dropdown.addEventListener('mousedown', (event) => {
+            event.preventDefault();
+        });
+        this.dropdown = dropdown;
+        input.addEventListener('input', () => {
+            this.setAttribute('value', input.value);
+            this.syncValueState();
+            this.syncPlaceholder();
+            this.updateDropdown();
+            this.syncSuggestionRolling();
+            const detail = { value: input.value };
+            this.dispatchEvent(new CustomEvent('db-input', { detail, bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent('db-change', { detail, bubbles: true, composed: true }));
+        });
+        input.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                this.handleSearch();
+            }
+        });
+        input.addEventListener('focus', () => {
+            this.isFocused = true;
+            this.updateDropdown();
+            this.dispatchEvent(new CustomEvent('db-focus', { bubbles: true, composed: true }));
+        });
+        input.addEventListener('blur', () => {
+            this.isFocused = false;
+            if (this.blurTimer)
+                clearTimeout(this.blurTimer);
+            this.updateDropdown();
+            this.dispatchEvent(new CustomEvent('db-blur', { bubbles: true, composed: true }));
+        });
+        clearButton.addEventListener('click', () => {
+            input.value = '';
+            this.setAttribute('value', '');
+            this.syncValueState();
+            this.syncPlaceholder();
+            this.updateDropdown();
+            this.syncSuggestionRolling();
+            input.focus();
+            this.dispatchEvent(new CustomEvent('db-clear', { bubbles: true, composed: true }));
+            const detail = { value: '' };
+            this.dispatchEvent(new CustomEvent('db-input', { detail, bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent('db-change', { detail, bubbles: true, composed: true }));
+        });
+        this.append(container, dropdown);
+        this.syncIcons();
+        this.syncPlaceholder();
+        this.syncSuggestionRolling();
+        this.bindGlobalShortcut();
+        this.updateDropdown();
+    }
+}
+if (!customElements.get('db-search-bar')) {
+    customElements.define('db-search-bar', DbSearchBar);
+}
+
+export { DbSearchBar };