@designbasekorea/ui-wc 0.8.13 → 0.9.2

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

@@ -0,0 +1 @@
+import{dbFormat as t,dbText as e}from"../core/i18n.js";import{DbElement as i}from"../core/base-element.js";import{createDbIcon as s}from"./db-icons.js";import"./db-badge.js";import{nodeStyle as n}from"./node-style.js";const o=["default","compact"],r=["idle","running","success","error"],a=new Set(["any","text","image","number","boolean"]),typeLabels=()=>({any:e("일반"),text:e("텍스트"),image:e("이미지"),number:e("숫자"),boolean:e("조건")}),d={idle:"대기",running:"실행 중",success:"완료",error:"오류"};class DbNode extends i{constructor(){super(...arguments),this.root=this.attachShadow({mode:"open"}),this.inputPorts=[],this.outputPorts=[],this.portsDirty=!0,this.drag=null,this.portDrag=null,this.suppressPortClick=!1}static get observedAttributes(){return["node-id","heading","description","icon","variant","status","selected","collapsed","disabled","movable","runnable","collapsible","inputs","outputs","detail","deletable"]}get inputs(){return this.inputPorts.map(t=>({...t}))}set inputs(t){const e=this.normalizePorts(t);JSON.stringify(e)!==JSON.stringify(this.inputPorts)&&(this.inputPorts=e,this.portsDirty=!0,this.sync())}get outputs(){return this.outputPorts.map(t=>({...t}))}set outputs(t){const e=this.normalizePorts(t);JSON.stringify(e)!==JSON.stringify(this.outputPorts)&&(this.outputPorts=e,this.portsDirty=!0,this.sync())}getPortElement(t,e){const i="input"===e?this.inputList:this.outputList;return[...i?.querySelectorAll("button")||[]].find(e=>e.dataset.portId===t)||null}connectedCallback(){this.root.childElementCount||this.build(),this.upgradeProperties(["inputs","outputs"]);for(const t of["inputs","outputs"])this.hasAttribute(t)&&this.readPorts(t);this.sync()}disconnectedCallback(){this.finishDrag("end"),this.cancelPortDrag(),super.disconnectedCallback()}attributeChangedCallback(t){"inputs"!==t&&"outputs"!==t||this.readPorts(t),"disabled"===t&&this.hasAttribute("disabled")&&(this.finishDrag("end"),this.cancelPortDrag()),this.sync()}normalizePorts(t){if(!Array.isArray(t))return[];const e=new Set;return t.filter(t=>t&&"string"==typeof t.id&&t.id&&"string"==typeof t.label&&!e.has(t.id)&&e.add(t.id)).map(t=>({id:t.id,label:t.label,type:a.has(t.type)?t.type:"any",connected:!!t.connected,disabled:!!t.disabled}))}readPorts(t){let e=[];try{e=JSON.parse(this.getAttribute(t)||"[]")}catch{}"inputs"===t?this.inputPorts=this.normalizePorts(e):this.outputPorts=this.normalizePorts(e),this.portsDirty=!0}nodeId(){return this.getAttribute("node-id")||this.id}el(t,e){const i=document.createElement(t);return i.className=e,i}action(t,e){const i=this.el("button","action");return i.type="button",i.setAttribute("aria-label",t),i.title=t,i.append(s(e,16)),i}build(){const t=document.createElement("style");t.textContent=n;const e=this.el("article","frame");e.part.add("frame");const i=this.el("header","header");i.part.add("header"),this.headingButton=this.el("button","heading"),this.headingButton.type="button",this.iconBox=this.el("span","icon"),this.iconBox.setAttribute("aria-hidden","true"),this.titleEl=this.el("span","title"),this.headingButton.append(this.iconBox,this.titleEl),this.statusEl=this.el("span","status"),this.statusEl.setAttribute("role","status"),this.statusBadge=document.createElement("db-badge"),this.statusBadge.setAttribute("size","s"),this.statusBadge.setAttribute("type","outlined"),this.statusEl.append(this.statusBadge);const s=this.el("div","actions"),o=document.createElement("slot");o.name="actions",this.runButton=this.action("노드 실행","play-outline"),this.runButton.classList.add("action--run"),this.collapseButton=this.action("노드 접기","chevron-up"),this.deleteButton=this.action("노드 삭제","close"),this.deleteButton.addEventListener("click",()=>this.dbEmit("delete",{nodeId:this.nodeId()},{cancelable:!0})),s.append(o,this.runButton,this.collapseButton,this.deleteButton),i.append(this.headingButton,this.statusEl,s),this.descriptionEl=this.el("p","description"),this.inputList=this.el("div","ports ports--input"),this.inputList.part.add("inputs"),this.outputList=this.el("div","ports ports--output"),this.outputList.part.add("outputs"),this.body=this.el("div","body"),this.body.part.add("body"),this.body.append(document.createElement("slot")),this.footer=this.el("footer","footer");const r=document.createElement("slot");r.name="footer",this.footer.append(r);this.root.addEventListener("slotchange",()=>{this.body.hidden=this.hasAttribute("collapsed")||!this.body.querySelector("slot").assignedNodes({flatten:!0}).some(t=>1===t.nodeType||!!t.textContent?.trim()),this.footer.hidden=this.hasAttribute("collapsed")||!r.assignedNodes({flatten:!0}).length}),e.append(i,this.descriptionEl,this.inputList,this.body,this.outputList,this.footer),this.root.append(t,e);const isEditor=t=>t.composedPath().some(t=>t instanceof HTMLElement&&(t.isContentEditable||t.matches("input, textarea, db-input, db-textarea, db-markdown-editor")));this.addEventListener("selectstart",t=>{isEditor(t)||t.preventDefault()}),this.addEventListener("dragstart",t=>{isEditor(t)||t.preventDefault()}),this.headingButton.addEventListener("click",()=>{this.hasAttribute("disabled")||this.dbEmit("select",{nodeId:this.nodeId()})}),this.collapseButton.addEventListener("click",()=>{const t=!this.hasAttribute("collapsed");this.toggleAttribute("collapsed",t),this.dbEmit("collapse",{nodeId:this.nodeId(),collapsed:t})}),this.runButton.addEventListener("click",()=>this.dbEmit("run",{nodeId:this.nodeId()},{cancelable:!0})),this.headingButton.addEventListener("pointerdown",t=>{this.hasAttribute("movable")&&!this.hasAttribute("disabled")&&0===t.button&&(this.drag={id:t.pointerId,x:t.clientX,y:t.clientY,lastX:t.clientX,lastY:t.clientY},this.headingButton.setPointerCapture(t.pointerId),this.emitMove("start",0,0))}),this.headingButton.addEventListener("pointermove",t=>{this.drag?.id===t.pointerId&&(this.drag.lastX=t.clientX,this.drag.lastY=t.clientY,this.emitMove("move",t.clientX-this.drag.x,t.clientY-this.drag.y))}),this.headingButton.addEventListener("pointerup",t=>{this.drag?.id===t.pointerId&&(this.drag.lastX=t.clientX,this.drag.lastY=t.clientY,this.finishDrag("end"))}),this.headingButton.addEventListener("pointercancel",()=>this.finishDrag("end")),this.headingButton.addEventListener("lostpointercapture",()=>this.finishDrag("end")),this.headingButton.addEventListener("keydown",t=>{if("Escape"===t.key&&this.drag)return void this.finishDrag("cancel");if(!this.hasAttribute("movable")||this.hasAttribute("disabled"))return;const e={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]};if(e[t.key]){t.preventDefault();const[i,s]=e[t.key],n=t.shiftKey?4:16;this.emitMove("keyboard",i*n,s*n)}})}emitMove(t,e,i){this.dbEmit("move",{nodeId:this.nodeId(),deltaX:e,deltaY:i,phase:t})}finishDrag(t){const e=this.drag;e&&(this.drag=null,this.emitMove(t,"cancel"===t?0:e.lastX-e.x,"cancel"===t?0:e.lastY-e.y),this.headingButton.hasPointerCapture(e.id)&&this.headingButton.releasePointerCapture(e.id))}renderPorts(i,s,n){const o=this.root.activeElement,r=o&&i.contains(o)?o.dataset.portId:void 0;this.cancelPortDrag(),i.replaceChildren(),i.hidden=!s.length;for(const o of s){const s=this.el("div","port-row");s.dataset.type=o.type||"any";const r=this.el("button","port");r.type="button",r.part.add("port"),r.dataset.portId=o.id,r.dataset.direction=n,r.disabled=this.hasAttribute("disabled")||!!o.disabled,r.dataset.connected=String(!!o.connected),r.setAttribute("aria-label",t("{0} · {1} · {2}",[e("input"===n?"입력":"출력"),o.label,typeLabels()[o.type||"any"]])),r.setAttribute("aria-pressed",String(!!o.connected));const a=this.el("span","port-dot");r.append(a);const d=this.el("span","port-label");d.textContent=o.label;const h=this.el("span","port-type");h.textContent=typeLabels()[o.type||"any"];const l={nodeId:this.nodeId(),portId:o.id,direction:n,type:o.type||"any"};r.addEventListener("click",()=>{this.suppressPortClick||this.dbEmit("port-select",l)}),r.addEventListener("pointerdown",t=>{0!==t.button||r.disabled||(this.portDrag={id:t.pointerId,button:r,port:l,x:t.clientX,y:t.clientY,moved:!1},this.suppressPortClick=!1,r.setPointerCapture(t.pointerId))}),r.addEventListener("pointermove",t=>{const e=this.portDrag;e&&e.id===t.pointerId&&(!e.moved&&Math.hypot(t.clientX-e.x,t.clientY-e.y)>=4&&(e.moved=!0,this.suppressPortClick=!0,this.emitPortDrag("start",e.x,e.y)),e.moved&&this.emitPortDrag("move",t.clientX,t.clientY))}),r.addEventListener("pointerup",t=>{this.portDrag?.id===t.pointerId&&(this.portDrag.moved&&this.emitPortDrag("end",t.clientX,t.clientY),this.portDrag=null,r.hasPointerCapture(t.pointerId)&&r.releasePointerCapture(t.pointerId),setTimeout(()=>{this.suppressPortClick=!1},0))}),r.addEventListener("pointercancel",()=>this.cancelPortDrag()),r.addEventListener("lostpointercapture",()=>this.cancelPortDrag()),r.addEventListener("keydown",t=>{"Escape"===t.key&&this.cancelPortDrag()}),s.append(r,d,h),i.append(s)}r&&this.getPortElement(r,n)?.focus({preventScroll:!0})}emitPortDrag(t,e,i){this.portDrag&&this.dbEmit("port-drag",{...this.portDrag.port,phase:t,clientX:e,clientY:i})}cancelPortDrag(){const t=this.portDrag;t&&(t.moved&&this.emitPortDrag("cancel",t.x,t.y),this.portDrag=null,t.button.hasPointerCapture(t.id)&&t.button.releasePointerCapture(t.id))}sync(){if(!this.headingButton)return;const t=this.hasAttribute("disabled"),e=this.hasAttribute("collapsed");this.setAttribute("aria-disabled",String(t)),this.root.querySelector(".frame").inert=t,this.dataset.variant=o.includes(this.getAttribute("variant"))?this.getAttribute("variant"):"default";const i=r.find(t=>t===this.getAttribute("status"))||"idle";this.dataset.status=i,this.titleEl.textContent=this.getAttribute("heading")||"새 노드",this.headingButton.disabled=t,this.headingButton.setAttribute("aria-pressed",String(this.hasAttribute("selected"))),this.headingButton.title=this.hasAttribute("movable")?"드래그 또는 방향키로 이동":"노드 선택";const n=this.getAttribute("icon");if(this.iconBox.hidden=!n,n?this.iconBox.replaceChildren(s(n,16)):this.iconBox.replaceChildren(),this.descriptionEl.textContent=this.getAttribute("description")||"",this.descriptionEl.hidden=e||!this.descriptionEl.textContent,this.statusBadge.textContent=d[i],this.statusBadge.setAttribute("variant","error"===i?"danger":"success"===i?"success":"info"),this.statusEl.hidden="idle"===i,this.collapseButton.hidden=!this.hasAttribute("collapsible"),this.collapseButton.disabled=t,this.collapseButton.setAttribute("aria-expanded",String(!e)),this.collapseButton.setAttribute("aria-label",e?"노드 펼치기":"노드 접기"),this.collapseButton.title=e?"노드 펼치기":"노드 접기",this.collapseButton.replaceChildren(s(e?"chevron-down":"chevron-up",16)),this.deleteButton.hidden=!this.hasAttribute("deletable"),this.deleteButton.disabled=t,this.runButton.hidden=!this.hasAttribute("runnable"),this.runButton.disabled=t||"running"===i,this.body.hidden=e||!this.body.querySelector("slot").assignedNodes({flatten:!0}).some(t=>1===t.nodeType||!!t.textContent?.trim()),this.footer.hidden=e||!this.footer.querySelector("slot").assignedNodes({flatten:!0}).length,this.portsDirty)this.renderPorts(this.inputList,this.inputPorts,"input"),this.renderPorts(this.outputList,this.outputPorts,"output"),this.portsDirty=!1;else for(const e of[this.inputList,this.outputList])for(const i of e.querySelectorAll("button")){const s=e===this.inputList?this.inputPorts:this.outputPorts;i.disabled=t||!!s.find(t=>t.id===i.dataset.portId)?.disabled}}}customElements.get("db-node")||customElements.define("db-node",DbNode);export{DbNode,r as NODE_STATUSES,o as NODE_VARIANTS};

package/dist/esm/components/db-notification-dropdown.d.ts

@@ -0,0 +1,30 @@
+import { DbElement } from '../core/base-element.js';
+import { DbNotificationItem } from '../core/notification-ui.js';
+import './db-badge.js';
+import './db-notification-inbox.js';
+
+/** Header wrapper around the same controlled inbox. Native Popover preserves listeners and focus. */
+declare class DbNotificationDropdown extends DbElement {
+    private trigger?;
+    private panel?;
+    private inbox?;
+    private itemData;
+    private readonly panelId;
+    static get observedAttributes(): string[];
+    get notifications(): DbNotificationItem[];
+    set notifications(value: DbNotificationItem[]);
+    get open(): boolean;
+    set open(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private sync;
+    private position;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-notification-dropdown': DbNotificationDropdown;
+    }
+}
+
+export { DbNotificationDropdown };

