@designbasekorea/ui-wc 0.3.0 → 0.5.0

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],a=["low","medium","high","urgent"],n={low:"낮음",medium:"보통",high:"높음",urgent:"긴급"};class DbKanban extends HTMLElement{constructor(){super(...arguments),this.dragState=null,this.dropTarget=null,this.handleBoardDragOver=e=>{if(!this.dragState)return;const t=e.target;t instanceof Element&&(t.closest(".designbase-wc-kanban__card")||t.closest(".designbase-wc-kanban__column-body"))||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"))},this.handleBoardDrop=e=>{if(!this.dragState)return;const t=e.target;t instanceof Element&&(t.closest(".designbase-wc-kanban__card")||t.closest(".designbase-wc-kanban__column-body"))||(e.preventDefault(),this.commitDrop())}}static get observedAttributes(){return["columns","size","disabled","draggable","show-column-count","show-add-card","allow-cross-column","full-width","empty-column-text"]}get columns(){try{const e=JSON.parse(this.getAttribute("columns")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.setAttribute("role","region"),this.setAttribute("aria-label","칸반 보드"),this.addEventListener("dragover",this.handleBoardDragOver),this.addEventListener("drop",this.handleBoardDrop),this.render()}disconnectedCallback(){this.removeEventListener("dragover",this.handleBoardDragOver),this.removeEventListener("drop",this.handleBoardDrop)}attributeChangedCallback(){this.isConnected&&this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const a=this.getAttribute(e);return""===a||"true"===a}getOption(e,t,a){const n=this.getAttribute(e);return n&&t.includes(n)?n:a}emitChange(e){this.columns=e,this.dispatchEvent(new CustomEvent("db-change",{detail:{columns:e},bubbles:!0,composed:!0}))}emitCardMove(e,t){this.columns=e,this.dispatchEvent(new CustomEvent("db-card-move",{detail:{...t,columns:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{columns:e},bubbles:!0,composed:!0}))}findCardLocation(e){for(const t of this.columns){const a=t.cards.findIndex(t=>t.id===e);if(a>=0)return{columnId:t.id,index:a}}return null}getAdjustedDropIndex(e,t){if(!this.dragState)return-1;const{columnId:a,cardIndex:n}=this.dragState;return a===e&&t>n?t-1:t}isValidDropTarget(e=this.dropTarget){if(!this.dragState||!e)return!1;const t=this.getAdjustedDropIndex(e.columnId,e.index);return!(t<0)&&(this.dragState.columnId!==e.columnId||t!==this.dragState.cardIndex)}moveCard(e,t,a){const n=this.findCardLocation(e);if(!n)return;const s=this.columns.map(e=>({...e,cards:[...e.cards]})),d=s.find(e=>e.id===n.columnId),r=s.find(e=>e.id===t);if(!d||!r)return;const[i]=d.cards.splice(n.index,1);if(!i)return;const o=this.getAdjustedDropIndex(t,a);r.cards.splice(Math.max(0,o),0,i),this.emitCardMove(s,{cardId:e,fromColumnId:n.columnId,toColumnId:t,fromIndex:n.index,toIndex:Math.max(0,o)})}setDropTarget(e){const t=e&&this.isValidDropTarget(e)?e:null;(this.dropTarget?`${this.dropTarget.columnId}:${this.dropTarget.index}`:"")!==(t?`${t.columnId}:${t.index}`:"")&&(this.dropTarget=t,this.updateDragClasses())}resetDragState(){this.dragState=null,this.dropTarget=null,this.classList.remove("designbase-wc-kanban--dragging"),this.updateDragClasses()}updateDragClasses(){const e=!!this.dragState;this.classList.toggle("designbase-wc-kanban--dragging",e),this.querySelectorAll(".designbase-wc-kanban__card").forEach(t=>{const a=t.dataset.cardId||"",n=e&&this.dragState?.cardId===a;t.classList.toggle("designbase-wc-kanban__card--dragged",n)}),this.querySelectorAll(".designbase-wc-kanban__column-body").forEach(e=>{const t=e.dataset.columnId||"",a=!!this.dropTarget&&this.dropTarget.columnId===t;e.classList.toggle("designbase-wc-kanban__column-body--drag-over",a)}),this.querySelectorAll(".designbase-wc-kanban__card").forEach(e=>{const t=e.dataset.columnId||"",a=Number(e.dataset.cardIndex||-1),n=!!this.dropTarget&&this.dropTarget.columnId===t&&this.dropTarget.index===a,s=this.columns.find(e=>e.id===t),d=!!this.dropTarget&&this.dropTarget.columnId===t&&s&&this.dropTarget.index===s.cards.length&&a===s.cards.length-1;e.classList.toggle("designbase-wc-kanban__card--drop-before",n),e.classList.toggle("designbase-wc-kanban__card--drop-after",d)})}getDropIndexFromPointer(e,t,a){const n=t.getBoundingClientRect();return e.clientY-n.top<n.height/2?a:a+1}getDropIndexFromColumnPointer(e,t){const a=Array.from(this.querySelectorAll(`.designbase-wc-kanban__column-body[data-column-id="${t}"] > .designbase-wc-kanban__card`));if(0===a.length)return 0;for(let t=0;t<a.length;t+=1){const n=a[t].getBoundingClientRect();if(e.clientY<n.top+n.height/2)return t}return a.length}commitDrop(){if(!this.dragState||!this.dropTarget||!this.isValidDropTarget())return void this.resetDragState();const{cardId:e}=this.dragState,{columnId:t,index:a}=this.dropTarget;this.resetDragState(),this.moveCard(e,t,a),this.render()}formatDueDate(e){const t=new Date(e);return Number.isNaN(t.getTime())?e:t.toLocaleDateString("ko-KR",{month:"short",day:"numeric"})}getInitials(e){return e.initials?e.initials:e.name.split(/\s+/).map(e=>e.charAt(0)).join("").slice(0,2).toUpperCase()}createTag(e){const t=document.createElement("span");return t.className=["designbase-wc-kanban__tag",e.variant&&`designbase-wc-kanban__tag--${e.variant}`].filter(Boolean).join(" "),t.textContent=e.label,t}createPriorityBadge(e){const t=document.createElement("span");return t.className=`designbase-wc-kanban__priority designbase-wc-kanban__priority--${e}`,t.textContent=n[e],t.setAttribute("aria-label",`우선순위 ${n[e]}`),t}createAssignee(e){const t=document.createElement("div");if(t.className="designbase-wc-kanban__assignee",t.title=e.name,e.avatar){const a=document.createElement("img");a.className="designbase-wc-kanban__assignee-avatar",a.src=e.avatar,a.alt=e.name,t.append(a)}else{const a=document.createElement("span");a.className="designbase-wc-kanban__assignee-initials",a.textContent=this.getInitials(e),t.append(a)}const a=document.createElement("span");return a.className="designbase-wc-kanban__assignee-name",a.textContent=e.name,t.append(a),t}bindCardDrag(e,t,a,n,s,d){e.draggable=s&&!d&&!t.disabled,e.addEventListener("dragstart",e=>{!s||d||t.disabled||(this.dragState={cardId:t.id,columnId:a,cardIndex:n},this.dropTarget=null,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t.id)),this.classList.add("designbase-wc-kanban--dragging"),this.updateDragClasses())}),e.addEventListener("dragover",t=>{if(!this.dragState)return;t.preventDefault(),t.stopPropagation(),t.dataTransfer&&(t.dataTransfer.dropEffect="move");if(!this.getBool("allow-cross-column",!0)&&this.dragState.columnId!==a)return;const s=this.getDropIndexFromPointer(t,e,n);this.setDropTarget({columnId:a,index:s})}),e.addEventListener("dragleave",t=>{const a=e.getBoundingClientRect(),n=t.clientX-a.left,s=t.clientY-a.top;(n<0||n>a.width||s<0||s>a.height)&&this.setDropTarget(null)}),e.addEventListener("drop",e=>{e.preventDefault(),e.stopPropagation(),this.commitDrop()}),e.addEventListener("dragend",()=>{this.resetDragState(),this.render()})}createCard(t,n,s,d){const r=document.createElement("article");r.className=["designbase-wc-kanban__card",t.disabled&&"designbase-wc-kanban__card--disabled",t.priority&&`designbase-wc-kanban__card--priority-${t.priority}`].filter(Boolean).join(" "),r.dataset.cardId=t.id,r.dataset.columnId=n,r.dataset.cardIndex=String(s),r.setAttribute("role","listitem"),r.tabIndex=t.disabled?-1:0;const i=document.createElement("div");i.className="designbase-wc-kanban__card-title-row";const o=document.createElement("h4");if(o.className="designbase-wc-kanban__card-title",o.textContent=t.title,i.append(o),t.priority&&a.includes(t.priority)&&i.append(this.createPriorityBadge(t.priority)),r.append(i),t.description){const e=document.createElement("p");e.className="designbase-wc-kanban__card-description",e.textContent=t.description,r.append(e)}if(t.tags?.length){const e=document.createElement("div");e.className="designbase-wc-kanban__card-tags",t.tags.forEach(t=>e.append(this.createTag(t))),r.append(e)}const c=document.createElement("div");if(c.className="designbase-wc-kanban__card-footer",t.assignee&&c.append(this.createAssignee(t.assignee)),t.dueDate){const a=document.createElement("span");a.className="designbase-wc-kanban__due-date",a.append(e("calendar","l"===d.size?12:"m"===d.size?11:10));const n=document.createElement("span");n.textContent=this.formatDueDate(t.dueDate),a.append(n),c.append(a)}return c.childNodes.length>0&&r.append(c),r.addEventListener("click",e=>{d.disabled||this.dispatchEvent(new CustomEvent("db-card-click",{detail:{card:t,columnId:n},bubbles:!0,composed:!0}))}),r.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.dispatchEvent(new CustomEvent("db-card-click",{detail:{card:t,columnId:n},bubbles:!0,composed:!0})))}),this.bindCardDrag(r,t,n,s,d.draggable,d.disabled),r}createColumn(t,a){const n=document.createElement("section"),s=void 0!==t.limit&&t.cards.length>t.limit;n.className=["designbase-wc-kanban__column",s&&"designbase-wc-kanban__column--over-limit"].filter(Boolean).join(" "),n.dataset.columnId=t.id,n.setAttribute("role","group"),n.setAttribute("aria-label",t.title);const d=document.createElement("header");d.className="designbase-wc-kanban__column-header";const r=document.createElement("div");if(r.className="designbase-wc-kanban__column-title-wrap",t.color){const e=document.createElement("span");e.className="designbase-wc-kanban__column-color",e.style.backgroundColor=t.color,e.setAttribute("aria-hidden","true"),r.append(e)}const i=document.createElement("h3");if(i.className="designbase-wc-kanban__column-title",i.textContent=t.title,r.append(i),d.append(r),a.showColumnCount){const e=document.createElement("span");e.className="designbase-wc-kanban__column-count",e.textContent=void 0!==t.limit?`${t.cards.length}/${t.limit}`:String(t.cards.length),d.append(e)}n.append(d);const o=document.createElement("div");if(o.className="designbase-wc-kanban__column-body",o.dataset.columnId=t.id,o.setAttribute("role","list"),o.addEventListener("dragover",e=>{if(!this.dragState)return;e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect="move");if(!this.getBool("allow-cross-column",!0)&&this.dragState.columnId!==t.id)return;const a=this.getDropIndexFromColumnPointer(e,t.id);this.setDropTarget({columnId:t.id,index:a})}),o.addEventListener("drop",e=>{e.preventDefault(),e.stopPropagation(),this.commitDrop()}),0===t.cards.length){const e=document.createElement("div");e.className="designbase-wc-kanban__column-empty",e.textContent=a.emptyColumnText,o.append(e)}else t.cards.forEach((e,n)=>{o.append(this.createCard(e,t.id,n,{size:a.size,draggable:a.draggable,disabled:a.disabled}))});if(n.append(o),a.showAddCard&&!a.disabled){const s=document.createElement("button");s.type="button",s.className="designbase-wc-kanban__add-card",s.append(e("plus","l"===a.size?14:"m"===a.size?12:10));const d=document.createElement("span");d.textContent="카드 추가",s.append(d),s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-add-card",{detail:{columnId:t.id},bubbles:!0,composed:!0}))}),n.append(s)}return n}render(){const e=this.getOption("size",t,"s"),a=this.getBool("disabled"),n=this.getBool("draggable",!0),s=this.getBool("show-column-count",!0),d=this.getBool("show-add-card"),r=this.getAttribute("empty-column-text")||"카드가 없습니다";this.className=["designbase-wc-kanban",`designbase-wc-kanban--${e}`,this.getBool("full-width")&&"designbase-wc-kanban--full-width",a&&"designbase-wc-kanban--disabled",this.classList.contains("designbase-wc-kanban--dragging")&&"designbase-wc-kanban--dragging"].filter(Boolean).join(" ");const i=document.createElement("div");i.className="designbase-wc-kanban__board";const o=document.createDocumentFragment();this.columns.forEach(t=>{o.append(this.createColumn(t,{size:e,draggable:n,showColumnCount:s,showAddCard:d,emptyColumnText:r,disabled:a}))}),i.append(o),this.replaceChildren(i),this.updateDragClasses()}}customElements.get("db-kanban")||customElements.define("db-kanban",DbKanban);export{DbKanban};

