@designbasekorea/ui-wc 0.2.1 → 0.3.0

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

@@ -0,0 +1,29 @@
+type DbTimelineItem = {
+    id: string;
+    title?: string;
+    description?: string;
+    timestamp?: string;
+    icon?: string;
+    number?: number;
+    color?: string;
+    status?: 'completed' | 'active' | 'pending';
+    disabled?: boolean;
+};
+declare class DbTimeline extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get items(): DbTimelineItem[];
+    set items(value: DbTimelineItem[] | string);
+    private getItemPosition;
+    private handleItemClick;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-timeline': DbTimeline;
+    }
+}
+
+export { DbTimeline };
+export type { DbTimelineItem };

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

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

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

@@ -0,0 +1,23 @@
+declare class DbToast extends HTMLElement {
+    static get observedAttributes(): string[];
+    private timeoutId;
+    private progressInterval;
+    private closeTimerId;
+    private closed;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private clearTimers;
+    private startTimers;
+    /** 토스트를 닫고(애니메이션 포함) auto-remove 설정 시 DOM에서 제거합니다. */
+    close(): void;
+    private iconForStatus;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-toast': DbToast;
+    }
+}
+
+export { DbToast };

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

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

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

@@ -0,0 +1,35 @@
+declare class DbToggle extends HTMLElement {
+    static readonly formAssociated = true;
+    static get observedAttributes(): string[];
+    private readonly internals;
+    private root?;
+    private labelEl?;
+    private built;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get name(): string;
+    set name(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get readOnly(): boolean;
+    set readOnly(value: boolean);
+    get size(): string;
+    set size(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private get hasLabel();
+    private syncFormValue;
+    private build;
+    private handleClick;
+    private syncState;
+    private syncClasses;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-toggle': DbToggle;
+    }
+}
+
+export { DbToggle };

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

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

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

@@ -0,0 +1,25 @@
+interface DbToolbarItemData {
+    id: string;
+    type?: 'button' | 'separator';
+    label?: string;
+    disabled?: boolean;
+    active?: boolean;
+    tooltip?: string;
+}
+declare class DbToolbar extends HTMLElement {
+    static get observedAttributes(): string[];
+    get items(): DbToolbarItemData[];
+    set items(value: DbToolbarItemData[] | string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private syncHostClasses;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-toolbar': DbToolbar;
+    }
+}
+
+export { DbToolbar };
+export type { DbToolbarItemData };

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

@@ -0,0 +1 @@
+class DbToolbar extends HTMLElement{static get observedAttributes(){return["items","size","variant","position","full-width","shadow","rounded","fixed"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}connectedCallback(){this.render()}attributeChangedCallback(t){"items"!==t?this.syncHostClasses():this.render()}syncHostClasses(){const t=this.getAttribute("size")||"m",e=this.getAttribute("variant")||"default",s=this.getAttribute("position")||"top";this.className=["designbase-wc-toolbar",`designbase-wc-toolbar--size-${t}`,`designbase-wc-toolbar--variant-${e}`,`designbase-wc-toolbar--position-${s}`,this.hasAttribute("full-width")&&"designbase-wc-toolbar--full-width",this.hasAttribute("fixed")&&"designbase-wc-toolbar--fixed",this.hasAttribute("shadow")&&"designbase-wc-toolbar--shadow",this.hasAttribute("rounded")&&"designbase-wc-toolbar--rounded"].filter(Boolean).join(" ")}render(){this.syncHostClasses(),this.setAttribute("role","toolbar");let t=this.querySelector(".designbase-wc-toolbar__content");t?t.replaceChildren():(t=document.createElement("div"),t.className="designbase-wc-toolbar__content",this.replaceChildren(t));const e=document.createElement("div");e.className="designbase-wc-toolbar__group",t.append(e),this.items.forEach(t=>{if("separator"===t.type){const t=document.createElement("div");return t.className="designbase-wc-toolbar__item designbase-wc-toolbar__item--separator",t.setAttribute("role","separator"),void e.append(t)}const s=document.createElement("button");s.type="button",s.className=["designbase-wc-toolbar__item","designbase-wc-toolbar__item--button",t.active&&"designbase-wc-toolbar__item--active",t.disabled&&"designbase-wc-toolbar__item--disabled"].filter(Boolean).join(" "),s.textContent=t.label||t.id,s.disabled=Boolean(t.disabled),t.tooltip&&(s.title=t.tooltip),s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:t},bubbles:!0,composed:!0}))}),e.append(s)})}}customElements.get("db-toolbar")||customElements.define("db-toolbar",DbToolbar);export{DbToolbar};

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

@@ -0,0 +1,58 @@
+declare class DbTooltip extends HTMLElement {
+    static get observedAttributes(): string[];
+    private tooltipId;
+    private trigger?;
+    private tooltip?;
+    private contentEl?;
+    private arrow?;
+    private visible;
+    private showTimer?;
+    private hideTimer?;
+    private repositionRaf?;
+    private enterRaf?;
+    private removalTimer?;
+    get content(): string;
+    set content(value: string);
+    get position(): string;
+    set position(value: string);
+    get size(): string;
+    set size(value: string);
+    get variant(): string;
+    set variant(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get alwaysShow(): boolean;
+    set alwaysShow(value: boolean);
+    get delay(): number;
+    get hideDelay(): number;
+    get maxWidth(): number;
+    get showArrow(): boolean;
+    private childObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private clearTimers;
+    private groupOf;
+    private resolvedPosition;
+    private collectTriggerChildren;
+    private ensureTrigger;
+    private mountTriggerChildren;
+    private render;
+    private ensureTooltip;
+    private syncTooltipClasses;
+    private calculatePosition;
+    private setVisible;
+    private hideTooltip;
+    private removeTooltip;
+    private handleShow;
+    private handleHide;
+    private handleKeyDown;
+    private handleReposition;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-tooltip': DbTooltip;
+    }
+}
+
+export { DbTooltip };

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

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

