@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-bottom-navigation.js

@@ -1 +1,146 @@
-import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"],i=["default","glass","transparent"];class DbBottomNavigation extends HTMLElement{static get observedAttributes(){return["items","active-item-id","size","background-color","fixed"]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems()}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}parseItems(){try{const t=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(t)?t:[]}catch{return[]}}iconSize(t){return"s"===t?20:"l"===t?28:24}syncHostClasses(){const t=this.getAttribute("size")||"m",a=e.includes(t)?t:"m",n=this.getAttribute("background-color")||"default",s=i.includes(n)?n:"default";this.className=["designbase-wc-bottom-navigation",`designbase-wc-bottom-navigation--${a}`,`designbase-wc-bottom-navigation--${s}`,"false"!==this.getAttribute("fixed")&&"designbase-wc-bottom-navigation--fixed"].filter(Boolean).join(" ")}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","하단 네비게이션");const e=this.parseItems(),i=this.getAttribute("active-item-id")||"",a=this.getAttribute("size")||"m",n=this.iconSize(a);let s=this.querySelector(".designbase-wc-bottom-navigation__container");s?s.replaceChildren():(s=document.createElement("div"),s.className="designbase-wc-bottom-navigation__container",this.replaceChildren(s)),e.forEach(e=>{const a=i===e.id||Boolean(e.isActive),o=function resolveIcon(t){if(t)return t}(a&&e.activeIcon?e.activeIcon:e.icon),r=document.createElement("button");r.type="button",r.className=["designbase-wc-bottom-navigation__item",a&&"designbase-wc-bottom-navigation__item--active",e.disabled&&"designbase-wc-bottom-navigation__item--disabled"].filter(Boolean).join(" "),r.disabled=Boolean(e.disabled),r.setAttribute("aria-label",e.label),a&&r.setAttribute("aria-current","page");const c=document.createElement("div");c.className="designbase-wc-bottom-navigation__item-content";const d=document.createElement("div");if(d.className="designbase-wc-bottom-navigation__icon-wrapper",o){const e=t(o,n);e.classList.add("designbase-wc-bottom-navigation__icon"),d.append(e)}if(void 0!==e.badge&&""!==e.badge){const t=document.createElement("db-badge");t.className="designbase-wc-bottom-navigation__badge",t.setAttribute("size","s"),t.setAttribute("variant",function mapBadgeVariant(t){return"error"===t?"danger":"warning"===t?"warning":"success"===t?"success":"info"===t?"info":"primary"===t?"primary":"secondary"}(e.badgeColor)),t.setAttribute("badge-style","number"),t.setAttribute("count",String(e.badge)),d.append(t)}const b=document.createElement("span");b.className="designbase-wc-bottom-navigation__label",b.textContent=e.label,c.append(d,b),r.append(c),r.addEventListener("click",()=>{e.disabled||this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}),s.append(r)})}}customElements.get("db-bottom-navigation")||customElements.define("db-bottom-navigation",DbBottomNavigation);export{DbBottomNavigation};
+import { createDbIcon } from './db-icons.js';
+
+const SIZES = ['s', 'm', 'l'];
+const BACKGROUNDS = ['default', 'glass', 'transparent'];
+function resolveIcon(name) {
+    if (!name)
+        return undefined;
+    return name;
+}
+function mapBadgeVariant(color) {
+    if (color === 'error')
+        return 'danger';
+    if (color === 'warning')
+        return 'warning';
+    if (color === 'success')
+        return 'success';
+    if (color === 'info')
+        return 'info';
+    if (color === 'primary')
+        return 'primary';
+    return 'secondary';
+}
+class DbBottomNavigation extends HTMLElement {
+    static get observedAttributes() {
+        return ['items', 'active-item-id', 'size', 'background-color', 'fixed'];
+    }
+    connectedCallback() {
+        this.render();
+    }
+    attributeChangedCallback() {
+        if (!this.isConnected)
+            return;
+        this.render();
+    }
+    get items() {
+        return this.parseItems();
+    }
+    set items(value) {
+        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    parseItems() {
+        try {
+            const parsed = JSON.parse(this.getAttribute('items') || '[]');
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    iconSize(size) {
+        if (size === 's')
+            return 20;
+        if (size === 'l')
+            return 28;
+        return 24;
+    }
+    syncHostClasses() {
+        const size = this.getAttribute('size') || 'm';
+        const safeSize = SIZES.includes(size) ? size : 'm';
+        const background = this.getAttribute('background-color') || 'default';
+        const safeBackground = BACKGROUNDS.includes(background)
+            ? background
+            : 'default';
+        this.className = [
+            'designbase-wc-bottom-navigation',
+            `designbase-wc-bottom-navigation--${safeSize}`,
+            `designbase-wc-bottom-navigation--${safeBackground}`,
+            this.getAttribute('fixed') !== 'false' && 'designbase-wc-bottom-navigation--fixed',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    render() {
+        this.syncHostClasses();
+        this.setAttribute('role', 'navigation');
+        this.setAttribute('aria-label', '하단 네비게이션');
+        const items = this.parseItems();
+        const activeItemId = this.getAttribute('active-item-id') || '';
+        const size = this.getAttribute('size') || 'm';
+        const iconPx = this.iconSize(size);
+        let container = this.querySelector('.designbase-wc-bottom-navigation__container');
+        if (!container) {
+            container = document.createElement('div');
+            container.className = 'designbase-wc-bottom-navigation__container';
+            this.replaceChildren(container);
+        }
+        else {
+            container.replaceChildren();
+        }
+        items.forEach((item) => {
+            const isActive = activeItemId === item.id || Boolean(item.isActive);
+            const iconName = resolveIcon(isActive && item.activeIcon ? item.activeIcon : item.icon);
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = [
+                'designbase-wc-bottom-navigation__item',
+                isActive && 'designbase-wc-bottom-navigation__item--active',
+                item.disabled && 'designbase-wc-bottom-navigation__item--disabled',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            button.disabled = Boolean(item.disabled);
+            button.setAttribute('aria-label', item.label);
+            if (isActive)
+                button.setAttribute('aria-current', 'page');
+            const content = document.createElement('div');
+            content.className = 'designbase-wc-bottom-navigation__item-content';
+            const iconWrap = document.createElement('div');
+            iconWrap.className = 'designbase-wc-bottom-navigation__icon-wrapper';
+            if (iconName) {
+                const icon = createDbIcon(iconName, iconPx);
+                icon.classList.add('designbase-wc-bottom-navigation__icon');
+                iconWrap.append(icon);
+            }
+            if (item.badge !== undefined && item.badge !== '') {
+                const badge = document.createElement('db-badge');
+                badge.className = 'designbase-wc-bottom-navigation__badge';
+                badge.setAttribute('size', 's');
+                badge.setAttribute('variant', mapBadgeVariant(item.badgeColor));
+                badge.setAttribute('badge-style', 'number');
+                badge.setAttribute('count', String(item.badge));
+                iconWrap.append(badge);
+            }
+            const label = document.createElement('span');
+            label.className = 'designbase-wc-bottom-navigation__label';
+            label.textContent = item.label;
+            content.append(iconWrap, label);
+            button.append(content);
+            button.addEventListener('click', () => {
+                if (item.disabled)
+                    return;
+                this.dispatchEvent(new CustomEvent('db-item-click', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { item },
+                }));
+            });
+            container.append(button);
+        });
+    }
+}
+if (!customElements.get('db-bottom-navigation')) {
+    customElements.define('db-bottom-navigation', DbBottomNavigation);
+}
+
+export { DbBottomNavigation };

package/dist/esm/components/db-bottom-sheet.js

@@ -1 +1,481 @@
-import{createDbIcon as t}from"./db-icons.js";const e={s:40,m:60,l:80,full:100},s=["default","persistent","temporary","fullscreen"],i=["slide","fade","scale","none"];function resolveHeightPercent(t){if(!t)return e.m;const s=e[t];if(s)return Math.min(100,Math.max(20,s));const i=Number(t);return Number.isFinite(i)?Math.min(100,Math.max(20,i)):e.m}class DbBottomSheet extends HTMLElement{constructor(){super(...arguments),this.sheetHeightPercent=e.m,this.isDragging=!1,this.isVisible=!1,this.isMounted=!1,this.keyHandler=null,this.dragState={active:!1,pointerId:-1,startY:0,startHeight:e.m,lastY:0,lastTime:0},this.handlePointerDown=t=>{"true"!==this.getAttribute("disable-drag")&&0===t.button&&(t.preventDefault(),t.currentTarget.setPointerCapture(t.pointerId),this.dragState={active:!0,pointerId:t.pointerId,startY:t.clientY,startHeight:this.sheetHeightPercent,lastY:t.clientY,lastTime:Date.now()},this.isDragging=!0,this.syncActiveClasses())},this.handlePointerMove=t=>{const e=this.dragState;if(!e.active||t.pointerId!==e.pointerId)return;t.preventDefault(),e.lastY=t.clientY,e.lastTime=Date.now();const s=window.innerHeight||1,i=(e.startY-t.clientY)/s*100,r=this.getMaxHeightLimit(resolveHeightPercent(this.getAttribute("height")));this.sheetHeightPercent=Math.min(r,Math.max(20,e.startHeight+i)),this.applySheetDimensions()},this.handlePointerUp=t=>{const e=this.dragState;if(!e.active||t.pointerId!==e.pointerId)return;const s=t.currentTarget;s.hasPointerCapture(t.pointerId)&&s.releasePointerCapture(t.pointerId),this.finishDrag()}}static get observedAttributes(){return["open","title","subtitle","height","max-height","variant","disable-backdrop-click","disable-escape-key-down","disable-drag","show-close-button","animation","animation-duration","z-index","show-backdrop","backdrop-blur","backdrop-opacity","sticky-header","sticky-footer"]}get open(){return this.hasAttribute("open")&&"false"!==this.getAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}shouldMountPortal(){return this.isOpenRequested()||this.isMounted}connectedCallback(){this.style.display="contents",this.childObserver=new MutationObserver(()=>{this.isOpenRequested()&&this.render()}),this.childObserver.observe(this,{childList:!0}),this.syncOpenState()}disconnectedCallback(){this.childObserver?.disconnect(),this.childObserver=void 0,this.clearTimers(),this.detachEscape(),this.root?.remove(),this.root=void 0,document.body.style.overflow=""}attributeChangedCallback(t){this.isConnected&&("open"!==t?("height"===t&&this.isOpenRequested()&&(this.sheetHeightPercent=resolveHeightPercent(this.getAttribute("height"))),this.shouldMountPortal()&&(this.render(),this.isMounted&&this.syncActiveClasses())):this.syncOpenState())}isOpenRequested(){return this.open}clearTimers(){this.enterFrame&&(cancelAnimationFrame(this.enterFrame),this.enterFrame=void 0),this.exitTimer&&(clearTimeout(this.exitTimer),this.exitTimer=void 0)}scheduleEnterAnimation(){this.enterFrame&&cancelAnimationFrame(this.enterFrame),this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=requestAnimationFrame(()=>{this.enterFrame=void 0,this.isOpenRequested()&&this.sheet&&(this.sheet.offsetHeight,this.isVisible=!0,this.syncActiveClasses())})})}getMaxHeightLimit(t){const e=Number(this.getAttribute("max-height")||0),s=t>=100;return Math.min(100,Math.max(t,e||(s?100:90)))}close(){this.open=!1,this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}attachEscape(){this.keyHandler||(this.keyHandler=t=>{"Escape"===t.key&&"true"!==this.getAttribute("disable-escape-key-down")&&this.close()},document.addEventListener("keydown",this.keyHandler))}detachEscape(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}collectSlotted(t){const e=Array.from(this.querySelectorAll(`:scope > [slot="${t}"]`));if(e.length)return e;if("header"===t){const t=this.sheet?.querySelector(".designbase-wc-bottom-sheet__header-main");return t?Array.from(t.children):[]}if("footer"===t){const t=this.sheet?.querySelector(".designbase-wc-bottom-sheet__footer");return t?Array.from(t.children):[]}return[]}collectContentNodes(){const t=Array.from(this.children).filter(t=>{const e=t.getAttribute("slot");return!e||"default"===e});return t.length?t:this.contentEl?Array.from(this.contentEl.children):[]}finishDrag(){const t=this.dragState;if(!t.active)return;t.active=!1,this.isDragging=!1;const e=t.lastY-t.startY,s=e/Math.max(1,Date.now()-t.lastTime),i=window.innerHeight||1,r=(t.startY-t.lastY)/i*100,n=this.getMaxHeightLimit(resolveHeightPercent(this.getAttribute("height"))),o=Math.min(n,Math.max(20,t.startHeight+r));o<=22||e>72||s>.6?this.close():(this.sheetHeightPercent=o,this.applySheetDimensions(),this.syncActiveClasses())}syncOpenState(){const t=this.isOpenRequested(),e=Number(this.getAttribute("animation-duration")||400);if(this.clearTimers(),t)return this.sheetHeightPercent=resolveHeightPercent(this.getAttribute("height")),this.render(),this.isMounted=!0,this.isVisible=!1,this.syncActiveClasses(),this.root&&!this.root.isConnected&&document.body.append(this.root),this.scheduleEnterAnimation(),document.body.style.overflow="hidden",void this.attachEscape();this.isVisible=!1,this.syncActiveClasses(),this.exitTimer=setTimeout(()=>{this.exitTimer=void 0,this.detachContentToHost(),this.isMounted=!1,this.syncActiveClasses(),this.root?.remove(),document.body.style.overflow="",this.detachEscape()},e),this.detachEscape()}syncActiveClasses(){if(!this.sheet)return;const t=resolveHeightPercent(this.getAttribute("height")),e=this.getAttribute("variant")||"default",r=this.getAttribute("animation")||"slide",n=s.includes(e)?e:"default",o=i.includes(r)?r:"slide",a="false"!==this.getAttribute("show-backdrop"),h=this.hasAttribute("sticky-header"),c=this.hasAttribute("sticky-footer");this.sheet.className=["designbase-wc-bottom-sheet",`designbase-wc-bottom-sheet--${n}`,`designbase-wc-bottom-sheet--${o}`,this.isMounted&&this.isVisible&&"designbase-wc-bottom-sheet--open",this.isDragging&&"designbase-wc-bottom-sheet--dragging",h&&"designbase-wc-bottom-sheet--sticky-header",c&&"designbase-wc-bottom-sheet--sticky-footer",!a&&"designbase-wc-bottom-sheet--no-backdrop",(t>=100||this.sheetHeightPercent>=100)&&"designbase-wc-bottom-sheet--full"].filter(Boolean).join(" "),this.backdrop?.classList.toggle("designbase-wc-backdrop--open",this.isMounted&&this.isVisible)}applySheetDimensions(){if(!this.sheet)return;const t=this.getMaxHeightLimit(resolveHeightPercent(this.getAttribute("height")));this.sheet.style.height=`${this.sheetHeightPercent}vh`,this.sheet.style.maxHeight=`${t}vh`}detachContentToHost(){this.contentEl&&Array.from(this.contentEl.children).forEach(t=>this.append(t));const t=this.sheet?.querySelector(".designbase-wc-bottom-sheet__header-main");t&&Array.from(t.children).forEach(t=>{"bottom-sheet-title"!==t.id&&"bottom-sheet-subtitle"!==t.id&&this.append(t)});const e=this.sheet?.querySelector(".designbase-wc-bottom-sheet__footer");e&&Array.from(e.children).forEach(t=>this.append(t))}render(){if(!this.shouldMountPortal())return;const e=this.getAttribute("title"),s=this.getAttribute("subtitle"),i="false"!==this.getAttribute("show-close-button"),r="false"!==this.getAttribute("show-backdrop"),n=this.hasAttribute("backdrop-blur"),o=this.getAttribute("backdrop-opacity")||"0.5",a=this.getAttribute("animation-duration")||"400",h=this.getAttribute("z-index")||"1000",c=this.hasAttribute("sticky-header"),d=this.hasAttribute("sticky-footer"),l=this.collectSlotted("header"),b=this.collectSlotted("footer"),m=this.collectContentNodes();if(this.root||(this.root=document.createElement("div"),this.root.setAttribute("data-wc-internal",""),this.backdrop=document.createElement("div"),this.backdrop.className="designbase-wc-backdrop designbase-wc-backdrop--bottom-sheet",this.backdrop.setAttribute("role","presentation"),this.backdrop.addEventListener("click",t=>{t.target===this.backdrop&&"true"!==this.getAttribute("disable-backdrop-click")&&this.close()}),this.sheet=document.createElement("div"),this.sheet.setAttribute("role","dialog"),this.sheet.setAttribute("aria-modal","true"),this.grabBar=document.createElement("div"),this.grabBar.className="designbase-wc-bottom-sheet__grab-bar",this.grabBar.addEventListener("pointerdown",this.handlePointerDown),this.grabBar.addEventListener("pointermove",this.handlePointerMove),this.grabBar.addEventListener("pointerup",this.handlePointerUp),this.grabBar.addEventListener("pointercancel",this.handlePointerUp),this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-bottom-sheet__content"),this.root.replaceChildren(),r&&this.backdrop&&(this.backdrop.className=["designbase-wc-backdrop","designbase-wc-backdrop--bottom-sheet",n&&"designbase-wc-backdrop--blur"].filter(Boolean).join(" "),this.backdrop.style.setProperty("--backdrop-opacity",o),this.backdrop.style.setProperty("--bottom-sheet-animation-duration",`${a}ms`),this.backdrop.style.zIndex=h,this.backdrop.setAttribute("aria-hidden",String(!this.isOpenRequested())),this.root.append(this.backdrop)),!this.sheet||!this.grabBar||!this.contentEl)return;this.sheet.style.zIndex=String(Number(h)+1),this.sheet.style.setProperty("--bottom-sheet-animation-duration",`${a}ms`),this.applySheetDimensions(),e?this.sheet.setAttribute("aria-labelledby","bottom-sheet-title"):this.sheet.removeAttribute("aria-labelledby"),s?this.sheet.setAttribute("aria-describedby","bottom-sheet-subtitle"):this.sheet.removeAttribute("aria-describedby"),this.sheet.replaceChildren();const u="true"===this.getAttribute("disable-drag");if(this.grabBar.className=["designbase-wc-bottom-sheet__grab-bar",!u&&"designbase-wc-bottom-sheet__grab-bar--draggable"].filter(Boolean).join(" "),this.grabBar.replaceChildren(),!u){const t=document.createElement("div");t.className="designbase-wc-bottom-sheet__handle",t.setAttribute("aria-hidden","true"),this.grabBar.append(t)}this.sheet.append(this.grabBar);if(Boolean(e||s||l.length||i)){const r=document.createElement("div");r.className=["designbase-wc-bottom-sheet__header",c&&"designbase-wc-bottom-sheet__header--sticky"].filter(Boolean).join(" ");const n=document.createElement("div");if(n.className="designbase-wc-bottom-sheet__header-main",l.length)l.forEach(t=>n.append(t));else{if(e){const t=document.createElement("h2");t.id="bottom-sheet-title",t.className="designbase-wc-bottom-sheet__title",t.textContent=e,n.append(t)}if(s){const t=document.createElement("p");t.id="bottom-sheet-subtitle",t.className="designbase-wc-bottom-sheet__subtitle",t.textContent=s,n.append(t)}}if(r.append(n),i){const e=document.createElement("button");e.type="button",e.className="designbase-wc-bottom-sheet__close-button",e.setAttribute("aria-label","닫기"),e.append(t("close",20)),e.addEventListener("click",()=>this.close()),r.append(e)}this.sheet.append(r)}if(this.contentEl.replaceChildren(...m),this.sheet.append(this.contentEl),b.length){const t=document.createElement("div");t.className=["designbase-wc-bottom-sheet__footer",d&&"designbase-wc-bottom-sheet__footer--sticky"].filter(Boolean).join(" "),b.forEach(e=>t.append(e)),this.sheet.append(t)}this.root.append(this.sheet),this.isMounted&&!this.root.isConnected&&document.body.append(this.root),this.syncActiveClasses()}}customElements.get("db-bottom-sheet")||customElements.define("db-bottom-sheet",DbBottomSheet);export{DbBottomSheet};
+import { createDbIcon } from './db-icons.js';
+
+const HEIGHT_PRESETS = {
+    s: 40,
+    m: 60,
+    l: 80,
+    full: 100,
+};
+const VARIANTS = ['default', 'persistent', 'temporary', 'fullscreen'];
+const ANIMATIONS = ['slide', 'fade', 'scale', 'none'];
+const MIN_HEIGHT_PERCENT = 20;
+const CLOSE_HEIGHT_PERCENT = 22;
+const CLOSE_DRAG_PX = 72;
+function resolveHeightPercent(height) {
+    if (!height)
+        return HEIGHT_PRESETS.m;
+    const preset = HEIGHT_PRESETS[height];
+    if (preset)
+        return Math.min(100, Math.max(MIN_HEIGHT_PERCENT, preset));
+    const numeric = Number(height);
+    if (Number.isFinite(numeric))
+        return Math.min(100, Math.max(MIN_HEIGHT_PERCENT, numeric));
+    return HEIGHT_PRESETS.m;
+}
+class DbBottomSheet extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.sheetHeightPercent = HEIGHT_PRESETS.m;
+        this.isDragging = false;
+        this.isVisible = false;
+        this.isMounted = false;
+        this.keyHandler = null;
+        this.dragState = {
+            active: false,
+            pointerId: -1,
+            startY: 0,
+            startHeight: HEIGHT_PRESETS.m,
+            lastY: 0,
+            lastTime: 0,
+        };
+        this.handlePointerDown = (event) => {
+            if (this.getAttribute('disable-drag') === 'true' || event.button !== 0)
+                return;
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            this.dragState = {
+                active: true,
+                pointerId: event.pointerId,
+                startY: event.clientY,
+                startHeight: this.sheetHeightPercent,
+                lastY: event.clientY,
+                lastTime: Date.now(),
+            };
+            this.isDragging = true;
+            this.syncActiveClasses();
+        };
+        this.handlePointerMove = (event) => {
+            const drag = this.dragState;
+            if (!drag.active || event.pointerId !== drag.pointerId)
+                return;
+            event.preventDefault();
+            drag.lastY = event.clientY;
+            drag.lastTime = Date.now();
+            const viewportHeight = window.innerHeight || 1;
+            const deltaPercent = ((drag.startY - event.clientY) / viewportHeight) * 100;
+            const maxHeightLimit = this.getMaxHeightLimit(resolveHeightPercent(this.getAttribute('height')));
+            this.sheetHeightPercent = Math.min(maxHeightLimit, Math.max(MIN_HEIGHT_PERCENT, drag.startHeight + deltaPercent));
+            this.applySheetDimensions();
+        };
+        this.handlePointerUp = (event) => {
+            const drag = this.dragState;
+            if (!drag.active || event.pointerId !== drag.pointerId)
+                return;
+            const target = event.currentTarget;
+            if (target.hasPointerCapture(event.pointerId)) {
+                target.releasePointerCapture(event.pointerId);
+            }
+            this.finishDrag();
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'open',
+            'title',
+            'subtitle',
+            'height',
+            'max-height',
+            'variant',
+            'disable-backdrop-click',
+            'disable-escape-key-down',
+            'disable-drag',
+            'show-close-button',
+            'animation',
+            'animation-duration',
+            'z-index',
+            'show-backdrop',
+            'backdrop-blur',
+            'backdrop-opacity',
+            'sticky-header',
+            'sticky-footer',
+        ];
+    }
+    get open() {
+        return this.hasAttribute('open') && this.getAttribute('open') !== 'false';
+    }
+    set open(value) {
+        if (value)
+            this.setAttribute('open', '');
+        else
+            this.removeAttribute('open');
+    }
+    shouldMountPortal() {
+        return this.isOpenRequested() || this.isMounted;
+    }
+    connectedCallback() {
+        this.style.display = 'contents';
+        this.childObserver = new MutationObserver(() => {
+            if (this.isOpenRequested())
+                this.render();
+        });
+        this.childObserver.observe(this, { childList: true });
+        this.syncOpenState();
+    }
+    disconnectedCallback() {
+        this.childObserver?.disconnect();
+        this.childObserver = undefined;
+        this.clearTimers();
+        this.detachEscape();
+        this.root?.remove();
+        this.root = undefined;
+        document.body.style.overflow = '';
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === 'open') {
+            this.syncOpenState();
+            return;
+        }
+        if (name === 'height' && this.isOpenRequested()) {
+            this.sheetHeightPercent = resolveHeightPercent(this.getAttribute('height'));
+        }
+        if (!this.shouldMountPortal())
+            return;
+        this.render();
+        if (this.isMounted)
+            this.syncActiveClasses();
+    }
+    isOpenRequested() {
+        return this.open;
+    }
+    clearTimers() {
+        if (this.enterFrame) {
+            cancelAnimationFrame(this.enterFrame);
+            this.enterFrame = undefined;
+        }
+        if (this.exitTimer) {
+            clearTimeout(this.exitTimer);
+            this.exitTimer = undefined;
+        }
+    }
+    /** 닫힌 transform이 페인트된 뒤 --open을 붙여 슬라이드 업 전환이 보이게 함 */
+    scheduleEnterAnimation() {
+        if (this.enterFrame)
+            cancelAnimationFrame(this.enterFrame);
+        this.enterFrame = requestAnimationFrame(() => {
+            this.enterFrame = requestAnimationFrame(() => {
+                this.enterFrame = undefined;
+                if (!this.isOpenRequested() || !this.sheet)
+                    return;
+                void this.sheet.offsetHeight;
+                this.isVisible = true;
+                this.syncActiveClasses();
+            });
+        });
+    }
+    getMaxHeightLimit(initialHeight) {
+        const maxHeightProp = Number(this.getAttribute('max-height') || 0);
+        const isFullHeight = initialHeight >= 100;
+        return Math.min(100, Math.max(initialHeight, maxHeightProp || (isFullHeight ? 100 : 90)));
+    }
+    close() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('db-close', { bubbles: true, composed: true }));
+    }
+    attachEscape() {
+        if (this.keyHandler)
+            return;
+        this.keyHandler = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            if (this.getAttribute('disable-escape-key-down') === 'true')
+                return;
+            this.close();
+        };
+        document.addEventListener('keydown', this.keyHandler);
+    }
+    detachEscape() {
+        if (!this.keyHandler)
+            return;
+        document.removeEventListener('keydown', this.keyHandler);
+        this.keyHandler = null;
+    }
+    collectSlotted(name) {
+        const direct = Array.from(this.querySelectorAll(`:scope > [slot="${name}"]`));
+        if (direct.length)
+            return direct;
+        if (name === 'header') {
+            const main = this.sheet?.querySelector('.designbase-wc-bottom-sheet__header-main');
+            return main ? Array.from(main.children) : [];
+        }
+        if (name === 'footer') {
+            const footer = this.sheet?.querySelector('.designbase-wc-bottom-sheet__footer');
+            return footer ? Array.from(footer.children) : [];
+        }
+        return [];
+    }
+    collectContentNodes() {
+        const direct = Array.from(this.children).filter((child) => {
+            const slot = child.getAttribute('slot');
+            return !slot || slot === 'default';
+        });
+        if (direct.length)
+            return direct;
+        return this.contentEl ? Array.from(this.contentEl.children) : [];
+    }
+    finishDrag() {
+        const drag = this.dragState;
+        if (!drag.active)
+            return;
+        drag.active = false;
+        this.isDragging = false;
+        const deltaY = drag.lastY - drag.startY;
+        const elapsed = Math.max(1, Date.now() - drag.lastTime);
+        const velocity = deltaY / elapsed;
+        const viewportHeight = window.innerHeight || 1;
+        const deltaPercent = ((drag.startY - drag.lastY) / viewportHeight) * 100;
+        const maxHeightLimit = this.getMaxHeightLimit(resolveHeightPercent(this.getAttribute('height')));
+        const finalHeight = Math.min(maxHeightLimit, Math.max(MIN_HEIGHT_PERCENT, drag.startHeight + deltaPercent));
+        if (finalHeight <= CLOSE_HEIGHT_PERCENT || deltaY > CLOSE_DRAG_PX || velocity > 0.6) {
+            this.close();
+            return;
+        }
+        this.sheetHeightPercent = finalHeight;
+        this.applySheetDimensions();
+        this.syncActiveClasses();
+    }
+    syncOpenState() {
+        const shouldOpen = this.isOpenRequested();
+        const duration = Number(this.getAttribute('animation-duration') || 400);
+        this.clearTimers();
+        if (shouldOpen) {
+            this.sheetHeightPercent = resolveHeightPercent(this.getAttribute('height'));
+            this.render();
+            this.isMounted = true;
+            this.isVisible = false;
+            this.syncActiveClasses();
+            if (this.root && !this.root.isConnected) {
+                document.body.append(this.root);
+            }
+            this.scheduleEnterAnimation();
+            document.body.style.overflow = 'hidden';
+            this.attachEscape();
+            return;
+        }
+        this.isVisible = false;
+        this.syncActiveClasses();
+        this.exitTimer = setTimeout(() => {
+            this.exitTimer = undefined;
+            this.detachContentToHost();
+            this.isMounted = false;
+            this.syncActiveClasses();
+            this.root?.remove();
+            document.body.style.overflow = '';
+            this.detachEscape();
+        }, duration);
+        this.detachEscape();
+    }
+    syncActiveClasses() {
+        if (!this.sheet)
+            return;
+        const initialHeight = resolveHeightPercent(this.getAttribute('height'));
+        const variant = this.getAttribute('variant') || 'default';
+        const animation = this.getAttribute('animation') || 'slide';
+        const safeVariant = VARIANTS.includes(variant) ? variant : 'default';
+        const safeAnimation = ANIMATIONS.includes(animation) ? animation : 'slide';
+        const showBackdrop = this.getAttribute('show-backdrop') !== 'false';
+        const stickyHeader = this.hasAttribute('sticky-header');
+        const stickyFooter = this.hasAttribute('sticky-footer');
+        this.sheet.className = [
+            'designbase-wc-bottom-sheet',
+            `designbase-wc-bottom-sheet--${safeVariant}`,
+            `designbase-wc-bottom-sheet--${safeAnimation}`,
+            this.isMounted && this.isVisible && 'designbase-wc-bottom-sheet--open',
+            this.isDragging && 'designbase-wc-bottom-sheet--dragging',
+            stickyHeader && 'designbase-wc-bottom-sheet--sticky-header',
+            stickyFooter && 'designbase-wc-bottom-sheet--sticky-footer',
+            !showBackdrop && 'designbase-wc-bottom-sheet--no-backdrop',
+            (initialHeight >= 100 || this.sheetHeightPercent >= 100) && 'designbase-wc-bottom-sheet--full',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.backdrop?.classList.toggle('designbase-wc-backdrop--open', this.isMounted && this.isVisible);
+    }
+    applySheetDimensions() {
+        if (!this.sheet)
+            return;
+        const maxHeightLimit = this.getMaxHeightLimit(resolveHeightPercent(this.getAttribute('height')));
+        this.sheet.style.height = `${this.sheetHeightPercent}vh`;
+        this.sheet.style.maxHeight = `${maxHeightLimit}vh`;
+    }
+    detachContentToHost() {
+        if (this.contentEl) {
+            Array.from(this.contentEl.children).forEach((child) => this.append(child));
+        }
+        const headerMain = this.sheet?.querySelector('.designbase-wc-bottom-sheet__header-main');
+        if (headerMain) {
+            Array.from(headerMain.children).forEach((child) => {
+                if (child.id !== 'bottom-sheet-title' && child.id !== 'bottom-sheet-subtitle') {
+                    this.append(child);
+                }
+            });
+        }
+        const footer = this.sheet?.querySelector('.designbase-wc-bottom-sheet__footer');
+        if (footer) {
+            Array.from(footer.children).forEach((child) => this.append(child));
+        }
+    }
+    render() {
+        if (!this.shouldMountPortal()) {
+            return;
+        }
+        const title = this.getAttribute('title');
+        const subtitle = this.getAttribute('subtitle');
+        const showCloseButton = this.getAttribute('show-close-button') !== 'false';
+        const showBackdrop = this.getAttribute('show-backdrop') !== 'false';
+        const backdropBlur = this.hasAttribute('backdrop-blur');
+        const backdropOpacity = this.getAttribute('backdrop-opacity') || '0.5';
+        const animationDuration = this.getAttribute('animation-duration') || '400';
+        const zIndex = this.getAttribute('z-index') || '1000';
+        const stickyHeader = this.hasAttribute('sticky-header');
+        const stickyFooter = this.hasAttribute('sticky-footer');
+        const headerSlot = this.collectSlotted('header');
+        const footerSlot = this.collectSlotted('footer');
+        const contentNodes = this.collectContentNodes();
+        if (!this.root) {
+            this.root = document.createElement('div');
+            this.root.setAttribute('data-wc-internal', '');
+            this.backdrop = document.createElement('div');
+            this.backdrop.className = 'designbase-wc-backdrop designbase-wc-backdrop--bottom-sheet';
+            this.backdrop.setAttribute('role', 'presentation');
+            this.backdrop.addEventListener('click', (event) => {
+                if (event.target !== this.backdrop)
+                    return;
+                if (this.getAttribute('disable-backdrop-click') === 'true')
+                    return;
+                this.close();
+            });
+            this.sheet = document.createElement('div');
+            this.sheet.setAttribute('role', 'dialog');
+            this.sheet.setAttribute('aria-modal', 'true');
+            this.grabBar = document.createElement('div');
+            this.grabBar.className = 'designbase-wc-bottom-sheet__grab-bar';
+            this.grabBar.addEventListener('pointerdown', this.handlePointerDown);
+            this.grabBar.addEventListener('pointermove', this.handlePointerMove);
+            this.grabBar.addEventListener('pointerup', this.handlePointerUp);
+            this.grabBar.addEventListener('pointercancel', this.handlePointerUp);
+            this.contentEl = document.createElement('div');
+            this.contentEl.className = 'designbase-wc-bottom-sheet__content';
+        }
+        this.root.replaceChildren();
+        if (showBackdrop && this.backdrop) {
+            this.backdrop.className = [
+                'designbase-wc-backdrop',
+                'designbase-wc-backdrop--bottom-sheet',
+                backdropBlur && 'designbase-wc-backdrop--blur',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            this.backdrop.style.setProperty('--backdrop-opacity', backdropOpacity);
+            this.backdrop.style.setProperty('--bottom-sheet-animation-duration', `${animationDuration}ms`);
+            this.backdrop.style.zIndex = zIndex;
+            this.backdrop.setAttribute('aria-hidden', String(!this.isOpenRequested()));
+            this.root.append(this.backdrop);
+        }
+        if (!this.sheet || !this.grabBar || !this.contentEl)
+            return;
+        this.sheet.style.zIndex = String(Number(zIndex) + 1);
+        this.sheet.style.setProperty('--bottom-sheet-animation-duration', `${animationDuration}ms`);
+        this.applySheetDimensions();
+        if (title)
+            this.sheet.setAttribute('aria-labelledby', 'bottom-sheet-title');
+        else
+            this.sheet.removeAttribute('aria-labelledby');
+        if (subtitle)
+            this.sheet.setAttribute('aria-describedby', 'bottom-sheet-subtitle');
+        else
+            this.sheet.removeAttribute('aria-describedby');
+        this.sheet.replaceChildren();
+        const disableDrag = this.getAttribute('disable-drag') === 'true';
+        this.grabBar.className = [
+            'designbase-wc-bottom-sheet__grab-bar',
+            !disableDrag && 'designbase-wc-bottom-sheet__grab-bar--draggable',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.grabBar.replaceChildren();
+        if (!disableDrag) {
+            const handle = document.createElement('div');
+            handle.className = 'designbase-wc-bottom-sheet__handle';
+            handle.setAttribute('aria-hidden', 'true');
+            this.grabBar.append(handle);
+        }
+        this.sheet.append(this.grabBar);
+        const showHeaderBlock = Boolean(title || subtitle || headerSlot.length || showCloseButton);
+        if (showHeaderBlock) {
+            const header = document.createElement('div');
+            header.className = [
+                'designbase-wc-bottom-sheet__header',
+                stickyHeader && 'designbase-wc-bottom-sheet__header--sticky',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const headerMain = document.createElement('div');
+            headerMain.className = 'designbase-wc-bottom-sheet__header-main';
+            if (headerSlot.length) {
+                headerSlot.forEach((node) => headerMain.append(node));
+            }
+            else {
+                if (title) {
+                    const heading = document.createElement('h2');
+                    heading.id = 'bottom-sheet-title';
+                    heading.className = 'designbase-wc-bottom-sheet__title';
+                    heading.textContent = title;
+                    headerMain.append(heading);
+                }
+                if (subtitle) {
+                    const sub = document.createElement('p');
+                    sub.id = 'bottom-sheet-subtitle';
+                    sub.className = 'designbase-wc-bottom-sheet__subtitle';
+                    sub.textContent = subtitle;
+                    headerMain.append(sub);
+                }
+            }
+            header.append(headerMain);
+            if (showCloseButton) {
+                const close = document.createElement('button');
+                close.type = 'button';
+                close.className = 'designbase-wc-bottom-sheet__close-button';
+                close.setAttribute('aria-label', '닫기');
+                close.append(createDbIcon('close', 20));
+                close.addEventListener('click', () => this.close());
+                header.append(close);
+            }
+            this.sheet.append(header);
+        }
+        this.contentEl.replaceChildren(...contentNodes);
+        this.sheet.append(this.contentEl);
+        if (footerSlot.length) {
+            const footer = document.createElement('div');
+            footer.className = [
+                'designbase-wc-bottom-sheet__footer',
+                stickyFooter && 'designbase-wc-bottom-sheet__footer--sticky',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            footerSlot.forEach((node) => footer.append(node));
+            this.sheet.append(footer);
+        }
+        this.root.append(this.sheet);
+        if (this.isMounted && !this.root.isConnected) {
+            document.body.append(this.root);
+        }
+        this.syncActiveClasses();
+    }
+}
+if (!customElements.get('db-bottom-sheet')) {
+    customElements.define('db-bottom-sheet', DbBottomSheet);
+}
+
+export { DbBottomSheet };