@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,66 +1 @@
-const COLOR_PRESETS = ['primary', 'secondary', 'success', 'warning', 'danger', 'muted'];
-class DbDivider extends HTMLElement {
-    static get observedAttributes() {
-        return ['orientation', 'thickness', 'color', 'length', 'variant', 'margin'];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    render() {
-        const orientation = this.getAttribute('orientation') || 'horizontal';
-        const variant = this.getAttribute('variant') || 'solid';
-        const thickness = Number(this.getAttribute('thickness') || 1);
-        const color = this.getAttribute('color');
-        const length = this.getAttribute('length');
-        const margin = this.getAttribute('margin');
-        this.className = [
-            'designbase-wc-divider',
-            `designbase-wc-divider--${orientation}`,
-            `designbase-wc-divider--${variant}`,
-            color && COLOR_PRESETS.includes(color)
-                ? `designbase-wc-divider--${color}`
-                : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.setAttribute('role', 'separator');
-        this.setAttribute('aria-orientation', orientation);
-        this.style.border = 'none';
-        this.style.background = 'none';
-        this.style.margin = '';
-        this.style.width = '';
-        this.style.height = '';
-        if (orientation === 'vertical') {
-            this.style.display = 'inline-block';
-            this.style.borderLeft = `${thickness}px ${variant} var(--db-border-base)`;
-            this.style.verticalAlign = 'middle';
-            if (length) {
-                this.style.height = length.endsWith('px') || length.endsWith('%') ? length : `${length}px`;
-            }
-        }
-        else {
-            this.style.display = 'block';
-            this.style.width = '100%';
-            this.style.borderTop = `${thickness}px ${variant} var(--db-border-base)`;
-        }
-        if (color && !COLOR_PRESETS.includes(color)) {
-            if (orientation === 'vertical') {
-                this.style.borderLeftColor = color;
-            }
-            else {
-                this.style.borderTopColor = color;
-            }
-        }
-        if (margin) {
-            this.style.margin = /^\d+$/.test(margin) ? `${margin}px` : margin;
-        }
-    }
-}
-if (!customElements.get('db-divider')) {
-    customElements.define('db-divider', DbDivider);
-}
-
-export { DbDivider };
+const t=["primary","secondary","success","warning","danger","muted"];class DbDivider extends HTMLElement{static get observedAttributes(){return["orientation","thickness","color","length","variant","margin"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("orientation")||"horizontal",i=this.getAttribute("variant")||"solid",s=Number(this.getAttribute("thickness")||1),r=this.getAttribute("color"),d=this.getAttribute("length"),n=this.getAttribute("margin");this.className=["designbase-wc-divider",`designbase-wc-divider--${e}`,`designbase-wc-divider--${i}`,r&&t.includes(r)?`designbase-wc-divider--${r}`:""].filter(Boolean).join(" "),this.setAttribute("role","separator"),this.setAttribute("aria-orientation",e),this.style.border="none",this.style.background="none",this.style.margin="",this.style.width="",this.style.height="","vertical"===e?(this.style.display="inline-block",this.style.borderLeft=`${s}px ${i} var(--db-border-base)`,this.style.verticalAlign="middle",d&&(this.style.height=d.endsWith("px")||d.endsWith("%")?d:`${d}px`)):(this.style.display="block",this.style.width="100%",this.style.borderTop=`${s}px ${i} var(--db-border-base)`),r&&!t.includes(r)&&("vertical"===e?this.style.borderLeftColor=r:this.style.borderTopColor=r),n&&(this.style.margin=/^\d+$/.test(n)?`${n}px`:n)}}customElements.get("db-divider")||customElements.define("db-divider",DbDivider);export{DbDivider};

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

@@ -0,0 +1,89 @@
+import './db-progressbar.js';
+import './db-button.js';
+
+declare const STATUSES: readonly ["downloading", "paused", "error", "complete"];
+type DownloadStatus = (typeof STATUSES)[number];
+declare const POSITIONS: readonly ["bottom-right", "bottom-left", "bottom-center", "top-right", "top-left", "top-center"];
+type DownloadPosition = (typeof POSITIONS)[number];
+/**
+ * 우측 하단(기본)에 떠 있는 다운로드 진행률 위젯.
+ *
+ * 진행 바는 `<db-progressbar>`, 액션 버튼은 `<db-button>` 을 그대로 재사용합니다.
+ * 같은 위치에 여러 개가 뜨면 `stack-mode`에 따라 위로 쌓이거나(deck) 세로로 쌓입니다.
+ *
+ * @example
+ *   const dl = document.createElement('db-download-progress');
+ *   dl.setAttribute('file-name', 'ui-kit-icons.figma');
+ *   dl.setAttribute('value', '43');
+ *   dl.setAttribute('auto-remove', '');
+ *   document.body.appendChild(dl);
+ *   dl.setProgress(80);
+ *   dl.setStatus('complete');
+ */
+declare class DbDownloadProgress extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private renderedStatus;
+    private closeTimerId;
+    private resizeObserver;
+    private registeredPosition;
+    closed: boolean;
+    private iconEl;
+    private labelEl;
+    private fileEl;
+    private subtitleEl;
+    private inlinePercentEl;
+    private percentEl;
+    private remainingEl;
+    private metaDotEl;
+    private toggleBtn;
+    private closeBtn;
+    private actionsEl;
+    private mainRow;
+    private bodyBar;
+    private edgeBar;
+    get value(): number;
+    set value(v: number);
+    get max(): number;
+    set max(v: number);
+    get status(): DownloadStatus;
+    set status(v: DownloadStatus);
+    get fileName(): string;
+    set fileName(v: string);
+    get position(): DownloadPosition;
+    set position(v: DownloadPosition);
+    get minimized(): boolean;
+    set minimized(v: boolean);
+    /** `stack` = 세로로 위로 쌓기(기본), `deck` = 스케일·z-index 카드 덱 */
+    get stackMode(): 'stack' | 'deck';
+    set stackMode(v: 'stack' | 'deck');
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private registerStack;
+    private unregisterStack;
+    private build;
+    private sync;
+    private renderActions;
+    private handleMainClick;
+    private handleToggleClick;
+    private handleCloseClick;
+    minimize(): void;
+    expand(): void;
+    toggle(): void;
+    setProgress(value: number): void;
+    setStatus(status: DownloadStatus): void;
+    /**
+     * 닫기(슬라이드 아웃).
+     * React 등 호스트가 DOM을 소유할 때는 `auto-remove` 없이 `db-close`만 받고 언마운트하세요.
+     * body에 직접 append한 경우 `auto-remove`를 주면 DOM에서 제거됩니다.
+     */
+    close(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-download-progress': DbDownloadProgress;
+    }
+}
+
+export { DbDownloadProgress };

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

@@ -0,0 +1 @@
+import{createDbIcon as e}from"./db-icons.js";import"./db-progressbar.js";import"./db-button.js";const t=["downloading","paused","error","complete"],s=["bottom-right","bottom-left","bottom-center","top-right","top-left","top-center"],i={downloading:"download",paused:"pause",error:"error-filled",complete:"circle-checked"},o={downloading:"다운로드 중",paused:"일시정지됨",error:"다운로드 실패",complete:"다운로드 완료"},n={downloading:"완료될 때까지 기다려 주세요.",paused:"다운로드가 일시정지되었습니다.",error:"문제가 발생했어요. 다시 시도해 주세요.",complete:"파일 다운로드가 완료되었습니다."},r={downloading:"primary",paused:"default",error:"danger",complete:"success"},a=new Map;function getStackSet(e){let t=a.get(e);return t||(t=new Set,a.set(e,t)),t}function isStackParticipant(e){return!(!e.isConnected||e.closed||e.hasAttribute("no-stack"))&&"fixed"===getComputedStyle(e).position}function relayoutStack(e){const t=a.get(e);if(!t)return;const s=[...t].filter(isStackParticipant),i=e.startsWith("top"),o=s[0]?.stackMode??"stack";s.forEach((e,t)=>{const n=s.length-1-t;if(e.dataset.stackIndex=String(n),e.style.setProperty("--dbdl-stack-index",String(n)),e.style.zIndex=String(9999+t),"deck"===o){const t=Math.max(.88,1-.04*n),s=10*n;e.style.setProperty("--dbdl-stack-offset","0px"),e.style.setProperty("--dbdl-stack-scale",String(t)),e.style.setProperty("--dbdl-stack-shift",`${i?s:-s}px`),e.classList.add("designbase-wc-download-progress--stacked-deck"),e.classList.remove("designbase-wc-download-progress--stacked-list")}else{let i=0;for(let e=s.length-1;e>t;e-=1)i+=s[e].offsetHeight+12;e.style.setProperty("--dbdl-stack-offset",`${i}px`),e.style.setProperty("--dbdl-stack-scale","1"),e.style.setProperty("--dbdl-stack-shift","0px"),e.classList.add("designbase-wc-download-progress--stacked-list"),e.classList.remove("designbase-wc-download-progress--stacked-deck")}}),t.forEach(e=>{s.includes(e)||(e.style.removeProperty("--dbdl-stack-offset"),e.style.removeProperty("--dbdl-stack-scale"),e.style.removeProperty("--dbdl-stack-shift"),e.style.removeProperty("z-index"),e.classList.remove("designbase-wc-download-progress--stacked-list","designbase-wc-download-progress--stacked-deck"),delete e.dataset.stackIndex)})}class DbDownloadProgress extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.renderedStatus=null,this.closeTimerId=null,this.resizeObserver=null,this.registeredPosition=null,this.closed=!1,this.handleMainClick=e=>{e.target.closest(".designbase-wc-download-progress__header-actions")||this.toggle()},this.handleToggleClick=e=>{e.stopPropagation(),this.toggle()},this.handleCloseClick=e=>{e.stopPropagation(),this.close()}}static get observedAttributes(){return["file-name","value","max","status","position","minimized","label","description","remaining","size-label","error-text","closable","stack-mode","no-stack","auto-remove"]}get value(){return Number(this.getAttribute("value")||0)}set value(e){this.setAttribute("value",String(e))}get max(){return Number(this.getAttribute("max")||100)}set max(e){this.setAttribute("max",String(e))}get status(){const e=this.getAttribute("status");return t.includes(e)?e:"downloading"}set status(e){this.setAttribute("status",e)}get fileName(){return this.getAttribute("file-name")||""}set fileName(e){this.setAttribute("file-name",e)}get position(){const e=this.getAttribute("position");return s.includes(e)?e:"bottom-right"}set position(e){this.setAttribute("position",e)}get minimized(){return this.hasAttribute("minimized")}set minimized(e){this.toggleAttribute("minimized",e)}get stackMode(){return"deck"===this.getAttribute("stack-mode")?"deck":"stack"}set stackMode(e){this.setAttribute("stack-mode",e)}connectedCallback(){this.build(),this.sync(),this.registerStack(),requestAnimationFrame(()=>{this.classList.add("designbase-wc-download-progress--visible"),relayoutStack(this.position)}),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{this.registeredPosition&&relayoutStack(this.registeredPosition)}),this.resizeObserver.observe(this))}disconnectedCallback(){this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.unregisterStack()}attributeChangedCallback(e){this.built&&(this.sync(),"position"!==e&&"stack-mode"!==e&&"no-stack"!==e&&"minimized"!==e||(this.registerStack(),this.registeredPosition&&relayoutStack(this.registeredPosition),s.forEach(e=>{e!==this.registeredPosition&&relayoutStack(e)})))}registerStack(){const e=this.position;this.registeredPosition&&this.registeredPosition!==e&&(getStackSet(this.registeredPosition).delete(this),relayoutStack(this.registeredPosition)),getStackSet(e).add(this),this.registeredPosition=e}unregisterStack(){if(!this.registeredPosition)return;const e=this.registeredPosition;getStackSet(e).delete(this),this.registeredPosition=null,relayoutStack(e)}build(){if(this.built)return;this.built=!0,this.classList.add("designbase-wc-download-progress"),this.replaceChildren();const t=el("div","designbase-wc-download-progress__shell");this.mainRow=el("button","designbase-wc-download-progress__main"),this.mainRow.type="button",this.mainRow.setAttribute("aria-label","다운로드 상세 펼치기/접기"),this.mainRow.addEventListener("click",this.handleMainClick),this.iconEl=el("span","designbase-wc-download-progress__icon"),this.iconEl.setAttribute("aria-hidden","true");const s=el("span","designbase-wc-download-progress__text"),i=el("span","designbase-wc-download-progress__title");this.labelEl=el("span","designbase-wc-download-progress__label"),this.fileEl=el("span","designbase-wc-download-progress__file"),i.append(this.labelEl,this.fileEl),this.subtitleEl=el("span","designbase-wc-download-progress__subtitle"),s.append(i,this.subtitleEl),this.inlinePercentEl=el("span","designbase-wc-download-progress__inline-percent");const o=el("span","designbase-wc-download-progress__header-actions");this.toggleBtn=el("button","designbase-wc-download-progress__icon-button"),this.toggleBtn.type="button",this.toggleBtn.addEventListener("click",this.handleToggleClick),this.closeBtn=el("button","designbase-wc-download-progress__icon-button"),this.closeBtn.type="button",this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(e("close",18)),this.closeBtn.addEventListener("click",this.handleCloseClick),o.append(this.toggleBtn,this.closeBtn),this.mainRow.append(this.iconEl,s,this.inlinePercentEl,o);const n=el("div","designbase-wc-download-progress__collapsible"),r=el("div","designbase-wc-download-progress__collapse-inner"),a=el("div","designbase-wc-download-progress__body");this.bodyBar=document.createElement("db-progressbar"),this.bodyBar.setAttribute("full-width",""),this.bodyBar.setAttribute("size","s");const d=el("div","designbase-wc-download-progress__meta");this.percentEl=el("span","designbase-wc-download-progress__percent"),this.metaDotEl=el("span","designbase-wc-download-progress__meta-dot"),this.metaDotEl.textContent="•",this.remainingEl=el("span","designbase-wc-download-progress__remaining"),d.append(this.percentEl,this.metaDotEl,this.remainingEl),a.append(this.bodyBar,d);const l=el("div","designbase-wc-download-progress__footer");this.actionsEl=el("div","designbase-wc-download-progress__actions"),l.append(this.actionsEl),r.append(a,l),n.append(r);const c=el("div","designbase-wc-download-progress__edge");this.edgeBar=document.createElement("db-progressbar"),this.edgeBar.setAttribute("full-width",""),this.edgeBar.setAttribute("size","s"),c.append(this.edgeBar),t.append(this.mainRow,n,c),this.append(t)}sync(){const a=this.status,d=this.max,l="complete"===a?d:this.value,c=Math.max(0,Math.min(d,l)),h=0===d?0:Math.round((c-0)/(d-0)*100);this.classList.add("designbase-wc-download-progress"),s.forEach(e=>this.classList.toggle(`designbase-wc-download-progress--${e}`,e===this.position)),t.forEach(e=>this.classList.toggle(`designbase-wc-download-progress--${e}`,e===a)),this.classList.toggle("designbase-wc-download-progress--minimized",this.minimized),this.renderedStatus!==a&&(this.iconEl.className=`designbase-wc-download-progress__icon designbase-wc-download-progress__icon--${a}`,this.iconEl.replaceChildren(e(i[a],20)),this.renderActions(a),"complete"===a&&(this.iconEl.classList.remove("designbase-wc-download-progress__icon--pop"),this.iconEl.offsetWidth,this.iconEl.classList.add("designbase-wc-download-progress__icon--pop"),this.dispatchEvent(new CustomEvent("db-complete",{bubbles:!0,composed:!0}))),this.renderedStatus=a),this.labelEl.textContent=this.getAttribute("label")||o[a],this.fileEl.textContent=this.fileName,this.fileEl.hidden=!this.fileName,this.subtitleEl.textContent="error"===a&&this.getAttribute("error-text")||this.getAttribute("description")||n[a],this.inlinePercentEl.textContent="complete"===a?"100%":`${h}%`,this.percentEl.textContent=`${h}%`;const g=this.getAttribute("remaining")||"",b=this.getAttribute("size-label")||"";"complete"===a?(this.percentEl.textContent=b||"완료됨",this.metaDotEl.hidden=!0,this.remainingEl.hidden=!0):"error"===a?(this.percentEl.textContent=`${h}%`,this.metaDotEl.hidden=!g,this.remainingEl.hidden=!g,this.remainingEl.textContent=g):(this.metaDotEl.hidden=!g,this.remainingEl.hidden=!g,this.remainingEl.textContent=g);const p=r[a],u="downloading"===a?"animated":"solid";[this.bodyBar,this.edgeBar].forEach(e=>{e.setAttribute("value",String(c)),e.setAttribute("max",String(d)),e.setAttribute("variant",p),e.setAttribute("bar-style",u)}),this.toggleBtn.replaceChildren(e(this.minimized?"expand":"chevron-down",18)),this.toggleBtn.setAttribute("aria-label",this.minimized?"펼치기":"최소화"),this.toggleBtn.setAttribute("aria-expanded",String(!this.minimized));const m="true"===this.getAttribute("closable")||this.hasAttribute("closable")&&"false"!==this.getAttribute("closable")||"complete"===a;this.closeBtn.hidden=!m,this.mainRow.setAttribute("aria-label",this.minimized?"다운로드 펼치기":"다운로드 접기"),this.setAttribute("role","status"),this.setAttribute("aria-live","error"===a?"assertive":"polite")}renderActions(e){this.actionsEl.replaceChildren();const make=(e,t,s,i)=>{const o=document.createElement("db-button");return o.setAttribute("variant",t),o.setAttribute("size","s"),i&&o.setAttribute("start-icon",i),o.textContent=e,o.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent(s,{bubbles:!0,composed:!0})),"db-cancel"!==s&&"db-dismiss"!==s||this.close()}),o};"downloading"===e?this.actionsEl.append(make("취소","ghost","db-cancel")):"paused"===e?this.actionsEl.append(make("취소","ghost","db-cancel"),make("재개","primary","db-resume","play")):"error"===e?this.actionsEl.append(make("취소","ghost","db-cancel"),make("다시 시도","primary","db-retry","refresh")):"complete"===e&&this.actionsEl.append(make("폴더 열기","secondary","db-open","folder-open"),make("닫기","ghost","db-dismiss"))}minimize(){this.minimized||(this.minimized=!0,this.dispatchEvent(new CustomEvent("db-minimize",{bubbles:!0,composed:!0})))}expand(){this.minimized&&(this.minimized=!1,this.dispatchEvent(new CustomEvent("db-expand",{bubbles:!0,composed:!0})))}toggle(){this.minimized?this.expand():this.minimize()}setProgress(e){this.value=e}setStatus(e){this.status=e}close(){this.closed||(this.closed=!0,this.classList.remove("designbase-wc-download-progress--visible"),this.classList.add("designbase-wc-download-progress--closing"),this.unregisterStack(),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=setTimeout(()=>{this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0})),this.setAttribute("closed",""),this.hidden=!0;("true"===this.getAttribute("auto-remove")||this.hasAttribute("auto-remove")&&"false"!==this.getAttribute("auto-remove"))&&this.remove()},260))}}function el(e,t){const s=document.createElement(e);return s.className=t,s}customElements.get("db-download-progress")||customElements.define("db-download-progress",DbDownloadProgress);export{DbDownloadProgress};

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