package/dist/esm/components/db-top-banner.d.ts

@@ -0,0 +1,17 @@
+declare class DbTopBanner extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private isDarkBg;
+    private createLinkButton;
+    private createCloseButton;
+    private createBadge;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-top-banner': DbTopBanner;
+    }
+}
+
+export { DbTopBanner };

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

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

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

@@ -0,0 +1,54 @@
+type TutorialStep = {
+    id: string;
+    target: string;
+    title?: string;
+    content?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
+};
+declare class DbTutorial extends HTMLElement {
+    static get observedAttributes(): string[];
+    private root?;
+    private overlayEl?;
+    private popoverEl?;
+    private closeButtonEl?;
+    private titleEl?;
+    private descriptionEl?;
+    private prevButtonEl?;
+    private nextButtonEl?;
+    private indicatorEl?;
+    private internalStep;
+    private targetElement;
+    private keyHandler;
+    private resizeHandler;
+    private isMounted;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get steps(): TutorialStep[];
+    set steps(value: TutorialStep[] | string);
+    private parseSteps;
+    private syncStepFromAttribute;
+    private isOpenRequested;
+    private getCurrentStepData;
+    private syncOpenState;
+    private mount;
+    private unmount;
+    private ensureStructure;
+    private attachListeners;
+    private detachListeners;
+    private clearTargetHighlight;
+    private updateTargetElement;
+    private emitStepChange;
+    private goToStep;
+    private handlePrev;
+    private handleNext;
+    private handleEnd;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-tutorial': DbTutorial;
+    }
+}
+
+export { DbTutorial };

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

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

package/dist/esm/components/db-video-player.d.ts

@@ -0,0 +1,67 @@
+declare class DbVideoPlayer extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private videoEl?;
+    private progressEl?;
+    private progressBarEl?;
+    private progressHandleEl?;
+    private centerPlayEl?;
+    private togglePlayEl?;
+    private muteButtonEl?;
+    private fullscreenButtonEl?;
+    private volumeInputEl?;
+    private timeCurrentEl?;
+    private timeDurationEl?;
+    private timeEl?;
+    private overlayEl?;
+    private dimOverlayEl?;
+    private volumeWrapEl?;
+    private rafId;
+    private playlistIndex;
+    private isFullscreen;
+    private showControlsOverlay;
+    private isPlaying;
+    private isMuted;
+    private volume;
+    private lastVolumeBeforeMute;
+    private currentTime;
+    private duration;
+    private isLoading;
+    private error;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private getBool;
+    private getPlaylist;
+    private getCurrentSrc;
+    private formatTime;
+    private iconButton;
+    private skipButton;
+    private syncFromAttributes;
+    private loadVideoSource;
+    private bindVideoEvents;
+    private togglePlay;
+    private toggleMute;
+    private seekBy;
+    private toggleFullscreen;
+    private onFullscreenChange;
+    private onMouseEnter;
+    private onMouseLeave;
+    private build;
+    private get titleEl();
+    private get descEl();
+    private updateProgress;
+    private updateTime;
+    private updateVolumeUI;
+    private startProgressAnimation;
+    private stopProgressAnimation;
+    private updatePlayIcons;
+    private updateUI;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-video-player': DbVideoPlayer;
+    }
+}
+
+export { DbVideoPlayer };

package/dist/esm/components/db-video-player.js

