@designbasekorea/ui-wc 0.8.1 → 0.8.2

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],s=["default","striped","hoverable"];class DbTable extends HTMLElement{constructor(){super(...arguments),this.internalSelectedRows=[],this.internalSortDirection=null,this.internalPage=1}static get observedAttributes(){return["columns","data","title","size","variant","empty-message","sortable","sort-column","sort-direction","selectable","multi-select","selected-rows","row-key","loading","pagination","page","page-size","total-items","show-count-badge","clickable"]}get columns(){try{return JSON.parse(this.getAttribute("columns")||"[]")}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){try{return JSON.parse(this.getAttribute("data")||"[]")}catch{return[]}}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(e){"selected-rows"===e&&this.syncSelectedRowsFromAttribute(),"sort-column"!==e&&"sort-direction"!==e||this.syncSortFromAttributes(),"page"===e&&(this.internalPage=Number(this.getAttribute("page")||1)),this.render()}syncSelectedRowsFromAttribute(){try{this.internalSelectedRows=JSON.parse(this.getAttribute("selected-rows")||"[]")}catch{this.internalSelectedRows=[]}}syncSortFromAttributes(){const e=this.getAttribute("sort-column"),t=this.getAttribute("sort-direction");this.internalSortColumn=e||void 0,this.internalSortDirection="asc"===t||"desc"===t?t:null}getRowKey(e,t){const s=e[this.getAttribute("row-key")||"id"];return String(null!=s?s:t)}getSortedData(){const e=this.data,t=this.getAttribute("sort-column")||this.internalSortColumn,s=this.getAttribute("sort-direction")||this.internalSortDirection;if(!t||!s)return e;const n=this.columns.find(e=>e.key===t);return n?.sortable?[...e].sort((e,n)=>{const a=e[t],i=n[t];return a===i?0:null==a?1:null==i?-1:a<i?"asc"===s?-1:1:"asc"===s?1:-1}):e}handleSort(e){if(!this.hasAttribute("sortable")||!e.sortable)return;let t="asc";this.internalSortColumn===e.key&&("asc"===this.internalSortDirection?t="desc":"desc"===this.internalSortDirection&&(t=null)),this.internalSortColumn=t?e.key:void 0,this.internalSortDirection=t,this.dispatchEvent(new CustomEvent("db-sort-change",{bubbles:!0,composed:!0,detail:{column:e.key,direction:t}})),this.render()}handleRowSelect(e,t,s){s?.stopPropagation();let n;n=this.hasAttribute("multi-select")?t?[...this.internalSelectedRows,e]:this.internalSelectedRows.filter(t=>t!==e):t?[e]:[],this.internalSelectedRows=n,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:n}})),this.render()}handleSelectAll(e){const t=e?this.data.map((e,t)=>this.getRowKey(e,t)):[];this.internalSelectedRows=t,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:t}})),this.render()}getPaginatedData(){const e=this.getSortedData();if(!this.hasAttribute("pagination"))return e;const t=Number(this.getAttribute("page-size")||10),s=Number(this.getAttribute("total-items")||e.length),n=Math.max(1,Math.ceil(s/t)),a=(Math.min(this.internalPage,n)-1)*t;return e.slice(a,a+t)}createSortIcon(t){const s=document.createElement("span");s.className="designbase-wc-table__sort-icon";if(!(this.internalSortColumn===t.key&&Boolean(this.internalSortDirection))){s.classList.add("designbase-wc-table__sort-icon--idle");const t=document.createElement("span");return t.className="designbase-wc-table__sort-icon-stack",t.append(e("chevron-up",10),e("chevron-down",10)),s.append(t),s}return s.classList.add("asc"===this.internalSortDirection?"designbase-wc-table__sort-icon--asc":"designbase-wc-table__sort-icon--desc"),s.append(e("asc"===this.internalSortDirection?"chevron-up":"chevron-down",14)),s}createCheckbox(e){const t=document.createElement("db-checkbox");return t.setAttribute("size","s"),t.setAttribute("has-label","false"),e.checked&&t.setAttribute("checked",""),e.indeterminate&&t.setAttribute("indeterminate",""),e.stopPropagation&&t.addEventListener("click",e=>e.stopPropagation()),t.addEventListener("db-change",t=>{const s=t.detail;e.onChange?.(s.checked)}),t}render(){const e=this.getAttribute("size")||"m",n=this.getAttribute("variant")||"default",a=t.includes(e)?e:"m",i=s.includes(n)?n:"default",c=this.columns,r=this.getPaginatedData(),l=this.getSortedData(),o=this.hasAttribute("loading"),d=this.hasAttribute("selectable"),b=this.hasAttribute("sortable"),h=this.getAttribute("empty-message")||"데이터가 없습니다.";if(this.className=["designbase-wc-table",`designbase-wc-table--${a}`,`designbase-wc-table--${i}`,d&&"designbase-wc-table--selectable",b&&"designbase-wc-table--sortable",o&&"designbase-wc-table--loading"].filter(Boolean).join(" "),this.replaceChildren(),o){const e=document.createElement("div");e.className="designbase-wc-table__loading";const t=document.createElement("div");t.className="designbase-wc-table__loading-spinner";const s=document.createElement("span");return s.textContent="로딩 중...",e.append(t,s),void this.append(e)}const u=this.getAttribute("title"),m=this.hasAttribute("show-count-badge");if(u||m){const e=document.createElement("div");e.className="designbase-wc-table__header";const t=document.createElement("div");if(t.className="designbase-wc-table__header-left",u){const e=document.createElement("h3");e.className="designbase-wc-table__title",e.textContent=u,t.append(e)}if(m){const e=document.createElement("db-badge");e.setAttribute("count",String(this.data.length)),e.setAttribute("badge-style","number"),e.setAttribute("variant","primary"),e.setAttribute("size","s"),t.append(e)}e.append(t),this.append(e)}const g=document.createElement("div");g.className="designbase-wc-table__container";const p=document.createElement("table");p.className="designbase-wc-table__table";const w=document.createElement("thead");w.className="designbase-wc-table__thead";const _=document.createElement("tr");_.className="designbase-wc-table__tr";const A=r.map((e,t)=>this.getRowKey(e,t)),S=A.filter(e=>this.internalSelectedRows.includes(e)),E=this.hasAttribute("clickable");if(d){const e=document.createElement("th");e.className="designbase-wc-table__th designbase-wc-table__th--checkbox";const t=this.createCheckbox({checked:A.length>0&&S.length===A.length,indeterminate:S.length>0&&S.length<A.length,onChange:e=>this.handleSelectAll(e)});e.append(t),_.append(e)}c.forEach(e=>{const t=document.createElement("th");t.className=["designbase-wc-table__th",`designbase-wc-table__th--${e.align||"left"}`,b&&e.sortable&&"designbase-wc-table__th--sortable",this.internalSortColumn===e.key&&this.internalSortDirection&&"designbase-wc-table__th--sorted"].filter(Boolean).join(" "),e.width&&(t.style.width="number"==typeof e.width?`${e.width}px`:e.width);const s=document.createElement("div");s.className="designbase-wc-table__th-content";const n=document.createElement("span");n.className="designbase-wc-table__th-text",n.textContent=e.header,s.append(n),b&&e.sortable&&s.append(this.createSortIcon(e)),t.append(s),b&&e.sortable&&t.addEventListener("click",()=>this.handleSort(e)),_.append(t)}),w.append(_);const f=document.createElement("tbody");if(f.className="designbase-wc-table__tbody",0===l.length){const e=document.createElement("tr");e.className="designbase-wc-table__tr";const t=document.createElement("td");t.className="designbase-wc-table__td designbase-wc-table__td--empty",t.colSpan=Math.max(c.length+(d?1:0),1);const s=document.createElement("db-empty-state");s.setAttribute("title","데이터가 없습니다"),s.setAttribute("description",h),s.setAttribute("variant","no-data"),s.setAttribute("size","m"),t.append(s),e.append(t),f.append(e)}else r.forEach((e,t)=>{const s=this.getRowKey(e,t),n=this.internalSelectedRows.includes(s),a=document.createElement("tr");if(a.className=["designbase-wc-table__tr",E&&"designbase-wc-table__tr--clickable",n&&"designbase-wc-table__tr--selected"].filter(Boolean).join(" "),E&&a.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-row-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}),d){const e=document.createElement("td");e.className="designbase-wc-table__td designbase-wc-table__td--checkbox";const t=this.createCheckbox({checked:n,stopPropagation:!0,onChange:e=>this.handleRowSelect(s,e)});e.append(t),a.append(e)}c.forEach(t=>{const s=document.createElement("td");s.className=["designbase-wc-table__td",`designbase-wc-table__td--${t.align||"left"}`].join(" "),s.textContent=String(e[t.key]??""),a.append(s)}),f.append(a)});if(p.append(w,f),g.append(p),this.append(g),this.hasAttribute("pagination")){const e=Number(this.getAttribute("page-size")||10),t=Number(this.getAttribute("total-items")||l.length),s=Math.max(1,Math.ceil(t/e)),n=document.createElement("div");n.className="designbase-wc-table__footer";const i=document.createElement("db-pagination");i.setAttribute("current-page",String(this.internalPage)),i.setAttribute("total-pages",String(s)),i.setAttribute("size",a),i.setAttribute("show-first-last",""),i.addEventListener("db-change",e=>{const t=Number(e.detail?.page||1);this.internalPage=t,this.dispatchEvent(new CustomEvent("db-page-change",{bubbles:!0,composed:!0,detail:{page:t}})),this.render()}),n.append(i),this.append(n)}}}customElements.get("db-table")||customElements.define("db-table",DbTable);export{DbTable};
+import{createDbIcon as e}from"./db-icons.js";import{TABLE_SIZES as t,TABLE_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbTable extends HTMLElement{constructor(){super(...arguments),this.internalSelectedRows=[],this.internalSortDirection=null,this.internalPage=1}static get observedAttributes(){return["columns","data","title","size","variant","empty-message","sortable","sort-column","sort-direction","selectable","multi-select","selected-rows","row-key","loading","pagination","page","page-size","total-items","show-count-badge","clickable"]}get columns(){try{return JSON.parse(this.getAttribute("columns")||"[]")}catch{return[]}}set columns(e){this.setAttribute("columns","string"==typeof e?e:JSON.stringify(e))}get data(){try{return JSON.parse(this.getAttribute("data")||"[]")}catch{return[]}}set data(e){this.setAttribute("data","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(e){"selected-rows"===e&&this.syncSelectedRowsFromAttribute(),"sort-column"!==e&&"sort-direction"!==e||this.syncSortFromAttributes(),"page"===e&&(this.internalPage=Number(this.getAttribute("page")||1)),this.render()}syncSelectedRowsFromAttribute(){try{this.internalSelectedRows=JSON.parse(this.getAttribute("selected-rows")||"[]")}catch{this.internalSelectedRows=[]}}syncSortFromAttributes(){const e=this.getAttribute("sort-column"),t=this.getAttribute("sort-direction");this.internalSortColumn=e||void 0,this.internalSortDirection="asc"===t||"desc"===t?t:null}getRowKey(e,t){const s=e[this.getAttribute("row-key")||"id"];return String(null!=s?s:t)}getSortedData(){const e=this.data,t=this.getAttribute("sort-column")||this.internalSortColumn,s=this.getAttribute("sort-direction")||this.internalSortDirection;if(!t||!s)return e;const n=this.columns.find(e=>e.key===t);return n?.sortable?[...e].sort((e,n)=>{const a=e[t],i=n[t];return a===i?0:null==a?1:null==i?-1:a<i?"asc"===s?-1:1:"asc"===s?1:-1}):e}handleSort(e){if(!this.hasAttribute("sortable")||!e.sortable)return;let t="asc";this.internalSortColumn===e.key&&("asc"===this.internalSortDirection?t="desc":"desc"===this.internalSortDirection&&(t=null)),this.internalSortColumn=t?e.key:void 0,this.internalSortDirection=t,this.dispatchEvent(new CustomEvent("db-sort-change",{bubbles:!0,composed:!0,detail:{column:e.key,direction:t}})),this.render()}handleRowSelect(e,t,s){s?.stopPropagation();let n;n=this.hasAttribute("multi-select")?t?[...this.internalSelectedRows,e]:this.internalSelectedRows.filter(t=>t!==e):t?[e]:[],this.internalSelectedRows=n,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:n}})),this.render()}handleSelectAll(e){const t=e?this.data.map((e,t)=>this.getRowKey(e,t)):[];this.internalSelectedRows=t,this.dispatchEvent(new CustomEvent("db-selection-change",{bubbles:!0,composed:!0,detail:{selectedRows:t}})),this.render()}getPaginatedData(){const e=this.getSortedData();if(!this.hasAttribute("pagination"))return e;const t=Number(this.getAttribute("page-size")||10),s=Number(this.getAttribute("total-items")||e.length),n=Math.max(1,Math.ceil(s/t)),a=(Math.min(this.internalPage,n)-1)*t;return e.slice(a,a+t)}createSortIcon(t){const s=document.createElement("span");s.className="designbase-wc-table__sort-icon";if(!(this.internalSortColumn===t.key&&Boolean(this.internalSortDirection))){s.classList.add("designbase-wc-table__sort-icon--idle");const t=document.createElement("span");return t.className="designbase-wc-table__sort-icon-stack",t.append(e("chevron-up",10),e("chevron-down",10)),s.append(t),s}return s.classList.add("asc"===this.internalSortDirection?"designbase-wc-table__sort-icon--asc":"designbase-wc-table__sort-icon--desc"),s.append(e("asc"===this.internalSortDirection?"chevron-up":"chevron-down",14)),s}createCheckbox(e){const t=document.createElement("db-checkbox");return t.setAttribute("size","s"),t.setAttribute("has-label","false"),e.checked&&t.setAttribute("checked",""),e.indeterminate&&t.setAttribute("indeterminate",""),e.stopPropagation&&t.addEventListener("click",e=>e.stopPropagation()),t.addEventListener("db-change",t=>{const s=t.detail;e.onChange?.(s.checked)}),t}render(){const e=this.getAttribute("size")||"m",n=this.getAttribute("variant")||"default",a=t.includes(e)?e:"m",i=s.includes(n)?n:"default",c=this.columns,r=this.getPaginatedData(),o=this.getSortedData(),l=this.hasAttribute("loading");l?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy");const d=this.hasAttribute("selectable"),b=this.hasAttribute("sortable"),h=this.getAttribute("empty-message")||"데이터가 없습니다.";if(this.className=["designbase-wc-table",`designbase-wc-table--${a}`,`designbase-wc-table--${i}`,d&&"designbase-wc-table--selectable",b&&"designbase-wc-table--sortable",l&&"designbase-wc-table--loading"].filter(Boolean).join(" "),this.replaceChildren(),l){const e=document.createElement("div");e.className="designbase-wc-table__loading";const t=document.createElement("div");t.className="designbase-wc-table__loading-spinner";const s=document.createElement("span");return s.textContent="로딩 중...",e.append(t,s),void this.append(e)}const u=this.getAttribute("title"),m=this.hasAttribute("show-count-badge");if(u||m){const e=document.createElement("div");e.className="designbase-wc-table__header";const t=document.createElement("div");if(t.className="designbase-wc-table__header-left",u){const e=document.createElement("h3");e.className="designbase-wc-table__title",e.textContent=u,t.append(e)}if(m){const e=document.createElement("db-badge");e.setAttribute("count",String(this.data.length)),e.setAttribute("type","number"),e.setAttribute("variant","primary"),e.setAttribute("size","s"),t.append(e)}e.append(t),this.append(e)}const g=document.createElement("div");g.className="designbase-wc-table__container";const p=document.createElement("table");p.className="designbase-wc-table__table";const w=document.createElement("thead");w.className="designbase-wc-table__thead";const _=document.createElement("tr");_.className="designbase-wc-table__tr";const A=r.map((e,t)=>this.getRowKey(e,t)),S=A.filter(e=>this.internalSelectedRows.includes(e)),E=this.hasAttribute("clickable");if(d){const e=document.createElement("th");e.className="designbase-wc-table__th designbase-wc-table__th--checkbox";const t=this.createCheckbox({checked:A.length>0&&S.length===A.length,indeterminate:S.length>0&&S.length<A.length,onChange:e=>this.handleSelectAll(e)});e.append(t),_.append(e)}c.forEach(e=>{const t=document.createElement("th");t.className=["designbase-wc-table__th",`designbase-wc-table__th--${e.align||"left"}`,b&&e.sortable&&"designbase-wc-table__th--sortable",this.internalSortColumn===e.key&&this.internalSortDirection&&"designbase-wc-table__th--sorted"].filter(Boolean).join(" "),e.width&&(t.style.width="number"==typeof e.width?`${e.width}px`:e.width);const s=document.createElement("div");s.className="designbase-wc-table__th-content";const n=document.createElement("span");n.className="designbase-wc-table__th-text",n.textContent=e.header,s.append(n),b&&e.sortable&&s.append(this.createSortIcon(e)),t.append(s),b&&e.sortable&&t.addEventListener("click",()=>this.handleSort(e)),_.append(t)}),w.append(_);const f=document.createElement("tbody");if(f.className="designbase-wc-table__tbody",0===o.length){const e=document.createElement("tr");e.className="designbase-wc-table__tr";const t=document.createElement("td");t.className="designbase-wc-table__td designbase-wc-table__td--empty",t.colSpan=Math.max(c.length+(d?1:0),1);const s=document.createElement("db-empty-state");s.setAttribute("title","데이터가 없습니다"),s.setAttribute("description",h),s.setAttribute("variant","no-data"),s.setAttribute("size","m"),t.append(s),e.append(t),f.append(e)}else r.forEach((e,t)=>{const s=this.getRowKey(e,t),n=this.internalSelectedRows.includes(s),a=document.createElement("tr");if(a.className=["designbase-wc-table__tr",E&&"designbase-wc-table__tr--clickable",n&&"designbase-wc-table__tr--selected"].filter(Boolean).join(" "),E&&a.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-row-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}),d){const e=document.createElement("td");e.className="designbase-wc-table__td designbase-wc-table__td--checkbox";const t=this.createCheckbox({checked:n,stopPropagation:!0,onChange:e=>this.handleRowSelect(s,e)});e.append(t),a.append(e)}c.forEach(t=>{const s=document.createElement("td");s.className=["designbase-wc-table__td",`designbase-wc-table__td--${t.align||"left"}`].join(" "),s.textContent=String(e[t.key]??""),a.append(s)}),f.append(a)});if(p.append(w,f),g.append(p),this.append(g),this.hasAttribute("pagination")){const e=Number(this.getAttribute("page-size")||10),t=Number(this.getAttribute("total-items")||o.length),s=Math.max(1,Math.ceil(t/e)),n=document.createElement("div");n.className="designbase-wc-table__footer";const i=document.createElement("db-pagination");i.setAttribute("current-page",String(this.internalPage)),i.setAttribute("total-pages",String(s)),i.setAttribute("size",a),i.setAttribute("show-first-last",""),i.addEventListener("db-change",e=>{const t=Number(e.detail?.page||1);this.internalPage=t,this.dispatchEvent(new CustomEvent("db-page-change",{bubbles:!0,composed:!0,detail:{page:t}})),this.render()}),n.append(i),this.append(n)}}}customElements.get("db-table")||customElements.define("db-table",DbTable);export{DbTable};

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"],i=["horizontal","vertical"],s=["default","pills"];class DbTabs extends HTMLElement{constructor(){super(...arguments),this.tabButtons=[],this.inactivePanels=document.createDocumentFragment(),this.isRendering=!1,this.handleResize=()=>{this.resizeRaf&&cancelAnimationFrame(this.resizeRaf),this.resizeRaf=requestAnimationFrame(()=>{this.isRendering||(this.handleListScroll(),this.updateIndicator(!1))})},this.handleListScroll=()=>{if(!this.list)return;const t=this.list.scrollWidth>this.list.clientWidth,e=this.list.scrollLeft+this.list.clientWidth>=this.list.scrollWidth-5;this.list.classList.toggle("designbase-wc-tabs__list--show-gradient",t&&!e&&"horizontal"===this.orientation)}}static get observedAttributes(){return["labels","items","active-index","selected-id","orientation","size","variant","full-width"]}get labels(){const t=this.tabItems.map(t=>t.label);return t.length?t:(this.getAttribute("labels")||"").split(",").map(t=>t.trim()).filter(Boolean)}set labels(t){this.setAttribute("labels",Array.isArray(t)?t.join(","):t)}get tabItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}get items(){return this.tabItems}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}set tabItems(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}get activeIndex(){const t=this.getAttribute("selected-id");if(t){const e=this.tabItems.findIndex((e,i)=>(e.id||String(i))===t);if(e>=0)return e}return Number(this.getAttribute("active-index")||0)}set activeIndex(t){this.setAttribute("active-index",String(t))}get orientation(){return this.getAttribute("orientation")||"horizontal"}set orientation(t){this.setAttribute("orientation",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get variant(){return this.getAttribute("variant")||"default"}set variant(t){this.setAttribute("variant",t)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(t){this.toggleAttribute("full-width",Boolean(t))}connectedCallback(){this.render(),this.list?.addEventListener("scroll",this.handleListScroll,{passive:!0}),window.addEventListener("resize",this.handleResize),this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this),this.childObserver=new MutationObserver(t=>{if(this.isRendering)return;t.some(t=>Array.from(t.addedNodes).some(t=>t instanceof HTMLElement&&(t.hasAttribute("slot")||void 0!==t.dataset.panelIndex)))&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.list?.removeEventListener("scroll",this.handleListScroll),window.removeEventListener("resize",this.handleResize),this.resizeObserver?.disconnect(),this.resizeRaf&&cancelAnimationFrame(this.resizeRaf),this.childObserver?.disconnect()}attributeChangedCallback(){this.isConnected&&this.render()}collectPanelContent(){const t=new Map,register=(e,i)=>{if(!(e instanceof HTMLElement)||"SLOT"===e.tagName)return;t.has(i)||t.set(i,[]);const s=t.get(i);s.includes(e)||s.push(e)};return Array.from(this.children).forEach(t=>{const e=t.getAttribute("slot")?.match(/^panel-(\d+)$/);if(e)return void register(t,Number(e[1]));const i=t.dataset.panelIndex;void 0!==i&&register(t,Number(i))}),this.panel?.querySelectorAll(":scope > .designbase-wc-tabs__panel-inner > [data-panel-index]").forEach(t=>{t instanceof HTMLElement&&register(t,Number(t.dataset.panelIndex))}),Array.from(this.inactivePanels.children).forEach(t=>{t instanceof HTMLElement&&void 0!==t.dataset.panelIndex&&register(t,Number(t.dataset.panelIndex))}),t}render(){this.isRendering=!0;const a=this.collectPanelContent(),n=this.labels,r=this.tabItems,l=Math.min(Math.max(this.activeIndex,0),Math.max(n.length-1,0)),d=e.includes(this.size)?this.size:"m",o=i.includes(this.orientation)?this.orientation:"horizontal",h=s.includes(this.variant)?this.variant:"default",c="default"===h;this.className=["designbase-wc-tabs",`designbase-wc-tabs--${o}`,`designbase-wc-tabs--${d}`,`designbase-wc-tabs--${h}`,this.fullWidth&&"designbase-wc-tabs--full-width"].filter(Boolean).join(" "),this.querySelectorAll(":scope > .designbase-wc-tabs__list, :scope > .designbase-wc-tabs__panel").forEach(t=>t.remove()),this.list=document.createElement("div"),this.list.className=["designbase-wc-tabs__list",`designbase-wc-tabs__list--${o}`,this.fullWidth&&"designbase-wc-tabs__list--full-width"].filter(Boolean).join(" "),this.list.setAttribute("role","tablist"),this.list.setAttribute("aria-orientation",o),this.list.setAttribute("aria-label","탭 목록"),this.tabButtons=[],n.forEach((e,i)=>{const s=r[i],a=Boolean(s?.disabled),n=i===l,o=document.createElement("button");if(o.type="button",o.className=["designbase-wc-tabs__tab",n&&"designbase-wc-tabs__tab--selected",a&&"designbase-wc-tabs__tab--disabled"].filter(Boolean).join(" "),o.setAttribute("role","tab"),o.setAttribute("aria-selected",String(n)),o.setAttribute("aria-controls",`panel-${i}`),o.id=`tab-${i}`,o.tabIndex=n?0:-1,o.disabled=a,s?.icon){const e=document.createElement("span");e.className="designbase-wc-tabs__tab-icon";const i="s"===d?16:"l"===d?20:18;e.append(t(s.icon,i)),o.append(e)}const h=document.createElement("span");h.className="designbase-wc-tabs__tab-label",h.textContent=e,o.append(h),o.addEventListener("click",()=>this.select(i)),o.addEventListener("keydown",t=>this.handleKeyDown(t,i)),this.list?.append(o),this.tabButtons.push(o)}),c?(this.indicator=document.createElement("span"),this.indicator.className="designbase-wc-tabs__indicator designbase-wc-tabs__indicator--no-transition",this.list.append(this.indicator),requestAnimationFrame(()=>this.updateIndicator(!1))):this.indicator=void 0,this.panel=document.createElement("div"),this.panel.className="designbase-wc-tabs__panel",this.panel.setAttribute("role","tabpanel"),this.panel.id=`panel-${l}`,this.panel.setAttribute("aria-labelledby",`tab-${l}`),this.panel.tabIndex=0;const b=document.createElement("div");b.className="designbase-wc-tabs__panel-inner",a.forEach((t,e)=>{t.forEach(t=>{t.removeAttribute("slot"),t.dataset.panelIndex=String(e),e===l?b.append(t):this.inactivePanels.append(t)})}),this.panel.append(b),this.append(this.list,this.panel),requestAnimationFrame(()=>{this.handleListScroll(),c&&this.updateIndicator(!1)}),this.isRendering=!1}select(t){const e=this.labels,i=this.tabItems;if(!e[t]||i[t]?.disabled)return;this.activeIndex=t;const s=i[t]?.id||String(t);this.setAttribute("selected-id",s),this.dispatchEvent(new CustomEvent("db-change",{detail:{index:t,label:e[t],id:s},bubbles:!0,composed:!0})),this.render()}handleKeyDown(t,e){const i=this.labels,s=this.tabItems;let a=e;if("ArrowRight"===t.key||"ArrowDown"===t.key)a=(e+1)%i.length;else if("ArrowLeft"===t.key||"ArrowUp"===t.key)a=(e-1+i.length)%i.length;else if("Home"===t.key)a=0;else{if("End"!==t.key)return"Enter"===t.key||" "===t.key?(t.preventDefault(),void this.select(e)):void 0;a=i.length-1}t.preventDefault();let n=0;for(;s[a]?.disabled&&n<i.length;)a="ArrowLeft"===t.key||"ArrowUp"===t.key?(a-1+i.length)%i.length:(a+1)%i.length,n+=1;this.tabButtons[a]?.focus()}updateIndicator(t=!1){const e=this.list?.querySelector(".designbase-wc-tabs__tab--selected");if(!e||!this.indicator)return;const i="vertical"===this.orientation;this.indicator.classList.toggle("designbase-wc-tabs__indicator--no-transition",!t),this.indicator.classList.add(i?"designbase-wc-tabs__indicator--vertical":"designbase-wc-tabs__indicator--horizontal"),this.indicator.classList.add("designbase-wc-tabs__indicator--ready"),i?(this.indicator.style.width="2px",this.indicator.style.height=`${e.offsetHeight}px`,this.indicator.style.transform=`translate3d(0, ${e.offsetTop}px, 0)`):(this.indicator.style.width=`${e.offsetWidth}px`,this.indicator.style.height="2px",this.indicator.style.transform=`translate3d(${e.offsetLeft}px, 0, 0)`)}}customElements.get("db-tabs")||customElements.define("db-tabs",DbTabs);export{DbTabs};
+import{createDbIcon as t}from"./db-icons.js";import{labelFrom as e}from"../core/i18n.js";import{TABS_ORIENTATIONS as s,TABS_SIZES as i,TABS_VARIANTS as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as n}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";class DbTabs extends HTMLElement{constructor(){super(...arguments),this.tabButtons=[],this.inactivePanels=document.createDocumentFragment(),this.isRendering=!1,this.handleResize=()=>{this.resizeRaf&&cancelAnimationFrame(this.resizeRaf),this.resizeRaf=requestAnimationFrame(()=>{this.isRendering||(this.handleListScroll(),this.updateIndicator(!1))})},this.handleListScroll=()=>{if(!this.list)return;const t=this.list.scrollWidth>this.list.clientWidth,e=this.list.scrollLeft+this.list.clientWidth>=this.list.scrollWidth-5;this.list.classList.toggle("designbase-wc-tabs__list--show-gradient",t&&!e&&"horizontal"===this.orientation)}}static get observedAttributes(){return["labels","items","active-index","selected-id","orientation","size","variant","full-width"]}get labels(){const t=this.tabItems.map(t=>t.label);return t.length?t:(this.getAttribute("labels")||"").split(",").map(t=>t.trim()).filter(Boolean)}set labels(t){this.setAttribute("labels",Array.isArray(t)?t.join(","):t)}get tabItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}get items(){return this.tabItems}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}set tabItems(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}get activeIndex(){const t=this.getAttribute("selected-id");if(t){const e=this.tabItems.findIndex((e,s)=>(e.id||String(s))===t);if(e>=0)return e}return Number(this.getAttribute("active-index")||0)}set activeIndex(t){this.setAttribute("active-index",String(t))}get orientation(){return n(this.getAttribute("orientation"),s,"horizontal")}set orientation(t){this.setAttribute("orientation",t)}get size(){return n(this.getAttribute("size"),i,"m")}set size(t){this.setAttribute("size",t)}get variant(){return n(this.getAttribute("variant"),a,"default")}set variant(t){this.setAttribute("variant",t)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(t){this.toggleAttribute("full-width",Boolean(t))}connectedCallback(){this.render(),this.list?.addEventListener("scroll",this.handleListScroll,{passive:!0}),window.addEventListener("resize",this.handleResize),this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this),this.childObserver=new MutationObserver(t=>{if(this.isRendering)return;t.some(t=>Array.from(t.addedNodes).some(t=>t instanceof HTMLElement&&(t.hasAttribute("slot")||void 0!==t.dataset.panelIndex)))&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.list?.removeEventListener("scroll",this.handleListScroll),window.removeEventListener("resize",this.handleResize),this.resizeObserver?.disconnect(),this.resizeRaf&&cancelAnimationFrame(this.resizeRaf),this.childObserver?.disconnect()}attributeChangedCallback(){this.isConnected&&this.render()}collectPanelContent(){const t=new Map,register=(e,s)=>{if(!(e instanceof HTMLElement)||"SLOT"===e.tagName)return;t.has(s)||t.set(s,[]);const i=t.get(s);i.includes(e)||i.push(e)};return Array.from(this.children).forEach(t=>{const e=t.getAttribute("slot")?.match(/^panel-(\d+)$/);if(e)return void register(t,Number(e[1]));const s=t.dataset.panelIndex;void 0!==s&&register(t,Number(s))}),this.panel?.querySelectorAll(":scope > .designbase-wc-tabs__panel-inner > [data-panel-index]").forEach(t=>{t instanceof HTMLElement&&register(t,Number(t.dataset.panelIndex))}),Array.from(this.inactivePanels.children).forEach(t=>{t instanceof HTMLElement&&void 0!==t.dataset.panelIndex&&register(t,Number(t.dataset.panelIndex))}),t}render(){this.isRendering=!0;const s=this.collectPanelContent(),i=this.labels,a=this.tabItems,n=Math.min(Math.max(this.activeIndex,0),Math.max(i.length-1,0)),r=this.size,l=this.orientation,o=this.variant,d="default"===o;this.className=["designbase-wc-tabs",`designbase-wc-tabs--${l}`,`designbase-wc-tabs--${r}`,`designbase-wc-tabs--${o}`,this.fullWidth&&"designbase-wc-tabs--full-width"].filter(Boolean).join(" "),this.querySelectorAll(":scope > .designbase-wc-tabs__list, :scope > .designbase-wc-tabs__panel").forEach(t=>t.remove()),this.list=document.createElement("div"),this.list.className=["designbase-wc-tabs__list",`designbase-wc-tabs__list--${l}`,this.fullWidth&&"designbase-wc-tabs__list--full-width"].filter(Boolean).join(" "),this.list.setAttribute("role","tablist"),this.list.setAttribute("aria-orientation",l),this.list.setAttribute("aria-label",e(this,"label-tablist","tabs.label")),this.tabButtons=[],i.forEach((e,s)=>{const i=a[s],l=Boolean(i?.disabled),o=s===n,d=document.createElement("button");if(d.type="button",d.className=["designbase-wc-tabs__tab",o&&"designbase-wc-tabs__tab--selected",l&&"designbase-wc-tabs__tab--disabled"].filter(Boolean).join(" "),d.setAttribute("role","tab"),d.setAttribute("aria-selected",String(o)),d.setAttribute("aria-controls",`panel-${s}`),d.id=`tab-${s}`,d.tabIndex=o?0:-1,d.disabled=l,i?.icon){const e=document.createElement("span");e.className="designbase-wc-tabs__tab-icon";const s="s"===r?16:"l"===r?20:18;e.setAttribute("aria-hidden","true"),e.append(t(i.icon,s)),d.append(e)}const c=document.createElement("span");c.className="designbase-wc-tabs__tab-label",c.textContent=e,d.append(c),d.addEventListener("click",()=>this.select(s)),d.addEventListener("keydown",t=>this.handleKeyDown(t,s)),this.list?.append(d),this.tabButtons.push(d)}),d?(this.indicator=document.createElement("span"),this.indicator.className="designbase-wc-tabs__indicator designbase-wc-tabs__indicator--no-transition",this.list.append(this.indicator),requestAnimationFrame(()=>this.updateIndicator(!1))):this.indicator=void 0,this.panel=document.createElement("div"),this.panel.className="designbase-wc-tabs__panel",this.panel.setAttribute("role","tabpanel"),this.panel.id=`panel-${n}`,this.panel.setAttribute("aria-labelledby",`tab-${n}`),this.panel.tabIndex=0;const c=document.createElement("div");c.className="designbase-wc-tabs__panel-inner",s.forEach((t,e)=>{t.forEach(t=>{t.removeAttribute("slot"),t.dataset.panelIndex=String(e),e===n?c.append(t):this.inactivePanels.append(t)})}),this.panel.append(c),this.append(this.list,this.panel),requestAnimationFrame(()=>{this.handleListScroll(),d&&this.updateIndicator(!1)}),this.isRendering=!1}select(t){const e=this.labels,s=this.tabItems;if(!e[t]||s[t]?.disabled)return;this.activeIndex=t;const i=s[t]?.id||String(t);this.setAttribute("selected-id",i),this.dispatchEvent(new CustomEvent("db-change",{detail:{index:t,label:e[t],id:i},bubbles:!0,composed:!0})),this.render()}handleKeyDown(t,e){const s=this.labels,i=this.tabItems;let a=e;if("ArrowRight"===t.key||"ArrowDown"===t.key)a=(e+1)%s.length;else if("ArrowLeft"===t.key||"ArrowUp"===t.key)a=(e-1+s.length)%s.length;else if("Home"===t.key)a=0;else{if("End"!==t.key)return"Enter"===t.key||" "===t.key?(t.preventDefault(),void this.select(e)):void 0;a=s.length-1}t.preventDefault();let n=0;for(;i[a]?.disabled&&n<s.length;)a="ArrowLeft"===t.key||"ArrowUp"===t.key?(a-1+s.length)%s.length:(a+1)%s.length,n+=1;this.tabButtons[a]?.focus()}updateIndicator(t=!1){const e=this.list?.querySelector(".designbase-wc-tabs__tab--selected");if(!e||!this.indicator)return;const s="vertical"===this.orientation;this.indicator.classList.toggle("designbase-wc-tabs__indicator--no-transition",!t),this.indicator.classList.add(s?"designbase-wc-tabs__indicator--vertical":"designbase-wc-tabs__indicator--horizontal"),this.indicator.classList.add("designbase-wc-tabs__indicator--ready"),s?(this.indicator.style.width="2px",this.indicator.style.height=`${e.offsetHeight}px`,this.indicator.style.transform=`translate3d(0, ${e.offsetTop}px, 0)`):(this.indicator.style.width=`${e.offsetWidth}px`,this.indicator.style.height="2px",this.indicator.style.transform=`translate3d(${e.offsetLeft}px, 0, 0)`)}}customElements.get("db-tabs")||customElements.define("db-tabs",DbTabs);export{DbTabs};

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

