@designbasekorea/ui-wc 0.9.4 → 0.11.0

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{labelFrom as e}from"../core/i18n.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TABS_ORIENTATIONS as i,TABS_SIZES as a,TABS_VARIANTS as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.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 s(this.getAttribute("orientation"),i,"horizontal")}set orientation(t){this.setAttribute("orientation",t)}get size(){return s(this.getAttribute("size"),a,"m")}set size(t){this.setAttribute("size",t)}get variant(){return s(this.getAttribute("variant"),n,"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=[...s.values()].some(t=>t.length>0),a=this.labels,n=this.tabItems,r=Math.min(Math.max(this.activeIndex,0),Math.max(a.length-1,0)),l=this.size,o=this.orientation,d=this.variant,h="default"===d;this.className=["designbase-wc-tabs",`designbase-wc-tabs--${o}`,`designbase-wc-tabs--${l}`,`designbase-wc-tabs--${d}`,this.fullWidth&&"designbase-wc-tabs--full-width",!i&&"designbase-wc-tabs--nav-only"].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",e(this,"label-tablist","tabs.label")),this.tabButtons=[],a.forEach((e,s)=>{const a=n[s],o=Boolean(a?.disabled),d=s===r,h=document.createElement("button");if(h.type="button",h.className=["designbase-wc-tabs__tab",d&&"designbase-wc-tabs__tab--selected",o&&"designbase-wc-tabs__tab--disabled"].filter(Boolean).join(" "),h.setAttribute("role","tab"),h.setAttribute("aria-selected",String(d)),i&&h.setAttribute("aria-controls",`panel-${s}`),h.id=`tab-${s}`,h.tabIndex=d?0:-1,h.disabled=o,a?.icon){const e=document.createElement("span");e.className="designbase-wc-tabs__tab-icon";const s="s"===l?16:"l"===l?20:18;e.setAttribute("aria-hidden","true"),e.append(t(a.icon,s)),h.append(e)}const c=document.createElement("span");c.className="designbase-wc-tabs__tab-label",c.textContent=e,h.append(c),h.addEventListener("click",()=>this.select(s)),h.addEventListener("keydown",t=>this.handleKeyDown(t,s)),this.list?.append(h),this.tabButtons.push(h)}),h?(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-${r}`,this.panel.setAttribute("aria-labelledby",`tab-${r}`),this.panel.tabIndex=i?0:-1,this.panel.hidden=!i;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===r?c.append(t):this.inactivePanels.append(t)})}),this.panel.append(c),this.append(this.list,this.panel),requestAnimationFrame(()=>{this.handleListScroll(),h&&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};
+import{isDbIconName as t,createDbIcon as e}from"./db-icons.js";import{subscribeDbLocale as i,labelFrom as s}from"../core/i18n.js";import{dbUid as n}from"../core/uid.js";import{setHostClasses as r}from"../core/host-class.js";import{coerceToContract as a}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TABS_ORIENTATIONS as o,TABS_SIZES as l,TABS_VARIANTS as d}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbTabs extends HTMLElement{constructor(){super(...arguments),this.uid=n("db-tabs"),this.records=new Map,this.slotNodes=new Set,this.rendering=!1,this.reflecting=!1,this.suppressClick=!1,this.beginDrag=t=>{if(!this.list||"touch"===t.pointerType||!t.isPrimary||0!==t.button||this.drag)return;if(!("horizontal"===this.orientation?this.list.scrollWidth>this.list.clientWidth+1:this.list.scrollHeight>this.list.clientHeight+1))return;const e=t.target instanceof Element&&t.target.closest("button")||this.list;this.drag={id:t.pointerId,target:e,x:t.clientX,y:t.clientY,left:this.list.scrollLeft,top:this.list.scrollTop,moved:!1};try{e.setPointerCapture(t.pointerId)}catch{}},this.moveDrag=t=>{const e=this.drag;if(!e||!this.list||e.id!==t.pointerId)return;const i="horizontal"===this.orientation?t.clientX-e.x:t.clientY-e.y;!e.moved&&Math.abs(i)<6||(e.moved=!0,this.list.classList.add("designbase-wc-tabs__list--dragging"),t.cancelable&&t.preventDefault(),"horizontal"===this.orientation?this.list.scrollLeft=e.left-i:this.list.scrollTop=e.top-i)},this.finishDrag=t=>{t.pointerId===this.drag?.id&&(this.moveDrag(t),this.endDrag(!1))},this.cancelDrag=t=>{t.pointerId===this.drag?.id&&this.endDrag(!0)},this.captureClick=t=>{this.suppressClick&&(t.preventDefault(),t.stopImmediatePropagation())},this.handleResize=()=>{this.isConnected&&(void 0!==this.resizeRaf&&cancelAnimationFrame(this.resizeRaf),this.resizeRaf=requestAnimationFrame(()=>{this.resizeRaf=void 0,this.handleListScroll(),this.updateIndicator()}))},this.handleListScroll=()=>{if(!this.list)return;const t="rtl"===getComputedStyle(this).direction,e=[...this.records.values()],i=e[e.length-1]?.button.getBoundingClientRect(),s=this.list.getBoundingClientRect(),n="horizontal"===this.orientation&&!!i&&(t?i.left<s.left-1:i.right>s.right+1);this.list.classList.toggle("designbase-wc-tabs__list--show-gradient",n)}}static get observedAttributes(){return["labels","items","active-index","selected-id","orientation","size","variant","full-width","aria-label","aria-labelledby","aria-describedby","label-tablist","dir"]}get tabItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t.filter(t=>!!t&&"object"==typeof t&&"string"==typeof t.label&&t.label.trim().length>0):[]}catch{return[]}}set tabItems(t){this.items=t}get items(){return this.tabItems}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}get labels(){const t=this.tabItems;if(t.length)return t.map(t=>t.label);const e=this.getAttribute("labels")||"";try{const t=JSON.parse(e);if(Array.isArray(t))return t.filter(t=>"string"==typeof t&&!!t.trim())}catch{}return e.split(",").map(t=>t.trim()).filter(Boolean)}set labels(t){this.setAttribute("labels",Array.isArray(t)?JSON.stringify(t):t)}entries(){const t=this.tabItems,e=new Set;return this.labels.map((i,s)=>{const n=t[s]||{label:i},r="string"==typeof n.id&&n.id?n.id:String(s);let a=r,o=1;for(;e.has(a);)a=`${r}#${++o}`;return e.add(a),{key:a,item:n,index:s}})}get activeIndex(){const t=this.entries(),e=this.getAttribute("selected-id");let i=e?t.findIndex(t=>t.key===e):-1;if(i<0){const t=Number(this.getAttribute("active-index")||0);i=Number.isFinite(t)?Math.trunc(t):0}if(i=Math.max(0,Math.min(i,t.length-1)),t[i]&&!t[i].item.disabled)return i;const s=t.find(t=>t.index>=i&&!t.item.disabled);return s?.index??t.find(t=>!t.item.disabled)?.index??-1}set activeIndex(t){this.reflecting=!0;try{this.removeAttribute("selected-id"),this.setAttribute("active-index",String(t))}finally{this.reflecting=!1}this.isConnected&&this.render()}get selectedId(){return this.entries()[this.activeIndex]?.key||""}set selectedId(t){this.setAttribute("selected-id",t)}get orientation(){return a(this.getAttribute("orientation"),o,"horizontal")}set orientation(t){this.setAttribute("orientation",t)}get size(){return a(this.getAttribute("size"),l,"m")}set size(t){this.setAttribute("size",t)}get variant(){return a(this.getAttribute("variant"),d,"default")}set variant(t){this.setAttribute("variant",t)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(t){this.toggleAttribute("full-width",t)}connectedCallback(){for(const t of["items","tabItems","labels","activeIndex","selectedId","orientation","size","variant","fullWidth"])if(Object.prototype.hasOwnProperty.call(this,t)){const e=this[t];delete this[t],this[t]=e}this.resizeObserver??(this.resizeObserver=new ResizeObserver(this.handleResize)),this.resizeObserver.observe(this),this.render(),this.unsubscribeLocale?.(),this.unsubscribeLocale=i(()=>{this.list?.setAttribute("aria-label",this.getAttribute("aria-label")||s(this,"label-tablist","tabs.label"))}),this.resizeObserver.observe(this.list);for(const t of this.records.values())this.resizeObserver.observe(t.button);window.addEventListener("resize",this.handleResize),document.fonts?.addEventListener("loadingdone",this.handleResize),this.childObserver??(this.childObserver=new MutationObserver(t=>{if(this.rendering)return;t.some(t=>"attributes"===t.type||Array.from(t.addedNodes).some(t=>t instanceof HTMLElement&&t.parentElement===this&&void 0!==this.slotIndex(t))||Array.from(t.removedNodes).some(t=>t instanceof HTMLElement&&(this.slotNodes.has(t)&&!this.contains(t)||[...this.records.values()].some(e=>e.panel===t)&&t.parentElement!==this)))&&this.render()})),this.childObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot","data-panel-index"]})}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.endDrag(!0),void 0!==this.clickTimer&&clearTimeout(this.clickTimer),this.suppressClick=!1,this.clickTimer=void 0,window.removeEventListener("resize",this.handleResize),document.fonts?.removeEventListener("loadingdone",this.handleResize),this.resizeObserver?.disconnect(),this.childObserver?.disconnect(),void 0!==this.resizeRaf&&cancelAnimationFrame(this.resizeRaf),this.resizeRaf=void 0}attributeChangedCallback(t,e,i){if(!this.reflecting&&e!==i){if("active-index"===t&&this.isConnected){this.reflecting=!0;try{this.removeAttribute("selected-id")}finally{this.reflecting=!1}}this.isConnected&&this.render()}}refresh(){this.isConnected&&this.render()}focus(t){this.records.get(this.selectedId)?.button.focus(t)}slotIndex(t){const e=t.getAttribute("slot")?.match(/^panel-(\d+)$/),i=e?.[1]??t.dataset.panelIndex;if(void 0===i||""===i.trim())return;const s=Number(i);return Number.isInteger(s)&&s>=0?s:void 0}collectSlots(){for(const t of Array.from(this.children))t instanceof HTMLElement&&void 0!==this.slotIndex(t)&&this.slotNodes.add(t);const t=new Map;for(const e of this.slotNodes){if(!this.contains(e)){this.slotNodes.delete(e);continue}const i=this.slotIndex(e);if(void 0===i)continue;const s=t.get(i)||[];s.push(e),t.set(i,s)}return t}createRecord(t){const e=document.createElement("button");e.type="button",e.setAttribute("role","tab");const i=n(this.uid);e.id=`${i}-tab`;const s=document.createElement("span");s.className="designbase-wc-tabs__tab-icon",s.setAttribute("aria-hidden","true");const r=document.createElement("span");r.className="designbase-wc-tabs__tab-label",e.append(s,r);const a=document.createElement("div");a.id=`${i}-panel`,a.className="designbase-wc-tabs__panel",a.setAttribute("role","tabpanel"),a.setAttribute("aria-labelledby",e.id),a.tabIndex=0;const o=document.createElement("div");return o.id=`${i}-inner`,o.className="designbase-wc-tabs__panel-inner",a.append(o),e.addEventListener("click",()=>this.select(t)),e.addEventListener("focus",()=>{this.focusedKey=t,this.syncRoving()}),e.addEventListener("keydown",e=>this.navigate(e,t)),this.resizeObserver?.observe(e),{button:e,icon:s,label:r,panel:a,inner:o}}hideUnassigned(t){this.stash??(this.stash=Object.assign(document.createElement("div"),{hidden:!0,inert:!0})),this.stash.parentElement||this.append(this.stash),t.parentElement!==this.stash&&this.stash.append(t)}render(){if(!this.rendering){this.drag&&this.endDrag(!0),this.rendering=!0;try{const i=this.entries(),n=this.activeIndex,a=i[n]?.key||"",o=document.activeElement,l=[...this.records.values()].findIndex(t=>t.button===o||t.panel.contains(o)),d=this.collectSlots(),h=new Set;this.list??(this.list=document.createElement("div")),this.list.parentElement||(this.list.addEventListener("scroll",this.handleListScroll,{passive:!0}),this.list.addEventListener("pointerdown",this.beginDrag),this.list.addEventListener("pointermove",this.moveDrag),this.list.addEventListener("pointerup",this.finishDrag),this.list.addEventListener("pointercancel",this.cancelDrag),this.list.addEventListener("lostpointercapture",this.cancelDrag),this.list.addEventListener("click",this.captureClick,!0),this.prepend(this.list)),this.list.className=`designbase-wc-tabs__list designbase-wc-tabs__list--${this.orientation}${this.fullWidth?" designbase-wc-tabs__list--full-width":""}`,this.list.setAttribute("role","tablist"),this.list.setAttribute("aria-orientation",this.orientation),this.list.setAttribute("aria-label",this.getAttribute("aria-label")||s(this,"label-tablist","tabs.label"));for(const t of["aria-labelledby","aria-describedby"])this.hasAttribute(t)?this.list.setAttribute(t,this.getAttribute(t)):this.list.removeAttribute(t);const c=[];let b=null,u=this.list;for(const{key:s,item:r,index:a}of i){const i=this.records.get(s)||this.createRecord(s);c.push([s,i]),i.button.className=`designbase-wc-tabs__tab${a===n?" designbase-wc-tabs__tab--selected":""}${r.disabled?" designbase-wc-tabs__tab--disabled":""}`,i.button.disabled=Boolean(r.disabled),i.button.setAttribute("aria-selected",String(a===n)),i.label.textContent=r.label;const o=`${r.icon}:${this.size}`;if(i.iconSignature!==o){i.icon.replaceChildren();const s=r.icon,n="string"==typeof s&&t(s);i.icon.hidden=!n,n&&i.icon.append(e(s,"s"===this.size?16:"l"===this.size?20:18)),i.iconSignature=o}if(i.inner.dataset.dbTabsContentIndex=String(a),!i.inner.hasAttribute("data-db-react-content")){const t=d.get(a)||[];for(const e of Array.from(i.inner.children))t.includes(e)||this.hideUnassigned(e);for(const e of t)h.add(e),e.parentElement!==i.inner&&i.inner.append(e)}const l=b?b.nextElementSibling:this.list.firstElementChild;l!==i.button&&this.list.insertBefore(i.button,l),b=i.button;const g=u.nextElementSibling;g!==i.panel&&this.insertBefore(i.panel,g),u=i.panel}const g=new Set(i.map(t=>t.key));for(const[t,e]of this.records)if(!g.has(t)){for(const t of this.slotNodes)e.panel.contains(t)&&!h.has(t)&&this.hideUnassigned(t);this.resizeObserver?.unobserve(e.button),e.button.remove(),e.panel.remove()}for(const t of this.slotNodes)h.has(t)||this.hideUnassigned(t);this.records.clear();for(const[t,e]of c)this.records.set(t,e);const f=c.some(([,t])=>t.inner.childNodes.length>0||t.inner.hasAttribute("data-db-react-content"));r(this,["designbase-wc-tabs",`designbase-wc-tabs--${this.orientation}`,`designbase-wc-tabs--${this.size}`,`designbase-wc-tabs--${this.variant}`,this.fullWidth&&"designbase-wc-tabs--full-width",!f&&"designbase-wc-tabs--nav-only"]);for(const[t,e]of c){const i=f&&t===a;e.panel.hidden=!i,e.panel.inert=!i,e.panel.setAttribute("aria-hidden",String(!i)),f?e.button.setAttribute("aria-controls",e.panel.id):e.button.removeAttribute("aria-controls")}this.focusedKey&&this.records.has(this.focusedKey)&&!this.records.get(this.focusedKey)?.button.disabled||(this.focusedKey=a),this.list.contains(o)||(this.focusedKey=a),this.syncRoving(),this.reflecting=!0;try{this.setAttribute("active-index",String(n)),a?this.setAttribute("selected-id",a):this.removeAttribute("selected-id")}finally{this.reflecting=!1}"default"===this.variant&&a?(this.indicator??(this.indicator=document.createElement("span")),this.indicator.className="designbase-wc-tabs__indicator designbase-wc-tabs__indicator--no-transition",this.indicator.setAttribute("aria-hidden","true"),this.indicator.parentElement!==this.list&&this.list.append(this.indicator)):this.indicator?.remove(),o instanceof HTMLElement&&l>=0&&(document.activeElement!==o||o.closest("[inert]")||o instanceof HTMLButtonElement&&o.disabled)&&(!o.isConnected||o.closest("[inert]")||o instanceof HTMLButtonElement&&o.disabled?this.records.get(a)?.button.focus({preventScroll:!0}):o.focus({preventScroll:!0})),this.handleResize()}finally{this.rendering=!1}this.dispatchEvent(new Event("db-content-targets-change"))}}syncRoving(){for(const[t,e]of this.records)e.button.tabIndex=e.button.disabled||t!==this.focusedKey?-1:0}select(t){if(this.suppressClick)return;const e=this.entries().find(e=>e.key===t);e&&!e.item.disabled&&(this.focusedKey=t,this.syncRoving(),t!==this.selectedId&&(this.selectedId=t,this.dispatchEvent(new CustomEvent("db-change",{detail:{index:e.index,label:e.item.label,id:t},bubbles:!0,composed:!0})),this.ensureVisible(this.records.get(t).button)))}navigate(t,e){if(t.altKey||t.ctrlKey||t.metaKey)return;const i=this.entries().filter(t=>!t.item.disabled),s=i.findIndex(t=>t.key===e);if(s<0)return;let n=s;const r="vertical"===this.orientation,a="rtl"===getComputedStyle(this).direction;if("Home"===t.key)n=0;else if("End"===t.key)n=i.length-1;else if(!r||"ArrowDown"!==t.key&&"ArrowUp"!==t.key){if(r||"ArrowRight"!==t.key&&"ArrowLeft"!==t.key)return;n=(s+("ArrowRight"===t.key!==a?1:-1)+i.length)%i.length}else n=(s+("ArrowDown"===t.key?1:-1)+i.length)%i.length;t.preventDefault();const o=this.records.get(i[n].key).button;o.focus({preventScroll:!0}),this.ensureVisible(o)}ensureVisible(t){if(!this.list)return;const e=t.getBoundingClientRect(),i=this.list.getBoundingClientRect();"horizontal"===this.orientation?this.list.scrollBy({left:e.left<i.left?e.left-i.left:e.right>i.right?e.right-i.right:0,behavior:"auto"}):this.list.scrollBy({top:e.top<i.top?e.top-i.top:e.bottom>i.bottom?e.bottom-i.bottom:0,behavior:"auto"})}endDrag(t){const e=this.drag;if(this.drag=void 0,e){this.list?.classList.remove("designbase-wc-tabs__list--dragging"),e.moved&&(this.suppressClick=!0,void 0!==this.clickTimer&&clearTimeout(this.clickTimer),this.clickTimer=window.setTimeout(()=>{this.suppressClick=!1,this.clickTimer=void 0},0));try{e.target.hasPointerCapture(e.id)&&e.target.releasePointerCapture(e.id)}catch{}t&&this.handleListScroll()}}updateIndicator(){const t=this.records.get(this.selectedId)?.button;if(!t||!this.indicator?.isConnected)return;const e="vertical"===this.orientation;this.indicator.classList.toggle("designbase-wc-tabs__indicator--vertical",e),this.indicator.classList.toggle("designbase-wc-tabs__indicator--horizontal",!e),this.indicator.classList.add("designbase-wc-tabs__indicator--ready"),this.indicator.style.width=e?"2px":`${t.offsetWidth}px`,this.indicator.style.height=e?`${t.offsetHeight}px`:"2px",this.indicator.style.transform=e?`translate3d(0, ${t.offsetTop}px, 0)`:`translate3d(${t.offsetLeft}px, 0, 0)`}}customElements.get("db-tabs")||customElements.define("db-tabs",DbTabs);export{DbTabs};

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

@@ -8,13 +8,25 @@ declare class DbTextarea extends HTMLElement {
     private errorEl?;
     private footerEl?;
     private built;
+    private formState;
     get value(): string;
     set value(value: string);
+    get defaultValue(): string;
+    set defaultValue(value: string);
+    get name(): string;
+    set name(value: string);
+    get required(): boolean;
+    set required(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get readOnly(): boolean;
+    set readOnly(value: boolean);
     get size(): string;
     set size(value: string);
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
-    focus(): void;
+    focus(options?: FocusOptions): void;
     private get showCharacterCount();
     private get characterCountPosition();
     private build;

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

@@ -1 +1 @@
-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.getAttribute("value")!==this.field.value&&this.setAttribute("value",this.field.value),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}-field`,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}-field`,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("rows")&&"designbase-wc-textarea--rows",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=>{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),this.footerEl&&(this.footerEl.hidden=Boolean(this.errorEl?.hidden&&this.helperEl?.hidden&&this.countBottom.hidden))}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{TextFieldState as t,TEXT_FIELD_ATTRIBUTES as e,upgradeTextProperties as i,textFieldDescription as s}from"../core/text-field-state.js";import{setHostClasses as a}from"../core/host-class.js";import{dbUid as r}from"../core/uid.js";import{coerceToContract as h}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TEXTAREA_SIZES as l}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbTextarea extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.formState=new t(this,()=>this.updateCharacterCount()),this.handleInput=t=>{t.stopPropagation(),this.field&&(this.getAttribute("value")!==this.field.value&&this.setAttribute("value",this.field.value),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",...e]}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 defaultValue(){return this.formState.defaultValue}set defaultValue(t){this.setAttribute("default-value",t)}get name(){return this.getAttribute("name")||""}set name(t){this.setAttribute("name",t)}get required(){return this.hasAttribute("required")}set required(t){this.toggleAttribute("required",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t)}get size(){return h(this.getAttribute("size"),l,"m")}set size(t){this.setAttribute("size",t)}connectedCallback(){i(this,["value","defaultValue","name","required","size","disabled","readOnly"]),this.built||this.build(),this.syncState()}disconnectedCallback(){this.formState.disconnect()}attributeChangedCallback(t){if(this.built){if("value"===t&&this.field){const t=this.getAttribute("value")||"";return this.field.value!==t&&(this.field.value=t),this.formState.syncValue(this.field),void this.updateCharacterCount()}this.syncState()}}focus(t){this.field?.focus(t)}get showCharacterCount(){return this.hasAttribute("show-character-count")}get characterCountPosition(){return this.getAttribute("character-count-position")||"bottom"}build(){const t=this.getAttribute("id")||r("db-textarea");this.hasAttribute("id")||this.setAttribute("id",t),this.labelEl=document.createElement("label"),this.labelEl.className="designbase-wc-textarea__label",this.labelEl.htmlFor=`${t}-field`,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}-field`,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 t=l.includes(this.size)?this.size:"m",e=this.getAttribute("label")||"",i=this.getAttribute("helper-text")||"",r=this.getAttribute("error-message")||"",h=this.hasAttribute("error"),d=this.getAttribute("value")??this.getAttribute("default-value")??"";if(a(this,["designbase-wc-textarea",`designbase-wc-textarea--${t}`,h&&"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("rows")&&"designbase-wc-textarea--rows",this.hasAttribute("resizable")?"":"designbase-wc-textarea--not-resizable"]),this.labelEl){const t=this.hasAttribute("required")?'<span aria-hidden="true"> *</span>':"";this.labelEl.innerHTML=e?`${this.escape(e)}${t}`:"",this.labelEl.hidden=!e}this.field.placeholder=this.getAttribute("placeholder")||"",this.field.name=this.getAttribute("name")||"",this.field.value!==d&&(this.field.value=d);const n=Number(this.getAttribute("rows")||4);this.field.rows=Number.isInteger(n)&&n>0?n: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(h));const o=`${this.getAttribute("id")}-helper`,u=`${this.getAttribute("id")}-error`;h&&r?(this.errorEl.id=u,this.errorEl.textContent=r,this.errorEl.hidden=!1,this.helperEl.hidden=!0,this.field.setAttribute("aria-describedby",u)):i?(this.helperEl.id=o,this.helperEl.textContent=i,this.helperEl.hidden=!1,this.errorEl.hidden=!0,this.field.setAttribute("aria-describedby",o)):(this.helperEl.hidden=!0,this.errorEl.hidden=!0,this.field.removeAttribute("aria-describedby"));const c=s(this,this.field.getAttribute("aria-describedby")||"");c&&this.field.setAttribute("aria-describedby",c),this.formState.sync(this.field),this.updateCharacterCount()}updateCharacterCount(){if(!this.field||!this.countTop||!this.countBottom)return;const t=this.field.value.length,e=this.field.maxLength>=0?this.field.maxLength:null,i=null!==e&&t>e,s=`${t}${null!==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),this.footerEl&&(this.footerEl.hidden=Boolean(this.errorEl?.hidden&&this.helperEl?.hidden&&this.countBottom.hidden))}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-ticket.js

@@ -1 +1 @@
-import{DbPaperCard as e,paperFields as t,paperJson as i,paperNode as s,paperDetails as r}from"./paper-card.js";class DbTicket extends e{static get observedAttributes(){return["layout","issuer","heading","description","reference","fields","edge","note","code-image-src","code-alt","action-label","disabled"]}upgradeNames(){return["fields"]}get fields(){return t(this.data??i(this.attr("fields")))}set fields(e){this.data=null==e?void 0:t(e),this.isConnected&&this.render()}render(){const e=s("section","db-paper__main");this.attr("issuer")&&e.append(s("div","db-paper__issuer",this.attr("issuer"))),e.append(s("h3","db-paper__title",this.attr("heading")||"티켓")),this.attr("description")&&e.append(s("p","db-paper__description",this.attr("description"))),this.fields.length&&e.append(r(this.fields));const t=s("div","db-paper__stub");t.append(this.code(this.attr("reference"))),this.attr("note")&&t.append(s("p","db-paper__note",this.attr("note")));const i=this.action(this.attr("reference"));i&&t.append(i),this.replace(e,t)}}customElements.get("db-ticket")||customElements.define("db-ticket",DbTicket);export{DbTicket};
+import{DbPaperCard as e,paperFields as t,paperJson as i,paperNode as s,paperDetails as r}from"./paper-card.js";import{t as d}from"../core/i18n.js";class DbTicket extends e{static get observedAttributes(){return["layout","issuer","heading","description","reference","fields","edge","note","code-image-src","code-alt","action-label","disabled"]}upgradeNames(){return["fields"]}get fields(){return t(this.data??i(this.attr("fields")))}set fields(e){this.data=null==e?void 0:t(e),this.isConnected&&this.render()}render(){const e=s("section","db-paper__main");this.attr("issuer")&&e.append(s("div","db-paper__issuer",this.attr("issuer"))),e.append(s("h3","db-paper__title",this.attr("heading")||d("ticket.title"))),this.attr("description")&&e.append(s("p","db-paper__description",this.attr("description"))),this.fields.length&&e.append(r(this.fields));const t=s("div","db-paper__stub");t.append(this.code(this.attr("reference"))),this.attr("note")&&t.append(s("p","db-paper__note",this.attr("note")));const i=this.action(this.attr("reference"));i&&t.append(i),this.replace(e,t)}}customElements.get("db-ticket")||customElements.define("db-ticket",DbTicket);export{DbTicket};

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

@@ -15,6 +15,7 @@ declare class DbTimePicker extends HTMLElement {
     private seconds;
     private period;
     private inputText;
+    private unsubscribeLocale?;
     private tempHours;
     private tempMinutes;
     private tempSeconds;
@@ -24,6 +25,7 @@ declare class DbTimePicker extends HTMLElement {
     private viewportChangeFrame;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private syncLocale;
     /** 열린 드롭다운은 Escape 로 닫히고 포커스는 트리거로 돌아간다 (A11Y-ESCAPE) */
     private handleDocumentKeyDown;
     private boundDocumentKeyDown;

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

@@ -1 +1 @@
-import{inheritThemeScope as t}from"../core/theme-scope.js";import{dbText as e}from"../core/i18n.js";import{createDbIcon as i,getDbComponentIconSize as s}from"./db-icons.js";import"./db-button.js";import{TIME_PICKER_FORMATS as n,TIME_PICKER_SIZES as o,TIME_PICKER_DROPDOWN_POSITIONS as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as h}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";const d="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.boundViewportChange=()=>this.handleViewportChange(),this.viewportChangeFrame=null,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),window.addEventListener("resize",this.boundViewportChange),window.addEventListener("scroll",this.boundViewportChange,{capture:!0,passive:!0})}disconnectedCallback(){document.removeEventListener("mousedown",this.boundDocumentMouseDown),document.removeEventListener("keydown",this.boundDocumentKeyDown),window.removeEventListener("resize",this.boundViewportChange),window.removeEventListener("scroll",this.boundViewportChange,{capture:!0}),null!==this.viewportChangeFrame&&cancelAnimationFrame(this.viewportChangeFrame),this.viewportChangeFrame=null,this.dropdownEl?.remove()}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 normalizedSize(){return h(this.getAttribute("size"),o,"m")}get dropdownPosition(){return h(this.getAttribute("dropdown-position"),r,"auto")}get itemHeight(){return"s"===this.normalizedSize?32:"l"===this.normalizedSize?40:28}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=`${d}__label`,this.triggerEl=document.createElement("div"),this.triggerEl.className=`${d}__trigger`;const t=document.createElement("button");t.type="button",t.className=`${d}__icon-display`,t.setAttribute("aria-label",e("시간 선택 열기")),t.addEventListener("click",()=>this.toggleOpen()),this.inputEl=document.createElement("input"),this.inputEl.type="text",this.inputEl.className=`${d}__input`,this.inputEl.setAttribute("aria-label",e("시간 입력")),this.inputEl.addEventListener("click",()=>this.openPicker()),this.inputEl.addEventListener("blur",()=>this.handleInputBlur()),this.inputEl.addEventListener("input",()=>{this.inputText=this.inputEl?.value||""});const i=document.createElement("button");i.type="button",i.className=`${d}__toggle`,i.setAttribute("aria-label",e("시간 선택 열기")),i.addEventListener("click",()=>this.toggleOpen()),this.triggerEl.append(t,this.inputEl,i),this.dropdownEl=document.createElement("div"),this.dropdownEl.className=`${d}__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){if(!this.isOpen)return;const e=t.target;this.contains(e)||this.dropdownEl?.contains(e)||this.closePicker()}handleViewportChange(){this.isOpen&&"dropdown"===this.type&&null===this.viewportChangeFrame&&(this.viewportChangeFrame=requestAnimationFrame(()=>{this.viewportChangeFrame=null,this.isOpen&&"dropdown"===this.type&&this.positionDropdown()}))}positionDropdown(){if(!this.isOpen||"dropdown"!==this.type||!this.triggerEl||!this.dropdownEl||this.dropdownEl.hidden)return;const t=this.dropdownEl,e=this.triggerEl.getBoundingClientRect();t.style.width="";const i=t.getBoundingClientRect(),s=Math.max(0,window.innerWidth-16),n=Math.min(i.width,s);t.style.width=`${Math.round(n)}px`;const o=this.dropdownPosition,r=e.bottom+4+i.height<=window.innerHeight-8,h=e.top-4-i.height>=8,d="auto"===o?r||!h?"bottom":"top":o.startsWith("top")?"top":"bottom",a="auto"===o?e.left+n>window.innerWidth-8?"end":"start":o.endsWith("end")?"end":"start",l="end"===a?e.right-n:e.left,u=Math.max(8,Math.min(l,window.innerWidth-n-8)),p="top"===d?e.top-i.height-4:e.bottom+4,c=Math.max(8,Math.min(p,window.innerHeight-i.height-8));t.style.left=`${Math.round(u)}px`,t.style.top=`${Math.round(c)}px`,t.dataset.placement=`${d}-${a}`}createWheel(t){const{label:e,items:i,value:s,onChange:n,formatter:o}=t,r=document.createElement("div");r.className=`${d}__wheel-container`;const h=document.createElement("div");h.className=`${d}__wheel-label`,h.textContent=e,r.appendChild(h);const a=document.createElement("div");a.className=`${d}__wheel-viewport`;const l=document.createElement("div");l.className=`${d}__wheel`,l.setAttribute("role","listbox"),l.setAttribute("aria-label",e);let u=null,p=!1,c=!1,m=0,b=0;const indexOfValue=t=>i.findIndex(e=>e===t),scrollToIndex=(t,e=!0)=>{const i=t*this.itemHeight;p=!0,l.scrollTo({top:i,behavior:e?"smooth":"auto"}),window.setTimeout(()=>{p=!1},150)},fmt=t=>o?o(t):"number"==typeof t?this.pad2(t):String(t);i.forEach(t=>{const e=document.createElement("div");e.className=[`${d}__wheel-item`,t===s&&`${d}__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&&n(t)}),l.appendChild(e)});const handleScroll=()=>{p||(u&&window.clearTimeout(u),u=window.setTimeout(()=>{const t=l.scrollTop,e=Math.round(t/this.itemHeight),o=Math.max(0,Math.min(i.length-1,e)),r=i[o];scrollToIndex(o,!0),r!==s&&n(r)},120))};l.addEventListener("scroll",handleScroll,{passive:!0}),l.addEventListener("pointerdown",t=>{c=!0,m=t.clientY,b=l.scrollTop,l.setPointerCapture(t.pointerId),l.style.cursor="grabbing"}),l.addEventListener("pointermove",t=>{c&&(l.scrollTop=b-(t.clientY-m))});const endDrag=t=>{c&&(c=!1,l.releasePointerCapture(t.pointerId),l.style.cursor="grab",handleScroll())};l.addEventListener("pointerup",endDrag),l.addEventListener("pointercancel",endDrag);const w=indexOfValue(s);w>=0&&requestAnimationFrame(()=>scrollToIndex(w,!1));const g=document.createElement("div");g.className=`${d}__wheel-center-indicator`,g.setAttribute("aria-hidden","true");const E=document.createElement("div");E.className=`${d}__wheel-fade wheel-fade--top`,E.setAttribute("aria-hidden","true");const v=document.createElement("div");return v.className=`${d}__wheel-fade wheel-fade--bottom`,v.setAttribute("aria-hidden","true"),a.append(l,g,E,v),r.appendChild(a),r}renderSelector(t=!1){const s=document.createElement("div");s.className=`${d}__selector`;const n=document.createElement("div");n.className=`${d}__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),a=t?this.tempHours:this.hours,l=t?this.tempMinutes:this.minutes,u=t?this.tempSeconds:this.seconds,p=t?this.tempPeriod:this.period,onChange=(e,i,s,n)=>{if(t)return this.tempHours=e,this.tempMinutes=i,this.tempSeconds=s,void(this.tempPeriod=n);this.handleTimeChange(e,i,s,n)};if(n.appendChild(this.createWheel({label:e("시간"),items:o,value:a,onChange:t=>onChange(t,l,u,p)})),n.appendChild(this.createWheel({label:e("분"),items:r,value:r.includes(l)?l:r[0],onChange:t=>onChange(a,t,u,p)})),this.showSeconds&&n.appendChild(this.createWheel({label:e("초"),items:h,value:u,onChange:t=>onChange(a,l,t,p)})),this.is12h&&n.appendChild(this.createWheel({label:e("오전/오후"),items:["AM","PM"],value:p,onChange:t=>onChange(a,l,u,t),formatter:t=>"AM"===t?"오전":"오후"})),s.appendChild(n),t)return s;const c=document.createElement("div");c.className=`${d}__dropdown-actions`;const m=document.createElement("div");m.className=`${d}__preview`,m.setAttribute("aria-live","polite"),m.appendChild(i("clock",16));const b=document.createElement("div");b.className=`${d}__preview-time`,b.textContent=this.formatTimeString(a,l,u,p),m.appendChild(b);const w=document.createElement("db-button");return w.setAttribute("variant","primary"),w.setAttribute("size","m"),w.textContent=e("선택"),w.addEventListener("click",()=>{this.handleTimeChange(a,l,u,p),this.closePicker()}),c.append(m,w),s.appendChild(c),s}render(){const n=this.normalizedSize,o=this.dropdownPosition,r=s(n);if(this.className=[d,`${d}--${n}`,this.hasAttribute("full-width")&&`${d}--full-width`,this.disabled&&`${d}--disabled`,this.readonly&&`${d}--readonly`,this.isOpen&&`${d}--open`,this.hasAttribute("error")&&`${d}--error`].filter(Boolean).join(" "),this.inputEl?.setAttribute("aria-invalid",String(this.hasAttribute("error"))),this.dropdownEl?.parentElement===document.body&&this.dropdownEl.remove(),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 a=this.triggerEl.querySelector(`.${d}__icon-display`);a&&(a.innerHTML="",a.appendChild(i("clock",r)),a.disabled=this.disabled);const l=this.triggerEl.querySelector(`.${d}__toggle`);if(l&&(l.innerHTML="",l.appendChild(i("chevron-down",r)),l.disabled=this.disabled),this.dropdownEl.className=[`${d}__dropdown`,`${d}__dropdown--${n}`,`${d}__dropdown--${o}`].filter(Boolean).join(" "),this.dropdownEl.setAttribute("aria-label",e("시간 선택")),this.dropdownEl.hidden=!this.isOpen,this.isOpen&&"dropdown"===this.type&&(this.dropdownEl.replaceChildren(this.renderSelector(!1)),t(this,this.dropdownEl),document.body.appendChild(this.dropdownEl),this.dropdownEl.hidden=!1,this.positionDropdown(),requestAnimationFrame(()=>this.positionDropdown())),this.append(this.labelEl,this.triggerEl),this.isOpen&&"modal"===this.type){const t=document.createElement("db-modal");t.setAttribute("open","true"),t.setAttribute("title",e("시간 선택")),t.setAttribute("size","s"),t.addEventListener("db-close",()=>this.closePicker());const i=this.renderSelector(!0),s=document.createElement("div");s.className=`${d}__modal-footer`;const n=document.createElement("db-button");n.setAttribute("variant","secondary"),n.setAttribute("size","m"),n.textContent=e("취소"),n.addEventListener("click",()=>this.closePicker());const o=document.createElement("db-button");o.setAttribute("variant","primary"),o.setAttribute("size","m"),o.textContent=e("적용"),o.addEventListener("click",()=>{this.handleTimeChange(this.tempHours,this.tempMinutes,this.tempSeconds,this.tempPeriod),this.closePicker()}),s.append(n,o),t.append(i,s),this.appendChild(t)}}}customElements.get("db-time-picker")||customElements.define("db-time-picker",DbTimePicker);export{DbTimePicker};
+import{inheritThemeScope as t}from"../core/theme-scope.js";import{subscribeDbLocale as e,dbText as i}from"../core/i18n.js";import{createDbIcon as s,getDbComponentIconSize as n}from"./db-icons.js";import"./db-button.js";import{TIME_PICKER_FORMATS as o,TIME_PICKER_SIZES as r,TIME_PICKER_DROPDOWN_POSITIONS as h}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";import{coerceToContract as d}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";const a="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.boundViewportChange=()=>this.handleViewportChange(),this.viewportChangeFrame=null,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.unsubscribeLocale?.(),this.unsubscribeLocale=e(()=>this.syncLocale()),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),window.addEventListener("resize",this.boundViewportChange),window.addEventListener("scroll",this.boundViewportChange,{capture:!0,passive:!0})}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,document.removeEventListener("mousedown",this.boundDocumentMouseDown),document.removeEventListener("keydown",this.boundDocumentKeyDown),window.removeEventListener("resize",this.boundViewportChange),window.removeEventListener("scroll",this.boundViewportChange,{capture:!0}),null!==this.viewportChangeFrame&&cancelAnimationFrame(this.viewportChangeFrame),this.viewportChangeFrame=null,this.dropdownEl?.remove()}syncLocale(){if(!this.built)return;if(this.inputEl?.setAttribute("aria-label",i("시간 입력")),this.triggerEl?.querySelectorAll(`.${a}__icon-display, .${a}__toggle`).forEach(t=>t.setAttribute("aria-label",i("시간 선택 열기"))),this.is12h&&this.inputEl&&document.activeElement!==this.inputEl){const t=`${this.pad2(this.hours)}:${this.pad2(this.minutes)}${this.showSeconds?`:${this.pad2(this.seconds)}`:""}`;("AM"===this.period?["오전","AM"]:["오후","PM"]).some(e=>this.inputText===`${e} ${t}`)&&this.syncInputText()}this.dropdownEl?.setAttribute("aria-label",i("시간 선택"));const t=this.querySelector("db-modal");t&&t.setAttribute("title",i("시간 선택"));const e=[this.dropdownEl,t].filter(t=>!!t);for(const t of e){const e=["시간","분",...this.showSeconds?["초"]:[],...this.is12h?["오전/오후"]:[]];t.querySelectorAll(`.${a}__wheel-container`).forEach((t,s)=>{const n=e[s];if(!n)return;const o=t.querySelector(`.${a}__wheel-label`);o&&(o.textContent=i(n)),t.querySelector('[role="listbox"]')?.setAttribute("aria-label",i(n)),"오전/오후"===n&&t.querySelectorAll('[role="option"]').forEach((t,e)=>{t.textContent=i(0===e?"오전":"오후")})});const s=t.querySelector(`.${a}__preview-time`);s&&(s.textContent=this.formatTimeString(this.hours,this.minutes,this.seconds,this.period));const n=t.querySelector(`.${a}__dropdown-actions db-button`);n&&(n.textContent=i("선택"));const o=t.querySelectorAll(`.${a}__modal-footer db-button`);o[0]&&(o[0].textContent=i("취소")),o[1]&&(o[1].textContent=i("적용"))}}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 o.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 normalizedSize(){return d(this.getAttribute("size"),r,"m")}get dropdownPosition(){return d(this.getAttribute("dropdown-position"),h,"auto")}get itemHeight(){return"s"===this.normalizedSize?32:"l"===this.normalizedSize?40:28}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=`${a}__label`,this.triggerEl=document.createElement("div"),this.triggerEl.className=`${a}__trigger`;const t=document.createElement("button");t.type="button",t.className=`${a}__icon-display`,t.setAttribute("aria-label",i("시간 선택 열기")),t.addEventListener("click",()=>this.toggleOpen()),this.inputEl=document.createElement("input"),this.inputEl.type="text",this.inputEl.className=`${a}__input`,this.inputEl.setAttribute("aria-label",i("시간 입력")),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=`${a}__toggle`,e.setAttribute("aria-label",i("시간 선택 열기")),e.addEventListener("click",()=>this.toggleOpen()),this.triggerEl.append(t,this.inputEl,e),this.dropdownEl=document.createElement("div"),this.dropdownEl.className=`${a}__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,s,n){const o=n||this.period,r=i("AM"===o?"오전":"오후");return this.is12h?`${r} ${this.pad2(t)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(s)}`:""}`:`${this.pad2(t)}:${this.pad2(e)}${this.showSeconds?`:${this.pad2(s)}`:""}`}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){if(!this.isOpen)return;const e=t.target;this.contains(e)||this.dropdownEl?.contains(e)||this.closePicker()}handleViewportChange(){this.isOpen&&"dropdown"===this.type&&null===this.viewportChangeFrame&&(this.viewportChangeFrame=requestAnimationFrame(()=>{this.viewportChangeFrame=null,this.isOpen&&"dropdown"===this.type&&this.positionDropdown()}))}positionDropdown(){if(!this.isOpen||"dropdown"!==this.type||!this.triggerEl||!this.dropdownEl||this.dropdownEl.hidden)return;const t=this.dropdownEl,e=this.triggerEl.getBoundingClientRect();t.style.width="";const i=t.getBoundingClientRect(),s=Math.max(0,window.innerWidth-16),n=Math.min(i.width,s);t.style.width=`${Math.round(n)}px`;const o=this.dropdownPosition,r=e.bottom+4+i.height<=window.innerHeight-8,h=e.top-4-i.height>=8,d="auto"===o?r||!h?"bottom":"top":o.startsWith("top")?"top":"bottom",a="auto"===o?e.left+n>window.innerWidth-8?"end":"start":o.endsWith("end")?"end":"start",l="end"===a?e.right-n:e.left,u=Math.max(8,Math.min(l,window.innerWidth-n-8)),c="top"===d?e.top-i.height-4:e.bottom+4,p=Math.max(8,Math.min(c,window.innerHeight-i.height-8));t.style.left=`${Math.round(u)}px`,t.style.top=`${Math.round(p)}px`,t.dataset.placement=`${d}-${a}`}createWheel(t){const{label:e,items:i,value:s,onChange:n,formatter:o}=t,r=document.createElement("div");r.className=`${a}__wheel-container`;const h=document.createElement("div");h.className=`${a}__wheel-label`,h.textContent=e,r.appendChild(h);const d=document.createElement("div");d.className=`${a}__wheel-viewport`;const l=document.createElement("div");l.className=`${a}__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=t*this.itemHeight;c=!0,l.scrollTo({top:i,behavior:e?"smooth":"auto"}),window.setTimeout(()=>{c=!1},150)},fmt=t=>o?o(t):"number"==typeof t?this.pad2(t):String(t);i.forEach(t=>{const e=document.createElement("div");e.className=[`${a}__wheel-item`,t===s&&`${a}__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&&n(t)}),l.appendChild(e)});const handleScroll=()=>{c||(u&&window.clearTimeout(u),u=window.setTimeout(()=>{const t=l.scrollTop,e=Math.round(t/this.itemHeight),o=Math.max(0,Math.min(i.length-1,e)),r=i[o];scrollToIndex(o,!0),r!==s&&n(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 w=indexOfValue(s);w>=0&&requestAnimationFrame(()=>scrollToIndex(w,!1));const g=document.createElement("div");g.className=`${a}__wheel-center-indicator`,g.setAttribute("aria-hidden","true");const E=document.createElement("div");E.className=`${a}__wheel-fade wheel-fade--top`,E.setAttribute("aria-hidden","true");const v=document.createElement("div");return v.className=`${a}__wheel-fade wheel-fade--bottom`,v.setAttribute("aria-hidden","true"),d.append(l,g,E,v),r.appendChild(d),r}renderSelector(t=!1){const e=document.createElement("div");e.className=`${a}__selector`;const n=document.createElement("div");n.className=`${a}__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=t?this.tempHours:this.hours,l=t?this.tempMinutes:this.minutes,u=t?this.tempSeconds:this.seconds,c=t?this.tempPeriod:this.period,onChange=(e,i,s,n)=>{if(t)return this.tempHours=e,this.tempMinutes=i,this.tempSeconds=s,void(this.tempPeriod=n);this.handleTimeChange(e,i,s,n)};if(n.appendChild(this.createWheel({label:i("시간"),items:o,value:d,onChange:t=>onChange(t,l,u,c)})),n.appendChild(this.createWheel({label:i("분"),items:r,value:r.includes(l)?l:r[0],onChange:t=>onChange(d,t,u,c)})),this.showSeconds&&n.appendChild(this.createWheel({label:i("초"),items:h,value:u,onChange:t=>onChange(d,l,t,c)})),this.is12h&&n.appendChild(this.createWheel({label:i("오전/오후"),items:["AM","PM"],value:c,onChange:t=>onChange(d,l,u,t),formatter:t=>i("AM"===t?"오전":"오후")})),e.appendChild(n),t)return e;const p=document.createElement("div");p.className=`${a}__dropdown-actions`;const m=document.createElement("div");m.className=`${a}__preview`,m.setAttribute("aria-live","polite"),m.appendChild(s("clock",16));const b=document.createElement("div");b.className=`${a}__preview-time`,b.textContent=this.formatTimeString(d,l,u,c),m.appendChild(b);const w=document.createElement("db-button");return w.setAttribute("variant","primary"),w.setAttribute("size","m"),w.textContent=i("선택"),w.addEventListener("click",()=>{this.handleTimeChange(d,l,u,c),this.closePicker()}),p.append(m,w),e.appendChild(p),e}render(){const e=this.normalizedSize,o=this.dropdownPosition,r=n(e);if(this.className=[a,`${a}--${e}`,this.hasAttribute("full-width")&&`${a}--full-width`,this.disabled&&`${a}--disabled`,this.readonly&&`${a}--readonly`,this.isOpen&&`${a}--open`,this.hasAttribute("error")&&`${a}--error`].filter(Boolean).join(" "),this.inputEl?.setAttribute("aria-invalid",String(this.hasAttribute("error"))),this.dropdownEl?.parentElement===document.body&&this.dropdownEl.remove(),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(`.${a}__icon-display`);d&&(d.innerHTML="",d.appendChild(s("clock",r)),d.disabled=this.disabled);const l=this.triggerEl.querySelector(`.${a}__toggle`);if(l&&(l.innerHTML="",l.appendChild(s("chevron-down",r)),l.disabled=this.disabled),this.dropdownEl.className=[`${a}__dropdown`,`${a}__dropdown--${e}`,`${a}__dropdown--${o}`].filter(Boolean).join(" "),this.dropdownEl.setAttribute("aria-label",i("시간 선택")),this.dropdownEl.hidden=!this.isOpen,this.isOpen&&"dropdown"===this.type&&(this.dropdownEl.replaceChildren(this.renderSelector(!1)),t(this,this.dropdownEl),document.body.appendChild(this.dropdownEl),this.dropdownEl.hidden=!1,this.positionDropdown(),requestAnimationFrame(()=>this.positionDropdown())),this.append(this.labelEl,this.triggerEl),this.isOpen&&"modal"===this.type){const t=document.createElement("db-modal");t.setAttribute("open","true"),t.setAttribute("title",i("시간 선택")),t.setAttribute("size","s"),t.addEventListener("db-close",()=>this.closePicker());const e=this.renderSelector(!0),s=document.createElement("div");s.className=`${a}__modal-footer`;const n=document.createElement("db-button");n.setAttribute("variant","secondary"),n.setAttribute("size","m"),n.textContent=i("취소"),n.addEventListener("click",()=>this.closePicker());const o=document.createElement("db-button");o.setAttribute("variant","primary"),o.setAttribute("size","m"),o.textContent=i("적용"),o.addEventListener("click",()=>{this.handleTimeChange(this.tempHours,this.tempMinutes,this.tempSeconds,this.tempPeriod),this.closePicker()}),s.append(n,o),t.append(e,s),this.appendChild(t)}}}customElements.get("db-time-picker")||customElements.define("db-time-picker",DbTimePicker);export{DbTimePicker};

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

@@ -10,13 +10,17 @@ type DbTimelineItem = {
     disabled?: boolean;
 };
 declare class DbTimeline extends HTMLElement {
+    private unsubscribeLocale?;
     static get observedAttributes(): string[];
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(): void;
     get items(): DbTimelineItem[];
     set items(value: DbTimelineItem[] | string);
     private getItemPosition;
     private handleItemClick;
+    private itemLabel;
+    private syncLocale;
     private render;
 }
 declare global {

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

@@ -1 +1 @@
-import{isDbIconName as e,createDbIcon as t}from"./db-icons.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TIMELINE_VARIANTS as n,TIMELINE_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const a="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 l=this.getAttribute("type")||"alternate",c=i(this.getAttribute("variant"),n,"default"),d=i(this.getAttribute("size"),s,"m"),o=this.getAttribute("color")||"primary",r=this.hasAttribute("clickable"),m=this.hasAttribute("disabled"),b=this.items;this.className=[a,`${a}--${l}`,`${a}--${c}`,`${a}--${d}`,r&&`${a}--clickable`,this.hasAttribute("full-width")&&`${a}--full-width`,m&&`${a}--disabled`].filter(Boolean).join(" "),this.replaceChildren();const u=document.createElement("div");u.className=`${a}__container`,b.forEach((i,n)=>{const s=this.getItemPosition(n),l=n===b.length-1,p=r&&!m&&!i.disabled,_=r&&(m||Boolean(i.disabled)),h=i.color||o,$=i.status||"pending",v=document.createElement("div");v.className=[`${a}__item`,`${a}__item--${s}`,`${a}__item--${h}`,p&&`${a}__item--clickable`,i.disabled&&`${a}__item--disabled`].filter(Boolean).join(" ");const f=document.createElement("div");if(f.className=`${a}__indicator-container`,"active"===$&&!i.icon&&void 0===i.number){const e=document.createElement("div");e.className=`${a}__pulse`,f.append(e)}const k=document.createElement("div");if(k.className=[`${a}__dot`,`${a}__dot--${h}`,`${a}__dot--${c}`,`${a}__dot--${$}`,p&&`${a}__dot--clickable`,i.icon&&`${a}__dot--with-icon`,void 0!==i.number&&!i.icon&&`${a}__dot--with-number`].filter(Boolean).join(" "),_&&(k.setAttribute("role","button"),k.setAttribute("aria-disabled","true")),p&&(k.tabIndex=0,k.setAttribute("role","button"),k.setAttribute("aria-label",i.title?`${i.title} 타임라인 점`:`타임라인 점 ${n+1}`),k.addEventListener("click",()=>this.handleItemClick(i,n)),k.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleItemClick(i,n))})),i.icon&&e(i.icon)){const e=document.createElement("div");e.className=`${a}__icon`,e.append(t(i.icon,"s"===d?14:"l"===d?20:16)),k.append(e)}else if(void 0!==i.number){const e=document.createElement("span");e.className=`${a}__number`,e.textContent=String(i.number),k.append(e)}if(f.append(k),!l){const e=document.createElement("div");e.className=`${a}__connector`,f.append(e)}const E=document.createElement("div");if(E.className=[`${a}__content`,`${a}__content--${s}`].join(" "),i.timestamp){const e=document.createElement("div");e.className=`${a}__timestamp`,e.textContent=i.timestamp,E.append(e)}const g=document.createElement("div");if(g.className=`${a}__content-inner`,_&&(g.setAttribute("role","button"),g.setAttribute("aria-disabled","true")),p&&(g.tabIndex=0,g.setAttribute("role","button"),g.setAttribute("aria-label",i.title?`${i.title} 타임라인 아이템`:`타임라인 아이템 ${n+1}`),g.addEventListener("click",()=>this.handleItemClick(i,n)),g.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleItemClick(i,n))})),i.title){const e=document.createElement("h3");e.className=`${a}__title`,e.textContent=i.title,g.append(e)}if(i.description){const e=document.createElement("p");e.className=`${a}__description`,e.textContent=i.description,g.append(e)}E.append(g),v.append(f,E),u.append(v)}),this.append(u)}}customElements.get("db-timeline")||customElements.define("db-timeline",DbTimeline);export{DbTimeline};
+import{subscribeDbLocale as e,dbFormat as t}from"../core/i18n.js";import{isDbIconName as i,createDbIcon as n}from"./db-icons.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TIMELINE_VARIANTS as a,TIMELINE_SIZES as l}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const c="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(),this.unsubscribeLocale?.(),this.unsubscribeLocale=e(()=>this.syncLocale())}disconnectedCallback(){this.unsubscribeLocale?.(),this.unsubscribeLocale=void 0}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}}))}itemLabel(e,i,n){const s="dot"===n?e.title?"{0} 타임라인 점":"타임라인 점 {0}":e.title?"{0} 타임라인 아이템":"타임라인 아이템 {0}";return t(s,[e.title||i+1])}syncLocale(){const e=this.items;this.querySelectorAll("[data-locale-timeline-index]").forEach(t=>{const i=Number(t.dataset.localeTimelineIndex);e[i]&&t.setAttribute("aria-label",this.itemLabel(e[i],i,"dot"===t.dataset.localeTimelineKind?"dot":"item"))})}render(){const e=this.getAttribute("type")||"alternate",t=s(this.getAttribute("variant"),a,"default"),o=s(this.getAttribute("size"),l,"m"),d=this.getAttribute("color")||"primary",r=this.hasAttribute("clickable"),m=this.hasAttribute("disabled"),b=this.items;this.className=[c,`${c}--${e}`,`${c}--${t}`,`${c}--${o}`,r&&`${c}--clickable`,this.hasAttribute("full-width")&&`${c}--full-width`,m&&`${c}--disabled`].filter(Boolean).join(" "),this.replaceChildren();const u=document.createElement("div");u.className=`${c}__container`,b.forEach((e,s)=>{const a=this.getItemPosition(s),l=s===b.length-1,h=r&&!m&&!e.disabled,p=r&&(m||Boolean(e.disabled)),_=e.color||d,$=e.status||"pending",f=document.createElement("div");f.className=[`${c}__item`,`${c}__item--${a}`,`${c}__item--${_}`,h&&`${c}__item--clickable`,e.disabled&&`${c}__item--disabled`].filter(Boolean).join(" ");const v=document.createElement("div");if(v.className=`${c}__indicator-container`,"active"===$&&!e.icon&&void 0===e.number){const e=document.createElement("div");e.className=`${c}__pulse`,v.append(e)}const k=document.createElement("div");if(k.className=[`${c}__dot`,`${c}__dot--${_}`,`${c}__dot--${t}`,`${c}__dot--${$}`,h&&`${c}__dot--clickable`,e.icon&&`${c}__dot--with-icon`,void 0!==e.number&&!e.icon&&`${c}__dot--with-number`].filter(Boolean).join(" "),p&&(k.setAttribute("role","button"),k.setAttribute("aria-disabled","true")),h&&(k.tabIndex=0,k.setAttribute("role","button"),k.dataset.localeTimelineIndex=String(s),k.dataset.localeTimelineKind="dot",k.setAttribute("aria-label",this.itemLabel(e,s,"dot")),k.addEventListener("click",()=>this.handleItemClick(e,s)),k.addEventListener("keydown",t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleItemClick(e,s))})),e.icon&&i(e.icon)){const t=document.createElement("div");t.className=`${c}__icon`,t.append(n(e.icon,"s"===o?14:"l"===o?20:16)),k.append(t)}else if(void 0!==e.number){const t=document.createElement("span");t.className=`${c}__number`,t.textContent=String(e.number),k.append(t)}if(v.append(k),!l){const e=document.createElement("div");e.className=`${c}__connector`,v.append(e)}const E=document.createElement("div");if(E.className=[`${c}__content`,`${c}__content--${a}`].join(" "),e.timestamp){const t=document.createElement("div");t.className=`${c}__timestamp`,t.textContent=e.timestamp,E.append(t)}const g=document.createElement("div");if(g.className=`${c}__content-inner`,p&&(g.setAttribute("role","button"),g.setAttribute("aria-disabled","true")),h&&(g.dataset.localeTimelineIndex=String(s),g.dataset.localeTimelineKind="item",g.tabIndex=0,g.setAttribute("role","button"),g.setAttribute("aria-label",this.itemLabel(e,s,"item")),g.addEventListener("click",()=>this.handleItemClick(e,s)),g.addEventListener("keydown",t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleItemClick(e,s))})),e.title){const t=document.createElement("h3");t.className=`${c}__title`,t.textContent=e.title,g.append(t)}if(e.description){const t=document.createElement("p");t.className=`${c}__description`,t.textContent=e.description,g.append(t)}E.append(g),f.append(v,E),u.append(f)}),this.append(u)}}customElements.get("db-timeline")||customElements.define("db-timeline",DbTimeline);export{DbTimeline};

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

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

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