@@ -0,0 +1 @@
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-video-player",s=20;class DbVideoPlayer extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.rafId=null,this.playlistIndex=0,this.isFullscreen=!1,this.showControlsOverlay=!1,this.isPlaying=!1,this.isMuted=!1,this.volume=1,this.lastVolumeBeforeMute=1,this.currentTime=0,this.duration=0,this.isLoading=!1,this.error=null,this.onFullscreenChange=()=>{this.isFullscreen=document.fullscreenElement===this,this.dispatchEvent(new CustomEvent("db-fullscreen-change",{detail:{isFullscreen:this.isFullscreen},bubbles:!0,composed:!0})),this.updateUI()},this.onMouseEnter=()=>{this.showControlsOverlay=!0,this.updateUI()},this.onMouseLeave=()=>{this.showControlsOverlay=!1,this.updateUI()}}static get observedAttributes(){return["src","poster","title","description","size","variant","theme","auto-play","loop","muted","show-controls","enable-fullscreen","show-progress","show-time","show-volume","playlist","current-index"]}connectedCallback(){this.built||(this.built=!0,this.build(),this.bindVideoEvents()),this.syncFromAttributes(),this.updateUI(),document.addEventListener("fullscreenchange",this.onFullscreenChange),this.addEventListener("mouseenter",this.onMouseEnter),this.addEventListener("mouseleave",this.onMouseLeave)}disconnectedCallback(){document.removeEventListener("fullscreenchange",this.onFullscreenChange),this.removeEventListener("mouseenter",this.onMouseEnter),this.removeEventListener("mouseleave",this.onMouseLeave),this.stopProgressAnimation()}attributeChangedCallback(t){this.built&&("src"!==t&&"playlist"!==t&&"current-index"!==t?("muted"===t&&this.videoEl&&(this.videoEl.muted=this.getBool("muted")),this.updateUI()):this.loadVideoSource())}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}getPlaylist(){try{const t=this.getAttribute("playlist"),e=t?JSON.parse(t):[];return Array.isArray(e)?e:[]}catch{return[]}}getCurrentSrc(){const t=this.getPlaylist();if(t.length>0){const e=Number(this.getAttribute("current-index")||this.playlistIndex||0);return t[Math.max(0,Math.min(t.length-1,e))]}return this.getAttribute("src")||""}formatTime(t){if(!Number.isFinite(t)||t<0)return"0:00";return`${Math.floor(t/60)}:${Math.floor(t%60).toString().padStart(2,"0")}`}iconButton(s,i,l){const n=document.createElement("button");return n.type="button",n.className=`${e}__control-button`,n.append(t(s,i)),n.addEventListener("click",t=>{t.stopPropagation(),l()}),n}skipButton(t,s){const i=document.createElement("button");return i.type="button",i.className=`${e}__skip-button`,i.textContent=t,i.setAttribute("aria-label",s<0?"10초 되감기":"10초 빨리감기"),i.addEventListener("click",t=>{t.stopPropagation(),this.seekBy(s)}),i}syncFromAttributes(){this.playlistIndex=Number(this.getAttribute("current-index")||0),this.isMuted=this.getBool("muted"),this.volume=this.isMuted?0:1,this.lastVolumeBeforeMute=this.volume>0?this.volume:1,this.loadVideoSource()}loadVideoSource(){if(!this.videoEl)return;const t=this.getCurrentSrc();if(!t)return;const e=new URL(t,window.location.href).href;this.videoEl.src!==e&&(this.videoEl.src=t,this.videoEl.load()),this.videoEl.poster=this.getAttribute("poster")||"",this.videoEl.autoplay=this.getBool("auto-play"),this.videoEl.loop=this.getBool("loop"),this.videoEl.muted=this.getBool("muted"),this.videoEl.playsInline=!0}bindVideoEvents(){const t=this.videoEl;t&&(t.addEventListener("play",()=>{this.isPlaying=!0,this.startProgressAnimation(),this.dispatchEvent(new CustomEvent("db-play",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("pause",()=>{this.isPlaying=!1,this.stopProgressAnimation(),this.dispatchEvent(new CustomEvent("db-pause",{bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("timeupdate",()=>{this.currentTime=t.currentTime,this.duration=Number.isFinite(t.duration)?t.duration:0,this.dispatchEvent(new CustomEvent("db-time-update",{detail:{currentTime:this.currentTime,duration:this.duration},bubbles:!0,composed:!0})),this.updateProgress(),this.updateTime()}),t.addEventListener("volumechange",()=>{this.volume=t.volume,this.isMuted=t.muted||0===t.volume,!this.isMuted&&this.volume>0&&(this.lastVolumeBeforeMute=this.volume),this.dispatchEvent(new CustomEvent("db-volume-change",{detail:{volume:this.volume},bubbles:!0,composed:!0})),this.updateVolumeUI()}),t.addEventListener("ended",()=>{this.isPlaying=!1,this.stopProgressAnimation(),this.dispatchEvent(new CustomEvent("db-ended",{bubbles:!0,composed:!0}));const e=this.getPlaylist(),s=this.playlistIndex+1;e.length>0&&s<e.length&&(this.playlistIndex=s,this.loadVideoSource(),t.play()),this.updateUI()}),t.addEventListener("error",()=>{this.error="비디오를 재생할 수 없습니다.",this.dispatchEvent(new CustomEvent("db-error",{detail:{error:this.error},bubbles:!0,composed:!0})),this.updateUI()}),t.addEventListener("loadstart",()=>{this.isLoading=!0,this.error=null,this.updateUI()}),t.addEventListener("loadedmetadata",()=>{this.duration=Number.isFinite(t.duration)?t.duration:0,this.updateTime()}),t.addEventListener("canplay",()=>{this.isLoading=!1,this.updateUI()}),t.addEventListener("click",()=>this.togglePlay()))}togglePlay(){this.videoEl&&(this.videoEl.paused?this.videoEl.play():this.videoEl.pause())}toggleMute(){if(this.videoEl){if(this.isMuted)return this.videoEl.muted=!1,void(this.videoEl.volume=this.lastVolumeBeforeMute>0?this.lastVolumeBeforeMute:1);this.videoEl.volume>0&&(this.lastVolumeBeforeMute=this.videoEl.volume),this.videoEl.muted=!0,this.videoEl.volume=0}}seekBy(t){if(!this.videoEl)return;const e=Number.isFinite(this.videoEl.duration)?this.videoEl.duration:0,s=e>0?e:Number.MAX_SAFE_INTEGER,i=Math.max(0,Math.min(s,this.videoEl.currentTime+t));this.videoEl.currentTime=i}toggleFullscreen(){this.getBool("enable-fullscreen",!0)&&(this.isFullscreen?document.exitFullscreen?.():this.requestFullscreen?.())}build(){this.videoEl=document.createElement("video"),this.videoEl.className=`${e}__video`;const t=document.createElement("div");t.className=`${e}__loading`;const i=document.createElement("div");i.className=`${e}__spinner`,t.append(i);const l=document.createElement("div");l.className=`${e}__error`;const n=document.createElement("p");n.textContent="비디오를 재생할 수 없습니다.";const o=document.createElement("button");o.type="button",o.textContent="다시 시도",o.addEventListener("click",()=>{this.error=null,this.loadVideoSource(),this.updateUI()}),l.append(n,o),this.dimOverlayEl=document.createElement("div"),this.dimOverlayEl.className=`${e}__dim-overlay`,this.overlayEl=document.createElement("div"),this.overlayEl.className=`${e}__overlay`;const r=document.createElement("div");r.className=`${e}__top-controls`;const a=document.createElement("div");a.className=`${e}__title`;const h=document.createElement("h3"),u=document.createElement("p");a.append(h,u),r.append(a),this._titleEl=h,this._descEl=u;const d=document.createElement("div");d.className=`${e}__center-controls`;const c=this.skipButton("-10",-10);this.centerPlayEl=document.createElement("button"),this.centerPlayEl.type="button",this.centerPlayEl.className=`${e}__play-button`,this.centerPlayEl.addEventListener("click",t=>{t.stopPropagation(),this.togglePlay()});const m=this.skipButton("+10",10);d.append(c,this.centerPlayEl,m);const E=document.createElement("div");E.className=`${e}__bottom-controls`,this.progressEl=document.createElement("div"),this.progressEl.className=`${e}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${e}__progress-bar`,this.progressHandleEl=document.createElement("div"),this.progressHandleEl.className=`${e}__progress-handle`,this.progressEl.append(this.progressBarEl,this.progressHandleEl),this.progressEl.addEventListener("click",t=>{if(!this.videoEl||!Number.isFinite(this.duration)||this.duration<=0)return;const e=this.progressEl.getBoundingClientRect(),s=(t.clientX-e.left)/e.width;this.videoEl.currentTime=s*this.duration});const p=document.createElement("div");p.className=`${e}__controls`;const v=document.createElement("div");v.className=`${e}__left-controls`,this.togglePlayEl=this.iconButton("play",s,()=>this.togglePlay()),this.volumeWrapEl=document.createElement("div"),this.volumeWrapEl.className=`${e}__volume`,this.muteButtonEl=this.iconButton("volume-up",s,()=>this.toggleMute());const g=document.createElement("div");g.className=`${e}__volume-slider`,this.volumeInputEl=document.createElement("input"),this.volumeInputEl.type="range",this.volumeInputEl.min="0",this.volumeInputEl.max="1",this.volumeInputEl.step="0.1",this.volumeInputEl.addEventListener("input",()=>{if(!this.videoEl||!this.volumeInputEl)return;const t=parseFloat(this.volumeInputEl.value);t>0&&(this.lastVolumeBeforeMute=t),this.videoEl.volume=t,this.videoEl.muted=0===t}),g.append(this.volumeInputEl),this.volumeWrapEl.append(this.muteButtonEl,g),this.timeEl=document.createElement("div"),this.timeEl.className=`${e}__time`,this.timeCurrentEl=document.createElement("span");const b=document.createElement("span");b.textContent="/",this.timeDurationEl=document.createElement("span"),this.timeEl.append(this.timeCurrentEl,b,this.timeDurationEl),v.append(this.togglePlayEl,this.volumeWrapEl,this.timeEl);const y=document.createElement("div");y.className=`${e}__right-controls`,this.fullscreenButtonEl=this.iconButton("expand",s,()=>this.toggleFullscreen()),y.append(this.fullscreenButtonEl),p.append(v,y),E.append(this.progressEl,p),this.overlayEl.append(r,d,E),this.append(this.videoEl,t,l,this.dimOverlayEl,this.overlayEl)}get titleEl(){return this._titleEl}get descEl(){return this._descEl}updateProgress(){const t=this.duration>0?this.currentTime/this.duration*100:0;this.progressBarEl&&(this.progressBarEl.style.width=`${t}%`),this.progressHandleEl&&(this.progressHandleEl.style.left=`${t}%`)}updateTime(){this.timeCurrentEl&&(this.timeCurrentEl.textContent=this.formatTime(this.currentTime)),this.timeDurationEl&&(this.timeDurationEl.textContent=this.formatTime(this.duration))}updateVolumeUI(){const e=this.isMuted?0:this.volume;this.volumeInputEl&&(this.volumeInputEl.value=String(e)),this.muteButtonEl&&this.muteButtonEl.replaceChildren(t(this.isMuted||0===e?"mute-filled":"volume-up",s))}startProgressAnimation(){this.stopProgressAnimation();const tick=()=>{!this.videoEl||this.videoEl.paused||this.videoEl.ended||(this.currentTime=this.videoEl.currentTime,this.duration=Number.isFinite(this.videoEl.duration)?this.videoEl.duration:0,this.updateProgress(),this.updateTime(),this.rafId=requestAnimationFrame(tick))};this.rafId=requestAnimationFrame(tick)}stopProgressAnimation(){null!==this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)}updatePlayIcons(){const e=this.isPlaying?"pause":"play";this.centerPlayEl&&this.centerPlayEl.replaceChildren(t(e,48)),this.togglePlayEl&&this.togglePlayEl.replaceChildren(t(e,s))}updateUI(){const i=this.getAttribute("size")||"m",l=this.getAttribute("variant")||"default",n=this.getAttribute("theme")||"auto",o=this.getBool("show-controls",!0),r=this.getBool("show-progress",!0),a=this.getBool("show-time",!0),h=this.getBool("show-volume",!0),u=this.getBool("enable-fullscreen",!0);this.className=[e,`${e}--size-${i}`,`${e}--variant-${l}`,`${e}--theme-${n}`,this.isPlaying&&`${e}--playing`,!this.isPlaying&&`${e}--paused`,this.isMuted&&`${e}--muted`,this.isLoading&&`${e}--loading`,this.error&&`${e}--error`,o&&this.showControlsOverlay&&`${e}--show-controls`,this.isFullscreen&&`${e}--fullscreen`].filter(Boolean).join(" ");const d=this.getAttribute("title"),c=this.getAttribute("description");this.titleEl&&(d?(this.titleEl.textContent=d,this.titleEl.hidden=!1):this.titleEl.hidden=!0),this.descEl&&(c?(this.descEl.textContent=c,this.descEl.hidden=!1):this.descEl.hidden=!0),this.overlayEl&&(this.overlayEl.hidden=!o),this.dimOverlayEl&&(this.dimOverlayEl.hidden=!o),this.progressEl&&(this.progressEl.hidden=!r),this.timeEl&&(this.timeEl.hidden=!a),this.volumeWrapEl&&(this.volumeWrapEl.hidden=!h),this.fullscreenButtonEl&&(this.fullscreenButtonEl.hidden=!u),this.fullscreenButtonEl&&this.fullscreenButtonEl.replaceChildren(t(this.isFullscreen?"shrink":"expand",s)),this.updatePlayIcons(),this.updateProgress(),this.updateTime(),this.updateVolumeUI()}}customElements.get("db-video-player")||customElements.define("db-video-player",DbVideoPlayer);export{DbVideoPlayer};