package/dist/esm/components/db-notification-dropdown.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{creditAction as i,creditNumber as e}from"../core/credit-ui.js";import{parseNotifications as n}from"../core/notification-ui.js";import{dbUid as s}from"../core/uid.js";import{t as o}from"../core/i18n.js";import{createDbIcon as a}from"./db-icons.js";import"./db-badge.js";import"./db-notification-inbox.js";class DbNotificationDropdown extends t{constructor(){super(...arguments),this.itemData=[],this.panelId=s("notification-dropdown")}static get observedAttributes(){return["open","label","unread-count","loading","pending","error","disabled"]}get notifications(){return this.itemData.map(t=>({...t}))}set notifications(t){this.itemData=n(t),this.isConnected&&this.sync()}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){this.toggleAttribute("open",t)}connectedCallback(){this.upgradeProperties(["notifications","open"]),this.panel||(this.classList.add("designbase-wc-notification-dropdown"),this.trigger=i("notification-toggle","",!1),this.trigger.setAttribute("aria-haspopup","dialog"),this.trigger.setAttribute("aria-controls",this.panelId),this.panel=document.createElement("div"),this.panel.id=this.panelId,this.panel.popover="auto",this.panel.className="designbase-wc-notification-dropdown__panel",this.panel.setAttribute("role","dialog"),this.panel.setAttribute("aria-modal","false"),this.inbox=document.createElement("db-notification-inbox"),this.panel.append(this.inbox),this.append(this.trigger,this.panel)),this.cleanups.listen(this.trigger,"db-click",()=>{this.hasAttribute("disabled")||(this.open=!this.open)}),this.cleanups.listen(this.trigger,"keydown",t=>{"ArrowDown"!==t.key||this.hasAttribute("disabled")||(t.preventDefault(),this.open=!0)}),this.cleanups.listen(this.panel,"toggle",()=>{const t=this.panel.matches(":popover-open");t!==this.open&&this.toggleAttribute("open",t),this.trigger.setAttribute("aria-expanded",String(t)),this.dbEmit("open-change",{open:t})}),this.cleanups.listen(this.inbox,"db-notification-open",()=>{this.open=!1,this.trigger?.focus()}),this.cleanups.listen(document,"focusin",t=>{this.open&&t.target instanceof Node&&!this.contains(t.target)&&(this.open=!1)}),this.cleanups.listen(window,"resize",()=>this.position()),this.cleanups.listen(window,"scroll",()=>this.position(),{capture:!0,passive:!0}),this.sync()}disconnectedCallback(){this.panel?.matches(":popover-open")&&this.panel.hidePopover(),super.disconnectedCallback()}attributeChangedCallback(){this.isConnected&&this.sync()}sync(){if(!this.trigger||!this.panel||!this.inbox)return;const t=this.getAttribute("label")||o("notification.title"),i=this.hasAttribute("unread-count")?e(this.getAttribute("unread-count")):this.itemData.filter(t=>t.unread).length;if(this.trigger.replaceChildren(a("bell-active",18)),null===i||i>0){const t=document.createElement("db-badge");t.setAttribute("variant","primary"),t.setAttribute("type",null===i?"text":"number"),t.setAttribute("size","s"),null===i?t.textContent="—":t.setAttribute("count",String(i)),t.setAttribute("aria-hidden","true"),this.trigger.append(t)}this.trigger.setAttribute("aria-label",`${t} · ${o("notification.unread")} ${null===i?o("notification.countUnknown"):i}`),this.trigger.setAttribute("aria-expanded",String(this.open)),this.trigger.toggleAttribute("disabled",this.hasAttribute("disabled")),this.panel.setAttribute("aria-label",t),this.inbox.notifications=this.itemData;for(const t of["label","loading","pending","error","disabled"]){const i=this.getAttribute(t);null===i?this.inbox.removeAttribute(t):this.inbox.getAttribute(t)!==i&&this.inbox.setAttribute(t,i)}this.open&&!this.hasAttribute("disabled")?this.panel.matches(":popover-open")||(this.panel.showPopover(),this.position(),this.inbox.querySelector("db-button:not([disabled])")?.focus()):this.panel.matches(":popover-open")&&this.panel.hidePopover(),this.position()}position(){if(!this.panel?.matches(":popover-open")||!this.trigger)return;const t=this.trigger.getBoundingClientRect();this.panel.style.left=`${Math.max(8,Math.min(t.right-this.panel.offsetWidth,innerWidth-this.panel.offsetWidth-8))}px`,this.panel.style.top=`${Math.max(8,Math.min(t.bottom+8,innerHeight-this.panel.offsetHeight-8))}px`}}customElements.get("db-notification-dropdown")||customElements.define("db-notification-dropdown",DbNotificationDropdown);export{DbNotificationDropdown};

package/dist/esm/components/db-notification-inbox.d.ts

@@ -0,0 +1,25 @@
+import { DbElement } from '../core/base-element.js';
+import { DbNotificationItem } from '../core/notification-ui.js';
+export { DbNotificationAction, DbNotificationReadAll } from '../core/notification-ui.js';
+import './db-button.js';
+
+/** Controlled data, local filter. The app confirms read state; opening never marks an item read implicitly. */
+declare class DbNotificationInbox extends DbElement {
+    private itemData;
+    private filter;
+    private restoreFocus;
+    static get observedAttributes(): string[];
+    get notifications(): DbNotificationItem[];
+    set notifications(value: DbNotificationItem[]);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private blocked;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-notification-inbox': DbNotificationInbox;
+    }
+}
+
+export { DbNotificationInbox, DbNotificationItem };

package/dist/esm/components/db-notification-inbox.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{textNode as i,creditAction as e,replaceView as n}from"../core/credit-ui.js";import{parseNotifications as a}from"../core/notification-ui.js";import{t as o}from"../core/i18n.js";import"./db-button.js";class DbNotificationInbox extends t{constructor(){super(...arguments),this.itemData=[],this.filter="all",this.restoreFocus=!1}static get observedAttributes(){return["label","loading","pending","error","disabled"]}get notifications(){return this.itemData.map(t=>({...t}))}set notifications(t){this.itemData=a(t),this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["notifications"]),this.cleanups.listen(this,"db-click",t=>{if(!(t.target instanceof HTMLElement)||this.blocked())return;const i=t.target.dataset.action;if("notification-filter:all"===i||"notification-filter:unread"===i)return this.filter=i.endsWith(":unread")?"unread":"all",void this.render();if("notification-retry"===i)return void this.dbEmit("retry");if(this.hasAttribute("error"))return;if("notification-read-all"===i){const t=this.itemData.filter(t=>t.unread).map(t=>t.id);t.length&&(this.restoreFocus=!0,this.dbEmit("read-all",{ids:t}))}const e=t.target.dataset.notificationId,n=this.itemData.find(t=>t.id===e);n&&(i===`notification-open:${n.id}`&&this.dbEmit("notification-open",{id:n.id}),i===`notification-read:${n.id}`&&n.unread&&(this.restoreFocus=!0,this.dbEmit("read",{id:n.id})))}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}blocked(){return this.hasAttribute("disabled")||this.hasAttribute("loading")||this.hasAttribute("pending")}render(){const t="designbase-wc-notification-inbox";this.classList.add(t),this.setAttribute("aria-busy",String(this.hasAttribute("loading")||this.hasAttribute("pending")));const a=this.contains(document.activeElement),s=i("h3",`${t}__title`,this.getAttribute("label")||o("notification.title"));s.tabIndex=-1,s.dataset.action="notification-heading";const r=i("div",`${t}__controls`,"");r.setAttribute("aria-label",o("notification.filters"));for(const t of["all","unread"]){const i=e(`notification-filter:${t}`,o(`notification.${t}`),this.blocked());i.setAttribute("aria-pressed",String(this.filter===t)),i.setAttribute("variant",this.filter===t?"primary":"tertiary"),r.append(i)}const c=e("notification-read-all",o("notification.readAll"),this.blocked()||this.hasAttribute("error")||!this.itemData.some(t=>t.unread));c.setAttribute("variant","tertiary"),r.append(c);const d=[s,r],l=this.getAttribute("error");if(l){const n=i("p",`${t}__message`,l);n.setAttribute("role","alert"),d.push(n,e("notification-retry",o("notification.retry"),this.blocked()))}if(this.hasAttribute("loading")){const e=i("p",`${t}__message`,o("loading"));e.setAttribute("role","status"),d.push(e)}else{const n=this.itemData.filter(t=>"all"===this.filter||t.unread);if(n.length){const a=i("ul",`${t}__list`,"");for(const s of n){const n=i("li",`${t}__item`,"");n.dataset.unread=String(s.unread);const r=i("div",`${t}__meta`,"");s.unread&&r.append(i("span",`${t}__unread`,o("notification.unread"))),s.categoryLabel&&r.append(i("span","",s.categoryLabel)),r.append(i("span","",s.dateLabel));const c=e(`notification-open:${s.id}`,s.title,this.blocked()||!!l);if(c.dataset.notificationId=s.id,c.classList.add(`${t}__open`),c.setAttribute("variant","ghost"),n.append(r,c,i("p",`${t}__description`,s.description)),s.unread){const t=e(`notification-read:${s.id}`,o("notification.markRead"),this.blocked()||!!l);t.dataset.notificationId=s.id,t.setAttribute("variant","tertiary"),n.append(t)}a.append(n)}d.push(a)}else{const e=i("p",`${t}__empty`,o("unread"===this.filter?"notification.caughtUp":"notification.empty"));e.setAttribute("role","status"),d.push(e)}}const h=this.restoreFocus&&this.checkVisibility()&&(document.activeElement===document.body||this.contains(document.activeElement));if(n(this,...d),h||a&&!this.contains(document.activeElement)){const t=this.blocked()?"notification-heading":`notification-filter:${this.filter}`;this.querySelector(`[data-action="${t}"]`)?.focus()}this.restoreFocus=!1}}customElements.get("db-notification-inbox")||customElements.define("db-notification-inbox",DbNotificationInbox);export{DbNotificationInbox};

