@designbasekorea/ui-wc 0.13.0 → 0.15.0

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

@@ -1 +1 @@
-import{inheritThemeScope as e}from"../core/theme-scope.js";import{subscribeDbLocale as t,dbText as s,dbFormat as a}from"../core/i18n.js";import{getDbComponentIconSize as r,createDbIcon as n}from"./db-icons.js";import{SEARCH_BAR_SIZES as i,SEARCH_BAR_RECENT_LAYOUTS as o}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";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","appearance","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 i.includes(e)?e:"m"}getIconPx(){return r(this.getResolvedSize())}syncIcons(){const e=this.getIconPx();this.querySelector(".designbase-wc-search-bar__search-icon")?.replaceChildren(n("search",e)),this.clearButton?.replaceChildren(n("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.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.syncLocale()),this.loadRecentSearches(),this.render(),this.bindGlobalShortcut()}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,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(),a=this.getAttribute("placeholder")||s("검색...");e.length>0&&!t?this.input.placeholder=e[this.currentSuggestion]||a:this.input.placeholder=a}syncLocale(){this.syncPlaceholder(),this.input?.setAttribute("aria-label",s("검색어 입력")),this.clearButton?.setAttribute("aria-label",s("검색어 지우기"));const setText=(e,t)=>{const a=this.dropdown?.querySelector(e);a&&(a.textContent=s(t))};setText(".designbase-wc-search-bar__results-empty","검색 결과가 없습니다."),setText(".designbase-wc-search-bar__recent-title","최근 검색어"),setText(".designbase-wc-search-bar__suggestions-title","추천 검색어");const e=this.dropdown?.querySelector(".designbase-wc-search-bar__clear-all-button");e&&(e.textContent=s("전체 삭제"),e.setAttribute("aria-label",s("모든 최근 검색어 삭제"))),this.dropdown?.querySelectorAll(".designbase-wc-search-bar__recent-item").forEach(e=>{const t=e.querySelector(".designbase-wc-search-bar__recent-search-button")?.textContent;t&&e.querySelector(".designbase-wc-search-bar__recent-remove-button")?.setAttribute("aria-label",a("{0} 삭제",[t]))})}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"),s=this.hasAttribute("readonly"),a=this.hasAttribute("show-shortcut");this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${i.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",t&&"designbase-wc-search-bar--disabled",s&&"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=s),this.shortcutBadge&&(this.shortcutBadge.hidden=!a||this.hasInputValue()||t||s,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=>{if(e.defaultPrevented||e.isComposing||!this.getClientRects().length)return;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,{capture:!0,passive:!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&&(e(this,this.dropdown),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"),r=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(r)&&!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 e=this.shouldShowDropdown();if(this.dropdown.hidden=!e,this.classList.toggle("designbase-wc-search-bar--dropdown-open",e),!e)return this.dropdown.replaceChildren(),void this.detachDropdownPortal();this.dropdown.replaceChildren();const t=this.hasInputValue(),i=this.parseJsonArray("categories"),c=this.parseJsonArray("suggested-searches"),h=this.getAttribute("selected-category")||"",d=this.parseJsonArray("search-results"),l=this.getAttribute("empty-state-message"),u=o.includes(this.getAttribute("recent-searches-layout")||"vertical")&&this.getAttribute("recent-searches-layout")||"vertical";if(i.length>0){const e=document.createElement("div");e.className="designbase-wc-search-bar__categories",i.forEach(t=>{const s=document.createElement("db-chip");s.setAttribute("label",t),s.setAttribute("size","s"),s.setAttribute("variant",t===h?"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(t&&this.hasAttribute("search-results")){const e=document.createElement("div");if(e.className="designbase-wc-search-bar__results",d.length>0){const t=document.createElement("ul");t.className="designbase-wc-search-bar__results-list",d.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=s("검색 결과가 없습니다."),e.append(t)}return this.dropdown.append(e),void this.attachDropdownPortal()}if(this.hasAttribute("enable-recent-searches")&&!t&&this.recentSearches.length>0){const e=document.createElement("div");e.className=`designbase-wc-search-bar__recent-searches designbase-wc-search-bar__recent-searches--${u}`;const t=document.createElement("div");t.className="designbase-wc-search-bar__recent-header";const i=document.createElement("span");i.className="designbase-wc-search-bar__recent-title",i.textContent=s("최근 검색어");const o=document.createElement("button");o.type="button",o.className="designbase-wc-search-bar__clear-all-button",o.setAttribute("aria-label",s("모든 최근 검색어 삭제")),o.textContent=s("전체 삭제"),o.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=[];try{localStorage.removeItem(this.getRecentSearchesKey())}catch{}this.updateDropdown()}),t.append(i,o);const c=document.createElement("div");c.className="designbase-wc-search-bar__recent-list",this.recentSearches.forEach(e=>{const t=document.createElement("div");t.className="designbase-wc-search-bar__recent-item";const s=document.createElement("button");s.type="button",s.className="designbase-wc-search-bar__recent-search-button",s.textContent=e,s.addEventListener("mousedown",t=>{if(t.preventDefault(),!this.input)return;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()});const i=document.createElement("button");i.type="button",i.className="designbase-wc-search-bar__recent-remove-button",i.setAttribute("aria-label",a("{0} 삭제",[e])),i.append(n("close",r("s"))),i.addEventListener("mousedown",t=>{t.preventDefault(),this.recentSearches=this.recentSearches.filter(t=>t!==e),this.saveRecentSearches(),this.updateDropdown()}),t.append(s,i),c.append(t)}),e.append(t,c),this.dropdown.append(e)}if(c.length>0&&!t){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 a=document.createElement("span");a.className="designbase-wc-search-bar__suggestions-title",a.textContent=s("추천 검색어"),t.append(a);const r=document.createElement("div");r.className="designbase-wc-search-bar__suggestions-list",c.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()}),r.append(s)}),e.append(t,r),this.dropdown.append(e)}if(l&&!t&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===c.length){const e=document.createElement("div");e.className="designbase-wc-search-bar__empty-state",e.textContent=l,this.dropdown.append(e)}this.attachDropdownPortal()}render(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("disabled"),a=this.hasAttribute("readonly"),r=this.hasAttribute("full-width"),o=this.hasAttribute("show-shortcut"),c=this.getAttribute("value")??this.getAttribute("default-value")??"",h=Boolean(c.trim()),d=this.getIconPx();this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${i.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",t&&"designbase-wc-search-bar--disabled",a&&"designbase-wc-search-bar--readonly",r&&"designbase-wc-search-bar--full-width",h&&"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 l=document.createElement("div");l.className="designbase-wc-search-bar__container";const u=document.createElement("div");u.className="designbase-wc-search-bar__search-icon",u.setAttribute("aria-hidden","true"),u.append(n("search",d));const b=document.createElement("input");if(b.type="text",b.className="designbase-wc-search-bar__input",b.value=c,b.disabled=t,b.readOnly=a,b.setAttribute("aria-label",s("검색어 입력")),this.input=b,o){const s=document.createElement("db-badge");s.className="designbase-wc-search-bar__shortcut-badge",s.setAttribute("size","l"===e?"m":"s"),s.setAttribute("variant","secondary"),s.setAttribute("type","text"),s.setAttribute("aria-hidden","true"),s.textContent=this.getAttribute("shortcut-label")||"⌘K",s.hidden=h||t||a,this.shortcutBadge=s,l.append(u,b,s)}else l.append(u,b);const p=document.createElement("button");p.type="button",p.className="designbase-wc-search-bar__clear-button",p.setAttribute("aria-label",s("검색어 지우기")),p.hidden=!h||t||a,p.append(n("close",d)),this.clearButton=p,l.append(p);const g=document.createElement("div");g.className="designbase-wc-search-bar__dropdown",g.hidden=!0,g.addEventListener("mousedown",e=>{e.preventDefault()}),this.dropdown=g,b.addEventListener("input",()=>{this.setAttribute("value",b.value),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling();const e={value:b.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}))}),b.addEventListener("keydown",e=>{"Enter"===e.key&&this.handleSearch()}),b.addEventListener("focus",()=>{this.isFocused=!0,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-focus",{bubbles:!0,composed:!0}))}),b.addEventListener("blur",()=>{this.isFocused=!1,this.blurTimer&&clearTimeout(this.blurTimer),this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-blur",{bubbles:!0,composed:!0}))}),p.addEventListener("click",()=>{b.value="",this.setAttribute("value",""),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling(),b.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(l,g),this.syncIcons(),this.syncPlaceholder(),this.syncSuggestionRolling(),this.bindGlobalShortcut(),this.updateDropdown()}}customElements.get("db-search-bar")||customElements.define("db-search-bar",DbSearchBar);export{DbSearchBar};
+import"./db-chip.js";import"./db-badge.js";import{inheritThemeScope as e}from"../core/theme-scope.js";import{subscribeDbLocale as t,dbText as s,dbFormat as a}from"../core/i18n.js";import{getDbComponentIconSize as r,createDbIcon as n}from"./db-icons.js";import{SEARCH_BAR_SIZES as i,SEARCH_BAR_RECENT_LAYOUTS as o}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";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","appearance","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 i.includes(e)?e:"m"}getIconPx(){return r(this.getResolvedSize())}syncIcons(){const e=this.getIconPx();this.querySelector(".designbase-wc-search-bar__search-icon")?.replaceChildren(n("search",e)),this.clearButton?.replaceChildren(n("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.unsubscribeLocale?.(),this.unsubscribeLocale=t(()=>this.syncLocale()),this.loadRecentSearches(),this.render(),this.bindGlobalShortcut()}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,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(),a=this.getAttribute("placeholder")||s("검색...");e.length>0&&!t?this.input.placeholder=e[this.currentSuggestion]||a:this.input.placeholder=a}syncLocale(){this.syncPlaceholder(),this.input?.setAttribute("aria-label",s("검색어 입력")),this.clearButton?.setAttribute("aria-label",s("검색어 지우기"));const setText=(e,t)=>{const a=this.dropdown?.querySelector(e);a&&(a.textContent=s(t))};setText(".designbase-wc-search-bar__results-empty","검색 결과가 없습니다."),setText(".designbase-wc-search-bar__recent-title","최근 검색어"),setText(".designbase-wc-search-bar__suggestions-title","추천 검색어");const e=this.dropdown?.querySelector(".designbase-wc-search-bar__clear-all-button");e&&(e.textContent=s("전체 삭제"),e.setAttribute("aria-label",s("모든 최근 검색어 삭제"))),this.dropdown?.querySelectorAll(".designbase-wc-search-bar__recent-item").forEach(e=>{const t=e.querySelector(".designbase-wc-search-bar__recent-search-button")?.textContent;t&&e.querySelector(".designbase-wc-search-bar__recent-remove-button")?.setAttribute("aria-label",a("{0} 삭제",[t]))})}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"),s=this.hasAttribute("readonly"),a=this.hasAttribute("show-shortcut");this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${i.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",t&&"designbase-wc-search-bar--disabled",s&&"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=s),this.shortcutBadge&&(this.shortcutBadge.hidden=!a||this.hasInputValue()||t||s,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=>{if(e.defaultPrevented||e.isComposing||!this.getClientRects().length)return;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,{capture:!0,passive:!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&&(e(this,this.dropdown),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"),r=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(r)&&!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 e=this.shouldShowDropdown();if(this.dropdown.hidden=!e,this.classList.toggle("designbase-wc-search-bar--dropdown-open",e),!e)return this.dropdown.replaceChildren(),void this.detachDropdownPortal();this.dropdown.replaceChildren();const t=this.hasInputValue(),i=this.parseJsonArray("categories"),c=this.parseJsonArray("suggested-searches"),h=this.getAttribute("selected-category")||"",d=this.parseJsonArray("search-results"),l=this.getAttribute("empty-state-message"),u=o.includes(this.getAttribute("recent-searches-layout")||"vertical")&&this.getAttribute("recent-searches-layout")||"vertical";if(i.length>0){const e=document.createElement("div");e.className="designbase-wc-search-bar__categories",i.forEach(t=>{const s=document.createElement("db-chip");s.setAttribute("label",t),s.setAttribute("size","s"),s.setAttribute("variant",t===h?"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(t&&this.hasAttribute("search-results")){const e=document.createElement("div");if(e.className="designbase-wc-search-bar__results",d.length>0){const t=document.createElement("ul");t.className="designbase-wc-search-bar__results-list",d.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=s("검색 결과가 없습니다."),e.append(t)}return this.dropdown.append(e),void this.attachDropdownPortal()}if(this.hasAttribute("enable-recent-searches")&&!t&&this.recentSearches.length>0){const e=document.createElement("div");e.className=`designbase-wc-search-bar__recent-searches designbase-wc-search-bar__recent-searches--${u}`;const t=document.createElement("div");t.className="designbase-wc-search-bar__recent-header";const i=document.createElement("span");i.className="designbase-wc-search-bar__recent-title",i.textContent=s("최근 검색어");const o=document.createElement("button");o.type="button",o.className="designbase-wc-search-bar__clear-all-button",o.setAttribute("aria-label",s("모든 최근 검색어 삭제")),o.textContent=s("전체 삭제"),o.addEventListener("mousedown",e=>{e.preventDefault(),this.recentSearches=[];try{localStorage.removeItem(this.getRecentSearchesKey())}catch{}this.updateDropdown()}),t.append(i,o);const c=document.createElement("div");c.className="designbase-wc-search-bar__recent-list",this.recentSearches.forEach(e=>{const t=document.createElement("div");t.className="designbase-wc-search-bar__recent-item";const s=document.createElement("button");s.type="button",s.className="designbase-wc-search-bar__recent-search-button",s.textContent=e,s.addEventListener("mousedown",t=>{if(t.preventDefault(),!this.input)return;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()});const i=document.createElement("button");i.type="button",i.className="designbase-wc-search-bar__recent-remove-button",i.setAttribute("aria-label",a("{0} 삭제",[e])),i.append(n("close",r("s"))),i.addEventListener("mousedown",t=>{t.preventDefault(),this.recentSearches=this.recentSearches.filter(t=>t!==e),this.saveRecentSearches(),this.updateDropdown()}),t.append(s,i),c.append(t)}),e.append(t,c),this.dropdown.append(e)}if(c.length>0&&!t){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 a=document.createElement("span");a.className="designbase-wc-search-bar__suggestions-title",a.textContent=s("추천 검색어"),t.append(a);const r=document.createElement("div");r.className="designbase-wc-search-bar__suggestions-list",c.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()}),r.append(s)}),e.append(t,r),this.dropdown.append(e)}if(l&&!t&&(!this.hasAttribute("enable-recent-searches")||0===this.recentSearches.length)&&0===c.length){const e=document.createElement("div");e.className="designbase-wc-search-bar__empty-state",e.textContent=l,this.dropdown.append(e)}this.attachDropdownPortal()}render(){const e=this.getAttribute("size")||"m",t=this.hasAttribute("disabled"),a=this.hasAttribute("readonly"),r=this.hasAttribute("full-width"),o=this.hasAttribute("show-shortcut"),c=this.getAttribute("value")??this.getAttribute("default-value")??"",h=Boolean(c.trim()),d=this.getIconPx();this.className=["designbase-wc-search-bar",`designbase-wc-search-bar--${i.includes(e)?e:"m"}`,"pill"===this.getAttribute("appearance")&&"designbase-wc-search-bar--appearance-pill",t&&"designbase-wc-search-bar--disabled",a&&"designbase-wc-search-bar--readonly",r&&"designbase-wc-search-bar--full-width",h&&"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 l=document.createElement("div");l.className="designbase-wc-search-bar__container";const u=document.createElement("div");u.className="designbase-wc-search-bar__search-icon",u.setAttribute("aria-hidden","true"),u.append(n("search",d));const b=document.createElement("input");if(b.type="text",b.className="designbase-wc-search-bar__input",b.value=c,b.disabled=t,b.readOnly=a,b.setAttribute("aria-label",s("검색어 입력")),this.input=b,o){const s=document.createElement("db-badge");s.className="designbase-wc-search-bar__shortcut-badge",s.setAttribute("size","l"===e?"m":"s"),s.setAttribute("variant","secondary"),s.setAttribute("type","text"),s.setAttribute("aria-hidden","true"),s.textContent=this.getAttribute("shortcut-label")||"⌘K",s.hidden=h||t||a,this.shortcutBadge=s,l.append(u,b,s)}else l.append(u,b);const p=document.createElement("button");p.type="button",p.className="designbase-wc-search-bar__clear-button",p.setAttribute("aria-label",s("검색어 지우기")),p.hidden=!h||t||a,p.append(n("close",d)),this.clearButton=p,l.append(p);const g=document.createElement("div");g.className="designbase-wc-search-bar__dropdown",g.hidden=!0,g.addEventListener("mousedown",e=>{e.preventDefault()}),this.dropdown=g,b.addEventListener("input",()=>{this.setAttribute("value",b.value),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling();const e={value:b.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}))}),b.addEventListener("keydown",e=>{"Enter"===e.key&&this.handleSearch()}),b.addEventListener("focus",()=>{this.isFocused=!0,this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-focus",{bubbles:!0,composed:!0}))}),b.addEventListener("blur",()=>{this.isFocused=!1,this.blurTimer&&clearTimeout(this.blurTimer),this.updateDropdown(),this.dispatchEvent(new CustomEvent("db-blur",{bubbles:!0,composed:!0}))}),p.addEventListener("click",()=>{b.value="",this.setAttribute("value",""),this.syncValueState(),this.syncPlaceholder(),this.updateDropdown(),this.syncSuggestionRolling(),b.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(l,g),this.syncIcons(),this.syncPlaceholder(),this.syncSuggestionRolling(),this.bindGlobalShortcut(),this.updateDropdown()}}customElements.get("db-search-bar")||customElements.define("db-search-bar",DbSearchBar);export{DbSearchBar};

package/dist/esm/components/db-section-app-download.d.ts

@@ -1,3 +1,5 @@
+import './db-app-badge.js';
+
 interface DownloadStore {
     store: 'app-store' | 'google-play';
     href?: string;

package/dist/esm/components/db-section-app-download.js

@@ -1 +1 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{sanitizeHref as e}from"../core/safe-url.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as i,SECTION_APP_DOWNLOAD_SIZES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const o="designbase-wc-section-app-download";class DbSectionAppDownload extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","stores","align","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}get stores(){return this.parseStores()}set stores(t){this.setAttribute("stores","string"==typeof t?t:JSON.stringify(t))}parseStores(){try{const t=JSON.parse(this.getAttribute("stores")||"[]");if(Array.isArray(t)&&t.length>0)return t}catch{}return[{store:"app-store",href:"#"},{store:"google-play",href:"#"}]}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${o}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${o}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${o}__description`,this.badgesEl=document.createElement("div"),this.badgesEl.className=`${o}__badges`,this.innerEl.append(this.titleEl,this.descriptionEl,this.badgesEl),this.append(this.innerEl)}updateUI(){const l=this.getAttribute("title")||"지금 바로 시작하세요",n=this.getAttribute("description")||"앱을 다운로드하고 바로 이용해 보세요.",a=s(this.getAttribute("align"),i,"center"),d=s(this.getAttribute("size"),r,"m"),c=this.parseStores();this.className=[o,`${o}--${a}`,`${o}--size-${d}`].join(" "),t(this,o),this.titleEl&&(this.titleEl.textContent=l),this.descriptionEl&&(this.descriptionEl.textContent=n,this.descriptionEl.hidden=!n),this.badgesEl&&(this.badgesEl.replaceChildren(),c.forEach(t=>{const s=document.createElement("db-app-badge");s.setAttribute("store",t.store),s.setAttribute("size",t.size||"m"),s.setAttribute("theme",t.theme||"dark");const i=e(t.href,"");i&&s.setAttribute("href",i),t.label&&s.setAttribute("label",t.label),t.storeName&&s.setAttribute("store-name",t.storeName),this.badgesEl.append(s)}))}}customElements.get("db-section-app-download")||customElements.define("db-section-app-download",DbSectionAppDownload);export{DbSectionAppDownload};
+import"./db-app-badge.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{sanitizeHref as e}from"../core/safe-url.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as i,SECTION_APP_DOWNLOAD_SIZES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const o="designbase-wc-section-app-download";class DbSectionAppDownload extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","stores","align","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}get stores(){return this.parseStores()}set stores(t){this.setAttribute("stores","string"==typeof t?t:JSON.stringify(t))}parseStores(){try{const t=JSON.parse(this.getAttribute("stores")||"[]");if(Array.isArray(t)&&t.length>0)return t}catch{}return[{store:"app-store",href:"#"},{store:"google-play",href:"#"}]}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${o}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${o}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${o}__description`,this.badgesEl=document.createElement("div"),this.badgesEl.className=`${o}__badges`,this.innerEl.append(this.titleEl,this.descriptionEl,this.badgesEl),this.append(this.innerEl)}updateUI(){const l=this.getAttribute("title")||"지금 바로 시작하세요",n=this.getAttribute("description")||"앱을 다운로드하고 바로 이용해 보세요.",a=s(this.getAttribute("align"),i,"center"),d=s(this.getAttribute("size"),r,"m"),c=this.parseStores();this.className=[o,`${o}--${a}`,`${o}--size-${d}`].join(" "),t(this,o),this.titleEl&&(this.titleEl.textContent=l),this.descriptionEl&&(this.descriptionEl.textContent=n,this.descriptionEl.hidden=!n),this.badgesEl&&(this.badgesEl.replaceChildren(),c.forEach(t=>{const s=document.createElement("db-app-badge");s.setAttribute("store",t.store),s.setAttribute("size",t.size||"m"),s.setAttribute("theme",t.theme||"dark");const i=e(t.href,"");i&&s.setAttribute("href",i),t.label&&s.setAttribute("label",t.label),t.storeName&&s.setAttribute("store-name",t.storeName),this.badgesEl.append(s)}))}}customElements.get("db-section-app-download")||customElements.define("db-section-app-download",DbSectionAppDownload);export{DbSectionAppDownload};

package/dist/esm/components/db-section-contact.d.ts

@@ -1,3 +1,5 @@
+import './db-button.js';
+
 declare class DbSectionContact extends HTMLElement {
     static get observedAttributes(): string[];
     private built;

package/dist/esm/components/db-section-contact.js

@@ -1 +1 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{sanitizeHref as i}from"../core/safe-url.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as s,SECTION_CONTACT_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const c="designbase-wc-section-contact",o="contact@designbase.co.kr";class DbSectionContact extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","action","align","accent","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseAction(){try{const t=this.getAttribute("action");if(t)return JSON.parse(t)}catch{}return{label:o,href:`mailto:${o}`}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${c}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${c}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${c}__description`,this.actionEl=document.createElement("db-button"),this.actionEl.className=`${c}__action`,this.actionEl.setAttribute("variant","primary"),this.actionEl.setAttribute("size","m"),this.actionEl.setAttribute("radius","pill"),this.actionEl.setAttribute("start-icon","mail"),this.actionEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:this.parseAction()},bubbles:!0,composed:!0}))}),this.innerEl.append(this.titleEl,this.descriptionEl,this.actionEl),this.append(this.innerEl)}updateUI(){const o=this.getAttribute("title")||"문의하기",a=this.getAttribute("description")||"궁금한 점이 있으시면 언제든지 연락주세요.",l=e(this.getAttribute("align"),s,"center"),r=e(this.getAttribute("size"),n,"m"),h=this.getAttribute("content-padding")||"l",d=!this.hasAttribute("accent")||"false"!==this.getAttribute("accent"),u=this.parseAction();if(this.className=[c,`${c}--${l}`,`${c}--size-${r}`,`${c}--padding-${h}`,d&&`${c}--accent`].filter(Boolean).join(" "),t(this,c),this.titleEl&&(this.titleEl.textContent=o),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.actionEl){this.actionEl.textContent=u.label;const t=i(u.href,"");t?this.actionEl.setAttribute("href",t):this.actionEl.removeAttribute("href")}}}customElements.get("db-section-contact")||customElements.define("db-section-contact",DbSectionContact);export{DbSectionContact};
+import"./db-button.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{sanitizeHref as i}from"../core/safe-url.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as s,SECTION_CONTACT_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const o="designbase-wc-section-contact",c="contact@designbase.co.kr";class DbSectionContact extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","description","action","align","accent","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseAction(){try{const t=this.getAttribute("action");if(t)return JSON.parse(t)}catch{}return{label:c,href:`mailto:${c}`}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${o}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${o}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${o}__description`,this.actionEl=document.createElement("db-button"),this.actionEl.className=`${o}__action`,this.actionEl.setAttribute("variant","primary"),this.actionEl.setAttribute("size","m"),this.actionEl.setAttribute("radius","pill"),this.actionEl.setAttribute("start-icon","mail"),this.actionEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:this.parseAction()},bubbles:!0,composed:!0}))}),this.innerEl.append(this.titleEl,this.descriptionEl,this.actionEl),this.append(this.innerEl)}updateUI(){const c=this.getAttribute("title")||"문의하기",a=this.getAttribute("description")||"궁금한 점이 있으시면 언제든지 연락주세요.",l=e(this.getAttribute("align"),s,"center"),r=e(this.getAttribute("size"),n,"m"),h=this.getAttribute("content-padding")||"l",d=!this.hasAttribute("accent")||"false"!==this.getAttribute("accent"),u=this.parseAction();if(this.className=[o,`${o}--${l}`,`${o}--size-${r}`,`${o}--padding-${h}`,d&&`${o}--accent`].filter(Boolean).join(" "),t(this,o),this.titleEl&&(this.titleEl.textContent=c),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.actionEl){this.actionEl.textContent=u.label;const t=i(u.href,"");t?this.actionEl.setAttribute("href",t):this.actionEl.removeAttribute("href")}}}customElements.get("db-section-contact")||customElements.define("db-section-contact",DbSectionContact);export{DbSectionContact};

package/dist/esm/components/db-section-cta.d.ts

@@ -1,3 +1,6 @@
+import './db-badge.js';
+import './db-button.js';
+
 declare class DbSectionCta extends HTMLElement {
     static get observedAttributes(): string[];
     private built;

package/dist/esm/components/db-section-cta.js

@@ -1 +1 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_CTA_VARIANTS as i,SECTION_ALIGNS as s,SECTION_CTA_SIZES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const n="designbase-wc-section-cta";class DbSectionCta extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","headline","subtitle","description","badge","buttons","variant","theme","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.wrapEl=document.createElement("div"),this.wrapEl.className=`${n}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.badgeEl=document.createElement("db-badge"),this.badgeEl.className="designbase-wc-section-block-header__badge",this.badgeEl.hidden=!0,this.headlineEl=document.createElement("h2"),this.headlineEl.className="designbase-wc-section-block-header__headline",this.subtitleEl=document.createElement("p"),this.subtitleEl.className="designbase-wc-section-block-header__subtitle",this.descriptionEl=document.createElement("p"),this.descriptionEl.className="designbase-wc-section-block-header__description",this.headerEl.append(this.badgeEl,this.headlineEl,this.subtitleEl,this.descriptionEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${n}__actions`,this.wrapEl.append(this.headerEl,this.actionsEl),this.append(this.wrapEl)}updateUI(){const l=(this.getAttribute("headline")||this.getAttribute("title")||"").trim(),d=(this.getAttribute("subtitle")||"").trim(),h=(this.getAttribute("description")||"").trim(),r=e(this.getAttribute("variant"),i,"default"),c=this.getAttribute("theme")||"gradient",o=e(this.getAttribute("align"),s,"center"),b=e(this.getAttribute("size"),a,"m"),u=this.getAttribute("content-padding")||"l",E=this.parseBadge(),g=this.parseButtons();this.className=[n,`${n}--${r}`,`${n}--${c}`,`${n}--${o}`,`${n}--size-${b}`,`${n}--padding-${u}`].join(" "),t(this,n),this.headerEl&&(this.headerEl.className=["designbase-wc-section-block-header",`designbase-wc-section-block-header--${o}`,`${n}__header`].join(" "),this.headerEl.hidden=!Boolean(l||d||h||E?.text?.trim())),this.badgeEl&&(E?.text?(this.badgeEl.hidden=!1,this.badgeEl.style.display="",this.badgeEl.setAttribute("variant",E.variant||"primary"),this.badgeEl.setAttribute("type",E.style||"text"),this.badgeEl.setAttribute("size",E.size||"m"),this.badgeEl.textContent=E.text):(this.badgeEl.hidden=!0,this.badgeEl.style.display="none",this.badgeEl.textContent="")),this.headlineEl&&(this.headlineEl.textContent=l,this.headlineEl.hidden=!l),this.subtitleEl&&(this.subtitleEl.textContent=d,this.subtitleEl.hidden=!d),this.descriptionEl&&(this.descriptionEl.textContent=h,this.descriptionEl.hidden=!h),this.actionsEl&&(this.actionsEl.replaceChildren(),g.forEach((t,e)=>{const i=document.createElement("db-button");i.setAttribute("variant",t.variant||(0===e?"primary":"tertiary")),i.setAttribute("size",t.size||"m"),t.href&&i.setAttribute("href",t.href),i.textContent=t.text,this.actionsEl.append(i)}),this.actionsEl.hidden=0===g.length)}}customElements.get("db-section-cta")||customElements.define("db-section-cta",DbSectionCta);export{DbSectionCta};
+import"./db-badge.js";import"./db-button.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_CTA_VARIANTS as i,SECTION_ALIGNS as s,SECTION_CTA_SIZES as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const n="designbase-wc-section-cta";class DbSectionCta extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","headline","subtitle","description","badge","buttons","variant","theme","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.wrapEl=document.createElement("div"),this.wrapEl.className=`${n}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.badgeEl=document.createElement("db-badge"),this.badgeEl.className="designbase-wc-section-block-header__badge",this.badgeEl.hidden=!0,this.headlineEl=document.createElement("h2"),this.headlineEl.className="designbase-wc-section-block-header__headline",this.subtitleEl=document.createElement("p"),this.subtitleEl.className="designbase-wc-section-block-header__subtitle",this.descriptionEl=document.createElement("p"),this.descriptionEl.className="designbase-wc-section-block-header__description",this.headerEl.append(this.badgeEl,this.headlineEl,this.subtitleEl,this.descriptionEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${n}__actions`,this.wrapEl.append(this.headerEl,this.actionsEl),this.append(this.wrapEl)}updateUI(){const l=(this.getAttribute("headline")||this.getAttribute("title")||"").trim(),d=(this.getAttribute("subtitle")||"").trim(),h=(this.getAttribute("description")||"").trim(),r=e(this.getAttribute("variant"),i,"default"),c=this.getAttribute("theme")||"gradient",o=e(this.getAttribute("align"),s,"center"),b=e(this.getAttribute("size"),a,"m"),u=this.getAttribute("content-padding")||"l",E=this.parseBadge(),g=this.parseButtons();this.className=[n,`${n}--${r}`,`${n}--${c}`,`${n}--${o}`,`${n}--size-${b}`,`${n}--padding-${u}`].join(" "),t(this,n),this.headerEl&&(this.headerEl.className=["designbase-wc-section-block-header",`designbase-wc-section-block-header--${o}`,`${n}__header`].join(" "),this.headerEl.hidden=!Boolean(l||d||h||E?.text?.trim())),this.badgeEl&&(E?.text?(this.badgeEl.hidden=!1,this.badgeEl.style.display="",this.badgeEl.setAttribute("variant",E.variant||"primary"),this.badgeEl.setAttribute("type",E.style||"text"),this.badgeEl.setAttribute("size",E.size||"m"),this.badgeEl.textContent=E.text):(this.badgeEl.hidden=!0,this.badgeEl.style.display="none",this.badgeEl.textContent="")),this.headlineEl&&(this.headlineEl.textContent=l,this.headlineEl.hidden=!l),this.subtitleEl&&(this.subtitleEl.textContent=d,this.subtitleEl.hidden=!d),this.descriptionEl&&(this.descriptionEl.textContent=h,this.descriptionEl.hidden=!h),this.actionsEl&&(this.actionsEl.replaceChildren(),g.forEach((t,e)=>{const i=document.createElement("db-button");i.setAttribute("variant",t.variant||(0===e?"primary":"tertiary")),i.setAttribute("size",t.size||"m"),t.href&&i.setAttribute("href",t.href),i.textContent=t.text,this.actionsEl.append(i)}),this.actionsEl.hidden=0===g.length)}}customElements.get("db-section-cta")||customElements.define("db-section-cta",DbSectionCta);export{DbSectionCta};

package/dist/esm/components/db-section-faq.d.ts

@@ -1,3 +1,5 @@
+import './db-accordion.js';
+
 declare class DbSectionFaq extends HTMLElement {
     static get observedAttributes(): string[];
     private built;

package/dist/esm/components/db-section-faq.js

@@ -1 +1 @@
-import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as e}from"./marketing-block-host-utils.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as s,SECTION_FAQ_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-section-faq";class DbSectionFaq extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","items","allow-multiple","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${a}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.accordionEl=document.createElement("db-accordion"),this.accordionEl.className=`${a}__accordion`,this.innerEl.append(this.headerEl,this.accordionEl),this.append(this.innerEl)}updateUI(){const r=this.getAttribute("headline")||"자주 묻는 질문",l=this.getAttribute("subtitle")||"",o=this.getAttribute("description")||"",c=this.getAttribute("content-padding")||"l",d=i(this.getAttribute("align"),s,"center"),h=i(this.getAttribute("size"),n,"m"),u=this.hasAttribute("allow-multiple"),b=this.parseBadge(),m=this.parseItems();if(this.className=[a,`${a}--padding-${c}`,`${a}--size-${h}`].join(" "),e(this,a),this.headerEl&&t(this.headerEl,{headline:r,subtitle:l,description:o,badge:b,align:d}),!this.accordionEl)return;const p=m.map(t=>({id:t.id,title:t.question,content:t.answer,itemType:"question"}));this.accordionEl.setAttribute("items",JSON.stringify(p)),this.accordionEl.setAttribute("variant","default"),this.accordionEl.setAttribute("size","m"),this.accordionEl.setAttribute("default-item-type","question"),u?(this.accordionEl.setAttribute("allow-multiple",""),this.accordionEl.setAttribute("expand-mode","multiple")):(this.accordionEl.removeAttribute("allow-multiple"),this.accordionEl.setAttribute("expand-mode","single"))}}customElements.get("db-section-faq")||customElements.define("db-section-faq",DbSectionFaq);export{DbSectionFaq};
+import"./db-accordion.js";import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as e}from"./marketing-block-host-utils.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as s,SECTION_FAQ_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-section-faq";class DbSectionFaq extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","items","allow-multiple","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${a}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.accordionEl=document.createElement("db-accordion"),this.accordionEl.className=`${a}__accordion`,this.innerEl.append(this.headerEl,this.accordionEl),this.append(this.innerEl)}updateUI(){const r=this.getAttribute("headline")||"자주 묻는 질문",l=this.getAttribute("subtitle")||"",o=this.getAttribute("description")||"",c=this.getAttribute("content-padding")||"l",d=i(this.getAttribute("align"),s,"center"),h=i(this.getAttribute("size"),n,"m"),u=this.hasAttribute("allow-multiple"),b=this.parseBadge(),m=this.parseItems();if(this.className=[a,`${a}--padding-${c}`,`${a}--size-${h}`].join(" "),e(this,a),this.headerEl&&t(this.headerEl,{headline:r,subtitle:l,description:o,badge:b,align:d}),!this.accordionEl)return;const p=m.map(t=>({id:t.id,title:t.question,content:t.answer,itemType:"question"}));this.accordionEl.setAttribute("items",JSON.stringify(p)),this.accordionEl.setAttribute("variant","default"),this.accordionEl.setAttribute("size","m"),this.accordionEl.setAttribute("default-item-type","question"),u?(this.accordionEl.setAttribute("allow-multiple",""),this.accordionEl.setAttribute("expand-mode","multiple")):(this.accordionEl.removeAttribute("allow-multiple"),this.accordionEl.setAttribute("expand-mode","single"))}}customElements.get("db-section-faq")||customElements.define("db-section-faq",DbSectionFaq);export{DbSectionFaq};

package/dist/esm/components/db-section-feature.d.ts

@@ -1,3 +1,6 @@
+import './db-badge.js';
+import './db-button.js';
+
 interface FeatureAction {
     label: string;
     variant?: string;

package/dist/esm/components/db-section-feature.js

@@ -1 +1 @@
-import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_FEATURE_SIZES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const s="designbase-wc-section-feature";class DbSectionFeature extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","image","image-alt","media-position","actions","tinted","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}get actions(){return this.parseActions()}set actions(t){this.setAttribute("actions","string"==typeof t?t:JSON.stringify(t))}parseActions(){try{const t=JSON.parse(this.getAttribute("actions")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${s}__inner`;const t=document.createElement("div");t.className=`${s}__content`,this.contentEl=t,this.headlineEl=document.createElement("h2"),this.headlineEl.className=`${s}__headline`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${s}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${s}__description`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${s}__actions`,t.append(this.headlineEl,this.subtitleEl,this.descriptionEl,this.actionsEl),this.mediaEl=document.createElement("div"),this.mediaEl.className=`${s}__media`,this.imageEl=document.createElement("img"),this.imageEl.className=`${s}__image`,this.mediaEl.append(this.imageEl),this.innerEl.append(t,this.mediaEl),this.append(this.innerEl)}updateUI(){const n=(this.getAttribute("headline")||"").trim(),a=(this.getAttribute("subtitle")||"").trim(),l=(this.getAttribute("description")||"").trim(),d=this.getAttribute("image")||"",r=this.getAttribute("image-alt")||n||"feature",h=this.getAttribute("media-position")||"right",o=this.getAttribute("content-padding")||"l",c=e(this.getAttribute("size"),i,"m"),m=this.hasAttribute("tinted"),u=this.parseBadge(),E=this.parseActions();if(this.className=[s,`${s}--media-${h}`,`${s}--padding-${o}`,`${s}--size-${c}`,m&&`${s}--tinted`].filter(Boolean).join(" "),t(this,s),this.contentEl&&this.headlineEl){const t=u?.text?.trim();u&&t?(this.badgeEl||(this.badgeEl=document.createElement("db-badge"),this.badgeEl.className=`${s}__badge`),this.badgeEl.setAttribute("variant",u.variant||"primary"),this.badgeEl.setAttribute("type",u.style||"text"),this.badgeEl.setAttribute("size",u.size||"m"),this.badgeEl.textContent=t,this.badgeEl.isConnected||this.contentEl.insertBefore(this.badgeEl,this.headlineEl)):this.badgeEl&&this.badgeEl.remove()}this.headlineEl&&(this.headlineEl.textContent=n,this.headlineEl.hidden=!n),this.subtitleEl&&(this.subtitleEl.textContent=a,this.subtitleEl.hidden=!a),this.descriptionEl&&(this.descriptionEl.textContent=l,this.descriptionEl.hidden=!l),this.mediaEl&&this.imageEl&&(d?(this.mediaEl.hidden=!1,this.imageEl.src=d,this.imageEl.alt=r):this.mediaEl.hidden=!0),this.actionsEl&&(this.actionsEl.replaceChildren(),E.length>0?(E.forEach(t=>{const e=document.createElement("db-button");e.setAttribute("variant",t.variant||"primary"),e.setAttribute("size",t.size||"m"),t.href&&e.setAttribute("href",t.href),e.textContent=t.label,e.addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:t},bubbles:!0,composed:!0}))}),this.actionsEl.append(e)}),this.actionsEl.hidden=!1):this.actionsEl.hidden=!0)}}customElements.get("db-section-feature")||customElements.define("db-section-feature",DbSectionFeature);export{DbSectionFeature};
+import"./db-badge.js";import"./db-button.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_FEATURE_SIZES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const s="designbase-wc-section-feature";class DbSectionFeature extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","image","image-alt","media-position","actions","tinted","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}get actions(){return this.parseActions()}set actions(t){this.setAttribute("actions","string"==typeof t?t:JSON.stringify(t))}parseActions(){try{const t=JSON.parse(this.getAttribute("actions")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${s}__inner`;const t=document.createElement("div");t.className=`${s}__content`,this.contentEl=t,this.headlineEl=document.createElement("h2"),this.headlineEl.className=`${s}__headline`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${s}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${s}__description`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${s}__actions`,t.append(this.headlineEl,this.subtitleEl,this.descriptionEl,this.actionsEl),this.mediaEl=document.createElement("div"),this.mediaEl.className=`${s}__media`,this.imageEl=document.createElement("img"),this.imageEl.className=`${s}__image`,this.mediaEl.append(this.imageEl),this.innerEl.append(t,this.mediaEl),this.append(this.innerEl)}updateUI(){const n=(this.getAttribute("headline")||"").trim(),a=(this.getAttribute("subtitle")||"").trim(),l=(this.getAttribute("description")||"").trim(),d=this.getAttribute("image")||"",r=this.getAttribute("image-alt")||n||"feature",h=this.getAttribute("media-position")||"right",o=this.getAttribute("content-padding")||"l",c=e(this.getAttribute("size"),i,"m"),m=this.hasAttribute("tinted"),u=this.parseBadge(),b=this.parseActions();if(this.className=[s,`${s}--media-${h}`,`${s}--padding-${o}`,`${s}--size-${c}`,m&&`${s}--tinted`].filter(Boolean).join(" "),t(this,s),this.contentEl&&this.headlineEl){const t=u?.text?.trim();u&&t?(this.badgeEl||(this.badgeEl=document.createElement("db-badge"),this.badgeEl.className=`${s}__badge`),this.badgeEl.setAttribute("variant",u.variant||"primary"),this.badgeEl.setAttribute("type",u.style||"text"),this.badgeEl.setAttribute("size",u.size||"m"),this.badgeEl.textContent=t,this.badgeEl.isConnected||this.contentEl.insertBefore(this.badgeEl,this.headlineEl)):this.badgeEl&&this.badgeEl.remove()}this.headlineEl&&(this.headlineEl.textContent=n,this.headlineEl.hidden=!n),this.subtitleEl&&(this.subtitleEl.textContent=a,this.subtitleEl.hidden=!a),this.descriptionEl&&(this.descriptionEl.textContent=l,this.descriptionEl.hidden=!l),this.mediaEl&&this.imageEl&&(d?(this.mediaEl.hidden=!1,this.imageEl.src=d,this.imageEl.alt=r):this.mediaEl.hidden=!0),this.actionsEl&&(this.actionsEl.replaceChildren(),b.length>0?(b.forEach(t=>{const e=document.createElement("db-button");e.setAttribute("variant",t.variant||"primary"),e.setAttribute("size",t.size||"m"),t.href&&e.setAttribute("href",t.href),e.textContent=t.label,e.addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-action",{detail:{action:t},bubbles:!0,composed:!0}))}),this.actionsEl.append(e)}),this.actionsEl.hidden=!1):this.actionsEl.hidden=!0)}}customElements.get("db-section-feature")||customElements.define("db-section-feature",DbSectionFeature);export{DbSectionFeature};