package/dist/esm/components/db-youtube-player.d.ts

@@ -0,0 +1,22 @@
+declare class DbYouTubePlayer extends HTMLElement {
+    private isFullscreen;
+    private playlistIndex;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private getBool;
+    private extractVideoId;
+    private getPlaylist;
+    private getCurrentVideoId;
+    private generateEmbedUrl;
+    private onFullscreenChange;
+    private render;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-youtube-player': DbYouTubePlayer;
+    }
+}
+
+export { DbYouTubePlayer };

package/dist/esm/components/db-youtube-player.js

@@ -0,0 +1 @@
+class DbYouTubePlayer extends HTMLElement{constructor(){super(...arguments),this.isFullscreen=!1,this.playlistIndex=0,this.onFullscreenChange=()=>{this.isFullscreen=!!document.fullscreenElement,this.dispatchEvent(new CustomEvent("db-fullscreen-change",{detail:{isFullscreen:this.isFullscreen},bubbles:!0,composed:!0})),this.render()}}static get observedAttributes(){return["video-id","title","description","size","variant","theme","auto-play","loop","muted","show-controls","enable-fullscreen","enable-keyboard","enable-touch","show-subtitles","default-subtitle-lang","playback-rate","start-time","end-time","show-related-videos","show-info","show-channel-info","show-like-buttons","show-comments","playlist","current-index"]}connectedCallback(){this.style.display="block",this.playlistIndex=Number(this.getAttribute("current-index")||0),this.render(),document.addEventListener("fullscreenchange",this.onFullscreenChange)}disconnectedCallback(){document.removeEventListener("fullscreenchange",this.onFullscreenChange)}attributeChangedCallback(){this.render()}getBool(e,t=!1){if(!this.hasAttribute(e))return t;const s=this.getAttribute(e);return""===s||"true"===s}extractVideoId(e){if(!e)return"";if(11===e.length&&/^[a-zA-Z0-9_-]{11}$/.test(e))return e;const t=[/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/v\/|youtube\.com\/watch\?.*&v=)([^&\n?#]+)/,/youtube\.com\/watch\?.*v=([^&\n?#]+)/];for(const s of t){const t=e.match(s);if(t)return t[1]}return e}getPlaylist(){try{const e=this.getAttribute("playlist"),t=e?JSON.parse(e):[];return Array.isArray(t)?t:[]}catch{return[]}}getCurrentVideoId(){const e=this.getPlaylist();if(e.length>0){const t=Math.max(0,Math.min(e.length-1,this.playlistIndex));return this.extractVideoId(e[t])}return this.extractVideoId(this.getAttribute("video-id")||"")}generateEmbedUrl(e){const t=new URLSearchParams;if(this.getBool("auto-play")&&t.append("autoplay","1"),this.getBool("loop")&&t.append("loop","1"),this.getBool("muted")&&t.append("mute","1"),this.getBool("show-controls",!0)||t.append("controls","0"),this.getBool("enable-fullscreen",!0)||t.append("fs","0"),this.getBool("enable-keyboard",!0)||t.append("disablekb","1"),this.getBool("enable-touch",!0)||t.append("modestbranding","1"),this.getBool("show-subtitles")){t.append("cc_load_policy","1");const e=this.getAttribute("default-subtitle-lang")||"ko";e&&t.append("cc_lang_pref",e)}const s=this.getAttribute("playback-rate")||"1";"1"!==s&&t.append("vq",s);const n=Number(this.getAttribute("start-time")||0);n>0&&t.append("start",String(n));const o=Number(this.getAttribute("end-time")||0);o>0&&t.append("end",String(o)),this.getBool("show-related-videos",!0)||t.append("rel","0"),this.getBool("show-info",!0)||t.append("showinfo","0"),this.getBool("show-channel-info",!0)||t.append("modestbranding","1"),this.getBool("show-like-buttons",!0)||t.append("modestbranding","1"),this.getBool("show-comments",!1)||t.append("modestbranding","1");const i=this.getPlaylist().map(e=>this.extractVideoId(e)).filter(Boolean);i.length>0?t.append("playlist",i.join(",")):this.getBool("loop")&&t.append("playlist",e);const r=t.toString();return`https://www.youtube.com/embed/${e}${r?`?${r}`:""}`}render(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",s=this.getAttribute("theme")||"auto";this.className=["designbase-wc-youtube-player",`designbase-wc-youtube-player--${e}`,`designbase-wc-youtube-player--${t}`,`designbase-wc-youtube-player--${s}`,this.isFullscreen&&"designbase-wc-youtube-player--fullscreen"].filter(Boolean).join(" ");const n=this.getCurrentVideoId();if(!n){const e=document.createElement("div");return e.className="designbase-wc-youtube-player__error",e.textContent="동영상을 불러올 수 없습니다.",void this.replaceChildren(e)}const o=document.createElement("div");o.className="designbase-wc-youtube-player__container";const i=document.createElement("iframe");i.className="designbase-wc-youtube-player__iframe",i.src=this.generateEmbedUrl(n),i.title=this.getAttribute("title")||`YouTube 동영상: ${n}`,i.setAttribute("frameborder","0"),i.setAttribute("allow","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"),i.setAttribute("referrerpolicy","strict-origin-when-cross-origin"),i.referrerPolicy="strict-origin-when-cross-origin",i.allowFullscreen=!0,o.append(i);const r=this.getAttribute("description"),a=document.createDocumentFragment();if(a.append(o),r&&"minimal"!==t){const e=document.createElement("div");e.className="designbase-wc-youtube-player__description";const t=document.createElement("p");t.textContent=r,e.append(t),a.append(e)}this.replaceChildren(a)}}customElements.get("db-youtube-player")||customElements.define("db-youtube-player",DbYouTubePlayer);export{DbYouTubePlayer};

package/dist/esm/components/highlight-code.js

@@ -0,0 +1 @@
+import*as s from"prismjs";import"../node_modules/prismjs/components/prism-clike.js";import"../node_modules/prismjs/components/prism-markup.js";import"../node_modules/prismjs/components/prism-css.js";import"../node_modules/prismjs/components/prism-scss.js";import"../node_modules/prismjs/components/prism-bash.js";import"../node_modules/prismjs/components/prism-json.js";import"../node_modules/prismjs/components/prism-javascript.js";import"../node_modules/prismjs/components/prism-typescript.js";import"../node_modules/prismjs/components/prism-jsx.js";import"../node_modules/prismjs/components/prism-tsx.js";const o={js:"javascript",ts:"typescript",sh:"bash",shell:"bash",html:"markup",xml:"markup",svg:"markup"},r={javascript:"JavaScript",typescript:"TypeScript",tsx:"TSX",jsx:"JSX",css:"CSS",scss:"SCSS",json:"JSON",bash:"Bash",markup:"HTML"},resolvePrismLanguage=s=>{const r=s.toLowerCase().trim();return o[r]??r},formatLanguageLabel=s=>{const o=resolvePrismLanguage(s);return r[o]??s.toUpperCase()},highlightWithPrism=(o,r)=>{const m=(()=>{const o=globalThis.Prism;return o?.languages?o:s.default??s})(),p=resolvePrismLanguage(r),t=m.languages[p];if(!t)return null;try{return m.highlight(o,t,p)}catch{return null}},ensureHighlightReady=()=>Promise.resolve(),highlightCodeSync=(s,o)=>highlightWithPrism(s,o);export{ensureHighlightReady,formatLanguageLabel,highlightCodeSync,resolvePrismLanguage};

package/dist/esm/components/input-validation.js

@@ -0,0 +1 @@
+const e={weak:"약함",fair:"보통",good:"강함","very-strong":"아주 강함"};function getPasswordScore(e){switch(e){case"weak":return 1;case"fair":return 2;case"good":return 3;case"very-strong":return 4;default:return 0}}function getPasswordValidation(t,r=8){const s=[{id:"length",label:`최소 ${r}자 이상`,met:t.length>=r},{id:"lowercase",label:"소문자 포함",met:/[a-z]/.test(t)},{id:"uppercase",label:"대문자 포함",met:/[A-Z]/.test(t)},{id:"number",label:"숫자 포함",met:/\d/.test(t)},{id:"special",label:"특수문자 포함",met:/[!@#$%^&*(),.?":{}|<>]/.test(t)}],a=function getPasswordStrengthLevel(e,t){return!t||e<=1?"weak":2===e?"fair":3===e?"good":"very-strong"}(s.filter(e=>e.met).length,t.length>0);return{requirements:s,score:getPasswordScore(a),level:a,levelLabel:e[a],isValid:s.every(e=>e.met),isStrongEnough:"good"===a||"very-strong"===a}}export{getPasswordValidation};

package/dist/esm/components/number-scrub.js

@@ -0,0 +1 @@
+function parseScrubNumericValue(e){const t=e.trim();if(""===t)return 0;const r=Number(t);return Number.isFinite(r)?r:null}function getStepDecimalPlaces(e){const t=String(e),r=t.indexOf(".");return-1===r?0:t.length-r-1}function formatScrubValue(e,t){const r=getStepDecimalPlaces(t);return r>0?e.toFixed(r):String(Math.round(e))}function computeScrubValue(e,t,r,n,o,u,i){const a=n*(o.shiftKey?10:o.altKey?.1:1);let c=e+Math.round(t/r)*a;void 0!==u&&(c=Math.max(u,c)),void 0!==i&&(c=Math.min(i,c));const s=getStepDecimalPlaces(a);return c=s>0?Number(c.toFixed(s)):Math.round(c),c}function readNumericAttribute(e,t){const r=e.getAttribute(t);if(null===r||""===r)return;const n=Number(r);return Number.isFinite(n)?n:void 0}function attachNumberScrub(e,t){let r=null;const endScrub=()=>{r=null,t.onScrubStateChange?.(!1),document.body.style.removeProperty("cursor"),document.body.style.removeProperty("user-select")},handlePointerDown=n=>{if(!t.isEnabled()||!t.isInteractive()||0!==n.button)return;const o=parseScrubNumericValue(t.getValue());null!==o&&(r={pointerId:n.pointerId,startX:n.clientX,startValue:o,moved:!1},e.setPointerCapture(n.pointerId))},handlePointerMove=e=>{if(!r||r.pointerId!==e.pointerId)return;const n=e.clientX-r.startX;!r.moved&&Math.abs(n)<3||(r.moved||(r.moved=!0,t.onScrubStateChange?.(!0),document.body.style.cursor="ew-resize",document.body.style.userSelect="none"),e.preventDefault(),((e,n)=>{if(!r)return;const o=e-r.startX,u=t.getStep(),i=computeScrubValue(r.startValue,o,t.getSensitivity(),u,n,t.getMin(),t.getMax());t.onValueChange(formatScrubValue(i,u))})(e.clientX,e))},handlePointerEnd=t=>{r&&r.pointerId===t.pointerId&&(r.moved&&t.preventDefault(),e.hasPointerCapture(t.pointerId)&&e.releasePointerCapture(t.pointerId),endScrub())};return e.addEventListener("pointerdown",handlePointerDown),e.addEventListener("pointermove",handlePointerMove),e.addEventListener("pointerup",handlePointerEnd),e.addEventListener("pointercancel",handlePointerEnd),()=>{endScrub(),e.removeEventListener("pointerdown",handlePointerDown),e.removeEventListener("pointermove",handlePointerMove),e.removeEventListener("pointerup",handlePointerEnd),e.removeEventListener("pointercancel",handlePointerEnd)}}export{attachNumberScrub,computeScrubValue,formatScrubValue,getStepDecimalPlaces,parseScrubNumericValue,readNumericAttribute};

package/dist/esm/components/random-gradient-palettes.js

@@ -0,0 +1 @@
+const a={primary:{light:["#eff6ff","#dbeafe","#bfdbfe","#93c5fd"],vivid:["#3b82f6","#2563eb","#1d4ed8","#1e40af","#1e3a8a"],dark:["#0f172a","#1e293b","#334155","#475569","#64748b"]},secondary:{light:["#f8fafc","#f1f5f9","#e2e8f0","#cbd5e1"],vivid:["#6b7280","#4b5563","#374151","#1f2937","#111827"],dark:["#0f0f0f","#1a1a1a","#262626","#404040","#525252"]},success:{light:["#f0fdf4","#dcfce7","#bbf7d0","#86efac"],vivid:["#22c55e","#16a34a","#15803d","#166534","#14532d"],dark:["#052e16","#14532d","#166534","#15803d","#16a34a"]},warning:{light:["#fffbeb","#fef3c7","#fde68a"],vivid:["#f59e0b","#d97706","#b45309","#92400e","#78350f"],dark:["#451a03","#78350f","#92400e","#b45309","#d97706"]},error:{light:["#fef2f2","#fecaca","#fca5a5"],vivid:["#ef4444","#dc2626","#b91c1c","#991b1b","#7f1d1d"],dark:["#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626"]},info:{light:["#eff6ff","#dbeafe","#bfdbfe","#93c5fd"],vivid:["#3b82f6","#2563eb","#1d4ed8","#1e40af","#1e3a8a"],dark:["#0f172a","#1e293b","#334155","#475569","#64748b"]},purple:{light:["#faf5ff","#f3e8ff","#e9d5ff","#d8b4fe"],vivid:["#a855f7","#9333ea","#7c3aed","#6d28d9","#5b21b6"],dark:["#3b0764","#581c87","#6b21a8","#7c3aed","#9333ea"]},ocean:{light:["#f0fdfa","#ccfbf1","#99f6e4"],vivid:["#14b8a6","#0d9488","#0f766e","#115e59","#134e4a"],dark:["#042f2e","#134e4a","#115e59","#0f766e","#0d9488"]},sunset:{light:["#fff7ed","#fed7aa","#fdba74"],vivid:["#f97316","#ea580c","#c2410c","#9a3412","#7c2d12"],dark:["#431407","#7c2d12","#9a3412","#c2410c","#ea580c"]}};function createRandomGradientStyle(f,e,d,c,i,r){const b=a[f][e],t=Math.min(6,Math.max(3,d)),n=[];for(let a=0;a<t;a+=1)n.push(b[Math.floor(Math.random()*b.length)]);const o=Array.from({length:t},()=>100*Math.random()).sort((a,f)=>a-f),h=n.map((a,f)=>`${a} ${o[f]}%`).join(", ");return{background:`radial-gradient(circle at ${100*Math.random()}% ${100*Math.random()}%, ${h})`,filter:`blur(${Math.max(80,c)}px)`,transition:i?`background ${r}s ease-in-out`:"none"}}export{a as COLOR_PALETTES,createRandomGradientStyle};

package/dist/esm/helpers/confirm.d.ts

@@ -0,0 +1,30 @@
+type DbConfirmVariant = 'info' | 'success' | 'warning' | 'danger';
+interface DbConfirmOptions {
+    /** 본문 메시지 (필수) */
+    message: string;
+    /** 제목 */
+    title?: string;
+    /** 확인 버튼 텍스트. 기본 '확인' */
+    confirmText?: string;
+    /** 취소 버튼 텍스트. 기본 '취소' */
+    cancelText?: string;
+    /** 확인 버튼 variant (db-button variant). 기본 'primary' */
+    confirmVariant?: string;
+    /** 아이콘/색상 톤. 기본 'info' */
+    variant?: DbConfirmVariant;
+    /** 크기. 기본 's' */
+    size?: 's' | 'm' | 'l';
+    /** 아이콘 표시. 기본 true */
+    showIcon?: boolean;
+    /** 처음 포커스 대상. 기본 'confirm' */
+    initialFocus?: 'confirm' | 'cancel';
+    /** ESC 로 취소 허용. 기본 true */
+    closeOnEscape?: boolean;
+    /** 배경 클릭으로 취소 허용. 기본 true */
+    closeOnBackdrop?: boolean;
+}
+/** 확인 대화상자를 띄우고, 확인 시 true / 취소(ESC·배경 포함) 시 false 로 resolve 합니다. */
+declare function confirm(options: DbConfirmOptions): Promise<boolean>;
+
+export { confirm };
+export type { DbConfirmOptions, DbConfirmVariant };

package/dist/esm/helpers/confirm.js

@@ -0,0 +1 @@
+function confirm(e){if(!function isBrowser(){return"undefined"!=typeof document}())return Promise.resolve(!1);const{message:t,title:n,confirmText:i,cancelText:r,confirmVariant:s,variant:o,size:c,showIcon:a,initialFocus:u,closeOnEscape:m,closeOnBackdrop:b}=e,d=document.createElement("db-confirm");return d.setAttribute("message",t),n&&d.setAttribute("title",n),i&&d.setAttribute("confirm-text",i),r&&d.setAttribute("cancel-text",r),s&&d.setAttribute("confirm-variant",s),o&&d.setAttribute("variant",o),c&&d.setAttribute("size",c),!1===a&&d.setAttribute("show-icon","false"),u&&d.setAttribute("initial-focus",u),!1===m&&d.setAttribute("close-on-escape","false"),!1===b&&d.setAttribute("close-on-backdrop","false"),document.body.appendChild(d),new Promise(e=>{let t=!1;const finish=n=>{t||(t=!0,d.removeEventListener("db-confirm",onConfirm),d.removeEventListener("db-cancel",onCancel),d.remove(),e(n))},onConfirm=()=>finish(!0),onCancel=()=>finish(!1);d.addEventListener("db-confirm",onConfirm),d.addEventListener("db-cancel",onCancel),d.setAttribute("open","true")})}export{confirm};

package/dist/esm/helpers/toast.d.ts

@@ -0,0 +1,56 @@
+import { DbToast } from '../components/db-toast.js';
+
+/**
+ * 명령형 toast() 헬퍼 — 컨테이너/스택/제거를 자동 관리합니다.
+ *
+ * @example
+ *   import { toast } from '@designbasekorea/ui-wc';
+ *   toast.success('저장되었습니다');
+ *   toast.error('오류가 발생했어요', { description: '잠시 후 다시 시도해 주세요' });
+ *   const t = toast({ title: '업로드 중…', status: 'info', duration: 0 });
+ *   t.close();
+ */
+
+type DbToastStatus = 'info' | 'success' | 'warning' | 'error';
+type DbToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+interface DbToastOptions {
+    /** 제목 (필수) */
+    title: string;
+    /** 보조 설명 */
+    description?: string;
+    /** 상태 색상/아이콘. 기본 'info' */
+    status?: DbToastStatus;
+    /** 자동 닫힘 시간(ms). 0 이하이면 자동으로 닫히지 않음. 기본 5000 */
+    duration?: number;
+    /** 표시 위치. 기본 'top-right' */
+    position?: DbToastPosition;
+    /** 닫기 버튼 표시. 기본 true */
+    showClose?: boolean;
+    /** 진행 바 표시. 기본 false */
+    showProgress?: boolean;
+}
+interface DbToastHandle {
+    /** 토스트 고유 id */
+    id: string;
+    /** 토스트 엘리먼트 */
+    element: DbToast;
+    /** 토스트를 수동으로 닫습니다(애니메이션 포함). */
+    close: () => void;
+}
+type DbToastShortcut = (title: string, options?: Omit<DbToastOptions, 'title' | 'status'>) => DbToastHandle;
+interface DbToastApi {
+    (options: DbToastOptions): DbToastHandle;
+    show: (options: DbToastOptions) => DbToastHandle;
+    success: DbToastShortcut;
+    error: DbToastShortcut;
+    warning: DbToastShortcut;
+    info: DbToastShortcut;
+    /** 열려 있는 토스트를 모두 닫습니다. position 지정 시 해당 위치만. */
+    dismissAll: (position?: DbToastPosition) => void;
+}
+/** 토스트를 띄웁니다. `toast(options)` 와 동일합니다. */
+declare function showToast(options: DbToastOptions): DbToastHandle;
+declare const toast: DbToastApi;
+
+export { showToast, toast };
+export type { DbToastApi, DbToastHandle, DbToastOptions, DbToastPosition, DbToastStatus };

package/dist/esm/helpers/toast.js

@@ -0,0 +1 @@
+const t="designbase-wc-toast-container",e="top-right";let o=0;function isBrowser(){return"undefined"!=typeof document}function showToast(s){const r=`db-toast-${o+=1}`;if(!isBrowser())return{id:r,element:null,close:()=>{}};const{title:i,description:n,status:u="info",duration:a=5e3,position:c=e,showClose:d=!0,showProgress:l=!1}=s,h=function getContainer(e){const o=document.querySelector(`.${t}[data-position="${e}"]`);if(o)return o;const s=document.createElement("div");return s.className=`${t} ${t}--${e}`,s.dataset.position=e,s.setAttribute("role","region"),s.setAttribute("aria-live","polite"),s.setAttribute("aria-label","알림"),document.body.appendChild(s),s}(c),b=document.createElement("db-toast");return b.setAttribute("toast-id",r),b.setAttribute("status",u),b.setAttribute("title",i),n&&b.setAttribute("description",n),b.setAttribute("duration",String(a)),b.setAttribute("show-close",String(d)),l&&b.setAttribute("show-progress",""),b.setAttribute("auto-remove","true"),c.startsWith("bottom")?h.insertBefore(b,h.firstChild):h.appendChild(b),b.addEventListener("db-close",()=>window.requestAnimationFrame(()=>function cleanupContainer(t){0===t.childElementCount&&t.remove()}(h)),{once:!0}),{id:r,element:b,close:()=>b.close()}}function shortcut(t){return(e,o)=>showToast({...o,title:e,status:t})}const toast=t=>showToast(t);toast.show=showToast,toast.success=shortcut("success"),toast.error=shortcut("error"),toast.warning=shortcut("warning"),toast.info=shortcut("info"),toast.dismissAll=e=>{if(!isBrowser())return;const o=e?`.${t}[data-position="${e}"] db-toast`:`.${t} db-toast`;document.querySelectorAll(o).forEach(t=>t.close())};export{showToast,toast};