@designbasekorea/ui-wc 0.2.2 → 0.4.0

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

@@ -3,9 +3,34 @@ interface DbNavbarItem {
     label: string;
     href?: string;
     icon?: string;
+    /** 메가 메뉴 링크에서 라벨 아래 표시되는 보조 설명 */
+    description?: string;
     active?: boolean;
     disabled?: boolean;
     children?: DbNavbarItem[];
+    /** children 대신 메가 메뉴(다단 패널) 스타일로 렌더링 */
+    megaMenu?: boolean;
+    /** 메가 메뉴 컬럼 목록 */
+    columns?: DbNavbarMegaColumn[];
+    /** 메가 메뉴 우측 강조(피처드) 영역 */
+    featured?: DbNavbarMegaFeatured;
+}
+interface DbNavbarMegaColumn {
+    id: string;
+    /** 컬럼 상단 제목 */
+    title?: string;
+    /** 컬럼 내 링크 목록 */
+    items: DbNavbarItem[];
+}
+interface DbNavbarMegaFeatured {
+    title?: string;
+    description?: string;
+    /** 배경 이미지 URL */
+    image?: string;
+    href?: string;
+    /** CTA 텍스트 (예: 자세히 보기) */
+    ctaLabel?: string;
+    icon?: string;
 }
 interface DbNavbarUserProfile {
     name: string;
@@ -38,10 +63,16 @@ declare class DbNavbar extends HTMLElement {
     private unbindOutsideClick;
     private dispatchItemClick;
     private syncHostClasses;
+    private isMegaMenu;
+    private createNavToggleButton;
+    private createMegaLink;
+    private createMegaMenu;
+    private createMegaFeatured;
     private createDesktopNavItem;
     private createUserMenuItemElement;
     private bindSearchEvents;
     private applyAvatarProfile;
+    private getMobileChildren;
     private createMobileMenuItem;
     private updateUserMenuVisibility;
     private renderMobileMenu;
@@ -54,4 +85,4 @@ declare global {
 }
 
 export { DbNavbar };
-export type { DbNavbarItem, DbNavbarUserProfile };
+export type { DbNavbarItem, DbNavbarMegaColumn, DbNavbarMegaFeatured, DbNavbarUserProfile };

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","transparent"],n=["fixed","sticky","static"];function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileOpen=!1,this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems("items")}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseItems("user-menu-items")}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))}parseItems(e="items"){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}iconSize(e){return"s"===e?16:"l"===e?24:20}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{this.contains(e.target)||(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}dispatchItemClick(e,t){this.dispatchEvent(new CustomEvent("user"===t?"db-user-menu-item-click":"db-item-click",{bubbles:!0,composed:!0,detail:{item:e,source:t}}))}syncHostClasses(){const e=this.getAttribute("size")||"m",a=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"static";this.className=["designbase-wc-navbar",`designbase-wc-navbar--${t.includes(e)?e:"m"}`,`designbase-wc-navbar--${s.includes(a)?a:"default"}`,`designbase-wc-navbar--${n.includes(i)?i:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"].filter(Boolean).join(" ")}createDesktopNavItem(t,s){const n=document.createElement("li");n.className="designbase-wc-navbar__nav-item";if(Boolean(t.children?.length)){const a=document.createElement("div");a.className="designbase-wc-navbar__dropdown";const i=document.createElement("button");i.type="button",i.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),i.disabled=Boolean(t.disabled);const r=resolveIcon(t.icon);r&&i.append(e(r,s)),i.append(document.createTextNode(t.label));const d=e("chevron-down",12);d.classList.add("designbase-wc-navbar__chevron"),i.append(d);const c=document.createElement("ul");return c.className="designbase-wc-navbar__dropdown-menu",t.children.forEach(t=>{const n=document.createElement("li"),a=document.createElement("a");a.href=t.href||"#",a.className=["designbase-wc-navbar__dropdown-item",t.active&&"designbase-wc-navbar__dropdown-item--active",t.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);i&&a.append(e(i,s)),a.append(document.createTextNode(t.label)),a.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(a),c.append(n)}),a.append(i,c),n.append(a),n}const a=document.createElement("a");a.href=t.href||"#",a.className=["designbase-wc-navbar__nav-link",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);return i&&a.append(e(i,s)),a.append(document.createTextNode(t.label)),a.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(a),n}createUserMenuItemElement(e,t,s){const n=document.createElement("db-menu-item");return n.setAttribute("label",e.label),n.setAttribute("type","block"),n.setAttribute("menu-style","dropdown"),n.setAttribute("size",t),e.href&&n.setAttribute("href",e.href),e.icon&&n.setAttribute("icon",e.icon),e.disabled&&n.setAttribute("disabled",""),n.addEventListener("db-click",()=>{e.disabled||(s(),this.dispatchItemClick(e,"user"))}),n}bindSearchEvents(e){e.addEventListener("db-search",e=>{const t=e.detail,s=t.query??t.value??"";this.dispatchEvent(new CustomEvent("db-search",{bubbles:!0,composed:!0,detail:{query:s,value:s}}))})}applyAvatarProfile(e,t,s){e.setAttribute("size","s"===s?"s":"l"===s?"l":"m"),e.setAttribute("initials",t.name),e.setAttribute("alt",t.name),t.avatar&&e.setAttribute("src",t.avatar),void 0!==t.badge&&e.setAttribute("badge",String(t.badge)),t.badgeVariant&&e.setAttribute("badge-variant",t.badgeVariant),t.badgeStyle&&e.setAttribute("badge-style",t.badgeStyle),t.badgeText&&e.setAttribute("badge-text",t.badgeText)}createMobileMenuItem(e,t){const s=Boolean(e.children?.length),n=Boolean(this.expandedMobile[e.id]),a=document.createElement("db-menu-item");return a.setAttribute("label",e.label),a.setAttribute("type","block"),a.setAttribute("menu-style","accordion"),a.setAttribute("size",t),e.href&&a.setAttribute("href",e.href),e.icon&&a.setAttribute("icon",e.icon),e.active&&a.setAttribute("active",""),e.disabled&&a.setAttribute("disabled",""),s&&(a.setAttribute("expandable",""),a.subItems=(e.children||[]).map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled})),n&&a.setAttribute("expanded","")),a.addEventListener("db-click",()=>{if(!e.disabled){if(s)return this.expandedMobile[e.id]=!n,void this.renderMobileMenu();this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render()}}),a.addEventListener("db-child-click",e=>{const t=e.detail;this.mobileOpen=!1,this.dispatchItemClick(t.child,"mobile"),this.render()}),a}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-navbar__user-dropdown-menu");e&&(e.hidden=!this.userMenuOpen)}renderMobileMenu(){const e=this.querySelector(".designbase-wc-navbar__mobile-nav-list");if(!e)return;const t=this.getAttribute("size")||"m",s=this.parseItems();e.replaceChildren(...s.map(e=>this.createMobileMenuItem(e,t)))}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","메인 네비게이션");const t=this.getAttribute("size")||"m",s=this.iconSize(t),n=this.parseItems(),a=this.parseItems("user-menu-items"),i=this.parseUserProfile(),r=this.hasAttribute("is-authenticated"),d=this.hasAttribute("show-search");this.replaceChildren();const c=document.createElement("div");c.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-navbar__left";const o=document.createElement("div");o.className="designbase-wc-navbar__brand";const b=document.createElement("div");b.className="designbase-wc-navbar__logo";const u=document.createElement("db-logo");u.setAttribute("type","designbase"),u.setAttribute("size","s"),u.setAttribute("clickable",""),u.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),b.append(u),o.append(b),l.append(o);const m=document.createElement("div");m.className="designbase-wc-navbar__right";const p=document.createElement("div");p.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const h=document.createElement("ul");if(h.className="designbase-wc-navbar__nav-list",n.forEach(e=>h.append(this.createDesktopNavItem(e,s))),p.append(h),m.append(p),d){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const s=document.createElement("db-search-bar");s.setAttribute("variant","outlined"),s.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),s.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(s),e.append(s),m.append(e)}const v=document.createElement("div");if(v.className="designbase-wc-navbar__user-menu",r&&i){const s=document.createElement("div");s.className="designbase-wc-navbar__user-dropdown";const n=document.createElement("button");n.type="button",n.className="designbase-wc-navbar__user-toggle",n.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");this.applyAvatarProfile(r,i,t);const d=document.createElement("span");d.className="designbase-wc-navbar__user-name",d.textContent=i.name,n.append(r,d,e("chevron-down",12)),n.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,n.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const c=document.createElement("ul");if(c.className="designbase-wc-navbar__user-dropdown-menu",c.hidden=!this.userMenuOpen,i.email){const e=document.createElement("li");e.className="designbase-wc-navbar__user-info";const t=document.createElement("span");t.className="designbase-wc-navbar__user-email",t.textContent=i.email,e.append(t),c.append(e)}a.forEach(e=>{const s=document.createElement("li");s.append(this.createUserMenuItemElement(e,t,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),c.append(s)}),s.append(n,c),v.append(s)}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),v.append(e)}m.append(v);const g=document.createElement("button");g.type="button",g.className="designbase-wc-navbar__mobile-toggle",g.setAttribute("aria-expanded",String(this.mobileOpen)),g.setAttribute("aria-label","메뉴 열기");for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",g.append(e)}if(g.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render()}),c.append(l,m,g),this.append(c),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",d){const t=document.createElement("div");t.className="designbase-wc-navbar__mobile-search";const s=document.createElement("db-search-bar");s.setAttribute("variant","outlined"),s.setAttribute("size","s"),s.setAttribute("full-width",""),s.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(s),t.append(s),e.append(t)}const t=document.createElement("ul");t.className="designbase-wc-navbar__mobile-nav-list",e.append(t);const s=document.createElement("div");if(s.className="designbase-wc-navbar__mobile-user",r&&i){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,i,"m");const n=document.createElement("div"),r=document.createElement("div");if(r.className="designbase-wc-navbar__mobile-user-name",r.textContent=i.name,n.append(r),i.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=i.email,n.append(e)}if(e.append(t,n),s.append(e),a.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",a.forEach(t=>{const s=document.createElement("li");s.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(s)}),s.append(e)}}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),s.append(e)}e.append(s),this.append(e),this.renderMobileMenu()}}}customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],a=["default","transparent"],n=["fixed","sticky","static"];function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileOpen=!1,this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems("items")}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseItems("user-menu-items")}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))}parseItems(e="items"){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}iconSize(e){return"s"===e?16:"l"===e?24:20}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{this.contains(e.target)||(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}dispatchItemClick(e,t){this.dispatchEvent(new CustomEvent("user"===t?"db-user-menu-item-click":"db-item-click",{bubbles:!0,composed:!0,detail:{item:e,source:t}}))}syncHostClasses(){const e=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"static";this.className=["designbase-wc-navbar",`designbase-wc-navbar--${t.includes(e)?e:"m"}`,`designbase-wc-navbar--${a.includes(s)?s:"default"}`,`designbase-wc-navbar--${n.includes(i)?i:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"].filter(Boolean).join(" ")}isMegaMenu(e){return Boolean(e.megaMenu&&e.columns?.length)}createNavToggleButton(t,a){const n=document.createElement("button");n.type="button",n.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),n.disabled=Boolean(t.disabled);const s=resolveIcon(t.icon);s&&n.append(e(s,a)),n.append(document.createTextNode(t.label));const i=e("chevron-down",12);return i.classList.add("designbase-wc-navbar__chevron"),n.append(i),n}createMegaLink(t,a){const n=document.createElement("a");n.href=t.href||"#",n.className=["designbase-wc-navbar__mega-link",t.active&&"designbase-wc-navbar__mega-link--active",t.disabled&&"designbase-wc-navbar__mega-link--disabled"].filter(Boolean).join(" ");const s=resolveIcon(t.icon);if(s){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-link-icon",t.append(e(s,a)),n.append(t)}const i=document.createElement("span");i.className="designbase-wc-navbar__mega-link-body";const r=document.createElement("span");if(r.className="designbase-wc-navbar__mega-link-label",r.textContent=t.label,i.append(r),t.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-link-desc",e.textContent=t.description,i.append(e)}return n.append(i),n.addEventListener("click",e=>{e.preventDefault(),t.disabled||this.dispatchItemClick(t,"nav")}),n}createMegaMenu(e,t){const a=document.createElement("li");a.className="designbase-wc-navbar__nav-item designbase-wc-navbar__nav-item--mega";const n=this.createNavToggleButton(e,t),s=document.createElement("div");s.className="designbase-wc-navbar__mega";const i=document.createElement("div");i.className="designbase-wc-navbar__mega-inner";const r=document.createElement("div");return r.className="designbase-wc-navbar__mega-columns",r.style.setProperty("--db-navbar-mega-columns",String(e.columns.length)),e.columns.forEach(e=>{const a=document.createElement("div");if(a.className="designbase-wc-navbar__mega-column",e.title){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-column-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-navbar__mega-list",e.items.forEach(e=>{const a=document.createElement("li");a.append(this.createMegaLink(e,t)),n.append(a)}),a.append(n),r.append(a)}),i.append(r),e.featured&&i.append(this.createMegaFeatured(e.featured,t)),s.append(i),a.append(n,s),a}createMegaFeatured(t,a){const n=document.createElement("a");n.href=t.href||"#",n.className="designbase-wc-navbar__mega-featured",t.image&&(n.style.setProperty("--db-navbar-mega-featured-image",`url("${t.image}")`),n.classList.add("designbase-wc-navbar__mega-featured--image"));const s=resolveIcon(t.icon);if(s){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-icon",t.append(e(s,a+4)),n.append(t)}if(t.title){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-title",e.textContent=t.title,n.append(e)}if(t.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-desc",e.textContent=t.description,n.append(e)}if(t.ctaLabel){const a=document.createElement("span");a.className="designbase-wc-navbar__mega-featured-cta",a.append(document.createTextNode(t.ctaLabel)),a.append(e("chevron-right",14)),n.append(a)}return n.addEventListener("click",e=>{e.preventDefault(),this.dispatchItemClick({id:`${t.href||"featured"}`,label:t.title||"featured",href:t.href},"nav")}),n}createDesktopNavItem(t,a){if(this.isMegaMenu(t))return this.createMegaMenu(t,a);const n=document.createElement("li");n.className="designbase-wc-navbar__nav-item";if(Boolean(t.children?.length)){const s=document.createElement("div");s.className="designbase-wc-navbar__dropdown";const i=document.createElement("button");i.type="button",i.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),i.disabled=Boolean(t.disabled);const r=resolveIcon(t.icon);r&&i.append(e(r,a)),i.append(document.createTextNode(t.label));const c=e("chevron-down",12);c.classList.add("designbase-wc-navbar__chevron"),i.append(c);const d=document.createElement("ul");return d.className="designbase-wc-navbar__dropdown-menu",t.children.forEach(t=>{const n=document.createElement("li"),s=document.createElement("a");s.href=t.href||"#",s.className=["designbase-wc-navbar__dropdown-item",t.active&&"designbase-wc-navbar__dropdown-item--active",t.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);i&&s.append(e(i,a)),s.append(document.createTextNode(t.label)),s.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(s),d.append(n)}),s.append(i,d),n.append(s),n}const s=document.createElement("a");s.href=t.href||"#",s.className=["designbase-wc-navbar__nav-link",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);return i&&s.append(e(i,a)),s.append(document.createTextNode(t.label)),s.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(s),n}createUserMenuItemElement(e,t,a){const n=document.createElement("db-menu-item");return n.setAttribute("label",e.label),n.setAttribute("type","block"),n.setAttribute("menu-style","dropdown"),n.setAttribute("size",t),e.href&&n.setAttribute("href",e.href),e.icon&&n.setAttribute("icon",e.icon),e.disabled&&n.setAttribute("disabled",""),n.addEventListener("db-click",()=>{e.disabled||(a(),this.dispatchItemClick(e,"user"))}),n}bindSearchEvents(e){e.addEventListener("db-search",e=>{const t=e.detail,a=t.query??t.value??"";this.dispatchEvent(new CustomEvent("db-search",{bubbles:!0,composed:!0,detail:{query:a,value:a}}))})}applyAvatarProfile(e,t,a){e.setAttribute("size","s"===a?"s":"l"===a?"l":"m"),e.setAttribute("initials",t.name),e.setAttribute("alt",t.name),t.avatar&&e.setAttribute("src",t.avatar),void 0!==t.badge&&e.setAttribute("badge",String(t.badge)),t.badgeVariant&&e.setAttribute("badge-variant",t.badgeVariant),t.badgeStyle&&e.setAttribute("badge-style",t.badgeStyle),t.badgeText&&e.setAttribute("badge-text",t.badgeText)}getMobileChildren(e){if(this.isMegaMenu(e)){const t=(e.columns||[]).flatMap(e=>e.items);return e.featured?.href&&t.push({id:`${e.id}-featured`,label:e.featured.title||e.featured.ctaLabel||e.label,href:e.featured.href,icon:e.featured.icon}),t}return e.children||[]}createMobileMenuItem(e,t){const a=this.getMobileChildren(e),n=a.length>0,s=Boolean(this.expandedMobile[e.id]),i=document.createElement("db-menu-item");return i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","accordion"),i.setAttribute("size",t),e.href&&i.setAttribute("href",e.href),e.icon&&i.setAttribute("icon",e.icon),e.active&&i.setAttribute("active",""),e.disabled&&i.setAttribute("disabled",""),n&&(i.setAttribute("expandable",""),i.subItems=a.map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled})),s&&i.setAttribute("expanded","")),i.addEventListener("db-click",()=>{if(!e.disabled){if(n)return this.expandedMobile[e.id]=!s,void this.renderMobileMenu();this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render()}}),i.addEventListener("db-child-click",e=>{const t=e.detail;this.mobileOpen=!1,this.dispatchItemClick(t.child,"mobile"),this.render()}),i}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-navbar__user-dropdown-menu");e&&(e.hidden=!this.userMenuOpen)}renderMobileMenu(){const e=this.querySelector(".designbase-wc-navbar__mobile-nav-list");if(!e)return;const t=this.getAttribute("size")||"m",a=this.parseItems();e.replaceChildren(...a.map(e=>this.createMobileMenuItem(e,t)))}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","메인 네비게이션");const t=this.getAttribute("size")||"m",a=this.iconSize(t),n=this.parseItems(),s=this.parseItems("user-menu-items"),i=this.parseUserProfile(),r=this.hasAttribute("is-authenticated"),c=this.hasAttribute("show-search");this.replaceChildren();const d=document.createElement("div");d.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-navbar__left";const o=document.createElement("div");o.className="designbase-wc-navbar__brand";const b=document.createElement("div");b.className="designbase-wc-navbar__logo";const u=document.createElement("db-logo");u.setAttribute("type","designbase"),u.setAttribute("size","s"),u.setAttribute("clickable",""),u.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),b.append(u),o.append(b),l.append(o);const m=document.createElement("div");m.className="designbase-wc-navbar__right";const p=document.createElement("div");p.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const h=document.createElement("ul");if(h.className="designbase-wc-navbar__nav-list",n.forEach(e=>h.append(this.createDesktopNavItem(e,a))),p.append(h),m.append(p),c){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),e.append(a),m.append(e)}const v=document.createElement("div");if(v.className="designbase-wc-navbar__user-menu",r&&i){const a=document.createElement("div");a.className="designbase-wc-navbar__user-dropdown";const n=document.createElement("button");n.type="button",n.className="designbase-wc-navbar__user-toggle",n.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");this.applyAvatarProfile(r,i,t);const c=document.createElement("span");c.className="designbase-wc-navbar__user-name",c.textContent=i.name,n.append(r,c,e("chevron-down",12)),n.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,n.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const d=document.createElement("ul");if(d.className="designbase-wc-navbar__user-dropdown-menu",d.hidden=!this.userMenuOpen,i.email){const e=document.createElement("li");e.className="designbase-wc-navbar__user-info";const t=document.createElement("span");t.className="designbase-wc-navbar__user-email",t.textContent=i.email,e.append(t),d.append(e)}s.forEach(e=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(e,t,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),d.append(a)}),a.append(n,d),v.append(a)}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),v.append(e)}m.append(v);const g=document.createElement("button");g.type="button",g.className="designbase-wc-navbar__mobile-toggle",g.setAttribute("aria-expanded",String(this.mobileOpen)),g.setAttribute("aria-label","메뉴 열기");for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",g.append(e)}if(g.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render()}),d.append(l,m,g),this.append(d),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",c){const t=document.createElement("div");t.className="designbase-wc-navbar__mobile-search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"),a.setAttribute("full-width",""),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),t.append(a),e.append(t)}const t=document.createElement("ul");t.className="designbase-wc-navbar__mobile-nav-list",e.append(t);const a=document.createElement("div");if(a.className="designbase-wc-navbar__mobile-user",r&&i){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,i,"m");const n=document.createElement("div"),r=document.createElement("div");if(r.className="designbase-wc-navbar__mobile-user-name",r.textContent=i.name,n.append(r),i.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=i.email,n.append(e)}if(e.append(t,n),a.append(e),s.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",s.forEach(t=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(a)}),a.append(e)}}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),a.append(e)}e.append(a),this.append(e),this.renderMobileMenu()}}}customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};

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

@@ -1 +1 @@
-const e=["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end","left-start","left-end","right-start","right-end"],t=["click","hover","focus","manual"];class DbPopover extends HTMLElement{constructor(){super(...arguments),this.onDocMouseDown=null,this.onDocKeyDown=null,this.onExternalTriggerClick=null,this.handleTriggerClick=e=>{"click"===this.resolvedTrigger()&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!this.isOpen()))},this.handleTriggerMouseEnter=()=>{"hover"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerMouseLeave=()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()},this.handleTriggerFocus=()=>{"focus"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerBlur=()=>{"focus"===this.resolvedTrigger()&&this.scheduleClose()},this.handleReposition=()=>{this.isOpen()&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>{this.positionPanel(),this.repositionRaf=void 0}))}}static get observedAttributes(){return["open","placement","position","title","content","size","variant","trigger","delay","hide-delay","always-show","disabled","max-width","show-arrow","close-on-outside-click","close-on-escape","trigger-id"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-popover-host"),this.hasAttribute("placement")||this.hasAttribute("position")||this.setAttribute("placement","top"),this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),this.bindExternalTrigger(),this.attachGlobalListeners(),this.syncOpenFromAttributes()}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.unbindExternalTrigger(),this.detachGlobalListeners(),this.removePanel()}attributeChangedCallback(e){this.isConnected&&("trigger-id"===e&&(this.unbindExternalTrigger(),this.bindExternalTrigger()),"open"!==e&&"always-show"!==e&&"disabled"!==e?("content"===e&&this.bodyEl&&(this.bodyEl.textContent=this.getAttribute("content")||""),this.isOpen()&&(this.updatePanelMetadata(),requestAnimationFrame(()=>this.positionPanel()))):this.syncOpenFromAttributes())}resolvedPlacement(){const t=this.getAttribute("position")||this.getAttribute("placement")||"top";return e.includes(t)?t:"top"}resolvedTrigger(){const e=this.getAttribute("trigger")||"click";return t.includes(e)?e:"click"}isControlled(){return this.hasAttribute("open")}isOpen(){return!this.hasAttribute("disabled")&&(!!this.hasAttribute("always-show")||(this.isControlled()?"false"!==this.getAttribute("open"):this.panel?.classList.contains("designbase-wc-popover--visible")??!1))}setOpen(e){this.hasAttribute("disabled")||this.hasAttribute("always-show")||(this.isControlled()?e?this.setAttribute("open",""):this.removeAttribute("open"):e?this.showPanel():this.hidePanel(),this.dispatchEvent(new CustomEvent("db-open-change",{bubbles:!0,composed:!0,detail:{open:e}})),e||this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}syncOpenFromAttributes(){this.hasAttribute("always-show")?this.showPanel():this.isControlled()&&("false"!==this.getAttribute("open")?this.showPanel():this.hidePanel())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(e){return e.startsWith("top")?"top":e.startsWith("bottom")?"bottom":e.startsWith("left")?"left":"right"}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[])}ensureTriggerWrap(){this.triggerWrap||(this.triggerWrap=document.createElement("span"),this.triggerWrap.className="designbase-wc-popover__trigger",this.triggerWrap.setAttribute("data-wc-internal",""),this.triggerWrap.tabIndex=0,this.triggerWrap.addEventListener("click",this.handleTriggerClick),this.triggerWrap.addEventListener("mouseenter",this.handleTriggerMouseEnter),this.triggerWrap.addEventListener("mouseleave",this.handleTriggerMouseLeave),this.triggerWrap.addEventListener("focus",this.handleTriggerFocus),this.triggerWrap.addEventListener("blur",this.handleTriggerBlur))}mountTriggerChildren(e){this.triggerWrap&&e.forEach(e=>{e.parentElement!==this.triggerWrap&&this.triggerWrap.append(e)})}collectBodyChildren(){return Array.from(this.querySelectorAll('[slot="content"]'))}bindExternalTrigger(){const e=this.getAttribute("trigger-id");e&&(this.triggerEl=document.getElementById(e),this.triggerEl&&(this.onExternalTriggerClick=()=>{"click"===this.resolvedTrigger()&&this.setOpen(!this.isOpen())},this.triggerEl.addEventListener("click",this.onExternalTriggerClick)))}unbindExternalTrigger(){this.triggerEl&&this.onExternalTriggerClick&&this.triggerEl.removeEventListener("click",this.onExternalTriggerClick),this.triggerEl=null,this.onExternalTriggerClick=null}attachGlobalListeners(){this.onDocMouseDown=e=>{if(!this.isOpen()||"false"===this.getAttribute("close-on-outside-click"))return;const t=e.target;this.panel?.contains(t)||this.triggerWrap?.contains(t)||this.triggerEl?.contains(t)||this.setOpen(!1)},this.onDocKeyDown=e=>{"Escape"===e.key&&this.isOpen()&&"false"!==this.getAttribute("close-on-escape")&&this.setOpen(!1)},document.addEventListener("mousedown",this.onDocMouseDown),document.addEventListener("keydown",this.onDocKeyDown)}detachGlobalListeners(){this.onDocMouseDown&&document.removeEventListener("mousedown",this.onDocMouseDown),this.onDocKeyDown&&document.removeEventListener("keydown",this.onDocKeyDown),this.onDocMouseDown=null,this.onDocKeyDown=null}scheduleOpen(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("delay")||0)):0;this.showTimer=setTimeout(()=>this.showPanel(),e)}scheduleClose(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("hide-delay")||80)):0;this.hideTimer=setTimeout(()=>this.setOpen(!1),e)}getTriggerRect(){const e=this.triggerEl||this.triggerWrap;return e?.getBoundingClientRect()}flipPlacementIfNeeded(e,t,i){const s=window.innerHeight,r=window.innerWidth,o=this.groupOf(e),n=t.top-i.height-8>=8,h=t.bottom+8+i.height<=s-8,a=t.left-i.width-8>=8,l=t.right+8+i.width<=r-8;return"top"===o&&!n&&h?e.replace(/^top/,"bottom"):"bottom"===o&&!h&&n?e.replace(/^bottom/,"top"):"left"===o&&!a&&l?e.replace(/^left/,"right"):"right"===o&&!l&&a?e.replace(/^right/,"left"):e}applyCoords(e,t,i){let s=0,r=0,o=0,n=0;switch(e){case"top":s=t.top-i.height-8,r=t.left+t.width/2-i.width/2,o=i.height,n=i.width/2-4;break;case"top-start":s=t.top-i.height-8,r=t.left,o=i.height,n=12;break;case"top-end":s=t.top-i.height-8,r=t.right-i.width,o=i.height,n=i.width-12;break;case"bottom":s=t.bottom+8,r=t.left+t.width/2-i.width/2,o=-4,n=i.width/2-4;break;case"bottom-start":s=t.bottom+8,r=t.left,o=-4,n=12;break;case"bottom-end":s=t.bottom+8,r=t.right-i.width,o=-4,n=i.width-12;break;case"left":s=t.top+t.height/2-i.height/2,r=t.left-i.width-8,o=i.height/2-4,n=i.width;break;case"left-start":s=t.top,r=t.left-i.width-8,o=12,n=i.width;break;case"left-end":s=t.bottom-i.height,r=t.left-i.width-8,o=i.height-12,n=i.width;break;case"right":s=t.top+t.height/2-i.height/2,r=t.right+8,o=i.height/2-4,n=-4;break;case"right-start":s=t.top,r=t.right+8,o=12,n=-4;break;case"right-end":s=t.bottom-i.height,r=t.right+8,o=i.height-12,n=-4}const h=window.innerWidth,a=window.innerHeight;return r<8&&(r=8),r+i.width>h-8&&(r=h-i.width-8),s<8&&(s=8),s+i.height>a-8&&(s=a-i.height-8),{top:s,left:r,aTop:o,aLeft:n,placement:e}}positionPanel(){if(!this.panel)return;const t=this.getTriggerRect();if(!t)return;this.panel.offsetHeight;const i=this.panel.getBoundingClientRect(),s=this.resolvedPlacement(),r=this.flipPlacementIfNeeded(s,t,i),{top:o,left:n,aTop:h,aLeft:a}=this.applyCoords(r,t,i),l=Number(this.getAttribute("max-width")||300);this.panel.style.top=`${o}px`,this.panel.style.left=`${n}px`,this.panel.style.maxWidth=`${l}px`,this.panel.dataset.placementGroup=this.groupOf(r),e.forEach(e=>{this.panel.classList.toggle(`designbase-wc-popover--${e}`,e===r)}),this.arrowEl&&(this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${r}`,this.arrowEl.style.top=`${h}px`,this.arrowEl.style.left=`${a}px`)}revealPanel(){this.panel&&(this.panel.classList.remove("designbase-wc-popover--visible"),this.positionPanel(),this.panel.offsetHeight,this.positionPanel(),this.panel.classList.add("designbase-wc-popover--visible"))}updatePanelMetadata(){if(!this.panel)return;const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.resolvedPlacement();this.panel.className=["designbase-wc-popover",`designbase-wc-popover--${e}`,`designbase-wc-popover--${t}`,`designbase-wc-popover--${i}`,this.isOpen()?"designbase-wc-popover--visible":"",this.hasAttribute("disabled")?"designbase-wc-popover--disabled":""].filter(Boolean).join(" ")}ensurePanel(){if(this.panel)return;const e=document.createElement("div");e.className="designbase-wc-popover",e.setAttribute("data-wc-internal",""),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","false"),e.style.position="fixed",e.style.zIndex="9999";const t=document.createElement("div");t.className="designbase-wc-popover__content";const i=document.createElement("div");i.className="designbase-wc-popover__header";const s=document.createElement("h3");s.className="designbase-wc-popover__title";const r=document.createElement("db-button");r.className="designbase-wc-popover__close-button",r.setAttribute("variant","ghost"),r.setAttribute("size","s"),r.setAttribute("icon-only",""),r.setAttribute("start-icon","close"),r.setAttribute("aria-label","팝오버 닫기"),r.addEventListener("db-click",e=>{e.stopPropagation(),this.setOpen(!1)}),i.append(s,r),this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-popover__body",t.append(i,this.bodyEl),e.append(t),"false"!==this.getAttribute("show-arrow")&&(this.arrowEl=document.createElement("div"),this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`,e.append(this.arrowEl)),this.panel=e,this.panel.querySelector(".designbase-wc-popover__title").textContent=this.getAttribute("title")||"",this.panel.querySelector(".designbase-wc-popover__title").hidden=!this.getAttribute("title"),document.body.append(e),e.addEventListener("mouseenter",()=>{"hover"===this.resolvedTrigger()&&this.clearTimers()}),e.addEventListener("mouseleave",()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()})}showPanel(){if(this.hasAttribute("disabled"))return;this.ensurePanel(),this.updatePanelMetadata();const e=this.collectBodyChildren();e.length>0?this.bodyEl.replaceChildren(...e.map(e=>e.cloneNode(!0))):this.bodyEl.textContent=this.getAttribute("content")||"";const t=this.panel.querySelector(".designbase-wc-popover__title");t.textContent=this.getAttribute("title")||"",t.hidden=!this.getAttribute("title"),requestAnimationFrame(()=>{this.revealPanel(),window.addEventListener("scroll",this.handleReposition,!0),window.addEventListener("resize",this.handleReposition)})}hidePanel(){this.panel?.classList.remove("designbase-wc-popover--visible"),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.hasAttribute("always-show")||this.removePanel()}removePanel(){this.panel?.remove(),this.panel=void 0,this.bodyEl=void 0,this.arrowEl=void 0}render(){this.ensureTriggerWrap();const e=this.collectTriggerChildren();this.mountTriggerChildren(e);const t=Boolean(this.getAttribute("trigger-id"));this.triggerWrap&&(e.length>0||!t?this.triggerWrap.parentElement!==this&&this.append(this.triggerWrap):this.triggerWrap.parentElement===this&&this.triggerWrap.remove()),this.hasAttribute("always-show")&&this.showPanel()}}customElements.get("db-popover")||customElements.define("db-popover",DbPopover);export{DbPopover};
+const e=["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end","left-start","left-end","right-start","right-end"],t=["click","hover","focus","manual"];class DbPopover extends HTMLElement{constructor(){super(...arguments),this.onDocMouseDown=null,this.onDocKeyDown=null,this.onExternalTriggerClick=null,this.handleTriggerClick=e=>{"click"===this.resolvedTrigger()&&(e.preventDefault(),e.stopPropagation(),this.setOpen(!this.isOpen()))},this.handleTriggerMouseEnter=()=>{"hover"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerMouseLeave=()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()},this.handleTriggerFocus=()=>{"focus"===this.resolvedTrigger()&&this.scheduleOpen()},this.handleTriggerBlur=()=>{"focus"===this.resolvedTrigger()&&this.scheduleClose()},this.handleReposition=()=>{this.isOpen()&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>{this.positionPanel(),this.repositionRaf=void 0}))}}static get observedAttributes(){return["open","placement","position","title","content","size","variant","trigger","delay","hide-delay","always-show","disabled","max-width","show-arrow","close-on-outside-click","close-on-escape","trigger-id"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}connectedCallback(){this.classList.add("designbase-wc-popover-host"),this.hasAttribute("placement")||this.hasAttribute("position")||this.setAttribute("placement","top"),this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),this.bindExternalTrigger(),this.attachGlobalListeners(),this.syncOpenFromAttributes()}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.unbindExternalTrigger(),this.detachGlobalListeners(),this.removePanel()}attributeChangedCallback(e){this.isConnected&&("trigger-id"===e&&(this.unbindExternalTrigger(),this.bindExternalTrigger()),"open"!==e&&"always-show"!==e&&"disabled"!==e?("content"===e&&this.bodyEl&&(this.bodyEl.textContent=this.getAttribute("content")||""),this.isOpen()&&(this.updatePanelMetadata(),requestAnimationFrame(()=>this.positionPanel()))):this.syncOpenFromAttributes())}resolvedPlacement(){const t=this.getAttribute("position")||this.getAttribute("placement")||"top";return e.includes(t)?t:"top"}resolvedTrigger(){const e=this.getAttribute("trigger")||"click";return t.includes(e)?e:"click"}isControlled(){return this.hasAttribute("open")}isOpen(){return!this.hasAttribute("disabled")&&(!!this.hasAttribute("always-show")||(this.isControlled()?"false"!==this.getAttribute("open"):this.panel?.classList.contains("designbase-wc-popover--visible")??!1))}setOpen(e){this.hasAttribute("disabled")||this.hasAttribute("always-show")||(this.isControlled()?e?this.setAttribute("open",""):this.removeAttribute("open"):e?this.showPanel():this.hidePanel(),this.dispatchEvent(new CustomEvent("db-open-change",{bubbles:!0,composed:!0,detail:{open:e}})),e||this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})))}syncOpenFromAttributes(){this.hasAttribute("always-show")?this.showPanel():this.isControlled()&&("false"!==this.getAttribute("open")?this.showPanel():this.hidePanel())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(e){return e.startsWith("top")?"top":e.startsWith("bottom")?"bottom":e.startsWith("left")?"left":"right"}collectTriggerChildren(){const isInternalNode=e=>e.hasAttribute("data-wc-internal")||e===this.triggerWrap,e=Array.from(this.children).filter(e=>!isInternalNode(e));return e.length>0?e:Array.from(this.triggerWrap?.children||[])}ensureTriggerWrap(){this.triggerWrap||(this.triggerWrap=document.createElement("span"),this.triggerWrap.className="designbase-wc-popover__trigger",this.triggerWrap.setAttribute("data-wc-internal",""),this.triggerWrap.tabIndex=0,this.triggerWrap.addEventListener("click",this.handleTriggerClick),this.triggerWrap.addEventListener("mouseenter",this.handleTriggerMouseEnter),this.triggerWrap.addEventListener("mouseleave",this.handleTriggerMouseLeave),this.triggerWrap.addEventListener("focus",this.handleTriggerFocus),this.triggerWrap.addEventListener("blur",this.handleTriggerBlur))}mountTriggerChildren(e){this.triggerWrap&&e.forEach(e=>{e.parentElement!==this.triggerWrap&&this.triggerWrap.append(e)})}collectBodyChildren(){return Array.from(this.querySelectorAll('[slot="content"]'))}bindExternalTrigger(){const e=this.getAttribute("trigger-id");e&&(this.triggerEl=document.getElementById(e),this.triggerEl&&(this.onExternalTriggerClick=()=>{"click"===this.resolvedTrigger()&&this.setOpen(!this.isOpen())},this.triggerEl.addEventListener("click",this.onExternalTriggerClick)))}unbindExternalTrigger(){this.triggerEl&&this.onExternalTriggerClick&&this.triggerEl.removeEventListener("click",this.onExternalTriggerClick),this.triggerEl=null,this.onExternalTriggerClick=null}attachGlobalListeners(){this.onDocMouseDown=e=>{if(!this.isOpen()||"false"===this.getAttribute("close-on-outside-click"))return;const t=e.target;this.panel?.contains(t)||this.triggerWrap?.contains(t)||this.triggerEl?.contains(t)||this.setOpen(!1)},this.onDocKeyDown=e=>{"Escape"===e.key&&this.isOpen()&&"false"!==this.getAttribute("close-on-escape")&&this.setOpen(!1)},document.addEventListener("mousedown",this.onDocMouseDown),document.addEventListener("keydown",this.onDocKeyDown)}detachGlobalListeners(){this.onDocMouseDown&&document.removeEventListener("mousedown",this.onDocMouseDown),this.onDocKeyDown&&document.removeEventListener("keydown",this.onDocKeyDown),this.onDocMouseDown=null,this.onDocKeyDown=null}scheduleOpen(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("delay")||0)):0;this.showTimer=setTimeout(()=>this.showPanel(),e)}scheduleClose(){this.clearTimers();const e="hover"===this.resolvedTrigger()?Math.max(0,Number(this.getAttribute("hide-delay")||80)):0;this.hideTimer=setTimeout(()=>this.setOpen(!1),e)}getTriggerRect(){const e=this.triggerEl||this.triggerWrap;return e?.getBoundingClientRect()}flipPlacementIfNeeded(e,t,i){const s=window.innerHeight,r=window.innerWidth,o=this.groupOf(e),n=t.top-i.height-8>=8,a=t.bottom+8+i.height<=s-8,h=t.left-i.width-8>=8,l=t.right+8+i.width<=r-8;return"top"===o&&!n&&a?e.replace(/^top/,"bottom"):"bottom"===o&&!a&&n?e.replace(/^bottom/,"top"):"left"===o&&!h&&l?e.replace(/^left/,"right"):"right"===o&&!l&&h?e.replace(/^right/,"left"):e}applyCoords(e,t,i){let s=0,r=0,o=0,n=0;const a=i.height,h=i.width,l=16;switch(e){case"top":s=t.top-i.height-8,r=t.left+t.width/2-i.width/2,o=a-5,n=h/2-5;break;case"top-start":s=t.top-i.height-8,r=t.left,o=a-5,n=11;break;case"top-end":s=t.top-i.height-8,r=t.right-i.width,o=a-5,n=h-l-5;break;case"bottom":s=t.bottom+8,r=t.left+t.width/2-i.width/2,o=-5,n=h/2-5;break;case"bottom-start":s=t.bottom+8,r=t.left,o=-5,n=11;break;case"bottom-end":s=t.bottom+8,r=t.right-i.width,o=-5,n=h-l-5;break;case"left":s=t.top+t.height/2-i.height/2,r=t.left-i.width-8,o=a/2-5,n=h-5;break;case"left-start":s=t.top,r=t.left-i.width-8,o=11,n=h-5;break;case"left-end":s=t.bottom-i.height,r=t.left-i.width-8,o=a-l-5,n=h-5;break;case"right":s=t.top+t.height/2-i.height/2,r=t.right+8,o=a/2-5,n=-5;break;case"right-start":s=t.top,r=t.right+8,o=11,n=-5;break;case"right-end":s=t.bottom-i.height,r=t.right+8,o=a-l-5,n=-5}const d=window.innerWidth,c=window.innerHeight;return r<8&&(r=8),r+i.width>d-8&&(r=d-i.width-8),s<8&&(s=8),s+i.height>c-8&&(s=c-i.height-8),{top:s,left:r,aTop:o,aLeft:n,placement:e}}positionPanel(){if(!this.panel)return;const t=this.getTriggerRect();if(!t)return;const i=Number(this.getAttribute("max-width")||300);this.panel.style.maxWidth=`${i}px`,this.panel.offsetHeight;const s=this.panel.getBoundingClientRect(),r=this.resolvedPlacement(),o=this.flipPlacementIfNeeded(r,t,s),{top:n,left:a,aTop:h,aLeft:l}=this.applyCoords(o,t,s);this.panel.style.top=`${n}px`,this.panel.style.left=`${a}px`,this.panel.dataset.placementGroup=this.groupOf(o),e.forEach(e=>{this.panel.classList.toggle(`designbase-wc-popover--${e}`,e===o)}),this.arrowEl&&(this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${o}`,this.arrowEl.style.top=`${h}px`,this.arrowEl.style.left=`${l}px`)}revealPanel(){this.panel&&(this.panel.classList.remove("designbase-wc-popover--visible"),this.positionPanel(),this.panel.offsetHeight,this.positionPanel(),this.panel.classList.add("designbase-wc-popover--visible"))}updatePanelMetadata(){if(!this.panel)return;const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",i=this.resolvedPlacement();this.panel.className=["designbase-wc-popover",`designbase-wc-popover--${e}`,`designbase-wc-popover--${t}`,`designbase-wc-popover--${i}`,this.isOpen()?"designbase-wc-popover--visible":"",this.hasAttribute("disabled")?"designbase-wc-popover--disabled":""].filter(Boolean).join(" ")}ensurePanel(){if(this.panel)return;const e=document.createElement("div");e.className="designbase-wc-popover",e.setAttribute("data-wc-internal",""),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","false"),e.style.position="fixed",e.style.zIndex="9999";const t=document.createElement("div");t.className="designbase-wc-popover__content";const i=document.createElement("div");i.className="designbase-wc-popover__header";const s=document.createElement("h3");s.className="designbase-wc-popover__title";const r=document.createElement("db-button");r.className="designbase-wc-popover__close-button",r.setAttribute("variant","ghost"),r.setAttribute("size","s"),r.setAttribute("icon-only",""),r.setAttribute("start-icon","close"),r.setAttribute("aria-label","팝오버 닫기"),r.addEventListener("db-click",e=>{e.stopPropagation(),this.setOpen(!1)}),i.append(s,r),this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-popover__body",t.append(i,this.bodyEl),e.append(t),"false"!==this.getAttribute("show-arrow")&&(this.arrowEl=document.createElement("div"),this.arrowEl.className=`designbase-wc-popover__arrow designbase-wc-popover__arrow--${this.resolvedPlacement()}`,e.append(this.arrowEl)),this.panel=e,this.panel.querySelector(".designbase-wc-popover__title").textContent=this.getAttribute("title")||"",this.panel.querySelector(".designbase-wc-popover__title").hidden=!this.getAttribute("title"),document.body.append(e),e.addEventListener("mouseenter",()=>{"hover"===this.resolvedTrigger()&&this.clearTimers()}),e.addEventListener("mouseleave",()=>{"hover"===this.resolvedTrigger()&&this.scheduleClose()})}showPanel(){if(this.hasAttribute("disabled"))return;this.ensurePanel(),this.updatePanelMetadata();const e=this.collectBodyChildren();e.length>0?this.bodyEl.replaceChildren(...e.map(e=>e.cloneNode(!0))):this.bodyEl.textContent=this.getAttribute("content")||"";const t=this.panel.querySelector(".designbase-wc-popover__title");t.textContent=this.getAttribute("title")||"",t.hidden=!this.getAttribute("title"),requestAnimationFrame(()=>{this.revealPanel(),window.addEventListener("scroll",this.handleReposition,!0),window.addEventListener("resize",this.handleReposition)})}hidePanel(){this.panel?.classList.remove("designbase-wc-popover--visible"),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.hasAttribute("always-show")||this.removePanel()}removePanel(){this.panel?.remove(),this.panel=void 0,this.bodyEl=void 0,this.arrowEl=void 0}render(){this.ensureTriggerWrap();const e=this.collectTriggerChildren();this.mountTriggerChildren(e);const t=Boolean(this.getAttribute("trigger-id"));this.triggerWrap&&(e.length>0||!t?this.triggerWrap.parentElement!==this&&this.append(this.triggerWrap):this.triggerWrap.parentElement===this&&this.triggerWrap.remove()),this.hasAttribute("always-show")&&this.showPanel()}}customElements.get("db-popover")||customElements.define("db-popover",DbPopover);export{DbPopover};

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

@@ -1,10 +1,20 @@
 declare class DbProgress extends HTMLElement {
     static get observedAttributes(): string[];
+    private structureSignature;
+    private barEl?;
+    private linearValueEl?;
+    private circularBarEl?;
+    private circularValueEl?;
+    private circumference;
     get value(): number;
     set value(value: number);
     connectedCallback(): void;
     attributeChangedCallback(): void;
     private render;
+    private buildLinear;
+    private updateLinear;
+    private buildCircular;
+    private updateCircular;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-const e=["s","m","l"],t=["default","success","warning","danger"],s=["default","minimal"];function createSvgCircle(e,t,s,r,i,a){const n=document.createElementNS("http://www.w3.org/2000/svg","circle");return n.setAttribute("class",e),n.setAttribute("cx",String(t)),n.setAttribute("cy",String(s)),n.setAttribute("r",String(r)),n.setAttribute("stroke-width",String(i)),a&&Object.entries(a).forEach(([e,t])=>n.setAttribute(e,t)),n}class DbProgress extends HTMLElement{static get observedAttributes(){return["value","max","size","variant","type","circular-style","show-value","animated","striped"]}get value(){return Number(this.getAttribute("value")||0)}set value(e){this.setAttribute("value",String(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const r=Number(this.getAttribute("max")||100),i=Math.min(Math.max(this.value/r*100,0),100),a=this.getAttribute("size")||"m",n=this.getAttribute("variant")||"default",c=this.getAttribute("type")||"linear",u=this.getAttribute("circular-style")||"default",d=e.includes(a)?a:"m",l=t.includes(n)?n:"default",g=s.includes(u)?u:"default";if(this.className=["designbase-wc-progress",`designbase-wc-progress--size-${d}`,`designbase-wc-progress--variant-${l}`,`designbase-wc-progress--type-${c}`,"circular"===c&&"minimal"===g?"designbase-wc-progress--circular-minimal":"",this.hasAttribute("animated")?"designbase-wc-progress--animated":"",this.hasAttribute("striped")?"designbase-wc-progress--striped":""].filter(Boolean).join(" "),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(r)),this.setAttribute("aria-valuenow",String(this.value)),this.replaceChildren(),"circular"===c){const{svgSize:e,radius:t,strokeWidth:s,center:r}=function getCircularMetrics(e,t){if("minimal"===e)return{svgSize:20,radius:8,strokeWidth:2,center:10};switch(t){case"s":return{svgSize:64,radius:26,strokeWidth:4,center:32};case"l":return{svgSize:160,radius:62,strokeWidth:10,center:80};default:return{svgSize:120,radius:45,strokeWidth:8,center:60}}}(g,d),a=2*Math.PI*t,n=a-i/100*a,c=document.createElement("div");c.className="designbase-wc-progress__circular";const u=document.createElementNS("http://www.w3.org/2000/svg","svg");if(u.setAttribute("class","designbase-wc-progress__circular-svg"),u.setAttribute("width",String(e)),u.setAttribute("height",String(e)),u.setAttribute("viewBox",`0 0 ${e} ${e}`),u.setAttribute("aria-hidden","true"),u.append(createSvgCircle("designbase-wc-progress__circular-track",r,r,t,s),createSvgCircle("designbase-wc-progress__circular-bar",r,r,t,s,{"stroke-dasharray":String(a),"stroke-dashoffset":String(n),transform:`rotate(-90 ${r} ${r})`})),c.append(u),this.hasAttribute("show-value")&&"minimal"!==g){const e=document.createElement("span");e.className="designbase-wc-progress__circular-value",e.textContent=`${Math.round(i)}%`,c.append(e)}return void this.append(c)}const o=document.createElement("div");o.className="designbase-wc-progress__linear";const b=document.createElement("div");b.className="designbase-wc-progress__track";const h=document.createElement("div");if(h.className="designbase-wc-progress__bar",h.style.width=`${i}%`,b.append(h),o.append(b),this.hasAttribute("show-value")){const e=document.createElement("span");e.className="designbase-wc-progress__value",e.textContent=`${Math.round(i)}%`,o.append(e)}this.append(o)}}customElements.get("db-progress")||customElements.define("db-progress",DbProgress);export{DbProgress};
+const e=["s","m","l"],t=["default","success","warning","danger"],r=["default","minimal"];function createSvgCircle(e,t,r,s,i,a){const c=document.createElementNS("http://www.w3.org/2000/svg","circle");return c.setAttribute("class",e),c.setAttribute("cx",String(t)),c.setAttribute("cy",String(r)),c.setAttribute("r",String(s)),c.setAttribute("stroke-width",String(i)),a&&Object.entries(a).forEach(([e,t])=>c.setAttribute(e,t)),c}class DbProgress extends HTMLElement{constructor(){super(...arguments),this.structureSignature="",this.circumference=0}static get observedAttributes(){return["value","max","size","variant","type","circular-style","show-value","animated","striped","glow","gradient"]}get value(){return Number(this.getAttribute("value")||0)}set value(e){this.setAttribute("value",String(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const s=Number(this.getAttribute("max")||100),i=Math.min(Math.max(this.value/s*100,0),100),a=this.getAttribute("size")||"m",c=this.getAttribute("variant")||"default",n=this.getAttribute("type")||"linear",u=this.getAttribute("circular-style")||"default",l=e.includes(a)?a:"m",d=t.includes(c)?c:"default",o=r.includes(u)?u:"default",g=this.hasAttribute("show-value");this.className=["designbase-wc-progress",`designbase-wc-progress--size-${l}`,`designbase-wc-progress--variant-${d}`,`designbase-wc-progress--type-${n}`,"circular"===n&&"minimal"===o?"designbase-wc-progress--circular-minimal":"",this.hasAttribute("animated")?"designbase-wc-progress--animated":"",this.hasAttribute("striped")?"designbase-wc-progress--striped":"",this.hasAttribute("gradient")?"designbase-wc-progress--gradient":"",this.hasAttribute("glow")?"designbase-wc-progress--glow":""].filter(Boolean).join(" "),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(s)),this.setAttribute("aria-valuenow",String(this.value));const h=[n,o,l,g?"1":"0"].join("|");h!==this.structureSignature&&(this.structureSignature=h,"circular"===n?this.buildCircular(o,l,g):this.buildLinear(g)),"circular"===n?this.updateCircular(i):this.updateLinear(i)}buildLinear(e){this.circularBarEl=void 0,this.circularValueEl=void 0;const t=document.createElement("div");t.className="designbase-wc-progress__linear";const r=document.createElement("div");r.className="designbase-wc-progress__track";const s=document.createElement("div");if(s.className="designbase-wc-progress__bar",r.append(s),t.append(r),this.barEl=s,e){const e=document.createElement("span");e.className="designbase-wc-progress__value",t.append(e),this.linearValueEl=e}else this.linearValueEl=void 0;this.replaceChildren(t)}updateLinear(e){this.barEl&&(this.barEl.style.width=`${e}%`),this.linearValueEl&&(this.linearValueEl.textContent=`${Math.round(e)}%`)}buildCircular(e,t,r){this.barEl=void 0,this.linearValueEl=void 0;const{svgSize:s,radius:i,strokeWidth:a,center:c}=function getCircularMetrics(e,t){if("minimal"===e)return{svgSize:20,radius:8,strokeWidth:2,center:10};switch(t){case"s":return{svgSize:64,radius:26,strokeWidth:4,center:32};case"l":return{svgSize:160,radius:62,strokeWidth:10,center:80};default:return{svgSize:120,radius:45,strokeWidth:8,center:60}}}(e,t);this.circumference=2*Math.PI*i;const n=document.createElement("div");n.className="designbase-wc-progress__circular";const u=document.createElementNS("http://www.w3.org/2000/svg","svg");u.setAttribute("class","designbase-wc-progress__circular-svg"),u.setAttribute("width",String(s)),u.setAttribute("height",String(s)),u.setAttribute("viewBox",`0 0 ${s} ${s}`),u.setAttribute("aria-hidden","true");const l=createSvgCircle("designbase-wc-progress__circular-bar",c,c,i,a,{"stroke-dasharray":String(this.circumference),"stroke-dashoffset":String(this.circumference),transform:`rotate(-90 ${c} ${c})`});if(this.circularBarEl=l,u.append(createSvgCircle("designbase-wc-progress__circular-track",c,c,i,a),l),n.append(u),r&&"minimal"!==e){const e=document.createElement("span");e.className="designbase-wc-progress__circular-value",n.append(e),this.circularValueEl=e}else this.circularValueEl=void 0;this.replaceChildren(n)}updateCircular(e){if(this.circularBarEl){const t=this.circumference-e/100*this.circumference;this.circularBarEl.setAttribute("stroke-dashoffset",String(t))}this.circularValueEl&&(this.circularValueEl.textContent=`${Math.round(e)}%`)}}customElements.get("db-progress")||customElements.define("db-progress",DbProgress);export{DbProgress};

package/dist/esm/components/db-range-slider.d.ts

@@ -5,6 +5,8 @@
 declare class DbRangeSlider extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
+    private headerEl;
+    private labelEl;
     private valuesEl;
     private containerEl;
     private trackEl;
@@ -28,6 +30,10 @@ declare class DbRangeSlider extends HTMLElement {
     get range(): [number, number] | undefined;
     set range(v: [number, number] | string | undefined);
     private build;
+    private getValuePosition;
+    private shouldShowLabel;
+    private formatValue;
+    private syncDomOrder;
     private bindEvents;
     private unbindEvents;
     private readAttributeValues;
@@ -35,6 +41,7 @@ declare class DbRangeSlider extends HTMLElement {
     private syncStructure;
     private isMarkActive;
     private syncVisuals;
+    private syncThumbTooltips;
     private syncA11y;
     private setThumbPosition;
     private valueToPercent;

package/dist/esm/components/db-range-slider.js

@@ -1 +1 @@
-const t="designbase-wc-range-slider";class DbRangeSlider extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.valuesEl=null,this.containerEl=null,this.trackEl=null,this.fillEl=null,this.thumbEls=[],this.currentValue=50,this.currentRange=[25,75],this.isDragging=!1,this.activeThumb=null,this.boundTrackClick=t=>this.handleTrackClick(t),this.boundPointerMove=t=>this.handlePointerMove(t),this.boundPointerUp=()=>this.handlePointerUp(),this.boundContainerKeyDown=t=>this.handleKeyDown(t),this.eventsBound=!1}static get observedAttributes(){return["value","range","min","max","step","size","variant","show-value","value-position","show-marks","marks","mark-labels","disabled","readonly","full-width","vertical"]}connectedCallback(){this.built||(this.build(),this.built=!0),this.readAttributeValues(),this.syncClasses(),this.syncStructure(),this.syncVisuals(),this.syncA11y(),this.bindEvents()}disconnectedCallback(){this.unbindEvents()}attributeChangedCallback(t){this.built&&(this.readAttributeValues(),this.syncClasses(),this.isStructuralAttribute(t)&&this.syncStructure(),this.syncVisuals(),this.syncA11y())}isStructuralAttribute(t){return["range","show-value","show-marks","marks","mark-labels","vertical"].includes(t)}get value(){return this.currentValue}set value(t){this.currentValue=this.clamp(t),this.setAttribute("value",String(this.currentValue)),this.syncVisuals()}get range(){if(this.hasAttribute("range"))return[...this.currentRange]}set range(t){if(null==t)return this.removeAttribute("range"),void(this.built&&(this.syncStructure(),this.syncVisuals()));const e=this.normalizeRangeInput(t);if(!e)return;const i=[Math.min(e[0],e[1]),Math.max(e[0],e[1])];this.currentRange=[this.clamp(i[0]),this.clamp(i[1])];const s=`${this.currentRange[0]},${this.currentRange[1]}`;this.getAttribute("range")!==s&&this.setAttribute("range",s),this.built&&this.syncVisuals()}build(){this.classList.add(t),this.valuesEl=document.createElement("div"),this.valuesEl.className=`${t}__values`,this.containerEl=document.createElement("div"),this.containerEl.className=`${t}__container`,this.containerEl.setAttribute("role","slider"),this.containerEl.setAttribute("tabindex","0"),this.trackEl=document.createElement("div"),this.trackEl.className=`${t}__track`,this.fillEl=document.createElement("div"),this.fillEl.className=`${t}__fill`,this.trackEl.appendChild(this.fillEl),this.containerEl.appendChild(this.trackEl),this.appendChild(this.valuesEl),this.appendChild(this.containerEl)}bindEvents(){this.eventsBound||(this.trackEl?.addEventListener("click",this.boundTrackClick),this.containerEl?.addEventListener("keydown",this.boundContainerKeyDown),this.eventsBound=!0)}unbindEvents(){this.eventsBound&&(this.trackEl?.removeEventListener("click",this.boundTrackClick),this.containerEl?.removeEventListener("keydown",this.boundContainerKeyDown),document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.eventsBound=!1)}readAttributeValues(){const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.getNumberAttr("step",1);if(this.hasAttribute("range")){const s=this.parseRangeAttr(this.getAttribute("range"));s?this.currentRange=[this.clamp(s[0],t,e,i),this.clamp(s[1],t,e,i)]:this.currentRange.every(Number.isFinite)||(this.currentRange=[25,75])}else this.currentValue=this.clamp(this.getNumberAttr("value",50),t,e,i)}syncClasses(){const e=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",s=this.hasAttribute("range"),r=this.getAttribute("value-position")||"top",n=[t,`${t}--${e}`,`${t}--${i}`,`${t}--value-${s?"top":"top"===r?"right":r}`,this.hasAttribute("disabled")?`${t}--disabled`:"",this.hasAttribute("readonly")?`${t}--readonly`:"",this.hasAttribute("full-width")?`${t}--full-width`:"",this.hasAttribute("vertical")?`${t}--vertical`:"",s?`${t}--range`:""].filter(Boolean);if(this.className=n.join(" "),this.trackEl){const e=[`${t}__track`];this.hasAttribute("disabled")&&e.push(`${t}__track--disabled`),this.hasAttribute("readonly")&&e.push(`${t}__track--readonly`),this.trackEl.className=e.join(" ")}}syncStructure(){if(!this.valuesEl||!this.trackEl||!this.fillEl)return;const e=this.hasAttribute("show-value"),i=this.hasAttribute("range"),s=this.hasAttribute("show-marks");if(this.valuesEl.innerHTML="",this.valuesEl.hidden=!e,e)if(i){const e=document.createElement("span");e.className=`${t}__value ${t}__value--min`;const i=document.createElement("span");i.className=`${t}__value ${t}__value--max`,this.valuesEl.append(e,i)}else{const e=document.createElement("span");e.className=`${t}__value ${t}__value--single`,this.valuesEl.appendChild(e)}if(this.thumbEls.forEach(t=>t.remove()),this.thumbEls=[],this.trackEl.querySelectorAll(`.${t}__mark`).forEach(t=>t.remove()),s){const e=this.parseMarks();if(e.length>0){const i=this.parseMarkLabels();e.forEach(e=>{const s=document.createElement("div");if(s.className=`${t}__mark`,s.setAttribute("aria-hidden","true"),this.isMarkActive(e)&&s.classList.add(`${t}__mark--active`),this.hasAttribute("vertical")?s.style.bottom=`${this.valueToPercent(e)}%`:s.style.left=`${this.valueToPercent(e)}%`,void 0!==i[e]){const r=document.createElement("span");r.className=`${t}__mark-label`,r.textContent=i[e],s.appendChild(r)}this.trackEl.insertBefore(s,this.fillEl)})}}const r=i?2:1,n=this.hasAttribute("disabled")||this.hasAttribute("readonly");for(let e=0;e<r;e++){const s=document.createElement("div");s.className=`${t}__thumb`,s.setAttribute("role","slider"),s.setAttribute("draggable","false"),s.setAttribute("tabindex",n?"-1":"0");const r=i?0===e?"min":"max":"single";i&&(s.dataset.thumb=r),s.addEventListener("pointerdown",t=>this.handleThumbPointerDown(t,r)),s.addEventListener("keydown",t=>this.handleKeyDown(t,r)),this.trackEl.appendChild(s),this.thumbEls.push(s)}}isMarkActive(t){if(this.hasAttribute("range")){const[e,i]=this.currentRange;return t>=e&&t<=i}return t<=this.currentValue}syncVisuals(){if(!this.fillEl)return;const e=this.hasAttribute("range"),i=this.getNumberAttr("min",0),s=this.getNumberAttr("max",100);if(e){const[e,r]=this.currentRange,n=this.valueToPercent(e),a=this.valueToPercent(r);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom=`${n}%`,this.fillEl.style.height=a-n+"%"):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left=`${n}%`,this.fillEl.style.width=a-n+"%"),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],n),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(r)),this.thumbEls[0].setAttribute("aria-valuenow",String(e))),this.thumbEls[1]&&(this.setThumbPosition(this.thumbEls[1],a),this.thumbEls[1].setAttribute("aria-valuemin",String(e)),this.thumbEls[1].setAttribute("aria-valuemax",String(s)),this.thumbEls[1].setAttribute("aria-valuenow",String(r)));const h=this.valuesEl?.querySelector(`.${t}__value--min`),l=this.valuesEl?.querySelector(`.${t}__value--max`);h&&(h.textContent=String(e)),l&&(l.textContent=String(r))}else{const e=this.valueToPercent(this.currentValue);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom="0",this.fillEl.style.height=`${e}%`):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left="0",this.fillEl.style.width=`${e}%`),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],e),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(s)),this.thumbEls[0].setAttribute("aria-valuenow",String(this.currentValue)));const r=this.valuesEl?.querySelector(`.${t}__value--single`);r&&(r.textContent=String(this.currentValue))}this.trackEl?.querySelectorAll(`.${t}__mark`).forEach(e=>{const i=e instanceof HTMLElement?parseFloat(e.style.left):NaN,s=e instanceof HTMLElement?parseFloat(e.style.bottom):NaN,r=Number.isFinite(i)?i:s;if(!Number.isFinite(r))return;const n=this.percentToValue(r);e.classList.toggle(`${t}__mark--active`,this.isMarkActive(n))})}syncA11y(){if(!this.containerEl)return;const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.hasAttribute("range"),s=this.hasAttribute("disabled"),r=this.hasAttribute("readonly");this.containerEl.setAttribute("aria-valuemin",String(t)),this.containerEl.setAttribute("aria-valuemax",String(e)),this.containerEl.setAttribute("aria-valuenow",String(i?this.currentRange[0]:this.currentValue)),this.containerEl.setAttribute("aria-valuetext",i?`${this.currentRange[0]} to ${this.currentRange[1]}`:String(this.currentValue)),this.containerEl.setAttribute("aria-disabled",String(s)),this.containerEl.setAttribute("aria-readonly",String(r)),this.containerEl.setAttribute("tabindex",s||r?"-1":"0")}setThumbPosition(t,e){this.hasAttribute("vertical")?(t.style.left="",t.style.bottom=`${e}%`):(t.style.bottom="",t.style.left=`${e}%`)}valueToPercent(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100);return i===e?0:(t-e)/(i-e)*100}percentToValue(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1),r=e+t/100*(i-e);return this.snapToStep(r,e,i,s)}snapToStep(t,e,i,s){const r=Math.round(t/s)*s;return Math.min(i,Math.max(e,r))}clamp(t,e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1)){return this.snapToStep(Math.min(i,Math.max(e,t)),e,i,s)}getNumberAttr(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?s:e}normalizeRangeInput(t){if("string"==typeof t)return this.parseRangeAttr(t);if(!Array.isArray(t)||t.length<2)return null;const e=Number(t[0]),i=Number(t[1]);return Number.isFinite(e)&&Number.isFinite(i)?[e,i]:null}parseRangeAttr(t){if(!t)return null;if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e)&&2===e.length){const t=Number(e[0]),i=Number(e[1]);if(Number.isFinite(t)&&Number.isFinite(i))return[t,i]}}catch{return null}return null}const e=t.split(",").map(t=>Number(t.trim()));return 2!==e.length||e.some(t=>!Number.isFinite(t))?null:[e[0],e[1]]}parseMarks(){const t=this.getAttribute("marks");if(!t)return[];if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>Number.isFinite(t))}catch{return[]}return[]}return t.split(",").map(t=>Number(t.trim())).filter(t=>Number.isFinite(t))}parseMarkLabels(){const t=this.getAttribute("mark-labels");if(!t)return{};try{const e=JSON.parse(t),i={};return Object.entries(e).forEach(([t,e])=>{i[Number(t)]=e}),i}catch{return{}}}isInteractive(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")}getTrackPercent(t,e){if(!this.trackEl)return 0;const i=this.trackEl.getBoundingClientRect();if(this.hasAttribute("vertical")){const t=Math.max(i.top,Math.min(i.bottom,e));return(i.bottom-t)/i.height*100}return(Math.max(i.left,Math.min(i.right,t))-i.left)/i.width*100}handleThumbPointerDown(t,e){this.isInteractive()&&(t.preventDefault(),this.isDragging=!0,this.activeThumb=e,this.setThumbActive(e,!0),document.addEventListener("pointermove",this.boundPointerMove),document.addEventListener("pointerup",this.boundPointerUp))}handleTrackClick(e){if(!this.isInteractive()||!this.trackEl)return;if(e.target.closest(`.${t}__thumb`))return;const i=this.getTrackPercent(e.clientX,e.clientY),s=this.percentToValue(i);this.commitValueAtPosition(s)}handlePointerMove(t){if(!this.isDragging||!this.isInteractive())return;const e=this.getTrackPercent(t.clientX,t.clientY),i=this.percentToValue(e);this.applyDragValue(i)}handlePointerUp(){this.isDragging&&(this.activeThumb&&this.setThumbActive(this.activeThumb,!1),this.isDragging=!1,this.activeThumb=null,document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.hasAttribute("range")?this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`):this.setAttribute("value",String(this.currentValue)),this.syncA11y())}setThumbActive(e,i){if(this.hasAttribute("range")){const s=this.thumbEls["min"===e?0:1];return void s?.classList.toggle(`${t}__thumb--active`,i)}this.thumbEls[0]?.classList.toggle(`${t}__thumb--active`,i)}applyDragValue(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange;if("min"===this.activeThumb)this.currentRange=[Math.min(e,i),i];else if("max"===this.activeThumb)this.currentRange=[t,Math.max(e,t)];else{Math.abs(e-t)<=Math.abs(e-i)?(this.currentRange=[Math.min(e,i),i],this.activeThumb="min"):(this.currentRange=[t,Math.max(e,t)],this.activeThumb="max")}this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}commitValueAtPosition(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange,s=Math.abs(e-t),r=Math.abs(e-i);this.currentRange=s<=r?[Math.min(e,i),i]:[t,Math.max(e,t)],this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}handleKeyDown(t,e="single"){if(!this.isInteractive())return;const i=this.getNumberAttr("step",1),s=this.getNumberAttr("min",0),r=this.getNumberAttr("max",100);let n;if(this.hasAttribute("range")&&"single"!==e){const a="min"===e?this.currentRange[0]:this.currentRange[1];switch(t.key){case"ArrowLeft":case"ArrowDown":n=this.clamp(a-i,s,r);break;case"ArrowRight":case"ArrowUp":n=this.clamp(a+i,s,r);break;case"Home":n=s;break;case"End":n=r;break;default:return}const h=[...this.currentRange];if("min"===e?h[0]=n:h[1]=n,h[0]>h[1])return;return t.preventDefault(),this.currentRange=h,void this.afterKeyboard()}if(!this.hasAttribute("range")){switch(t.key){case"ArrowLeft":case"ArrowDown":n=this.clamp(this.currentValue-i,s,r);break;case"ArrowRight":case"ArrowUp":n=this.clamp(this.currentValue+i,s,r);break;case"Home":n=s;break;case"End":n=r;break;default:return}t.preventDefault(),this.currentValue=n,this.afterKeyboard()}}afterKeyboard(){this.hasAttribute("range")?(this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()):(this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange())}dispatchValueChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{value:this.currentValue}}))}dispatchRangeChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{range:[...this.currentRange]}}))}}customElements.get("db-range-slider")||customElements.define("db-range-slider",DbRangeSlider);export{DbRangeSlider};
+const t="designbase-wc-range-slider";class DbRangeSlider extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.headerEl=null,this.labelEl=null,this.valuesEl=null,this.containerEl=null,this.trackEl=null,this.fillEl=null,this.thumbEls=[],this.currentValue=50,this.currentRange=[25,75],this.isDragging=!1,this.activeThumb=null,this.boundTrackClick=t=>this.handleTrackClick(t),this.boundPointerMove=t=>this.handlePointerMove(t),this.boundPointerUp=()=>this.handlePointerUp(),this.boundContainerKeyDown=t=>this.handleKeyDown(t),this.eventsBound=!1}static get observedAttributes(){return["value","range","min","max","step","size","variant","show-value","show-label","label","value-position","value-fixed","show-thumb-tooltip","show-marks","marks","mark-labels","disabled","readonly","full-width","vertical"]}connectedCallback(){this.built||(this.build(),this.built=!0),this.readAttributeValues(),this.syncClasses(),this.syncDomOrder(),this.syncStructure(),this.syncVisuals(),this.syncA11y(),this.bindEvents()}disconnectedCallback(){this.unbindEvents()}attributeChangedCallback(t){this.built&&(this.readAttributeValues(),this.syncClasses(),this.isStructuralAttribute(t)&&(this.syncDomOrder(),this.syncStructure()),this.syncVisuals(),this.syncA11y())}isStructuralAttribute(t){return["range","show-value","show-label","label","value-position","show-marks","marks","mark-labels","vertical"].includes(t)}get value(){return this.currentValue}set value(t){this.currentValue=this.clamp(t),this.setAttribute("value",String(this.currentValue)),this.syncVisuals()}get range(){if(this.hasAttribute("range"))return[...this.currentRange]}set range(t){if(null==t)return this.removeAttribute("range"),void(this.built&&(this.syncStructure(),this.syncVisuals()));const e=this.normalizeRangeInput(t);if(!e)return;const i=[Math.min(e[0],e[1]),Math.max(e[0],e[1])];this.currentRange=[this.clamp(i[0]),this.clamp(i[1])];const s=`${this.currentRange[0]},${this.currentRange[1]}`;this.getAttribute("range")!==s&&this.setAttribute("range",s),this.built&&this.syncVisuals()}build(){this.classList.add(t),this.headerEl=document.createElement("div"),this.headerEl.className=`${t}__header`,this.labelEl=document.createElement("span"),this.labelEl.className=`${t}__label`,this.valuesEl=document.createElement("div"),this.valuesEl.className=`${t}__values`,this.containerEl=document.createElement("div"),this.containerEl.className=`${t}__container`,this.containerEl.setAttribute("role","slider"),this.containerEl.setAttribute("tabindex","0"),this.trackEl=document.createElement("div"),this.trackEl.className=`${t}__track`,this.fillEl=document.createElement("div"),this.fillEl.className=`${t}__fill`,this.trackEl.appendChild(this.fillEl),this.containerEl.appendChild(this.trackEl)}getValuePosition(){const t=this.getAttribute("value-position");return t||(this.shouldShowLabel()?"top":"right")}shouldShowLabel(){return this.hasAttribute("show-label")&&Boolean(this.getAttribute("label")?.trim())}formatValue(t){const e=this.getAttribute("value-fixed");if(null!==e&&""!==e){const i=Number(e);if(Number.isFinite(i))return t.toFixed(i)}return String(t)}syncDomOrder(){if(!this.headerEl||!this.valuesEl||!this.containerEl)return;const t=this.getValuePosition(),e=this.shouldShowLabel(),i=this.hasAttribute("show-value"),s=this.hasAttribute("range");return this.replaceChildren(),this.labelEl&&(this.labelEl.textContent=this.getAttribute("label")?.trim()||""),s||"top"===t?(this.headerEl.replaceChildren(),e&&this.labelEl&&this.headerEl.appendChild(this.labelEl),i&&this.headerEl.appendChild(this.valuesEl),this.headerEl.childElementCount>0&&this.append(this.headerEl),void this.append(this.containerEl)):"bottom"===t?(e&&this.labelEl&&(this.headerEl.replaceChildren(this.labelEl),this.append(this.headerEl)),this.append(this.containerEl),void(i&&this.append(this.valuesEl))):void(i?this.append(this.valuesEl,this.containerEl):this.append(this.containerEl))}bindEvents(){this.eventsBound||(this.trackEl?.addEventListener("click",this.boundTrackClick),this.containerEl?.addEventListener("keydown",this.boundContainerKeyDown),this.eventsBound=!0)}unbindEvents(){this.eventsBound&&(this.trackEl?.removeEventListener("click",this.boundTrackClick),this.containerEl?.removeEventListener("keydown",this.boundContainerKeyDown),document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.eventsBound=!1)}readAttributeValues(){const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.getNumberAttr("step",1);if(this.hasAttribute("range")){const s=this.parseRangeAttr(this.getAttribute("range"));s?this.currentRange=[this.clamp(s[0],t,e,i),this.clamp(s[1],t,e,i)]:this.currentRange.every(Number.isFinite)||(this.currentRange=[25,75])}else this.currentValue=this.clamp(this.getNumberAttr("value",50),t,e,i)}syncClasses(){const e=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",s=this.hasAttribute("range"),r=this.getValuePosition(),a=[t,`${t}--${e}`,`${t}--${i}`,`${t}--value-${s?"top":r}`,this.shouldShowLabel()?`${t}--has-label`:"",this.hasAttribute("disabled")?`${t}--disabled`:"",this.hasAttribute("readonly")?`${t}--readonly`:"",this.hasAttribute("full-width")?`${t}--full-width`:"",this.hasAttribute("vertical")?`${t}--vertical`:"",this.hasAttribute("show-thumb-tooltip")?`${t}--show-tooltip`:"",s?`${t}--range`:""].filter(Boolean);if(this.className=a.join(" "),this.trackEl){const e=[`${t}__track`];this.hasAttribute("disabled")&&e.push(`${t}__track--disabled`),this.hasAttribute("readonly")&&e.push(`${t}__track--readonly`),this.trackEl.className=e.join(" ")}}syncStructure(){if(!this.valuesEl||!this.trackEl||!this.fillEl)return;const e=this.hasAttribute("show-value"),i=this.hasAttribute("range"),s=this.hasAttribute("show-marks");if(this.valuesEl.innerHTML="",this.valuesEl.hidden=!e,e)if(i){const e=document.createElement("span");e.className=`${t}__value ${t}__value--min`;const i=document.createElement("span");i.className=`${t}__value-separator`,i.textContent="~",i.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=`${t}__value ${t}__value--max`,this.valuesEl.append(e,i,s)}else{const e=document.createElement("span");e.className=`${t}__value ${t}__value--single`,this.valuesEl.appendChild(e)}if(this.thumbEls.forEach(t=>t.remove()),this.thumbEls=[],this.trackEl.querySelectorAll(`.${t}__mark`).forEach(t=>t.remove()),s){const e=this.parseMarks();if(e.length>0){const i=this.parseMarkLabels();e.forEach(e=>{const s=document.createElement("div");if(s.className=`${t}__mark`,s.setAttribute("aria-hidden","true"),this.isMarkActive(e)&&s.classList.add(`${t}__mark--active`),this.hasAttribute("vertical")?s.style.bottom=`${this.valueToPercent(e)}%`:s.style.left=`${this.valueToPercent(e)}%`,void 0!==i[e]){const r=document.createElement("span");r.className=`${t}__mark-label`,r.textContent=i[e],s.appendChild(r)}this.trackEl.insertBefore(s,this.fillEl)})}}const r=i?2:1,a=this.hasAttribute("disabled")||this.hasAttribute("readonly");for(let e=0;e<r;e++){const s=document.createElement("div");s.className=`${t}__thumb`,s.setAttribute("role","slider"),s.setAttribute("draggable","false"),s.setAttribute("tabindex",a?"-1":"0");const r=i?0===e?"min":"max":"single";i&&(s.dataset.thumb=r),s.addEventListener("pointerdown",t=>this.handleThumbPointerDown(t,r)),s.addEventListener("keydown",t=>this.handleKeyDown(t,r));const n=document.createElement("span");n.className=`${t}__thumb-tooltip`,n.setAttribute("aria-hidden","true"),n.hidden=!0,s.appendChild(n),this.trackEl.appendChild(s),this.thumbEls.push(s)}}isMarkActive(t){if(this.hasAttribute("range")){const[e,i]=this.currentRange;return t>=e&&t<=i}return t<=this.currentValue}syncVisuals(){if(!this.fillEl)return;const e=this.hasAttribute("range"),i=this.getNumberAttr("min",0),s=this.getNumberAttr("max",100);if(e){const[e,r]=this.currentRange,a=this.valueToPercent(e),n=this.valueToPercent(r);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom=`${a}%`,this.fillEl.style.height=n-a+"%"):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left=`${a}%`,this.fillEl.style.width=n-a+"%"),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],a),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(r)),this.thumbEls[0].setAttribute("aria-valuenow",String(e))),this.thumbEls[1]&&(this.setThumbPosition(this.thumbEls[1],n),this.thumbEls[1].setAttribute("aria-valuemin",String(e)),this.thumbEls[1].setAttribute("aria-valuemax",String(s)),this.thumbEls[1].setAttribute("aria-valuenow",String(r)));const h=this.valuesEl?.querySelector(`.${t}__value--min`),l=this.valuesEl?.querySelector(`.${t}__value--max`);h&&(h.textContent=this.formatValue(e)),l&&(l.textContent=this.formatValue(r))}else{const e=this.valueToPercent(this.currentValue);this.hasAttribute("vertical")?(this.fillEl.style.left="",this.fillEl.style.width="",this.fillEl.style.bottom="0",this.fillEl.style.height=`${e}%`):(this.fillEl.style.bottom="",this.fillEl.style.height="",this.fillEl.style.left="0",this.fillEl.style.width=`${e}%`),this.thumbEls[0]&&(this.setThumbPosition(this.thumbEls[0],e),this.thumbEls[0].setAttribute("aria-valuemin",String(i)),this.thumbEls[0].setAttribute("aria-valuemax",String(s)),this.thumbEls[0].setAttribute("aria-valuenow",String(this.currentValue)));const r=this.valuesEl?.querySelector(`.${t}__value--single`);r&&(r.textContent=this.formatValue(this.currentValue))}this.syncThumbTooltips(),this.trackEl?.querySelectorAll(`.${t}__mark`).forEach(e=>{const i=e instanceof HTMLElement?parseFloat(e.style.left):NaN,s=e instanceof HTMLElement?parseFloat(e.style.bottom):NaN,r=Number.isFinite(i)?i:s;if(!Number.isFinite(r))return;const a=this.percentToValue(r);e.classList.toggle(`${t}__mark--active`,this.isMarkActive(a))})}syncThumbTooltips(){const e=this.hasAttribute("range"),i=this.hasAttribute("show-thumb-tooltip");this.thumbEls.forEach((s,r)=>{const a=s.querySelector(`.${t}__thumb-tooltip`);if(!a)return;if(!i)return void(a.hidden=!0);a.hidden=!1;const n=e?0===r?this.currentRange[0]:this.currentRange[1]:this.currentValue;a.textContent=this.formatValue(n)})}syncA11y(){if(!this.containerEl)return;const t=this.getNumberAttr("min",0),e=this.getNumberAttr("max",100),i=this.hasAttribute("range"),s=this.hasAttribute("disabled"),r=this.hasAttribute("readonly");this.containerEl.setAttribute("aria-valuemin",String(t)),this.containerEl.setAttribute("aria-valuemax",String(e)),this.containerEl.setAttribute("aria-valuenow",String(i?this.currentRange[0]:this.currentValue)),this.containerEl.setAttribute("aria-valuetext",i?`${this.currentRange[0]} to ${this.currentRange[1]}`:String(this.currentValue)),this.containerEl.setAttribute("aria-disabled",String(s)),this.containerEl.setAttribute("aria-readonly",String(r)),this.containerEl.setAttribute("tabindex",s||r?"-1":"0")}setThumbPosition(t,e){this.hasAttribute("vertical")?(t.style.left="",t.style.bottom=`${e}%`):(t.style.bottom="",t.style.left=`${e}%`)}valueToPercent(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100);return i===e?0:(t-e)/(i-e)*100}percentToValue(t){const e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1),r=e+t/100*(i-e);return this.snapToStep(r,e,i,s)}snapToStep(t,e,i,s){const r=Math.round(t/s)*s;return Math.min(i,Math.max(e,r))}clamp(t,e=this.getNumberAttr("min",0),i=this.getNumberAttr("max",100),s=this.getNumberAttr("step",1)){return this.snapToStep(Math.min(i,Math.max(e,t)),e,i,s)}getNumberAttr(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?s:e}normalizeRangeInput(t){if("string"==typeof t)return this.parseRangeAttr(t);if(!Array.isArray(t)||t.length<2)return null;const e=Number(t[0]),i=Number(t[1]);return Number.isFinite(e)&&Number.isFinite(i)?[e,i]:null}parseRangeAttr(t){if(!t)return null;if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e)&&2===e.length){const t=Number(e[0]),i=Number(e[1]);if(Number.isFinite(t)&&Number.isFinite(i))return[t,i]}}catch{return null}return null}const e=t.split(",").map(t=>Number(t.trim()));return 2!==e.length||e.some(t=>!Number.isFinite(t))?null:[e[0],e[1]]}parseMarks(){const t=this.getAttribute("marks");if(!t)return[];if(t.startsWith("[")){try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>Number.isFinite(t))}catch{return[]}return[]}return t.split(",").map(t=>Number(t.trim())).filter(t=>Number.isFinite(t))}parseMarkLabels(){const t=this.getAttribute("mark-labels");if(!t)return{};try{const e=JSON.parse(t),i={};return Object.entries(e).forEach(([t,e])=>{i[Number(t)]=e}),i}catch{return{}}}isInteractive(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")}getTrackPercent(t,e){if(!this.trackEl)return 0;const i=this.trackEl.getBoundingClientRect();if(this.hasAttribute("vertical")){const t=Math.max(i.top,Math.min(i.bottom,e));return(i.bottom-t)/i.height*100}return(Math.max(i.left,Math.min(i.right,t))-i.left)/i.width*100}handleThumbPointerDown(t,e){this.isInteractive()&&(t.preventDefault(),this.isDragging=!0,this.activeThumb=e,this.setThumbActive(e,!0),document.addEventListener("pointermove",this.boundPointerMove),document.addEventListener("pointerup",this.boundPointerUp))}handleTrackClick(e){if(!this.isInteractive()||!this.trackEl)return;if(e.target.closest(`.${t}__thumb`))return;const i=this.getTrackPercent(e.clientX,e.clientY),s=this.percentToValue(i);this.commitValueAtPosition(s)}handlePointerMove(t){if(!this.isDragging||!this.isInteractive())return;const e=this.getTrackPercent(t.clientX,t.clientY),i=this.percentToValue(e);this.applyDragValue(i)}handlePointerUp(){this.isDragging&&(this.activeThumb&&this.setThumbActive(this.activeThumb,!1),this.isDragging=!1,this.activeThumb=null,document.removeEventListener("pointermove",this.boundPointerMove),document.removeEventListener("pointerup",this.boundPointerUp),this.syncThumbTooltips(),this.hasAttribute("range")?this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`):this.setAttribute("value",String(this.currentValue)),this.syncA11y())}setThumbActive(e,i){if(this.hasAttribute("range")){const s=this.thumbEls["min"===e?0:1];return void s?.classList.toggle(`${t}__thumb--active`,i)}this.thumbEls[0]?.classList.toggle(`${t}__thumb--active`,i)}applyDragValue(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange;if("min"===this.activeThumb)this.currentRange=[Math.min(e,i),i];else if("max"===this.activeThumb)this.currentRange=[t,Math.max(e,t)];else{Math.abs(e-t)<=Math.abs(e-i)?(this.currentRange=[Math.min(e,i),i],this.activeThumb="min"):(this.currentRange=[t,Math.max(e,t)],this.activeThumb="max")}this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}commitValueAtPosition(t){const e=this.clamp(t);if(this.hasAttribute("range")){const[t,i]=this.currentRange,s=Math.abs(e-t),r=Math.abs(e-i);this.currentRange=s<=r?[Math.min(e,i),i]:[t,Math.max(e,t)],this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()}else this.currentValue=e,this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange()}handleKeyDown(t,e="single"){if(!this.isInteractive())return;const i=this.getNumberAttr("step",1),s=this.getNumberAttr("min",0),r=this.getNumberAttr("max",100);let a;if(this.hasAttribute("range")&&"single"!==e){const n="min"===e?this.currentRange[0]:this.currentRange[1];switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(n-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(n+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}const h=[...this.currentRange];if("min"===e?h[0]=a:h[1]=a,h[0]>h[1])return;return t.preventDefault(),this.currentRange=h,void this.afterKeyboard()}if(!this.hasAttribute("range")){switch(t.key){case"ArrowLeft":case"ArrowDown":a=this.clamp(this.currentValue-i,s,r);break;case"ArrowRight":case"ArrowUp":a=this.clamp(this.currentValue+i,s,r);break;case"Home":a=s;break;case"End":a=r;break;default:return}t.preventDefault(),this.currentValue=a,this.afterKeyboard()}}afterKeyboard(){this.hasAttribute("range")?(this.setAttribute("range",`${this.currentRange[0]},${this.currentRange[1]}`),this.syncVisuals(),this.dispatchRangeChange()):(this.setAttribute("value",String(this.currentValue)),this.syncVisuals(),this.syncA11y(),this.dispatchValueChange())}dispatchValueChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{value:this.currentValue}}))}dispatchRangeChange(){this.dispatchEvent(new CustomEvent("db-change",{bubbles:!0,composed:!0,detail:{range:[...this.currentRange]}}))}}customElements.get("db-range-slider")||customElements.define("db-range-slider",DbRangeSlider);export{DbRangeSlider};

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};