package/dist/esm/components/db-menu-item.d.ts

@@ -16,9 +16,10 @@ declare class DbMenuItem extends HTMLElement {
     get expanded(): boolean;
     set expanded(value: boolean);
     connectedCallback(): void;
-    attributeChangedCallback(): void;
     private iconSize;
     private render;
+    attributeChangedCallback(name: string): void;
+    private syncExpandedState;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/esm/components/db-menu-item.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";class DbMenuItem extends HTMLElement{static get observedAttributes(){return["label","href","icon","active","disabled","badge","badge-color","size","variant","type","menu-style","expanded","expandable","sub-items","depth"]}get subItems(){try{return JSON.parse(this.getAttribute("sub-items")||"[]")}catch{return[]}}set subItems(e){this.setAttribute("sub-items","string"==typeof e?e:JSON.stringify(e))}get expanded(){return this.hasAttribute("expanded")}set expanded(e){this.toggleAttribute("expanded",e)}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}iconSize(e){return"s"===e?16:"l"===e?24:20}render(){const t=this.getAttribute("label")||"",i=this.getAttribute("href")||"",n=this.getAttribute("icon"),s=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",d=this.getAttribute("type")||"block",b=this.getAttribute("menu-style")||"accordion",c=Number(this.getAttribute("depth")||0),r=this.hasAttribute("active"),m=this.hasAttribute("disabled"),u=this.getAttribute("badge")||"",l=this.getAttribute("badge-color")||"primary",o=this.subItems,h=o.length>0,g=this.hasAttribute("expandable")||h,p=this.expanded,A=this.iconSize(s);this.className=["designbase-wc-menu-item",`designbase-wc-menu-item--${d}`,`designbase-wc-menu-item--${s}`,`designbase-wc-menu-item--${a}`,`designbase-wc-menu-item--${b}`,`designbase-wc-menu-item--depth-${c}`,r&&"designbase-wc-menu-item--active",m&&"designbase-wc-menu-item--disabled",g&&"designbase-wc-menu-item--expandable",p&&"designbase-wc-menu-item--expanded",h&&"designbase-wc-menu-item--with-children",u&&"designbase-wc-menu-item--with-badge",n&&"designbase-wc-menu-item--with-icon"].filter(Boolean).join(" "),this.replaceChildren();const w=document.createElement("div");if(w.className=["designbase-wc-menu-item__content","designbase-wc-menu-item__content--clickable"].join(" "),n){const t=document.createElement("div");t.className=["designbase-wc-menu-item__icon",`designbase-wc-menu-item__icon--${a}`,r&&"designbase-wc-menu-item__icon--active",m&&"designbase-wc-menu-item__icon--disabled"].filter(Boolean).join(" "),t.append(e(n,A)),w.append(t)}const v=document.createElement("span");if(v.className="designbase-wc-menu-item__label",v.textContent=t,w.append(v),u){const e=document.createElement("db-badge");e.setAttribute("size","s"),e.setAttribute("variant",l),e.setAttribute("badge-style","number"),e.setAttribute("count",u),w.append(e)}if(h){const t=document.createElement("div");t.className="designbase-wc-menu-item__expand-icon",t.append(e(p?"chevron-up":"chevron-down",16)),w.append(t)}if(w.addEventListener("click",e=>{m||(h&&g?(e.preventDefault(),this.expanded=!this.expanded):i&&(window.location.href=i),this.dispatchEvent(new CustomEvent("db-click",{detail:{label:t,href:i,expanded:this.expanded},bubbles:!0,composed:!0})))}),this.append(w),h&&p){const e=document.createElement("div");e.className=`designbase-wc-menu-item__children designbase-wc-menu-item__children--${b}`,o.forEach(t=>{const i=document.createElement("db-menu-item");i.setAttribute("label",t.label),i.setAttribute("type","block"),i.setAttribute("menu-style",b),i.setAttribute("size",s),i.setAttribute("depth",String(c+1)),t.href&&i.setAttribute("href",t.href),t.icon&&i.setAttribute("icon",t.icon),t.active&&i.setAttribute("active",""),t.disabled&&i.setAttribute("disabled",""),void 0!==t.badge&&i.setAttribute("badge",String(t.badge)),t.badgeColor&&i.setAttribute("badge-color",t.badgeColor),t.variant&&i.setAttribute("variant",t.variant),i.addEventListener("db-click",e=>{e.stopPropagation(),t.disabled||this.dispatchEvent(new CustomEvent("db-child-click",{detail:{child:t},bubbles:!0,composed:!0}))}),e.append(i)}),this.append(e)}}}customElements.get("db-menu-item")||customElements.define("db-menu-item",DbMenuItem);export{DbMenuItem};
+import{createDbIcon as e}from"./db-icons.js";class DbMenuItem extends HTMLElement{static get observedAttributes(){return["label","href","icon","active","disabled","badge","badge-color","size","variant","type","menu-style","expanded","expandable","sub-items","depth"]}get subItems(){try{return JSON.parse(this.getAttribute("sub-items")||"[]")}catch{return[]}}set subItems(e){this.setAttribute("sub-items","string"==typeof e?e:JSON.stringify(e))}get expanded(){return this.hasAttribute("expanded")}set expanded(e){this.toggleAttribute("expanded",e)}connectedCallback(){this.render()}iconSize(e){return"s"===e?16:"l"===e?24:16}render(){const t=this.getAttribute("label")||"",i=this.getAttribute("href")||"",n=this.getAttribute("icon"),s=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",d=this.getAttribute("type")||"block",c=this.getAttribute("menu-style")||"accordion",r=Number(this.getAttribute("depth")||0),b=this.hasAttribute("active"),u=this.hasAttribute("disabled"),m=this.getAttribute("badge")||"",o=this.getAttribute("badge-color")||"primary",l=this.subItems,h=l.length>0,g=this.hasAttribute("expandable")||h,p=this.expanded,A=this.iconSize(s),w="accordion"===c&&h;this.className=["designbase-wc-menu-item",`designbase-wc-menu-item--${d}`,`designbase-wc-menu-item--${s}`,`designbase-wc-menu-item--${a}`,`designbase-wc-menu-item--${c}`,`designbase-wc-menu-item--depth-${r}`,b&&"designbase-wc-menu-item--active",u&&"designbase-wc-menu-item--disabled",g&&"designbase-wc-menu-item--expandable",p&&"designbase-wc-menu-item--expanded",h&&"designbase-wc-menu-item--with-children",m&&"designbase-wc-menu-item--with-badge",n&&"designbase-wc-menu-item--with-icon"].filter(Boolean).join(" "),this.replaceChildren();const v=document.createElement("div");if(v.className=["designbase-wc-menu-item__content","designbase-wc-menu-item__content--clickable"].join(" "),n){const t=document.createElement("div");t.className=["designbase-wc-menu-item__icon",`designbase-wc-menu-item__icon--${a}`,b&&"designbase-wc-menu-item__icon--active",u&&"designbase-wc-menu-item__icon--disabled"].filter(Boolean).join(" "),t.append(e(n,A)),v.append(t)}const x=document.createElement("span");if(x.className="designbase-wc-menu-item__label",x.textContent=t,v.append(x),m){const e=document.createElement("db-badge");e.setAttribute("size","s"),e.setAttribute("variant",o),e.setAttribute("badge-style","number"),e.setAttribute("count",m),v.append(e)}if(h){const t=document.createElement("div");t.className="designbase-wc-menu-item__expand-icon",t.append(e(p?"chevron-up":"chevron-down",16)),v.append(t)}if(v.addEventListener("click",e=>{u||(h&&g?(e.preventDefault(),this.expanded=!this.expanded):i&&(window.location.href=i),this.dispatchEvent(new CustomEvent("db-click",{detail:{label:t,href:i,expanded:this.expanded},bubbles:!0,composed:!0})))}),this.append(v),h&&(p||w)){const e=document.createElement("div");e.className=`designbase-wc-menu-item__children designbase-wc-menu-item__children--${c}`,w&&e.setAttribute("aria-hidden",p?"false":"true"),l.forEach(t=>{const i=document.createElement("db-menu-item");i.setAttribute("label",t.label),i.setAttribute("type","block"),i.setAttribute("menu-style",c),i.setAttribute("size",s),i.setAttribute("depth",String(r+1)),t.href&&i.setAttribute("href",t.href),t.icon&&i.setAttribute("icon",t.icon),t.active&&i.setAttribute("active",""),t.disabled&&i.setAttribute("disabled",""),void 0!==t.badge&&i.setAttribute("badge",String(t.badge)),t.badgeColor&&i.setAttribute("badge-color",t.badgeColor),t.variant&&i.setAttribute("variant",t.variant),i.addEventListener("db-click",e=>{e.stopPropagation(),t.disabled||this.dispatchEvent(new CustomEvent("db-child-click",{detail:{child:t},bubbles:!0,composed:!0}))}),e.append(i)}),this.append(e)}}attributeChangedCallback(e){this.isConnected&&("expanded"!==e||"accordion"!==this.getAttribute("menu-style")?this.render():this.syncExpandedState())}syncExpandedState(){const t=this.expanded;this.classList.toggle("designbase-wc-menu-item--expanded",t);const i=this.querySelector(".designbase-wc-menu-item__expand-icon");i&&i.replaceChildren(e(t?"chevron-up":"chevron-down",16));const n=this.querySelector(".designbase-wc-menu-item__children--accordion");n?n.setAttribute("aria-hidden",t?"false":"true"):t&&this.subItems.length&&this.render()}}customElements.get("db-menu-item")||customElements.define("db-menu-item",DbMenuItem);export{DbMenuItem};

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

@@ -9,8 +9,6 @@ interface DownloadStore {
 declare class DbSectionAppDownload extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
-    private sectionEl?;
-    private wrapEl?;
     private innerEl?;
     private titleEl?;
     private descriptionEl?;

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

@@ -1 +1 @@
-const t="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.sectionEl=document.createElement("db-section"),this.sectionEl.setAttribute("no-padding",""),this.sectionEl.setAttribute("data-wc-internal",""),this.wrapEl=document.createElement("div"),this.wrapEl.className=t,this.innerEl=document.createElement("div"),this.innerEl.className=`${t}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${t}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${t}__description`,this.badgesEl=document.createElement("div"),this.badgesEl.className=`${t}__badges`,this.innerEl.append(this.titleEl,this.descriptionEl,this.badgesEl),this.wrapEl.append(this.innerEl),this.sectionEl.append(this.wrapEl),this.append(this.sectionEl)}updateUI(){const e=this.getAttribute("title")||"지금 바로 시작하세요",i=this.getAttribute("description")||"앱을 다운로드하고 바로 이용해 보세요.",s=this.getAttribute("align")||"center",l=this.getAttribute("size")||"l",r=this.parseStores(),n=[t,`${t}--${s}`].join(" ");this.className=t,this.wrapEl&&(this.wrapEl.className=n),this.sectionEl&&(this.sectionEl.setAttribute("size",l),this.hasAttribute("full-width")?this.sectionEl.setAttribute("full-width",""):this.sectionEl.removeAttribute("full-width"),this.hasAttribute("full-height")?this.sectionEl.setAttribute("full-height",""):this.sectionEl.removeAttribute("full-height"),this.hasAttribute("overflow-visible")?this.sectionEl.setAttribute("overflow-visible",""):this.sectionEl.removeAttribute("overflow-visible")),this.titleEl&&(this.titleEl.textContent=e),this.descriptionEl&&(this.descriptionEl.textContent=i,this.descriptionEl.hidden=!i),this.badgesEl&&(this.badgesEl.replaceChildren(),r.forEach(t=>{const e=document.createElement("db-app-badge");e.setAttribute("store",t.store),e.setAttribute("size",t.size||"m"),e.setAttribute("theme",t.theme||"dark"),t.href&&e.setAttribute("href",t.href),t.label&&e.setAttribute("label",t.label),t.storeName&&e.setAttribute("store-name",t.storeName),this.badgesEl.append(e)}))}}customElements.get("db-section-app-download")||customElements.define("db-section-app-download",DbSectionAppDownload);export{DbSectionAppDownload};
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="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=`${e}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${e}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${e}__description`,this.badgesEl=document.createElement("div"),this.badgesEl.className=`${e}__badges`,this.innerEl.append(this.titleEl,this.descriptionEl,this.badgesEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("title")||"지금 바로 시작하세요",i=this.getAttribute("description")||"앱을 다운로드하고 바로 이용해 보세요.",r=this.getAttribute("align")||"center",l=this.parseStores();this.className=[e,`${e}--${r}`].join(" "),t(this,e),this.titleEl&&(this.titleEl.textContent=s),this.descriptionEl&&(this.descriptionEl.textContent=i,this.descriptionEl.hidden=!i),this.badgesEl&&(this.badgesEl.replaceChildren(),l.forEach(t=>{const e=document.createElement("db-app-badge");e.setAttribute("store",t.store),e.setAttribute("size",t.size||"m"),e.setAttribute("theme",t.theme||"dark"),t.href&&e.setAttribute("href",t.href),t.label&&e.setAttribute("label",t.label),t.storeName&&e.setAttribute("store-name",t.storeName),this.badgesEl.append(e)}))}}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,9 +1,7 @@
 declare class DbSectionContact extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
-    private sectionEl?;
-    private wrapEl?;
-    private contactWrapEl?;
+    private innerEl?;
     private titleEl?;
     private descriptionEl?;
     private actionEl?;

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

@@ -1 +1 @@
-const t="designbase-wc-section-contact",i="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:i,href:`mailto:${i}`}}build(){this.sectionEl=document.createElement("db-section"),this.sectionEl.setAttribute("no-padding",""),this.sectionEl.setAttribute("data-wc-internal",""),this.wrapEl=document.createElement("div"),this.wrapEl.className=t,this.contactWrapEl=document.createElement("div"),this.contactWrapEl.className=`${t}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${t}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${t}__description`,this.actionEl=document.createElement("db-button"),this.actionEl.className=`${t}__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.contactWrapEl.append(this.titleEl,this.descriptionEl,this.actionEl),this.wrapEl.append(this.contactWrapEl),this.sectionEl.append(this.wrapEl),this.append(this.sectionEl)}updateUI(){const i=this.getAttribute("title")||"문의하기",e=this.getAttribute("description")||"궁금한 점이 있으시면 언제든지 연락주세요.",s=this.getAttribute("align")||"center",n=this.getAttribute("content-padding")||"l",l=this.getAttribute("size")||"l",c=!this.hasAttribute("accent")||"false"!==this.getAttribute("accent"),a=this.parseAction(),o=[t,`${t}--${s}`,`${t}--padding-${n}`,c&&`${t}--accent`].filter(Boolean).join(" ");this.className=t,this.wrapEl&&(this.wrapEl.className=o),this.contactWrapEl&&(this.contactWrapEl.className=`${t}__inner`),this.sectionEl&&(this.sectionEl.setAttribute("size",l),this.hasAttribute("full-width")?this.sectionEl.setAttribute("full-width",""):this.sectionEl.removeAttribute("full-width"),this.hasAttribute("full-height")?this.sectionEl.setAttribute("full-height",""):this.sectionEl.removeAttribute("full-height"),this.hasAttribute("overflow-visible")?this.sectionEl.setAttribute("overflow-visible",""):this.sectionEl.removeAttribute("overflow-visible")),this.titleEl&&(this.titleEl.textContent=i),this.descriptionEl&&(this.descriptionEl.textContent=e,this.descriptionEl.hidden=!e),this.actionEl&&(this.actionEl.textContent=a.label,a.href?this.actionEl.setAttribute("href",a.href):this.actionEl.removeAttribute("href"))}}customElements.get("db-section-contact")||customElements.define("db-section-contact",DbSectionContact);export{DbSectionContact};
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const i="designbase-wc-section-contact",e="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:e,href:`mailto:${e}`}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.titleEl=document.createElement("h2"),this.titleEl.className=`${i}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${i}__description`,this.actionEl=document.createElement("db-button"),this.actionEl.className=`${i}__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 e=this.getAttribute("title")||"문의하기",s=this.getAttribute("description")||"궁금한 점이 있으시면 언제든지 연락주세요.",n=this.getAttribute("align")||"center",c=this.getAttribute("content-padding")||"l",a=!this.hasAttribute("accent")||"false"!==this.getAttribute("accent"),l=this.parseAction();this.className=[i,`${i}--${n}`,`${i}--padding-${c}`,a&&`${i}--accent`].filter(Boolean).join(" "),t(this,i),this.titleEl&&(this.titleEl.textContent=e),this.descriptionEl&&(this.descriptionEl.textContent=s,this.descriptionEl.hidden=!s),this.actionEl&&(this.actionEl.textContent=l.label,l.href?this.actionEl.setAttribute("href",l.href):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

@@ -0,0 +1,24 @@
+declare class DbSectionCta extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private wrapEl?;
+    private headerEl?;
+    private badgeEl?;
+    private headlineEl?;
+    private subtitleEl?;
+    private descriptionEl?;
+    private actionsEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseBadge;
+    private parseButtons;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-cta': DbSectionCta;
+    }
+}
+
+export { DbSectionCta };

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

@@ -0,0 +1 @@
+import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="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=`${e}__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=`${e}__actions`,this.wrapEl.append(this.headerEl,this.actionsEl),this.append(this.wrapEl)}updateUI(){const i=this.getAttribute("headline")||this.getAttribute("title")||"",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",n=this.getAttribute("variant")||"default",l=this.getAttribute("theme")||"gradient",h=this.getAttribute("align")||"center",d=this.getAttribute("content-padding")||"l",r=this.parseBadge(),c=this.parseButtons();this.className=[e,`${e}--${n}`,`${e}--${l}`,`${e}--${h}`,`${e}--padding-${d}`].join(" "),t(this,e),this.headerEl&&(this.headerEl.className=["designbase-wc-section-block-header",`designbase-wc-section-block-header--${h}`,`${e}__header`].join(" ")),this.badgeEl&&(r?.text?(this.badgeEl.hidden=!1,this.badgeEl.style.display="",this.badgeEl.setAttribute("variant",r.variant||"primary"),this.badgeEl.setAttribute("badge-style",r.style||"text"),this.badgeEl.setAttribute("size",r.size||"m"),this.badgeEl.textContent=r.text):(this.badgeEl.hidden=!0,this.badgeEl.style.display="none",this.badgeEl.textContent="")),this.headlineEl&&(this.headlineEl.textContent=i,this.headlineEl.hidden=!i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=a,this.descriptionEl.hidden=!a),this.actionsEl&&(this.actionsEl.replaceChildren(),c.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===c.length)}}customElements.get("db-section-cta")||customElements.define("db-section-cta",DbSectionCta);export{DbSectionCta};

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