package/dist/esm/components/db-section-hero.d.ts

@@ -1,3 +1,5 @@
+import './db-button.js';
+
 interface HeroButton {
     text: string;
     href?: string;

package/dist/esm/components/db-section-hero.js

@@ -1 +1 @@
-import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_HERO_VARIANTS as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i="designbase-wc-section-hero";function fillVisualSlot(t,e,s,l){if(t.replaceChildren(),e){const l=document.createElement("img");return l.className=`${i}__visual-image`,l.src=e,l.alt=s,void t.append(l)}const a=document.createElement("div");a.className=`${i}__visual-placeholder`,a.setAttribute("aria-hidden","true"),a.textContent=l,t.append(a)}class DbSectionHero extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","subtitle","description","badge","background-image","background-video","overlay-color","overlay-opacity","buttons","variant","theme","alignment","visual-image","visual-alt","visual-top-left","visual-top-right","animated","full-height","min-height","max-height","content-max-width"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}get buttons(){return this.parseButtons()}set buttons(t){this.setAttribute("buttons","string"==typeof t?t:JSON.stringify(t))}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}createContent(){return this.contentEl=document.createElement("div"),this.contentEl.className=`${i}__content`,this.badgeEl=document.createElement("p"),this.badgeEl.className=`${i}__badge`,this.badgeEl.hidden=!0,this.titleEl=document.createElement("h1"),this.titleEl.className=`${i}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${i}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${i}__description`,this.buttonsEl=document.createElement("div"),this.buttonsEl.className=`${i}__buttons`,this.contentEl.append(this.badgeEl,this.titleEl,this.subtitleEl,this.descriptionEl,this.buttonsEl),this.contentEl}createVisual(t){const e=document.createElement("div");return e.className=`${i}__visual ${t}`,e}build(){this.backgroundVideoEl=document.createElement("video"),this.backgroundVideoEl.className=`${i}__background-video`,this.backgroundVideoEl.autoplay=!0,this.backgroundVideoEl.muted=!0,this.backgroundVideoEl.loop=!0,this.backgroundVideoEl.playsInline=!0,this.backgroundVideoEl.hidden=!0,this.backgroundImageEl=document.createElement("div"),this.backgroundImageEl.className=`${i}__background-image`,this.backgroundImageEl.hidden=!0,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${i}__overlay`,this.overlayEl.hidden=!0,this.createContent(),this.defaultContainerEl=document.createElement("div"),this.defaultContainerEl.className=`${i}__container`,this.splitContainerEl=document.createElement("div"),this.splitContainerEl.className=`${i}__container ${i}__container--split`,this.splitContainerEl.hidden=!0,this.stageEl=document.createElement("div"),this.stageEl.className=`${i}__stage`,this.stageEl.hidden=!0,this.floatsEl=document.createElement("div"),this.floatsEl.className=`${i}__floats`,this.visualTlEl=this.createVisual(`${i}__visual--float ${i}__visual--tl`),this.visualTrEl=this.createVisual(`${i}__visual--float ${i}__visual--tr`),this.floatsEl.append(this.visualTlEl,this.visualTrEl),this.visualMainEl=this.createVisual(`${i}__visual--main`),this.visualSideEl=this.createVisual(`${i}__visual--side`),this.defaultContainerEl.append(this.contentEl),this.append(this.backgroundVideoEl,this.backgroundImageEl,this.overlayEl,this.defaultContainerEl,this.splitContainerEl,this.stageEl)}mountLayout(t){if(this.contentEl&&this.defaultContainerEl&&this.splitContainerEl&&this.stageEl){if(this.defaultContainerEl.hidden=!0,this.splitContainerEl.hidden=!0,this.stageEl.hidden=!0,"showcase"===t){this.stageEl.hidden=!1;const t=document.createElement("div");return t.className=`${i}__cluster`,t.append(this.floatsEl,this.contentEl),void this.stageEl.replaceChildren(t,this.visualMainEl)}if("split"===t)return this.splitContainerEl.hidden=!1,void this.splitContainerEl.replaceChildren(this.contentEl,this.visualSideEl);this.defaultContainerEl.hidden=!1,this.defaultContainerEl.replaceChildren(this.contentEl)}}updateUI(){const s=(this.getAttribute("title")||"").trim(),l=(this.getAttribute("subtitle")||"").trim(),a=(this.getAttribute("description")||"").trim(),n=(this.getAttribute("badge")||"").trim(),o=this.getAttribute("background-image")||"",r=this.getAttribute("background-video")||"",h=this.getAttribute("overlay-color")||"",d=Number(this.getAttribute("overlay-opacity")||.5),u=t(this.getAttribute("variant"),e,"default"),c=this.getAttribute("theme")||"light",E=this.getAttribute("alignment")||"left",m=this.getAttribute("visual-image")||"",b=this.getAttribute("visual-alt")||"",g=this.getAttribute("visual-top-left")||"",p=this.getAttribute("visual-top-right")||"",v=this.hasAttribute("animated"),_=this.hasAttribute("full-height"),y=this.getAttribute("min-height"),f=this.getAttribute("max-height"),k=this.getAttribute("content-max-width"),$=this.parseButtons(),C=Boolean(o||r),A="dark"===c||"gradient"===c||C&&("overlay"===u||"image"===c),V="showcase"===u?"center":"split"===u?"left":E;if(this.className=[i,`${i}--variant-${u}`,`${i}--theme-${c}`,`${i}--alignment-${V}`,v&&`${i}--animated`,_&&`${i}--full-height`,A&&`${i}--on-media`].filter(Boolean).join(" "),this.style.minHeight=y||"",this.style.maxHeight=f||"",this.mountLayout(u),this.badgeEl&&(this.badgeEl.textContent=n,this.badgeEl.hidden=!n),this.titleEl&&(this.titleEl.textContent=s,this.titleEl.hidden=!s),this.subtitleEl&&(this.subtitleEl.textContent=l,this.subtitleEl.hidden=!l),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.contentEl&&(k?this.contentEl.style.maxWidth=/^\d+$/.test(k)?`${k}px`:k:this.contentEl.style.removeProperty("max-width")),this.backgroundVideoEl)if(r){this.backgroundVideoEl.hidden=!1,this.backgroundVideoEl.replaceChildren();const t=document.createElement("source");t.src=r,t.type="video/mp4",this.backgroundVideoEl.append(t)}else this.backgroundVideoEl.hidden=!0;this.backgroundImageEl&&(o?(this.backgroundImageEl.hidden=!1,this.backgroundImageEl.style.backgroundImage=`url(${o})`,this.backgroundImageEl.style.backgroundSize="cover",this.backgroundImageEl.style.backgroundPosition="center",this.backgroundImageEl.style.backgroundRepeat="no-repeat"):this.backgroundImageEl.hidden=!0),this.overlayEl&&(C?(this.overlayEl.hidden=!1,h?(this.overlayEl.style.background=h,this.overlayEl.style.opacity=String(d)):(this.overlayEl.style.background=`linear-gradient(180deg, rgba(0, 0, 0, ${.35*d}) 0%, rgba(0, 0, 0, ${d}) 100%)`,this.overlayEl.style.opacity="1")):this.overlayEl.hidden=!0),"showcase"===u?(this.visualTlEl&&fillVisualSlot(this.visualTlEl,g,"","Visual"),this.visualTrEl&&fillVisualSlot(this.visualTrEl,p,"","Visual"),this.visualMainEl&&fillVisualSlot(this.visualMainEl,m,b,"Hero visual")):"split"===u&&this.visualSideEl&&fillVisualSlot(this.visualSideEl,m,b,"Hero visual"),this.buttonsEl&&(this.buttonsEl.replaceChildren(),$.length>0?($.forEach(t=>{const e=document.createElement("db-button");if(e.setAttribute("variant",function mapButtonVariant(t){return"outline"===t?"tertiary":"ghost"===t?"ghost":"secondary"===t?"secondary":"tertiary"===t?"tertiary":"primary"}(t.variant)),e.setAttribute("size",t.size||"m"),t.href&&e.setAttribute("href",t.href),t.external&&(e.setAttribute("target","_blank"),e.setAttribute("rel","noopener noreferrer")),t.startIcon)e.setAttribute("start-icon",t.startIcon),e.textContent=t.text;else if(t.icon){const s=document.createElement("span");s.className=`${i}__button-content`;const l=document.createElement("span");l.className=`${i}__button-icon`,l.setAttribute("aria-hidden","true"),l.textContent=t.icon;const a=document.createElement("span");a.textContent=t.text,s.append(l,a),e.append(s)}else e.textContent=t.text;e.addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-button-click",{detail:{button:t},bubbles:!0,composed:!0}))}),this.buttonsEl.append(e)}),this.buttonsEl.hidden=!1):this.buttonsEl.hidden=!0)}}customElements.get("db-section-hero")||customElements.define("db-section-hero",DbSectionHero);export{DbSectionHero};
+import"./db-button.js";import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_HERO_VARIANTS as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const i="designbase-wc-section-hero";function fillVisualSlot(t,e,s,l){if(t.replaceChildren(),e){const l=document.createElement("img");return l.className=`${i}__visual-image`,l.src=e,l.alt=s,void t.append(l)}const a=document.createElement("div");a.className=`${i}__visual-placeholder`,a.setAttribute("aria-hidden","true"),a.textContent=l,t.append(a)}class DbSectionHero extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["title","subtitle","description","badge","background-image","background-video","overlay-color","overlay-opacity","buttons","variant","theme","alignment","visual-image","visual-alt","visual-top-left","visual-top-right","animated","full-height","min-height","max-height","content-max-width"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}get buttons(){return this.parseButtons()}set buttons(t){this.setAttribute("buttons","string"==typeof t?t:JSON.stringify(t))}parseButtons(){try{const t=JSON.parse(this.getAttribute("buttons")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}createContent(){return this.contentEl=document.createElement("div"),this.contentEl.className=`${i}__content`,this.badgeEl=document.createElement("p"),this.badgeEl.className=`${i}__badge`,this.badgeEl.hidden=!0,this.titleEl=document.createElement("h1"),this.titleEl.className=`${i}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${i}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${i}__description`,this.buttonsEl=document.createElement("div"),this.buttonsEl.className=`${i}__buttons`,this.contentEl.append(this.badgeEl,this.titleEl,this.subtitleEl,this.descriptionEl,this.buttonsEl),this.contentEl}createVisual(t){const e=document.createElement("div");return e.className=`${i}__visual ${t}`,e}build(){this.backgroundVideoEl=document.createElement("video"),this.backgroundVideoEl.className=`${i}__background-video`,this.backgroundVideoEl.autoplay=!0,this.backgroundVideoEl.muted=!0,this.backgroundVideoEl.loop=!0,this.backgroundVideoEl.playsInline=!0,this.backgroundVideoEl.hidden=!0,this.backgroundImageEl=document.createElement("div"),this.backgroundImageEl.className=`${i}__background-image`,this.backgroundImageEl.hidden=!0,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${i}__overlay`,this.overlayEl.hidden=!0,this.createContent(),this.defaultContainerEl=document.createElement("div"),this.defaultContainerEl.className=`${i}__container`,this.splitContainerEl=document.createElement("div"),this.splitContainerEl.className=`${i}__container ${i}__container--split`,this.splitContainerEl.hidden=!0,this.stageEl=document.createElement("div"),this.stageEl.className=`${i}__stage`,this.stageEl.hidden=!0,this.floatsEl=document.createElement("div"),this.floatsEl.className=`${i}__floats`,this.visualTlEl=this.createVisual(`${i}__visual--float ${i}__visual--tl`),this.visualTrEl=this.createVisual(`${i}__visual--float ${i}__visual--tr`),this.floatsEl.append(this.visualTlEl,this.visualTrEl),this.visualMainEl=this.createVisual(`${i}__visual--main`),this.visualSideEl=this.createVisual(`${i}__visual--side`),this.defaultContainerEl.append(this.contentEl),this.append(this.backgroundVideoEl,this.backgroundImageEl,this.overlayEl,this.defaultContainerEl,this.splitContainerEl,this.stageEl)}mountLayout(t){if(this.contentEl&&this.defaultContainerEl&&this.splitContainerEl&&this.stageEl){if(this.defaultContainerEl.hidden=!0,this.splitContainerEl.hidden=!0,this.stageEl.hidden=!0,"showcase"===t){this.stageEl.hidden=!1;const t=document.createElement("div");return t.className=`${i}__cluster`,t.append(this.floatsEl,this.contentEl),void this.stageEl.replaceChildren(t,this.visualMainEl)}if("split"===t)return this.splitContainerEl.hidden=!1,void this.splitContainerEl.replaceChildren(this.contentEl,this.visualSideEl);this.defaultContainerEl.hidden=!1,this.defaultContainerEl.replaceChildren(this.contentEl)}}updateUI(){const s=(this.getAttribute("title")||"").trim(),l=(this.getAttribute("subtitle")||"").trim(),a=(this.getAttribute("description")||"").trim(),n=(this.getAttribute("badge")||"").trim(),o=this.getAttribute("background-image")||"",r=this.getAttribute("background-video")||"",h=this.getAttribute("overlay-color")||"",d=Number(this.getAttribute("overlay-opacity")||.5),u=t(this.getAttribute("variant"),e,"default"),c=this.getAttribute("theme")||"light",E=this.getAttribute("alignment")||"left",b=this.getAttribute("visual-image")||"",m=this.getAttribute("visual-alt")||"",g=this.getAttribute("visual-top-left")||"",p=this.getAttribute("visual-top-right")||"",v=this.hasAttribute("animated"),_=this.hasAttribute("full-height"),y=this.getAttribute("min-height"),f=this.getAttribute("max-height"),k=this.getAttribute("content-max-width"),$=this.parseButtons(),C=Boolean(o||r),A="dark"===c||"gradient"===c||C&&("overlay"===u||"image"===c),V="showcase"===u?"center":"split"===u?"left":E;if(this.className=[i,`${i}--variant-${u}`,`${i}--theme-${c}`,`${i}--alignment-${V}`,v&&`${i}--animated`,_&&`${i}--full-height`,A&&`${i}--on-media`].filter(Boolean).join(" "),this.style.minHeight=y||"",this.style.maxHeight=f||"",this.mountLayout(u),this.badgeEl&&(this.badgeEl.textContent=n,this.badgeEl.hidden=!n),this.titleEl&&(this.titleEl.textContent=s,this.titleEl.hidden=!s),this.subtitleEl&&(this.subtitleEl.textContent=l,this.subtitleEl.hidden=!l),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.contentEl&&(k?this.contentEl.style.maxWidth=/^\d+$/.test(k)?`${k}px`:k:this.contentEl.style.removeProperty("max-width")),this.backgroundVideoEl)if(r){this.backgroundVideoEl.hidden=!1,this.backgroundVideoEl.replaceChildren();const t=document.createElement("source");t.src=r,t.type="video/mp4",this.backgroundVideoEl.append(t)}else this.backgroundVideoEl.hidden=!0;this.backgroundImageEl&&(o?(this.backgroundImageEl.hidden=!1,this.backgroundImageEl.style.backgroundImage=`url(${o})`,this.backgroundImageEl.style.backgroundSize="cover",this.backgroundImageEl.style.backgroundPosition="center",this.backgroundImageEl.style.backgroundRepeat="no-repeat"):this.backgroundImageEl.hidden=!0),this.overlayEl&&(C?(this.overlayEl.hidden=!1,h?(this.overlayEl.style.background=h,this.overlayEl.style.opacity=String(d)):(this.overlayEl.style.background=`linear-gradient(180deg, rgba(0, 0, 0, ${.35*d}) 0%, rgba(0, 0, 0, ${d}) 100%)`,this.overlayEl.style.opacity="1")):this.overlayEl.hidden=!0),"showcase"===u?(this.visualTlEl&&fillVisualSlot(this.visualTlEl,g,"","Visual"),this.visualTrEl&&fillVisualSlot(this.visualTrEl,p,"","Visual"),this.visualMainEl&&fillVisualSlot(this.visualMainEl,b,m,"Hero visual")):"split"===u&&this.visualSideEl&&fillVisualSlot(this.visualSideEl,b,m,"Hero visual"),this.buttonsEl&&(this.buttonsEl.replaceChildren(),$.length>0?($.forEach(t=>{const e=document.createElement("db-button");if(e.setAttribute("variant",function mapButtonVariant(t){return"outline"===t?"tertiary":"ghost"===t?"ghost":"secondary"===t?"secondary":"tertiary"===t?"tertiary":"primary"}(t.variant)),e.setAttribute("size",t.size||"m"),t.href&&e.setAttribute("href",t.href),t.external&&(e.setAttribute("target","_blank"),e.setAttribute("rel","noopener noreferrer")),t.startIcon)e.setAttribute("start-icon",t.startIcon),e.textContent=t.text;else if(t.icon){const s=document.createElement("span");s.className=`${i}__button-content`;const l=document.createElement("span");l.className=`${i}__button-icon`,l.setAttribute("aria-hidden","true"),l.textContent=t.icon;const a=document.createElement("span");a.textContent=t.text,s.append(l,a),e.append(s)}else e.textContent=t.text;e.addEventListener("click",e=>{e.stopPropagation(),this.dispatchEvent(new CustomEvent("db-button-click",{detail:{button:t},bubbles:!0,composed:!0}))}),this.buttonsEl.append(e)}),this.buttonsEl.hidden=!1):this.buttonsEl.hidden=!0)}}customElements.get("db-section-hero")||customElements.define("db-section-hero",DbSectionHero);export{DbSectionHero};

package/dist/esm/components/db-section-logo-cloud.d.ts

@@ -1,3 +1,5 @@
+import './db-marquee.js';
+
 declare class DbSectionLogoCloud extends HTMLElement {
     static get observedAttributes(): string[];
     private built;

package/dist/esm/components/db-section-logo-cloud.js

@@ -1 +1 @@
-import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{sanitizeHref as s}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_LOGO_CLOUD_VARIANTS as n,SECTION_ALIGNS as a,SECTION_LOGO_CLOUD_SIZES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const l="designbase-wc-section-logo-cloud";class DbSectionLogoCloud extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","logos","variant","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseLogos(){try{const e=JSON.parse(this.getAttribute("logos")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${l}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.contentEl=document.createElement("div"),this.innerEl.append(this.headerEl,this.contentEl),this.append(this.innerEl)}updateUI(){const o=this.getAttribute("headline")||"함께하는 파트너",c=this.getAttribute("subtitle")||"",d=this.getAttribute("description")||"",h=i(this.getAttribute("variant"),n,"grid"),u=this.getAttribute("content-padding")||"m",b=i(this.getAttribute("align"),a,"center"),g=i(this.getAttribute("size"),r,"m"),m=this.parseBadge(),p=this.parseLogos();if(this.className=[l,`${l}--${h}`,`${l}--size-${g}`,`${l}--padding-${u}`].join(" "),t(this,l),this.headerEl&&e(this.headerEl,{headline:o,subtitle:c,description:d,badge:m,align:b}),this.contentEl){if(this.contentEl.replaceChildren(),"marquee"===h){this.contentEl.className=`${l}__marquee`;const e=document.createElement("db-marquee");return e.setAttribute("items",JSON.stringify(p.map(e=>e.src?{src:e.src,alt:e.alt,href:e.href,height:48}:e.label??e.alt))),void this.contentEl.append(e)}this.contentEl.className=`${l}__grid`,p.forEach(e=>{const t=s(e.href,""),i=document.createElement(t?"a":"div");if(i.className=`${l}__item`,t&&i instanceof HTMLAnchorElement&&(i.href=t,i.target="_blank",i.rel="noopener noreferrer"),e.src){const t=document.createElement("img");t.src=e.src,t.alt=e.alt,t.className=`${l}__image`,i.append(t)}else{const t=document.createElement("span");t.className=`${l}__label`,t.textContent=e.label??e.alt,i.append(t)}this.contentEl.append(i)})}}}customElements.get("db-section-logo-cloud")||customElements.define("db-section-logo-cloud",DbSectionLogoCloud);export{DbSectionLogoCloud};
+import"./db-marquee.js";import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{sanitizeHref as s}from"../core/safe-url.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_LOGO_CLOUD_VARIANTS as n,SECTION_ALIGNS as a,SECTION_LOGO_CLOUD_SIZES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const l="designbase-wc-section-logo-cloud";class DbSectionLogoCloud extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","logos","variant","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseLogos(){try{const e=JSON.parse(this.getAttribute("logos")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${l}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.contentEl=document.createElement("div"),this.innerEl.append(this.headerEl,this.contentEl),this.append(this.innerEl)}updateUI(){const o=this.getAttribute("headline")||"함께하는 파트너",c=this.getAttribute("subtitle")||"",d=this.getAttribute("description")||"",h=i(this.getAttribute("variant"),n,"grid"),u=this.getAttribute("content-padding")||"m",b=i(this.getAttribute("align"),a,"center"),m=i(this.getAttribute("size"),r,"m"),g=this.parseBadge(),p=this.parseLogos();if(this.className=[l,`${l}--${h}`,`${l}--size-${m}`,`${l}--padding-${u}`].join(" "),t(this,l),this.headerEl&&e(this.headerEl,{headline:o,subtitle:c,description:d,badge:g,align:b}),this.contentEl){if(this.contentEl.replaceChildren(),"marquee"===h){this.contentEl.className=`${l}__marquee`;const e=document.createElement("db-marquee");return e.setAttribute("items",JSON.stringify(p.map(e=>e.src?{src:e.src,alt:e.alt,href:e.href,height:48}:e.label??e.alt))),void this.contentEl.append(e)}this.contentEl.className=`${l}__grid`,p.forEach(e=>{const t=s(e.href,""),i=document.createElement(t?"a":"div");if(i.className=`${l}__item`,t&&i instanceof HTMLAnchorElement&&(i.href=t,i.target="_blank",i.rel="noopener noreferrer"),e.src){const t=document.createElement("img");t.src=e.src,t.alt=e.alt,t.className=`${l}__image`,i.append(t)}else{const t=document.createElement("span");t.className=`${l}__label`,t.textContent=e.label??e.alt,i.append(t)}this.contentEl.append(i)})}}}customElements.get("db-section-logo-cloud")||customElements.define("db-section-logo-cloud",DbSectionLogoCloud);export{DbSectionLogoCloud};

package/dist/esm/components/db-section-pricing.d.ts

@@ -1,3 +1,6 @@
+import './db-badge.js';
+import './db-button.js';
+
 declare class DbSectionPricing extends HTMLElement {
     static get observedAttributes(): string[];
     private built;

package/dist/esm/components/db-section-pricing.js

@@ -1 +1 @@
-import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as s,SECTION_PRICING_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-section-pricing";class DbSectionPricing extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","plans","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parsePlans(){try{const e=JSON.parse(this.getAttribute("plans")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${a}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${a}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const r=this.getAttribute("headline")||"요금제",c=this.getAttribute("subtitle")||"",l=this.getAttribute("description")||"",d=this.getAttribute("columns")||"3",o=this.getAttribute("content-padding")||"l",h=i(this.getAttribute("align"),s,"center"),p=i(this.getAttribute("size"),n,"m"),u=this.parseBadge(),m=this.parsePlans();this.className=[a,`${a}--cols-${d}`,`${a}--padding-${o}`,`${a}--size-${p}`].join(" "),t(this,a),this.headerEl&&e(this.headerEl,{headline:r,subtitle:c,description:l,badge:u,align:h}),this.gridEl&&(this.gridEl.replaceChildren(),m.forEach(e=>{const t=document.createElement("article");t.className=[`${a}__plan-card`,e.highlighted?`${a}__plan-card--highlighted`:""].filter(Boolean).join(" ");const i=document.createElement("div");if(i.className=`${a}__plan-body`,e.badge){const t=document.createElement("db-badge");t.setAttribute("variant","primary"),t.setAttribute("type","filled"),t.setAttribute("size","s"),t.className=`${a}__plan-badge`,t.textContent=e.badge,i.append(t)}const s=document.createElement("h3");s.className=`${a}__plan-name`,s.textContent=e.name;const n=document.createElement("div");n.className=`${a}__price-row`;const r=document.createElement("span");if(r.className=`${a}__price`,r.textContent=e.price,n.append(r),e.period){const t=document.createElement("span");t.className=`${a}__period`,t.textContent=`/ ${e.period}`,n.append(t)}if(i.append(s,n),e.description){const t=document.createElement("p");t.className=`${a}__plan-description`,t.textContent=e.description,i.append(t)}const c=document.createElement("ul");c.className=`${a}__features`,e.features.forEach(e=>{const t=document.createElement("li");t.textContent=e,c.append(t)}),i.append(c);const l=document.createElement("div");l.className=`${a}__plan-footer`;const d=document.createElement("db-button");d.className=`${a}__cta`,d.setAttribute("variant",e.cta.variant||(e.highlighted?"primary":"tertiary")),d.setAttribute("size","m"),d.setAttribute("full-width",""),e.cta.href&&d.setAttribute("href",e.cta.href),d.textContent=e.cta.label,l.append(d),t.append(i,l),this.gridEl.append(t)}))}}customElements.get("db-section-pricing")||customElements.define("db-section-pricing",DbSectionPricing);export{DbSectionPricing};
+import"./db-badge.js";import"./db-button.js";import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as s,SECTION_PRICING_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-section-pricing";class DbSectionPricing extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","plans","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parsePlans(){try{const e=JSON.parse(this.getAttribute("plans")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${a}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${a}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const r=this.getAttribute("headline")||"요금제",c=this.getAttribute("subtitle")||"",d=this.getAttribute("description")||"",l=this.getAttribute("columns")||"3",o=this.getAttribute("content-padding")||"l",p=i(this.getAttribute("align"),s,"center"),h=i(this.getAttribute("size"),n,"m"),b=this.parseBadge(),m=this.parsePlans();this.className=[a,`${a}--cols-${l}`,`${a}--padding-${o}`,`${a}--size-${h}`].join(" "),t(this,a),this.headerEl&&e(this.headerEl,{headline:r,subtitle:c,description:d,badge:b,align:p}),this.gridEl&&(this.gridEl.replaceChildren(),m.forEach(e=>{const t=document.createElement("article");t.className=[`${a}__plan-card`,e.highlighted?`${a}__plan-card--highlighted`:""].filter(Boolean).join(" ");const i=document.createElement("div");if(i.className=`${a}__plan-body`,e.badge){const t=document.createElement("db-badge");t.setAttribute("variant","primary"),t.setAttribute("type","filled"),t.setAttribute("size","s"),t.className=`${a}__plan-badge`,t.textContent=e.badge,i.append(t)}const s=document.createElement("h3");s.className=`${a}__plan-name`,s.textContent=e.name;const n=document.createElement("div");n.className=`${a}__price-row`;const r=document.createElement("span");if(r.className=`${a}__price`,r.textContent=e.price,n.append(r),e.period){const t=document.createElement("span");t.className=`${a}__period`,t.textContent=`/ ${e.period}`,n.append(t)}if(i.append(s,n),e.description){const t=document.createElement("p");t.className=`${a}__plan-description`,t.textContent=e.description,i.append(t)}const c=document.createElement("ul");c.className=`${a}__features`,e.features.forEach(e=>{const t=document.createElement("li");t.textContent=e,c.append(t)}),i.append(c);const d=document.createElement("div");d.className=`${a}__plan-footer`;const l=document.createElement("db-button");l.className=`${a}__cta`,l.setAttribute("variant",e.cta.variant||(e.highlighted?"primary":"tertiary")),l.setAttribute("size","m"),l.setAttribute("full-width",""),e.cta.href&&l.setAttribute("href",e.cta.href),l.textContent=e.cta.label,d.append(l),t.append(i,d),this.gridEl.append(t)}))}}customElements.get("db-section-pricing")||customElements.define("db-section-pricing",DbSectionPricing);export{DbSectionPricing};

package/dist/esm/components/db-section-stats.d.ts

@@ -1,3 +1,5 @@
+import './db-stat.js';
+
 declare class DbSectionStats extends HTMLElement {
     static get observedAttributes(): string[];
     private built;

package/dist/esm/components/db-section-stats.js

@@ -1 +1 @@
-import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as e}from"./marketing-block-host-utils.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as s,SECTION_STATS_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-section-stats";class DbSectionStats extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","items","columns","tinted","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${a}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${a}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const r=this.getAttribute("headline")||"",l=this.getAttribute("subtitle")||"",d=this.getAttribute("description")||"",c=this.getAttribute("columns")||"4",o=this.getAttribute("content-padding")||"l",h=i(this.getAttribute("align"),s,"center"),b=i(this.getAttribute("size"),n,"m"),u=this.hasAttribute("tinted"),g=this.parseBadge(),m=this.parseItems();this.className=[a,`${a}--cols-${c}`,`${a}--padding-${o}`,`${a}--size-${b}`,u&&`${a}--tinted`].filter(Boolean).join(" "),e(this,a),this.headerEl&&t(this.headerEl,{headline:r,subtitle:l,description:d,badge:g,align:h}),this.gridEl&&(this.gridEl.replaceChildren(),m.forEach(t=>{const e=document.createElement("db-stat");e.setAttribute("value",String(t.value)),e.setAttribute("label",t.label),e.setAttribute("variant","minimal"),e.setAttribute("layout","vertical"),e.setAttribute("size","l"),t.description&&(e.setAttribute("description",t.description),e.setAttribute("show-description","")),e.className=`${a}__stat`,this.gridEl.append(e)}))}}customElements.get("db-section-stats")||customElements.define("db-section-stats",DbSectionStats);export{DbSectionStats};
+import"./db-stat.js";import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as e}from"./marketing-block-host-utils.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as s,SECTION_STATS_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="designbase-wc-section-stats";class DbSectionStats extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["headline","subtitle","description","badge","items","columns","tinted","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}parseItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseBadge(){try{const t=this.getAttribute("badge");return t?JSON.parse(t):null}catch{return null}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${a}__inner`,this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header",this.headerEl.innerHTML='\n            <db-badge class="designbase-wc-section-block-header__badge" hidden></db-badge>\n            <h2 class="designbase-wc-section-block-header__headline"></h2>\n            <p class="designbase-wc-section-block-header__subtitle"></p>\n            <p class="designbase-wc-section-block-header__description"></p>\n        ',this.gridEl=document.createElement("div"),this.gridEl.className=`${a}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const r=this.getAttribute("headline")||"",l=this.getAttribute("subtitle")||"",d=this.getAttribute("description")||"",c=this.getAttribute("columns")||"4",o=this.getAttribute("content-padding")||"l",h=i(this.getAttribute("align"),s,"center"),b=i(this.getAttribute("size"),n,"m"),u=this.hasAttribute("tinted"),g=this.parseBadge(),m=this.parseItems();this.className=[a,`${a}--cols-${c}`,`${a}--padding-${o}`,`${a}--size-${b}`,u&&`${a}--tinted`].filter(Boolean).join(" "),e(this,a),this.headerEl&&t(this.headerEl,{headline:r,subtitle:l,description:d,badge:g,align:h}),this.gridEl&&(this.gridEl.replaceChildren(),m.forEach(t=>{const e=document.createElement("db-stat");e.setAttribute("value",String(t.value)),e.setAttribute("label",t.label),e.setAttribute("variant","minimal"),e.setAttribute("layout","vertical"),e.setAttribute("size","l"),t.description&&(e.setAttribute("description",t.description),e.setAttribute("show-description","")),e.className=`${a}__stat`,this.gridEl.append(e)}))}}customElements.get("db-section-stats")||customElements.define("db-section-stats",DbSectionStats);export{DbSectionStats};

package/dist/esm/components/db-section-testimonials.d.ts

@@ -1,3 +1,7 @@
+import './db-badge.js';
+import './db-testimonial.js';
+import './db-indicator.js';
+
 declare class DbSectionTestimonials extends HTMLElement {
     static get observedAttributes(): string[];
     private built;

package/dist/esm/components/db-section-testimonials.js

@@ -1 +1 @@
-import{dbText as e}from"../core/i18n.js";import{b as t}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-AGE5BHQ4.js";import{createDbIcon as s}from"./db-icons.js";import{applySectionBlockHeader as i}from"./section-block-header-utils.js";import{syncMarketingBlockHost as n}from"./marketing-block-host-utils.js";import{coerceToContract as a}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as r,SECTION_TESTIMONIALS_VARIANTS as o,SECTION_TESTIMONIALS_SIZES as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const l="designbase-wc-section-testimonials";class DbSectionTestimonials extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.carouselIndex=0}static get observedAttributes(){return["headline","subtitle","description","badge","items","variant","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.carouselEngine?.destroy(),this.carouselEngine=void 0}attributeChangedCallback(){this.built&&(this.carouselIndex=0,this.updateUI())}parseItems(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}buildHeader(e){this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header";const t=document.createElement("db-badge");t.className="designbase-wc-section-block-header__badge",t.hidden=!0,t.dataset.role="badge";const s=document.createElement("h2");s.className="designbase-wc-section-block-header__headline",s.dataset.role="headline";const i=document.createElement("p");i.className="designbase-wc-section-block-header__subtitle",i.dataset.role="subtitle";const n=document.createElement("p");n.className="designbase-wc-section-block-header__description",n.dataset.role="description",this.headerEl.append(t,s,i,n),e.append(this.headerEl)}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${l}__inner`,this.buildHeader(this.innerEl),this.contentEl=document.createElement("div"),this.contentEl.className=`${l}__grid`,this.innerEl.append(this.contentEl),this.append(this.innerEl)}createTestimonialEl(e){const t=document.createElement("db-testimonial");return t.setAttribute("variant","card"),t.setAttribute("quote",e.quote),t.setAttribute("author",e.author),e.role&&t.setAttribute("role",e.role),e.company&&t.setAttribute("company",e.company),e.avatar&&t.setAttribute("avatar",e.avatar),null!=e.rating&&t.setAttribute("rating",String(e.rating)),t}updateHeader(){this.headerEl&&i(this.headerEl,{headline:this.getAttribute("headline")||"고객 후기",subtitle:this.getAttribute("subtitle")||"",description:this.getAttribute("description")||"",badge:this.parseBadge(),align:a(this.getAttribute("align"),r,"center")})}clampCarouselIndex(e){e<=0?this.carouselIndex=0:(this.carouselIndex>=e&&(this.carouselIndex=0),this.carouselIndex<0&&(this.carouselIndex=0))}goToCarouselSlide(e){this.carouselEngine?.goTo(e)}renderGrid(e){this.contentEl&&(this.carouselEngine?.destroy(),this.carouselEngine=void 0,this.carouselIndicator=void 0,this.contentEl.className=`${l}__grid`,this.contentEl.replaceChildren(),e.forEach(e=>{this.contentEl.append(this.createTestimonialEl(e))}))}renderCarousel(i){if(!this.contentEl)return;if(this.contentEl.replaceChildren(),this.contentEl.className=`${l}__carousel`,this.clampCarouselIndex(i.length),0===i.length)return;const n=document.createElement("div");n.className=`${l}__carousel-viewport`;const a=document.createElement("div");if(a.className=`${l}__carousel-track db-slide__viewport`,i.forEach(e=>{const t=document.createElement("div");t.className=`${l}__carousel-slide`,t.append(this.createTestimonialEl(e)),a.append(t)}),n.append(a),i.length>1){const t=document.createElement("button");t.type="button",t.className=`${l}__carousel-nav ${l}__carousel-nav--prev`,t.setAttribute("aria-label",e("이전 후기")),t.append(s("chevron-left",20)),t.addEventListener("click",()=>this.carouselEngine?.prev());const a=document.createElement("button");a.type="button",a.className=`${l}__carousel-nav ${l}__carousel-nav--next`,a.setAttribute("aria-label",e("다음 후기")),a.append(s("chevron-right",20)),a.addEventListener("click",()=>this.carouselEngine?.next()),n.append(t,a);const r=document.createElement("div");r.className=`${l}__carousel-controls`;const o=document.createElement("db-indicator");o.className=`${l}__carousel-indicator`,o.setAttribute("current",String(this.carouselIndex)),o.setAttribute("total",String(i.length)),o.setAttribute("type","dots"),o.setAttribute("size","s"),o.setAttribute("clickable",""),o.addEventListener("db-step-click",e=>{const t=e;this.goToCarouselSlide(t.detail.index)}),this.carouselIndicator=o,r.append(o),this.contentEl.append(n,r)}else this.contentEl.append(n);this.carouselEngine=t(this.contentEl,{startIndex:this.carouselIndex,slidesPerView:1,gap:0,rewind:!0,label:this.getAttribute("headline")||"고객 후기"});const sync=()=>{this.carouselIndex=this.carouselEngine.getState().index,this.carouselIndicator?.getAttribute("current")!==String(this.carouselIndex)&&this.carouselIndicator?.setAttribute("current",String(this.carouselIndex))};this.carouselEngine.on("change",sync),this.carouselEngine.on("refresh",sync),sync()}updateUI(){this.carouselEngine?.destroy(),this.carouselEngine=void 0;const e=a(this.getAttribute("variant"),o,"grid"),t=a(this.getAttribute("size"),c,"m"),s=this.getAttribute("columns")||"3",i=this.getAttribute("content-padding")||"l",r=this.parseItems();this.className=[l,`${l}--${e}`,`${l}--cols-${s}`,`${l}--padding-${i}`,`${l}--size-${t}`].join(" "),n(this,l),this.updateHeader(),"carousel"===e?this.renderCarousel(r):this.renderGrid(r)}}customElements.get("db-section-testimonials")||customElements.define("db-section-testimonials",DbSectionTestimonials);export{DbSectionTestimonials};
+import"./db-badge.js";import"./db-testimonial.js";import"./db-indicator.js";import{dbText as e}from"../core/i18n.js";import{b as t}from"../node_modules/@designbasekorea/carousel/dist/chunks/chunk-AGE5BHQ4.js";import{createDbIcon as s}from"./db-icons.js";import{applySectionBlockHeader as i}from"./section-block-header-utils.js";import{syncMarketingBlockHost as n}from"./marketing-block-host-utils.js";import{coerceToContract as a}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{SECTION_ALIGNS as r,SECTION_TESTIMONIALS_VARIANTS as o,SECTION_TESTIMONIALS_SIZES as c}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const l="designbase-wc-section-testimonials";class DbSectionTestimonials extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.carouselIndex=0}static get observedAttributes(){return["headline","subtitle","description","badge","items","variant","columns","align","content-padding","size","full-width","full-height","overflow-visible"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.carouselEngine?.destroy(),this.carouselEngine=void 0}attributeChangedCallback(){this.built&&(this.carouselIndex=0,this.updateUI())}parseItems(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBadge(){try{const e=this.getAttribute("badge");return e?JSON.parse(e):null}catch{return null}}buildHeader(e){this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section-block-header";const t=document.createElement("db-badge");t.className="designbase-wc-section-block-header__badge",t.hidden=!0,t.dataset.role="badge";const s=document.createElement("h2");s.className="designbase-wc-section-block-header__headline",s.dataset.role="headline";const i=document.createElement("p");i.className="designbase-wc-section-block-header__subtitle",i.dataset.role="subtitle";const n=document.createElement("p");n.className="designbase-wc-section-block-header__description",n.dataset.role="description",this.headerEl.append(t,s,i,n),e.append(this.headerEl)}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${l}__inner`,this.buildHeader(this.innerEl),this.contentEl=document.createElement("div"),this.contentEl.className=`${l}__grid`,this.innerEl.append(this.contentEl),this.append(this.innerEl)}createTestimonialEl(e){const t=document.createElement("db-testimonial");return t.setAttribute("variant","card"),t.setAttribute("quote",e.quote),t.setAttribute("author",e.author),e.role&&t.setAttribute("role",e.role),e.company&&t.setAttribute("company",e.company),e.avatar&&t.setAttribute("avatar",e.avatar),null!=e.rating&&t.setAttribute("rating",String(e.rating)),t}updateHeader(){this.headerEl&&i(this.headerEl,{headline:this.getAttribute("headline")||"고객 후기",subtitle:this.getAttribute("subtitle")||"",description:this.getAttribute("description")||"",badge:this.parseBadge(),align:a(this.getAttribute("align"),r,"center")})}clampCarouselIndex(e){e<=0?this.carouselIndex=0:(this.carouselIndex>=e&&(this.carouselIndex=0),this.carouselIndex<0&&(this.carouselIndex=0))}goToCarouselSlide(e){this.carouselEngine?.goTo(e)}renderGrid(e){this.contentEl&&(this.carouselEngine?.destroy(),this.carouselEngine=void 0,this.carouselIndicator=void 0,this.contentEl.className=`${l}__grid`,this.contentEl.replaceChildren(),e.forEach(e=>{this.contentEl.append(this.createTestimonialEl(e))}))}renderCarousel(i){if(!this.contentEl)return;if(this.contentEl.replaceChildren(),this.contentEl.className=`${l}__carousel`,this.clampCarouselIndex(i.length),0===i.length)return;const n=document.createElement("div");n.className=`${l}__carousel-viewport`;const a=document.createElement("div");if(a.className=`${l}__carousel-track db-slide__viewport`,i.forEach(e=>{const t=document.createElement("div");t.className=`${l}__carousel-slide`,t.append(this.createTestimonialEl(e)),a.append(t)}),n.append(a),i.length>1){const t=document.createElement("button");t.type="button",t.className=`${l}__carousel-nav ${l}__carousel-nav--prev`,t.setAttribute("aria-label",e("이전 후기")),t.append(s("chevron-left",20)),t.addEventListener("click",()=>this.carouselEngine?.prev());const a=document.createElement("button");a.type="button",a.className=`${l}__carousel-nav ${l}__carousel-nav--next`,a.setAttribute("aria-label",e("다음 후기")),a.append(s("chevron-right",20)),a.addEventListener("click",()=>this.carouselEngine?.next()),n.append(t,a);const r=document.createElement("div");r.className=`${l}__carousel-controls`;const o=document.createElement("db-indicator");o.className=`${l}__carousel-indicator`,o.setAttribute("current",String(this.carouselIndex)),o.setAttribute("total",String(i.length)),o.setAttribute("type","dots"),o.setAttribute("size","s"),o.setAttribute("clickable",""),o.addEventListener("db-step-click",e=>{const t=e;this.goToCarouselSlide(t.detail.index)}),this.carouselIndicator=o,r.append(o),this.contentEl.append(n,r)}else this.contentEl.append(n);this.carouselEngine=t(this.contentEl,{startIndex:this.carouselIndex,slidesPerView:1,gap:0,rewind:!0,label:this.getAttribute("headline")||"고객 후기"});const sync=()=>{this.carouselIndex=this.carouselEngine.getState().index,this.carouselIndicator?.getAttribute("current")!==String(this.carouselIndex)&&this.carouselIndicator?.setAttribute("current",String(this.carouselIndex))};this.carouselEngine.on("change",sync),this.carouselEngine.on("refresh",sync),sync()}updateUI(){this.carouselEngine?.destroy(),this.carouselEngine=void 0;const e=a(this.getAttribute("variant"),o,"grid"),t=a(this.getAttribute("size"),c,"m"),s=this.getAttribute("columns")||"3",i=this.getAttribute("content-padding")||"l",r=this.parseItems();this.className=[l,`${l}--${e}`,`${l}--cols-${s}`,`${l}--padding-${i}`,`${l}--size-${t}`].join(" "),n(this,l),this.updateHeader(),"carousel"===e?this.renderCarousel(r):this.renderGrid(r)}}customElements.get("db-section-testimonials")||customElements.define("db-section-testimonials",DbSectionTestimonials);export{DbSectionTestimonials};

package/dist/esm/components/db-section.d.ts

@@ -1,3 +1,5 @@
+import './db-tabs.js';
+
 declare class DbSection extends HTMLElement {
     static get observedAttributes(): string[];
     private headerEl?;

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{dbUid as t}from"../core/uid.js";import{SECTION_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbSection extends HTMLElement{constructor(){super(...arguments),this.contentId=t("db-section"),this.internalExpanded=!0,this.internalTabId="",this.handleToggle=()=>{if(!this.isCollapsible())return;const e=!this.isExpanded();this.hasAttribute("expanded")||(this.internalExpanded=e),this.dispatchEvent(new CustomEvent("db-expanded-change",{bubbles:!0,composed:!0,detail:{expanded:e}})),this.hasAttribute("expanded")||(this.syncHostClasses(),this.syncCollapsibleState())},this.handleTabChange=e=>{const t=e.detail,s=t?.id??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.internalTabId=s,this.tabsEl?.setAttribute("selected-id",s),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:s}}))}}static get observedAttributes(){return["title","subtitle","description","size","collapsible","default-expanded","expanded","no-padding","full-width","full-height","overflow-visible","tabs","selected-tab-id","default-selected-tab-id"]}connectedCallback(){this.internalExpanded="false"!==this.getAttribute("default-expanded"),this.syncDefaultTab(),this.ensureStructure(),this.sync(),this.observer=new MutationObserver(()=>this.sync()),this.observer.observe(this,{childList:!0})}disconnectedCallback(){this.observer?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("default-expanded"!==e||this.hasAttribute("expanded")||(this.internalExpanded="false"!==this.getAttribute("default-expanded")),"default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),"selected-tab-id"===e){const e=this.getAttribute("selected-tab-id");e&&(this.internalTabId=e)}this.sync()}}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id")||"";this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){const e=this.getAttribute("selected-tab-id");return e&&this.internalTabId&&e!==this.internalTabId?this.internalTabId:e||this.internalTabId||this.tabsEl?.getAttribute("selected-id")||""}hasHeaderTabs(){return this.parseTabs().length>0&&!this.isCollapsible()}isCollapsible(){return this.hasAttribute("collapsible")}isExpanded(){return!this.isCollapsible()||(this.hasAttribute("expanded")?"false"!==this.getAttribute("expanded"):this.internalExpanded)}isUserNode(e){return!e.hasAttribute("data-wc-internal")}collectSlotted(e){const t=Array.from(this.querySelectorAll(`:scope > [slot="${e}"]`)).filter(this.isUserNode);if(t.length)return t;if("actions"===e&&this.actionsHostEl)return Array.from(this.actionsHostEl.children);if("footer"===e&&this.footerEl)return Array.from(this.footerEl.children);if("header"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__header-main");return e?Array.from(e.children):[]}if("description"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__description"),t=e?.firstElementChild;return t?[t]:[]}return[]}collectContentNodes(){const e=Array.from(this.children).filter(e=>{if(!this.isUserNode(e))return!1;const t=e.getAttribute("slot");return!t||"default"===t});return e.length?e:this.contentEl?Array.from(this.contentEl.children):[]}ensureStructure(){this.headerEl||(this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section__header",this.headerEl.setAttribute("data-wc-internal","")),this.bodyEl||(this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-section__body",this.bodyEl.id=this.contentId,this.bodyEl.setAttribute("data-wc-internal",""),this.bodyInnerEl=document.createElement("div"),this.bodyInnerEl.className="designbase-wc-section__body-inner",this.bodyInnerEl.setAttribute("data-wc-internal",""),this.bodyEl.append(this.bodyInnerEl)),this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-section__content",this.contentEl.setAttribute("data-wc-internal","")),this.footerEl||(this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-section__footer",this.footerEl.setAttribute("data-wc-internal","")),this.headerEl.isConnected||this.append(this.headerEl)}mountBody(){const e=this.collectContentNodes(),t=this.collectSlotted("footer");if(this.contentEl.replaceChildren(...e),this.footerEl.replaceChildren(...t),this.footerEl.hidden=0===t.length,this.isCollapsible())return this.bodyInnerEl.replaceChildren(this.contentEl,this.footerEl),void(this.bodyEl.isConnected||this.append(this.bodyEl));this.bodyEl?.remove(),this.contentEl.isConnected||this.append(this.contentEl),t.length?this.footerEl.isConnected||this.append(this.footerEl):this.footerEl.remove()}getChevronSize(){const e=this.getAttribute("size")||"m";return"s"===e?16:"l"===e?24:20}createTitleArea(){const e=this.getAttribute("title")?.trim()||"",t=this.getAttribute("subtitle")?.trim()||"",s=this.getAttribute("description")?.trim()||"",i=this.collectSlotted("description")[0];if(!(e||t||s||i))return null;const n=document.createElement("div");if(n.className="designbase-wc-section__title-area",e){const t=document.createElement("h2");t.className="designbase-wc-section__title",t.textContent=e,n.append(t)}if(t){const e=document.createElement("h3");e.className="designbase-wc-section__subtitle",e.textContent=t,n.append(e)}if(i){const e=document.createElement("p");e.className="designbase-wc-section__description",e.append(i),n.append(e)}else if(s){const e=document.createElement("p");e.className="designbase-wc-section__description",e.textContent=s,n.append(e)}return n}createChevron(){const t=document.createElement("span");return t.className="designbase-wc-section__chevron",t.setAttribute("aria-hidden","true"),t.append(e("chevron-down",this.getChevronSize())),t}renderHeader(){if(!this.headerEl)return;const e=this.collectSlotted("header")[0],t=this.collectSlotted("actions"),s=this.createTitleArea(),i=this.hasHeaderTabs(),n=Boolean(e||s||t.length);if(this.headerEl.replaceChildren(),this.headerEl.hidden=!n&&!i,this.headerEl.classList.toggle("designbase-wc-section__header--with-tabs",i),!n&&!i)return;if(this.isCollapsible()){if(e){const t=document.createElement("button");t.type="button",t.className="designbase-wc-section__header-trigger",t.setAttribute("aria-expanded",String(this.isExpanded())),t.setAttribute("aria-controls",this.contentId),t.addEventListener("click",this.handleToggle);const s=document.createElement("div");s.className="designbase-wc-section__header-main",s.append(e),t.append(s,this.createChevron()),this.headerEl.append(t)}else{const e=document.createElement("button");e.type="button",e.className="designbase-wc-section__header-trigger",e.setAttribute("aria-expanded",String(this.isExpanded())),e.setAttribute("aria-controls",this.contentId),e.addEventListener("click",this.handleToggle),s&&e.append(s),e.append(this.createChevron()),this.headerEl.append(e),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",this.actionsHostEl.addEventListener("click",e=>e.stopPropagation()),t.forEach(e=>this.actionsHostEl.append(e)),this.headerEl.append(this.actionsHostEl))}return}const appendHeaderMain=i=>{e?i.append(e):(s&&i.append(s),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",t.forEach(e=>this.actionsHostEl.append(e)),i.append(this.actionsHostEl)))};if(i){const e=document.createElement("div");e.className="designbase-wc-section__header-row",appendHeaderMain(e),this.headerEl.append(e);const t=document.createElement("div");return t.className="designbase-wc-section__header-tabs",this.tabsEl||(this.tabsEl=document.createElement("db-tabs"),this.tabsEl.setAttribute("size","m"),this.tabsEl.addEventListener("db-change",this.handleTabChange)),this.tabsEl.setAttribute("items",JSON.stringify(this.parseTabs())),this.tabsEl.setAttribute("selected-id",this.getActiveTabId()),t.append(this.tabsEl),void this.headerEl.append(t)}appendHeaderMain(this.headerEl)}syncHostClasses(){const e=this.getAttribute("size")||"m",t=s.includes(e)?e:"m",i=this.isExpanded();this.className=["designbase-wc-section",`designbase-wc-section--size-${t}`,this.hasAttribute("no-padding")&&"designbase-wc-section--no-padding",this.hasHeaderTabs()&&"designbase-wc-section--has-header-tabs",this.hasAttribute("full-width")&&"designbase-wc-section--full-width",this.hasAttribute("full-height")&&"designbase-wc-section--full-height",this.hasAttribute("overflow-visible")&&"designbase-wc-section--overflow-visible",this.isCollapsible()&&"designbase-wc-section--collapsible",this.isCollapsible()&&i&&"designbase-wc-section--expanded",this.isCollapsible()&&!i&&"designbase-wc-section--collapsed"].filter(Boolean).join(" ")}syncCollapsibleState(){if(!this.isCollapsible()||!this.bodyEl)return;const e=this.isExpanded();this.bodyEl.setAttribute("aria-hidden",String(!e));const t=this.headerEl?.querySelector(".designbase-wc-section__header-trigger");t?.setAttribute("aria-expanded",String(e))}sync(){this.ensureStructure(),this.syncHostClasses(),this.renderHeader(),this.mountBody(),this.syncCollapsibleState()}}customElements.get("db-section")||customElements.define("db-section",DbSection);export{DbSection};
+import"./db-tabs.js";import{createDbIcon as e}from"./db-icons.js";import{dbUid as t}from"../core/uid.js";import{SECTION_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbSection extends HTMLElement{constructor(){super(...arguments),this.contentId=t("db-section"),this.internalExpanded=!0,this.internalTabId="",this.handleToggle=()=>{if(!this.isCollapsible())return;const e=!this.isExpanded();this.hasAttribute("expanded")||(this.internalExpanded=e),this.dispatchEvent(new CustomEvent("db-expanded-change",{bubbles:!0,composed:!0,detail:{expanded:e}})),this.hasAttribute("expanded")||(this.syncHostClasses(),this.syncCollapsibleState())},this.handleTabChange=e=>{const t=e.detail,s=t?.id??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.internalTabId=s,this.tabsEl?.setAttribute("selected-id",s),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:s}}))}}static get observedAttributes(){return["title","subtitle","description","size","collapsible","default-expanded","expanded","no-padding","full-width","full-height","overflow-visible","tabs","selected-tab-id","default-selected-tab-id"]}connectedCallback(){this.internalExpanded="false"!==this.getAttribute("default-expanded"),this.syncDefaultTab(),this.ensureStructure(),this.sync(),this.observer=new MutationObserver(()=>this.sync()),this.observer.observe(this,{childList:!0})}disconnectedCallback(){this.observer?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("default-expanded"!==e||this.hasAttribute("expanded")||(this.internalExpanded="false"!==this.getAttribute("default-expanded")),"default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),"selected-tab-id"===e){const e=this.getAttribute("selected-tab-id");e&&(this.internalTabId=e)}this.sync()}}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id")||"";this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){const e=this.getAttribute("selected-tab-id");return e&&this.internalTabId&&e!==this.internalTabId?this.internalTabId:e||this.internalTabId||this.tabsEl?.getAttribute("selected-id")||""}hasHeaderTabs(){return this.parseTabs().length>0&&!this.isCollapsible()}isCollapsible(){return this.hasAttribute("collapsible")}isExpanded(){return!this.isCollapsible()||(this.hasAttribute("expanded")?"false"!==this.getAttribute("expanded"):this.internalExpanded)}isUserNode(e){return!e.hasAttribute("data-wc-internal")}collectSlotted(e){const t=Array.from(this.querySelectorAll(`:scope > [slot="${e}"]`)).filter(this.isUserNode);if(t.length)return t;if("actions"===e&&this.actionsHostEl)return Array.from(this.actionsHostEl.children);if("footer"===e&&this.footerEl)return Array.from(this.footerEl.children);if("header"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__header-main");return e?Array.from(e.children):[]}if("description"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__description"),t=e?.firstElementChild;return t?[t]:[]}return[]}collectContentNodes(){const e=Array.from(this.children).filter(e=>{if(!this.isUserNode(e))return!1;const t=e.getAttribute("slot");return!t||"default"===t});return e.length?e:this.contentEl?Array.from(this.contentEl.children):[]}ensureStructure(){this.headerEl||(this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section__header",this.headerEl.setAttribute("data-wc-internal","")),this.bodyEl||(this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-section__body",this.bodyEl.id=this.contentId,this.bodyEl.setAttribute("data-wc-internal",""),this.bodyInnerEl=document.createElement("div"),this.bodyInnerEl.className="designbase-wc-section__body-inner",this.bodyInnerEl.setAttribute("data-wc-internal",""),this.bodyEl.append(this.bodyInnerEl)),this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-section__content",this.contentEl.setAttribute("data-wc-internal","")),this.footerEl||(this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-section__footer",this.footerEl.setAttribute("data-wc-internal","")),this.headerEl.isConnected||this.append(this.headerEl)}mountBody(){const e=this.collectContentNodes(),t=this.collectSlotted("footer");if(this.contentEl.replaceChildren(...e),this.footerEl.replaceChildren(...t),this.footerEl.hidden=0===t.length,this.isCollapsible())return this.bodyInnerEl.replaceChildren(this.contentEl,this.footerEl),void(this.bodyEl.isConnected||this.append(this.bodyEl));this.bodyEl?.remove(),this.contentEl.isConnected||this.append(this.contentEl),t.length?this.footerEl.isConnected||this.append(this.footerEl):this.footerEl.remove()}getChevronSize(){const e=this.getAttribute("size")||"m";return"s"===e?16:"l"===e?24:20}createTitleArea(){const e=this.getAttribute("title")?.trim()||"",t=this.getAttribute("subtitle")?.trim()||"",s=this.getAttribute("description")?.trim()||"",i=this.collectSlotted("description")[0];if(!(e||t||s||i))return null;const n=document.createElement("div");if(n.className="designbase-wc-section__title-area",e){const t=document.createElement("h2");t.className="designbase-wc-section__title",t.textContent=e,n.append(t)}if(t){const e=document.createElement("h3");e.className="designbase-wc-section__subtitle",e.textContent=t,n.append(e)}if(i){const e=document.createElement("p");e.className="designbase-wc-section__description",e.append(i),n.append(e)}else if(s){const e=document.createElement("p");e.className="designbase-wc-section__description",e.textContent=s,n.append(e)}return n}createChevron(){const t=document.createElement("span");return t.className="designbase-wc-section__chevron",t.setAttribute("aria-hidden","true"),t.append(e("chevron-down",this.getChevronSize())),t}renderHeader(){if(!this.headerEl)return;const e=this.collectSlotted("header")[0],t=this.collectSlotted("actions"),s=this.createTitleArea(),i=this.hasHeaderTabs(),n=Boolean(e||s||t.length);if(this.headerEl.replaceChildren(),this.headerEl.hidden=!n&&!i,this.headerEl.classList.toggle("designbase-wc-section__header--with-tabs",i),!n&&!i)return;if(this.isCollapsible()){if(e){const t=document.createElement("button");t.type="button",t.className="designbase-wc-section__header-trigger",t.setAttribute("aria-expanded",String(this.isExpanded())),t.setAttribute("aria-controls",this.contentId),t.addEventListener("click",this.handleToggle);const s=document.createElement("div");s.className="designbase-wc-section__header-main",s.append(e),t.append(s,this.createChevron()),this.headerEl.append(t)}else{const e=document.createElement("button");e.type="button",e.className="designbase-wc-section__header-trigger",e.setAttribute("aria-expanded",String(this.isExpanded())),e.setAttribute("aria-controls",this.contentId),e.addEventListener("click",this.handleToggle),s&&e.append(s),e.append(this.createChevron()),this.headerEl.append(e),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",this.actionsHostEl.addEventListener("click",e=>e.stopPropagation()),t.forEach(e=>this.actionsHostEl.append(e)),this.headerEl.append(this.actionsHostEl))}return}const appendHeaderMain=i=>{e?i.append(e):(s&&i.append(s),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",t.forEach(e=>this.actionsHostEl.append(e)),i.append(this.actionsHostEl)))};if(i){const e=document.createElement("div");e.className="designbase-wc-section__header-row",appendHeaderMain(e),this.headerEl.append(e);const t=document.createElement("div");return t.className="designbase-wc-section__header-tabs",this.tabsEl||(this.tabsEl=document.createElement("db-tabs"),this.tabsEl.setAttribute("size","m"),this.tabsEl.addEventListener("db-change",this.handleTabChange)),this.tabsEl.setAttribute("items",JSON.stringify(this.parseTabs())),this.tabsEl.setAttribute("selected-id",this.getActiveTabId()),t.append(this.tabsEl),void this.headerEl.append(t)}appendHeaderMain(this.headerEl)}syncHostClasses(){const e=this.getAttribute("size")||"m",t=s.includes(e)?e:"m",i=this.isExpanded();this.className=["designbase-wc-section",`designbase-wc-section--size-${t}`,this.hasAttribute("no-padding")&&"designbase-wc-section--no-padding",this.hasHeaderTabs()&&"designbase-wc-section--has-header-tabs",this.hasAttribute("full-width")&&"designbase-wc-section--full-width",this.hasAttribute("full-height")&&"designbase-wc-section--full-height",this.hasAttribute("overflow-visible")&&"designbase-wc-section--overflow-visible",this.isCollapsible()&&"designbase-wc-section--collapsible",this.isCollapsible()&&i&&"designbase-wc-section--expanded",this.isCollapsible()&&!i&&"designbase-wc-section--collapsed"].filter(Boolean).join(" ")}syncCollapsibleState(){if(!this.isCollapsible()||!this.bodyEl)return;const e=this.isExpanded();this.bodyEl.setAttribute("aria-hidden",String(!e));const t=this.headerEl?.querySelector(".designbase-wc-section__header-trigger");t?.setAttribute("aria-expanded",String(e))}sync(){this.ensureStructure(),this.syncHostClasses(),this.renderHeader(),this.mountBody(),this.syncCollapsibleState()}}customElements.get("db-section")||customElements.define("db-section",DbSection);export{DbSection};

package/dist/esm/components/db-share.d.ts

@@ -1,3 +1,8 @@
+import './db-button.js';
+import './db-input.js';
+import './db-dropdown.js';
+import './db-modal.js';
+
 type DbSharePlatform = 'facebook' | 'x' | 'instagram' | 'linkedin' | 'pinterest' | 'whatsapp' | 'telegram' | 'email' | 'link' | 'qr';
 type DbShareVariant = 'button' | 'dropdown' | 'modal' | 'inline';
 declare class DbShare extends HTMLElement {