@@ -1,245 +1 @@
-const POSITIONS = ['left', 'right', 'top', 'bottom'];
-const SIZES = ['s', 'm', 'l', 'xl', 'full'];
-class DbDrawer extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.isMounted = false;
-        this.isActive = false;
-        this.previousActiveElement = null;
-        this.keyHandler = null;
-    }
-    static get observedAttributes() {
-        return [
-            'open',
-            'title',
-            'position',
-            'size',
-            'show-close-button',
-            'close-on-backdrop-click',
-            'close-on-escape',
-            'animation-duration',
-            'show-overlay',
-            'overlay-closable',
-            'z-index',
-            'trap-focus',
-            'drawer-id',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'contents';
-        this.render();
-        this.syncOpenState();
-    }
-    disconnectedCallback() {
-        this.clearTimers();
-        this.detachEscape();
-        this.root?.remove();
-        this.root = undefined;
-        document.body.style.overflow = '';
-        if (this.previousActiveElement) {
-            this.previousActiveElement.focus();
-        }
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'open') {
-            this.syncOpenState();
-            return;
-        }
-        this.render();
-        if (this.isMounted) {
-            this.syncActiveClasses();
-        }
-    }
-    isOpenRequested() {
-        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
-    }
-    clearTimers() {
-        if (this.enterFrame != null) {
-            cancelAnimationFrame(this.enterFrame);
-            this.enterFrame = undefined;
-        }
-        if (this.exitTimer) {
-            clearTimeout(this.exitTimer);
-            this.exitTimer = undefined;
-        }
-    }
-    attachEscape() {
-        if (this.keyHandler)
-            return;
-        this.keyHandler = (event) => {
-            if (event.key !== 'Escape')
-                return;
-            if (this.getAttribute('close-on-escape') === 'false')
-                return;
-            this.close();
-        };
-        document.addEventListener('keydown', this.keyHandler);
-    }
-    detachEscape() {
-        if (!this.keyHandler)
-            return;
-        document.removeEventListener('keydown', this.keyHandler);
-        this.keyHandler = null;
-    }
-    close() {
-        this.setAttribute('open', 'false');
-        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
-    }
-    collectChildren() {
-        return Array.from(this.children).filter((child) => !child.hasAttribute('data-wc-internal'));
-    }
-    syncOpenState() {
-        const shouldOpen = this.isOpenRequested();
-        const duration = Number(this.getAttribute('animation-duration') || 300);
-        this.clearTimers();
-        if (shouldOpen) {
-            this.render();
-            this.isMounted = true;
-            this.isActive = false;
-            this.syncActiveClasses();
-            if (this.root && !this.root.isConnected) {
-                document.body.append(this.root);
-            }
-            if (this.getAttribute('trap-focus') !== 'false') {
-                this.previousActiveElement = document.activeElement;
-            }
-            this.enterFrame = requestAnimationFrame(() => {
-                this.enterFrame = requestAnimationFrame(() => {
-                    this.enterFrame = undefined;
-                    this.isActive = true;
-                    this.syncActiveClasses();
-                    if (this.getAttribute('trap-focus') !== 'false') {
-                        this.container?.focus();
-                    }
-                });
-            });
-            document.body.style.overflow = 'hidden';
-            this.attachEscape();
-            return;
-        }
-        this.isActive = false;
-        this.syncActiveClasses();
-        this.exitTimer = setTimeout(() => {
-            this.exitTimer = undefined;
-            this.isMounted = false;
-            this.syncActiveClasses();
-            this.root?.remove();
-            document.body.style.overflow = '';
-            this.detachEscape();
-            if (this.getAttribute('trap-focus') !== 'false' && this.previousActiveElement) {
-                this.previousActiveElement.focus();
-                this.previousActiveElement = null;
-            }
-        }, duration);
-        this.detachEscape();
-    }
-    syncActiveClasses() {
-        if (!this.root)
-            return;
-        this.root.classList.toggle('designbase-wc-drawer--open', this.isActive);
-        this.root.classList.toggle('designbase-wc-drawer--closing', this.isMounted && !this.isActive);
-        this.overlay?.classList.toggle('designbase-wc-drawer__overlay--open', this.isActive);
-        this.container?.classList.toggle('designbase-wc-drawer__container--open', this.isActive);
-    }
-    render() {
-        const position = POSITIONS.includes((this.getAttribute('position') || 'right'))
-            ? this.getAttribute('position') || 'right'
-            : 'right';
-        const size = SIZES.includes((this.getAttribute('size') || 'm'))
-            ? this.getAttribute('size') || 'm'
-            : 'm';
-        const title = this.getAttribute('title');
-        const showClose = this.getAttribute('show-close-button') !== 'false';
-        const showOverlay = this.getAttribute('show-overlay') !== 'false';
-        const animationDuration = this.getAttribute('animation-duration') || '300';
-        const zIndex = this.getAttribute('z-index') || '1000';
-        const drawerId = this.getAttribute('drawer-id') || 'drawer';
-        const userChildren = this.collectChildren();
-        if (!this.root) {
-            this.root = document.createElement('div');
-            this.root.setAttribute('data-wc-internal', '');
-            this.overlay = document.createElement('div');
-            this.overlay.className = 'designbase-wc-drawer__overlay';
-            this.overlay.setAttribute('aria-hidden', 'true');
-            this.overlay.addEventListener('click', (event) => {
-                if (event.target !== this.overlay)
-                    return;
-                const overlayClosable = this.getAttribute('overlay-closable') !== 'false';
-                const closeOnBackdrop = this.getAttribute('close-on-backdrop-click') !== 'false';
-                if (overlayClosable && closeOnBackdrop)
-                    this.close();
-            });
-            this.container = document.createElement('div');
-            this.container.className = `designbase-wc-drawer__container designbase-wc-drawer__container--${position}`;
-            this.container.setAttribute('role', 'dialog');
-            this.container.setAttribute('aria-modal', 'true');
-            this.container.tabIndex = -1;
-            this.container.addEventListener('click', (event) => event.stopPropagation());
-            this.contentEl = document.createElement('div');
-            this.contentEl.className = 'designbase-wc-drawer__content';
-            this.container.append(this.contentEl);
-        }
-        this.root.className = [
-            'designbase-wc-drawer',
-            `designbase-wc-drawer--${position}`,
-            `designbase-wc-drawer--${size}`,
-        ].join(' ');
-        this.root.style.setProperty('--drawer-animation-duration', `${animationDuration}ms`);
-        this.root.style.setProperty('--drawer-z-index', zIndex);
-        this.container.className = `designbase-wc-drawer__container designbase-wc-drawer__container--${position}`;
-        this.container.id = drawerId;
-        if (title) {
-            this.container.setAttribute('aria-labelledby', `${drawerId}-title`);
-        }
-        else {
-            this.container.removeAttribute('aria-labelledby');
-        }
-        this.contentEl.id = `${drawerId}-content`;
-        this.root.replaceChildren();
-        if (showOverlay && this.overlay) {
-            this.root.append(this.overlay);
-        }
-        const headerNeeded = Boolean(title) || showClose;
-        if (headerNeeded) {
-            const header = document.createElement('div');
-            header.className = 'designbase-wc-drawer__header';
-            if (title) {
-                const heading = document.createElement('h2');
-                heading.className = 'designbase-wc-drawer__title';
-                heading.id = `${drawerId}-title`;
-                heading.textContent = title;
-                header.append(heading);
-            }
-            if (showClose) {
-                const close = document.createElement('db-button');
-                close.className = 'designbase-wc-drawer__close-button';
-                close.setAttribute('variant', 'ghost');
-                close.setAttribute('size', 's');
-                close.setAttribute('icon-only', '');
-                close.setAttribute('start-icon', 'close');
-                close.setAttribute('aria-label', '닫기');
-                close.addEventListener('db-click', (event) => {
-                    event.stopPropagation();
-                    this.close();
-                });
-                header.append(close);
-            }
-            this.container.replaceChildren(header, this.contentEl);
-        }
-        else {
-            this.container.replaceChildren(this.contentEl);
-        }
-        this.contentEl.replaceChildren(...userChildren);
-        this.root.append(this.container);
-        if (this.isMounted && !this.root.isConnected) {
-            document.body.append(this.root);
-        }
-    }
-}
-if (!customElements.get('db-drawer')) {
-    customElements.define('db-drawer', DbDrawer);
-}
-
-export { DbDrawer };
+const t=["left","right","top","bottom"],e=["s","m","l","xl","full"];class DbDrawer extends HTMLElement{constructor(){super(...arguments),this.isMounted=!1,this.isActive=!1,this.previousActiveElement=null,this.keyHandler=null}static get observedAttributes(){return["open","title","position","size","show-close-button","close-on-backdrop-click","close-on-escape","animation-duration","show-overlay","overlay-closable","z-index","trap-focus","drawer-id"]}connectedCallback(){this.style.display="contents",this.render(),this.syncOpenState()}disconnectedCallback(){this.clearTimers(),this.detachEscape(),this.root?.remove(),this.root=void 0,document.body.style.overflow="",this.previousActiveElement&&this.previousActiveElement.focus()}attributeChangedCallback(t){this.isConnected&&("open"!==t?(this.render(),this.isMounted&&this.syncActiveClasses()):this.syncOpenState())}isOpenRequested(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}clearTimers(){null!=this.enterFrame&&(cancelAnimationFrame(this.enterFrame),this.enterFrame=void 0),this.exitTimer&&(clearTimeout(this.exitTimer),this.exitTimer=void 0)}attachEscape(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key&&"false"!==this.getAttribute("close-on-escape")&&this.close()},document.addEventListener("keydown",this.keyHandler))}detachEscape(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}close(){this.setAttribute("open","false"),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}collectChildren(){return Array.from(this.children).filter(t=>!t.hasAttribute("data-wc-internal"))}syncOpenState(){const t=this.isOpenRequested(),e=Number(this.getAttribute("animation-duration")||300);if(this.clearTimers(),t)return this.render(),this.isMounted=!0,this.isActive=!1,this.syncActiveClasses(),this.root&&!this.root.isConnected&&document.body.append(this.root),"false"!==this.getAttribute("trap-focus")&&(this.previousActiveElement=document.activeElement),this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=void 0,this.isActive=!0,this.syncActiveClasses(),"false"!==this.getAttribute("trap-focus")&&this.container?.focus()})}),document.body.style.overflow="hidden",void this.attachEscape();this.isActive=!1,this.syncActiveClasses(),this.exitTimer=setTimeout(()=>{this.exitTimer=void 0,this.isMounted=!1,this.syncActiveClasses(),this.root?.remove(),document.body.style.overflow="",this.detachEscape(),"false"!==this.getAttribute("trap-focus")&&this.previousActiveElement&&(this.previousActiveElement.focus(),this.previousActiveElement=null)},e),this.detachEscape()}syncActiveClasses(){this.root&&(this.root.classList.toggle("designbase-wc-drawer--open",this.isActive),this.root.classList.toggle("designbase-wc-drawer--closing",this.isMounted&&!this.isActive),this.overlay?.classList.toggle("designbase-wc-drawer__overlay--open",this.isActive),this.container?.classList.toggle("designbase-wc-drawer__container--open",this.isActive))}render(){const i=t.includes(this.getAttribute("position")||"right")&&this.getAttribute("position")||"right",s=e.includes(this.getAttribute("size")||"m")&&this.getAttribute("size")||"m",r=this.getAttribute("title"),n="false"!==this.getAttribute("show-close-button"),o="false"!==this.getAttribute("show-overlay"),a=this.getAttribute("animation-duration")||"300",c=this.getAttribute("z-index")||"1000",l=this.getAttribute("drawer-id")||"drawer",h=this.collectChildren();this.root||(this.root=document.createElement("div"),this.root.setAttribute("data-wc-internal",""),this.overlay=document.createElement("div"),this.overlay.className="designbase-wc-drawer__overlay",this.overlay.setAttribute("aria-hidden","true"),this.overlay.addEventListener("click",t=>{if(t.target!==this.overlay)return;const e="false"!==this.getAttribute("overlay-closable"),i="false"!==this.getAttribute("close-on-backdrop-click");e&&i&&this.close()}),this.container=document.createElement("div"),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${i}`,this.container.setAttribute("role","dialog"),this.container.setAttribute("aria-modal","true"),this.container.tabIndex=-1,this.container.addEventListener("click",t=>t.stopPropagation()),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-drawer__content",this.container.append(this.contentEl)),this.root.className=["designbase-wc-drawer",`designbase-wc-drawer--${i}`,`designbase-wc-drawer--${s}`].join(" "),this.root.style.setProperty("--drawer-animation-duration",`${a}ms`),this.root.style.setProperty("--drawer-z-index",c),this.container.className=`designbase-wc-drawer__container designbase-wc-drawer__container--${i}`,this.container.id=l,r?this.container.setAttribute("aria-labelledby",`${l}-title`):this.container.removeAttribute("aria-labelledby"),this.contentEl.id=`${l}-content`,this.root.replaceChildren(),o&&this.overlay&&this.root.append(this.overlay);if(Boolean(r)||n){const t=document.createElement("div");if(t.className="designbase-wc-drawer__header",r){const e=document.createElement("h2");e.className="designbase-wc-drawer__title",e.id=`${l}-title`,e.textContent=r,t.append(e)}if(n){const e=document.createElement("db-button");e.className="designbase-wc-drawer__close-button",e.setAttribute("variant","ghost"),e.setAttribute("size","s"),e.setAttribute("icon-only",""),e.setAttribute("start-icon","close"),e.setAttribute("aria-label","닫기"),e.addEventListener("db-click",t=>{t.stopPropagation(),this.close()}),t.append(e)}this.container.replaceChildren(t,this.contentEl)}else this.container.replaceChildren(this.contentEl);this.contentEl.replaceChildren(...h),this.root.append(this.container),this.isMounted&&!this.root.isConnected&&document.body.append(this.root)}}customElements.get("db-drawer")||customElements.define("db-drawer",DbDrawer);export{DbDrawer};