@@ -0,0 +1,20 @@
+declare class DbSectionFaq extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private accordionEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseItems;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-faq': DbSectionFaq;
+    }
+}
+
+export { DbSectionFaq };

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

@@ -0,0 +1 @@
+import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as e}from"./marketing-block-host-utils.js";const i="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=`${i}__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=`${i}__accordion`,this.innerEl.append(this.headerEl,this.accordionEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("headline")||"자주 묻는 질문",n=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",l=this.getAttribute("content-padding")||"l",r=this.getAttribute("align")||"center",c=this.hasAttribute("allow-multiple"),d=this.parseBadge(),o=this.parseItems();if(this.className=[i,`${i}--padding-${l}`].join(" "),e(this,i),this.headerEl&&t(this.headerEl,{headline:s,subtitle:n,description:a,badge:d,align:r}),!this.accordionEl)return;const h=o.map(t=>({id:t.id,title:t.question,content:t.answer,itemType:"question"}));this.accordionEl.setAttribute("items",JSON.stringify(h)),this.accordionEl.setAttribute("variant","separated"),this.accordionEl.setAttribute("size","m"),this.accordionEl.setAttribute("default-item-type","question"),c?(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-grid.d.ts

@@ -0,0 +1,20 @@
+declare class DbSectionFeatureGrid extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private gridEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseItems;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-feature-grid': DbSectionFeatureGrid;
+    }
+}
+
+export { DbSectionFeatureGrid };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as i}from"./marketing-block-host-utils.js";const s="designbase-wc-section-feature-grid",n={sparkles:"sparkle",rocket:"package",shield:"award",chart:"trending-up",users:"user",bolt:"bulb"};class DbSectionFeatureGrid 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 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}}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${s}__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=`${s}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const a=this.getAttribute("headline")||"주요 기능",r=this.getAttribute("subtitle")||"",d=this.getAttribute("description")||"",l=this.getAttribute("columns")||"3",c=this.getAttribute("content-padding")||"l",o=this.getAttribute("align")||"center",h=this.hasAttribute("tinted"),u=this.parseBadge(),b=this.parseItems();this.className=[s,`${s}--cols-${l}`,`${s}--padding-${c}`,h&&`${s}--tinted`].filter(Boolean).join(" "),i(this,s),this.headerEl&&t(this.headerEl,{headline:a,subtitle:r,description:d,badge:u,align:o}),this.gridEl&&(this.gridEl.replaceChildren(),b.forEach(t=>{const i=document.createElement("article");i.className=`${s}__card`;const a=document.createElement("div");a.className=`${s}__card-icon`,a.append(e(n[t.iconName||"sparkles"]||"sparkle",24));const r=document.createElement("h3");r.className=`${s}__card-title`,r.textContent=t.title;const d=document.createElement("p");d.className=`${s}__card-description`,d.textContent=t.description,i.append(a,r,d),this.gridEl.append(i)}))}}customElements.get("db-section-feature-grid")||customElements.define("db-section-feature-grid",DbSectionFeatureGrid);export{DbSectionFeatureGrid};

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

@@ -7,8 +7,8 @@ interface FeatureAction {
 declare class DbSectionFeature extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
-    private sectionEl?;
-    private featureWrapEl?;
+    private innerEl?;
+    private contentEl?;
     private badgeEl?;
     private headlineEl?;
     private subtitleEl?;

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

@@ -1 +1 @@
-const t="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.sectionEl=document.createElement("db-section"),this.sectionEl.setAttribute("no-padding",""),this.sectionEl.setAttribute("data-wc-internal",""),this.featureWrapEl=document.createElement("div"),this.featureWrapEl.className=t;const e=document.createElement("div");e.className=`${t}__inner`;const i=document.createElement("div");i.className=`${t}__content`,this.badgeEl=document.createElement("db-badge"),this.badgeEl.className=`${t}__badge`,this.badgeEl.hidden=!0,this.headlineEl=document.createElement("h2"),this.headlineEl.className=`${t}__headline`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${t}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${t}__description`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${t}__actions`,i.append(this.badgeEl,this.headlineEl,this.subtitleEl,this.descriptionEl,this.actionsEl),this.mediaEl=document.createElement("div"),this.mediaEl.className=`${t}__media`,this.imageEl=document.createElement("img"),this.imageEl.className=`${t}__image`,this.mediaEl.append(this.imageEl),e.append(i,this.mediaEl),this.featureWrapEl.append(e),this.sectionEl.append(this.featureWrapEl),this.append(this.sectionEl)}updateUI(){const e=this.getAttribute("headline")||"",i=this.getAttribute("subtitle")||"",s=this.getAttribute("description")||"",a=this.getAttribute("image")||"",l=this.getAttribute("image-alt")||e||"feature",n=this.getAttribute("media-position")||"right",h=this.getAttribute("content-padding")||"l",r=this.getAttribute("size")||"l",d=this.hasAttribute("tinted"),c=this.parseBadge(),o=this.parseActions(),u=[t,`${t}--media-${n}`,`${t}--padding-${h}`,d&&`${t}--tinted`].filter(Boolean).join(" ");this.className=t,this.featureWrapEl&&(this.featureWrapEl.className=u),this.sectionEl&&(this.sectionEl.setAttribute("size",r),this.hasAttribute("full-width")?this.sectionEl.setAttribute("full-width",""):this.sectionEl.removeAttribute("full-width"),this.hasAttribute("full-height")?this.sectionEl.setAttribute("full-height",""):this.sectionEl.removeAttribute("full-height"),this.hasAttribute("overflow-visible")?this.sectionEl.setAttribute("overflow-visible",""):this.sectionEl.removeAttribute("overflow-visible")),this.badgeEl&&(c?.text?(this.badgeEl.hidden=!1,this.badgeEl.setAttribute("variant",c.variant||"primary"),this.badgeEl.setAttribute("badge-style",c.style||"text"),this.badgeEl.setAttribute("size",c.size||"m"),this.badgeEl.textContent=c.text):this.badgeEl.hidden=!0),this.headlineEl&&(this.headlineEl.textContent=e),this.subtitleEl&&(this.subtitleEl.textContent=i,this.subtitleEl.hidden=!i),this.descriptionEl&&(this.descriptionEl.textContent=s,this.descriptionEl.hidden=!s),this.mediaEl&&this.imageEl&&(a?(this.mediaEl.hidden=!1,this.imageEl.src=a,this.imageEl.alt=l):this.mediaEl.hidden=!0),this.actionsEl&&(this.actionsEl.replaceChildren(),o.length>0?(o.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{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const e="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=`${e}__inner`;const t=document.createElement("div");t.className=`${e}__content`,this.contentEl=t,this.headlineEl=document.createElement("h2"),this.headlineEl.className=`${e}__headline`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`,this.descriptionEl=document.createElement("p"),this.descriptionEl.className=`${e}__description`,this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,t.append(this.headlineEl,this.subtitleEl,this.descriptionEl,this.actionsEl),this.mediaEl=document.createElement("div"),this.mediaEl.className=`${e}__media`,this.imageEl=document.createElement("img"),this.imageEl.className=`${e}__image`,this.mediaEl.append(this.imageEl),this.innerEl.append(t,this.mediaEl),this.append(this.innerEl)}updateUI(){const i=this.getAttribute("headline")||"",s=this.getAttribute("subtitle")||"",n=this.getAttribute("description")||"",a=this.getAttribute("image")||"",l=this.getAttribute("image-alt")||i||"feature",h=this.getAttribute("media-position")||"right",d=this.getAttribute("content-padding")||"l",r=this.hasAttribute("tinted"),c=this.parseBadge(),o=this.parseActions();if(this.className=[e,`${e}--media-${h}`,`${e}--padding-${d}`,r&&`${e}--tinted`].filter(Boolean).join(" "),t(this,e),this.contentEl&&this.headlineEl){const t=c?.text?.trim();t?(this.badgeEl||(this.badgeEl=document.createElement("db-badge"),this.badgeEl.className=`${e}__badge`),this.badgeEl.setAttribute("variant",c.variant||"primary"),this.badgeEl.setAttribute("badge-style",c.style||"text"),this.badgeEl.setAttribute("size",c.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=i),this.subtitleEl&&(this.subtitleEl.textContent=s,this.subtitleEl.hidden=!s),this.descriptionEl&&(this.descriptionEl.textContent=n,this.descriptionEl.hidden=!n),this.mediaEl&&this.imageEl&&(a?(this.mediaEl.hidden=!1,this.imageEl.src=a,this.imageEl.alt=l):this.mediaEl.hidden=!0),this.actionsEl&&(this.actionsEl.replaceChildren(),o.length>0?(o.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-logo-cloud.d.ts

@@ -0,0 +1,20 @@
+declare class DbSectionLogoCloud extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private contentEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseLogos;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-logo-cloud': DbSectionLogoCloud;
+    }
+}
+
+export { DbSectionLogoCloud };

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

@@ -0,0 +1 @@
+import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const s="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=`${s}__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 i=this.getAttribute("headline")||"함께하는 파트너",n=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",l=this.getAttribute("variant")||"grid",r=this.getAttribute("content-padding")||"m",c=this.getAttribute("align")||"center",o=this.parseBadge(),d=this.parseLogos();if(this.className=[s,`${s}--${l}`,`${s}--padding-${r}`].join(" "),t(this,s),this.headerEl&&e(this.headerEl,{headline:i,subtitle:n,description:a,badge:o,align:c}),this.contentEl){if(this.contentEl.replaceChildren(),"marquee"===l){this.contentEl.className=`${s}__marquee`;const e=document.createElement("db-marquee");return e.setAttribute("items",JSON.stringify(d.map(e=>e.label??e.alt))),void this.contentEl.append(e)}this.contentEl.className=`${s}__grid`,d.forEach(e=>{const t=document.createElement(e.href?"a":"div");if(t.className=`${s}__item`,e.href&&t instanceof HTMLAnchorElement&&(t.href=e.href,t.target="_blank",t.rel="noopener noreferrer"),e.src){const i=document.createElement("img");i.src=e.src,i.alt=e.alt,i.className=`${s}__image`,t.append(i)}else{const i=document.createElement("span");i.className=`${s}__label`,i.textContent=e.label??e.alt,t.append(i)}this.contentEl.append(t)})}}}customElements.get("db-section-logo-cloud")||customElements.define("db-section-logo-cloud",DbSectionLogoCloud);export{DbSectionLogoCloud};

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

@@ -0,0 +1,20 @@
+declare class DbSectionPricing extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private gridEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parsePlans;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-pricing': DbSectionPricing;
+    }
+}
+
+export { DbSectionPricing };

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