@@ -1 +1 @@
-const t="designbase-wc-testimonial",e=["list","card","logo","image","text"];class DbTestimonial extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["quote","author","role","company","avatar","avatar-initials","rating","max-rating","variant","logo","logo-alt","image","image-alt","tone","align"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}build(){this.innerEl=document.createElement("div"),this.quoteEl=document.createElement("p"),this.quoteEl.className=`${t}__quote`,this.backgroundEl=document.createElement("div"),this.backgroundEl.className=`${t}__background`,this.backgroundEl.hidden=!0,this.backgroundEl.setAttribute("aria-hidden","true"),this.logoWrapEl=document.createElement("div"),this.logoWrapEl.className=`${t}__logo`,this.logoWrapEl.hidden=!0,this.logoEl=document.createElement("img"),this.logoEl.alt="",this.logoWrapEl.append(this.logoEl),this.footerEl=document.createElement("div"),this.footerEl.className=`${t}__footer`,this.avatarWrapEl=document.createElement("div"),this.avatarWrapEl.className=`${t}__avatar`,this.avatarEl=document.createElement("db-avatar"),this.avatarEl.className=`${t}__avatar-image`,this.avatarWrapEl.append(this.avatarEl);const e=document.createElement("div");e.className=`${t}__meta`,this.authorEl=document.createElement("span"),this.authorEl.className=`${t}__author`,this.roleEl=document.createElement("span"),this.roleEl.className=`${t}__role`,this.ratingEl=document.createElement("db-rating"),this.ratingEl.className=`${t}__rating`,this.ratingEl.setAttribute("display","stars"),this.ratingEl.setAttribute("variant","inline"),this.ratingEl.setAttribute("allow-half",""),this.ratingEl.setAttribute("readonly",""),this.ratingEl.setAttribute("hover-effect","false"),this.ratingEl.setAttribute("color","primary"),this.ratingEl.hidden=!0,e.append(this.authorEl,this.roleEl,this.ratingEl),this.footerEl.append(this.avatarWrapEl,e),this.extraEl=document.createElement("div"),this.extraEl.className=`${t}__extra`,this.extraEl.hidden=!0,this.innerEl.append(this.logoWrapEl,this.quoteEl,this.footerEl,this.extraEl),this.append(this.backgroundEl,this.innerEl)}getVariant(){const t=this.getAttribute("variant")||"card";return e.includes(t)?t:"card"}getAvatarSize(){return"list"===this.getVariant()?"s":"m"}syncExtraContent(){if(!this.extraEl)return;const t=Array.from(this.childNodes).filter(t=>t!==this.innerEl&&t!==this.backgroundEl&&(t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&Boolean(t.textContent?.trim())));if(0===t.length)return this.extraEl.hidden=!0,void this.extraEl.replaceChildren();this.extraEl.hidden=!1,this.extraEl.replaceChildren(...t.map(t=>t.cloneNode(!0)))}updateUI(){const e=this.getAttribute("quote")||"",i=this.getAttribute("author")||"",a=this.getAttribute("role")||"",r=this.getAttribute("company")||"",l=this.getAttribute("avatar")||"",s=this.getAttribute("avatar-initials")||"",n=this.getAttribute("rating"),o=Number(this.getAttribute("max-rating")||5),h=null!==n&&""!==n?function clampRating(t,e){if("number"==typeof t&&!Number.isNaN(t))return t<0?0:t>e?e:Math.round(10*t)/10}(Number(n),o):void 0,E=this.getVariant(),u=this.getAttribute("logo")||"",d=this.getAttribute("logo-alt")||"",g=this.getAttribute("image")||"",c=this.getAttribute("image-alt")||"",m=this.getAttribute("tone")||"violet",b=this.getAttribute("align")||"left",v=[t,`${t}--variant-${E}`,`${t}--tone-${m}`,"left"!==b?`${t}--align-${b}`:""].filter(Boolean).join(" ");if(this.className=v,this.innerEl&&(this.innerEl.className=`${t}__inner`),this.quoteEl&&(this.quoteEl.textContent=e?`“${e}”`:""),this.backgroundEl){const t="image"===E&&Boolean(g);this.backgroundEl.hidden=!t,t?(this.backgroundEl.style.backgroundImage=`url("${g}")`,this.backgroundEl.setAttribute("role","img"),this.backgroundEl.setAttribute("aria-label",c||"Testimonial background"),this.backgroundEl.removeAttribute("aria-hidden")):(this.backgroundEl.style.removeProperty("background-image"),this.backgroundEl.removeAttribute("role"),this.backgroundEl.removeAttribute("aria-label"),this.backgroundEl.setAttribute("aria-hidden","true"))}if(this.logoWrapEl&&this.logoEl){const t="logo"===E&&Boolean(u);this.logoWrapEl.hidden=!t,t?(this.logoEl.src=u,this.logoEl.alt=d||"logo"):(this.logoEl.removeAttribute("src"),this.logoEl.alt="")}this.authorEl&&(this.authorEl.textContent=i);const p=[a,r].filter(Boolean).join(" · ");this.roleEl&&(this.roleEl.textContent=p,this.roleEl.hidden=!p);const A=Boolean(l||s);this.avatarWrapEl&&(this.avatarWrapEl.hidden=!A),this.avatarEl&&A&&(this.avatarEl.setAttribute("size",this.getAvatarSize()),l?this.avatarEl.setAttribute("src",l):this.avatarEl.removeAttribute("src"),s?this.avatarEl.setAttribute("initials",s):this.avatarEl.removeAttribute("initials"),this.avatarEl.setAttribute("alt",`${i} 프로필 이미지`)),this.ratingEl&&("number"==typeof h?(this.ratingEl.hidden=!1,this.ratingEl.removeAttribute("hidden"),this.ratingEl.style.removeProperty("display"),this.ratingEl.setAttribute("value",String(h)),this.ratingEl.setAttribute("max-value",String(o)),this.ratingEl.setAttribute("size","s")):(this.ratingEl.hidden=!0,this.ratingEl.setAttribute("hidden",""),this.ratingEl.style.display="none",this.ratingEl.removeAttribute("value"))),this.syncExtraContent()}}customElements.get("db-testimonial")||customElements.define("db-testimonial",DbTestimonial);export{DbTestimonial};
+import{TESTIMONIAL_VARIANTS as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const e="designbase-wc-testimonial";class DbTestimonial extends HTMLElement{constructor(){super(...arguments),this.built=!1}static get observedAttributes(){return["quote","author","role","company","avatar","avatar-initials","rating","max-rating","variant","logo","logo-alt","image","image-alt","tone","align"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.updateUI()}attributeChangedCallback(){this.built&&this.updateUI()}build(){this.innerEl=document.createElement("div"),this.quoteEl=document.createElement("p"),this.quoteEl.className=`${e}__quote`,this.backgroundEl=document.createElement("div"),this.backgroundEl.className=`${e}__background`,this.backgroundEl.hidden=!0,this.backgroundEl.setAttribute("aria-hidden","true"),this.logoWrapEl=document.createElement("div"),this.logoWrapEl.className=`${e}__logo`,this.logoWrapEl.hidden=!0,this.logoEl=document.createElement("img"),this.logoEl.alt="",this.logoWrapEl.append(this.logoEl),this.footerEl=document.createElement("div"),this.footerEl.className=`${e}__footer`,this.avatarWrapEl=document.createElement("div"),this.avatarWrapEl.className=`${e}__avatar`,this.avatarEl=document.createElement("db-avatar"),this.avatarEl.className=`${e}__avatar-image`,this.avatarWrapEl.append(this.avatarEl);const t=document.createElement("div");t.className=`${e}__meta`,this.authorEl=document.createElement("span"),this.authorEl.className=`${e}__author`,this.roleEl=document.createElement("span"),this.roleEl.className=`${e}__role`,this.ratingEl=document.createElement("db-rating"),this.ratingEl.className=`${e}__rating`,this.ratingEl.setAttribute("display","stars"),this.ratingEl.setAttribute("variant","inline"),this.ratingEl.setAttribute("allow-half",""),this.ratingEl.setAttribute("readonly",""),this.ratingEl.setAttribute("hover-effect","false"),this.ratingEl.setAttribute("color","primary"),this.ratingEl.hidden=!0,t.append(this.authorEl,this.roleEl,this.ratingEl),this.footerEl.append(this.avatarWrapEl,t),this.extraEl=document.createElement("div"),this.extraEl.className=`${e}__extra`,this.extraEl.hidden=!0,this.innerEl.append(this.logoWrapEl,this.quoteEl,this.footerEl,this.extraEl),this.append(this.backgroundEl,this.innerEl)}getVariant(){const e=this.getAttribute("variant")||"card";return t.includes(e)?e:"card"}getAvatarSize(){return"list"===this.getVariant()?"s":"m"}syncExtraContent(){if(!this.extraEl)return;const t=Array.from(this.childNodes).filter(t=>t!==this.innerEl&&t!==this.backgroundEl&&(t.nodeType===Node.ELEMENT_NODE||t.nodeType===Node.TEXT_NODE&&Boolean(t.textContent?.trim())));if(0===t.length)return this.extraEl.hidden=!0,void this.extraEl.replaceChildren();this.extraEl.hidden=!1,this.extraEl.replaceChildren(...t.map(t=>t.cloneNode(!0)))}updateUI(){const t=this.getAttribute("quote")||"",i=this.getAttribute("author")||"",a=this.getAttribute("role")||"",r=this.getAttribute("company")||"",l=this.getAttribute("avatar")||"",s=this.getAttribute("avatar-initials")||"",n=this.getAttribute("rating"),o=Number(this.getAttribute("max-rating")||5),h=null!==n&&""!==n?function clampRating(t,e){if("number"==typeof t&&!Number.isNaN(t))return t<0?0:t>e?e:Math.round(10*t)/10}(Number(n),o):void 0,u=this.getVariant(),E=this.getAttribute("logo")||"",d=this.getAttribute("logo-alt")||"",g=this.getAttribute("image")||"",c=this.getAttribute("image-alt")||"",m=this.getAttribute("tone")||"violet",b=this.getAttribute("align")||"left",v=[e,`${e}--variant-${u}`,`${e}--tone-${m}`,"left"!==b?`${e}--align-${b}`:""].filter(Boolean).join(" ");if(this.className=v,this.innerEl&&(this.innerEl.className=`${e}__inner`),this.quoteEl&&(this.quoteEl.textContent=t?`“${t}”`:""),this.backgroundEl){const t="image"===u&&Boolean(g);this.backgroundEl.hidden=!t,t?(this.backgroundEl.style.backgroundImage=`url("${g}")`,this.backgroundEl.setAttribute("role","img"),this.backgroundEl.setAttribute("aria-label",c||"Testimonial background"),this.backgroundEl.removeAttribute("aria-hidden")):(this.backgroundEl.style.removeProperty("background-image"),this.backgroundEl.removeAttribute("role"),this.backgroundEl.removeAttribute("aria-label"),this.backgroundEl.setAttribute("aria-hidden","true"))}if(this.logoWrapEl&&this.logoEl){const t="logo"===u&&Boolean(E);this.logoWrapEl.hidden=!t,t?(this.logoEl.src=E,this.logoEl.alt=d||"logo"):(this.logoEl.removeAttribute("src"),this.logoEl.alt="")}this.authorEl&&(this.authorEl.textContent=i);const p=[a,r].filter(Boolean).join(" · ");this.roleEl&&(this.roleEl.textContent=p,this.roleEl.hidden=!p);const A=Boolean(l||s);this.avatarWrapEl&&(this.avatarWrapEl.hidden=!A),this.avatarEl&&A&&(this.avatarEl.setAttribute("size",this.getAvatarSize()),l?this.avatarEl.setAttribute("src",l):this.avatarEl.removeAttribute("src"),s?this.avatarEl.setAttribute("initials",s):this.avatarEl.removeAttribute("initials"),this.avatarEl.setAttribute("alt",`${i} 프로필 이미지`)),this.ratingEl&&("number"==typeof h?(this.ratingEl.hidden=!1,this.ratingEl.removeAttribute("hidden"),this.ratingEl.style.removeProperty("display"),this.ratingEl.setAttribute("value",String(h)),this.ratingEl.setAttribute("max-value",String(o)),this.ratingEl.setAttribute("size","s")):(this.ratingEl.hidden=!0,this.ratingEl.setAttribute("hidden",""),this.ratingEl.style.display="none",this.ratingEl.removeAttribute("value"))),this.syncExtraContent()}}customElements.get("db-testimonial")||customElements.define("db-testimonial",DbTestimonial);export{DbTestimonial};

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

@@ -1 +1 @@
-const t=["s","m","l"];class DbTextarea extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleInput=t=>{t.stopPropagation(),this.field&&(this.updateCharacterCount(),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:this.field.value,nativeEvent:t},bubbles:!0,composed:!0})))},this.handleChange=t=>{if(t.stopPropagation(),!this.field)return;const e=this.field.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this.updateCharacterCount(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,nativeEvent:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["label","placeholder","value","default-value","name","size","rows","max-length","show-character-count","character-count-position","disabled","readonly","required","error","error-message","helper-text","full-width","resizable"]}get value(){return this.field?.value??this.getAttribute("value")??""}set value(t){this.setAttribute("value",t),this.field&&(this.field.value=t,this.updateCharacterCount())}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.built||this.build(),this.syncState()}attributeChangedCallback(t){if(this.built){if("value"===t&&this.field){const t=this.getAttribute("value")||"";return this.field.value!==t&&(this.field.value=t),void this.updateCharacterCount()}this.syncState()}}focus(){this.field?.focus()}get showCharacterCount(){return this.hasAttribute("show-character-count")}get characterCountPosition(){return this.getAttribute("character-count-position")||"bottom"}build(){const t=this.getAttribute("id")||`db-textarea-${Math.random().toString(36).slice(2)}`;this.hasAttribute("id")||this.setAttribute("id",t),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-textarea__label",this.labelEl.htmlFor=t,this.countTop=document.createElement("div"),this.countTop.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--top",this.countTop.hidden=!0;const e=document.createElement("div");e.className="designbase-wc-textarea__wrapper",this.field=document.createElement("textarea"),this.field.id=t,this.field.className="designbase-wc-textarea__field",this.field.addEventListener("input",this.handleInput),this.field.addEventListener("change",this.handleChange),e.appendChild(this.field),this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-textarea__footer",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-textarea__error-message",this.errorEl.setAttribute("role","alert"),this.helperEl=document.createElement("div"),this.helperEl.className="designbase-wc-textarea__helper-text",this.countBottom=document.createElement("div"),this.countBottom.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--bottom",this.countBottom.hidden=!0,this.footerEl.append(this.errorEl,this.helperEl,this.countBottom),this.append(this.labelEl,this.countTop,e,this.footerEl),this.built=!0}syncState(){if(!this.field)return;const e=t.includes(this.size)?this.size:"m",i=this.getAttribute("label")||"",s=this.getAttribute("helper-text")||"",a=this.getAttribute("error-message")||"",r=this.hasAttribute("error"),h=this.getAttribute("value")??this.getAttribute("default-value")??"";if(this.className=["designbase-wc-textarea",`designbase-wc-textarea--${e}`,r&&"designbase-wc-textarea--error",this.hasAttribute("disabled")&&"designbase-wc-textarea--disabled",this.hasAttribute("readonly")&&"designbase-wc-textarea--readonly",this.hasAttribute("full-width")&&"designbase-wc-textarea--full-width",this.hasAttribute("resizable")?"":"designbase-wc-textarea--not-resizable"].filter(Boolean).join(" "),this.labelEl){const t=this.hasAttribute("required")?'<span aria-hidden="true"> *</span>':"";this.labelEl.innerHTML=i?`${this.escape(i)}${t}`:"",this.labelEl.hidden=!i}this.field.placeholder=this.getAttribute("placeholder")||"",this.field.name=this.getAttribute("name")||"",this.field.value!==h&&(this.field.value=h),this.field.rows=Number(this.getAttribute("rows")||4),this.field.disabled=this.hasAttribute("disabled"),this.field.readOnly=this.hasAttribute("readonly"),this.field.required=this.hasAttribute("required"),this.field.setAttribute("aria-invalid",String(r));const l=this.getAttribute("max-length");l?this.field.maxLength=Number(l):this.field.removeAttribute("maxLength");const n=`${this.getAttribute("id")}-helper`,d=`${this.getAttribute("id")}-error`;r&&a?(this.errorEl.id=d,this.errorEl.textContent=a,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.field.setAttribute("aria-describedby",d)):s?(this.helperEl.id=n,this.helperEl.textContent=s,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.field.setAttribute("aria-describedby",n)):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.field.removeAttribute("aria-describedby")),this.updateCharacterCount()}updateCharacterCount(){if(!this.field||!this.countTop||!this.countBottom)return;const t=this.field.value.length,e=this.getAttribute("max-length"),i=Boolean(e&&t>Number(e)),s=`${t}${e?` / ${e}`:""}`,renderCount=t=>{t.innerHTML=`<span class="designbase-wc-textarea__character-count-text${i?" designbase-wc-textarea__character-count-text--error":""}">${s}</span>`};this.showCharacterCount&&"top"===this.characterCountPosition?(renderCount(this.countTop),this.countTop.hidden=!1,this.countBottom.hidden=!0):this.showCharacterCount?(renderCount(this.countBottom),this.countBottom.hidden=!1,this.countTop.hidden=!0):(this.countTop.hidden=!0,this.countBottom.hidden=!0)}escape(t){return t.replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t]||t))}}customElements.get("db-textarea")||customElements.define("db-textarea",DbTextarea);export{DbTextarea};
+import{dbUid as t}from"../core/uid.js";import{TEXTAREA_SIZES as e}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbTextarea extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleInput=t=>{t.stopPropagation(),this.field&&(this.updateCharacterCount(),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:this.field.value,nativeEvent:t},bubbles:!0,composed:!0})))},this.handleChange=t=>{if(t.stopPropagation(),!this.field)return;const e=this.field.value;this.getAttribute("value")!==e&&this.setAttribute("value",e),this.updateCharacterCount(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e,nativeEvent:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["label","placeholder","value","default-value","name","size","rows","max-length","show-character-count","character-count-position","disabled","readonly","required","error","error-message","helper-text","full-width","resizable"]}get value(){return this.field?.value??this.getAttribute("value")??""}set value(t){this.setAttribute("value",t),this.field&&(this.field.value=t,this.updateCharacterCount())}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.built||this.build(),this.syncState()}attributeChangedCallback(t){if(this.built){if("value"===t&&this.field){const t=this.getAttribute("value")||"";return this.field.value!==t&&(this.field.value=t),void this.updateCharacterCount()}this.syncState()}}focus(){this.field?.focus()}get showCharacterCount(){return this.hasAttribute("show-character-count")}get characterCountPosition(){return this.getAttribute("character-count-position")||"bottom"}build(){const e=this.getAttribute("id")||t("db-textarea");this.hasAttribute("id")||this.setAttribute("id",e),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-textarea__label",this.labelEl.htmlFor=e,this.countTop=document.createElement("div"),this.countTop.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--top",this.countTop.hidden=!0;const i=document.createElement("div");i.className="designbase-wc-textarea__wrapper",this.field=document.createElement("textarea"),this.field.id=e,this.field.className="designbase-wc-textarea__field",this.field.addEventListener("input",this.handleInput),this.field.addEventListener("change",this.handleChange),i.appendChild(this.field),this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-textarea__footer",this.errorEl=document.createElement("div"),this.errorEl.className="designbase-wc-textarea__error-message",this.errorEl.setAttribute("role","alert"),this.helperEl=document.createElement("div"),this.helperEl.className="designbase-wc-textarea__helper-text",this.countBottom=document.createElement("div"),this.countBottom.className="designbase-wc-textarea__character-count designbase-wc-textarea__character-count--bottom",this.countBottom.hidden=!0,this.footerEl.append(this.errorEl,this.helperEl,this.countBottom),this.append(this.labelEl,this.countTop,i,this.footerEl),this.built=!0}syncState(){if(!this.field)return;const t=e.includes(this.size)?this.size:"m",i=this.getAttribute("label")||"",s=this.getAttribute("helper-text")||"",a=this.getAttribute("error-message")||"",r=this.hasAttribute("error"),h=this.getAttribute("value")??this.getAttribute("default-value")??"";if(this.className=["designbase-wc-textarea",`designbase-wc-textarea--${t}`,r&&"designbase-wc-textarea--error",this.hasAttribute("disabled")&&"designbase-wc-textarea--disabled",this.hasAttribute("readonly")&&"designbase-wc-textarea--readonly",this.hasAttribute("full-width")&&"designbase-wc-textarea--full-width",this.hasAttribute("resizable")?"":"designbase-wc-textarea--not-resizable"].filter(Boolean).join(" "),this.labelEl){const t=this.hasAttribute("required")?'<span aria-hidden="true"> *</span>':"";this.labelEl.innerHTML=i?`${this.escape(i)}${t}`:"",this.labelEl.hidden=!i}this.field.placeholder=this.getAttribute("placeholder")||"",this.field.name=this.getAttribute("name")||"",this.field.value!==h&&(this.field.value=h),this.field.rows=Number(this.getAttribute("rows")||4),this.field.disabled=this.hasAttribute("disabled"),this.field.readOnly=this.hasAttribute("readonly"),this.field.required=this.hasAttribute("required"),this.field.setAttribute("aria-invalid",String(r));const l=this.getAttribute("max-length");l?this.field.maxLength=Number(l):this.field.removeAttribute("maxLength");const n=`${this.getAttribute("id")}-helper`,o=`${this.getAttribute("id")}-error`;r&&a?(this.errorEl.id=o,this.errorEl.textContent=a,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.field.setAttribute("aria-describedby",o)):s?(this.helperEl.id=n,this.helperEl.textContent=s,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.field.setAttribute("aria-describedby",n)):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.field.removeAttribute("aria-describedby")),this.updateCharacterCount()}updateCharacterCount(){if(!this.field||!this.countTop||!this.countBottom)return;const t=this.field.value.length,e=this.getAttribute("max-length"),i=Boolean(e&&t>Number(e)),s=`${t}${e?` / ${e}`:""}`,renderCount=t=>{let e=t.querySelector(".designbase-wc-textarea__character-count-text");e||(e=document.createElement("span"),t.replaceChildren(e)),e.className="designbase-wc-textarea__character-count-text",e.classList.toggle("designbase-wc-textarea__character-count-text--error",i),e.textContent=s};this.showCharacterCount&&"top"===this.characterCountPosition?(renderCount(this.countTop),this.countTop.hidden=!1,this.countBottom.hidden=!0):this.showCharacterCount?(renderCount(this.countBottom),this.countBottom.hidden=!1,this.countTop.hidden=!0):(this.countTop.hidden=!0,this.countBottom.hidden=!0)}escape(t){return t.replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t]||t))}}customElements.get("db-textarea")||customElements.define("db-textarea",DbTextarea);export{DbTextarea};

package/dist/esm/components/db-time-picker.d.ts

@@ -1,7 +1,7 @@
 import './db-button.js';
+import { TIME_PICKER_FORMATS } from '@designbasekorea/ui-contracts';
 
-declare const FORMATS: readonly ["12h", "24h", "12h-with-seconds", "24h-with-seconds"];
-type TimeFormat = (typeof FORMATS)[number];
+type TimeFormat = (typeof TIME_PICKER_FORMATS)[number];
 declare class DbTimePicker extends HTMLElement {
     static get observedAttributes(): string[];
     private built;
@@ -22,6 +22,9 @@ declare class DbTimePicker extends HTMLElement {
     private boundDocumentMouseDown;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** 열린 드롭다운은 Escape 로 닫히고 포커스는 트리거로 돌아간다 (A11Y-ESCAPE) */
+    private handleDocumentKeyDown;
+    private boundDocumentKeyDown;
     attributeChangedCallback(name: string): void;
     get value(): string;
     set value(value: string);

package/dist/esm/components/db-time-picker.js

@@ -1 +1 @@
-import{createDbIcon as t,getDbComponentIconSize as e}from"./db-icons.js";import"./db-button.js";const i="designbase-wc-time-picker",s=["s","m","l"],n=["12h","24h","12h-with-seconds","24h-with-seconds"];class DbTimePicker extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isOpen=!1,this.hours=12,this.minutes=0,this.seconds=0,this.period="PM",this.inputText="",this.tempHours=12,this.tempMinutes=0,this.tempSeconds=0,this.tempPeriod="PM",this.boundDocumentMouseDown=t=>this.handleDocumentMouseDown(t)}static get observedAttributes(){return["value","default-value","type","format","minute-step","size","disabled","readonly","label","full-width","error","dropdown-position","open"]}connectedCallback(){this.built||this.build(),this.parseTimeString(this.getAttribute("value")??this.getAttribute("default-value")??"12:00"),this.syncInputText(),this.render(),document.addEventListener("mousedown",this.boundDocumentMouseDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.boundDocumentMouseDown)}attributeChangedCallback(t){if(this.built){if("value"===t){const t=this.getAttribute("value");t&&(this.parseTimeString(t),this.syncInputText())}if("open"===t)return this.isOpen=this.hasAttribute("open"),void this.render();this.render()}}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get format(){const t=this.getAttribute("format")||"24h";return n.includes(t)?t:"24h"}set format(t){this.setAttribute("format",t)}get type(){return"modal"===this.getAttribute("type")?"modal":"dropdown"}get is12h(){return"12h"===this.format||"12h-with-seconds"===this.format}get showSeconds(){return"12h-with-seconds"===this.format||"24h-with-seconds"===this.format}get minuteStep(){const t=Number(this.getAttribute("minute-step")||"1");return Number.isFinite(t)&&t>0?t:1}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}get readonly(){return this.hasAttribute("readonly")}set readonly(t){this.toggleAttribute("readonly",Boolean(t))}build(){this.built=!0,this.labelEl=document.createElement("label"),this.labelEl.className=`${i}__label`,this.triggerEl=document.createElement("div"),this.triggerEl.className=`${i}__trigger`;const t=document.createElement("button");t.type="button",t.className=`${i}__icon-display`,t.setAttribute("aria-label","시간 선택 열기"),t.addEventListener("click",()=>this.toggleOpen()),this.inputEl=document.createElement("input"),this.inputEl.type="text",this.inputEl.className=`${i}__input`,this.inputEl.setAttribute("aria-label","시간 입력"),this.inputEl.addEventListener("click",()=>this.openPicker()),this.inputEl.addEventListener("blur",()=>this.handleInputBlur()),this.inputEl.addEventListener("input",()=>{this.inputText=this.inputEl?.value||""});const e=document.createElement("button");e.type="button",e.className=`${i}__toggle`,e.setAttribute("aria-label","시간 선택 열기"),e.addEventListener("click",()=>this.toggleOpen()),this.triggerEl.append(t,this.inputEl,e),this.dropdownEl=document.createElement("div"),this.dropdownEl.className=`${i}__dropdown`,this.dropdownEl.setAttribute("role","dialog"),this.dropdownEl.setAttribute("aria-modal","false")}pad2(t){return String(t).padStart(2,"0")}to24Hour(t,e){return"AM"===e?12===t?0:t:12===t?12:t+12}formatTimeString(t,e,i,s){const n="AM"===(s||this.period)?"오전":"오후";return this.is12h?`${n} ${this.pad2(t)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(i)}`:""}`:`${this.pad2(t)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(i)}`:""}`}toValue24(t,e,i,s){const n=this.is12h?this.to24Hour(t,s||this.period):t;return`${this.pad2(n)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(i)}`:""}`}parseTimeString(t){const e=t.trim();if(this.is12h){const t=this.showSeconds?/^(오전|오후|AM|PM)?\s*(0?[1-9]|1[0-2]):([0-5]\d):([0-5]\d)\s*(AM|PM|오전|오후)?$/i:/^(오전|오후|AM|PM)?\s*(0?[1-9]|1[0-2]):([0-5]\d)\s*(AM|PM|오전|오후)?$/i,i=e.match(t);if(i){const t=i[1],e=this.showSeconds?i[5]:i[4],s=(t||e||"AM").toUpperCase();return this.hours=parseInt(i[2],10),this.minutes=parseInt(i[3],10),this.seconds=this.showSeconds?parseInt(i[4],10):0,void(this.period="오후"===s||"PM"===s?"PM":"AM")}}else{const t=this.showSeconds?/^([01]?\d|2[0-3]):([0-5]\d):([0-5]\d)$/:/^([01]?\d|2[0-3]):([0-5]\d)$/,i=e.match(t);i&&(this.hours=parseInt(i[1],10),this.minutes=parseInt(i[2],10),this.seconds=this.showSeconds?parseInt(i[3],10):0)}}syncInputText(){this.inputText=this.formatTimeString(this.hours,this.minutes,this.seconds),this.inputEl&&(this.inputEl.value=this.inputText)}emitChange(t){this.setAttribute("value",t),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:t},bubbles:!0,composed:!0}))}handleTimeChange(t,e,i=this.seconds,s){this.hours=t,this.minutes=e,this.seconds=i,s&&(this.period=s);const n=this.formatTimeString(t,e,i,s);this.inputText=n,this.inputEl&&(this.inputEl.value=n),this.emitChange(this.toValue24(t,e,i,s))}handleInputBlur(){if(!this.inputEl)return;const t=this.inputText;this.parseTimeString(this.inputEl.value);this.formatTimeString(this.hours,this.minutes,this.seconds)!==t||this.inputEl.value.trim()?this.handleTimeChange(this.hours,this.minutes,this.seconds,this.period):this.syncInputText()}openPicker(){this.disabled||this.readonly||(this.isOpen=!0,"modal"===this.type&&(this.tempHours=this.hours,this.tempMinutes=this.minutes,this.tempSeconds=this.seconds,this.tempPeriod=this.period),this.render())}closePicker(){this.isOpen=!1,this.render()}toggleOpen(){this.isOpen?this.closePicker():this.openPicker()}handleDocumentMouseDown(t){this.isOpen&&(this.contains(t.target)||this.closePicker())}createWheel(t){const{label:e,items:s,value:n,onChange:r,formatter:o}=t,h=document.createElement("div");h.className=`${i}__wheel-container`;const d=document.createElement("div");d.className=`${i}__wheel-label`,d.textContent=e,h.appendChild(d);const l=document.createElement("div");l.className=`${i}__wheel-viewport`;const a=document.createElement("div");a.className=`${i}__wheel`,a.setAttribute("role","listbox"),a.setAttribute("aria-label",e);let c=null,u=!1,p=!1,m=0,b=0;const indexOfValue=t=>s.findIndex(e=>e===t),scrollToIndex=(t,e=!0)=>{const i=40*t;u=!0,a.scrollTo({top:i,behavior:e?"smooth":"auto"}),window.setTimeout(()=>{u=!1},150)},fmt=t=>o?o(t):"number"==typeof t?this.pad2(t):String(t);s.forEach(t=>{const e=document.createElement("div");e.className=[`${i}__wheel-item`,t===n&&`${i}__wheel-item--selected`].filter(Boolean).join(" "),e.setAttribute("role","option"),e.setAttribute("aria-selected",String(t===n)),e.textContent=fmt(t),e.addEventListener("click",()=>{const e=indexOfValue(t);scrollToIndex(e,!0),t!==n&&r(t)}),a.appendChild(e)});const handleScroll=()=>{u||(c&&window.clearTimeout(c),c=window.setTimeout(()=>{const t=a.scrollTop,e=Math.round(t/40),i=Math.max(0,Math.min(s.length-1,e)),o=s[i];scrollToIndex(i,!0),o!==n&&r(o)},120))};a.addEventListener("scroll",handleScroll),a.addEventListener("pointerdown",t=>{p=!0,m=t.clientY,b=a.scrollTop,a.setPointerCapture(t.pointerId),a.style.cursor="grabbing"}),a.addEventListener("pointermove",t=>{p&&(a.scrollTop=b-(t.clientY-m))});const endDrag=t=>{p&&(p=!1,a.releasePointerCapture(t.pointerId),a.style.cursor="grab",handleScroll())};a.addEventListener("pointerup",endDrag),a.addEventListener("pointercancel",endDrag);const E=indexOfValue(n);E>=0&&requestAnimationFrame(()=>scrollToIndex(E,!1));const g=document.createElement("div");g.className=`${i}__wheel-center-indicator`,g.setAttribute("aria-hidden","true");const v=document.createElement("div");v.className=`${i}__wheel-fade wheel-fade--top`,v.setAttribute("aria-hidden","true");const w=document.createElement("div");return w.className=`${i}__wheel-fade wheel-fade--bottom`,w.setAttribute("aria-hidden","true"),l.append(a,g,v,w),h.appendChild(l),h}renderSelector(e=!1){const s=document.createElement("div");s.className=`${i}__selector`;const n=document.createElement("div");n.className=`${i}__picker-wheels`;const r=this.is12h?Array.from({length:12},(t,e)=>e+1):Array.from({length:24},(t,e)=>e),o=Array.from({length:Math.floor(60/this.minuteStep)},(t,e)=>e*this.minuteStep),h=Array.from({length:60},(t,e)=>e),d=e?this.tempHours:this.hours,l=e?this.tempMinutes:this.minutes,a=e?this.tempSeconds:this.seconds,c=e?this.tempPeriod:this.period,onChange=(t,i,s,n)=>{if(e)return this.tempHours=t,this.tempMinutes=i,this.tempSeconds=s,void(this.tempPeriod=n);this.handleTimeChange(t,i,s,n)};if(n.appendChild(this.createWheel({label:"시간",items:r,value:d,onChange:t=>onChange(t,l,a,c)})),n.appendChild(this.createWheel({label:"분",items:o,value:o.includes(l)?l:o[0],onChange:t=>onChange(d,t,a,c)})),this.showSeconds&&n.appendChild(this.createWheel({label:"초",items:h,value:a,onChange:t=>onChange(d,l,t,c)})),this.is12h&&n.appendChild(this.createWheel({label:"오전/오후",items:["AM","PM"],value:c,onChange:t=>onChange(d,l,a,t),formatter:t=>"AM"===t?"오전":"오후"})),s.appendChild(n),e)return s;const u=document.createElement("div");u.className=`${i}__dropdown-actions`;const p=document.createElement("div");p.className=`${i}__preview`,p.setAttribute("aria-live","polite"),p.appendChild(t("clock",16));const m=document.createElement("div");m.className=`${i}__preview-time`,m.textContent=this.formatTimeString(d,l,a,c),p.appendChild(m);const b=document.createElement("db-button");return b.setAttribute("variant","primary"),b.setAttribute("size","m"),b.textContent="선택",b.addEventListener("click",()=>{this.handleTimeChange(d,l,a,c),this.closePicker()}),u.append(p,b),s.appendChild(u),s}render(){const n=s.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",r=this.getAttribute("dropdown-position")||"bottom-start",o=e(n);if(this.className=[i,`${i}--${n}`,this.hasAttribute("full-width")&&`${i}--full-width`,this.disabled&&`${i}--disabled`,this.readonly&&`${i}--readonly`,this.isOpen&&`${i}--open`,this.hasAttribute("error")&&`${i}--error`].filter(Boolean).join(" "),this.replaceChildren(),!(this.labelEl&&this.triggerEl&&this.inputEl&&this.dropdownEl))return;const h=this.getAttribute("label")||"";this.labelEl.textContent=h,this.labelEl.hidden=!h,this.inputEl.value=this.inputText,this.inputEl.placeholder=this.is12h?this.showSeconds?"12:00:00 PM":"12:00 PM":this.showSeconds?"12:00:00":"12:00",this.inputEl.disabled=this.disabled,this.inputEl.readOnly=this.readonly;const d=this.triggerEl.querySelector(`.${i}__icon-display`);d&&(d.innerHTML="",d.appendChild(t("clock",o)),d.disabled=this.disabled);const l=this.triggerEl.querySelector(`.${i}__toggle`);if(l&&(l.innerHTML="",l.appendChild(t("chevron-down",o)),l.disabled=this.disabled),this.dropdownEl.className=[`${i}__dropdown`,`${i}__dropdown--${r}`].filter(Boolean).join(" "),this.dropdownEl.hidden=!this.isOpen,this.isOpen&&"dropdown"===this.type&&this.dropdownEl.replaceChildren(this.renderSelector(!1)),this.append(this.labelEl,this.triggerEl),this.isOpen&&"dropdown"===this.type&&this.appendChild(this.dropdownEl),this.isOpen&&"modal"===this.type){const t=document.createElement("db-modal");t.setAttribute("open","true"),t.setAttribute("title","시간 선택"),t.setAttribute("size","s"),t.addEventListener("db-close",()=>this.closePicker());const e=this.renderSelector(!0),s=document.createElement("div");s.className=`${i}__modal-footer`;const n=document.createElement("db-button");n.setAttribute("variant","secondary"),n.setAttribute("size","m"),n.textContent="취소",n.addEventListener("click",()=>this.closePicker());const r=document.createElement("db-button");r.setAttribute("variant","primary"),r.setAttribute("size","m"),r.textContent="적용",r.addEventListener("click",()=>{this.handleTimeChange(this.tempHours,this.tempMinutes,this.tempSeconds,this.tempPeriod),this.closePicker()}),s.append(n,r),t.append(e,s),this.appendChild(t)}}}customElements.get("db-time-picker")||customElements.define("db-time-picker",DbTimePicker);export{DbTimePicker};
+import{createDbIcon as t,getDbComponentIconSize as e}from"./db-icons.js";import"./db-button.js";import{TIME_PICKER_FORMATS as i,TIME_PICKER_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const n="designbase-wc-time-picker";class DbTimePicker extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.isOpen=!1,this.hours=12,this.minutes=0,this.seconds=0,this.period="PM",this.inputText="",this.tempHours=12,this.tempMinutes=0,this.tempSeconds=0,this.tempPeriod="PM",this.boundDocumentMouseDown=t=>this.handleDocumentMouseDown(t),this.handleDocumentKeyDown=t=>{"Escape"===t.key&&this.isOpen&&(t.preventDefault(),this.closePicker(),this.inputEl?.focus())},this.boundDocumentKeyDown=t=>this.handleDocumentKeyDown(t)}static get observedAttributes(){return["value","default-value","type","format","minute-step","size","disabled","readonly","label","full-width","error","dropdown-position","open"]}connectedCallback(){this.built||this.build(),this.parseTimeString(this.getAttribute("value")??this.getAttribute("default-value")??"12:00"),this.syncInputText(),this.render(),document.addEventListener("mousedown",this.boundDocumentMouseDown),document.addEventListener("keydown",this.boundDocumentKeyDown)}disconnectedCallback(){document.removeEventListener("mousedown",this.boundDocumentMouseDown),document.removeEventListener("keydown",this.boundDocumentKeyDown)}attributeChangedCallback(t){if(this.built){if("value"===t){const t=this.getAttribute("value");t&&(this.parseTimeString(t),this.syncInputText())}if("open"===t)return this.isOpen=this.hasAttribute("open"),void this.render();this.render()}}get value(){return this.getAttribute("value")||""}set value(t){t?this.setAttribute("value",t):this.removeAttribute("value")}get format(){const t=this.getAttribute("format")||"24h";return i.includes(t)?t:"24h"}set format(t){this.setAttribute("format",t)}get type(){return"modal"===this.getAttribute("type")?"modal":"dropdown"}get is12h(){return"12h"===this.format||"12h-with-seconds"===this.format}get showSeconds(){return"12h-with-seconds"===this.format||"24h-with-seconds"===this.format}get minuteStep(){const t=Number(this.getAttribute("minute-step")||"1");return Number.isFinite(t)&&t>0?t:1}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",Boolean(t))}get readonly(){return this.hasAttribute("readonly")}set readonly(t){this.toggleAttribute("readonly",Boolean(t))}build(){this.built=!0,this.labelEl=document.createElement("label"),this.labelEl.className=`${n}__label`,this.triggerEl=document.createElement("div"),this.triggerEl.className=`${n}__trigger`;const t=document.createElement("button");t.type="button",t.className=`${n}__icon-display`,t.setAttribute("aria-label","시간 선택 열기"),t.addEventListener("click",()=>this.toggleOpen()),this.inputEl=document.createElement("input"),this.inputEl.type="text",this.inputEl.className=`${n}__input`,this.inputEl.setAttribute("aria-label","시간 입력"),this.inputEl.addEventListener("click",()=>this.openPicker()),this.inputEl.addEventListener("blur",()=>this.handleInputBlur()),this.inputEl.addEventListener("input",()=>{this.inputText=this.inputEl?.value||""});const e=document.createElement("button");e.type="button",e.className=`${n}__toggle`,e.setAttribute("aria-label","시간 선택 열기"),e.addEventListener("click",()=>this.toggleOpen()),this.triggerEl.append(t,this.inputEl,e),this.dropdownEl=document.createElement("div"),this.dropdownEl.className=`${n}__dropdown`,this.dropdownEl.setAttribute("role","dialog"),this.dropdownEl.setAttribute("aria-modal","false")}pad2(t){return String(t).padStart(2,"0")}to24Hour(t,e){return"AM"===e?12===t?0:t:12===t?12:t+12}formatTimeString(t,e,i,s){const n="AM"===(s||this.period)?"오전":"오후";return this.is12h?`${n} ${this.pad2(t)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(i)}`:""}`:`${this.pad2(t)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(i)}`:""}`}toValue24(t,e,i,s){const n=this.is12h?this.to24Hour(t,s||this.period):t;return`${this.pad2(n)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(i)}`:""}`}parseTimeString(t){const e=t.trim();if(this.is12h){const t=this.showSeconds?/^(오전|오후|AM|PM)?\s*(0?[1-9]|1[0-2]):([0-5]\d):([0-5]\d)\s*(AM|PM|오전|오후)?$/i:/^(오전|오후|AM|PM)?\s*(0?[1-9]|1[0-2]):([0-5]\d)\s*(AM|PM|오전|오후)?$/i,i=e.match(t);if(i){const t=i[1],e=this.showSeconds?i[5]:i[4],s=(t||e||"AM").toUpperCase();return this.hours=parseInt(i[2],10),this.minutes=parseInt(i[3],10),this.seconds=this.showSeconds?parseInt(i[4],10):0,void(this.period="오후"===s||"PM"===s?"PM":"AM")}}else{const t=this.showSeconds?/^([01]?\d|2[0-3]):([0-5]\d):([0-5]\d)$/:/^([01]?\d|2[0-3]):([0-5]\d)$/,i=e.match(t);i&&(this.hours=parseInt(i[1],10),this.minutes=parseInt(i[2],10),this.seconds=this.showSeconds?parseInt(i[3],10):0)}}syncInputText(){this.inputText=this.formatTimeString(this.hours,this.minutes,this.seconds),this.inputEl&&(this.inputEl.value=this.inputText)}emitChange(t){this.setAttribute("value",t),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:t},bubbles:!0,composed:!0}))}handleTimeChange(t,e,i=this.seconds,s){this.hours=t,this.minutes=e,this.seconds=i,s&&(this.period=s);const n=this.formatTimeString(t,e,i,s);this.inputText=n,this.inputEl&&(this.inputEl.value=n),this.emitChange(this.toValue24(t,e,i,s))}handleInputBlur(){if(!this.inputEl)return;const t=this.inputText;this.parseTimeString(this.inputEl.value);this.formatTimeString(this.hours,this.minutes,this.seconds)!==t||this.inputEl.value.trim()?this.handleTimeChange(this.hours,this.minutes,this.seconds,this.period):this.syncInputText()}openPicker(){this.disabled||this.readonly||(this.isOpen=!0,"modal"===this.type&&(this.tempHours=this.hours,this.tempMinutes=this.minutes,this.tempSeconds=this.seconds,this.tempPeriod=this.period),this.render())}closePicker(){this.isOpen=!1,this.render()}toggleOpen(){this.isOpen?this.closePicker():this.openPicker()}handleDocumentMouseDown(t){this.isOpen&&(this.contains(t.target)||this.closePicker())}createWheel(t){const{label:e,items:i,value:s,onChange:o,formatter:r}=t,h=document.createElement("div");h.className=`${n}__wheel-container`;const d=document.createElement("div");d.className=`${n}__wheel-label`,d.textContent=e,h.appendChild(d);const a=document.createElement("div");a.className=`${n}__wheel-viewport`;const l=document.createElement("div");l.className=`${n}__wheel`,l.setAttribute("role","listbox"),l.setAttribute("aria-label",e);let u=null,c=!1,p=!1,m=0,b=0;const indexOfValue=t=>i.findIndex(e=>e===t),scrollToIndex=(t,e=!0)=>{const i=40*t;c=!0,l.scrollTo({top:i,behavior:e?"smooth":"auto"}),window.setTimeout(()=>{c=!1},150)},fmt=t=>r?r(t):"number"==typeof t?this.pad2(t):String(t);i.forEach(t=>{const e=document.createElement("div");e.className=[`${n}__wheel-item`,t===s&&`${n}__wheel-item--selected`].filter(Boolean).join(" "),e.setAttribute("role","option"),e.setAttribute("aria-selected",String(t===s)),e.textContent=fmt(t),e.addEventListener("click",()=>{const e=indexOfValue(t);scrollToIndex(e,!0),t!==s&&o(t)}),l.appendChild(e)});const handleScroll=()=>{c||(u&&window.clearTimeout(u),u=window.setTimeout(()=>{const t=l.scrollTop,e=Math.round(t/40),n=Math.max(0,Math.min(i.length-1,e)),r=i[n];scrollToIndex(n,!0),r!==s&&o(r)},120))};l.addEventListener("scroll",handleScroll,{passive:!0}),l.addEventListener("pointerdown",t=>{p=!0,m=t.clientY,b=l.scrollTop,l.setPointerCapture(t.pointerId),l.style.cursor="grabbing"}),l.addEventListener("pointermove",t=>{p&&(l.scrollTop=b-(t.clientY-m))});const endDrag=t=>{p&&(p=!1,l.releasePointerCapture(t.pointerId),l.style.cursor="grab",handleScroll())};l.addEventListener("pointerup",endDrag),l.addEventListener("pointercancel",endDrag);const E=indexOfValue(s);E>=0&&requestAnimationFrame(()=>scrollToIndex(E,!1));const g=document.createElement("div");g.className=`${n}__wheel-center-indicator`,g.setAttribute("aria-hidden","true");const v=document.createElement("div");v.className=`${n}__wheel-fade wheel-fade--top`,v.setAttribute("aria-hidden","true");const w=document.createElement("div");return w.className=`${n}__wheel-fade wheel-fade--bottom`,w.setAttribute("aria-hidden","true"),a.append(l,g,v,w),h.appendChild(a),h}renderSelector(e=!1){const i=document.createElement("div");i.className=`${n}__selector`;const s=document.createElement("div");s.className=`${n}__picker-wheels`;const o=this.is12h?Array.from({length:12},(t,e)=>e+1):Array.from({length:24},(t,e)=>e),r=Array.from({length:Math.floor(60/this.minuteStep)},(t,e)=>e*this.minuteStep),h=Array.from({length:60},(t,e)=>e),d=e?this.tempHours:this.hours,a=e?this.tempMinutes:this.minutes,l=e?this.tempSeconds:this.seconds,u=e?this.tempPeriod:this.period,onChange=(t,i,s,n)=>{if(e)return this.tempHours=t,this.tempMinutes=i,this.tempSeconds=s,void(this.tempPeriod=n);this.handleTimeChange(t,i,s,n)};if(s.appendChild(this.createWheel({label:"시간",items:o,value:d,onChange:t=>onChange(t,a,l,u)})),s.appendChild(this.createWheel({label:"분",items:r,value:r.includes(a)?a:r[0],onChange:t=>onChange(d,t,l,u)})),this.showSeconds&&s.appendChild(this.createWheel({label:"초",items:h,value:l,onChange:t=>onChange(d,a,t,u)})),this.is12h&&s.appendChild(this.createWheel({label:"오전/오후",items:["AM","PM"],value:u,onChange:t=>onChange(d,a,l,t),formatter:t=>"AM"===t?"오전":"오후"})),i.appendChild(s),e)return i;const c=document.createElement("div");c.className=`${n}__dropdown-actions`;const p=document.createElement("div");p.className=`${n}__preview`,p.setAttribute("aria-live","polite"),p.appendChild(t("clock",16));const m=document.createElement("div");m.className=`${n}__preview-time`,m.textContent=this.formatTimeString(d,a,l,u),p.appendChild(m);const b=document.createElement("db-button");return b.setAttribute("variant","primary"),b.setAttribute("size","m"),b.textContent="선택",b.addEventListener("click",()=>{this.handleTimeChange(d,a,l,u),this.closePicker()}),c.append(p,b),i.appendChild(c),i}render(){const i=s.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",o=this.getAttribute("dropdown-position")||"bottom-start",r=e(i);if(this.className=[n,`${n}--${i}`,this.hasAttribute("full-width")&&`${n}--full-width`,this.disabled&&`${n}--disabled`,this.readonly&&`${n}--readonly`,this.isOpen&&`${n}--open`,this.hasAttribute("error")&&`${n}--error`].filter(Boolean).join(" "),this.inputEl?.setAttribute("aria-invalid",String(this.hasAttribute("error"))),this.replaceChildren(),!(this.labelEl&&this.triggerEl&&this.inputEl&&this.dropdownEl))return;const h=this.getAttribute("label")||"";this.labelEl.textContent=h,this.labelEl.hidden=!h,this.inputEl.value=this.inputText,this.inputEl.placeholder=this.is12h?this.showSeconds?"12:00:00 PM":"12:00 PM":this.showSeconds?"12:00:00":"12:00",this.inputEl.disabled=this.disabled,this.inputEl.readOnly=this.readonly;const d=this.triggerEl.querySelector(`.${n}__icon-display`);d&&(d.innerHTML="",d.appendChild(t("clock",r)),d.disabled=this.disabled);const a=this.triggerEl.querySelector(`.${n}__toggle`);if(a&&(a.innerHTML="",a.appendChild(t("chevron-down",r)),a.disabled=this.disabled),this.dropdownEl.className=[`${n}__dropdown`,`${n}__dropdown--${o}`].filter(Boolean).join(" "),this.dropdownEl.hidden=!this.isOpen,this.isOpen&&"dropdown"===this.type&&this.dropdownEl.replaceChildren(this.renderSelector(!1)),this.append(this.labelEl,this.triggerEl),this.isOpen&&"dropdown"===this.type&&this.appendChild(this.dropdownEl),this.isOpen&&"modal"===this.type){const t=document.createElement("db-modal");t.setAttribute("open","true"),t.setAttribute("title","시간 선택"),t.setAttribute("size","s"),t.addEventListener("db-close",()=>this.closePicker());const e=this.renderSelector(!0),i=document.createElement("div");i.className=`${n}__modal-footer`;const s=document.createElement("db-button");s.setAttribute("variant","secondary"),s.setAttribute("size","m"),s.textContent="취소",s.addEventListener("click",()=>this.closePicker());const o=document.createElement("db-button");o.setAttribute("variant","primary"),o.setAttribute("size","m"),o.textContent="적용",o.addEventListener("click",()=>{this.handleTimeChange(this.tempHours,this.tempMinutes,this.tempSeconds,this.tempPeriod),this.closePicker()}),i.append(s,o),t.append(e,i),this.appendChild(t)}}}customElements.get("db-time-picker")||customElements.define("db-time-picker",DbTimePicker);export{DbTimePicker};

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

@@ -1 +1 @@
-import{isDbIconName as e,createDbIcon as t}from"./db-icons.js";const i="designbase-wc-timeline";class DbTimeline extends HTMLElement{static get observedAttributes(){return["items","type","variant","size","color","clickable","full-width","disabled"]}connectedCallback(){this.style.display="block",this.render()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}getItemPosition(e){return"left"===(this.getAttribute("type")||"alternate")||e%2==0?"left":"right"}handleItemClick(e,t){this.hasAttribute("disabled")||e.disabled||!this.hasAttribute("clickable")||this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e,index:t}}))}render(){const n=this.getAttribute("type")||"alternate",s=this.getAttribute("variant")||"default",a=this.getAttribute("size")||"m",l=this.getAttribute("color")||"primary",c=this.hasAttribute("clickable"),d=this.hasAttribute("disabled"),o=this.items;this.className=[i,`${i}--${n}`,`${i}--${s}`,`${i}--${a}`,c&&`${i}--clickable`,this.hasAttribute("full-width")&&`${i}--full-width`,d&&`${i}--disabled`].filter(Boolean).join(" "),this.replaceChildren();const r=document.createElement("div");r.className=`${i}__container`,o.forEach((n,m)=>{const b=this.getItemPosition(m),u=m===o.length-1,p=c&&!d&&!n.disabled,h=n.color||l,_=n.status||"pending",$=document.createElement("div");$.className=[`${i}__item`,`${i}__item--${b}`,`${i}__item--${h}`,p&&`${i}__item--clickable`,n.disabled&&`${i}__item--disabled`].filter(Boolean).join(" ");const v=document.createElement("div");if(v.className=`${i}__indicator-container`,"active"===_&&!n.icon&&void 0===n.number){const e=document.createElement("div");e.className=`${i}__pulse`,v.append(e)}const E=document.createElement("div");if(E.className=[`${i}__dot`,`${i}__dot--${h}`,`${i}__dot--${s}`,`${i}__dot--${_}`,p&&`${i}__dot--clickable`,n.icon&&`${i}__dot--with-icon`,void 0!==n.number&&!n.icon&&`${i}__dot--with-number`].filter(Boolean).join(" "),p&&(E.tabIndex=0,E.setAttribute("role","button"),E.setAttribute("aria-label",n.title?`${n.title} 타임라인 점`:`타임라인 점 ${m+1}`),E.addEventListener("click",()=>this.handleItemClick(n,m)),E.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleItemClick(n,m))})),n.icon&&e(n.icon)){const e=document.createElement("div");e.className=`${i}__icon`,e.append(t(n.icon,"s"===a?14:"l"===a?20:16)),E.append(e)}else if(void 0!==n.number){const e=document.createElement("span");e.className=`${i}__number`,e.textContent=String(n.number),E.append(e)}if(v.append(E),!u){const e=document.createElement("div");e.className=`${i}__connector`,v.append(e)}const f=document.createElement("div");if(f.className=[`${i}__content`,`${i}__content--${b}`].join(" "),n.timestamp){const e=document.createElement("div");e.className=`${i}__timestamp`,e.textContent=n.timestamp,f.append(e)}const k=document.createElement("div");if(k.className=`${i}__content-inner`,p&&(k.tabIndex=0,k.setAttribute("role","button"),k.setAttribute("aria-label",n.title?`${n.title} 타임라인 아이템`:`타임라인 아이템 ${m+1}`),k.addEventListener("click",()=>this.handleItemClick(n,m)),k.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleItemClick(n,m))})),n.title){const e=document.createElement("h3");e.className=`${i}__title`,e.textContent=n.title,k.append(e)}if(n.description){const e=document.createElement("p");e.className=`${i}__description`,e.textContent=n.description,k.append(e)}f.append(k),$.append(v,f),r.append($)}),this.append(r)}}customElements.get("db-timeline")||customElements.define("db-timeline",DbTimeline);export{DbTimeline};
+import{isDbIconName as e,createDbIcon as t}from"./db-icons.js";const i="designbase-wc-timeline";class DbTimeline extends HTMLElement{static get observedAttributes(){return["items","type","variant","size","color","clickable","full-width","disabled"]}connectedCallback(){this.style.display="block",this.render()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}getItemPosition(e){return"left"===(this.getAttribute("type")||"alternate")||e%2==0?"left":"right"}handleItemClick(e,t){this.hasAttribute("disabled")||e.disabled||!this.hasAttribute("clickable")||this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e,index:t}}))}render(){const n=this.getAttribute("type")||"alternate",s=this.getAttribute("variant")||"default",a=this.getAttribute("size")||"m",l=this.getAttribute("color")||"primary",c=this.hasAttribute("clickable"),d=this.hasAttribute("disabled"),o=this.items;this.className=[i,`${i}--${n}`,`${i}--${s}`,`${i}--${a}`,c&&`${i}--clickable`,this.hasAttribute("full-width")&&`${i}--full-width`,d&&`${i}--disabled`].filter(Boolean).join(" "),this.replaceChildren();const r=document.createElement("div");r.className=`${i}__container`,o.forEach((n,m)=>{const b=this.getItemPosition(m),u=m===o.length-1,p=c&&!d&&!n.disabled,h=c&&(d||Boolean(n.disabled)),_=n.color||l,$=n.status||"pending",v=document.createElement("div");v.className=[`${i}__item`,`${i}__item--${b}`,`${i}__item--${_}`,p&&`${i}__item--clickable`,n.disabled&&`${i}__item--disabled`].filter(Boolean).join(" ");const E=document.createElement("div");if(E.className=`${i}__indicator-container`,"active"===$&&!n.icon&&void 0===n.number){const e=document.createElement("div");e.className=`${i}__pulse`,E.append(e)}const f=document.createElement("div");if(f.className=[`${i}__dot`,`${i}__dot--${_}`,`${i}__dot--${s}`,`${i}__dot--${$}`,p&&`${i}__dot--clickable`,n.icon&&`${i}__dot--with-icon`,void 0!==n.number&&!n.icon&&`${i}__dot--with-number`].filter(Boolean).join(" "),h&&(f.setAttribute("role","button"),f.setAttribute("aria-disabled","true")),p&&(f.tabIndex=0,f.setAttribute("role","button"),f.setAttribute("aria-label",n.title?`${n.title} 타임라인 점`:`타임라인 점 ${m+1}`),f.addEventListener("click",()=>this.handleItemClick(n,m)),f.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleItemClick(n,m))})),n.icon&&e(n.icon)){const e=document.createElement("div");e.className=`${i}__icon`,e.append(t(n.icon,"s"===a?14:"l"===a?20:16)),f.append(e)}else if(void 0!==n.number){const e=document.createElement("span");e.className=`${i}__number`,e.textContent=String(n.number),f.append(e)}if(E.append(f),!u){const e=document.createElement("div");e.className=`${i}__connector`,E.append(e)}const k=document.createElement("div");if(k.className=[`${i}__content`,`${i}__content--${b}`].join(" "),n.timestamp){const e=document.createElement("div");e.className=`${i}__timestamp`,e.textContent=n.timestamp,k.append(e)}const A=document.createElement("div");if(A.className=`${i}__content-inner`,h&&(A.setAttribute("role","button"),A.setAttribute("aria-disabled","true")),p&&(A.tabIndex=0,A.setAttribute("role","button"),A.setAttribute("aria-label",n.title?`${n.title} 타임라인 아이템`:`타임라인 아이템 ${m+1}`),A.addEventListener("click",()=>this.handleItemClick(n,m)),A.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleItemClick(n,m))})),n.title){const e=document.createElement("h3");e.className=`${i}__title`,e.textContent=n.title,A.append(e)}if(n.description){const e=document.createElement("p");e.className=`${i}__description`,e.textContent=n.description,A.append(e)}k.append(A),v.append(E,k),r.append(v)}),this.append(r)}}customElements.get("db-timeline")||customElements.define("db-timeline",DbTimeline);export{DbTimeline};

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