@@ -1 +1 @@
-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{coerceToContract as r}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TOAST_VARIANTS as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.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=r(this.getAttribute("variant"),a,"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};
+import{createDbIcon as t}from"./db-icons.js";import{politenessForTone as e}from"../core/a11y.js";import{subscribeDbLocale as s,labelFrom as i}from"../core/i18n.js";import{CleanupBag as a}from"../core/dom.js";import{coerceToContract as o}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TOAST_VARIANTS as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbToast extends HTMLElement{constructor(){super(...arguments),this.timeoutId=null,this.progressInterval=null,this.closeTimerId=null,this.closed=!1,this.cleanups=new a,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","label-close"]}connectedCallback(){this.closed=!1,this.elapsedBeforePause=0,this.render(),this.unsubscribeLocale?.(),this.unsubscribeLocale=s(()=>this.syncCloseLabel()),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.unsubscribeLocale?.(),this.unsubscribeLocale=void 0,this.cleanups.run(),this.clearTimers(),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=null}attributeChangedCallback(t){if(!this.isConnected||this.closed)return;if("label-close"===t)return void this.syncCloseLabel();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())}syncCloseLabel(){this.querySelector(".designbase-wc-toast__close-button")?.setAttribute("aria-label",i(this,"label-close","toast.close"))}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),a=Math.min(100,i/t*100);e&&(e.style.width=`${a}%`),a>=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 s=o(this.getAttribute("variant"),r,"info"),a=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--${s}`,this.closed&&"designbase-wc-toast--closing"].filter(Boolean).join(" ");const d=e(s);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--${s}`,h.setAttribute("aria-hidden","true"),h.append(t(this.iconForVariant(s),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=a,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",i(this,"label-close","toast.close"));const s=t("close",20);s.setAttribute("aria-hidden","true"),e.append(s),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

@@ -4,26 +4,55 @@ declare class DbToggle extends HTMLElement {
     private readonly internals;
     private root?;
     private labelEl?;
+    private readonly labelContent;
     private built;
-    /** default-checked 는 초기값일 뿐 — 한 번 조작하면 checked/selected 만 본다 */
-    private userInteracted;
+    private dirty;
+    private resetChecked?;
+    private awaitingInitial;
+    private formDisabled;
     get checked(): boolean;
     set checked(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    get defaultSelected(): boolean;
+    set defaultSelected(value: boolean);
     get name(): string;
     set name(value: string);
+    get label(): string;
+    set label(value: string);
+    get value(): string;
+    set value(value: string);
     get disabled(): boolean;
     set disabled(value: boolean);
     get readOnly(): boolean;
     set readOnly(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get hasLabel(): boolean;
+    set hasLabel(value: boolean);
     get size(): string;
     set size(value: string);
     get variant(): string;
     set variant(value: string);
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    focus(options?: FocusOptions): void;
+    private get unavailable();
+    private captureFirstChecked;
+    private setPristineChecked;
     connectedCallback(): void;
-    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    formAssociatedCallback(): void;
     formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     formDisabledCallback(disabled: boolean): void;
-    private get hasLabel();
     private syncFormValue;
     private build;
     private handleClick;

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

@@ -1 +1 @@
-import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TOGGLE_VARIANTS as e,TOGGLE_SIZES as s}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","variant","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)}get variant(){return t(this.getAttribute("variant"),e,"default")}set variant(t){this.setAttribute("variant",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 t=s.includes(this.size)?this.size:"m",e=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim()),i=this.checked;this.root.className=["designbase-wc-toggle",`designbase-wc-toggle--${t}`,`designbase-wc-toggle--${this.variant}`,i&&"designbase-wc-toggle--selected",this.disabled&&"designbase-wc-toggle--disabled",this.readOnly&&"designbase-wc-toggle--readonly",!e&&"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{ControlLabel as t}from"../core/control-label.js";import{t as e}from"../core/i18n.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{TOGGLE_SIZES as s,TOGGLE_VARIANTS as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbToggle extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.labelContent=new t(this),this.built=!1,this.dirty=!1,this.awaitingInitial=!1,this.formDisabled=!1,this.handleClick=()=>{if(this.unavailable||this.readOnly)return;const t=!this.checked;this.awaitingInitial=!1,this.checked=t,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","variant","disabled","readonly","has-label","name","value","label","required","aria-label","aria-labelledby","aria-describedby","aria-description","aria-invalid","tabindex"]}get checked(){return this.hasAttribute("checked")||this.hasAttribute("selected")||!this.dirty&&this.defaultChecked}set checked(t){this.captureFirstChecked(Boolean(t)),this.dirty=!0,this.removeAttribute("selected"),this.toggleAttribute("checked",Boolean(t)),this.syncState()}get selected(){return this.checked}set selected(t){this.checked=t}get defaultChecked(){return this.hasAttribute("default-checked")||this.hasAttribute("default-selected")||(this.resetChecked??!1)}set defaultChecked(t){this.awaitingInitial=!1,this.resetChecked=Boolean(t),this.removeAttribute("default-selected"),this.toggleAttribute("default-checked",Boolean(t)),this.dirty||this.setPristineChecked(Boolean(t)),this.syncState()}get defaultSelected(){return this.defaultChecked}set defaultSelected(t){this.defaultChecked=t}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get label(){return this.labelContent.value}set label(t){this.setAttribute("label",t)}get value(){return this.getAttribute("value")??"on"}set value(t){this.setAttribute("value",t)}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))}get required(){return this.hasAttribute("required")}set required(t){this.toggleAttribute("required",Boolean(t))}get hasLabel(){return"false"!==this.getAttribute("has-label")}set hasLabel(t){this.setAttribute("has-label",String(Boolean(t)))}get size(){return i(this.getAttribute("size"),s,"m")}set size(t){this.setAttribute("size",t)}get variant(){return i(this.getAttribute("variant"),a,"default")}set variant(t){this.setAttribute("variant",t)}get form(){return this.internals.form}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}focus(t){this.root?.focus(t)}get unavailable(){return this.disabled||this.formDisabled}captureFirstChecked(t){this.awaitingInitial&&(this.awaitingInitial=!1,this.hasAttribute("default-checked")||this.hasAttribute("default-selected")||(this.resetChecked=t))}setPristineChecked(t){this.removeAttribute("selected"),this.toggleAttribute("checked",t),this.dirty=!1}connectedCallback(){for(const t of["defaultChecked","defaultSelected","checked","selected","name","value","label","disabled","readOnly","required","hasLabel","size","variant"]){if(!Object.prototype.hasOwnProperty.call(this,t))continue;const e=this,i=e[t];delete e[t],e[t]=i}void 0===this.resetChecked&&(this.resetChecked=this.hasAttribute("default-checked")||this.hasAttribute("default-selected")||this.hasAttribute("checked")||this.hasAttribute("selected"),this.awaitingInitial=!["checked","selected","default-checked","default-selected"].some(t=>this.hasAttribute(t))),this.style.display||(this.style.display="contents"),this.built||this.build(),this.labelContent.connect(this.labelEl,()=>this.syncState()),this.syncState()}disconnectedCallback(){this.labelContent.disconnect()}attributeChangedCallback(t){"checked"!==t&&"selected"!==t||(this.captureFirstChecked(this.hasAttribute("checked")||this.hasAttribute("selected")),this.built&&(this.dirty=!0)),"default-checked"!==t&&"default-selected"!==t||(this.resetChecked=this.hasAttribute("default-checked")||this.hasAttribute("default-selected"),this.awaitingInitial=!1,this.built&&!this.dirty&&this.setPristineChecked(this.resetChecked)),this.built&&this.syncState()}formAssociatedCallback(){this.syncFormValue()}formResetCallback(){this.awaitingInitial=!1,this.setPristineChecked(this.defaultChecked),this.syncState()}formStateRestoreCallback(t){"string"==typeof t&&(this.awaitingInitial=!1,this.checked="true"===t)}formDisabledCallback(t){this.formDisabled=t,this.syncState()}syncFormValue(){const t=this.checked;this.internals.setFormValue(t&&!this.unavailable&&this.name?this.value:null,String(t));const i=this.required&&!this.unavailable&&!this.readOnly&&!t;this.internals.setValidity(i?{valueMissing:!0}:{},i?e("required"):"",this.root)}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(){if(!this.root)return;this.labelContent.sync(),this.root.disabled=this.unavailable;const t=this.getAttribute("tabindex");this.root.tabIndex=this.unavailable?-1:null!==t&&/^-?\d+$/.test(t)?Number(t):0,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");for(const t of["aria-label","aria-labelledby","aria-describedby","aria-description","aria-invalid"]){const e=this.getAttribute(t);null!==e?this.root.setAttribute(t,e):this.root.removeAttribute(t)}this.hasLabel||this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby")||!this.label.trim()||this.root.setAttribute("aria-label",this.label.trim()),this.required?this.root.setAttribute("aria-required","true"):this.root.removeAttribute("aria-required"),this.syncFormValue(),this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncClasses()}syncClasses(){if(!this.root)return;const t=s.includes(this.size)?this.size:"m",e=this.hasLabel&&Boolean(this.label.trim()),i=this.checked;this.root.className=["designbase-wc-toggle",`designbase-wc-toggle--${t}`,`designbase-wc-toggle--${this.variant}`,i&&"designbase-wc-toggle--selected",this.unavailable&&"designbase-wc-toggle--disabled",this.readOnly&&"designbase-wc-toggle--readonly",!e&&"designbase-wc-toggle--no-label"].filter(Boolean).join(" "),this.root.removeAttribute("aria-pressed")}}DbToggle.formAssociated=!0,customElements.get("db-toggle")||customElements.define("db-toggle",DbToggle);export{DbToggle};

package/dist/esm/components/db-tool-layout.d.ts

@@ -0,0 +1,92 @@
+declare const TOOL_LAYOUT_VARIANTS: readonly ["floating", "flush", "inset"];
+type ToolLayoutVariant = (typeof TOOL_LAYOUT_VARIANTS)[number];
+type ToolLayoutPanel = 'sidebar' | 'inspector' | 'bottom';
+interface ToolLayoutSizes {
+    sidebar?: number;
+    inspector?: number;
+    bottom?: number;
+}
+interface ToolLayoutResizeDetail {
+    panel: ToolLayoutPanel;
+    size: number;
+    sizes: ToolLayoutSizes;
+    phase: 'change' | 'end' | 'cancel';
+}
+/** Content-free desktop utility shell. One direct child per named slot; main is required.
+ * Children stay in place so framework state, focus and event listeners survive layout changes.
+ * CSS sizing hooks: --db-tool-rail-width, --db-tool-sidebar-width,
+ * --db-tool-inspector-width, --db-tool-bottom-height, --db-tool-gap, --db-tool-radius.
+ */
+declare class DbToolLayout extends HTMLElement {
+    static get observedAttributes(): string[];
+    private mutations?;
+    private resize?;
+    private width;
+    private height;
+    private effective;
+    private handles;
+    private frame;
+    private lateralBudget;
+    private bottomCapacity;
+    private unsubscribe?;
+    private drag?;
+    get resizable(): boolean;
+    set resizable(value: boolean);
+    get sidebarHidden(): boolean;
+    set sidebarHidden(value: boolean);
+    get inspectorHidden(): boolean;
+    set inspectorHidden(value: boolean);
+    get bottomHidden(): boolean;
+    set bottomHidden(value: boolean);
+    get sidebarMin(): number;
+    set sidebarMin(value: number);
+    get sidebarMax(): number;
+    set sidebarMax(value: number);
+    get inspectorMin(): number;
+    set inspectorMin(value: number);
+    get inspectorMax(): number;
+    set inspectorMax(value: number);
+    get bottomMin(): number;
+    set bottomMin(value: number);
+    get bottomMax(): number;
+    set bottomMax(value: number);
+    get mainMinSize(): number;
+    set mainMinSize(value: number);
+    get panelSizes(): ToolLayoutSizes;
+    set panelSizes(value: ToolLayoutSizes | string);
+    get sizes(): Required<ToolLayoutSizes>;
+    setPanelOpen(panel: ToolLayoutPanel, open: boolean): void;
+    togglePanel(panel: ToolLayoutPanel): void;
+    private number;
+    private bounds;
+    private panelElement;
+    private onClose;
+    private scheduleHandles;
+    private computeSizes;
+    private limit;
+    private resizePanel;
+    private startResize;
+    private moveResize;
+    private endResize;
+    private cancelResize;
+    private finishResize;
+    private keyResize;
+    private ensureHandles;
+    private positionHandles;
+    get variant(): ToolLayoutVariant;
+    set variant(value: ToolLayoutVariant);
+    get fullHeight(): boolean;
+    set fullHeight(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-tool-layout': DbToolLayout;
+    }
+}
+
+export { DbToolLayout, TOOL_LAYOUT_VARIANTS };
+export type { ToolLayoutPanel, ToolLayoutResizeDetail, ToolLayoutSizes, ToolLayoutVariant };

package/dist/esm/components/db-tool-layout.js

@@ -0,0 +1 @@
+import{t,subscribeDbLocale as e}from"../core/i18n.js";const i=["floating","flush","inset"],s=["sidebar","inspector","bottom"],n={sidebar:{min:160,max:320},inspector:{min:200,max:360},bottom:{min:96,max:280}},a=["header","rail","sidebar","main","inspector","bottom","status"];class DbToolLayout extends HTMLElement{constructor(){super(...arguments),this.width=1280,this.height=0,this.effective={sidebar:320,inspector:360,bottom:280},this.handles=new Map,this.frame=0,this.lateralBudget=1/0,this.bottomCapacity=1/0,this.onClose=t=>{const e=t.target,i=e.getAttribute("slot");e.parentElement===this&&s.includes(i)&&(t.stopPropagation(),this.setPanelOpen(i,!1))},this.scheduleHandles=()=>{cancelAnimationFrame(this.frame),this.frame=requestAnimationFrame(()=>this.positionHandles())},this.moveResize=t=>{const e=this.drag;if(!e||t.pointerId!==e.pointer)return;const i=("bottom"===e.panel?t.clientY:t.clientX)-e.origin;this.resizePanel(e.panel,e.size+i*("sidebar"===e.panel?1:-1))},this.endResize=t=>{this.drag&&t.pointerId===this.drag.pointer&&this.finishResize(!1)},this.cancelResize=t=>{this.drag?.pointer===t.pointerId&&this.finishResize(!0)}}static get observedAttributes(){return["variant","full-height","resizable","panel-sizes","sidebar-hidden","inspector-hidden","bottom-hidden","sidebar-min","sidebar-max","inspector-min","inspector-max","bottom-min","bottom-max","main-min-size"]}get resizable(){return"false"!==this.getAttribute("resizable")}set resizable(t){this.setAttribute("resizable",String(t))}get sidebarHidden(){return this.hasAttribute("sidebar-hidden")}set sidebarHidden(t){this.toggleAttribute("sidebar-hidden",t)}get inspectorHidden(){return this.hasAttribute("inspector-hidden")}set inspectorHidden(t){this.toggleAttribute("inspector-hidden",t)}get bottomHidden(){return this.hasAttribute("bottom-hidden")}set bottomHidden(t){this.toggleAttribute("bottom-hidden",t)}get sidebarMin(){return this.bounds("sidebar").min}set sidebarMin(t){this.setAttribute("sidebar-min",String(t))}get sidebarMax(){return this.bounds("sidebar").max}set sidebarMax(t){this.setAttribute("sidebar-max",String(t))}get inspectorMin(){return this.bounds("inspector").min}set inspectorMin(t){this.setAttribute("inspector-min",String(t))}get inspectorMax(){return this.bounds("inspector").max}set inspectorMax(t){this.setAttribute("inspector-max",String(t))}get bottomMin(){return this.bounds("bottom").min}set bottomMin(t){this.setAttribute("bottom-min",String(t))}get bottomMax(){return this.bounds("bottom").max}set bottomMax(t){this.setAttribute("bottom-max",String(t))}get mainMinSize(){return this.number("main-min-size",280)}set mainMinSize(t){this.setAttribute("main-min-size",String(t))}get panelSizes(){try{const t=JSON.parse(this.getAttribute("panel-sizes")||"{}");return t&&"object"==typeof t?Object.fromEntries(s.filter(e=>"number"==typeof t[e]&&Number.isFinite(t[e])).map(e=>[e,t[e]])):{}}catch{return{}}}set panelSizes(t){this.setAttribute("panel-sizes","string"==typeof t?t:JSON.stringify(t))}get sizes(){return{...this.effective}}setPanelOpen(t,e){if(!s.includes(t))return;const i=this.panelElement(t),n=!e&&i?.contains(document.activeElement);if(this.toggleAttribute(`${t}-hidden`,!e),n){const e=this.querySelector(`[data-tool-toggle="${t}"]`),i=e||this.panelElement("main");i&&(e||i.hasAttribute("tabindex")||(i.tabIndex=-1),i.focus({preventScroll:!0}))}this.dispatchEvent(new CustomEvent("db-panel-toggle",{bubbles:!0,composed:!0,detail:{panel:t,open:e}}))}togglePanel(t){this.setPanelOpen(t,this.hasAttribute(`${t}-hidden`))}number(t,e){const i=Number(this.getAttribute(t));return this.hasAttribute(t)&&Number.isFinite(i)?Math.max(0,Math.min(4096,i)):e}bounds(t){const e=this.number(`${t}-min`,n[t].min);return{min:e,max:Math.max(e,this.number(`${t}-max`,n[t].max))}}panelElement(t){return Array.from(this.children).find(e=>e.getAttribute("slot")===t)}computeSizes(t,e){const i=this.panelSizes;for(const t of s){const e=this.bounds(t),s=this.style.getPropertyValue("--db-tool-"+("bottom"===t?"bottom-height":t+"-width")).trim().match(/^(\d+(?:\.\d+)?)(?:px)?$/),n=s?Number(s[1]):e.max;this.effective[t]=Math.max(e.min,Math.min(e.max,i[t]??n))}const n=getComputedStyle(this),a=1+(t("rail")?1:0)+(t("sidebar")&&"mobile"!==e?1:0)+(t("inspector")&&"desktop"===e?1:0),o=Math.max(0,this.width-parseFloat(n.paddingLeft||"0")-parseFloat(n.paddingRight||"0")-(parseFloat(n.columnGap)||0)*(a-1)-(t("rail")?parseFloat(n.getPropertyValue("--db-tool-rail-width"))||56:0)),r=s.filter(i=>"bottom"!==i&&t(i)&&("sidebar"===i?"mobile"!==e:"desktop"===e)),h=Math.max(0,o-Math.min(this.mainMinSize,o));this.lateralBudget=h,this.bottomCapacity=1/0;let l=r.reduce((t,e)=>t+this.effective[e],0)-h;for(const t of r){const e=Math.min(Math.max(0,l),Math.max(0,this.effective[t]-this.bounds(t).min));this.effective[t]-=e,l-=e}if(l>0){const t=r.reduce((t,e)=>t+this.effective[e],0);for(const e of r)this.effective[e]*=h/(t||1)}if(this.fullHeight&&t("bottom")){const t=["header","status"].reduce((t,e)=>t+(this.panelElement(e)?.getBoundingClientRect().height||0),0),e=Math.max(0,this.clientHeight-t-220-parseFloat(n.paddingTop||"0")-parseFloat(n.paddingBottom||"0")-3*(parseFloat(n.rowGap)||0));this.bottomCapacity=e,this.effective.bottom=Math.min(this.effective.bottom,e)}}limit(t){const e=this.bounds(t),i="sidebar"===t?"inspector":"sidebar",s=this.hasAttribute(`data-has-${i}`)&&("sidebar"===i?"mobile"!==this.dataset.size:"desktop"===this.dataset.size),n="bottom"===t?this.bottomCapacity:Math.max(0,this.lateralBudget-(s?this.effective[i]:0)),a=Math.min(e.max,n);return{min:Math.min(e.min,a),max:a}}resizePanel(t,e,i="change"){const{min:s,max:n}=this.limit(t);this.panelSizes={...this.panelSizes,[t]:Math.round(Math.max(s,Math.min(n,e)))},this.dispatchEvent(new CustomEvent("db-panel-resize",{bubbles:!0,composed:!0,detail:{panel:t,size:this.effective[t],sizes:this.sizes,phase:i}}))}startResize(t,e,i){0!==t.button||this.drag||(t.preventDefault(),i.focus({preventScroll:!0}),this.drag={panel:e,handle:i,pointer:t.pointerId,origin:"bottom"===e?t.clientY:t.clientX,size:this.effective[e],before:this.panelSizes},i.setPointerCapture(t.pointerId),this.dataset.resizing=e)}finishResize(t){const e=this.drag;e&&(this.drag=void 0,delete this.dataset.resizing,t&&(this.panelSizes=e.before),e.handle.hasPointerCapture(e.pointer)&&e.handle.releasePointerCapture(e.pointer),this.dispatchEvent(new CustomEvent("db-panel-resize",{bubbles:!0,composed:!0,detail:{panel:e.panel,size:this.effective[e.panel],sizes:this.sizes,phase:t?"cancel":"end"}})))}keyResize(t,e){if("Escape"===t.key&&this.drag)return void this.finishResize(!0);const i=this.limit(e);let s;"Home"===t.key&&(s=i.min),"End"===t.key&&(s=i.max);const n=t.shiftKey?32:8;if("bottom"===e)"ArrowUp"===t.key&&(s=this.effective[e]+n),"ArrowDown"===t.key&&(s=this.effective[e]-n);else{const i="sidebar"===e?1:-1;"ArrowRight"===t.key&&(s=this.effective[e]+n*i),"ArrowLeft"===t.key&&(s=this.effective[e]-n*i)}void 0!==s&&(t.preventDefault(),this.resizePanel(e,s,"end"))}ensureHandles(){for(const t of s){if(this.handles.has(t))continue;const e=document.createElement("div");e.className="designbase-wc-tool-layout__handle",e.dataset.panel=t,e.setAttribute("role","separator"),e.tabIndex=0,e.setAttribute("aria-orientation","bottom"===t?"horizontal":"vertical"),e.addEventListener("pointerdown",i=>this.startResize(i,t,e)),e.addEventListener("pointermove",this.moveResize),e.addEventListener("pointerup",this.endResize),e.addEventListener("pointercancel",this.cancelResize),e.addEventListener("lostpointercapture",this.cancelResize),e.addEventListener("keydown",e=>this.keyResize(e,t)),e.addEventListener("dblclick",()=>this.resizePanel(t,this.limit(t).max,"end")),this.handles.set(t,e),this.append(e)}}positionHandles(){const e=this.getBoundingClientRect(),i=parseFloat(getComputedStyle(this).columnGap)||0;for(const n of s){const s=this.handles.get(n),a=this.panelElement(n),o=!!a&&!a.hidden&&!this.hasAttribute(`${n}-hidden`)&&this.resizable&&("bottom"===n||("sidebar"===n?"mobile"!==this.dataset.size:"desktop"===this.dataset.size));if(s.hidden=!o,!o)continue;const r=a.getBoundingClientRect();s.setAttribute("aria-label",t(`toolLayout.resize.${n}`));const h=this.limit(n);s.setAttribute("aria-valuemin",String(Math.min(h.min,this.effective[n]))),s.setAttribute("aria-valuemax",String(h.max)),s.setAttribute("aria-valuenow",String(Math.round(this.effective[n]))),a.id&&s.setAttribute("aria-controls",a.id),Object.assign(s.style,"bottom"===n?{left:`${r.left-e.left+this.scrollLeft}px`,top:r.top-e.top+this.scrollTop-i/2-4+"px",width:`${r.width}px`,height:"8px"}:{left:("sidebar"===n?r.right+i/2:r.left-i/2)-e.left+this.scrollLeft-4+"px",top:`${r.top-e.top+this.scrollTop}px`,width:"8px",height:`${r.height}px`})}}get variant(){const t=this.getAttribute("variant");return i.includes(t)?t:"floating"}set variant(t){this.setAttribute("variant",t)}get fullHeight(){return this.hasAttribute("full-height")}set fullHeight(t){this.toggleAttribute("full-height",t)}connectedCallback(){this.classList.add("designbase-wc-tool-layout"),this.ensureHandles(),this.addEventListener("db-close",this.onClose),this.addEventListener("scroll",this.scheduleHandles),this.unsubscribe=e(this.scheduleHandles),this.width=this.getBoundingClientRect().width||1280,this.sync(),this.mutations=new MutationObserver(t=>{t.some(t=>t.target===this||t.target.parentElement===this)&&this.sync()}),this.mutations.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["slot","hidden"]}),this.resize=new ResizeObserver(t=>{const e=t.find(t=>t.target===this),i=e?.borderBoxSize?.[0]?.inlineSize??this.getBoundingClientRect().width,s=e?.borderBoxSize?.[0]?.blockSize??this.getBoundingClientRect().height;i!==this.width||this.fullHeight&&s!==this.height?(this.width=i,this.height=s,this.sync()):this.scheduleHandles()}),this.resize.observe(this);for(const t of this.children)t.hasAttribute("slot")&&this.resize.observe(t)}disconnectedCallback(){this.mutations?.disconnect(),this.resize?.disconnect(),this.unsubscribe?.(),cancelAnimationFrame(this.frame),this.finishResize(!0),this.removeEventListener("db-close",this.onClose),this.removeEventListener("scroll",this.scheduleHandles)}attributeChangedCallback(){this.isConnected&&this.sync()}sync(){this.dataset.variant=this.variant,!this.drag||this.resizable&&this.panelElement(this.drag.panel)&&!this.hasAttribute(`${this.drag.panel}-hidden`)&&!this.panelElement(this.drag.panel)?.hidden||this.finishResize(!0);for(const t of s)this.panelElement(t)?.toggleAttribute("data-tool-hidden",this.hasAttribute(`${t}-hidden`));const t=new Set(Array.from(this.children).filter(t=>!t.hasAttribute("hidden")&&!t.hasAttribute("data-tool-hidden")).map(t=>t.getAttribute("slot"))),has=e=>t.has(e),e=this.width<768?"mobile":this.width<1024?"tablet":"desktop";this.computeSizes(has,e);const i=[...has("rail")?["var(--db-tool-rail-width, 56px)"]:[],...has("sidebar")&&"mobile"!==e?[`minmax(0, ${this.effective.sidebar}px)`]:[],"minmax(0, 1fr)",...has("inspector")&&"desktop"===e?[`minmax(0, ${this.effective.inspector}px)`]:[]],n=[...has("rail")?["rail"]:[],...has("sidebar")&&"mobile"!==e?["sidebar"]:[],"main",...has("inspector")&&"desktop"===e?["inspector"]:[]],o=[],r=[],row=(t,e,s=!1)=>{o.push(i.map((e,i)=>s&&has("rail")&&0===i?"rail":t)),r.push(e)};has("header")&&row("header","auto"),o.push(n),r.push("minmax(220px, 1fr)"),has("sidebar")&&"mobile"===e&&row("sidebar","auto",!0),has("inspector")&&"desktop"!==e&&row("inspector","auto",!0),has("bottom")&&row("bottom",`${this.effective.bottom}px`,!0),has("status")&&row("status","auto"),this.style.setProperty("--db-tool-columns",i.join(" ")),this.style.setProperty("--db-tool-areas",o.map(t=>`"${t.join(" ")}"`).join(" ")),this.style.setProperty("--db-tool-rows",r.join(" "));const h=o.filter(t=>!t.includes("header")&&!t.includes("status")),l=h[0].filter(t=>"rail"!==t),d=h[h.length-1].filter(t=>"rail"!==t);for(const t of Array.from(this.children)){const e=t.getAttribute("slot");if(!e||"rail"===e||"header"===e||"status"===e)continue;const i=[l[0]===e&&"top-left",l[l.length-1]===e&&"top-right",d[0]===e&&"bottom-left",d[d.length-1]===e&&"bottom-right"].filter(Boolean).join(" ");t.getAttribute("data-tool-corners")!==i&&t.setAttribute("data-tool-corners",i)}this.dataset.size=e,this.dataset.variant=this.variant;for(const t of a)this.toggleAttribute(`data-has-${t}`,has(t));this.scheduleHandles()}}customElements.get("db-tool-layout")||customElements.define("db-tool-layout",DbToolLayout);export{DbToolLayout,i as TOOL_LAYOUT_VARIANTS};