@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,1068 +1 @@
-import { createDbIcon, isDbIconName } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'dark', 'light'];
-const POSITIONS = ['left', 'right'];
-const FLYOUT_CLOSE_DELAY_MS = 120;
-class DbSidebar extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.expandedItems = new Set();
-        this.userMenuOpen = false;
-        this.projectMenuOpen = false;
-        this.flyoutItemId = null;
-        this.flyoutCloseTimer = null;
-        this.outsideHandler = null;
-    }
-    static get observedAttributes() {
-        return [
-            'items',
-            'sections',
-            'user-menu-items',
-            'user-profile',
-            'default-expanded-ids',
-            'projects',
-            'selected-project-id',
-            'project-manage-label',
-            'project-manage-href',
-            'project-section-label',
-            'project-empty-label',
-            'project-empty-trigger-label',
-            'bottom-items',
-            'bottom-sections',
-            'promo-banner',
-            'size',
-            'variant',
-            'position',
-            'collapsed',
-            'collapsible',
-            'show-logo',
-            'full-height',
-            'shadow',
-        ];
-    }
-    connectedCallback() {
-        this.seedExpanded();
-        this.render();
-        this.bindOutsideClick();
-    }
-    disconnectedCallback() {
-        this.unbindOutsideClick();
-        this.cancelFlyoutClose();
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'default-expanded-ids')
-            this.seedExpanded();
-        if (name === 'collapsed' && this.hasAttribute('collapsed')) {
-            this.userMenuOpen = false;
-            this.projectMenuOpen = false;
-            this.flyoutItemId = null;
-            this.cancelFlyoutClose();
-        }
-        this.render();
-    }
-    seedExpanded() {
-        try {
-            const ids = JSON.parse(this.getAttribute('default-expanded-ids') || '[]');
-            if (Array.isArray(ids))
-                this.expandedItems = new Set(ids);
-        }
-        catch {
-            this.expandedItems = new Set();
-        }
-    }
-    get items() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('items') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    set items(value) {
-        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get sections() {
-        return this.parseSections();
-    }
-    set sections(value) {
-        this.setAttribute('sections', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get userMenuItems() {
-        return this.parseUserMenuItems();
-    }
-    set userMenuItems(value) {
-        this.setAttribute('user-menu-items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get userProfile() {
-        return this.parseUserProfile();
-    }
-    set userProfile(value) {
-        if (value === null || value === undefined)
-            this.removeAttribute('user-profile');
-        else
-            this.setAttribute('user-profile', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get projects() {
-        return this.parseProjects();
-    }
-    set projects(value) {
-        this.setAttribute('projects', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get selectedProjectId() {
-        return this.getAttribute('selected-project-id') || '';
-    }
-    set selectedProjectId(value) {
-        if (value)
-            this.setAttribute('selected-project-id', value);
-        else
-            this.removeAttribute('selected-project-id');
-    }
-    get projectManageLabel() {
-        return this.getAttribute('project-manage-label') || '프로젝트 관리';
-    }
-    set projectManageLabel(value) {
-        this.setAttribute('project-manage-label', value);
-    }
-    get projectManageHref() {
-        return this.getAttribute('project-manage-href') || '';
-    }
-    set projectManageHref(value) {
-        if (value)
-            this.setAttribute('project-manage-href', value);
-        else
-            this.removeAttribute('project-manage-href');
-    }
-    get projectSectionLabel() {
-        return this.getAttribute('project-section-label') || '프로젝트';
-    }
-    set projectSectionLabel(value) {
-        this.setAttribute('project-section-label', value);
-    }
-    get projectEmptyLabel() {
-        return this.getAttribute('project-empty-label') || '프로젝트를 추가해 주세요';
-    }
-    set projectEmptyLabel(value) {
-        this.setAttribute('project-empty-label', value);
-    }
-    get projectEmptyTriggerLabel() {
-        return this.getAttribute('project-empty-trigger-label') || '프로젝트 추가';
-    }
-    set projectEmptyTriggerLabel(value) {
-        this.setAttribute('project-empty-trigger-label', value);
-    }
-    get bottomItems() {
-        return this.parseBottomItems();
-    }
-    set bottomItems(value) {
-        this.setAttribute('bottom-items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get bottomSections() {
-        return this.parseBottomSections();
-    }
-    set bottomSections(value) {
-        this.setAttribute('bottom-sections', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get promoBanner() {
-        return this.parsePromoBanner();
-    }
-    set promoBanner(value) {
-        if (value === null || value === undefined)
-            this.removeAttribute('promo-banner');
-        else
-            this.setAttribute('promo-banner', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    parseSections() {
-        const sectionsRaw = this.getAttribute('sections');
-        if (sectionsRaw) {
-            try {
-                const parsed = JSON.parse(sectionsRaw);
-                if (Array.isArray(parsed) && parsed.length)
-                    return parsed;
-            }
-            catch {
-                /* fall through */
-            }
-        }
-        try {
-            const items = JSON.parse(this.getAttribute('items') || '[]');
-            return [{ id: 'main', items: Array.isArray(items) ? items : [] }];
-        }
-        catch {
-            return [{ id: 'main', items: [] }];
-        }
-    }
-    parseUserMenuItems() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('user-menu-items') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    parseUserProfile() {
-        const raw = this.getAttribute('user-profile');
-        if (!raw)
-            return null;
-        try {
-            return JSON.parse(raw);
-        }
-        catch {
-            return null;
-        }
-    }
-    parseProjects() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('projects') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    parseBottomItems() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('bottom-items') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    parseBottomSections() {
-        const sectionsRaw = this.getAttribute('bottom-sections');
-        if (sectionsRaw) {
-            try {
-                const parsed = JSON.parse(sectionsRaw);
-                if (Array.isArray(parsed) && parsed.length)
-                    return parsed;
-            }
-            catch {
-                /* fall through */
-            }
-        }
-        const items = this.parseBottomItems();
-        return items.length ? [{ id: 'bottom', items }] : [];
-    }
-    parsePromoBanner() {
-        const raw = this.getAttribute('promo-banner');
-        if (!raw)
-            return null;
-        try {
-            return JSON.parse(raw);
-        }
-        catch {
-            return null;
-        }
-    }
-    getSelectedProject() {
-        const projects = this.parseProjects();
-        if (!projects.length)
-            return null;
-        const selectedId = this.selectedProjectId;
-        return projects.find((project) => project.id === selectedId) || projects[0];
-    }
-    bindOutsideClick() {
-        if (this.outsideHandler)
-            return;
-        this.outsideHandler = (event) => {
-            const target = event.target;
-            // 사이드바 내부 클릭은 각 핸들러가 exclusive open을 처리 — mousedown에서 remount하면 클릭이 씹힘
-            if (this.contains(target))
-                return;
-            let changed = false;
-            if (this.userMenuOpen) {
-                this.userMenuOpen = false;
-                changed = true;
-            }
-            if (this.projectMenuOpen) {
-                this.projectMenuOpen = false;
-                changed = true;
-            }
-            if (changed)
-                this.render();
-        };
-        document.addEventListener('mousedown', this.outsideHandler);
-    }
-    closeOverlayMenus() {
-        const projectOpen = this.projectMenuOpen;
-        const userOpen = this.userMenuOpen;
-        if (!projectOpen && !userOpen)
-            return false;
-        this.projectMenuOpen = false;
-        this.userMenuOpen = false;
-        this.querySelector('.designbase-wc-sidebar__project-dropdown')?.remove();
-        this.querySelector('.designbase-wc-sidebar__project-selector')?.classList.remove('designbase-wc-sidebar__project-selector--open');
-        const projectTrigger = this.querySelector('.designbase-wc-sidebar__project-trigger');
-        projectTrigger?.setAttribute('aria-expanded', 'false');
-        const userDropdown = this.querySelector('.designbase-wc-sidebar__user-dropdown');
-        if (userDropdown)
-            userDropdown.hidden = true;
-        this.querySelector('.designbase-wc-sidebar__user-info')?.setAttribute('aria-expanded', 'false');
-        this.querySelector('.designbase-wc-sidebar__user-collapsed')?.setAttribute('aria-expanded', 'false');
-        this.querySelector('.designbase-wc-sidebar__user-collapsed')?.classList.remove('designbase-wc-sidebar__user-collapsed--open');
-        return true;
-    }
-    syncExclusiveAccordion(openId) {
-        const roots = [
-            ...Array.from(this.querySelectorAll('.designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item')),
-            ...Array.from(this.querySelectorAll('.designbase-wc-sidebar__bottom-nav .designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item')),
-        ];
-        roots.forEach((el) => {
-            const id = el.getAttribute('data-item-id');
-            if (!id)
-                return;
-            if (openId && id === openId)
-                el.setAttribute('expanded', '');
-            else
-                el.removeAttribute('expanded');
-        });
-    }
-    unbindOutsideClick() {
-        if (!this.outsideHandler)
-            return;
-        document.removeEventListener('mousedown', this.outsideHandler);
-        this.outsideHandler = null;
-    }
-    cancelFlyoutClose() {
-        if (this.flyoutCloseTimer) {
-            clearTimeout(this.flyoutCloseTimer);
-            this.flyoutCloseTimer = null;
-        }
-    }
-    showFlyout(itemId) {
-        this.cancelFlyoutClose();
-        if (this.flyoutItemId === itemId)
-            return;
-        this.flyoutItemId = itemId;
-        this.renderNav();
-        this.renderBottomNav();
-    }
-    scheduleFlyoutClose() {
-        this.cancelFlyoutClose();
-        this.flyoutCloseTimer = setTimeout(() => {
-            this.flyoutCloseTimer = null;
-            this.flyoutItemId = null;
-            this.renderNav();
-            this.renderBottomNav();
-        }, FLYOUT_CLOSE_DELAY_MS);
-    }
-    syncHostClasses() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const position = this.getAttribute('position') || 'left';
-        this.className = [
-            'designbase-wc-sidebar',
-            `designbase-wc-sidebar--${SIZES.includes(size) ? size : 'm'}`,
-            `designbase-wc-sidebar--${VARIANTS.includes(variant) ? variant : 'default'}`,
-            `designbase-wc-sidebar--${POSITIONS.includes(position) ? position : 'left'}`,
-            this.hasAttribute('collapsed') && 'designbase-wc-sidebar--collapsed',
-            this.hasAttribute('full-height') && 'designbase-wc-sidebar--full-height',
-            this.hasAttribute('shadow') && 'designbase-wc-sidebar--shadow',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    dispatchItemClick(item) {
-        this.dispatchEvent(new CustomEvent('db-item-click', {
-            bubbles: true,
-            composed: true,
-            detail: { item },
-        }));
-    }
-    dispatchUserMenuItemClick(item) {
-        this.dispatchEvent(new CustomEvent('db-user-menu-item-click', {
-            bubbles: true,
-            composed: true,
-            detail: { item },
-        }));
-    }
-    dispatchProjectChange(project) {
-        this.dispatchEvent(new CustomEvent('db-project-change', {
-            bubbles: true,
-            composed: true,
-            detail: { project },
-        }));
-    }
-    dispatchProjectManage() {
-        this.dispatchEvent(new CustomEvent('db-project-manage', {
-            bubbles: true,
-            composed: true,
-            detail: {},
-        }));
-    }
-    dispatchPromoCtaClick(banner) {
-        this.dispatchEvent(new CustomEvent('db-promo-cta-click', {
-            bubbles: true,
-            composed: true,
-            detail: { banner },
-        }));
-    }
-    createProjectAvatar(project, size = 's') {
-        const avatar = document.createElement('db-avatar');
-        avatar.className = 'designbase-wc-sidebar__project-avatar';
-        avatar.setAttribute('size', size);
-        avatar.setAttribute('initials', (project.label || '?').trim());
-        avatar.setAttribute('alt', project.label);
-        if (project.color) {
-            const applyColor = () => {
-                const initials = avatar.querySelector('.designbase-wc-avatar__initials');
-                if (!initials)
-                    return false;
-                initials.style.backgroundColor = project.color;
-                initials.style.color = '#fff';
-                return true;
-            };
-            const observer = new MutationObserver(() => {
-                if (applyColor())
-                    observer.disconnect();
-            });
-            observer.observe(avatar, { childList: true, subtree: true });
-            queueMicrotask(() => {
-                if (applyColor())
-                    observer.disconnect();
-            });
-        }
-        return avatar;
-    }
-    createProjectEmptyMark(size = 's') {
-        const mark = document.createElement('span');
-        mark.className = [
-            'designbase-wc-sidebar__project-mark',
-            `designbase-wc-sidebar__project-mark--${size}`,
-            'designbase-wc-sidebar__project-mark--empty',
-        ].join(' ');
-        mark.setAttribute('aria-hidden', 'true');
-        mark.append(createDbIcon('plus', size === 'm' ? 16 : 14));
-        return mark;
-    }
-    createProjectBadge(project) {
-        if (!project.badge)
-            return null;
-        const badge = document.createElement('db-badge');
-        badge.className = 'designbase-wc-sidebar__project-badge';
-        badge.setAttribute('size', 's');
-        badge.setAttribute('variant', project.badgeColor || 'warning');
-        badge.setAttribute('badge-style', 'text');
-        badge.textContent = project.badge;
-        return badge;
-    }
-    createProjectSelector(collapsed) {
-        if (!this.hasAttribute('projects'))
-            return null;
-        const projects = this.parseProjects();
-        const isEmpty = projects.length === 0;
-        const selected = this.getSelectedProject();
-        const wrap = document.createElement('div');
-        wrap.className = [
-            'designbase-wc-sidebar__project-selector',
-            collapsed && 'designbase-wc-sidebar__project-selector--collapsed',
-            this.projectMenuOpen && 'designbase-wc-sidebar__project-selector--open',
-            isEmpty && 'designbase-wc-sidebar__project-selector--empty',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const sectionLabelAttr = this.getAttribute('project-section-label');
-        if (!collapsed && sectionLabelAttr && sectionLabelAttr.trim()) {
-            const sectionLabel = document.createElement('div');
-            sectionLabel.className = 'designbase-wc-sidebar__project-section-label';
-            sectionLabel.textContent = sectionLabelAttr.trim();
-            wrap.append(sectionLabel);
-        }
-        const trigger = document.createElement('button');
-        trigger.type = 'button';
-        trigger.className = 'designbase-wc-sidebar__project-trigger';
-        trigger.setAttribute('aria-haspopup', 'menu');
-        trigger.setAttribute('aria-expanded', String(this.projectMenuOpen));
-        if (isEmpty || !selected) {
-            trigger.setAttribute('aria-label', this.projectEmptyTriggerLabel);
-            trigger.append(this.createProjectEmptyMark(collapsed ? 'm' : 's'));
-            if (!collapsed) {
-                const label = document.createElement('span');
-                label.className = 'designbase-wc-sidebar__project-label';
-                label.textContent = this.projectEmptyTriggerLabel;
-                trigger.append(label);
-            }
-        }
-        else {
-            trigger.setAttribute('aria-label', selected.label);
-            trigger.append(this.createProjectAvatar(selected, collapsed ? 'm' : 's'));
-            if (!collapsed) {
-                const label = document.createElement('span');
-                label.className = 'designbase-wc-sidebar__project-label';
-                label.textContent = selected.label;
-                trigger.append(label);
-            }
-        }
-        const chevron = document.createElement('span');
-        chevron.className = 'designbase-wc-sidebar__project-chevron';
-        chevron.setAttribute('aria-hidden', 'true');
-        chevron.append(createDbIcon('chevron-down', 14));
-        trigger.append(chevron);
-        trigger.addEventListener('click', () => {
-            this.projectMenuOpen = !this.projectMenuOpen;
-            this.userMenuOpen = false;
-            this.render();
-        });
-        wrap.append(trigger);
-        if (this.projectMenuOpen) {
-            const dropdown = document.createElement('div');
-            dropdown.className = 'designbase-wc-sidebar__project-dropdown';
-            dropdown.setAttribute('role', 'menu');
-            dropdown.setAttribute('aria-label', this.projectSectionLabel);
-            if (isEmpty) {
-                const empty = document.createElement('div');
-                empty.className = 'designbase-wc-sidebar__project-empty';
-                empty.setAttribute('role', 'presentation');
-                const emptyText = document.createElement('p');
-                emptyText.className = 'designbase-wc-sidebar__project-empty-text';
-                emptyText.textContent = this.projectEmptyLabel;
-                empty.append(emptyText);
-                dropdown.append(empty);
-            }
-            else {
-                const list = document.createElement('ul');
-                list.className = 'designbase-wc-sidebar__project-list';
-                projects.forEach((project) => {
-                    const li = document.createElement('li');
-                    li.className = 'designbase-wc-sidebar__project-option';
-                    const button = document.createElement('button');
-                    button.type = 'button';
-                    button.className = [
-                        'designbase-wc-sidebar__project-option-btn',
-                        selected && project.id === selected.id && 'designbase-wc-sidebar__project-option-btn--active',
-                    ]
-                        .filter(Boolean)
-                        .join(' ');
-                    button.setAttribute('role', 'menuitem');
-                    button.append(this.createProjectAvatar(project, 's'));
-                    const optionLabel = document.createElement('span');
-                    optionLabel.className = 'designbase-wc-sidebar__project-option-label';
-                    optionLabel.textContent = project.label;
-                    button.append(optionLabel);
-                    const badge = this.createProjectBadge(project);
-                    if (badge)
-                        button.append(badge);
-                    button.addEventListener('click', () => {
-                        this.projectMenuOpen = false;
-                        this.setAttribute('selected-project-id', project.id);
-                        this.dispatchProjectChange(project);
-                        this.render();
-                    });
-                    li.append(button);
-                    list.append(li);
-                });
-                dropdown.append(list);
-            }
-            const manage = document.createElement('button');
-            manage.type = 'button';
-            manage.className = 'designbase-wc-sidebar__project-manage';
-            manage.setAttribute('role', 'menuitem');
-            manage.append(createDbIcon('plus', 14));
-            const manageLabel = document.createElement('span');
-            manageLabel.textContent = this.projectManageLabel;
-            manage.append(manageLabel);
-            manage.addEventListener('click', () => {
-                this.projectMenuOpen = false;
-                const href = this.projectManageHref;
-                if (href) {
-                    window.location.assign(href);
-                }
-                this.dispatchProjectManage();
-                this.render();
-            });
-            dropdown.append(manage);
-            wrap.append(dropdown);
-        }
-        return wrap;
-    }
-    createFlyout(item, size) {
-        const position = this.getAttribute('position') || 'left';
-        const flyout = document.createElement('div');
-        flyout.className = [
-            'designbase-wc-sidebar__flyout',
-            position === 'right' && 'designbase-wc-sidebar__flyout--align-left',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        flyout.setAttribute('role', 'menu');
-        flyout.setAttribute('aria-label', `${item.label} 하위 메뉴`);
-        flyout.addEventListener('mouseenter', () => this.cancelFlyoutClose());
-        flyout.addEventListener('mouseleave', () => this.scheduleFlyoutClose());
-        const title = document.createElement('div');
-        title.className = 'designbase-wc-sidebar__flyout-title';
-        title.textContent = item.label;
-        flyout.append(title);
-        const list = document.createElement('ul');
-        list.className = 'designbase-wc-sidebar__flyout-list';
-        (item.children || []).forEach((child) => {
-            const li = document.createElement('li');
-            li.className = 'designbase-wc-sidebar__flyout-item';
-            const menuItem = document.createElement('db-menu-item');
-            menuItem.setAttribute('label', child.label);
-            menuItem.setAttribute('type', 'block');
-            menuItem.setAttribute('menu-style', 'dropdown');
-            menuItem.setAttribute('size', size);
-            if (child.href)
-                menuItem.setAttribute('href', child.href);
-            if (child.active)
-                menuItem.setAttribute('active', '');
-            if (child.disabled)
-                menuItem.setAttribute('disabled', '');
-            if (child.badge !== undefined)
-                menuItem.setAttribute('badge', String(child.badge));
-            if (child.badgeColor)
-                menuItem.setAttribute('badge-color', child.badgeColor);
-            menuItem.addEventListener('db-click', () => {
-                if (child.disabled)
-                    return;
-                this.flyoutItemId = null;
-                this.dispatchItemClick(child);
-                this.renderNav();
-                this.renderBottomNav();
-            });
-            li.append(menuItem);
-            list.append(li);
-        });
-        flyout.append(list);
-        return flyout;
-    }
-    createSidebarMenuItem(item, size, depth = 0) {
-        const hasChildren = Boolean(item.children?.length);
-        const expanded = this.expandedItems.has(item.id);
-        const collapsed = this.hasAttribute('collapsed');
-        const useFlyout = collapsed && hasChildren;
-        const li = document.createElement('li');
-        li.className = [
-            'designbase-wc-sidebar__item',
-            useFlyout && this.flyoutItemId === item.id && 'designbase-wc-sidebar__item--flyout-active',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (useFlyout) {
-            li.addEventListener('mouseenter', () => this.showFlyout(item.id));
-            li.addEventListener('mouseleave', () => this.scheduleFlyoutClose());
-        }
-        const menuItem = document.createElement('db-menu-item');
-        menuItem.setAttribute('data-item-id', item.id);
-        menuItem.setAttribute('label', item.label);
-        menuItem.setAttribute('type', 'block');
-        menuItem.setAttribute('menu-style', 'accordion');
-        menuItem.setAttribute('size', size);
-        menuItem.setAttribute('depth', String(depth));
-        if (item.href)
-            menuItem.setAttribute('href', item.href);
-        if (item.icon)
-            menuItem.setAttribute('icon', item.icon);
-        if (item.active)
-            menuItem.setAttribute('active', '');
-        if (item.disabled)
-            menuItem.setAttribute('disabled', '');
-        if (item.badge !== undefined)
-            menuItem.setAttribute('badge', String(item.badge));
-        if (item.badgeColor)
-            menuItem.setAttribute('badge-color', item.badgeColor);
-        if (hasChildren && !useFlyout) {
-            menuItem.setAttribute('expandable', '');
-            menuItem.subItems = (item.children || []).map((child) => ({
-                id: child.id,
-                label: child.label,
-                href: child.href,
-                active: child.active,
-                disabled: child.disabled,
-                badge: child.badge,
-                badgeColor: child.badgeColor,
-            }));
-            if (expanded && !collapsed)
-                menuItem.setAttribute('expanded', '');
-        }
-        menuItem.addEventListener('db-click', (event) => {
-            if (item.disabled)
-                return;
-            if (hasChildren && !collapsed) {
-                const willOpen = event.detail?.expanded
-                    ?? !this.expandedItems.has(item.id);
-                this.closeOverlayMenus();
-                if (willOpen) {
-                    this.expandedItems.clear();
-                    this.expandedItems.add(item.id);
-                    this.syncExclusiveAccordion(item.id);
-                }
-                else {
-                    this.expandedItems.delete(item.id);
-                    this.syncExclusiveAccordion(null);
-                }
-                return;
-            }
-            if (useFlyout) {
-                this.closeOverlayMenus();
-                this.showFlyout(item.id);
-                return;
-            }
-            this.closeOverlayMenus();
-            this.dispatchItemClick(item);
-        });
-        menuItem.addEventListener('db-child-click', (event) => {
-            const detail = event.detail;
-            this.dispatchItemClick(detail.child);
-        });
-        li.append(menuItem);
-        if (collapsed && item.badge !== undefined && item.badge !== null && item.badge !== '') {
-            const badgeColor = item.badgeColor || 'primary';
-            const dot = document.createElement('span');
-            dot.className = [
-                'designbase-wc-sidebar__collapsed-badge-dot',
-                `designbase-wc-sidebar__collapsed-badge-dot--${badgeColor}`,
-            ].join(' ');
-            dot.setAttribute('aria-hidden', 'true');
-            li.append(dot);
-        }
-        if (collapsed && !hasChildren) {
-            const tooltip = document.createElement('span');
-            tooltip.className = 'designbase-wc-sidebar__item-tooltip';
-            tooltip.textContent = item.label;
-            tooltip.setAttribute('role', 'tooltip');
-            li.append(tooltip);
-        }
-        if (useFlyout && this.flyoutItemId === item.id) {
-            li.append(this.createFlyout(item, size));
-        }
-        return li;
-    }
-    renderSectionList(sections, size, collapsed) {
-        const fragment = document.createDocumentFragment();
-        sections.forEach((section) => {
-            const sectionEl = document.createElement('div');
-            sectionEl.className = 'designbase-wc-sidebar__section';
-            if (!collapsed && section.title) {
-                const title = document.createElement('div');
-                title.className = 'designbase-wc-sidebar__section-title';
-                title.textContent = section.title;
-                sectionEl.append(title);
-            }
-            const list = document.createElement('ul');
-            list.className = 'designbase-wc-sidebar__nav-list';
-            section.items.forEach((item) => list.append(this.createSidebarMenuItem(item, size)));
-            sectionEl.append(list);
-            fragment.append(sectionEl);
-        });
-        return fragment;
-    }
-    renderNav() {
-        const nav = this.querySelector('.designbase-wc-sidebar__nav');
-        if (!nav)
-            return;
-        const size = this.getAttribute('size') || 'm';
-        const collapsed = this.hasAttribute('collapsed');
-        nav.replaceChildren(this.renderSectionList(this.parseSections(), size, collapsed));
-    }
-    renderBottomNav() {
-        const bottomNav = this.querySelector('.designbase-wc-sidebar__bottom-nav');
-        if (!bottomNav)
-            return;
-        const size = this.getAttribute('size') || 'm';
-        const collapsed = this.hasAttribute('collapsed');
-        bottomNav.replaceChildren(this.renderSectionList(this.parseBottomSections(), size, collapsed));
-    }
-    createUserDropdown(userMenuItems, collapsed = false) {
-        if (!userMenuItems.length)
-            return null;
-        const size = this.getAttribute('size') || 'm';
-        const dropdown = document.createElement('div');
-        dropdown.className = [
-            'designbase-wc-sidebar__user-dropdown',
-            collapsed && 'designbase-wc-sidebar__user-dropdown--collapsed',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        dropdown.setAttribute('role', 'menu');
-        dropdown.setAttribute('aria-label', '사용자 메뉴');
-        dropdown.hidden = !this.userMenuOpen;
-        const menu = document.createElement('ul');
-        menu.className = 'designbase-wc-sidebar__user-menu';
-        userMenuItems.forEach((item) => {
-            const li = document.createElement('li');
-            li.className = 'designbase-wc-sidebar__user-menu-item';
-            const menuItem = document.createElement('db-menu-item');
-            menuItem.setAttribute('label', item.label);
-            menuItem.setAttribute('type', 'block');
-            menuItem.setAttribute('menu-style', 'accordion');
-            menuItem.setAttribute('size', size);
-            if (item.icon)
-                menuItem.setAttribute('icon', item.icon);
-            if (item.href)
-                menuItem.setAttribute('href', item.href);
-            menuItem.addEventListener('db-click', () => {
-                this.userMenuOpen = false;
-                this.dispatchUserMenuItemClick(item);
-                this.render();
-            });
-            li.append(menuItem);
-            menu.append(li);
-        });
-        dropdown.append(menu);
-        return dropdown;
-    }
-    createPromoBanner(collapsed) {
-        const banner = this.parsePromoBanner();
-        if (!banner)
-            return null;
-        if (collapsed) {
-            const collapsedPromo = document.createElement('button');
-            collapsedPromo.type = 'button';
-            collapsedPromo.className = 'designbase-wc-sidebar__promo-collapsed';
-            collapsedPromo.setAttribute('aria-label', banner.ctaLabel || banner.title);
-            const animBg = document.createElement('db-animation-background');
-            animBg.className = 'designbase-wc-sidebar__promo-bg';
-            animBg.setAttribute('type', 'aurora');
-            animBg.setAttribute('theme', 'light');
-            animBg.setAttribute('intensity', 'subtle');
-            animBg.setAttribute('blur', '40');
-            animBg.setAttribute('speed', '4000');
-            animBg.setAttribute('colors', JSON.stringify(['#c7d2fe', '#ddd6fe', '#fbcfe8']));
-            collapsedPromo.append(animBg);
-            collapsedPromo.append(createDbIcon(banner.icon && isDbIconName(banner.icon) ? banner.icon : 'sparkle', 18));
-            collapsedPromo.addEventListener('click', () => this.dispatchPromoCtaClick(banner));
-            const tooltip = document.createElement('span');
-            tooltip.className = 'designbase-wc-sidebar__item-tooltip';
-            tooltip.textContent = banner.title;
-            tooltip.setAttribute('role', 'tooltip');
-            const wrap = document.createElement('div');
-            wrap.className = 'designbase-wc-sidebar__promo-collapsed-wrap';
-            wrap.append(collapsedPromo, tooltip);
-            return wrap;
-        }
-        const promo = document.createElement('div');
-        promo.className = 'designbase-wc-sidebar__promo';
-        const animBg = document.createElement('db-animation-background');
-        animBg.className = 'designbase-wc-sidebar__promo-bg';
-        animBg.setAttribute('type', 'aurora');
-        animBg.setAttribute('theme', 'light');
-        animBg.setAttribute('intensity', 'subtle');
-        animBg.setAttribute('blur', '60');
-        animBg.setAttribute('speed', '5000');
-        animBg.setAttribute('colors', JSON.stringify(['#c7d2fe', '#ddd6fe', '#fbcfe8', '#bfdbfe']));
-        promo.append(animBg);
-        const content = document.createElement('div');
-        content.className = 'designbase-wc-sidebar__promo-content';
-        const titleRow = document.createElement('div');
-        titleRow.className = 'designbase-wc-sidebar__promo-title-row';
-        const iconWrap = document.createElement('span');
-        iconWrap.className = 'designbase-wc-sidebar__promo-icon';
-        iconWrap.setAttribute('aria-hidden', 'true');
-        iconWrap.append(createDbIcon(banner.icon && isDbIconName(banner.icon) ? banner.icon : 'sparkle', 16));
-        const title = document.createElement('div');
-        title.className = 'designbase-wc-sidebar__promo-title';
-        title.textContent = banner.title;
-        titleRow.append(iconWrap, title);
-        content.append(titleRow);
-        if (banner.description) {
-            const desc = document.createElement('div');
-            desc.className = 'designbase-wc-sidebar__promo-desc';
-            desc.textContent = banner.description;
-            content.append(desc);
-        }
-        if (banner.ctaLabel) {
-            const cta = document.createElement('db-button');
-            cta.className = 'designbase-wc-sidebar__promo-action';
-            cta.setAttribute('variant', 'secondary');
-            cta.setAttribute('size', 's');
-            cta.setAttribute('full-width', '');
-            cta.textContent = banner.ctaLabel;
-            cta.addEventListener('db-click', () => {
-                if (banner.ctaHref)
-                    window.location.assign(banner.ctaHref);
-                this.dispatchPromoCtaClick(banner);
-            });
-            content.append(cta);
-        }
-        promo.append(content);
-        return promo;
-    }
-    render() {
-        this.syncHostClasses();
-        this.setAttribute('role', 'complementary');
-        this.setAttribute('aria-label', '사이드바 네비게이션');
-        const size = this.getAttribute('size') || 'm';
-        const collapsible = this.getAttribute('collapsible') !== 'false';
-        const showLogo = this.getAttribute('show-logo') !== 'false';
-        const collapsed = this.hasAttribute('collapsed');
-        const userProfile = this.parseUserProfile();
-        const userMenuItems = this.parseUserMenuItems();
-        const bottomSections = this.parseBottomSections();
-        const logoSize = size === 'l' ? 'm' : size === 's' ? 'xs' : 's';
-        this.replaceChildren();
-        const container = document.createElement('div');
-        container.className = 'designbase-wc-sidebar__container';
-        if (collapsible || (showLogo && !collapsed)) {
-            const header = document.createElement('div');
-            header.className = [
-                'designbase-wc-sidebar__header',
-                (collapsed || !showLogo) && 'designbase-wc-sidebar__header--collapsed-only',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            if (!collapsed && showLogo) {
-                const logoWrap = document.createElement('div');
-                logoWrap.className = 'designbase-wc-sidebar__logo';
-                const logo = document.createElement('db-logo');
-                logo.setAttribute('type', 'designbase');
-                logo.setAttribute('size', logoSize);
-                logoWrap.append(logo);
-                logoWrap.addEventListener('click', () => {
-                    this.dispatchEvent(new CustomEvent('db-logo-click', { bubbles: true, composed: true }));
-                });
-                header.append(logoWrap);
-            }
-            if (collapsible) {
-                const toggle = document.createElement('db-button');
-                toggle.className = 'designbase-wc-sidebar__toggle';
-                toggle.setAttribute('variant', 'tertiary');
-                toggle.setAttribute('size', 's');
-                toggle.setAttribute('icon-only', '');
-                toggle.setAttribute('start-icon', collapsed ? 'arrow-bar-right' : 'arrow-bar-left');
-                toggle.setAttribute('aria-label', collapsed ? '사이드바 펼치기' : '사이드바 접기');
-                toggle.addEventListener('db-click', () => {
-                    const next = !this.hasAttribute('collapsed');
-                    if (next)
-                        this.setAttribute('collapsed', '');
-                    else
-                        this.removeAttribute('collapsed');
-                    this.dispatchEvent(new CustomEvent('db-toggle', {
-                        bubbles: true,
-                        composed: true,
-                        detail: { collapsed: next },
-                    }));
-                });
-                header.append(toggle);
-            }
-            container.append(header);
-        }
-        const navWrapper = document.createElement('div');
-        navWrapper.className = 'designbase-wc-sidebar__nav-wrapper';
-        const projectSelector = this.createProjectSelector(collapsed);
-        if (projectSelector)
-            navWrapper.append(projectSelector);
-        const nav = document.createElement('nav');
-        nav.className = 'designbase-wc-sidebar__nav';
-        nav.setAttribute('aria-label', '주 메뉴');
-        navWrapper.append(nav);
-        if (bottomSections.length > 0) {
-            const bottomNav = document.createElement('nav');
-            bottomNav.className = 'designbase-wc-sidebar__bottom-nav';
-            bottomNav.setAttribute('aria-label', '하단 메뉴');
-            navWrapper.append(bottomNav);
-        }
-        container.append(navWrapper);
-        const footer = document.createElement('div');
-        footer.className = 'designbase-wc-sidebar__footer';
-        const promo = this.createPromoBanner(collapsed);
-        if (promo)
-            footer.append(promo);
-        if (userProfile && !collapsed) {
-            const user = document.createElement('div');
-            user.className = 'designbase-wc-sidebar__user';
-            const dropdown = this.createUserDropdown(userMenuItems);
-            if (dropdown)
-                user.append(dropdown);
-            const info = document.createElement('div');
-            info.className = 'designbase-wc-sidebar__user-info';
-            info.setAttribute('role', 'button');
-            info.setAttribute('tabindex', '0');
-            info.setAttribute('aria-expanded', String(this.userMenuOpen));
-            const avatar = document.createElement('db-avatar');
-            avatar.className = 'designbase-wc-sidebar__user-avatar';
-            avatar.setAttribute('size', 's');
-            avatar.setAttribute('initials', userProfile.name);
-            avatar.setAttribute('alt', userProfile.name);
-            if (userProfile.avatar)
-                avatar.setAttribute('src', userProfile.avatar);
-            const details = document.createElement('div');
-            details.className = 'designbase-wc-sidebar__user-details';
-            const name = document.createElement('div');
-            name.className = 'designbase-wc-sidebar__user-name';
-            name.textContent = userProfile.name;
-            details.append(name);
-            if (userProfile.email) {
-                const email = document.createElement('div');
-                email.className = 'designbase-wc-sidebar__user-email';
-                email.textContent = userProfile.email;
-                details.append(email);
-            }
-            info.append(avatar, details);
-            if (userMenuItems.length) {
-                const moreIcon = document.createElement('span');
-                moreIcon.className = 'designbase-wc-sidebar__user-more';
-                moreIcon.setAttribute('aria-hidden', 'true');
-                moreIcon.append(createDbIcon('more-vertical', 16));
-                info.append(moreIcon);
-                info.setAttribute('aria-haspopup', 'menu');
-            }
-            info.addEventListener('click', () => {
-                if (!userMenuItems.length)
-                    return;
-                this.userMenuOpen = !this.userMenuOpen;
-                this.projectMenuOpen = false;
-                this.render();
-            });
-            user.append(info);
-            footer.append(user);
-        }
-        else if (userProfile && collapsed) {
-            const collapsedUser = document.createElement('div');
-            collapsedUser.className = [
-                'designbase-wc-sidebar__user-collapsed',
-                this.userMenuOpen && 'designbase-wc-sidebar__user-collapsed--open',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            collapsedUser.setAttribute('role', 'button');
-            collapsedUser.setAttribute('tabindex', '0');
-            collapsedUser.setAttribute('aria-label', userProfile.name);
-            collapsedUser.setAttribute('aria-expanded', String(this.userMenuOpen));
-            if (userMenuItems.length)
-                collapsedUser.setAttribute('aria-haspopup', 'menu');
-            const avatar = document.createElement('db-avatar');
-            avatar.className = 'designbase-wc-sidebar__user-avatar-collapsed';
-            avatar.setAttribute('size', 's');
-            avatar.setAttribute('initials', userProfile.name);
-            avatar.setAttribute('alt', userProfile.name);
-            if (userProfile.avatar)
-                avatar.setAttribute('src', userProfile.avatar);
-            collapsedUser.append(avatar);
-            if (!this.userMenuOpen) {
-                const tooltip = document.createElement('span');
-                tooltip.className = 'designbase-wc-sidebar__item-tooltip';
-                tooltip.textContent = userProfile.name;
-                tooltip.setAttribute('role', 'tooltip');
-                collapsedUser.append(tooltip);
-            }
-            const dropdown = this.createUserDropdown(userMenuItems, true);
-            if (dropdown)
-                collapsedUser.append(dropdown);
-            collapsedUser.addEventListener('click', (event) => {
-                if (!userMenuItems.length)
-                    return;
-                if (event.target.closest('.designbase-wc-sidebar__user-dropdown'))
-                    return;
-                this.userMenuOpen = !this.userMenuOpen;
-                this.projectMenuOpen = false;
-                this.render();
-            });
-            footer.append(collapsedUser);
-        }
-        container.append(footer);
-        this.append(container);
-        this.renderNav();
-        this.renderBottomNav();
-    }
-}
-if (!customElements.get('db-sidebar')) {
-    customElements.define('db-sidebar', DbSidebar);
-}
-
-export { DbSidebar };
+import{createDbIcon as e,isDbIconName as t}from"./db-icons.js";const s=["s","m","l"],i=["default","dark","light"],r=["left","right"];class DbSidebar extends HTMLElement{constructor(){super(...arguments),this.expandedItems=new Set,this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.flyoutCloseTimer=null,this.outsideHandler=null}static get observedAttributes(){return["items","sections","user-menu-items","user-profile","default-expanded-ids","projects","selected-project-id","project-manage-label","project-manage-href","project-section-label","project-empty-label","project-empty-trigger-label","bottom-items","bottom-sections","promo-banner","size","variant","position","collapsed","collapsible","show-logo","full-height","shadow"]}connectedCallback(){this.seedExpanded(),this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick(),this.cancelFlyoutClose()}attributeChangedCallback(e){this.isConnected&&("default-expanded-ids"===e&&this.seedExpanded(),"collapsed"===e&&this.hasAttribute("collapsed")&&(this.userMenuOpen=!1,this.projectMenuOpen=!1,this.flyoutItemId=null,this.cancelFlyoutClose()),this.render())}seedExpanded(){try{const e=JSON.parse(this.getAttribute("default-expanded-ids")||"[]");Array.isArray(e)&&(this.expandedItems=new Set(e))}catch{this.expandedItems=new Set}}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get sections(){return this.parseSections()}set sections(e){this.setAttribute("sections","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseUserMenuItems()}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}get projects(){return this.parseProjects()}set projects(e){this.setAttribute("projects","string"==typeof e?e:JSON.stringify(e))}get selectedProjectId(){return this.getAttribute("selected-project-id")||""}set selectedProjectId(e){e?this.setAttribute("selected-project-id",e):this.removeAttribute("selected-project-id")}get projectManageLabel(){return this.getAttribute("project-manage-label")||"프로젝트 관리"}set projectManageLabel(e){this.setAttribute("project-manage-label",e)}get projectManageHref(){return this.getAttribute("project-manage-href")||""}set projectManageHref(e){e?this.setAttribute("project-manage-href",e):this.removeAttribute("project-manage-href")}get projectSectionLabel(){return this.getAttribute("project-section-label")||"프로젝트"}set projectSectionLabel(e){this.setAttribute("project-section-label",e)}get projectEmptyLabel(){return this.getAttribute("project-empty-label")||"프로젝트를 추가해 주세요"}set projectEmptyLabel(e){this.setAttribute("project-empty-label",e)}get projectEmptyTriggerLabel(){return this.getAttribute("project-empty-trigger-label")||"프로젝트 추가"}set projectEmptyTriggerLabel(e){this.setAttribute("project-empty-trigger-label",e)}get bottomItems(){return this.parseBottomItems()}set bottomItems(e){this.setAttribute("bottom-items","string"==typeof e?e:JSON.stringify(e))}get bottomSections(){return this.parseBottomSections()}set bottomSections(e){this.setAttribute("bottom-sections","string"==typeof e?e:JSON.stringify(e))}get promoBanner(){return this.parsePromoBanner()}set promoBanner(e){null==e?this.removeAttribute("promo-banner"):this.setAttribute("promo-banner","string"==typeof e?e:JSON.stringify(e))}parseSections(){const e=this.getAttribute("sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}try{const e=JSON.parse(this.getAttribute("items")||"[]");return[{id:"main",items:Array.isArray(e)?e:[]}]}catch{return[{id:"main",items:[]}]}}parseUserMenuItems(){try{const e=JSON.parse(this.getAttribute("user-menu-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}parseProjects(){try{const e=JSON.parse(this.getAttribute("projects")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomItems(){try{const e=JSON.parse(this.getAttribute("bottom-items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBottomSections(){const e=this.getAttribute("bottom-sections");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length)return t}catch{}const t=this.parseBottomItems();return t.length?[{id:"bottom",items:t}]:[]}parsePromoBanner(){const e=this.getAttribute("promo-banner");if(!e)return null;try{return JSON.parse(e)}catch{return null}}getSelectedProject(){const e=this.parseProjects();if(!e.length)return null;const t=this.selectedProjectId;return e.find(e=>e.id===t)||e[0]}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{const t=e.target;if(this.contains(t))return;let s=!1;this.userMenuOpen&&(this.userMenuOpen=!1,s=!0),this.projectMenuOpen&&(this.projectMenuOpen=!1,s=!0),s&&this.render()},document.addEventListener("mousedown",this.outsideHandler))}closeOverlayMenus(){const e=this.projectMenuOpen,t=this.userMenuOpen;if(!e&&!t)return!1;this.projectMenuOpen=!1,this.userMenuOpen=!1,this.querySelector(".designbase-wc-sidebar__project-dropdown")?.remove(),this.querySelector(".designbase-wc-sidebar__project-selector")?.classList.remove("designbase-wc-sidebar__project-selector--open");const s=this.querySelector(".designbase-wc-sidebar__project-trigger");s?.setAttribute("aria-expanded","false");const i=this.querySelector(".designbase-wc-sidebar__user-dropdown");return i&&(i.hidden=!0),this.querySelector(".designbase-wc-sidebar__user-info")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.setAttribute("aria-expanded","false"),this.querySelector(".designbase-wc-sidebar__user-collapsed")?.classList.remove("designbase-wc-sidebar__user-collapsed--open"),!0}syncExclusiveAccordion(e){[...Array.from(this.querySelectorAll(".designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item")),...Array.from(this.querySelectorAll(".designbase-wc-sidebar__bottom-nav .designbase-wc-sidebar__nav-list > .designbase-wc-sidebar__item > db-menu-item"))].forEach(t=>{const s=t.getAttribute("data-item-id");s&&(e&&s===e?t.setAttribute("expanded",""):t.removeAttribute("expanded"))})}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}cancelFlyoutClose(){this.flyoutCloseTimer&&(clearTimeout(this.flyoutCloseTimer),this.flyoutCloseTimer=null)}showFlyout(e){this.cancelFlyoutClose(),this.flyoutItemId!==e&&(this.flyoutItemId=e,this.renderNav(),this.renderBottomNav())}scheduleFlyoutClose(){this.cancelFlyoutClose(),this.flyoutCloseTimer=setTimeout(()=>{this.flyoutCloseTimer=null,this.flyoutItemId=null,this.renderNav(),this.renderBottomNav()},120)}syncHostClasses(){const e=this.getAttribute("size")||"m",t=this.getAttribute("variant")||"default",a=this.getAttribute("position")||"left";this.className=["designbase-wc-sidebar",`designbase-wc-sidebar--${s.includes(e)?e:"m"}`,`designbase-wc-sidebar--${i.includes(t)?t:"default"}`,`designbase-wc-sidebar--${r.includes(a)?a:"left"}`,this.hasAttribute("collapsed")&&"designbase-wc-sidebar--collapsed",this.hasAttribute("full-height")&&"designbase-wc-sidebar--full-height",this.hasAttribute("shadow")&&"designbase-wc-sidebar--shadow"].filter(Boolean).join(" ")}dispatchItemClick(e){this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchUserMenuItemClick(e){this.dispatchEvent(new CustomEvent("db-user-menu-item-click",{bubbles:!0,composed:!0,detail:{item:e}}))}dispatchProjectChange(e){this.dispatchEvent(new CustomEvent("db-project-change",{bubbles:!0,composed:!0,detail:{project:e}}))}dispatchProjectManage(){this.dispatchEvent(new CustomEvent("db-project-manage",{bubbles:!0,composed:!0,detail:{}}))}dispatchPromoCtaClick(e){this.dispatchEvent(new CustomEvent("db-promo-cta-click",{bubbles:!0,composed:!0,detail:{banner:e}}))}createProjectAvatar(e,t="s"){const s=document.createElement("db-avatar");if(s.className="designbase-wc-sidebar__project-avatar",s.setAttribute("size",t),s.setAttribute("initials",(e.label||"?").trim()),s.setAttribute("alt",e.label),e.color){const applyColor=()=>{const t=s.querySelector(".designbase-wc-avatar__initials");return!!t&&(t.style.backgroundColor=e.color,t.style.color="#fff",!0)},t=new MutationObserver(()=>{applyColor()&&t.disconnect()});t.observe(s,{childList:!0,subtree:!0}),queueMicrotask(()=>{applyColor()&&t.disconnect()})}return s}createProjectEmptyMark(t="s"){const s=document.createElement("span");return s.className=["designbase-wc-sidebar__project-mark",`designbase-wc-sidebar__project-mark--${t}`,"designbase-wc-sidebar__project-mark--empty"].join(" "),s.setAttribute("aria-hidden","true"),s.append(e("plus","m"===t?16:14)),s}createProjectBadge(e){if(!e.badge)return null;const t=document.createElement("db-badge");return t.className="designbase-wc-sidebar__project-badge",t.setAttribute("size","s"),t.setAttribute("variant",e.badgeColor||"warning"),t.setAttribute("badge-style","text"),t.textContent=e.badge,t}createProjectSelector(t){if(!this.hasAttribute("projects"))return null;const s=this.parseProjects(),i=0===s.length,r=this.getSelectedProject(),a=document.createElement("div");a.className=["designbase-wc-sidebar__project-selector",t&&"designbase-wc-sidebar__project-selector--collapsed",this.projectMenuOpen&&"designbase-wc-sidebar__project-selector--open",i&&"designbase-wc-sidebar__project-selector--empty"].filter(Boolean).join(" ");const n=this.getAttribute("project-section-label");if(!t&&n&&n.trim()){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-section-label",e.textContent=n.trim(),a.append(e)}const o=document.createElement("button");if(o.type="button",o.className="designbase-wc-sidebar__project-trigger",o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-expanded",String(this.projectMenuOpen)),i||!r){if(o.setAttribute("aria-label",this.projectEmptyTriggerLabel),o.append(this.createProjectEmptyMark(t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=this.projectEmptyTriggerLabel,o.append(e)}}else if(o.setAttribute("aria-label",r.label),o.append(this.createProjectAvatar(r,t?"m":"s")),!t){const e=document.createElement("span");e.className="designbase-wc-sidebar__project-label",e.textContent=r.label,o.append(e)}const c=document.createElement("span");if(c.className="designbase-wc-sidebar__project-chevron",c.setAttribute("aria-hidden","true"),c.append(e("chevron-down",14)),o.append(c),o.addEventListener("click",()=>{this.projectMenuOpen=!this.projectMenuOpen,this.userMenuOpen=!1,this.render()}),a.append(o),this.projectMenuOpen){const t=document.createElement("div");if(t.className="designbase-wc-sidebar__project-dropdown",t.setAttribute("role","menu"),t.setAttribute("aria-label",this.projectSectionLabel),i){const e=document.createElement("div");e.className="designbase-wc-sidebar__project-empty",e.setAttribute("role","presentation");const s=document.createElement("p");s.className="designbase-wc-sidebar__project-empty-text",s.textContent=this.projectEmptyLabel,e.append(s),t.append(e)}else{const e=document.createElement("ul");e.className="designbase-wc-sidebar__project-list",s.forEach(t=>{const s=document.createElement("li");s.className="designbase-wc-sidebar__project-option";const i=document.createElement("button");i.type="button",i.className=["designbase-wc-sidebar__project-option-btn",r&&t.id===r.id&&"designbase-wc-sidebar__project-option-btn--active"].filter(Boolean).join(" "),i.setAttribute("role","menuitem"),i.append(this.createProjectAvatar(t,"s"));const a=document.createElement("span");a.className="designbase-wc-sidebar__project-option-label",a.textContent=t.label,i.append(a);const n=this.createProjectBadge(t);n&&i.append(n),i.addEventListener("click",()=>{this.projectMenuOpen=!1,this.setAttribute("selected-project-id",t.id),this.dispatchProjectChange(t),this.render()}),s.append(i),e.append(s)}),t.append(e)}const n=document.createElement("button");n.type="button",n.className="designbase-wc-sidebar__project-manage",n.setAttribute("role","menuitem"),n.append(e("plus",14));const o=document.createElement("span");o.textContent=this.projectManageLabel,n.append(o),n.addEventListener("click",()=>{this.projectMenuOpen=!1;const e=this.projectManageHref;e&&window.location.assign(e),this.dispatchProjectManage(),this.render()}),t.append(n),a.append(t)}return a}createFlyout(e,t){const s=this.getAttribute("position")||"left",i=document.createElement("div");i.className=["designbase-wc-sidebar__flyout","right"===s&&"designbase-wc-sidebar__flyout--align-left"].filter(Boolean).join(" "),i.setAttribute("role","menu"),i.setAttribute("aria-label",`${e.label} 하위 메뉴`),i.addEventListener("mouseenter",()=>this.cancelFlyoutClose()),i.addEventListener("mouseleave",()=>this.scheduleFlyoutClose());const r=document.createElement("div");r.className="designbase-wc-sidebar__flyout-title",r.textContent=e.label,i.append(r);const a=document.createElement("ul");return a.className="designbase-wc-sidebar__flyout-list",(e.children||[]).forEach(e=>{const s=document.createElement("li");s.className="designbase-wc-sidebar__flyout-item";const i=document.createElement("db-menu-item");i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","dropdown"),i.setAttribute("size",t),e.href&&i.setAttribute("href",e.href),e.active&&i.setAttribute("active",""),e.disabled&&i.setAttribute("disabled",""),void 0!==e.badge&&i.setAttribute("badge",String(e.badge)),e.badgeColor&&i.setAttribute("badge-color",e.badgeColor),i.addEventListener("db-click",()=>{e.disabled||(this.flyoutItemId=null,this.dispatchItemClick(e),this.renderNav(),this.renderBottomNav())}),s.append(i),a.append(s)}),i.append(a),i}createSidebarMenuItem(e,t,s=0){const i=Boolean(e.children?.length),r=this.expandedItems.has(e.id),a=this.hasAttribute("collapsed"),n=a&&i,o=document.createElement("li");o.className=["designbase-wc-sidebar__item",n&&this.flyoutItemId===e.id&&"designbase-wc-sidebar__item--flyout-active"].filter(Boolean).join(" "),n&&(o.addEventListener("mouseenter",()=>this.showFlyout(e.id)),o.addEventListener("mouseleave",()=>this.scheduleFlyoutClose()));const c=document.createElement("db-menu-item");if(c.setAttribute("data-item-id",e.id),c.setAttribute("label",e.label),c.setAttribute("type","block"),c.setAttribute("menu-style","accordion"),c.setAttribute("size",t),c.setAttribute("depth",String(s)),e.href&&c.setAttribute("href",e.href),e.icon&&c.setAttribute("icon",e.icon),e.active&&c.setAttribute("active",""),e.disabled&&c.setAttribute("disabled",""),void 0!==e.badge&&c.setAttribute("badge",String(e.badge)),e.badgeColor&&c.setAttribute("badge-color",e.badgeColor),i&&!n&&(c.setAttribute("expandable",""),c.subItems=(e.children||[]).map(e=>({id:e.id,label:e.label,href:e.href,active:e.active,disabled:e.disabled,badge:e.badge,badgeColor:e.badgeColor})),r&&!a&&c.setAttribute("expanded","")),c.addEventListener("db-click",t=>{if(!e.disabled){if(i&&!a){const s=t.detail?.expanded??!this.expandedItems.has(e.id);return this.closeOverlayMenus(),void(s?(this.expandedItems.clear(),this.expandedItems.add(e.id),this.syncExclusiveAccordion(e.id)):(this.expandedItems.delete(e.id),this.syncExclusiveAccordion(null)))}if(n)return this.closeOverlayMenus(),void this.showFlyout(e.id);this.closeOverlayMenus(),this.dispatchItemClick(e)}}),c.addEventListener("db-child-click",e=>{const t=e.detail;this.dispatchItemClick(t.child)}),o.append(c),a&&void 0!==e.badge&&null!==e.badge&&""!==e.badge){const t=e.badgeColor||"primary",s=document.createElement("span");s.className=["designbase-wc-sidebar__collapsed-badge-dot",`designbase-wc-sidebar__collapsed-badge-dot--${t}`].join(" "),s.setAttribute("aria-hidden","true"),o.append(s)}if(a&&!i){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=e.label,t.setAttribute("role","tooltip"),o.append(t)}return n&&this.flyoutItemId===e.id&&o.append(this.createFlyout(e,t)),o}renderSectionList(e,t,s){const i=document.createDocumentFragment();return e.forEach(e=>{const r=document.createElement("div");if(r.className="designbase-wc-sidebar__section",!s&&e.title){const t=document.createElement("div");t.className="designbase-wc-sidebar__section-title",t.textContent=e.title,r.append(t)}const a=document.createElement("ul");a.className="designbase-wc-sidebar__nav-list",e.items.forEach(e=>a.append(this.createSidebarMenuItem(e,t))),r.append(a),i.append(r)}),i}renderNav(){const e=this.querySelector(".designbase-wc-sidebar__nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.hasAttribute("collapsed");e.replaceChildren(this.renderSectionList(this.parseSections(),t,s))}renderBottomNav(){const e=this.querySelector(".designbase-wc-sidebar__bottom-nav");if(!e)return;const t=this.getAttribute("size")||"m",s=this.hasAttribute("collapsed");e.replaceChildren(this.renderSectionList(this.parseBottomSections(),t,s))}createUserDropdown(e,t=!1){if(!e.length)return null;const s=this.getAttribute("size")||"m",i=document.createElement("div");i.className=["designbase-wc-sidebar__user-dropdown",t&&"designbase-wc-sidebar__user-dropdown--collapsed"].filter(Boolean).join(" "),i.setAttribute("role","menu"),i.setAttribute("aria-label","사용자 메뉴"),i.hidden=!this.userMenuOpen;const r=document.createElement("ul");return r.className="designbase-wc-sidebar__user-menu",e.forEach(e=>{const t=document.createElement("li");t.className="designbase-wc-sidebar__user-menu-item";const i=document.createElement("db-menu-item");i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","accordion"),i.setAttribute("size",s),e.icon&&i.setAttribute("icon",e.icon),e.href&&i.setAttribute("href",e.href),i.addEventListener("db-click",()=>{this.userMenuOpen=!1,this.dispatchUserMenuItemClick(e),this.render()}),t.append(i),r.append(t)}),i.append(r),i}createPromoBanner(s){const i=this.parsePromoBanner();if(!i)return null;if(s){const s=document.createElement("button");s.type="button",s.className="designbase-wc-sidebar__promo-collapsed",s.setAttribute("aria-label",i.ctaLabel||i.title);const r=document.createElement("db-animation-background");r.className="designbase-wc-sidebar__promo-bg",r.setAttribute("type","aurora"),r.setAttribute("theme","light"),r.setAttribute("intensity","subtle"),r.setAttribute("blur","40"),r.setAttribute("speed","4000"),r.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8"])),s.append(r),s.append(e(i.icon&&t(i.icon)?i.icon:"sparkle",18)),s.addEventListener("click",()=>this.dispatchPromoCtaClick(i));const a=document.createElement("span");a.className="designbase-wc-sidebar__item-tooltip",a.textContent=i.title,a.setAttribute("role","tooltip");const n=document.createElement("div");return n.className="designbase-wc-sidebar__promo-collapsed-wrap",n.append(s,a),n}const r=document.createElement("div");r.className="designbase-wc-sidebar__promo";const a=document.createElement("db-animation-background");a.className="designbase-wc-sidebar__promo-bg",a.setAttribute("type","aurora"),a.setAttribute("theme","light"),a.setAttribute("intensity","subtle"),a.setAttribute("blur","60"),a.setAttribute("speed","5000"),a.setAttribute("colors",JSON.stringify(["#c7d2fe","#ddd6fe","#fbcfe8","#bfdbfe"])),r.append(a);const n=document.createElement("div");n.className="designbase-wc-sidebar__promo-content";const o=document.createElement("div");o.className="designbase-wc-sidebar__promo-title-row";const c=document.createElement("span");c.className="designbase-wc-sidebar__promo-icon",c.setAttribute("aria-hidden","true"),c.append(e(i.icon&&t(i.icon)?i.icon:"sparkle",16));const d=document.createElement("div");if(d.className="designbase-wc-sidebar__promo-title",d.textContent=i.title,o.append(c,d),n.append(o),i.description){const e=document.createElement("div");e.className="designbase-wc-sidebar__promo-desc",e.textContent=i.description,n.append(e)}if(i.ctaLabel){const e=document.createElement("db-button");e.className="designbase-wc-sidebar__promo-action",e.setAttribute("variant","secondary"),e.setAttribute("size","s"),e.setAttribute("full-width",""),e.textContent=i.ctaLabel,e.addEventListener("db-click",()=>{i.ctaHref&&window.location.assign(i.ctaHref),this.dispatchPromoCtaClick(i)}),n.append(e)}return r.append(n),r}render(){this.syncHostClasses(),this.setAttribute("role","complementary"),this.setAttribute("aria-label","사이드바 네비게이션");const t=this.getAttribute("size")||"m",s="false"!==this.getAttribute("collapsible"),i="false"!==this.getAttribute("show-logo"),r=this.hasAttribute("collapsed"),a=this.parseUserProfile(),n=this.parseUserMenuItems(),o=this.parseBottomSections(),c="l"===t?"m":"s"===t?"xs":"s";this.replaceChildren();const d=document.createElement("div");if(d.className="designbase-wc-sidebar__container",s||i&&!r){const e=document.createElement("div");if(e.className=["designbase-wc-sidebar__header",(r||!i)&&"designbase-wc-sidebar__header--collapsed-only"].filter(Boolean).join(" "),!r&&i){const t=document.createElement("div");t.className="designbase-wc-sidebar__logo";const s=document.createElement("db-logo");s.setAttribute("type","designbase"),s.setAttribute("size",c),t.append(s),t.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),e.append(t)}if(s){const t=document.createElement("db-button");t.className="designbase-wc-sidebar__toggle",t.setAttribute("variant","tertiary"),t.setAttribute("size","s"),t.setAttribute("icon-only",""),t.setAttribute("start-icon",r?"arrow-bar-right":"arrow-bar-left"),t.setAttribute("aria-label",r?"사이드바 펼치기":"사이드바 접기"),t.addEventListener("db-click",()=>{const e=!this.hasAttribute("collapsed");e?this.setAttribute("collapsed",""):this.removeAttribute("collapsed"),this.dispatchEvent(new CustomEvent("db-toggle",{bubbles:!0,composed:!0,detail:{collapsed:e}}))}),e.append(t)}d.append(e)}const l=document.createElement("div");l.className="designbase-wc-sidebar__nav-wrapper";const b=this.createProjectSelector(r);b&&l.append(b);const u=document.createElement("nav");if(u.className="designbase-wc-sidebar__nav",u.setAttribute("aria-label","주 메뉴"),l.append(u),o.length>0){const e=document.createElement("nav");e.className="designbase-wc-sidebar__bottom-nav",e.setAttribute("aria-label","하단 메뉴"),l.append(e)}d.append(l);const p=document.createElement("div");p.className="designbase-wc-sidebar__footer";const m=this.createPromoBanner(r);if(m&&p.append(m),a&&!r){const t=document.createElement("div");t.className="designbase-wc-sidebar__user";const s=this.createUserDropdown(n);s&&t.append(s);const i=document.createElement("div");i.className="designbase-wc-sidebar__user-info",i.setAttribute("role","button"),i.setAttribute("tabindex","0"),i.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");r.className="designbase-wc-sidebar__user-avatar",r.setAttribute("size","s"),r.setAttribute("initials",a.name),r.setAttribute("alt",a.name),a.avatar&&r.setAttribute("src",a.avatar);const o=document.createElement("div");o.className="designbase-wc-sidebar__user-details";const c=document.createElement("div");if(c.className="designbase-wc-sidebar__user-name",c.textContent=a.name,o.append(c),a.email){const e=document.createElement("div");e.className="designbase-wc-sidebar__user-email",e.textContent=a.email,o.append(e)}if(i.append(r,o),n.length){const t=document.createElement("span");t.className="designbase-wc-sidebar__user-more",t.setAttribute("aria-hidden","true"),t.append(e("more-vertical",16)),i.append(t),i.setAttribute("aria-haspopup","menu")}i.addEventListener("click",()=>{n.length&&(this.userMenuOpen=!this.userMenuOpen,this.projectMenuOpen=!1,this.render())}),t.append(i),p.append(t)}else if(a&&r){const e=document.createElement("div");e.className=["designbase-wc-sidebar__user-collapsed",this.userMenuOpen&&"designbase-wc-sidebar__user-collapsed--open"].filter(Boolean).join(" "),e.setAttribute("role","button"),e.setAttribute("tabindex","0"),e.setAttribute("aria-label",a.name),e.setAttribute("aria-expanded",String(this.userMenuOpen)),n.length&&e.setAttribute("aria-haspopup","menu");const t=document.createElement("db-avatar");if(t.className="designbase-wc-sidebar__user-avatar-collapsed",t.setAttribute("size","s"),t.setAttribute("initials",a.name),t.setAttribute("alt",a.name),a.avatar&&t.setAttribute("src",a.avatar),e.append(t),!this.userMenuOpen){const t=document.createElement("span");t.className="designbase-wc-sidebar__item-tooltip",t.textContent=a.name,t.setAttribute("role","tooltip"),e.append(t)}const s=this.createUserDropdown(n,!0);s&&e.append(s),e.addEventListener("click",e=>{n.length&&(e.target.closest(".designbase-wc-sidebar__user-dropdown")||(this.userMenuOpen=!this.userMenuOpen,this.projectMenuOpen=!1,this.render()))}),p.append(e)}d.append(p),this.append(d),this.renderNav(),this.renderBottomNav()}}customElements.get("db-sidebar")||customElements.define("db-sidebar",DbSidebar);export{DbSidebar};