@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,146 +1 @@
-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 };
+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};

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

@@ -1,481 +1 @@
-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 };
+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};