@@ -0,0 +1 @@
+import{applySectionBlockHeader as e}from"./section-block-header-utils.js";import{syncMarketingBlockHost as t}from"./marketing-block-host-utils.js";const i="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=`${i}__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=`${i}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const n=this.getAttribute("headline")||"요금제",s=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",c=this.getAttribute("columns")||"3",r=this.getAttribute("content-padding")||"l",l=this.getAttribute("align")||"center",d=this.parseBadge(),o=this.parsePlans();this.className=[i,`${i}--cols-${c}`,`${i}--padding-${r}`].join(" "),t(this,i),this.headerEl&&e(this.headerEl,{headline:n,subtitle:s,description:a,badge:d,align:l}),this.gridEl&&(this.gridEl.replaceChildren(),o.forEach(e=>{const t=document.createElement("article");t.className=[`${i}__plan-card`,e.highlighted?`${i}__plan-card--highlighted`:""].filter(Boolean).join(" ");const n=document.createElement("div");if(n.className=`${i}__plan-body`,e.badge){const t=document.createElement("db-badge");t.setAttribute("variant","primary"),t.setAttribute("badge-style","filled"),t.setAttribute("size","s"),t.className=`${i}__plan-badge`,t.textContent=e.badge,n.append(t)}const s=document.createElement("h3");s.className=`${i}__plan-name`,s.textContent=e.name;const a=document.createElement("div");a.className=`${i}__price-row`;const c=document.createElement("span");if(c.className=`${i}__price`,c.textContent=e.price,a.append(c),e.period){const t=document.createElement("span");t.className=`${i}__period`,t.textContent=`/ ${e.period}`,a.append(t)}if(n.append(s,a),e.description){const t=document.createElement("p");t.className=`${i}__plan-description`,t.textContent=e.description,n.append(t)}const r=document.createElement("ul");r.className=`${i}__features`,e.features.forEach(e=>{const t=document.createElement("li");t.textContent=e,r.append(t)}),n.append(r);const l=document.createElement("div");l.className=`${i}__plan-footer`;const d=document.createElement("db-button");d.className=`${i}__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(n,l),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

@@ -0,0 +1,20 @@
+declare class DbSectionStats extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private innerEl?;
+    private headerEl?;
+    private gridEl?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseItems;
+    private parseBadge;
+    private build;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-stats': DbSectionStats;
+    }
+}
+
+export { DbSectionStats };

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

@@ -0,0 +1 @@
+import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as e}from"./marketing-block-host-utils.js";const i="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=`${i}__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=`${i}__grid`,this.innerEl.append(this.headerEl,this.gridEl),this.append(this.innerEl)}updateUI(){const s=this.getAttribute("headline")||"",n=this.getAttribute("subtitle")||"",a=this.getAttribute("description")||"",r=this.getAttribute("columns")||"4",l=this.getAttribute("content-padding")||"l",d=this.getAttribute("align")||"center",c=this.hasAttribute("tinted"),h=this.parseBadge(),o=this.parseItems();if(this.className=[i,`${i}--cols-${r}`,`${i}--padding-${l}`,c&&`${i}--tinted`].filter(Boolean).join(" "),e(this,i),this.headerEl){const e=s||n||a||h?.text;this.headerEl.hidden=!e,t(this.headerEl,{headline:s,subtitle:n,description:a,badge:h,align:d})}this.gridEl&&(this.gridEl.replaceChildren(),o.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=`${i}__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

@@ -0,0 +1,34 @@
+declare class DbSectionTestimonials extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private carouselIndex;
+    private innerEl?;
+    private headerEl?;
+    private contentEl?;
+    private carouselViewport?;
+    private carouselTrack?;
+    private carouselIndicator?;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private parseItems;
+    private parseBadge;
+    private buildHeader;
+    private build;
+    private createTestimonialEl;
+    private updateHeader;
+    private clampCarouselIndex;
+    private updateCarouselTransform;
+    private goToCarouselSlide;
+    private renderGrid;
+    private renderCarousel;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-section-testimonials': DbSectionTestimonials;
+    }
+}
+
+export { DbSectionTestimonials };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";import{applySectionBlockHeader as t}from"./section-block-header-utils.js";import{syncMarketingBlockHost as s}from"./marketing-block-host-utils.js";const i="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.resizeObserver?.disconnect(),this.resizeObserver=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 a=document.createElement("p");a.className="designbase-wc-section-block-header__description",a.dataset.role="description",this.headerEl.append(t,s,i,a),e.append(this.headerEl)}build(){this.innerEl=document.createElement("div"),this.innerEl.className=`${i}__inner`,this.buildHeader(this.innerEl),this.contentEl=document.createElement("div"),this.contentEl.className=`${i}__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.setAttribute("align","center"),t}updateHeader(){this.headerEl&&t(this.headerEl,{headline:this.getAttribute("headline")||"고객 후기",subtitle:this.getAttribute("subtitle")||"",description:this.getAttribute("description")||"",badge:this.parseBadge(),align:this.getAttribute("align")||"center"})}clampCarouselIndex(e){e<=0?this.carouselIndex=0:(this.carouselIndex>=e&&(this.carouselIndex=0),this.carouselIndex<0&&(this.carouselIndex=0))}updateCarouselTransform(){if(!this.carouselViewport||!this.carouselTrack)return;const e=this.carouselViewport.clientWidth;this.carouselTrack.style.transform=`translate3d(-${this.carouselIndex*e}px, 0, 0)`,this.carouselIndicator&&this.carouselIndicator.setAttribute("current",String(this.carouselIndex))}goToCarouselSlide(e,t){t<=0||(this.carouselIndex=Math.max(0,Math.min(e,t-1)),this.updateCarouselTransform())}renderGrid(e){this.contentEl&&(this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.carouselViewport=void 0,this.carouselTrack=void 0,this.carouselIndicator=void 0,this.contentEl.className=`${i}__grid`,this.contentEl.replaceChildren(),e.forEach(e=>{this.contentEl.append(this.createTestimonialEl(e))}))}renderCarousel(t){if(!this.contentEl)return;if(this.contentEl.replaceChildren(),this.contentEl.className=`${i}__carousel`,this.clampCarouselIndex(t.length),0===t.length)return;const s=document.createElement("div");s.className=`${i}__carousel-viewport`;const a=document.createElement("div");if(a.className=`${i}__carousel-track`,t.forEach(e=>{const t=document.createElement("div");t.className=`${i}__carousel-slide`,t.append(this.createTestimonialEl(e)),a.append(t)}),s.append(a),this.carouselViewport=s,this.carouselTrack=a,t.length>1){const a=document.createElement("button");a.type="button",a.className=`${i}__carousel-nav ${i}__carousel-nav--prev`,a.setAttribute("aria-label","이전 후기"),a.append(e("chevron-left",20)),a.addEventListener("click",()=>{const e=this.carouselIndex-1;this.goToCarouselSlide(e<0?t.length-1:e,t.length)});const r=document.createElement("button");r.type="button",r.className=`${i}__carousel-nav ${i}__carousel-nav--next`,r.setAttribute("aria-label","다음 후기"),r.append(e("chevron-right",20)),r.addEventListener("click",()=>{const e=this.carouselIndex+1;this.goToCarouselSlide(e>=t.length?0:e,t.length)}),s.append(a,r);const n=document.createElement("div");n.className=`${i}__carousel-controls`;const l=document.createElement("db-indicator");l.className=`${i}__carousel-indicator`,l.setAttribute("current",String(this.carouselIndex)),l.setAttribute("total",String(t.length)),l.setAttribute("type","dots"),l.setAttribute("size","s"),l.setAttribute("clickable",""),l.addEventListener("db-step-click",e=>{const s=e;this.goToCarouselSlide(s.detail.index,t.length)}),this.carouselIndicator=l,n.append(l),this.contentEl.append(s,n)}else this.contentEl.append(s);this.resizeObserver?.disconnect(),this.resizeObserver=new ResizeObserver(()=>this.updateCarouselTransform()),this.resizeObserver.observe(s),requestAnimationFrame(()=>this.updateCarouselTransform())}updateUI(){const e=this.getAttribute("variant")||"grid",t=this.getAttribute("columns")||"3",a=this.getAttribute("content-padding")||"l",r=this.parseItems();this.className=[i,`${i}--${e}`,`${i}--cols-${t}`,`${i}--padding-${a}`].join(" "),s(this,i),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-sidebar.d.ts

@@ -19,9 +19,26 @@ interface DbSidebarUserProfile {
     email?: string;
     avatar?: string;
 }
+interface DbSidebarProject {
+    id: string;
+    label: string;
+    icon?: string;
+    color?: string;
+    href?: string;
+}
+interface DbSidebarPromoBanner {
+    title: string;
+    description?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    icon?: string;
+}
 declare class DbSidebar extends HTMLElement {
     private expandedItems;
     private userMenuOpen;
+    private projectMenuOpen;
+    private flyoutItemId;
+    private flyoutCloseTimer;
     private outsideHandler;
     static get observedAttributes(): string[];
     connectedCallback(): void;
@@ -36,17 +53,52 @@ declare class DbSidebar extends HTMLElement {
     set userMenuItems(value: DbSidebarItem[] | string);
     get userProfile(): DbSidebarUserProfile | null;
     set userProfile(value: DbSidebarUserProfile | string | null);
+    get projects(): DbSidebarProject[];
+    set projects(value: DbSidebarProject[] | string);
+    get selectedProjectId(): string;
+    set selectedProjectId(value: string);
+    get projectManageLabel(): string;
+    set projectManageLabel(value: string);
+    get projectManageHref(): string;
+    set projectManageHref(value: string);
+    get projectSectionLabel(): string;
+    set projectSectionLabel(value: string);
+    get bottomItems(): DbSidebarItem[];
+    set bottomItems(value: DbSidebarItem[] | string);
+    get bottomSections(): DbSidebarSection[];
+    set bottomSections(value: DbSidebarSection[] | string);
+    get promoBanner(): DbSidebarPromoBanner | null;
+    set promoBanner(value: DbSidebarPromoBanner | string | null);
     private parseSections;
     private parseUserMenuItems;
     private parseUserProfile;
+    private parseProjects;
+    private parseBottomItems;
+    private parseBottomSections;
+    private parsePromoBanner;
+    private getSelectedProject;
     private bindOutsideClick;
+    private closeOverlayMenus;
+    private syncExclusiveAccordion;
     private unbindOutsideClick;
+    private cancelFlyoutClose;
+    private showFlyout;
+    private scheduleFlyoutClose;
     private syncHostClasses;
     private dispatchItemClick;
     private dispatchUserMenuItemClick;
-    private updateUserMenuVisibility;
+    private dispatchProjectChange;
+    private dispatchProjectManage;
+    private dispatchPromoCtaClick;
+    private createProjectAvatar;
+    private createProjectSelector;
+    private createFlyout;
     private createSidebarMenuItem;
+    private renderSectionList;
     private renderNav;
+    private renderBottomNav;
+    private createUserDropdown;
+    private createPromoBanner;
     private render;
 }
 declare global {
@@ -56,4 +108,4 @@ declare global {
 }
 
 export { DbSidebar };
-export type { DbSidebarItem, DbSidebarSection, DbSidebarUserProfile };
+export type { DbSidebarItem, DbSidebarProject, DbSidebarPromoBanner, DbSidebarSection, DbSidebarUserProfile };

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","dark","light"],i=["left","right"];class DbSidebar extends HTMLElement{constructor(){super(...arguments),this.expandedItems=new Set,this.userMenuOpen=!1,this.outsideHandler=null}static get observedAttributes(){return["items","sections","user-menu-items","user-profile","default-expanded-ids","size","variant","position","collapsed","collapsible","show-logo","full-height","shadow"]}connectedCallback(){this.seedExpanded(),this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(e){this.isConnected&&("default-expanded-ids"===e&&this.seedExpanded(),"collapsed"===e&&this.hasAttribute("collapsed")&&(this.userMenuOpen=!1),this.render())}seedExpanded(){try{const e=JSON.parse(this.getAttribute("default-expanded-ids")||"[]");Array.isArray(e)&&(this.expandedItems=new Set(e))}catch{this.expandedItems=new Set}}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get sections(){return this.parseSections()}set sections(e){this.setAttribute("sections","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseUserMenuItems()}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}parseSections(){const e=this.getAttribute("sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}try{const e=JSON.parse(this.getAttribute("items")||"[]");return[{id:"main",items:Array.isArray(e)?e:[]}]}catch{return[{id:"main",items:[]}]}}parseUserMenuItems(){try{const e=JSON.parse(this.getAttribute("user-menu-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{const t=this.querySelector(".designbase-wc-sidebar__user");t&&!t.contains(e.target)&&(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}syncHostClasses(){const e=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",r=this.getAttribute("position")||"left";this.className=["designbase-wc-sidebar",`designbase-wc-sidebar--${t.includes(e)?e:"m"}`,`designbase-wc-sidebar--${s.includes(a)?a:"default"}`,`designbase-wc-sidebar--${i.includes(r)?r:"left"}`,this.hasAttribute("collapsed")&&"designbase-wc-sidebar--collapsed",this.hasAttribute("full-height")&&"designbase-wc-sidebar--full-height",this.hasAttribute("shadow")&&"designbase-wc-sidebar--shadow"].filter(Boolean).join(" ")}dispatchItemClick(e){this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchUserMenuItemClick(e){this.dispatchEvent(new CustomEvent("db-user-menu-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-sidebar__user-dropdown");e&&(e.hidden=!this.userMenuOpen)}createSidebarMenuItem(e,t,s=0){const i=Boolean(e.children?.length),a=this.expandedItems.has(e.id),r=this.hasAttribute("collapsed"),n=document.createElement("li");n.className="designbase-wc-sidebar__item";const d=document.createElement("db-menu-item");return d.setAttribute("label",e.label),d.setAttribute("type","block"),d.setAttribute("menu-style","accordion"),d.setAttribute("size",t),d.setAttribute("depth",String(s)),e.href&&d.setAttribute("href",e.href),e.icon&&d.setAttribute("icon",e.icon),e.active&&d.setAttribute("active",""),e.disabled&&d.setAttribute("disabled",""),void 0!==e.badge&&d.setAttribute("badge",String(e.badge)),e.badgeColor&&d.setAttribute("badge-color",e.badgeColor),i&&(d.setAttribute("expandable",""),d.subItems=(e.children||[]).map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled,badge:e.badge,badgeColor:e.badgeColor})),a&&!r&&d.setAttribute("expanded","")),d.addEventListener("db-click",()=>{if(!e.disabled)return i&&!r?(this.expandedItems.has(e.id)?this.expandedItems.delete(e.id):this.expandedItems.add(e.id),void this.renderNav()):void this.dispatchItemClick(e)}),d.addEventListener("db-child-click",e=>{const t=e.detail;this.dispatchItemClick(t.child)}),n.append(d),n}renderNav(){const e=this.querySelector(".designbase-wc-sidebar__nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.parseSections();e.replaceChildren(),s.forEach(s=>{const i=document.createElement("div");if(i.className="designbase-wc-sidebar__section",!this.hasAttribute("collapsed")&&s.title){const e=document.createElement("div");e.className="designbase-wc-sidebar__section-title",e.textContent=s.title,i.append(e)}const a=document.createElement("ul");a.className="designbase-wc-sidebar__nav-list",s.items.forEach(e=>a.append(this.createSidebarMenuItem(e,t))),i.append(a),e.append(i)})}render(){this.syncHostClasses(),this.setAttribute("role","complementary"),this.setAttribute("aria-label","사이드바 네비게이션");const t=this.getAttribute("size")||"m",s="false"!==this.getAttribute("collapsible"),i="false"!==this.getAttribute("show-logo"),a=this.hasAttribute("collapsed"),r=this.parseUserProfile(),n=this.parseUserMenuItems(),d="l"===t?"m":"s"===t?"xs":"s";this.replaceChildren();const c=document.createElement("div");if(c.className="designbase-wc-sidebar__container",s||i&&!a){const e=document.createElement("div");if(e.className=["designbase-wc-sidebar__header",(a||!i)&&"designbase-wc-sidebar__header--collapsed-only"].filter(Boolean).join(" "),!a&&i){const t=document.createElement("div");t.className="designbase-wc-sidebar__logo";const s=document.createElement("db-logo");s.setAttribute("type","designbase"),s.setAttribute("size",d),t.append(s),t.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),e.append(t)}if(s){const t=document.createElement("db-button");t.className="designbase-wc-sidebar__toggle",t.setAttribute("variant","tertiary"),t.setAttribute("size","s"),t.setAttribute("icon-only",""),t.setAttribute("start-icon",a?"arrow-bar-right":"arrow-bar-left"),t.setAttribute("aria-label",a?"사이드바 펼치기":"사이드바 접기"),t.addEventListener("db-click",()=>{const e=!this.hasAttribute("collapsed");e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("db-toggle",{bubbles:!0,composed:!0,detail:{collapsed:e}}))}),e.append(t)}c.append(e)}const l=document.createElement("div");l.className="designbase-wc-sidebar__nav-wrapper";const u=document.createElement("nav");u.className="designbase-wc-sidebar__nav",u.setAttribute("aria-label","주 메뉴"),l.append(u),c.append(l);const o=document.createElement("div");if(o.className="designbase-wc-sidebar__footer",r&&!a){const t=document.createElement("div");t.className="designbase-wc-sidebar__user";const s=document.createElement("div");if(s.className="designbase-wc-sidebar__user-dropdown",s.setAttribute("role","menu"),s.setAttribute("aria-label","사용자 메뉴"),s.hidden=!this.userMenuOpen,n.length){const e=document.createElement("ul");e.className="designbase-wc-sidebar__user-menu",n.forEach(t=>{const s=document.createElement("li");s.className="designbase-wc-sidebar__user-menu-item";const i=document.createElement("db-menu-item");i.setAttribute("label",t.label),i.setAttribute("type","block"),i.setAttribute("menu-style","accordion"),i.setAttribute("size","s"),t.icon&&i.setAttribute("icon",t.icon),t.href&&i.setAttribute("href",t.href),i.addEventListener("db-click",()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility(),this.dispatchUserMenuItemClick(t)}),s.append(i),e.append(s)}),s.append(e)}const i=document.createElement("div");i.className="designbase-wc-sidebar__user-info",i.setAttribute("role","button"),i.setAttribute("tabindex","0"),i.setAttribute("aria-expanded",String(this.userMenuOpen));const a=document.createElement("db-avatar");a.className="designbase-wc-sidebar__user-avatar",a.setAttribute("size","s"),a.setAttribute("initials",r.name),a.setAttribute("alt",r.name),r.avatar&&a.setAttribute("src",r.avatar);const d=document.createElement("div");d.className="designbase-wc-sidebar__user-details";const c=document.createElement("div");if(c.className="designbase-wc-sidebar__user-name",c.textContent=r.name,d.append(c),r.email){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-email",e.textContent=r.email,d.append(e)}if(i.append(a,d),n.length){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-more",t.setAttribute("aria-hidden","true"),t.append(e("more-vertical",16)),i.append(t),i.setAttribute("aria-haspopup","menu")}i.addEventListener("click",()=>{n.length&&(this.userMenuOpen=!this.userMenuOpen,i.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility())}),t.append(s,i),o.append(t)}else if(r&&a){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-collapsed",e.setAttribute("role","button"),e.setAttribute("tabindex","0");const t=document.createElement("db-avatar");t.className="designbase-wc-sidebar__user-avatar-collapsed",t.setAttribute("size","m"),t.setAttribute("initials",r.name),t.setAttribute("alt",r.name),r.avatar&&t.setAttribute("src",r.avatar),e.append(t),o.append(e)}c.append(o),this.append(c),this.renderNav()}}customElements.get("db-sidebar")||customElements.define("db-sidebar",DbSidebar);export{DbSidebar};
+import{createDbIcon as e,isDbIconName as t}from"./db-icons.js";const s=["s","m","l"],i=["default","dark","light"],r=["left","right"];class DbSidebar extends HTMLElement{constructor(){super(...arguments),this.expandedItems=new Set,this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.flyoutCloseTimer=null,this.outsideHandler=null}static get observedAttributes(){return["items","sections","user-menu-items","user-profile","default-expanded-ids","projects","selected-project-id","project-manage-label","project-manage-href","project-section-label","bottom-items","bottom-sections","promo-banner","size","variant","position","collapsed","collapsible","show-logo","full-height","shadow"]}connectedCallback(){this.seedExpanded(),this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick(),this.cancelFlyoutClose()}attributeChangedCallback(e){this.isConnected&&("default-expanded-ids"===e&&this.seedExpanded(),"collapsed"===e&&this.hasAttribute("collapsed")&&(this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.cancelFlyoutClose()),this.render())}seedExpanded(){try{const e=JSON.parse(this.getAttribute("default-expanded-ids")||"[]");Array.isArray(e)&&(this.expandedItems=new Set(e))}catch{this.expandedItems=new Set}}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get sections(){return this.parseSections()}set sections(e){this.setAttribute("sections","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseUserMenuItems()}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}get projects(){return this.parseProjects()}set projects(e){this.setAttribute("projects","string"==typeof e?e:JSON.stringify(e))}get selectedProjectId(){return this.getAttribute("selected-project-id")||""}set selectedProjectId(e){e?this.setAttribute("selected-project-id",e):this.removeAttribute("selected-project-id")}get projectManageLabel(){return this.getAttribute("project-manage-label")||"프로젝트 관리"}set projectManageLabel(e){this.setAttribute("project-manage-label",e)}get projectManageHref(){return this.getAttribute("project-manage-href")||""}set projectManageHref(e){e?this.setAttribute("project-manage-href",e):this.removeAttribute("project-manage-href")}get projectSectionLabel(){return this.getAttribute("project-section-label")||"프로젝트"}set projectSectionLabel(e){this.setAttribute("project-section-label",e)}get bottomItems(){return this.parseBottomItems()}set bottomItems(e){this.setAttribute("bottom-items","string"==typeof e?e:JSON.stringify(e))}get bottomSections(){return this.parseBottomSections()}set bottomSections(e){this.setAttribute("bottom-sections","string"==typeof e?e:JSON.stringify(e))}get promoBanner(){return this.parsePromoBanner()}set promoBanner(e){null==e?this.removeAttribute("promo-banner"):this.setAttribute("promo-banner","string"==typeof e?e:JSON.stringify(e))}parseSections(){const e=this.getAttribute("sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}try{const e=JSON.parse(this.getAttribute("items")||"[]");return[{id:"main",items:Array.isArray(e)?e:[]}]}catch{return[{id:"main",items:[]}]}}parseUserMenuItems(){try{const e=JSON.parse(this.getAttribute("user-menu-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}parseProjects(){try{const e=JSON.parse(this.getAttribute("projects")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomItems(){try{const e=JSON.parse(this.getAttribute("bottom-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomSections(){const e=this.getAttribute("bottom-sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}const t=this.parseBottomItems();return t.length?[{id:"bottom",items:t}]:[]}parsePromoBanner(){const e=this.getAttribute("promo-banner");if(!e)return null;try{return JSON.parse(e)}catch{return null}}getSelectedProject(){const e=this.parseProjects();if(!e.length)return null;const t=this.selectedProjectId;return e.find(e=>e.id===t)||e[0]}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{const t=e.target;if(this.contains(t))return;let s=!1;this.userMenuOpen&&(this.userMenuOpen=!1,s=!0),this.projectMenuOpen&&(this.projectMenuOpen=!1,s=!0),s&&this.render()},document.addEventListener("mousedown",this.outsideHandler))}closeOverlayMenus(){const e=this.projectMenuOpen,t=this.userMenuOpen;if(!e&&!t)return!1;this.projectMenuOpen=!1,this.userMenuOpen=!1,this.querySelector(".designbase-wc-sidebar__project-dropdown")?.remove(),this.querySelector(".designbase-wc-sidebar__project-selector")?.classList.remove("designbase-wc-sidebar__project-selector--open");const s=this.querySelector(".designbase-wc-sidebar__project-trigger");s?.setAttribute("aria-expanded","false");const i=this.querySelector(".designbase-wc-sidebar__user-dropdown");return i&&(i.hidden=!0),this.querySelector(".designbase-wc-sidebar__user-info")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.classList.remove("designbase-wc-sidebar__user-collapsed--open"),!0}syncExclusiveAccordion(e){[...Array.from(this.querySelectorAll(".designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item")),...Array.from(this.querySelectorAll(".designbase-wc-sidebar__bottom-nav .designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item"))].forEach(t=>{const s=t.getAttribute("data-item-id");s&&(e&&s===e?t.setAttribute("expanded",""):t.removeAttribute("expanded"))})}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}cancelFlyoutClose(){this.flyoutCloseTimer&&(clearTimeout(this.flyoutCloseTimer),this.flyoutCloseTimer=null)}showFlyout(e){this.cancelFlyoutClose(),this.flyoutItemId!==e&&(this.flyoutItemId=e,this.renderNav(),this.renderBottomNav())}scheduleFlyoutClose(){this.cancelFlyoutClose(),this.flyoutCloseTimer=setTimeout(()=>{this.flyoutCloseTimer=null,this.flyoutItemId=null,this.renderNav(),this.renderBottomNav()},120)}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",n=this.getAttribute("position")||"left";this.className=["designbase-wc-sidebar",`designbase-wc-sidebar--${s.includes(e)?e:"m"}`,`designbase-wc-sidebar--${i.includes(t)?t:"default"}`,`designbase-wc-sidebar--${r.includes(n)?n:"left"}`,this.hasAttribute("collapsed")&&"designbase-wc-sidebar--collapsed",this.hasAttribute("full-height")&&"designbase-wc-sidebar--full-height",this.hasAttribute("shadow")&&"designbase-wc-sidebar--shadow"].filter(Boolean).join(" ")}dispatchItemClick(e){this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchUserMenuItemClick(e){this.dispatchEvent(new CustomEvent("db-user-menu-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchProjectChange(e){this.dispatchEvent(new CustomEvent("db-project-change",{bubbles:!0,composed:!0,detail:{project:e}}))}dispatchProjectManage(){this.dispatchEvent(new CustomEvent("db-project-manage",{bubbles:!0,composed:!0,detail:{}}))}dispatchPromoCtaClick(e){this.dispatchEvent(new CustomEvent("db-promo-cta-click",{bubbles:!0,composed:!0,detail:{banner:e}}))}createProjectAvatar(e,t="s"){const s=document.createElement("db-avatar");if(s.className="designbase-wc-sidebar__project-avatar",s.setAttribute("size",t),s.setAttribute("initials",(e.label||"?").trim()),s.setAttribute("alt",e.label),e.color){const applyColor=()=>{const t=s.querySelector(".designbase-wc-avatar__initials");return!!t&&(t.style.backgroundColor=e.color,t.style.color="#fff",!0)},t=new MutationObserver(()=>{applyColor()&&t.disconnect()});t.observe(s,{childList:!0,subtree:!0}),queueMicrotask(()=>{applyColor()&&t.disconnect()})}return s}createProjectSelector(t){const s=this.parseProjects();if(!s.length)return null;const i=this.getSelectedProject();if(!i)return null;const r=document.createElement("div");r.className=["designbase-wc-sidebar__project-selector",t&&"designbase-wc-sidebar__project-selector--collapsed",this.projectMenuOpen&&"designbase-wc-sidebar__project-selector--open"].filter(Boolean).join(" ");const n=this.getAttribute("project-section-label");if(!t&&n&&n.trim()){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-section-label",e.textContent=n.trim(),r.append(e)}const a=document.createElement("button");if(a.type="button",a.className="designbase-wc-sidebar__project-trigger",a.setAttribute("aria-haspopup","menu"),a.setAttribute("aria-expanded",String(this.projectMenuOpen)),a.setAttribute("aria-label",i.label),a.append(this.createProjectAvatar(i,t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=i.label,a.append(e)}const o=document.createElement("span");if(o.className="designbase-wc-sidebar__project-chevron",o.setAttribute("aria-hidden","true"),o.append(e("chevron-down",14)),a.append(o),a.addEventListener("click",()=>{this.projectMenuOpen=!this.projectMenuOpen,this.userMenuOpen=!1,this.render()}),r.append(a),this.projectMenuOpen){const t=document.createElement("div");t.className="designbase-wc-sidebar__project-dropdown",t.setAttribute("role","menu"),t.setAttribute("aria-label",this.projectSectionLabel);const n=document.createElement("ul");n.className="designbase-wc-sidebar__project-list",s.forEach(e=>{const t=document.createElement("li");t.className="designbase-wc-sidebar__project-option";const s=document.createElement("button");s.type="button",s.className=["designbase-wc-sidebar__project-option-btn",e.id===i.id&&"designbase-wc-sidebar__project-option-btn--active"].filter(Boolean).join(" "),s.setAttribute("role","menuitem"),s.append(this.createProjectAvatar(e,"s"));const r=document.createElement("span");r.textContent=e.label,s.append(r),s.addEventListener("click",()=>{this.projectMenuOpen=!1,this.setAttribute("selected-project-id",e.id),this.dispatchProjectChange(e),this.render()}),t.append(s),n.append(t)}),t.append(n);const a=document.createElement("button");a.type="button",a.className="designbase-wc-sidebar__project-manage",a.setAttribute("role","menuitem"),a.append(e("plus",14));const o=document.createElement("span");o.textContent=this.projectManageLabel,a.append(o),a.addEventListener("click",()=>{this.projectMenuOpen=!1;const e=this.projectManageHref;e&&window.location.assign(e),this.dispatchProjectManage(),this.render()}),t.append(a),r.append(t)}return r}createFlyout(e,t){const s=this.getAttribute("position")||"left",i=document.createElement("div");i.className=["designbase-wc-sidebar__flyout","right"===s&&"designbase-wc-sidebar__flyout--align-left"].filter(Boolean).join(" "),i.setAttribute("role","menu"),i.setAttribute("aria-label",`${e.label} 하위 메뉴`),i.addEventListener("mouseenter",()=>this.cancelFlyoutClose()),i.addEventListener("mouseleave",()=>this.scheduleFlyoutClose());const r=document.createElement("div");r.className="designbase-wc-sidebar__flyout-title",r.textContent=e.label,i.append(r);const n=document.createElement("ul");return n.className="designbase-wc-sidebar__flyout-list",(e.children||[]).forEach(e=>{const s=document.createElement("li");s.className="designbase-wc-sidebar__flyout-item";const i=document.createElement("db-menu-item");i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","dropdown"),i.setAttribute("size",t),e.href&&i.setAttribute("href",e.href),e.active&&i.setAttribute("active",""),e.disabled&&i.setAttribute("disabled",""),void 0!==e.badge&&i.setAttribute("badge",String(e.badge)),e.badgeColor&&i.setAttribute("badge-color",e.badgeColor),i.addEventListener("db-click",()=>{e.disabled||(this.flyoutItemId=null,this.dispatchItemClick(e),this.renderNav(),this.renderBottomNav())}),s.append(i),n.append(s)}),i.append(n),i}createSidebarMenuItem(e,t,s=0){const i=Boolean(e.children?.length),r=this.expandedItems.has(e.id),n=this.hasAttribute("collapsed"),a=n&&i,o=document.createElement("li");o.className=["designbase-wc-sidebar__item",a&&this.flyoutItemId===e.id&&"designbase-wc-sidebar__item--flyout-active"].filter(Boolean).join(" "),a&&(o.addEventListener("mouseenter",()=>this.showFlyout(e.id)),o.addEventListener("mouseleave",()=>this.scheduleFlyoutClose()));const c=document.createElement("db-menu-item");if(c.setAttribute("data-item-id",e.id),c.setAttribute("label",e.label),c.setAttribute("type","block"),c.setAttribute("menu-style","accordion"),c.setAttribute("size",t),c.setAttribute("depth",String(s)),e.href&&c.setAttribute("href",e.href),e.icon&&c.setAttribute("icon",e.icon),e.active&&c.setAttribute("active",""),e.disabled&&c.setAttribute("disabled",""),void 0!==e.badge&&c.setAttribute("badge",String(e.badge)),e.badgeColor&&c.setAttribute("badge-color",e.badgeColor),i&&!a&&(c.setAttribute("expandable",""),c.subItems=(e.children||[]).map(e=>({id:e.id,label:e.label,href:e.href,active:e.active,disabled:e.disabled,badge:e.badge,badgeColor:e.badgeColor})),r&&!n&&c.setAttribute("expanded","")),c.addEventListener("db-click",t=>{if(!e.disabled){if(i&&!n){const s=t.detail?.expanded??!this.expandedItems.has(e.id);return this.closeOverlayMenus(),void(s?(this.expandedItems.clear(),this.expandedItems.add(e.id),this.syncExclusiveAccordion(e.id)):(this.expandedItems.delete(e.id),this.syncExclusiveAccordion(null)))}if(a)return this.closeOverlayMenus(),void this.showFlyout(e.id);this.closeOverlayMenus(),this.dispatchItemClick(e)}}),c.addEventListener("db-child-click",e=>{const t=e.detail;this.dispatchItemClick(t.child)}),o.append(c),n&&void 0!==e.badge&&null!==e.badge&&""!==e.badge){const t=e.badgeColor||"primary",s=document.createElement("span");s.className=["designbase-wc-sidebar__collapsed-badge-dot",`designbase-wc-sidebar__collapsed-badge-dot--${t}`].join(" "),s.setAttribute("aria-hidden","true"),o.append(s)}if(n&&!i){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=e.label,t.setAttribute("role","tooltip"),o.append(t)}return a&&this.flyoutItemId===e.id&&o.append(this.createFlyout(e,t)),o}renderSectionList(e,t,s){const i=document.createDocumentFragment();return e.forEach(e=>{const r=document.createElement("div");if(r.className="designbase-wc-sidebar__section",!s&&e.title){const t=document.createElement("div");t.className="designbase-wc-sidebar__section-title",t.textContent=e.title,r.append(t)}const n=document.createElement("ul");n.className="designbase-wc-sidebar__nav-list",e.items.forEach(e=>n.append(this.createSidebarMenuItem(e,t))),r.append(n),i.append(r)}),i}renderNav(){const e=this.querySelector(".designbase-wc-sidebar__nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.hasAttribute("collapsed");e.replaceChildren(this.renderSectionList(this.parseSections(),t,s))}renderBottomNav(){const e=this.querySelector(".designbase-wc-sidebar__bottom-nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.hasAttribute("collapsed");e.replaceChildren(this.renderSectionList(this.parseBottomSections(),t,s))}createUserDropdown(e,t=!1){if(!e.length)return null;const s=this.getAttribute("size")||"m",i=document.createElement("div");i.className=["designbase-wc-sidebar__user-dropdown",t&&"designbase-wc-sidebar__user-dropdown--collapsed"].filter(Boolean).join(" "),i.setAttribute("role","menu"),i.setAttribute("aria-label","사용자 메뉴"),i.hidden=!this.userMenuOpen;const r=document.createElement("ul");return r.className="designbase-wc-sidebar__user-menu",e.forEach(e=>{const t=document.createElement("li");t.className="designbase-wc-sidebar__user-menu-item";const i=document.createElement("db-menu-item");i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","accordion"),i.setAttribute("size",s),e.icon&&i.setAttribute("icon",e.icon),e.href&&i.setAttribute("href",e.href),i.addEventListener("db-click",()=>{this.userMenuOpen=!1,this.dispatchUserMenuItemClick(e),this.render()}),t.append(i),r.append(t)}),i.append(r),i}createPromoBanner(s){const i=this.parsePromoBanner();if(!i)return null;if(s){const s=document.createElement("button");s.type="button",s.className="designbase-wc-sidebar__promo-collapsed",s.setAttribute("aria-label",i.ctaLabel||i.title);const r=document.createElement("db-animation-background");r.className="designbase-wc-sidebar__promo-bg",r.setAttribute("type","aurora"),r.setAttribute("theme","light"),r.setAttribute("intensity","subtle"),r.setAttribute("blur","40"),r.setAttribute("speed","4000"),r.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8"])),s.append(r),s.append(e(i.icon&&t(i.icon)?i.icon:"sparkle",18)),s.addEventListener("click",()=>this.dispatchPromoCtaClick(i));const n=document.createElement("span");n.className="designbase-wc-sidebar__item-tooltip",n.textContent=i.title,n.setAttribute("role","tooltip");const a=document.createElement("div");return a.className="designbase-wc-sidebar__promo-collapsed-wrap",a.append(s,n),a}const r=document.createElement("div");r.className="designbase-wc-sidebar__promo";const n=document.createElement("db-animation-background");n.className="designbase-wc-sidebar__promo-bg",n.setAttribute("type","aurora"),n.setAttribute("theme","light"),n.setAttribute("intensity","subtle"),n.setAttribute("blur","60"),n.setAttribute("speed","5000"),n.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8","#bfdbfe"])),r.append(n);const a=document.createElement("div");a.className="designbase-wc-sidebar__promo-content";const o=document.createElement("div");o.className="designbase-wc-sidebar__promo-title-row";const c=document.createElement("span");c.className="designbase-wc-sidebar__promo-icon",c.setAttribute("aria-hidden","true"),c.append(e(i.icon&&t(i.icon)?i.icon:"sparkle",16));const d=document.createElement("div");if(d.className="designbase-wc-sidebar__promo-title",d.textContent=i.title,o.append(c,d),a.append(o),i.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__promo-desc",e.textContent=i.description,a.append(e)}if(i.ctaLabel){const e=document.createElement("db-button");e.className="designbase-wc-sidebar__promo-action",e.setAttribute("variant","secondary"),e.setAttribute("size","s"),e.setAttribute("full-width",""),e.textContent=i.ctaLabel,e.addEventListener("db-click",()=>{i.ctaHref&&window.location.assign(i.ctaHref),this.dispatchPromoCtaClick(i)}),a.append(e)}return r.append(a),r}render(){this.syncHostClasses(),this.setAttribute("role","complementary"),this.setAttribute("aria-label","사이드바 네비게이션");const t=this.getAttribute("size")||"m",s="false"!==this.getAttribute("collapsible"),i="false"!==this.getAttribute("show-logo"),r=this.hasAttribute("collapsed"),n=this.parseUserProfile(),a=this.parseUserMenuItems(),o=this.parseBottomSections(),c="l"===t?"m":"s"===t?"xs":"s";this.replaceChildren();const d=document.createElement("div");if(d.className="designbase-wc-sidebar__container",s||i&&!r){const e=document.createElement("div");if(e.className=["designbase-wc-sidebar__header",(r||!i)&&"designbase-wc-sidebar__header--collapsed-only"].filter(Boolean).join(" "),!r&&i){const t=document.createElement("div");t.className="designbase-wc-sidebar__logo";const s=document.createElement("db-logo");s.setAttribute("type","designbase"),s.setAttribute("size",c),t.append(s),t.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),e.append(t)}if(s){const t=document.createElement("db-button");t.className="designbase-wc-sidebar__toggle",t.setAttribute("variant","tertiary"),t.setAttribute("size","s"),t.setAttribute("icon-only",""),t.setAttribute("start-icon",r?"arrow-bar-right":"arrow-bar-left"),t.setAttribute("aria-label",r?"사이드바 펼치기":"사이드바 접기"),t.addEventListener("db-click",()=>{const e=!this.hasAttribute("collapsed");e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("db-toggle",{bubbles:!0,composed:!0,detail:{collapsed:e}}))}),e.append(t)}d.append(e)}const l=document.createElement("div");l.className="designbase-wc-sidebar__nav-wrapper";const u=this.createProjectSelector(r);u&&l.append(u);const b=document.createElement("nav");if(b.className="designbase-wc-sidebar__nav",b.setAttribute("aria-label","주 메뉴"),l.append(b),o.length>0){const e=document.createElement("nav");e.className="designbase-wc-sidebar__bottom-nav",e.setAttribute("aria-label","하단 메뉴"),l.append(e)}d.append(l);const p=document.createElement("div");p.className="designbase-wc-sidebar__footer";const m=this.createPromoBanner(r);if(m&&p.append(m),n&&!r){const t=document.createElement("div");t.className="designbase-wc-sidebar__user";const s=this.createUserDropdown(a);s&&t.append(s);const i=document.createElement("div");i.className="designbase-wc-sidebar__user-info",i.setAttribute("role","button"),i.setAttribute("tabindex","0"),i.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");r.className="designbase-wc-sidebar__user-avatar",r.setAttribute("size","s"),r.setAttribute("initials",n.name),r.setAttribute("alt",n.name),n.avatar&&r.setAttribute("src",n.avatar);const o=document.createElement("div");o.className="designbase-wc-sidebar__user-details";const c=document.createElement("div");if(c.className="designbase-wc-sidebar__user-name",c.textContent=n.name,o.append(c),n.email){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-email",e.textContent=n.email,o.append(e)}if(i.append(r,o),a.length){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-more",t.setAttribute("aria-hidden","true"),t.append(e("more-vertical",16)),i.append(t),i.setAttribute("aria-haspopup","menu")}i.addEventListener("click",()=>{a.length&&(this.userMenuOpen=!this.userMenuOpen,this.projectMenuOpen=!1,this.render())}),t.append(i),p.append(t)}else if(n&&r){const e=document.createElement("div");e.className=["designbase-wc-sidebar__user-collapsed",this.userMenuOpen&&"designbase-wc-sidebar__user-collapsed--open"].filter(Boolean).join(" "),e.setAttribute("role","button"),e.setAttribute("tabindex","0"),e.setAttribute("aria-label",n.name),e.setAttribute("aria-expanded",String(this.userMenuOpen)),a.length&&e.setAttribute("aria-haspopup","menu");const t=document.createElement("db-avatar");if(t.className="designbase-wc-sidebar__user-avatar-collapsed",t.setAttribute("size","s"),t.setAttribute("initials",n.name),t.setAttribute("alt",n.name),n.avatar&&t.setAttribute("src",n.avatar),e.append(t),!this.userMenuOpen){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=n.name,t.setAttribute("role","tooltip"),e.append(t)}const s=this.createUserDropdown(a,!0);s&&e.append(s),e.addEventListener("click",e=>{a.length&&(e.target.closest(".designbase-wc-sidebar__user-dropdown")||(this.userMenuOpen=!this.userMenuOpen,this.projectMenuOpen=!1,this.render()))}),p.append(e)}d.append(p),this.append(d),this.renderNav(),this.renderBottomNav()}}customElements.get("db-sidebar")||customElements.define("db-sidebar",DbSidebar);export{DbSidebar};

package/dist/esm/components/marketing-block-host-utils.js

@@ -0,0 +1 @@
+const t=["full-width","full-height","overflow-visible"];function syncMarketingBlockHost(o,s){for(const l of t)o.classList.toggle(`${s}--${l}`,o.hasAttribute(l))}export{syncMarketingBlockHost};