package/dist/esm/components/db-onboarding-modal.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{createFocusTrap as e}from"../core/focus-trap.js";import{lockScroll as i,unlockScroll as s}from"../core/scroll-lock.js";class DbOnboardingModal extends HTMLElement{constructor(){super(...arguments),this.scrollLocked=!1,this.internalStep=0,this.keyHandler=null,this.isMounted=!1,this.handlePrev=()=>{this.getCurrentStep()>0&&this.goToStep(this.getCurrentStep()-1)},this.handleNext=()=>{const t=this.getSteps(),e=this.getCurrentStep();e>=t.length-1?this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0})):this.goToStep(e+1)}}static get observedAttributes(){return["open","steps","current-step","show-close-button","show-indicator","indicator-type","indicator-size"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}get steps(){return this.parseSteps()}set steps(t){const e="string"==typeof t?t:JSON.stringify(t);this.getAttribute("steps")!==e&&this.setAttribute("steps",e)}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState()}disconnectedCallback(){this.detachKeyHandler(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),"steps"!==t?this.isMounted&&this.render():this.isOpenRequested()&&(this.isMounted?this.render():this.syncOpenState())):this.syncOpenState())}isOpenRequested(){return this.open}parseSteps(){const t=this.getAttribute("steps");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}syncStepFromAttribute(){if(!this.hasAttribute("current-step"))return;const t=Number(this.getAttribute("current-step")||0);Number.isFinite(t)&&(this.internalStep=Math.max(0,t))}getSteps(){return this.parseSteps()}getCurrentStep(){const t=this.getSteps();return t.length?Math.min(Math.max(this.internalStep,0),t.length-1):0}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.getSteps();if(!e.length)return;const i=Math.min(Math.max(t,0),e.length-1);this.internalStep=i,this.emitStepChange(i),this.render()}attachKeyHandler(){this.keyHandler||(this.keyHandler=t=>{"Escape"!==t.key?"ArrowLeft"===t.key&&this.getCurrentStep()>0?this.handlePrev():"ArrowRight"===t.key&&this.getCurrentStep()<this.getSteps().length-1&&this.handleNext():this.close()},document.addEventListener("keydown",this.keyHandler))}detachKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachKeyHandler();this.detachKeyHandler(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-onboarding-modal",this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.tabIndex=-1,this.ensureStructure()),this.root.isConnected||document.body.append(this.root),this.isMounted=!0,this.render(),this.scrollLocked||(i(),this.scrollLocked=!0),this.root&&!this.focusTrap&&(this.focusTrap=e(this.root),requestAnimationFrame(()=>this.focusTrap?.activate()))}unmount(){this.isMounted=!1,this.focusTrap?.deactivate(),this.focusTrap=void 0,this.root?.remove(),this.scrollLocked&&(this.scrollLocked=!1,s())}ensureStructure(){this.root&&(this.contentEl&&this.root.contains(this.contentEl)||(this.overlayEl=void 0,this.contentEl=void 0,this.closeButtonEl=void 0,this.mainEl=void 0,this.imageWrapEl=void 0,this.imageEl=void 0,this.textEl=void 0,this.titleEl=void 0,this.descriptionEl=void 0,this.navigationEl=void 0,this.prevButtonEl=void 0,this.nextButtonEl=void 0,this.indicatorEl=void 0,this.root.replaceChildren(),this.overlayEl=document.createElement("div"),this.overlayEl.className="designbase-wc-onboarding-modal__overlay",this.overlayEl.addEventListener("click",()=>this.close()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-onboarding-modal__content",this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className="designbase-wc-onboarding-modal__close-button",this.closeButtonEl.setAttribute("aria-label","닫기"),this.closeButtonEl.append(t("close",20)),this.closeButtonEl.addEventListener("click",()=>this.close()),this.mainEl=document.createElement("div"),this.mainEl.className="designbase-wc-onboarding-modal__main",this.imageWrapEl=document.createElement("div"),this.imageWrapEl.className="designbase-wc-onboarding-modal__image",this.imageEl=document.createElement("img"),this.imageWrapEl.append(this.imageEl),this.textEl=document.createElement("div"),this.textEl.className="designbase-wc-onboarding-modal__text",this.titleEl=document.createElement("h2"),this.titleEl.id="onboarding-title",this.titleEl.className="designbase-wc-onboarding-modal__title",this.descriptionEl=document.createElement("p"),this.descriptionEl.id="onboarding-description",this.descriptionEl.className="designbase-wc-onboarding-modal__description",this.textEl.append(this.titleEl,this.descriptionEl),this.mainEl.append(this.imageWrapEl,this.textEl),this.navigationEl=document.createElement("div"),this.navigationEl.className="designbase-wc-onboarding-modal__navigation",this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","m"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.setAttribute("aria-label","이전"),this.prevButtonEl.addEventListener("db-click",this.handlePrev),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;this.goToStep(e.index??e.current)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","m"),this.nextButtonEl.addEventListener("db-click",this.handleNext),this.navigationEl.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),this.contentEl.append(this.closeButtonEl,this.mainEl,this.navigationEl),this.root.append(this.overlayEl,this.contentEl)))}render(){if(!this.root||!this.isMounted)return;this.ensureStructure();const t=this.getSteps(),e=this.getCurrentStep(),i=t[e];if(!i)return;const s=!this.hasAttribute("show-close-button")||"false"!==this.getAttribute("show-close-button"),n=!this.hasAttribute("show-indicator")||"false"!==this.getAttribute("show-indicator"),o=this.getAttribute("indicator-type")||"dots",r=this.getAttribute("indicator-size")||"m",a=0===e,l=e===t.length-1;if(this.root.setAttribute("aria-labelledby","onboarding-title"),this.root.setAttribute("aria-describedby","onboarding-description"),this.closeButtonEl&&(this.closeButtonEl.style.display=s?"":"none"),this.imageWrapEl&&this.imageEl&&(i.image?(this.imageEl.src=i.image,this.imageEl.alt=i.title||"온보딩 이미지",this.imageWrapEl.style.display=""):this.imageWrapEl.style.display="none"),this.titleEl&&(this.titleEl.textContent=i.title||"",this.titleEl.style.display=i.title?"":"none"),this.descriptionEl&&(this.descriptionEl.textContent=i.description||"",this.descriptionEl.style.display=i.description?"":"none"),this.prevButtonEl&&(this.prevButtonEl.textContent="이전",a?this.prevButtonEl.setAttribute("disabled",""):this.prevButtonEl.removeAttribute("disabled")),this.nextButtonEl&&(this.nextButtonEl.textContent=l?"완료":"다음",this.nextButtonEl.setAttribute("aria-label",l?"완료":"다음"),l?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl){const i=n&&t.length>1;this.indicatorEl.style.display=i?"":"none",i&&(this.indicatorEl.setAttribute("total",String(t.length)),this.indicatorEl.setAttribute("current",String(e)),this.indicatorEl.setAttribute("indicator-type",o),this.indicatorEl.setAttribute("size",r),this.indicatorEl.setAttribute("clickable",""))}}}customElements.get("db-onboarding-modal")||customElements.define("db-onboarding-modal",DbOnboardingModal);export{DbOnboardingModal};
+import{dbText as t}from"../core/i18n.js";import{createDbIcon as e}from"./db-icons.js";import{createFocusTrap as i}from"../core/focus-trap.js";import{lockScroll as s,unlockScroll as n}from"../core/scroll-lock.js";class DbOnboardingModal extends HTMLElement{constructor(){super(...arguments),this.scrollLocked=!1,this.internalStep=0,this.keyHandler=null,this.isMounted=!1,this.handlePrev=()=>{this.getCurrentStep()>0&&this.goToStep(this.getCurrentStep()-1)},this.handleNext=()=>{const t=this.getSteps(),e=this.getCurrentStep();e>=t.length-1?this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0})):this.goToStep(e+1)}}static get observedAttributes(){return["open","steps","current-step","show-close-button","show-indicator","indicator-type","indicator-size"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}get steps(){return this.parseSteps()}set steps(t){const e="string"==typeof t?t:JSON.stringify(t);this.getAttribute("steps")!==e&&this.setAttribute("steps",e)}connectedCallback(){this.style.display="contents",this.syncStepFromAttribute(),this.syncOpenState()}disconnectedCallback(){this.detachKeyHandler(),this.unmount()}attributeChangedCallback(t){this.isConnected&&("open"!==t?("current-step"===t&&this.syncStepFromAttribute(),"steps"!==t?this.isMounted&&this.render():this.isOpenRequested()&&(this.isMounted?this.render():this.syncOpenState())):this.syncOpenState())}isOpenRequested(){return this.open}parseSteps(){const t=this.getAttribute("steps");if(!t)return[];try{const e=JSON.parse(t);return Array.isArray(e)?e:[]}catch{return[]}}syncStepFromAttribute(){if(!this.hasAttribute("current-step"))return;const t=Number(this.getAttribute("current-step")||0);Number.isFinite(t)&&(this.internalStep=Math.max(0,t))}getSteps(){return this.parseSteps()}getCurrentStep(){const t=this.getSteps();return t.length?Math.min(Math.max(this.internalStep,0),t.length-1):0}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}emitStepChange(t){this.dispatchEvent(new CustomEvent("db-step-change",{bubbles:!0,composed:!0,detail:{step:t}}))}goToStep(t){const e=this.getSteps();if(!e.length)return;const i=Math.min(Math.max(t,0),e.length-1);this.internalStep=i,this.emitStepChange(i),this.render()}attachKeyHandler(){this.keyHandler||(this.keyHandler=t=>{"Escape"!==t.key?"ArrowLeft"===t.key&&this.getCurrentStep()>0?this.handlePrev():"ArrowRight"===t.key&&this.getCurrentStep()<this.getSteps().length-1&&this.handleNext():this.close()},document.addEventListener("keydown",this.keyHandler))}detachKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}syncOpenState(){if(this.isOpenRequested())return this.mount(),void this.attachKeyHandler();this.detachKeyHandler(),this.unmount()}mount(){this.root||(this.root=document.createElement("div"),this.root.className="designbase-wc-onboarding-modal",this.root.setAttribute("role","dialog"),this.root.setAttribute("aria-modal","true"),this.root.tabIndex=-1,this.ensureStructure()),this.root.isConnected||document.body.append(this.root),this.isMounted=!0,this.render(),this.scrollLocked||(s(),this.scrollLocked=!0),this.root&&!this.focusTrap&&(this.focusTrap=i(this.root),requestAnimationFrame(()=>this.focusTrap?.activate()))}unmount(){this.isMounted=!1,this.focusTrap?.deactivate(),this.focusTrap=void 0,this.root?.remove(),this.scrollLocked&&(this.scrollLocked=!1,n())}ensureStructure(){this.root&&(this.contentEl&&this.root.contains(this.contentEl)||(this.overlayEl=void 0,this.contentEl=void 0,this.closeButtonEl=void 0,this.mainEl=void 0,this.imageWrapEl=void 0,this.imageEl=void 0,this.textEl=void 0,this.titleEl=void 0,this.descriptionEl=void 0,this.navigationEl=void 0,this.prevButtonEl=void 0,this.nextButtonEl=void 0,this.indicatorEl=void 0,this.root.replaceChildren(),this.overlayEl=document.createElement("div"),this.overlayEl.className="designbase-wc-onboarding-modal__overlay",this.overlayEl.addEventListener("click",()=>this.close()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-onboarding-modal__content",this.closeButtonEl=document.createElement("button"),this.closeButtonEl.type="button",this.closeButtonEl.className="designbase-wc-onboarding-modal__close-button",this.closeButtonEl.setAttribute("aria-label",t("닫기")),this.closeButtonEl.append(e("close",20)),this.closeButtonEl.addEventListener("click",()=>this.close()),this.mainEl=document.createElement("div"),this.mainEl.className="designbase-wc-onboarding-modal__main",this.imageWrapEl=document.createElement("div"),this.imageWrapEl.className="designbase-wc-onboarding-modal__image",this.imageEl=document.createElement("img"),this.imageWrapEl.append(this.imageEl),this.textEl=document.createElement("div"),this.textEl.className="designbase-wc-onboarding-modal__text",this.titleEl=document.createElement("h2"),this.titleEl.id="onboarding-title",this.titleEl.className="designbase-wc-onboarding-modal__title",this.descriptionEl=document.createElement("p"),this.descriptionEl.id="onboarding-description",this.descriptionEl.className="designbase-wc-onboarding-modal__description",this.textEl.append(this.titleEl,this.descriptionEl),this.mainEl.append(this.imageWrapEl,this.textEl),this.navigationEl=document.createElement("div"),this.navigationEl.className="designbase-wc-onboarding-modal__navigation",this.prevButtonEl=document.createElement("db-button"),this.prevButtonEl.setAttribute("variant","secondary"),this.prevButtonEl.setAttribute("size","m"),this.prevButtonEl.setAttribute("start-icon","chevron-left"),this.prevButtonEl.setAttribute("aria-label",t("이전")),this.prevButtonEl.addEventListener("db-click",this.handlePrev),this.indicatorEl=document.createElement("db-indicator"),this.indicatorEl.addEventListener("db-step-click",t=>{const e=t.detail;this.goToStep(e.index??e.current)}),this.nextButtonEl=document.createElement("db-button"),this.nextButtonEl.setAttribute("variant","primary"),this.nextButtonEl.setAttribute("size","m"),this.nextButtonEl.addEventListener("db-click",this.handleNext),this.navigationEl.append(this.prevButtonEl,this.indicatorEl,this.nextButtonEl),this.contentEl.append(this.closeButtonEl,this.mainEl,this.navigationEl),this.root.append(this.overlayEl,this.contentEl)))}render(){if(!this.root||!this.isMounted)return;this.ensureStructure();const e=this.getSteps(),i=this.getCurrentStep(),s=e[i];if(!s)return;const n=!this.hasAttribute("show-close-button")||"false"!==this.getAttribute("show-close-button"),o=!this.hasAttribute("show-indicator")||"false"!==this.getAttribute("show-indicator"),r=this.getAttribute("indicator-type")||"dots",a=this.getAttribute("indicator-size")||"m",l=0===i,h=i===e.length-1;if(this.root.setAttribute("aria-labelledby","onboarding-title"),this.root.setAttribute("aria-describedby","onboarding-description"),this.closeButtonEl&&(this.closeButtonEl.style.display=n?"":"none"),this.imageWrapEl&&this.imageEl&&(s.image?(this.imageEl.src=s.image,this.imageEl.alt=s.title||"온보딩 이미지",this.imageWrapEl.style.display=""):this.imageWrapEl.style.display="none"),this.titleEl&&(this.titleEl.textContent=s.title||"",this.titleEl.style.display=s.title?"":"none"),this.descriptionEl&&(this.descriptionEl.textContent=s.description||"",this.descriptionEl.style.display=s.description?"":"none"),this.prevButtonEl&&(this.prevButtonEl.textContent=t("이전"),l?this.prevButtonEl.setAttribute("disabled",""):this.prevButtonEl.removeAttribute("disabled")),this.nextButtonEl&&(this.nextButtonEl.textContent=h?"완료":"다음",this.nextButtonEl.setAttribute("aria-label",h?"완료":"다음"),h?this.nextButtonEl.removeAttribute("end-icon"):this.nextButtonEl.setAttribute("end-icon","chevron-right")),this.indicatorEl){const t=o&&e.length>1;this.indicatorEl.style.display=t?"":"none",t&&(this.indicatorEl.setAttribute("total",String(e.length)),this.indicatorEl.setAttribute("current",String(i)),this.indicatorEl.setAttribute("indicator-type",r),this.indicatorEl.setAttribute("size",a),this.indicatorEl.setAttribute("clickable",""))}}}customElements.get("db-onboarding-modal")||customElements.define("db-onboarding-modal",DbOnboardingModal);export{DbOnboardingModal};

package/dist/esm/components/db-otp-input.d.ts

@@ -1,4 +1,4 @@
-import { OTP_INPUT_SIZES } from '@designbasekorea/ui-contracts';
+import { OTP_INPUT_SIZES } from '../ui-contracts/dist/components.d.js';
 
 /**
  * ui-wc — db-otp-input (수동 작성, 자동 동기화 대상 아님)

package/dist/esm/components/db-otp-input.js

@@ -1 +1 @@
-import{dbUid as t}from"../core/uid.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{OTP_INPUT_SIZES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}class DbOtpInput extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals?.(),this.built=!1,this.digits=[],this.suppressSync=!1,this.initialValue="",this.lastCompleteValue="",this.onDigitFocus=t=>{const e=t.currentTarget;requestAnimationFrame(()=>e.select())},this.onDigitInput=t=>{if(this.suppressSync)return;const e=t.currentTarget,i=Number(e.dataset.index||0),s=e.value.replace(/\D/g,"");if(s.length>1){const t=this.digits.slice(0,i).map(t=>t.value).join("");return void this.applyValue(t+s,Math.min(this.length-1,t.length+s.length))}e.value=s.slice(-1),e.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(e.value));const a=this.digits.map(t=>t.value).join("");this.setAttribute("value",a),this.emit("db-input"),this.emit("db-change"),e.value&&i<this.digits.length-1&&this.focusAt(i+1)},this.onDigitKeydown=t=>{const e=t.currentTarget,i=Number(e.dataset.index||0);if("Backspace"!==t.key)return"ArrowLeft"===t.key?(t.preventDefault(),void this.focusAt(i-1)):"ArrowRight"===t.key?(t.preventDefault(),void this.focusAt(i+1)):void("Delete"===t.key&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change")));if(e.value)e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change");else if(i>0){t.preventDefault(),this.focusAt(i-1);const e=this.digits[i-1];e&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change"))}},this.onPaste=t=>{t.preventDefault();const e=t.clipboardData?.getData("text")||"",i=Number(t.currentTarget.dataset.index||0),s=this.digits.slice(0,i).map(t=>t.value).join("");this.applyValue(s+e,Math.min(this.length-1,s.length+e.replace(/\D/g,"").length))}}static get observedAttributes(){return["length","value","size","disabled","readonly","error","error-message","label","auto-focus","masked","name","required"]}get length(){const t=Number(this.getAttribute("length")||6);return Number.isFinite(t)?Math.min(8,Math.max(4,Math.round(t))):6}set length(t){this.setAttribute("length",String(t))}get value(){return this.digits.map(t=>t.value).join("")||this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}get size(){return e(this.getAttribute("size"),i,"m")}set size(t){this.setAttribute("size",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)}connectedCallback(){this.built||(this.initialValue=this.getAttribute("value")||""),this.build(),this.sync(),this.hasAttribute("auto-focus")&&!this.disabled&&requestAnimationFrame(()=>this.focusFirstEmpty())}attributeChangedCallback(t){this.built&&("length"===t&&(this.built=!1,this.build()),this.sync())}focus(){this.disabled||this.focusFirstEmpty()}clear(){this.suppressSync=!0,this.digits.forEach(t=>{t.value=""}),this.suppressSync=!1,this.lastCompleteValue="",this.setValueAttribute(""),this.emit("db-input"),this.emit("db-change"),this.focusFirstEmpty()}formResetCallback(){this.lastCompleteValue="",this.value=this.initialValue}formDisabledCallback(t){this.toggleAttribute("disabled",t)}build(){this.replaceChildren(),this.digits=[];const e=this.length,i="designbase-wc-otp-input",s=this.getAttribute("label");if(s){const t=el("div",`${i}__label`);t.textContent=s,this.append(t)}const a=el("div",`${i}__row`);a.setAttribute("role","group"),a.setAttribute("aria-label",s||"인증 코드");for(let t=0;t<e;t+=1){const e=el("div",`${i}__cell`),s=document.createElement("input");s.className=`${i}__digit`,s.type=this.hasAttribute("masked")?"password":"text",s.inputMode="numeric",s.autocomplete=0===t?"one-time-code":"off",s.maxLength=1,s.pattern="[0-9]*",s.setAttribute("aria-label",`${t+1}번째 자리`),s.dataset.index=String(t),s.addEventListener("input",this.onDigitInput),s.addEventListener("keydown",this.onDigitKeydown),s.addEventListener("paste",this.onPaste),s.addEventListener("focus",this.onDigitFocus),e.append(s),a.append(e),this.digits.push(s)}this.append(a),this.errorEl=el("p",`${i}__error`),this.errorEl.id=`${this.id||t("db-otp")}-error`,this.errorEl.setAttribute("role","alert"),this.errorEl.hidden=!0,this.append(this.errorEl),this.built=!0}sync(){const t="designbase-wc-otp-input",e=this.size,i=this.hasAttribute("error"),s=this.disabled,a=this.readOnly,r=this.getAttribute("error-message")||"";this.className=[t,`${t}--${e}`,i&&`${t}--error`,s&&`${t}--disabled`].filter(Boolean).join(" ");const l=(this.getAttribute("value")||"").replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((e,n)=>{e.value=l[n]||"",e.disabled=s,e.readOnly=a,e.type=this.hasAttribute("masked")?"password":"text",e.classList.toggle(`${t}__digit--filled`,Boolean(e.value)),e.setAttribute("aria-invalid",String(i)),i&&r?e.setAttribute("aria-describedby",this.errorEl?.id||""):e.removeAttribute("aria-describedby")}),this.suppressSync=!1,this.errorEl&&(this.errorEl.textContent=r,this.errorEl.hidden=!i||!r),this.setAttribute("role","group"),this.setAttribute("aria-disabled",String(s)),this.setAttribute("aria-invalid",String(i)),this.syncFormValue(l)}emit(t){const e=this.digits.map(t=>t.value).join("");if(this.setValueAttribute(e),this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0})),"db-change"===t&&e.length===this.length&&/^\d+$/.test(e)){if(e===this.lastCompleteValue)return;this.lastCompleteValue=e,this.dispatchEvent(new CustomEvent("db-complete",{detail:{value:e},bubbles:!0,composed:!0}))}else e.length!==this.length&&(this.lastCompleteValue="")}setValueAttribute(t){this.getAttribute("value")!==t&&this.setAttribute("value",t),this.syncFormValue(t)}syncFormValue(t){this.internals?.setFormValue(t||null),this.internals&&(this.hasAttribute("error")?this.internals.setValidity({customError:!0},this.getAttribute("error-message")||"인증 코드가 올바르지 않습니다.",this.digits[0]):this.hasAttribute("required")&&t.length!==this.length?this.internals.setValidity({valueMissing:!0},"인증 코드를 모두 입력해 주세요.",this.digits.find(t=>!t.value)||this.digits[0]):this.internals.setValidity({}))}focusFirstEmpty(){const t=this.digits.find(t=>!t.value)||this.digits[this.digits.length-1];t?.focus(),t?.select()}focusAt(t){const e=this.digits[Math.max(0,Math.min(this.digits.length-1,t))];e?.focus(),e?.select()}applyValue(t,e){const i=t.replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((t,e)=>{t.value=i[e]||"",t.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(t.value))}),this.suppressSync=!1,this.emit("db-input"),this.emit("db-change"),void 0!==e?this.focusAt(e):i.length<this.length?this.focusAt(i.length):this.focusAt(this.length-1)}}DbOtpInput.formAssociated=!0,customElements.get("db-otp-input")||customElements.define("db-otp-input",DbOtpInput);export{DbOtpInput};
+import{dbFormat as t}from"../core/i18n.js";import{dbUid as e}from"../core/uid.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{OTP_INPUT_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}class DbOtpInput extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals?.(),this.built=!1,this.digits=[],this.suppressSync=!1,this.initialValue="",this.lastCompleteValue="",this.onDigitFocus=t=>{const e=t.currentTarget;requestAnimationFrame(()=>e.select())},this.onDigitInput=t=>{if(this.suppressSync)return;const e=t.currentTarget,i=Number(e.dataset.index||0),s=e.value.replace(/\D/g,"");if(s.length>1){const t=this.digits.slice(0,i).map(t=>t.value).join("");return void this.applyValue(t+s,Math.min(this.length-1,t.length+s.length))}e.value=s.slice(-1),e.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(e.value));const a=this.digits.map(t=>t.value).join("");this.setAttribute("value",a),this.emit("db-input"),this.emit("db-change"),e.value&&i<this.digits.length-1&&this.focusAt(i+1)},this.onDigitKeydown=t=>{const e=t.currentTarget,i=Number(e.dataset.index||0);if("Backspace"!==t.key)return"ArrowLeft"===t.key?(t.preventDefault(),void this.focusAt(i-1)):"ArrowRight"===t.key?(t.preventDefault(),void this.focusAt(i+1)):void("Delete"===t.key&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change")));if(e.value)e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change");else if(i>0){t.preventDefault(),this.focusAt(i-1);const e=this.digits[i-1];e&&(e.value="",e.classList.remove("designbase-wc-otp-input__digit--filled"),this.emit("db-input"),this.emit("db-change"))}},this.onPaste=t=>{t.preventDefault();const e=t.clipboardData?.getData("text")||"",i=Number(t.currentTarget.dataset.index||0),s=this.digits.slice(0,i).map(t=>t.value).join("");this.applyValue(s+e,Math.min(this.length-1,s.length+e.replace(/\D/g,"").length))}}static get observedAttributes(){return["length","value","size","disabled","readonly","error","error-message","label","auto-focus","masked","name","required"]}get length(){const t=Number(this.getAttribute("length")||6);return Number.isFinite(t)?Math.min(8,Math.max(4,Math.round(t))):6}set length(t){this.setAttribute("length",String(t))}get value(){return this.digits.map(t=>t.value).join("")||this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}get size(){return i(this.getAttribute("size"),s,"m")}set size(t){this.setAttribute("size",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)}connectedCallback(){this.built||(this.initialValue=this.getAttribute("value")||""),this.build(),this.sync(),this.hasAttribute("auto-focus")&&!this.disabled&&requestAnimationFrame(()=>this.focusFirstEmpty())}attributeChangedCallback(t){this.built&&("length"===t&&(this.built=!1,this.build()),this.sync())}focus(){this.disabled||this.focusFirstEmpty()}clear(){this.suppressSync=!0,this.digits.forEach(t=>{t.value=""}),this.suppressSync=!1,this.lastCompleteValue="",this.setValueAttribute(""),this.emit("db-input"),this.emit("db-change"),this.focusFirstEmpty()}formResetCallback(){this.lastCompleteValue="",this.value=this.initialValue}formDisabledCallback(t){this.toggleAttribute("disabled",t)}build(){this.replaceChildren(),this.digits=[];const i=this.length,s="designbase-wc-otp-input",a=this.getAttribute("label");if(a){const t=el("div",`${s}__label`);t.textContent=a,this.append(t)}const r=el("div",`${s}__row`);r.setAttribute("role","group"),r.setAttribute("aria-label",a||"인증 코드");for(let e=0;e<i;e+=1){const i=el("div",`${s}__cell`),a=document.createElement("input");a.className=`${s}__digit`,a.type=this.hasAttribute("masked")?"password":"text",a.inputMode="numeric",a.autocomplete=0===e?"one-time-code":"off",a.maxLength=1,a.pattern="[0-9]*",a.setAttribute("aria-label",t("{0}번째 자리",[e+1])),a.dataset.index=String(e),a.addEventListener("input",this.onDigitInput),a.addEventListener("keydown",this.onDigitKeydown),a.addEventListener("paste",this.onPaste),a.addEventListener("focus",this.onDigitFocus),i.append(a),r.append(i),this.digits.push(a)}this.append(r),this.errorEl=el("p",`${s}__error`),this.errorEl.id=`${this.id||e("db-otp")}-error`,this.errorEl.setAttribute("role","alert"),this.errorEl.hidden=!0,this.append(this.errorEl),this.built=!0}sync(){const t="designbase-wc-otp-input",e=this.size,i=this.hasAttribute("error"),s=this.disabled,a=this.readOnly,r=this.getAttribute("error-message")||"";this.className=[t,`${t}--${e}`,i&&`${t}--error`,s&&`${t}--disabled`].filter(Boolean).join(" ");const l=(this.getAttribute("value")||"").replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((e,n)=>{e.value=l[n]||"",e.disabled=s,e.readOnly=a,e.type=this.hasAttribute("masked")?"password":"text",e.classList.toggle(`${t}__digit--filled`,Boolean(e.value)),e.setAttribute("aria-invalid",String(i)),i&&r?e.setAttribute("aria-describedby",this.errorEl?.id||""):e.removeAttribute("aria-describedby")}),this.suppressSync=!1,this.errorEl&&(this.errorEl.textContent=r,this.errorEl.hidden=!i||!r),this.setAttribute("role","group"),this.setAttribute("aria-disabled",String(s)),this.setAttribute("aria-invalid",String(i)),this.syncFormValue(l)}emit(t){const e=this.digits.map(t=>t.value).join("");if(this.setValueAttribute(e),this.dispatchEvent(new CustomEvent(t,{detail:{value:e},bubbles:!0,composed:!0})),"db-change"===t&&e.length===this.length&&/^\d+$/.test(e)){if(e===this.lastCompleteValue)return;this.lastCompleteValue=e,this.dispatchEvent(new CustomEvent("db-complete",{detail:{value:e},bubbles:!0,composed:!0}))}else e.length!==this.length&&(this.lastCompleteValue="")}setValueAttribute(t){this.getAttribute("value")!==t&&this.setAttribute("value",t),this.syncFormValue(t)}syncFormValue(t){this.internals?.setFormValue(t||null),this.internals&&(this.hasAttribute("error")?this.internals.setValidity({customError:!0},this.getAttribute("error-message")||"인증 코드가 올바르지 않습니다.",this.digits[0]):this.hasAttribute("required")&&t.length!==this.length?this.internals.setValidity({valueMissing:!0},"인증 코드를 모두 입력해 주세요.",this.digits.find(t=>!t.value)||this.digits[0]):this.internals.setValidity({}))}focusFirstEmpty(){const t=this.digits.find(t=>!t.value)||this.digits[this.digits.length-1];t?.focus(),t?.select()}focusAt(t){const e=this.digits[Math.max(0,Math.min(this.digits.length-1,t))];e?.focus(),e?.select()}applyValue(t,e){const i=t.replace(/\D/g,"").slice(0,this.length);this.suppressSync=!0,this.digits.forEach((t,e)=>{t.value=i[e]||"",t.classList.toggle("designbase-wc-otp-input__digit--filled",Boolean(t.value))}),this.suppressSync=!1,this.emit("db-input"),this.emit("db-change"),void 0!==e?this.focusAt(e):i.length<this.length?this.focusAt(i.length):this.focusAt(this.length-1)}}DbOtpInput.formAssociated=!0,customElements.get("db-otp-input")||customElements.define("db-otp-input",DbOtpInput);export{DbOtpInput};

package/dist/esm/components/db-page-header.d.ts

@@ -1,3 +1,5 @@
+import './db-badge.js';
+
 interface DbPageHeaderTabItem {
     id: string;
     label: string;
@@ -9,6 +11,12 @@ declare class DbPageHeader extends HTMLElement {
     private internalTabId;
     private childObserver?;
     private isRendering;
+    private stickyMarker?;
+    private stickyObserver?;
+    private compact;
+    private refreshSticky;
+    private observeSticky;
+    private setCompact;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;

package/dist/esm/components/db-page-header.js

@@ -1 +1 @@
-import{sanitizeHref as e}from"../core/safe-url.js";import{PAGE_HEADER_VARIANTS as t,PAGE_HEADER_ALIGNS as a}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",this.isRendering=!1,this.handleBack=()=>{const t=new CustomEvent("db-back",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||function navigatePageHeaderBack(t="/"){if("undefined"==typeof window)return;const a=window.history.state?.idx;if("number"==typeof a&&a>0)return void window.history.back();(()=>{try{return!!document.referrer&&new URL(document.referrer).origin===window.location.origin}catch{return!1}})()||window.history.length>1?window.history.back():window.location.assign(e(t,"/"))}(this.getAttribute("back-fallback-href")||"/")},this.handleTabChange=e=>{const t=e.detail,a=t?.selectedId??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.hasAttribute("selected-tab-id")||(this.internalTabId=a),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:a}}))}}static get observedAttributes(){return["title","subtitle","description","breadcrumbs","variant","show-back-button","back-fallback-href","back-label","tabs","selected-tab-id","default-selected-tab-id","align"]}connectedCallback(){this.syncDefaultTab(),this.render(),this.childObserver=new MutationObserver(()=>{this.isRendering||this.hasPendingSlottedChildren()&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render())}hasPendingSlottedChildren(){return Array.from(this.children).some(e=>{const t=e.getAttribute("slot");return"actions"===t||"meta"===t||"description"===t||"leading"===t})}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id");this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBreadcrumbs(){try{const e=JSON.parse(this.getAttribute("breadcrumbs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId}getVariant(){const e=this.getAttribute("variant")||"default";return t.includes(e)?e:"default"}getAlign(){const e=this.getAttribute("align")||"center";return a.includes(e)?e:"center"}collectLeading(){const e=Array.from(this.querySelectorAll(':scope > [slot="leading"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__leading");return t?.children.length?Array.from(t.children):[]}collectActions(){const e=Array.from(this.querySelectorAll(':scope > [slot="actions"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__cta");if(t?.children.length)return Array.from(t.children);const a=this.querySelector(".designbase-wc-page-header__actions");return a?.children.length?Array.from(a.children):[]}collectMeta(){const e=Array.from(this.querySelectorAll(':scope > [slot="meta"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__meta");return t?.children.length?Array.from(t.children):[]}renderMinimalAside(e,t){if(!e.length&&!t.length)return null;const a=document.createElement("div");if(a.className="designbase-wc-page-header__aside",e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__meta",e.forEach(e=>t.append(e)),a.append(t)}if(t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__cta",t.forEach(t=>e.append(t)),a.append(e)}return a}collectDescriptionSlot(){const e=this.querySelector(':scope > [slot="description"]');if(e)return e;const t=this.querySelector(":scope .designbase-wc-page-header__description"),a=t?.firstElementChild;return a||null}renderTitleBlock(e){const t=document.createDocumentFragment(),a=this.getAttribute("title")?.trim()||"",n=this.getAttribute("subtitle")?.trim()||"",s=this.getAttribute("description")?.trim()||"",i=Boolean(e&&(e.textContent?.trim()||e.children.length));if(a){const e=document.createElement("h1");e.className="designbase-wc-page-header__title",e.textContent=a,t.append(e)}if(n){const e=document.createElement("h2");e.className="designbase-wc-page-header__subtitle",e.textContent=n,t.append(e)}if(i||s){const a=document.createElement("div");a.className="designbase-wc-page-header__description",i&&e?a.append(e):a.textContent=s,t.append(a)}return t}render(){this.isRendering=!0;const e=this.collectActions(),t=this.collectMeta(),a=this.collectLeading(),n=this.collectDescriptionSlot(),s="minimal"===this.getVariant(),i=this.getAlign(),r=this.parseBreadcrumbs(),c=this.parseTabs(),d=c.length>0,l=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",s?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${i}`,s&&d?"designbase-wc-page-header--has-tabs":""].filter(Boolean).join(" "),this.replaceChildren(),r.length){const e=document.createElement("div");e.className="designbase-wc-page-header__breadcrumbs";const t=document.createElement("db-breadcrumbs");t.setAttribute("size","s"),t.setAttribute("items",JSON.stringify(r)),e.append(t),this.append(e)}const o=document.createElement("div");o.className="designbase-wc-page-header__main";const h=document.createElement("div");if(h.className="designbase-wc-page-header__content",s&&(l||a.length)){const e=document.createElement("div");if(e.className="designbase-wc-page-header__title-row",a.length){const t=document.createElement("div");t.className="designbase-wc-page-header__leading",a.forEach(e=>t.append(e)),e.append(t)}if(l){const t=document.createElement("db-button");t.className="designbase-wc-page-header__back-button",t.setAttribute("variant","tertiary"),t.setAttribute("size","m"),t.setAttribute("icon-only",""),t.setAttribute("start-icon","chevron-left"),t.setAttribute("aria-label",this.getAttribute("back-label")||"뒤로가기"),t.setAttribute("tooltip",this.getAttribute("back-label")||"뒤로가기"),t.addEventListener("db-click",this.handleBack),e.append(t)}const t=document.createElement("div");t.className="designbase-wc-page-header__title-group",t.append(this.renderTitleBlock(n)),e.append(t),h.append(e)}else h.append(this.renderTitleBlock(n));if(o.append(h),s){const a=this.renderMinimalAside(t,e);a&&o.append(a)}if(this.append(o),!s&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}this.renderMinimalTabs(s,d,c),queueMicrotask(()=>{this.isRendering=!1})}renderMinimalTabs(e,t,a){if(!e||!t)return;const n=document.createElement("div");n.className="designbase-wc-page-header__toolbar";const s=document.createElement("div");s.className="designbase-wc-page-header__tabs";const i=document.createElement("db-tabs");i.setAttribute("size","m"),i.setAttribute("items",JSON.stringify(a)),i.setAttribute("selected-id",this.getActiveTabId()),i.addEventListener("db-change",this.handleTabChange),s.append(i),n.append(s),this.append(n)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};
+import{sanitizeHref as e}from"../core/safe-url.js";import"./db-badge.js";import{PAGE_HEADER_VARIANTS as t,PAGE_HEADER_ALIGNS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",this.isRendering=!1,this.compact=!1,this.refreshSticky=()=>this.observeSticky(),this.handleBack=()=>{const t=new CustomEvent("db-back",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t),t.defaultPrevented||function navigatePageHeaderBack(t="/"){if("undefined"==typeof window)return;const s=window.history.state?.idx;if("number"==typeof s&&s>0)return void window.history.back();(()=>{try{return!!document.referrer&&new URL(document.referrer).origin===window.location.origin}catch{return!1}})()||window.history.length>1?window.history.back():window.location.assign(e(t,"/"))}(this.getAttribute("back-fallback-href")||"/")},this.handleTabChange=e=>{const t=e.detail,s=t?.selectedId??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.hasAttribute("selected-tab-id")||(this.internalTabId=s),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:s}}))}}static get observedAttributes(){return["title","subtitle","description","breadcrumbs","variant","show-back-button","back-fallback-href","back-label","tabs","selected-tab-id","default-selected-tab-id","align","sticky","compact-on-scroll","background","count"]}observeSticky(){if(this.stickyObserver?.disconnect(),!this.hasAttribute("sticky")||!this.hasAttribute("compact-on-scroll"))return this.stickyMarker?.remove(),this.stickyMarker=void 0,void this.setCompact(!1);this.stickyMarker||(this.stickyMarker=document.createElement("span"),this.stickyMarker.setAttribute("aria-hidden","true"),this.stickyMarker.style.cssText="display:block;height:1px;margin-bottom:-1px;pointer-events:none;overflow-anchor:none",this.before(this.stickyMarker));let e=this.parentElement;for(;e&&e!==document.body&&e!==document.documentElement&&!/(auto|scroll)/.test(getComputedStyle(e).overflowY);)e=e.parentElement;e!==document.body&&e!==document.documentElement||(e=null);const t=parseFloat(getComputedStyle(this).top)||0;this.stickyObserver=new IntersectionObserver(([e])=>{this.setCompact(!e.isIntersecting&&e.boundingClientRect.top<(e.rootBounds?.top??t))},{root:e,rootMargin:`-${t}px 0px 0px 0px`,threshold:0}),this.stickyObserver.observe(this.stickyMarker)}setCompact(e){this.compact=e,this.toggleAttribute("data-compact",e)}connectedCallback(){this.syncDefaultTab(),this.render(),this.observeSticky(),window.addEventListener("resize",this.refreshSticky),this.childObserver=new MutationObserver(()=>{this.isRendering||this.hasPendingSlottedChildren()&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect(),this.stickyObserver?.disconnect(),this.stickyMarker?.remove(),this.stickyMarker=void 0,window.removeEventListener("resize",this.refreshSticky)}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render(),"sticky"!==e&&"compact-on-scroll"!==e||this.observeSticky())}hasPendingSlottedChildren(){return Array.from(this.children).some(e=>{const t=e.getAttribute("slot");return"actions"===t||"meta"===t||"description"===t||"leading"===t})}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id");this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBreadcrumbs(){try{const e=JSON.parse(this.getAttribute("breadcrumbs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId}getVariant(){const e=this.getAttribute("variant")||"default";return t.includes(e)?e:"default"}getAlign(){const e=this.getAttribute("align")||"center";return s.includes(e)?e:"center"}collectLeading(){const e=Array.from(this.querySelectorAll(':scope > [slot="leading"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__leading");return t?.children.length?Array.from(t.children):[]}collectActions(){const e=Array.from(this.querySelectorAll(':scope > [slot="actions"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__cta");if(t?.children.length)return Array.from(t.children);const s=this.querySelector(".designbase-wc-page-header__actions");return s?.children.length?Array.from(s.children):[]}collectMeta(){const e=Array.from(this.querySelectorAll(':scope > [slot="meta"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__meta");return t?.children.length?Array.from(t.children):[]}renderMinimalAside(e,t){if(!e.length&&!t.length)return null;const s=document.createElement("div");if(s.className="designbase-wc-page-header__aside",e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__meta",e.forEach(e=>t.append(e)),s.append(t)}if(t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__cta",t.forEach(t=>e.append(t)),s.append(e)}return s}collectDescriptionSlot(){const e=this.querySelector(':scope > [slot="description"]');if(e)return e;const t=this.querySelector(":scope .designbase-wc-page-header__description"),s=t?.firstElementChild;return s||null}renderTitleBlock(e){const t=document.createDocumentFragment(),s=this.getAttribute("title")?.trim()||"",i=this.getAttribute("subtitle")?.trim()||"",n=this.getAttribute("description")?.trim()||"",r=Boolean(e&&(e.textContent?.trim()||e.children.length));if(s){const e=document.createElement("h1");if(e.className="designbase-wc-page-header__title",e.textContent=s,this.hasAttribute("count")){const t=document.createElement("db-badge");t.setAttribute("variant","secondary"),t.setAttribute("size","s"),t.setAttribute("aria-label",this.getAttribute("count")||"0"),t.textContent=this.getAttribute("count"),e.append(t)}t.append(e)}if(i){const e=document.createElement("h2");e.className="designbase-wc-page-header__subtitle",e.textContent=i,t.append(e)}if(r||n){const s=document.createElement("div");s.className="designbase-wc-page-header__description",r&&e?s.append(e):s.textContent=n,t.append(s)}return t}render(){this.isRendering=!0;const e=this.collectActions(),t=this.collectMeta(),s=this.collectLeading(),i=this.collectDescriptionSlot(),n="minimal"===this.getVariant(),r=this.getAlign(),a=this.parseBreadcrumbs(),c=this.parseTabs(),d=c.length>0,o=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",n?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${r}`,n&&d?"designbase-wc-page-header--has-tabs":""].filter(Boolean).join(" "),this.replaceChildren(),this.setCompact(this.compact),a.length){const e=document.createElement("div");e.className="designbase-wc-page-header__breadcrumbs";const t=document.createElement("db-breadcrumbs");t.setAttribute("size","s"),t.setAttribute("items",JSON.stringify(a)),e.append(t),this.append(e)}const l=document.createElement("div");l.className="designbase-wc-page-header__main";const h=document.createElement("div");if(h.className="designbase-wc-page-header__content",n&&(o||s.length)){const e=document.createElement("div");if(e.className="designbase-wc-page-header__title-row",s.length){const t=document.createElement("div");t.className="designbase-wc-page-header__leading",s.forEach(e=>t.append(e)),e.append(t)}if(o){const t=document.createElement("db-button");t.className="designbase-wc-page-header__back-button",t.setAttribute("variant","tertiary"),t.setAttribute("size","m"),t.setAttribute("icon-only",""),t.setAttribute("start-icon","chevron-left"),t.setAttribute("aria-label",this.getAttribute("back-label")||"뒤로가기"),t.setAttribute("tooltip",this.getAttribute("back-label")||"뒤로가기"),t.addEventListener("db-click",this.handleBack),e.append(t)}const t=document.createElement("div");t.className="designbase-wc-page-header__title-group",t.append(this.renderTitleBlock(i)),e.append(t),h.append(e)}else h.append(this.renderTitleBlock(i));if(l.append(h),n){const s=this.renderMinimalAside(t,e);s&&l.append(s)}if(this.append(l),!n&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}if(!n&&t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__meta",t.forEach(t=>e.append(t)),this.append(e)}this.renderMinimalTabs(n,d,c),queueMicrotask(()=>{this.isRendering=!1})}renderMinimalTabs(e,t,s){if(!e||!t)return;const i=document.createElement("div");i.className="designbase-wc-page-header__toolbar";const n=document.createElement("div");n.className="designbase-wc-page-header__tabs";const r=document.createElement("db-tabs");r.setAttribute("size","m"),r.setAttribute("items",JSON.stringify(s)),r.setAttribute("selected-id",this.getActiveTabId()),r.addEventListener("db-change",this.handleTabChange),n.append(r),i.append(n),this.append(i)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};

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

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PAGINATION_SIZES as a,PAGINATION_VARIANTS as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPagination extends HTMLElement{static get observedAttributes(){return["current-page","total-pages","total-items","page-size","page-size-options","size","variant","alignment","show-first-last","show-previous-next","show-page-size-selector","show-total","sibling-count","boundary-count","disabled","full-width"]}get currentPage(){return Number(this.getAttribute("current-page")||1)}set currentPage(t){this.setAttribute("current-page",String(t))}get totalPages(){return Number(this.getAttribute("total-pages")||1)}set totalPages(t){this.setAttribute("total-pages",String(t))}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}iconSize(){const t=this.getAttribute("size")||"m";return"s"===t?12:"l"===t?16:14}render(){const t=e(this.getAttribute("size"),a,"m"),n=e(this.getAttribute("variant"),i,"default"),s=this.getAttribute("alignment")||"center",r=this.hasAttribute("disabled"),o=this.hasAttribute("show-first-last"),c="false"!==this.getAttribute("show-previous-next"),l=this.hasAttribute("show-page-size-selector"),g=this.hasAttribute("show-total"),u=this.hasAttribute("full-width")||l||g,b=Number(this.getAttribute("total-items")||0),d=Number(this.getAttribute("page-size")||10),p=this.currentPage,h=this.totalPages,m=p<=1,A=p>=h;this.className=["designbase-wc-pagination",`designbase-wc-pagination--${t}`,`designbase-wc-pagination--${n}`,`designbase-wc-pagination--${s}`,r&&"designbase-wc-pagination--disabled",u&&"designbase-wc-pagination--full-width"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label","페이지 네비게이션"),this.replaceChildren();const w=document.createElement("div");if(w.className=["designbase-wc-pagination__container",u&&"designbase-wc-pagination__container--full-width"].filter(Boolean).join(" "),g&&b>0){const t=document.createElement("div");t.className="designbase-wc-pagination__total",t.textContent=this.getTotalLabel(b,d,p),w.append(t)}const f=document.createElement("nav");f.className="designbase-wc-pagination__nav",f.setAttribute("aria-label","페이지 네비게이션");const _=document.createElement("ul");_.className="designbase-wc-pagination__list",o&&!m&&_.append(this.createIconButton("arrow-bar-left",1,"첫 페이지로 이동","first")),c&&!m&&_.append(this.createIconButton("chevron-left",p-1,"이전 페이지로 이동","previous")),this.getPageNumbers().forEach((t,e)=>{if("..."===t){const t=document.createElement("li");t.className="designbase-wc-pagination__ellipsis";const e=document.createElement("span");return e.className="designbase-wc-pagination__ellipsis-text",e.textContent="...",t.append(e),void _.append(t)}"number"==typeof t&&_.append(this.createPageButton(t,r))}),c&&!A&&_.append(this.createIconButton("chevron-right",p+1,"다음 페이지로 이동","next")),o&&!A&&_.append(this.createIconButton("arrow-bar-right",h,"마지막 페이지로 이동","last")),f.append(_),w.append(f),l&&w.append(this.createPageSizeSelector(t,d,r)),this.append(w)}getPageSizeOptions(){const t=this.getAttribute("page-size-options");if(!t)return[10,20,50,100];try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>!Number.isNaN(t))}catch{}return[10,20,50,100]}getTotalLabel(t,e,a){return`${(a-1)*e+1}-${Math.min(a*e,t)} / ${t}개`}createPageSizeSelector(t,e,a){const i=document.createElement("div");i.className="designbase-wc-pagination__page-size";const n=document.createElement("label");n.className="designbase-wc-pagination__page-size-label";const s=document.createElement("span");s.className="designbase-wc-pagination__page-size-text",s.textContent="페이지당";const r=document.createElement("db-select");return r.className="designbase-wc-pagination__page-size-select",r.setAttribute("size",t),r.setAttribute("show-clear-button","false"),r.setAttribute("searchable","false"),r.setAttribute("options",JSON.stringify(this.getPageSizeOptions().map(t=>({value:String(t),label:String(t)})))),r.setAttribute("value",String(e)),a&&r.setAttribute("disabled",""),r.addEventListener("db-change",t=>{const a=t.detail,i=Number(a?.value);Number.isNaN(i)||i===e||(this.setAttribute("page-size",String(i)),this.dispatchEvent(new CustomEvent("db-page-size-change",{detail:{pageSize:i},bubbles:!0,composed:!0})))}),n.append(s,r),i.append(n),i}getPageNumbers(){const t=Number(this.getAttribute("sibling-count")||1),e=Number(this.getAttribute("boundary-count")||1),a=this.totalPages,i=this.currentPage;if(a<=2*t+3+2)return Array.from({length:a},(t,e)=>e+1);const n=Math.max(i-t,e),s=Math.min(i+t,a-e+1),r=n>e+2,o=s<a-e-1;if(!r&&o){const e=3+2*t;return[...Array.from({length:e},(t,e)=>e+1),"...",a]}if(r&&!o){const e=3+2*t;return[1,"...",...Array.from({length:e},(t,i)=>a-e+i+1)]}if(r&&o){return[1,"...",...Array.from({length:s-n+1},(t,e)=>n+e),"...",a]}return Array.from({length:a},(t,e)=>e+1)}createPageButton(t,e){const a=t===this.currentPage,i=document.createElement("li");i.className="designbase-wc-pagination__item";const n=document.createElement("button");return n.type="button",n.className=["designbase-wc-pagination__button",a&&"designbase-wc-pagination__button--active"].filter(Boolean).join(" "),n.textContent=String(t),n.disabled=e,a&&n.setAttribute("aria-current","page"),n.setAttribute("aria-label",`페이지 ${t}로 이동`),n.addEventListener("click",()=>this.select(t)),i.append(n),i}createIconButton(e,a,i,n){const s=document.createElement("li");s.className="designbase-wc-pagination__item";const r=document.createElement("button");return r.type="button",r.className=`designbase-wc-pagination__button designbase-wc-pagination__button--${n}`,r.disabled=this.hasAttribute("disabled"),r.setAttribute("aria-label",i),r.append(t(e,this.iconSize())),r.addEventListener("click",()=>this.select(a)),s.append(r),s}select(t){this.hasAttribute("disabled")||t===this.currentPage||t<1||t>this.totalPages||(this.currentPage=t,this.dispatchEvent(new CustomEvent("db-change",{detail:{page:t},bubbles:!0,composed:!0})))}}customElements.get("db-pagination")||customElements.define("db-pagination",DbPagination);export{DbPagination};
+import{dbText as t,dbFormat as e}from"../core/i18n.js";import{createDbIcon as a}from"./db-icons.js";import{coerceToContract as i}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PAGINATION_SIZES as n,PAGINATION_VARIANTS as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbPagination extends HTMLElement{static get observedAttributes(){return["current-page","total-pages","total-items","page-size","page-size-options","size","variant","alignment","show-first-last","show-previous-next","show-page-size-selector","show-total","sibling-count","boundary-count","disabled","full-width"]}get currentPage(){return Number(this.getAttribute("current-page")||1)}set currentPage(t){this.setAttribute("current-page",String(t))}get totalPages(){return Number(this.getAttribute("total-pages")||1)}set totalPages(t){this.setAttribute("total-pages",String(t))}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}iconSize(){const t=this.getAttribute("size")||"m";return"s"===t?12:"l"===t?16:14}render(){const e=i(this.getAttribute("size"),n,"m"),a=i(this.getAttribute("variant"),s,"default"),r=this.getAttribute("alignment")||"center",o=this.hasAttribute("disabled"),c=this.hasAttribute("show-first-last"),l="false"!==this.getAttribute("show-previous-next"),g=this.hasAttribute("show-page-size-selector"),u=this.hasAttribute("show-total"),b=this.hasAttribute("full-width")||g||u,d=Number(this.getAttribute("total-items")||0),p=Number(this.getAttribute("page-size")||10),m=this.currentPage,h=this.totalPages,A=m<=1,w=m>=h;this.className=["designbase-wc-pagination",`designbase-wc-pagination--${e}`,`designbase-wc-pagination--${a}`,`designbase-wc-pagination--${r}`,o&&"designbase-wc-pagination--disabled",b&&"designbase-wc-pagination--full-width"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label",t("페이지 네비게이션")),this.replaceChildren();const f=document.createElement("div");if(f.className=["designbase-wc-pagination__container",b&&"designbase-wc-pagination__container--full-width"].filter(Boolean).join(" "),u&&d>0){const t=document.createElement("div");t.className="designbase-wc-pagination__total",t.textContent=this.getTotalLabel(d,p,m),f.append(t)}const _=document.createElement("nav");_.className="designbase-wc-pagination__nav",_.setAttribute("aria-label",t("페이지 네비게이션"));const N=document.createElement("ul");N.className="designbase-wc-pagination__list",c&&!A&&N.append(this.createIconButton("arrow-bar-left",1,"첫 페이지로 이동","first")),l&&!A&&N.append(this.createIconButton("chevron-left",m-1,"이전 페이지로 이동","previous")),this.getPageNumbers().forEach((t,e)=>{if("..."===t){const t=document.createElement("li");t.className="designbase-wc-pagination__ellipsis";const e=document.createElement("span");return e.className="designbase-wc-pagination__ellipsis-text",e.textContent="...",t.append(e),void N.append(t)}"number"==typeof t&&N.append(this.createPageButton(t,o))}),l&&!w&&N.append(this.createIconButton("chevron-right",m+1,"다음 페이지로 이동","next")),c&&!w&&N.append(this.createIconButton("arrow-bar-right",h,"마지막 페이지로 이동","last")),_.append(N),f.append(_),g&&f.append(this.createPageSizeSelector(e,p,o)),this.append(f)}getPageSizeOptions(){const t=this.getAttribute("page-size-options");if(!t)return[10,20,50,100];try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>!Number.isNaN(t))}catch{}return[10,20,50,100]}getTotalLabel(t,e,a){return`${(a-1)*e+1}-${Math.min(a*e,t)} / ${t}개`}createPageSizeSelector(e,a,i){const n=document.createElement("div");n.className="designbase-wc-pagination__page-size";const s=document.createElement("label");s.className="designbase-wc-pagination__page-size-label";const r=document.createElement("span");r.className="designbase-wc-pagination__page-size-text",r.textContent=t("페이지당");const o=document.createElement("db-select");return o.className="designbase-wc-pagination__page-size-select",o.setAttribute("size",e),o.setAttribute("show-clear-button","false"),o.setAttribute("searchable","false"),o.setAttribute("options",JSON.stringify(this.getPageSizeOptions().map(t=>({value:String(t),label:String(t)})))),o.setAttribute("value",String(a)),i&&o.setAttribute("disabled",""),o.addEventListener("db-change",t=>{const e=t.detail,i=Number(e?.value);Number.isNaN(i)||i===a||(this.setAttribute("page-size",String(i)),this.dispatchEvent(new CustomEvent("db-page-size-change",{detail:{pageSize:i},bubbles:!0,composed:!0})))}),s.append(r,o),n.append(s),n}getPageNumbers(){const t=Number(this.getAttribute("sibling-count")||1),e=Number(this.getAttribute("boundary-count")||1),a=this.totalPages,i=this.currentPage;if(a<=2*t+3+2)return Array.from({length:a},(t,e)=>e+1);const n=Math.max(i-t,e),s=Math.min(i+t,a-e+1),r=n>e+2,o=s<a-e-1;if(!r&&o){const e=3+2*t;return[...Array.from({length:e},(t,e)=>e+1),"...",a]}if(r&&!o){const e=3+2*t;return[1,"...",...Array.from({length:e},(t,i)=>a-e+i+1)]}if(r&&o){return[1,"...",...Array.from({length:s-n+1},(t,e)=>n+e),"...",a]}return Array.from({length:a},(t,e)=>e+1)}createPageButton(t,a){const i=t===this.currentPage,n=document.createElement("li");n.className="designbase-wc-pagination__item";const s=document.createElement("button");return s.type="button",s.className=["designbase-wc-pagination__button",i&&"designbase-wc-pagination__button--active"].filter(Boolean).join(" "),s.textContent=String(t),s.disabled=a,i&&s.setAttribute("aria-current","page"),s.setAttribute("aria-label",e("페이지 {0}로 이동",[t])),s.addEventListener("click",()=>this.select(t)),n.append(s),n}createIconButton(t,e,i,n){const s=document.createElement("li");s.className="designbase-wc-pagination__item";const r=document.createElement("button");return r.type="button",r.className=`designbase-wc-pagination__button designbase-wc-pagination__button--${n}`,r.disabled=this.hasAttribute("disabled"),r.setAttribute("aria-label",i),r.append(a(t,this.iconSize())),r.addEventListener("click",()=>this.select(e)),s.append(r),s}select(t){this.hasAttribute("disabled")||t===this.currentPage||t<1||t>this.totalPages||(this.currentPage=t,this.dispatchEvent(new CustomEvent("db-change",{detail:{page:t},bubbles:!0,composed:!0})))}}customElements.get("db-pagination")||customElements.define("db-pagination",DbPagination);export{DbPagination};

package/dist/esm/components/db-phone-verify.d.ts

@@ -2,7 +2,7 @@ import './db-button.js';
 import './db-input.js';
 import './db-otp-input.js';
 import './db-select.js';
-import { PHONE_VERIFY_SIZES } from '@designbasekorea/ui-contracts';
+import { PHONE_VERIFY_SIZES } from '../ui-contracts/dist/components.d.js';
 
 /**
  * ui-wc — db-phone-verify (수동 작성, 자동 동기화 대상 아님)

package/dist/esm/components/db-phone-verify.js

@@ -1 +1 @@
-import{t}from"../core/i18n.js";import"./db-button.js";import"./db-input.js";import"./db-otp-input.js";import"./db-select.js";import{coerceToContract as e}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PHONE_VERIFY_SIZES as i}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const s=[{value:"skt",label:"SKT"},{value:"kt",label:"KT"},{value:"lgu",label:"LG U+"},{value:"mvno",label:"알뜰폰"}];function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}function formatPhone(t){const e=t.replace(/\D/g,"").slice(0,11);return e.length<=3?e:e.length<=7?`${e.slice(0,3)}-${e.slice(3)}`:`${e.slice(0,3)}-${e.slice(3,7)}-${e.slice(7)}`}class DbPhoneVerify extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.timerId=null,this.remaining=0}static get observedAttributes(){return["carrier","phone","code","step","size","disabled","error","error-message","carrier-options","countdown","title","description","send-label","resend-label","verify-label","code-length","manual","sending","verifying","auto-submit"]}get size(){return e(this.getAttribute("size"),i,"m")}set size(t){this.setAttribute("size",t)}get step(){const t=this.getAttribute("step");return"code"===t||"verified"===t?t:"phone"}set step(t){this.setAttribute("step",t)}get phone(){return(this.getAttribute("phone")||"").replace(/\D/g,"")}set phone(t){this.setAttribute("phone",formatPhone(t))}get carrier(){return this.getAttribute("carrier")||"skt"}set carrier(t){this.setAttribute("carrier",t)}get code(){return this.getAttribute("code")||""}set code(t){this.setAttribute("code",t)}get countdown(){const t=Number(this.getAttribute("countdown")||180);return Number.isFinite(t)&&t>0?t:180}set countdown(t){this.setAttribute("countdown",String(t))}connectedCallback(){this.build(),this.sync(),"code"===this.step&&this.startTimer(this.countdown)}disconnectedCallback(){this.clearTimer()}attributeChangedCallback(t,e,i){this.built&&(this.sync(),"step"===t&&e!==i&&("code"===this.step?this.startTimer(this.countdown):this.clearTimer()))}startCodeStep(){"code"===this.step?this.startTimer(this.countdown):this.step="code",requestAnimationFrame(()=>this.otpInput?.focus?.())}restartCountdown(){"code"===this.step&&this.startTimer(this.countdown)}markVerified(){this.step="verified",this.clearTimer()}clearTimer(){this.timerId&&clearInterval(this.timerId),this.timerId=null,this.remaining=0}startTimer(t){this.clearTimer(),this.remaining=t,this.renderTimer(),this.timerId=setInterval(()=>{this.remaining-=1,this.renderTimer(),this.remaining<=0&&(this.clearTimer(),this.resendBtn.disabled=!1,this.dispatchEvent(new CustomEvent("db-countdown-complete",{bubbles:!0,composed:!0})))},1e3)}renderTimer(){const t=Math.max(0,Math.floor(this.remaining/60)),e=Math.max(0,this.remaining%60);this.timerEl.textContent=`${String(t).padStart(2,"0")}:${String(e).padStart(2,"0")}`,this.timerEl.setAttribute("aria-label",`남은 시간 ${t}분 ${e}초`),this.resendBtn.disabled=this.remaining>0||this.hasAttribute("disabled")}build(){if(this.built)return;this.built=!0;const e="designbase-wc-phone-verify";this.replaceChildren();const i=el("div",`${e}__header`),s=el("h3",`${e}__title`);s.dataset.role="title";const r=el("p",`${e}__description`);r.dataset.role="description",i.append(s,r);const n=el("div",`${e}__field`);this.carrierSelect=document.createElement("db-select"),this.carrierSelect.setAttribute("label","통신사"),this.carrierSelect.setAttribute("full-width",""),this.carrierSelect.setAttribute("placeholder","통신사 선택"),this.carrierSelect.addEventListener("db-change",t=>{t.stopPropagation();const e=t.detail?.value??this.carrierSelect.value;this.carrier=String(e||""),this.dispatchEvent(new CustomEvent("db-carrier-change",{detail:{carrier:this.carrier},bubbles:!0,composed:!0}))}),n.append(this.carrierSelect);const o=el("div",`${e}__phone-row`);this.phoneInput=document.createElement("db-input"),this.phoneInput.setAttribute("type","tel"),this.phoneInput.setAttribute("label","휴대폰 번호"),this.phoneInput.setAttribute("placeholder","010-0000-0000"),this.phoneInput.setAttribute("full-width",""),this.phoneInput.setAttribute("start-icon","user"),this.phoneInput.addEventListener("db-input",t=>{t.stopPropagation();const e=formatPhone(String(t.detail?.value??this.phoneInput.value??""));this.phoneInput.value=e,this.setAttribute("phone",e),this.dispatchEvent(new CustomEvent("db-phone-change",{detail:{phone:e.replace(/\D/g,""),formatted:e},bubbles:!0,composed:!0}))}),this.sendBtn=document.createElement("db-button"),this.sendBtn.setAttribute("variant","primary"),this.sendBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.isPhoneValid()&&(this.dispatchEvent(new CustomEvent("db-send-code",{detail:{carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startCodeStep())}),o.append(this.phoneInput,this.sendBtn),this.codeBlock=el("div",`${e}__code`);const h=el("div",`${e}__code-head`),a=el("span",`${e}__code-label`);a.textContent="인증번호",this.timerEl=el("span",`${e}__timer`),h.append(a,this.timerEl),this.otpInput=document.createElement("db-otp-input"),this.otpInput.addEventListener("db-change",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.setAttribute("code",e),this.dispatchEvent(new CustomEvent("db-code-change",{detail:{code:e},bubbles:!0,composed:!0}))}),this.otpInput.addEventListener("db-complete",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.dispatchEvent(new CustomEvent("db-code-complete",{detail:{code:e,carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("auto-submit")&&this.requestVerify()});const d=el("div",`${e}__code-actions`);this.resendBtn=el("button",`${e}__resend`),this.resendBtn.type="button",this.resendBtn.addEventListener("click",()=>{this.resendBtn.disabled||(this.dispatchEvent(new CustomEvent("db-resend",{detail:{carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startTimer(this.countdown))}),this.verifyBtn=document.createElement("db-button"),this.verifyBtn.setAttribute("variant","primary"),this.verifyBtn.setAttribute("full-width",""),this.verifyBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.requestVerify()}),d.append(this.resendBtn,this.verifyBtn),this.codeBlock.append(h,this.otpInput,d),this.errorEl=el("p",`${e}__error`),this.errorEl.hidden=!0;const l=el("div",`${e}__verified`);l.dataset.role="verified";const c=el("span",`${e}__verified-badge`);c.textContent=t("verify.done");const u=document.createElement("p");u.className=`${e}__verified-text`,u.textContent=t("verify.phoneDone"),l.append(c,u),this.append(i,n,o,this.codeBlock,this.errorEl,l)}sync(){const t="designbase-wc-phone-verify",e=this.size,i=this.step,r=this.hasAttribute("disabled"),n=function parseCarriers(t){if(!t)return s;try{const e=JSON.parse(t);return Array.isArray(e)&&e.length?e:s}catch{return s}}(this.getAttribute("carrier-options")),o=this.getAttribute("code-length")||"6";this.className=[t,`${t}--${e}`,`${t}--step-${i}`,r&&`${t}--disabled`,this.hasAttribute("error")&&`${t}--error`].filter(Boolean).join(" ");const h=this.querySelector('[data-role="title"]'),a=this.querySelector('[data-role="description"]');h.textContent=this.getAttribute("title")||"휴대폰 인증",a.textContent=this.getAttribute("description")||"본인 명의의 휴대폰 번호를 입력하고 인증번호를 받아 주세요.",this.carrierSelect.setAttribute("options",JSON.stringify(n)),this.carrierSelect.setAttribute("value",this.carrier),this.carrierSelect.setAttribute("size",e),this.carrierSelect.toggleAttribute("disabled",r||"verified"===i);const d=this.getAttribute("phone")||"";this.phoneInput.value=d,this.phoneInput.setAttribute("size",e),this.phoneInput.toggleAttribute("disabled",r||"phone"!==i),this.phoneInput.toggleAttribute("error",this.hasAttribute("error")&&"phone"===i),this.sendBtn.setAttribute("size",e),this.sendBtn.textContent=this.getAttribute("send-label")||"인증번호 받기",this.sendBtn.toggleAttribute("disabled",r||"phone"!==i||!this.isPhoneValid()),this.sendBtn.toggleAttribute("loading",this.hasAttribute("sending")),this.otpInput.setAttribute("length",o),this.otpInput.setAttribute("size",e),this.otpInput.setAttribute("value",this.getAttribute("code")||""),this.otpInput.toggleAttribute("disabled",r||"code"!==i),this.otpInput.toggleAttribute("error",this.hasAttribute("error")&&"code"===i),this.resendBtn.textContent=this.getAttribute("resend-label")||"재전송",this.verifyBtn.setAttribute("size",e),this.verifyBtn.textContent=this.getAttribute("verify-label")||"인증하기",this.verifyBtn.toggleAttribute("disabled",r||(this.getAttribute("code")||"").length<Number(o)),this.verifyBtn.toggleAttribute("loading",this.hasAttribute("verifying")),this.codeBlock.hidden="phone"===i;this.querySelector('[data-role="verified"]').hidden="verified"!==i;const l=this.getAttribute("error-message")||"";this.errorEl.textContent=l,this.errorEl.hidden=!this.hasAttribute("error")||!l}isPhoneValid(){return/^01[016789]\d{7,8}$/.test(this.phone)&&Boolean(this.carrier)}requestVerify(){const t=(this.code||this.otpInput.value).replace(/\D/g,""),e=Number(this.getAttribute("code-length")||6);"code"!==this.step||t.length!==e||this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("db-verify",{detail:{carrier:this.carrier,phone:this.phone,code:t},bubbles:!0,composed:!0}))}}customElements.get("db-phone-verify")||customElements.define("db-phone-verify",DbPhoneVerify);export{DbPhoneVerify};
+import{dbFormat as t,dbText as e,t as i}from"../core/i18n.js";import"./db-button.js";import"./db-input.js";import"./db-otp-input.js";import"./db-select.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PHONE_VERIFY_SIZES as r}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";const DEFAULT_CARRIERS=()=>[{value:"skt",label:"SKT"},{value:"kt",label:"KT"},{value:"lgu",label:"LG U+"},{value:"mvno",label:e("알뜰폰")}];function el(t,e){const i=document.createElement(t);return e&&(i.className=e),i}function formatPhone(t){const e=t.replace(/\D/g,"").slice(0,11);return e.length<=3?e:e.length<=7?`${e.slice(0,3)}-${e.slice(3)}`:`${e.slice(0,3)}-${e.slice(3,7)}-${e.slice(7)}`}class DbPhoneVerify extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.timerId=null,this.remaining=0}static get observedAttributes(){return["carrier","phone","code","step","size","disabled","error","error-message","carrier-options","countdown","title","description","send-label","resend-label","verify-label","code-length","manual","sending","verifying","auto-submit"]}get size(){return s(this.getAttribute("size"),r,"m")}set size(t){this.setAttribute("size",t)}get step(){const t=this.getAttribute("step");return"code"===t||"verified"===t?t:"phone"}set step(t){this.setAttribute("step",t)}get phone(){return(this.getAttribute("phone")||"").replace(/\D/g,"")}set phone(t){this.setAttribute("phone",formatPhone(t))}get carrier(){return this.getAttribute("carrier")||"skt"}set carrier(t){this.setAttribute("carrier",t)}get code(){return this.getAttribute("code")||""}set code(t){this.setAttribute("code",t)}get countdown(){const t=Number(this.getAttribute("countdown")||180);return Number.isFinite(t)&&t>0?t:180}set countdown(t){this.setAttribute("countdown",String(t))}connectedCallback(){this.build(),this.sync(),"code"===this.step&&this.startTimer(this.countdown)}disconnectedCallback(){this.clearTimer()}attributeChangedCallback(t,e,i){this.built&&(this.sync(),"step"===t&&e!==i&&("code"===this.step?this.startTimer(this.countdown):this.clearTimer()))}startCodeStep(){"code"===this.step?this.startTimer(this.countdown):this.step="code",requestAnimationFrame(()=>this.otpInput?.focus?.())}restartCountdown(){"code"===this.step&&this.startTimer(this.countdown)}markVerified(){this.step="verified",this.clearTimer()}clearTimer(){this.timerId&&clearInterval(this.timerId),this.timerId=null,this.remaining=0}startTimer(t){this.clearTimer(),this.remaining=t,this.renderTimer(),this.timerId=setInterval(()=>{this.remaining-=1,this.renderTimer(),this.remaining<=0&&(this.clearTimer(),this.resendBtn.disabled=!1,this.dispatchEvent(new CustomEvent("db-countdown-complete",{bubbles:!0,composed:!0})))},1e3)}renderTimer(){const e=Math.max(0,Math.floor(this.remaining/60)),i=Math.max(0,this.remaining%60);this.timerEl.textContent=`${String(e).padStart(2,"0")}:${String(i).padStart(2,"0")}`,this.timerEl.setAttribute("aria-label",t("남은 시간 {0}분 {1}초",[e,i])),this.resendBtn.disabled=this.remaining>0||this.hasAttribute("disabled")}build(){if(this.built)return;this.built=!0;const t="designbase-wc-phone-verify";this.replaceChildren();const s=el("div",`${t}__header`),r=el("h3",`${t}__title`);r.dataset.role="title";const n=el("p",`${t}__description`);n.dataset.role="description",s.append(r,n);const o=el("div",`${t}__field`);this.carrierSelect=document.createElement("db-select"),this.carrierSelect.setAttribute("label","통신사"),this.carrierSelect.setAttribute("full-width",""),this.carrierSelect.setAttribute("placeholder",e("통신사 선택")),this.carrierSelect.addEventListener("db-change",t=>{t.stopPropagation();const e=t.detail?.value??this.carrierSelect.value;this.carrier=String(e||""),this.dispatchEvent(new CustomEvent("db-carrier-change",{detail:{carrier:this.carrier},bubbles:!0,composed:!0}))}),o.append(this.carrierSelect);const h=el("div",`${t}__phone-row`);this.phoneInput=document.createElement("db-input"),this.phoneInput.setAttribute("type","tel"),this.phoneInput.setAttribute("label","휴대폰 번호"),this.phoneInput.setAttribute("placeholder","010-0000-0000"),this.phoneInput.setAttribute("full-width",""),this.phoneInput.setAttribute("start-icon","user"),this.phoneInput.addEventListener("db-input",t=>{t.stopPropagation();const e=formatPhone(String(t.detail?.value??this.phoneInput.value??""));this.phoneInput.value=e,this.setAttribute("phone",e),this.dispatchEvent(new CustomEvent("db-phone-change",{detail:{phone:e.replace(/\D/g,""),formatted:e},bubbles:!0,composed:!0}))}),this.sendBtn=document.createElement("db-button"),this.sendBtn.setAttribute("variant","primary"),this.sendBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.isPhoneValid()&&(this.dispatchEvent(new CustomEvent("db-send-code",{detail:{carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startCodeStep())}),h.append(this.phoneInput,this.sendBtn),this.codeBlock=el("div",`${t}__code`);const a=el("div",`${t}__code-head`),d=el("span",`${t}__code-label`);d.textContent=e("인증번호"),this.timerEl=el("span",`${t}__timer`),a.append(d,this.timerEl),this.otpInput=document.createElement("db-otp-input"),this.otpInput.addEventListener("db-change",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.setAttribute("code",e),this.dispatchEvent(new CustomEvent("db-code-change",{detail:{code:e},bubbles:!0,composed:!0}))}),this.otpInput.addEventListener("db-complete",t=>{t.stopPropagation();const e=String(t.detail?.value||"");this.dispatchEvent(new CustomEvent("db-code-complete",{detail:{code:e,carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("auto-submit")&&this.requestVerify()});const l=el("div",`${t}__code-actions`);this.resendBtn=el("button",`${t}__resend`),this.resendBtn.type="button",this.resendBtn.addEventListener("click",()=>{this.resendBtn.disabled||(this.dispatchEvent(new CustomEvent("db-resend",{detail:{carrier:this.carrier,phone:this.phone},bubbles:!0,composed:!0})),this.hasAttribute("manual")||this.startTimer(this.countdown))}),this.verifyBtn=document.createElement("db-button"),this.verifyBtn.setAttribute("variant","primary"),this.verifyBtn.setAttribute("full-width",""),this.verifyBtn.addEventListener("db-click",t=>{t.stopPropagation(),this.requestVerify()}),l.append(this.resendBtn,this.verifyBtn),this.codeBlock.append(a,this.otpInput,l),this.errorEl=el("p",`${t}__error`),this.errorEl.hidden=!0;const c=el("div",`${t}__verified`);c.dataset.role="verified";const u=el("span",`${t}__verified-badge`);u.textContent=i("verify.done");const p=document.createElement("p");p.className=`${t}__verified-text`,p.textContent=i("verify.phoneDone"),c.append(u,p),this.append(s,o,h,this.codeBlock,this.errorEl,c)}sync(){const t="designbase-wc-phone-verify",e=this.size,i=this.step,s=this.hasAttribute("disabled"),r=function parseCarriers(t){if(!t)return DEFAULT_CARRIERS();try{const e=JSON.parse(t);return Array.isArray(e)&&e.length?e:DEFAULT_CARRIERS()}catch{return DEFAULT_CARRIERS()}}(this.getAttribute("carrier-options")),n=this.getAttribute("code-length")||"6";this.className=[t,`${t}--${e}`,`${t}--step-${i}`,s&&`${t}--disabled`,this.hasAttribute("error")&&`${t}--error`].filter(Boolean).join(" ");const o=this.querySelector('[data-role="title"]'),h=this.querySelector('[data-role="description"]');o.textContent=this.getAttribute("title")||"휴대폰 인증",h.textContent=this.getAttribute("description")||"본인 명의의 휴대폰 번호를 입력하고 인증번호를 받아 주세요.",this.carrierSelect.setAttribute("options",JSON.stringify(r)),this.carrierSelect.setAttribute("value",this.carrier),this.carrierSelect.setAttribute("size",e),this.carrierSelect.toggleAttribute("disabled",s||"verified"===i);const a=this.getAttribute("phone")||"";this.phoneInput.value=a,this.phoneInput.setAttribute("size",e),this.phoneInput.toggleAttribute("disabled",s||"phone"!==i),this.phoneInput.toggleAttribute("error",this.hasAttribute("error")&&"phone"===i),this.sendBtn.setAttribute("size",e),this.sendBtn.textContent=this.getAttribute("send-label")||"인증번호 받기",this.sendBtn.toggleAttribute("disabled",s||"phone"!==i||!this.isPhoneValid()),this.sendBtn.toggleAttribute("loading",this.hasAttribute("sending")),this.otpInput.setAttribute("length",n),this.otpInput.setAttribute("size",e),this.otpInput.setAttribute("value",this.getAttribute("code")||""),this.otpInput.toggleAttribute("disabled",s||"code"!==i),this.otpInput.toggleAttribute("error",this.hasAttribute("error")&&"code"===i),this.resendBtn.textContent=this.getAttribute("resend-label")||"재전송",this.verifyBtn.setAttribute("size",e),this.verifyBtn.textContent=this.getAttribute("verify-label")||"인증하기",this.verifyBtn.toggleAttribute("disabled",s||(this.getAttribute("code")||"").length<Number(n)),this.verifyBtn.toggleAttribute("loading",this.hasAttribute("verifying")),this.codeBlock.hidden="phone"===i;this.querySelector('[data-role="verified"]').hidden="verified"!==i;const d=this.getAttribute("error-message")||"";this.errorEl.textContent=d,this.errorEl.hidden=!this.hasAttribute("error")||!d}isPhoneValid(){return/^01[016789]\d{7,8}$/.test(this.phone)&&Boolean(this.carrier)}requestVerify(){const t=(this.code||this.otpInput.value).replace(/\D/g,""),e=Number(this.getAttribute("code-length")||6);"code"!==this.step||t.length!==e||this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("db-verify",{detail:{carrier:this.carrier,phone:this.phone,code:t},bubbles:!0,composed:!0}))}}customElements.get("db-phone-verify")||customElements.define("db-phone-verify",DbPhoneVerify);export{DbPhoneVerify};

package/dist/esm/components/db-plan-overview.d.ts

@@ -0,0 +1,26 @@
+import { DbElement } from '../core/base-element.js';
+import './db-button.js';
+
+interface DbPlanFeature {
+    id: string;
+    label: string;
+    allowed: boolean;
+}
+/** Presentation of server-supplied entitlements. Never grants access or changes subscriptions. */
+declare class DbPlanOverview extends DbElement {
+    private featureData;
+    static get observedAttributes(): string[];
+    get features(): DbPlanFeature[];
+    set features(value: DbPlanFeature[]);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-plan-overview': DbPlanOverview;
+    }
+}
+
+export { DbPlanOverview };
+export type { DbPlanFeature };

package/dist/esm/components/db-plan-overview.js

@@ -0,0 +1 @@
+import{DbElement as t}from"../core/base-element.js";import{textNode as e,creditAction as a,replaceView as i,creditNumber as s,creditText as r}from"../core/credit-ui.js";import{t as n}from"../core/i18n.js";import"./db-button.js";class DbPlanOverview extends t{constructor(){super(...arguments),this.featureData=[]}static get observedAttributes(){return["name","price-label","period-label","used","limit","unit","label","manage-label","loading","error","disabled"]}get features(){return this.featureData.map(t=>({...t}))}set features(t){const e=new Set;this.featureData=Array.isArray(t)?t.filter(t=>!(!t||"string"!=typeof t.id||!t.id||e.has(t.id)||"string"!=typeof t.label||"boolean"!=typeof t.allowed)&&(e.add(t.id),!0)).map(t=>({...t})):[],this.isConnected&&this.render()}connectedCallback(){this.upgradeProperties(["features"]),this.cleanups.listen(this,"db-click",t=>{if(!(t.target instanceof HTMLElement))return;if(this.hasAttribute("loading")||this.hasAttribute("disabled"))return;const e=t.target.dataset.action;"retry"===e&&this.dbEmit("retry"),"manage"!==e||this.hasAttribute("error")||this.dbEmit("manage")}),this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){const t="designbase-wc-plan-overview";this.classList.add(t);const l=this.hasAttribute("loading"),o=this.getAttribute("error");this.setAttribute("aria-busy",String(l));const d=e("div",`${t}__header`,"");d.append(e("h3",`${t}__label`,this.getAttribute("label")||n("plan.current")));const u=[d];if(l||o){const s=e("p",`${t}__message`,l?n("loading"):o||"");return s.setAttribute("role",l?"status":"alert"),u.push(s),l||u.push(a("retry",n("plan.retry"),this.hasAttribute("disabled"))),void i(this,...u)}const b=e("strong",`${t}__name`,this.getAttribute("name")||"—"),p=e("p",`${t}__price`,this.getAttribute("price-label")||"");this.hasAttribute("period-label")&&p.append(e("span","",` / ${this.getAttribute("period-label")}`)),u.push(b,p);const h=s(this.getAttribute("used")),c=s(this.getAttribute("limit")),g=e("div",`${t}__usage`,"");if(g.append(e("span","",`${n("plan.usage")} ${r(h)} / ${r(c)} ${this.getAttribute("unit")||n("credits.unit")}`)),null!==h&&null!==c&&c>0){const t=document.createElement("progress");t.max=c,t.value=Math.min(h,c),t.setAttribute("aria-label",n("plan.usage")),g.append(t)}u.push(g);const m=e("ul",`${t}__features`,"");for(const a of this.featureData){const i=e("li","","");i.dataset.allowed=String(a.allowed),i.append(e("span","",a.label),e("span",`${t}__permission`,n(a.allowed?"plan.allowed":"plan.locked"))),m.append(i)}u.push(m),this.hasAttribute("manage-label")&&u.push(a("manage",this.getAttribute("manage-label")||n("plan.manage"),this.hasAttribute("disabled"))),i(this,...u)}}customElements.get("db-plan-overview")||customElements.define("db-plan-overview",DbPlanOverview);export{DbPlanOverview};

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

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

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

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";import{coerceToContract as t}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PROGRESS_STEP_SIZES as s}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbProgressStep extends HTMLElement{static get observedAttributes(){return["items","size","layout","current-step","clickable","full-width","disabled"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}resolveStatus(e,t){const s=t.status??"pending";if("pending"!==s)return s;const n=Number(this.getAttribute("current-step")||0);return e<n?"completed":e===n?"active":"pending"}iconSize(e){return"s"===e?12:"l"===e?20:16}renderIndicatorContent(t,s,n){const i=document.createElement("div");if(i.className="designbase-wc-progress-step__icon","completed"===t)i.append(e("done",this.iconSize(n)));else if("error"===t)i.append(e("warning-filled",this.iconSize(n)));else{const e=document.createElement("span");e.className="designbase-wc-progress-step__number",e.textContent=String(s+1),i.append(e)}return i}handleStepClick(e,t){const s=this.hasAttribute("disabled"),n=this.hasAttribute("clickable");s||e.disabled||!n||this.dispatchEvent(new CustomEvent("db-step-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}render(){const e=t(this.getAttribute("size"),s,"m"),n=this.getAttribute("layout")||"horizontal",i=this.hasAttribute("clickable"),r=this.hasAttribute("disabled"),a=this.items;this.className=["designbase-wc-progress-step",`designbase-wc-progress-step--${e}`,`designbase-wc-progress-step--${n}`,i&&"designbase-wc-progress-step--clickable",this.hasAttribute("full-width")&&"designbase-wc-progress-step--full-width",r&&"designbase-wc-progress-step--disabled"].filter(Boolean).join(" "),this.replaceChildren(),a.forEach((t,s)=>{const n=this.resolveStatus(s,t),c=s===a.length-1,d=i&&!r&&!t.disabled,o=i&&(r||Boolean(t.disabled)),p="completed"===(s>0?this.resolveStatus(s-1,a[s-1]):"pending")?"completed":n,l=document.createElement("div");l.className=["designbase-wc-progress-step__item",`designbase-wc-progress-step__item--${n}`,d&&"designbase-wc-progress-step__item--clickable",t.disabled&&"designbase-wc-progress-step__item--disabled"].filter(Boolean).join(" ");const m=document.createElement("div");m.className="designbase-wc-progress-step__indicator-container";const b=document.createElement("div");if(b.className="designbase-wc-progress-step__indicator",o&&(b.setAttribute("role","button"),b.setAttribute("aria-disabled","true")),d?(b.tabIndex=0,b.setAttribute("role","button"),b.setAttribute("aria-label",`${t.title} 단계로 이동`),b.addEventListener("click",()=>this.handleStepClick(t,s)),b.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleStepClick(t,s))})):b.tabIndex=-1,"active"===n){const e=document.createElement("div");e.className="designbase-wc-progress-step__pulse",b.append(e)}if(b.append(this.renderIndicatorContent(n,s,e)),m.append(b),!c){const e=document.createElement("div");e.className=["designbase-wc-progress-step__connector",`designbase-wc-progress-step__connector--${p}`].join(" "),m.append(e)}l.append(m);const g=document.createElement("div");g.className="designbase-wc-progress-step__content";const u=document.createElement("div");u.className="designbase-wc-progress-step__header";const h=document.createElement("h3");if(h.className="designbase-wc-progress-step__title",h.textContent=t.title,u.append(h),g.append(u),t.description){const e=document.createElement("p");e.className="designbase-wc-progress-step__description",e.textContent=t.description,g.append(e)}if(t.timestamp){const e=document.createElement("span");e.className="designbase-wc-progress-step__timestamp",e.textContent=t.timestamp,g.append(e)}l.append(g),this.append(l)})}}customElements.get("db-progress-step")||customElements.define("db-progress-step",DbProgressStep);export{DbProgressStep};
+import{dbFormat as e}from"../core/i18n.js";import{createDbIcon as t}from"./db-icons.js";import{coerceToContract as s}from"../node_modules/@designbasekorea/ui-contracts/dist/primitives.js";import{PROGRESS_STEP_SIZES as n}from"../node_modules/@designbasekorea/ui-contracts/dist/components.js";class DbProgressStep extends HTMLElement{static get observedAttributes(){return["items","size","layout","current-step","clickable","full-width","disabled"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}resolveStatus(e,t){const s=t.status??"pending";if("pending"!==s)return s;const n=Number(this.getAttribute("current-step")||0);return e<n?"completed":e===n?"active":"pending"}iconSize(e){return"s"===e?12:"l"===e?20:16}renderIndicatorContent(e,s,n){const i=document.createElement("div");if(i.className="designbase-wc-progress-step__icon","completed"===e)i.append(t("done",this.iconSize(n)));else if("error"===e)i.append(t("warning-filled",this.iconSize(n)));else{const e=document.createElement("span");e.className="designbase-wc-progress-step__number",e.textContent=String(s+1),i.append(e)}return i}handleStepClick(e,t){const s=this.hasAttribute("disabled"),n=this.hasAttribute("clickable");s||e.disabled||!n||this.dispatchEvent(new CustomEvent("db-step-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}render(){const t=s(this.getAttribute("size"),n,"m"),i=this.getAttribute("layout")||"horizontal",r=this.hasAttribute("clickable"),a=this.hasAttribute("disabled"),c=this.items;this.className=["designbase-wc-progress-step",`designbase-wc-progress-step--${t}`,`designbase-wc-progress-step--${i}`,r&&"designbase-wc-progress-step--clickable",this.hasAttribute("full-width")&&"designbase-wc-progress-step--full-width",a&&"designbase-wc-progress-step--disabled"].filter(Boolean).join(" "),this.replaceChildren(),c.forEach((s,n)=>{const i=this.resolveStatus(n,s),o=n===c.length-1,d=r&&!a&&!s.disabled,p=r&&(a||Boolean(s.disabled)),l="completed"===(n>0?this.resolveStatus(n-1,c[n-1]):"pending")?"completed":i,m=document.createElement("div");m.className=["designbase-wc-progress-step__item",`designbase-wc-progress-step__item--${i}`,d&&"designbase-wc-progress-step__item--clickable",s.disabled&&"designbase-wc-progress-step__item--disabled"].filter(Boolean).join(" ");const b=document.createElement("div");b.className="designbase-wc-progress-step__indicator-container";const g=document.createElement("div");if(g.className="designbase-wc-progress-step__indicator",p&&(g.setAttribute("role","button"),g.setAttribute("aria-disabled","true")),d?(g.tabIndex=0,g.setAttribute("role","button"),g.setAttribute("aria-label",e("{0} 단계로 이동",[s.title])),g.addEventListener("click",()=>this.handleStepClick(s,n)),g.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleStepClick(s,n))})):g.tabIndex=-1,"active"===i){const e=document.createElement("div");e.className="designbase-wc-progress-step__pulse",g.append(e)}if(g.append(this.renderIndicatorContent(i,n,t)),b.append(g),!o){const e=document.createElement("div");e.className=["designbase-wc-progress-step__connector",`designbase-wc-progress-step__connector--${l}`].join(" "),b.append(e)}m.append(b);const u=document.createElement("div");u.className="designbase-wc-progress-step__content";const h=document.createElement("div");h.className="designbase-wc-progress-step__header";const _=document.createElement("h3");if(_.className="designbase-wc-progress-step__title",_.textContent=s.title,h.append(_),u.append(h),s.description){const e=document.createElement("p");e.className="designbase-wc-progress-step__description",e.textContent=s.description,u.append(e)}if(s.timestamp){const e=document.createElement("span");e.className="designbase-wc-progress-step__timestamp",e.textContent=s.timestamp,u.append(e)}m.append(u),this.append(m)})}}customElements.get("db-progress-step")||customElements.define("db-progress-step",DbProgressStep);export{DbProgressStep};

package/dist/esm/components/db-progressive-blur.d.ts

@@ -0,0 +1,35 @@
+import { ProgressiveBlurPosition, ProgressiveBlurSize } from '../ui-contracts/dist/components.d.js';
+
+declare class DbProgressiveBlur extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private topPanel?;
+    private bottomPanel?;
+    private mainPanel?;
+    get position(): ProgressiveBlurPosition;
+    set position(value: ProgressiveBlurPosition);
+    get size(): ProgressiveBlurSize;
+    set size(value: ProgressiveBlurSize);
+    get height(): string;
+    set height(value: string);
+    get width(): string;
+    set width(value: string);
+    get tint(): string;
+    set tint(value: string);
+    get blurLevels(): number[];
+    set blurLevels(value: number[]);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private build;
+    private createEdgePanel;
+    private renderLayers;
+    private sync;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-progressive-blur': DbProgressiveBlur;
+    }
+}
+
+export { DbProgressiveBlur };