@@ -4,14 +4,21 @@ declare class DbToast extends HTMLElement {
     private progressInterval;
     private closeTimerId;
     private closed;
+    private readonly cleanups;
+    /** 일시정지 시점까지 소비한 시간 (ms) */
+    private elapsedBeforePause;
+    private runStartedAt;
+    private paused;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private pauseTimers;
+    private resumeTimers;
     attributeChangedCallback(name: string): void;
     private clearTimers;
     private startTimers;
     /** 토스트를 닫고(애니메이션 포함) auto-remove 설정 시 DOM에서 제거합니다. */
     close(): void;
-    private iconForStatus;
+    private iconForVariant;
     private render;
 }
 declare global {

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";class DbToast extends HTMLElement{constructor(){super(...arguments),this.timeoutId=null,this.progressInterval=null,this.closeTimerId=null,this.closed=!1}static get observedAttributes(){return["toast-id","status","title","description","duration","show-close","show-progress","auto-remove"]}connectedCallback(){this.closed=!1,this.render(),this.startTimers(),requestAnimationFrame(()=>this.classList.add("designbase-wc-toast--visible"))}disconnectedCallback(){this.clearTimers(),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=null}attributeChangedCallback(t){if(!this.isConnected||this.closed)return;const e=this.classList.contains("designbase-wc-toast--visible");this.render(),e&&requestAnimationFrame(()=>this.classList.add("designbase-wc-toast--visible")),"duration"!==t&&"show-progress"!==t||(this.clearTimers(),this.startTimers())}clearTimers(){this.timeoutId&&clearTimeout(this.timeoutId),this.progressInterval&&clearInterval(this.progressInterval),this.timeoutId=null,this.progressInterval=null}startTimers(){const t=Number(this.getAttribute("duration")??"5000");if(!Number.isFinite(t)||t<=0)return;if("false"!==this.getAttribute("show-progress")&&this.hasAttribute("show-progress")){const e=this.querySelector(".designbase-wc-toast__progress-bar");e&&(e.style.width="0%");const s=Date.now();return void(this.progressInterval=setInterval(()=>{const i=Date.now()-s,o=Math.min(100,i/t*100);e&&(e.style.width=`${o}%`),o>=100&&this.close()},16))}this.timeoutId=setTimeout(()=>this.close(),t)}close(){this.closed||(this.closed=!0,this.clearTimers(),this.classList.remove("designbase-wc-toast--visible"),this.classList.add("designbase-wc-toast--closing"),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=setTimeout(()=>{this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0,detail:{id:this.getAttribute("toast-id")||""}}));("true"===this.getAttribute("auto-remove")||this.hasAttribute("auto-remove")&&"false"!==this.getAttribute("auto-remove"))&&this.remove()},300))}iconForStatus(t){return"success"===t?"circle-checked":"warning"===t?"warning-filled":"error"===t?"error-filled":"info-filled"}render(){const e=this.getAttribute("status")||"info",s=this.getAttribute("title")||"",i=this.getAttribute("description")||"",o="false"!==this.getAttribute("show-close"),r="false"!==this.getAttribute("show-progress")&&this.hasAttribute("show-progress");if(this.className=["designbase-wc-toast",`designbase-wc-toast--${e}`,this.closed&&"designbase-wc-toast--closing"].filter(Boolean).join(" "),this.setAttribute("role","alert"),this.setAttribute("aria-live","assertive"),this.replaceChildren(),r){const t=document.createElement("div");t.className="designbase-wc-toast__progress";const e=document.createElement("div");e.className="designbase-wc-toast__progress-bar",e.style.width="0%",t.append(e),this.append(t)}const a=document.createElement("div");a.className=`designbase-wc-toast__icon designbase-wc-toast__icon--${e}`,a.append(t(this.iconForStatus(e),20));const n=document.createElement("div");n.className="designbase-wc-toast__content";const c=document.createElement("div");if(c.className="designbase-wc-toast__title",c.textContent=s,n.append(c),i){const t=document.createElement("div");t.className="designbase-wc-toast__description",t.textContent=i,n.append(t)}if(this.append(a,n),o){const e=document.createElement("button");e.type="button",e.className="designbase-wc-toast__close-button",e.setAttribute("aria-label","토스트 닫기"),e.append(t("close",20)),e.addEventListener("click",()=>this.close()),this.append(e)}}}customElements.get("db-toast")||customElements.define("db-toast",DbToast);export{DbToast};
+import{createDbIcon as t}from"./db-icons.js";import{politenessForTone as e}from"../core/a11y.js";import{labelFrom as s}from"../core/i18n.js";import{CleanupBag as i}from"../core/dom.js";import{TOAST_VARIANTS as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as a}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";class DbToast extends HTMLElement{constructor(){super(...arguments),this.timeoutId=null,this.progressInterval=null,this.closeTimerId=null,this.closed=!1,this.cleanups=new i,this.elapsedBeforePause=0,this.runStartedAt=0,this.paused=!1,this.pauseTimers=()=>{this.paused||this.closed||(this.paused=!0,this.elapsedBeforePause+=Date.now()-this.runStartedAt,this.clearTimers())},this.resumeTimers=()=>{this.paused&&!this.closed&&(this.paused=!1,this.startTimers())}}static get observedAttributes(){return["toast-id","variant","title","description","duration","show-close","show-progress","auto-remove"]}connectedCallback(){this.closed=!1,this.elapsedBeforePause=0,this.render(),this.startTimers(),requestAnimationFrame(()=>this.classList.add("designbase-wc-toast--visible")),this.cleanups.listen(this,"pointerenter",this.pauseTimers),this.cleanups.listen(this,"pointerleave",this.resumeTimers),this.cleanups.listen(this,"focusin",this.pauseTimers),this.cleanups.listen(this,"focusout",this.resumeTimers)}disconnectedCallback(){this.cleanups.run(),this.clearTimers(),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=null}attributeChangedCallback(t){if(!this.isConnected||this.closed)return;const e=this.classList.contains("designbase-wc-toast--visible");this.render(),e&&requestAnimationFrame(()=>this.classList.add("designbase-wc-toast--visible")),"duration"!==t&&"show-progress"!==t||(this.clearTimers(),this.startTimers())}clearTimers(){this.timeoutId&&clearTimeout(this.timeoutId),this.progressInterval&&clearInterval(this.progressInterval),this.timeoutId=null,this.progressInterval=null}startTimers(){const t=Number(this.getAttribute("duration")??"5000");if(!Number.isFinite(t)||t<=0)return;const e=Math.max(0,t-this.elapsedBeforePause);if(this.runStartedAt=Date.now(),0===e)return void this.close();if("false"!==this.getAttribute("show-progress")&&this.hasAttribute("show-progress")){const e=this.querySelector(".designbase-wc-toast__progress-bar");e&&(e.style.width="0%");const s=Date.now();return void(this.progressInterval=setInterval(()=>{const i=this.elapsedBeforePause+(Date.now()-s),r=Math.min(100,i/t*100);e&&(e.style.width=`${r}%`),r>=100&&this.close()},16))}this.timeoutId=setTimeout(()=>this.close(),e)}close(){this.closed||(this.closed=!0,this.clearTimers(),this.classList.remove("designbase-wc-toast--visible"),this.classList.add("designbase-wc-toast--closing"),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=setTimeout(()=>{this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0,detail:{id:this.getAttribute("toast-id")||""}}));("true"===this.getAttribute("auto-remove")||this.hasAttribute("auto-remove")&&"false"!==this.getAttribute("auto-remove"))&&this.remove()},300))}iconForVariant(t){return"success"===t?"circle-checked":"warning"===t?"warning-filled":"danger"===t?"error-filled":"info-filled"}render(){const i=a(this.getAttribute("variant"),r,"info"),o=this.getAttribute("title")||"",n=this.getAttribute("description")||"",c="false"!==this.getAttribute("show-close"),l="false"!==this.getAttribute("show-progress")&&this.hasAttribute("show-progress");this.className=["designbase-wc-toast",`designbase-wc-toast--${i}`,this.closed&&"designbase-wc-toast--closing"].filter(Boolean).join(" ");const d=e(i);if(this.setAttribute("role","assertive"===d?"alert":"status"),this.setAttribute("aria-live",d),this.setAttribute("aria-atomic","true"),this.replaceChildren(),l){const t=document.createElement("div");t.className="designbase-wc-toast__progress";const e=document.createElement("div");e.className="designbase-wc-toast__progress-bar",e.style.width="0%",t.append(e),this.append(t)}const h=document.createElement("div");h.className=`designbase-wc-toast__icon designbase-wc-toast__icon--${i}`,h.setAttribute("aria-hidden","true"),h.append(t(this.iconForVariant(i),20));const u=document.createElement("div");u.className="designbase-wc-toast__content";const m=document.createElement("div");if(m.className="designbase-wc-toast__title",m.textContent=o,u.append(m),n){const t=document.createElement("div");t.className="designbase-wc-toast__description",t.textContent=n,u.append(t)}if(this.append(h,u),c){const e=document.createElement("button");e.type="button",e.className="designbase-wc-toast__close-button",e.setAttribute("aria-label",s(this,"label-close","toast.close"));const i=t("close",20);i.setAttribute("aria-hidden","true"),e.append(i),e.addEventListener("click",()=>this.close()),this.append(e)}}}customElements.get("db-toast")||customElements.define("db-toast",DbToast);export{DbToast};

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

@@ -5,6 +5,8 @@ declare class DbToggle extends HTMLElement {
     private root?;
     private labelEl?;
     private built;
+    /** default-checked 는 초기값일 뿐 — 한 번 조작하면 checked/selected 만 본다 */
+    private userInteracted;
     get checked(): boolean;
     set checked(value: boolean);
     get name(): string;

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

@@ -1 +1 @@
-const t=["s","m","l"];class DbToggle extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.built=!1,this.handleClick=()=>{if(this.disabled||this.readOnly)return;const t=!this.checked;this.toggleAttribute("checked",t),this.syncFormValue(),this.syncState(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","size","disabled","readonly","has-label","name","value"]}get checked(){return this.hasAttribute("checked")||this.hasAttribute("selected")}set checked(t){this.toggleAttribute("checked",t),this.syncFormValue(),this.syncClasses()}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.root&&(this.root.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.syncClasses()}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.style.display="contents",this.built||this.build(),this.syncState()}attributeChangedCallback(){this.built&&this.syncState()}formResetCallback(){const t=this.hasAttribute("default-checked")||this.hasAttribute("default-selected");this.toggleAttribute("checked",t),this.syncFormValue(),this.syncState()}formDisabledCallback(t){this.toggleAttribute("disabled",t),this.root&&(this.root.disabled=t),this.syncClasses()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}syncFormValue(){const t=this.hasAttribute("checked")||this.hasAttribute("selected");this.internals.setFormValue(t?this.getAttribute("value")||"on":null)}build(){this.root=document.createElement("button"),this.root.type="button",this.root.className="designbase-wc-toggle";const t=document.createElement("span");t.className="designbase-wc-toggle__track",t.setAttribute("aria-hidden","true");const e=document.createElement("span");for(e.className="designbase-wc-toggle__thumb",t.appendChild(e),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-toggle__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(t,this.labelEl),this.appendChild(this.root),this.root.addEventListener("click",this.handleClick),this.built=!0}syncState(){this.root&&(this.root.disabled=this.disabled,this.syncFormValue(),this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncClasses())}syncClasses(){if(!this.root)return;const e=t.includes(this.size)?this.size:"m",s=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim()),i=this.hasAttribute("checked")||this.hasAttribute("selected")||!this.hasAttribute("checked")&&!this.hasAttribute("selected")&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected"));this.root.className=["designbase-wc-toggle",`designbase-wc-toggle--${e}`,i&&"designbase-wc-toggle--selected",this.disabled&&"designbase-wc-toggle--disabled",this.readOnly&&"designbase-wc-toggle--readonly",!s&&"designbase-wc-toggle--no-label"].filter(Boolean).join(" "),this.root.setAttribute("aria-pressed",String(i))}}DbToggle.formAssociated=!0,customElements.get("db-toggle")||customElements.define("db-toggle",DbToggle);export{DbToggle};
+import{TOGGLE_SIZES as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbToggle extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.built=!1,this.userInteracted=!1,this.handleClick=()=>{if(this.disabled||this.readOnly)return;const t=!this.checked;this.userInteracted=!0,this.toggleAttribute("checked",t),this.syncFormValue(),this.syncState(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","size","disabled","readonly","has-label","name","value"]}get checked(){return!(!this.hasAttribute("checked")&&!this.hasAttribute("selected"))||!this.userInteracted&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected"))}set checked(t){this.toggleAttribute("checked",t),this.syncFormValue(),this.syncClasses()}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.root&&(this.root.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.syncClasses()}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.style.display="contents",this.built||this.build(),this.syncState()}attributeChangedCallback(){this.built&&this.syncState()}formResetCallback(){this.userInteracted=!1;const t=this.hasAttribute("default-checked")||this.hasAttribute("default-selected");this.toggleAttribute("checked",t),this.syncFormValue(),this.syncState()}formDisabledCallback(t){this.toggleAttribute("disabled",t),this.root&&(this.root.disabled=t),this.syncClasses()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}syncFormValue(){const t=this.hasAttribute("checked")||this.hasAttribute("selected");this.internals.setFormValue(t?this.getAttribute("value")||"on":null)}build(){this.root=document.createElement("button"),this.root.type="button",this.root.className="designbase-wc-toggle";const t=document.createElement("span");t.className="designbase-wc-toggle__track",t.setAttribute("aria-hidden","true");const e=document.createElement("span");for(e.className="designbase-wc-toggle__thumb",t.appendChild(e),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-toggle__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(t,this.labelEl),this.appendChild(this.root),this.root.addEventListener("click",this.handleClick),this.built=!0}syncState(){this.root&&(this.root.disabled=this.disabled,this.root.setAttribute("role","switch"),this.root.setAttribute("aria-checked",String(this.checked)),this.readOnly?this.root.setAttribute("aria-readonly","true"):this.root.removeAttribute("aria-readonly"),this.syncFormValue(),this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncClasses())}syncClasses(){if(!this.root)return;const e=t.includes(this.size)?this.size:"m",s=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim()),i=this.checked;this.root.className=["designbase-wc-toggle",`designbase-wc-toggle--${e}`,i&&"designbase-wc-toggle--selected",this.disabled&&"designbase-wc-toggle--disabled",this.readOnly&&"designbase-wc-toggle--readonly",!s&&"designbase-wc-toggle--no-label"].filter(Boolean).join(" "),this.root.setAttribute("aria-pressed",String(i))}}DbToggle.formAssociated=!0,customElements.get("db-toggle")||customElements.define("db-toggle",DbToggle);export{DbToggle};

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

@@ -1 +1 @@
-const t=["top","bottom","left","right","top-start","top-end","bottom-start","bottom-end","left-start","left-end","right-start","right-end"],e=["s","m","l"],i=["default","primary","success","warning","danger","info"],s=-10;class DbTooltip extends HTMLElement{constructor(){super(...arguments),this.tooltipId=`db-tooltip-${Math.random().toString(36).slice(2,9)}`,this.visible=!1,this.handleShow=()=>{this.disabled||this.alwaysShow||(this.clearTimers(),this.showTimer=setTimeout(()=>this.setVisible(!0),Math.max(0,this.delay)))},this.handleHide=()=>{this.alwaysShow||(this.clearTimers(),this.hideTimer=setTimeout(()=>this.setVisible(!1),Math.max(0,this.hideDelay)))},this.handleKeyDown=t=>{"Escape"===t.key&&(this.clearTimers(),this.setVisible(!1))},this.handleReposition=()=>{(this.visible||this.alwaysShow)&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>this.calculatePosition()))}}static get observedAttributes(){return["content","position","size","variant","disabled","always-show","delay","hide-delay","max-width","show-arrow"]}get content(){return this.getAttribute("content")||""}set content(t){this.setAttribute("content",t)}get position(){return this.getAttribute("position")||"top"}set position(t){this.setAttribute("position",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get variant(){return this.getAttribute("variant")||"default"}set variant(t){this.setAttribute("variant",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get alwaysShow(){return this.hasAttribute("always-show")}set alwaysShow(t){this.toggleAttribute("always-show",t)}get delay(){return Number(this.getAttribute("delay")??"200")}get hideDelay(){return Number(this.getAttribute("hide-delay")??"80")}get maxWidth(){return Number(this.getAttribute("max-width")??"240")}get showArrow(){return"false"!==this.getAttribute("show-arrow")}connectedCallback(){this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),window.addEventListener("scroll",this.handleReposition,!0),window.addEventListener("resize",this.handleReposition)}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.enterRaf&&cancelAnimationFrame(this.enterRaf),this.removalTimer&&clearTimeout(this.removalTimer),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.tooltip?.remove(),this.tooltip=void 0}attributeChangedCallback(){this.isConnected&&(this.render(),this.alwaysShow?this.setVisible(!0):this.visible||this.removeTooltip())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(t){return t.startsWith("top")?"top":t.startsWith("bottom")?"bottom":t.startsWith("left")?"left":"right"}resolvedPosition(){return t.includes(this.position)?this.position:"top"}collectTriggerChildren(){const isInternalNode=t=>t.hasAttribute("data-wc-internal")||t===this.trigger,t=Array.from(this.children).filter(t=>!isInternalNode(t));return t.length>0?t:Array.from(this.trigger?.children||[])}ensureTrigger(){this.trigger||(this.trigger=document.createElement("span"),this.trigger.className="designbase-wc-tooltip__trigger",this.trigger.setAttribute("data-wc-internal",""),this.trigger.tabIndex=0,this.trigger.addEventListener("mouseenter",this.handleShow),this.trigger.addEventListener("mouseleave",this.handleHide),this.trigger.addEventListener("focus",this.handleShow),this.trigger.addEventListener("blur",this.handleHide),this.trigger.addEventListener("keydown",this.handleKeyDown)),this.trigger.parentElement!==this&&this.append(this.trigger)}mountTriggerChildren(t){this.trigger&&t.forEach(t=>{t.parentElement!==this.trigger&&this.trigger.append(t)})}render(){this.ensureTrigger(),this.mountTriggerChildren(this.collectTriggerChildren()),this.alwaysShow&&this.setVisible(!0)}ensureTooltip(){this.tooltip||(this.tooltip=document.createElement("div"),this.tooltip.className="designbase-wc-tooltip",this.tooltip.setAttribute("data-wc-internal",""),this.tooltip.setAttribute("role","tooltip"),this.tooltip.id=this.tooltipId,this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-tooltip__content",this.arrow=document.createElement("div"),this.arrow.className="designbase-wc-tooltip__arrow",this.tooltip.append(this.contentEl,this.arrow),document.body.append(this.tooltip))}syncTooltipClasses(t=this.visible||this.alwaysShow){if(!this.tooltip||!this.arrow)return;const s=this.resolvedPosition(),o=e.includes(this.size)?this.size:"m",r=i.includes(this.variant)?this.variant:"default";this.tooltip.className=["designbase-wc-tooltip",`designbase-wc-tooltip--${o}`,`designbase-wc-tooltip--${r}`,`designbase-wc-tooltip--${s}`,t&&"designbase-wc-tooltip--visible",this.disabled&&"designbase-wc-tooltip--disabled"].filter(Boolean).join(" "),this.arrow.className=`designbase-wc-tooltip__arrow designbase-wc-tooltip__arrow--${s}`,this.arrow.hidden=!this.showArrow,this.tooltip.setAttribute("data-placement-group",this.groupOf(s)),this.tooltip.setAttribute("aria-hidden",String(!t)),this.tooltip.style.maxWidth=`${this.maxWidth}px`,this.tooltip.style.zIndex="9999",this.tooltip.style.pointerEvents="none",this.contentEl&&(this.contentEl.textContent=this.content)}calculatePosition(){if(!this.trigger||!this.tooltip||!this.arrow)return;const t=this.resolvedPosition(),e=this.trigger.getBoundingClientRect(),i=this.tooltip.offsetWidth,o=this.tooltip.offsetHeight;let r=0,a=0,h=0,n=0;switch(t){case"top":r=e.top-o-8,a=e.left+e.width/2-i/2,h=o-2,n=i/2-6;break;case"top-start":r=e.top-o-8,a=e.left,h=o-2,n=8;break;case"top-end":r=e.top-o-8,a=e.right-i,h=o-2,n=i-8-6;break;case"bottom":r=e.bottom+8,a=e.left+e.width/2-i/2,h=s,n=i/2-6;break;case"bottom-start":r=e.bottom+8,a=e.left,h=s,n=8;break;case"bottom-end":r=e.bottom+8,a=e.right-i,h=s,n=i-8-6;break;case"left":r=e.top+e.height/2-o/2,a=e.left-i-8,h=o/2-6,n=i-2;break;case"left-start":r=e.top,a=e.left-i-8,h=8,n=i-2;break;case"left-end":r=e.bottom-o,a=e.left-i-8,h=o-8-6,n=i-2;break;case"right":r=e.top+e.height/2-o/2,a=e.right+8,h=o/2-6,n=s;break;case"right-start":r=e.top,a=e.right+8,h=8,n=s;break;case"right-end":r=e.bottom-o,a=e.right+8,h=o-8-6,n=s}const l=window.innerWidth,d=window.innerHeight;a<8&&(a=8),a+i>l-8&&(a=l-i-8),r<8&&(r=8),r+o>d-8&&(r=d-o-8);const c=this.groupOf(t);if("top"===c||"bottom"===c){const t=e.left+e.width/2-a-6;n=Math.min(i-8-6,Math.max(8,t))}else{const t=e.top+e.height/2-r-6;h=Math.min(o-8-6,Math.max(8,t))}this.tooltip.style.position="fixed",this.tooltip.style.top=`${r}px`,this.tooltip.style.left=`${a}px`,this.arrow.style.position="absolute",this.arrow.style.top=`${h}px`,this.arrow.style.left=`${n}px`}setVisible(t){if(!this.disabled||!t){if(this.visible=t,!t&&!this.alwaysShow)return this.hideTooltip(),void this.trigger?.removeAttribute("aria-describedby");this.removalTimer&&(clearTimeout(this.removalTimer),this.removalTimer=void 0),this.enterRaf&&(cancelAnimationFrame(this.enterRaf),this.enterRaf=void 0),this.ensureTooltip(),this.syncTooltipClasses(!1),this.calculatePosition(),this.trigger?.setAttribute("aria-describedby",this.tooltipId),this.enterRaf=requestAnimationFrame(()=>{this.enterRaf=requestAnimationFrame(()=>{this.enterRaf=void 0,this.syncTooltipClasses(!0),this.calculatePosition()})})}}hideTooltip(){if(this.enterRaf&&(cancelAnimationFrame(this.enterRaf),this.enterRaf=void 0),!this.tooltip)return;const t=this.tooltip;t.classList.remove("designbase-wc-tooltip--visible"),t.setAttribute("aria-hidden","true");const finish=()=>{t.removeEventListener("transitionend",onEnd),this.removalTimer&&(clearTimeout(this.removalTimer),this.removalTimer=void 0),this.visible||this.tooltip!==t||this.removeTooltip()},onEnd=e=>{e.target===t&&"opacity"===e.propertyName&&finish()};t.addEventListener("transitionend",onEnd),this.removalTimer=setTimeout(finish,400)}removeTooltip(){this.removalTimer&&(clearTimeout(this.removalTimer),this.removalTimer=void 0),this.tooltip?.remove(),this.tooltip=void 0,this.contentEl=void 0,this.arrow=void 0}}customElements.get("db-tooltip")||customElements.define("db-tooltip",DbTooltip);export{DbTooltip};
+import{dbUid as t}from"../core/uid.js";import{TOOLTIP_POSITIONS as e,TOOLTIP_SIZES as i,TOOLTIP_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const o=-10;class DbTooltip extends HTMLElement{constructor(){super(...arguments),this.tooltipId=t("db-tooltip"),this.visible=!1,this.handleShow=()=>{this.disabled||this.alwaysShow||(this.clearTimers(),this.showTimer=setTimeout(()=>this.setVisible(!0),Math.max(0,this.delay)))},this.handleHide=()=>{this.alwaysShow||(this.clearTimers(),this.hideTimer=setTimeout(()=>this.setVisible(!1),Math.max(0,this.hideDelay)))},this.handleKeyDown=t=>{"Escape"===t.key&&(this.clearTimers(),this.setVisible(!1))},this.handleReposition=()=>{(this.visible||this.alwaysShow)&&(this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.repositionRaf=requestAnimationFrame(()=>this.calculatePosition()))}}static get observedAttributes(){return["content","position","size","variant","disabled","always-show","delay","hide-delay","max-width","show-arrow"]}get content(){return this.getAttribute("content")||""}set content(t){this.setAttribute("content",t)}get position(){return this.getAttribute("position")||"top"}set position(t){this.setAttribute("position",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get variant(){return this.getAttribute("variant")||"default"}set variant(t){this.setAttribute("variant",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get alwaysShow(){return this.hasAttribute("always-show")}set alwaysShow(t){this.toggleAttribute("always-show",t)}get delay(){return Number(this.getAttribute("delay")??"200")}get hideDelay(){return Number(this.getAttribute("hide-delay")??"80")}get maxWidth(){return Number(this.getAttribute("max-width")??"240")}get showArrow(){return"false"!==this.getAttribute("show-arrow")}connectedCallback(){this.render(),this.childObserver=new MutationObserver(()=>this.render()),this.childObserver.observe(this,{childList:!0}),window.addEventListener("scroll",this.handleReposition,{capture:!0,passive:!0}),window.addEventListener("resize",this.handleReposition)}disconnectedCallback(){this.childObserver?.disconnect(),this.clearTimers(),this.repositionRaf&&cancelAnimationFrame(this.repositionRaf),this.enterRaf&&cancelAnimationFrame(this.enterRaf),this.removalTimer&&clearTimeout(this.removalTimer),window.removeEventListener("scroll",this.handleReposition,!0),window.removeEventListener("resize",this.handleReposition),this.tooltip?.remove(),this.tooltip=void 0}attributeChangedCallback(){this.isConnected&&(this.render(),this.alwaysShow?this.setVisible(!0):this.visible||this.removeTooltip())}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=void 0,this.hideTimer=void 0}groupOf(t){return t.startsWith("top")?"top":t.startsWith("bottom")?"bottom":t.startsWith("left")?"left":"right"}resolvedPosition(){return e.includes(this.position)?this.position:"top"}collectTriggerChildren(){const isInternalNode=t=>t.hasAttribute("data-wc-internal")||t===this.trigger,t=Array.from(this.children).filter(t=>!isInternalNode(t));return t.length>0?t:Array.from(this.trigger?.children||[])}ensureTrigger(){this.trigger||(this.trigger=document.createElement("span"),this.trigger.className="designbase-wc-tooltip__trigger",this.trigger.setAttribute("data-wc-internal",""),this.trigger.tabIndex=0,this.trigger.addEventListener("mouseenter",this.handleShow),this.trigger.addEventListener("mouseleave",this.handleHide),this.trigger.addEventListener("focus",this.handleShow),this.trigger.addEventListener("blur",this.handleHide),this.trigger.addEventListener("keydown",this.handleKeyDown)),this.trigger.parentElement!==this&&this.append(this.trigger)}mountTriggerChildren(t){this.trigger&&t.forEach(t=>{t.parentElement!==this.trigger&&this.trigger.append(t)})}render(){this.ensureTrigger(),this.mountTriggerChildren(this.collectTriggerChildren()),this.alwaysShow&&this.setVisible(!0)}ensureTooltip(){this.tooltip||(this.tooltip=document.createElement("div"),this.tooltip.className="designbase-wc-tooltip",this.tooltip.setAttribute("data-wc-internal",""),this.tooltip.setAttribute("role","tooltip"),this.tooltip.id=this.tooltipId,this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-tooltip__content",this.arrow=document.createElement("div"),this.arrow.className="designbase-wc-tooltip__arrow",this.tooltip.append(this.contentEl,this.arrow),document.body.append(this.tooltip))}syncTooltipClasses(t=this.visible||this.alwaysShow){if(!this.tooltip||!this.arrow)return;const e=this.resolvedPosition(),o=i.includes(this.size)?this.size:"m",r=s.includes(this.variant)?this.variant:"default";this.tooltip.className=["designbase-wc-tooltip",`designbase-wc-tooltip--${o}`,`designbase-wc-tooltip--${r}`,`designbase-wc-tooltip--${e}`,t&&"designbase-wc-tooltip--visible",this.disabled&&"designbase-wc-tooltip--disabled"].filter(Boolean).join(" "),this.arrow.className=`designbase-wc-tooltip__arrow designbase-wc-tooltip__arrow--${e}`,this.arrow.hidden=!this.showArrow,this.tooltip.setAttribute("data-placement-group",this.groupOf(e)),this.tooltip.setAttribute("aria-hidden",String(!t)),this.tooltip.style.maxWidth=`${this.maxWidth}px`,this.tooltip.style.zIndex="9999",this.tooltip.style.pointerEvents="none",this.contentEl&&(this.contentEl.textContent=this.content)}calculatePosition(){if(!this.trigger||!this.tooltip||!this.arrow)return;const t=this.resolvedPosition(),e=this.trigger.getBoundingClientRect(),i=this.tooltip.offsetWidth,s=this.tooltip.offsetHeight;let r=0,a=0,h=0,n=0;switch(t){case"top":r=e.top-s-8,a=e.left+e.width/2-i/2,h=s-2,n=i/2-6;break;case"top-start":r=e.top-s-8,a=e.left,h=s-2,n=8;break;case"top-end":r=e.top-s-8,a=e.right-i,h=s-2,n=i-8-6;break;case"bottom":r=e.bottom+8,a=e.left+e.width/2-i/2,h=o,n=i/2-6;break;case"bottom-start":r=e.bottom+8,a=e.left,h=o,n=8;break;case"bottom-end":r=e.bottom+8,a=e.right-i,h=o,n=i-8-6;break;case"left":r=e.top+e.height/2-s/2,a=e.left-i-8,h=s/2-6,n=i-2;break;case"left-start":r=e.top,a=e.left-i-8,h=8,n=i-2;break;case"left-end":r=e.bottom-s,a=e.left-i-8,h=s-8-6,n=i-2;break;case"right":r=e.top+e.height/2-s/2,a=e.right+8,h=s/2-6,n=o;break;case"right-start":r=e.top,a=e.right+8,h=8,n=o;break;case"right-end":r=e.bottom-s,a=e.right+8,h=s-8-6,n=o}const l=window.innerWidth,d=window.innerHeight;a<8&&(a=8),a+i>l-8&&(a=l-i-8),r<8&&(r=8),r+s>d-8&&(r=d-s-8);const c=this.groupOf(t);if("top"===c||"bottom"===c){const t=e.left+e.width/2-a-6;n=Math.min(i-8-6,Math.max(8,t))}else{const t=e.top+e.height/2-r-6;h=Math.min(s-8-6,Math.max(8,t))}this.tooltip.style.position="fixed",this.tooltip.style.top=`${r}px`,this.tooltip.style.left=`${a}px`,this.arrow.style.position="absolute",this.arrow.style.top=`${h}px`,this.arrow.style.left=`${n}px`}setVisible(t){if(!this.disabled||!t){if(this.visible=t,!t&&!this.alwaysShow)return this.hideTooltip(),void this.trigger?.removeAttribute("aria-describedby");this.removalTimer&&(clearTimeout(this.removalTimer),this.removalTimer=void 0),this.enterRaf&&(cancelAnimationFrame(this.enterRaf),this.enterRaf=void 0),this.ensureTooltip(),this.syncTooltipClasses(!1),this.calculatePosition(),this.trigger?.setAttribute("aria-describedby",this.tooltipId),this.enterRaf=requestAnimationFrame(()=>{this.enterRaf=requestAnimationFrame(()=>{this.enterRaf=void 0,this.syncTooltipClasses(!0),this.calculatePosition()})})}}hideTooltip(){if(this.enterRaf&&(cancelAnimationFrame(this.enterRaf),this.enterRaf=void 0),!this.tooltip)return;const t=this.tooltip;t.classList.remove("designbase-wc-tooltip--visible"),t.setAttribute("aria-hidden","true");const finish=()=>{t.removeEventListener("transitionend",onEnd),this.removalTimer&&(clearTimeout(this.removalTimer),this.removalTimer=void 0),this.visible||this.tooltip!==t||this.removeTooltip()},onEnd=e=>{e.target===t&&"opacity"===e.propertyName&&finish()};t.addEventListener("transitionend",onEnd),this.removalTimer=setTimeout(finish,400)}removeTooltip(){this.removalTimer&&(clearTimeout(this.removalTimer),this.removalTimer=void 0),this.tooltip?.remove(),this.tooltip=void 0,this.contentEl=void 0,this.arrow=void 0}}customElements.get("db-tooltip")||customElements.define("db-tooltip",DbTooltip);export{DbTooltip};

package/dist/esm/components/db-top-banner.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";const t=["primary","white","dark"];class DbTopBanner extends HTMLElement{static get observedAttributes(){return["badge-text","content","image","link-text","variant","fixed","dismissed"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}isDarkBg(e){return"primary"===e||"dark"===e}createLinkButton(t,n){const s=this.isDarkBg(t),a=document.createElement("db-button");a.setAttribute("variant",s?"secondary":"ghost"),a.setAttribute("size","s"),a.classList.add("designbase-wc-top-banner__link");const i=document.createElement("span");i.textContent=n;const r=document.createElement("span");return r.className="designbase-wc-button__end-icon",r.append(e("chevron-right",16)),a.append(i,r),a.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-link",{bubbles:!0,composed:!0}))}),a}createCloseButton(){const t=document.createElement("db-button");return t.setAttribute("variant","ghost"),t.setAttribute("size","m"),t.setAttribute("icon-only",""),t.setAttribute("aria-label","닫기"),t.classList.add("designbase-wc-top-banner__close"),t.append(e("close",20)),t.addEventListener("db-click",()=>{this.setAttribute("dismissed",""),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})),this.render()}),t}createBadge(e,t){const n=document.createElement("db-badge");return n.setAttribute("size","s"),n.setAttribute("variant",t?"secondary":"primary"),n.setAttribute("badge-style","text"),n.textContent=e,n.classList.add("designbase-wc-top-banner__badge"),n}render(){if(this.hasAttribute("dismissed"))return this.replaceChildren(),this.className="designbase-wc-top-banner designbase-wc-top-banner--dismissed",void(this.style.display="none");this.style.display="";const e=this.getAttribute("badge-text")||"",n=this.getAttribute("content")||"",s=this.getAttribute("image")||"",a=this.getAttribute("link-text")||"",i=this.getAttribute("variant")||"primary",r=t.includes(i)?i:"primary",d=this.hasAttribute("fixed"),c=this.isDarkBg(r);if(this.className=["designbase-wc-top-banner",`designbase-wc-top-banner--${r}`,d&&"designbase-wc-top-banner--fixed",s&&"designbase-wc-top-banner--has-image"].filter(Boolean).join(" "),this.setAttribute("role","alert"),s?this.style.setProperty("--db-top-banner-bg-image",`url("${s}")`):this.style.removeProperty("--db-top-banner-bg-image"),this.replaceChildren(),s){const e=document.createElement("div");e.className="designbase-wc-top-banner__background",e.setAttribute("aria-hidden","true");const t=document.createElement("div");t.className="designbase-wc-top-banner__overlay",t.setAttribute("aria-hidden","true"),this.append(e,t)}const o=document.createElement("div");o.className="designbase-wc-top-banner__container";const b=document.createElement("div");b.className="designbase-wc-top-banner__content",e&&b.append(this.createBadge(e,c));const l=document.createElement("span");l.className="designbase-wc-top-banner__text",l.textContent=n,b.append(l),a&&b.append(this.createLinkButton(r,a)),o.append(b),o.append(this.createCloseButton()),this.append(o)}}customElements.get("db-top-banner")||customElements.define("db-top-banner",DbTopBanner);export{DbTopBanner};
+import{createDbIcon as e}from"./db-icons.js";import{TOP_BANNER_VARIANTS as t}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbTopBanner extends HTMLElement{static get observedAttributes(){return["badge-text","content","image","link-text","variant","fixed","dismissed"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}isDarkBg(e){return"primary"===e||"dark"===e}createLinkButton(t,n){const s=this.isDarkBg(t),a=document.createElement("db-button");a.setAttribute("variant",s?"secondary":"ghost"),a.setAttribute("size","s"),a.classList.add("designbase-wc-top-banner__link");const i=document.createElement("span");i.textContent=n;const r=document.createElement("span");return r.className="designbase-wc-button__end-icon",r.append(e("chevron-right",16)),a.append(i,r),a.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-link",{bubbles:!0,composed:!0}))}),a}createCloseButton(){const t=document.createElement("db-button");return t.setAttribute("variant","ghost"),t.setAttribute("size","m"),t.setAttribute("icon-only",""),t.setAttribute("aria-label","닫기"),t.classList.add("designbase-wc-top-banner__close"),t.append(e("close",20)),t.addEventListener("db-click",()=>{this.setAttribute("dismissed",""),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})),this.render()}),t}createBadge(e,t){const n=document.createElement("db-badge");return n.setAttribute("size","s"),n.setAttribute("variant",t?"secondary":"primary"),n.setAttribute("type","text"),n.textContent=e,n.classList.add("designbase-wc-top-banner__badge"),n}render(){if(this.hasAttribute("dismissed"))return this.replaceChildren(),this.className="designbase-wc-top-banner designbase-wc-top-banner--dismissed",void(this.style.display="none");this.style.display="";const e=this.getAttribute("badge-text")||"",n=this.getAttribute("content")||"",s=this.getAttribute("image")||"",a=this.getAttribute("link-text")||"",i=this.getAttribute("variant")||"primary",r=t.includes(i)?i:"primary",d=this.hasAttribute("fixed"),o=this.isDarkBg(r);if(this.className=["designbase-wc-top-banner",`designbase-wc-top-banner--${r}`,d&&"designbase-wc-top-banner--fixed",s&&"designbase-wc-top-banner--has-image"].filter(Boolean).join(" "),this.setAttribute("role","alert"),s?this.style.setProperty("--db-top-banner-bg-image",`url("${s}")`):this.style.removeProperty("--db-top-banner-bg-image"),this.replaceChildren(),s){const e=document.createElement("div");e.className="designbase-wc-top-banner__background",e.setAttribute("aria-hidden","true");const t=document.createElement("div");t.className="designbase-wc-top-banner__overlay",t.setAttribute("aria-hidden","true"),this.append(e,t)}const c=document.createElement("div");c.className="designbase-wc-top-banner__container";const b=document.createElement("div");b.className="designbase-wc-top-banner__content",e&&b.append(this.createBadge(e,o));const l=document.createElement("span");l.className="designbase-wc-top-banner__text",l.textContent=n,b.append(l),a&&b.append(this.createLinkButton(r,a)),c.append(b),c.append(this.createCloseButton()),this.append(c)}}customElements.get("db-top-banner")||customElements.define("db-top-banner",DbTopBanner);export{DbTopBanner};

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

@@ -8,6 +8,7 @@ type TutorialStep = {
 declare class DbTutorial extends HTMLElement {
     static get observedAttributes(): string[];
     private root?;
+    private focusTrap?;
     private overlayEl?;
     private popoverEl?;
     private closeButtonEl?;

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-tutorial";class DbTutorial extends HTMLElement{constructor(){super(...arguments),this.internalStep=0,this.targetElement=null,this.keyHandler=null,this.resizeHandler=null,this.isMounted=!1}static get observedAttributes(){return["open","steps","current-step","indicator-type","indicator-size"]}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState()}disconnectedCallback(){this.detachListeners(),this.clearTargetHighlight(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),this.isMounted&&this.render()):this.syncOpenState())}get steps(){return this.parseSteps()}set steps(t){this.setAttribute("steps","string"==typeof t?t:JSON.stringify(t))}parseSteps(){try{const t=JSON.parse(this.getAttribute("steps")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}syncStepFromAttribute(){if(!this.hasAttribute("current-step"))return;const t=Number(this.getAttribute("current-step")||0);Number.isFinite(t)&&(this.internalStep=Math.max(0,t))}isOpenRequested(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}getCurrentStepData(){const t=this.parseSteps();if(!t.length)return;const e=Math.min(Math.max(this.internalStep,0),t.length-1);return{step:t[e],index:e,steps:t}}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachListeners();this.detachListeners(),this.clearTargetHighlight(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className=e,this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.tabIndex=-1,this.ensureStructure()),this.root.isConnected||document.body.append(this.root),this.isMounted=!0,this.render()}unmount(){this.isMounted=!1,this.root?.remove()}ensureStructure(){if(!this.root||this.popoverEl)return;this.overlayEl=document.createElement("div"),this.overlayEl.className=`${e}__overlay`,this.overlayEl.addEventListener("click",()=>this.handleEnd()),this.popoverEl=document.createElement("div"),this.popoverEl.className=`${e}__popover`,this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className=`${e}__close-button`,this.closeButtonEl.setAttribute("aria-label","튜토리얼 종료"),this.closeButtonEl.append(t("close",16)),this.closeButtonEl.addEventListener("click",()=>this.handleEnd());const i=document.createElement("div");i.className=`${e}__content`;const s=document.createElement("div");s.className=`${e}__text`,this.titleEl=document.createElement("h3"),this.titleEl.id="tutorial-title",this.titleEl.className=`${e}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.id="tutorial-content",this.descriptionEl.className=`${e}__description`,s.append(this.titleEl,this.descriptionEl);const n=document.createElement("div");n.className=`${e}__navigation`,this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","s"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.textContent="이전",this.prevButtonEl.addEventListener("db-click",()=>this.handlePrev()),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;"number"==typeof e.index&&this.goToStep(e.index)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","s"),this.nextButtonEl.addEventListener("db-click",()=>this.handleNext()),n.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),i.append(s,n),this.popoverEl.append(this.closeButtonEl,i),this.root.append(this.overlayEl,this.popoverEl)}attachListeners(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key?this.handleEnd():"ArrowLeft"===t.key?this.handlePrev():"ArrowRight"===t.key&&this.handleNext()},document.addEventListener("keydown",this.keyHandler)),this.resizeHandler||(this.resizeHandler=()=>this.updateTargetElement(),window.addEventListener("resize",this.resizeHandler))}detachListeners(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null),this.resizeHandler&&(window.removeEventListener("resize",this.resizeHandler),this.resizeHandler=null)}clearTargetHighlight(){this.targetElement&&(this.targetElement.classList.remove(`${e}__target`),this.targetElement.style.position="",this.targetElement.style.zIndex="",this.targetElement=null)}updateTargetElement(){const t=this.getCurrentStepData();if(!t?.step.target||!this.popoverEl)return;this.clearTargetHighlight();const i=document.querySelector(t.step.target);if(!i)return;this.targetElement=i,i.style.position="relative",i.style.zIndex="1000",i.classList.add(`${e}__target`);const s=i.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight,o=300,l=200,h=16;let a="auto"!==t.step.placement&&t.step.placement?t.step.placement:"bottom",d=s.bottom+h,c=s.left+s.width/2-150;if("auto"===t.step.placement)s.top-l-h>0?(a="top",d=s.top-l-h):s.bottom+l+h<r?(a="bottom",d=s.bottom+h):s.left-o-h>0?(a="left",d=s.top+s.height/2-100,c=s.left-o-h):(a="right",d=s.top+s.height/2-100,c=s.right+h);else switch(a){case"top":d=s.top-l-h;break;case"bottom":d=s.bottom+h;break;case"left":d=s.top+s.height/2-100,c=s.left-o-h;break;case"right":d=s.top+s.height/2-100,c=s.right+h}c=Math.max(h,Math.min(c,n-o-h)),d=Math.max(h,Math.min(d,r-l-h)),this.popoverEl.className=[`${e}__popover`,`${e}__popover--${a}`].join(" "),this.popoverEl.style.top=`${d}px`,this.popoverEl.style.left=`${c}px`}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.parseSteps();e.length&&(this.clearTargetHighlight(),this.internalStep=Math.min(Math.max(t,0),e.length-1),this.setAttribute("current-step",String(this.internalStep)),this.emitStepChange(this.internalStep),this.render())}handlePrev(){const t=this.getCurrentStepData();!t||t.index<=0||(this.dispatchEvent(new CustomEvent("db-prev",{bubbles:!0,composed:!0})),this.goToStep(t.index-1))}handleNext(){const t=this.getCurrentStepData();t&&(t.index>=t.steps.length-1?this.handleEnd():(this.dispatchEvent(new CustomEvent("db-next",{bubbles:!0,composed:!0})),this.goToStep(t.index+1)))}handleEnd(){this.dispatchEvent(new CustomEvent("db-end",{bubbles:!0,composed:!0})),this.setAttribute("open","false")}render(){const t=this.getCurrentStepData();if(!t||!this.root)return;const{step:e,index:i,steps:s}=t,n=0===i,r=i===s.length-1;this.titleEl&&(this.titleEl.textContent=e.title||"",this.titleEl.hidden=!e.title),this.descriptionEl&&(this.descriptionEl.textContent=e.content||"",this.descriptionEl.hidden=!e.content),this.prevButtonEl&&(this.prevButtonEl.hidden=n),this.nextButtonEl&&(this.nextButtonEl.textContent=r?"완료":"다음",r?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl&&(this.indicatorEl.setAttribute("current",String(i)),this.indicatorEl.setAttribute("total",String(s.length)),this.indicatorEl.setAttribute("type",this.getAttribute("indicator-type")||"numbers"),this.indicatorEl.setAttribute("size",this.getAttribute("indicator-size")||"m")),this.updateTargetElement()}}customElements.get("db-tutorial")||customElements.define("db-tutorial",DbTutorial);export{DbTutorial};
+import{createDbIcon as t}from"./db-icons.js";import{createFocusTrap as e}from"../core/focus-trap.js";const i="designbase-wc-tutorial";class DbTutorial extends HTMLElement{constructor(){super(...arguments),this.internalStep=0,this.targetElement=null,this.keyHandler=null,this.resizeHandler=null,this.isMounted=!1}static get observedAttributes(){return["open","steps","current-step","indicator-type","indicator-size"]}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState()}disconnectedCallback(){this.detachListeners(),this.clearTargetHighlight(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),this.isMounted&&this.render()):this.syncOpenState())}get steps(){return this.parseSteps()}set steps(t){this.setAttribute("steps","string"==typeof t?t:JSON.stringify(t))}parseSteps(){try{const t=JSON.parse(this.getAttribute("steps")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}syncStepFromAttribute(){if(!this.hasAttribute("current-step"))return;const t=Number(this.getAttribute("current-step")||0);Number.isFinite(t)&&(this.internalStep=Math.max(0,t))}isOpenRequested(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}getCurrentStepData(){const t=this.parseSteps();if(!t.length)return;const e=Math.min(Math.max(this.internalStep,0),t.length-1);return{step:t[e],index:e,steps:t}}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachListeners();this.detachListeners(),this.clearTargetHighlight(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className=i,this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.tabIndex=-1,this.ensureStructure()),this.root.isConnected||document.body.append(this.root),this.isMounted=!0,this.render(),this.popoverEl&&!this.focusTrap&&(this.focusTrap=e(this.popoverEl),requestAnimationFrame(()=>this.focusTrap?.activate()))}unmount(){this.isMounted=!1,this.focusTrap?.deactivate(),this.focusTrap=void 0,this.root?.remove()}ensureStructure(){if(!this.root||this.popoverEl)return;this.overlayEl=document.createElement("div"),this.overlayEl.className=`${i}__overlay`,this.overlayEl.addEventListener("click",()=>this.handleEnd()),this.popoverEl=document.createElement("div"),this.popoverEl.className=`${i}__popover`,this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className=`${i}__close-button`,this.closeButtonEl.setAttribute("aria-label","튜토리얼 종료"),this.closeButtonEl.append(t("close",16)),this.closeButtonEl.addEventListener("click",()=>this.handleEnd());const e=document.createElement("div");e.className=`${i}__content`;const s=document.createElement("div");s.className=`${i}__text`,this.titleEl=document.createElement("h3"),this.titleEl.id="tutorial-title",this.titleEl.className=`${i}__title`,this.descriptionEl=document.createElement("p"),this.descriptionEl.id="tutorial-content",this.descriptionEl.className=`${i}__description`,s.append(this.titleEl,this.descriptionEl);const n=document.createElement("div");n.className=`${i}__navigation`,this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","s"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.textContent="이전",this.prevButtonEl.addEventListener("db-click",()=>this.handlePrev()),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;"number"==typeof e.index&&this.goToStep(e.index)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","s"),this.nextButtonEl.addEventListener("db-click",()=>this.handleNext()),n.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),e.append(s,n),this.popoverEl.append(this.closeButtonEl,e),this.root.append(this.overlayEl,this.popoverEl)}attachListeners(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key?this.handleEnd():"ArrowLeft"===t.key?this.handlePrev():"ArrowRight"===t.key&&this.handleNext()},document.addEventListener("keydown",this.keyHandler)),this.resizeHandler||(this.resizeHandler=()=>this.updateTargetElement(),window.addEventListener("resize",this.resizeHandler))}detachListeners(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null),this.resizeHandler&&(window.removeEventListener("resize",this.resizeHandler),this.resizeHandler=null)}clearTargetHighlight(){this.targetElement&&(this.targetElement.classList.remove(`${i}__target`),this.targetElement.style.position="",this.targetElement.style.zIndex="",this.targetElement=null)}updateTargetElement(){const t=this.getCurrentStepData();if(!t?.step.target||!this.popoverEl)return;this.clearTargetHighlight();const e=document.querySelector(t.step.target);if(!e)return;this.targetElement=e,e.style.position="relative",e.style.zIndex="1000",e.classList.add(`${i}__target`);const s=e.getBoundingClientRect(),n=window.innerWidth,r=window.innerHeight,o=300,a=200,h=16;let l="auto"!==t.step.placement&&t.step.placement?t.step.placement:"bottom",d=s.bottom+h,c=s.left+s.width/2-150;if("auto"===t.step.placement)s.top-a-h>0?(l="top",d=s.top-a-h):s.bottom+a+h<r?(l="bottom",d=s.bottom+h):s.left-o-h>0?(l="left",d=s.top+s.height/2-100,c=s.left-o-h):(l="right",d=s.top+s.height/2-100,c=s.right+h);else switch(l){case"top":d=s.top-a-h;break;case"bottom":d=s.bottom+h;break;case"left":d=s.top+s.height/2-100,c=s.left-o-h;break;case"right":d=s.top+s.height/2-100,c=s.right+h}c=Math.max(h,Math.min(c,n-o-h)),d=Math.max(h,Math.min(d,r-a-h)),this.popoverEl.className=[`${i}__popover`,`${i}__popover--${l}`].join(" "),this.popoverEl.style.top=`${d}px`,this.popoverEl.style.left=`${c}px`}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.parseSteps();e.length&&(this.clearTargetHighlight(),this.internalStep=Math.min(Math.max(t,0),e.length-1),this.setAttribute("current-step",String(this.internalStep)),this.emitStepChange(this.internalStep),this.render())}handlePrev(){const t=this.getCurrentStepData();!t||t.index<=0||(this.dispatchEvent(new CustomEvent("db-prev",{bubbles:!0,composed:!0})),this.goToStep(t.index-1))}handleNext(){const t=this.getCurrentStepData();t&&(t.index>=t.steps.length-1?this.handleEnd():(this.dispatchEvent(new CustomEvent("db-next",{bubbles:!0,composed:!0})),this.goToStep(t.index+1)))}handleEnd(){this.dispatchEvent(new CustomEvent("db-end",{bubbles:!0,composed:!0})),this.setAttribute("open","false")}render(){const t=this.getCurrentStepData();if(!t||!this.root)return;const{step:e,index:i,steps:s}=t,n=0===i,r=i===s.length-1;this.titleEl&&(this.titleEl.textContent=e.title||"",this.titleEl.hidden=!e.title),this.descriptionEl&&(this.descriptionEl.textContent=e.content||"",this.descriptionEl.hidden=!e.content),this.prevButtonEl&&(this.prevButtonEl.hidden=n),this.nextButtonEl&&(this.nextButtonEl.textContent=r?"완료":"다음",r?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl&&(this.indicatorEl.setAttribute("current",String(i)),this.indicatorEl.setAttribute("total",String(s.length)),this.indicatorEl.setAttribute("type",this.getAttribute("indicator-type")||"numbers"),this.indicatorEl.setAttribute("size",this.getAttribute("indicator-size")||"m")),this.updateTargetElement()}}customElements.get("db-tutorial")||customElements.define("db-tutorial",DbTutorial);export{DbTutorial};

package/dist/esm/components/db-two-factor.d.ts

@@ -2,6 +2,7 @@ import './db-button.js';
 import './db-input.js';
 import './db-otp-input.js';
 import './db-segment-control.js';
+import { TWO_FACTOR_SIZES } from '@designbasekorea/ui-contracts';
 
 /**
  * ui-wc — db-two-factor (수동 작성, 자동 동기화 대상 아님)
@@ -9,6 +10,7 @@ import './db-segment-control.js';
  * 2단계 인증(2FA): 인증앱 / SMS / 이메일 방식 + OTP.
  */
 
+type Size = (typeof TWO_FACTOR_SIZES)[number];
 declare const METHODS: readonly [{
     readonly value: "app";
     readonly label: "인증 앱";
@@ -19,8 +21,6 @@ declare const METHODS: readonly [{
     readonly value: "email";
     readonly label: "이메일";
 }];
-declare const SIZES: readonly ["s", "m", "l"];
-type Size = (typeof SIZES)[number];
 type Method = (typeof METHODS)[number]['value'];
 declare class DbTwoFactor extends HTMLElement {
     static get observedAttributes(): string[];