@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-page-header.js

@@ -1,312 +1 @@
-const VARIANTS = ['default', 'minimal'];
-const ALIGNS = ['center', 'left'];
-function navigatePageHeaderBack(fallbackHref = '/') {
-    if (typeof window === 'undefined')
-        return;
-    const historyIdx = window.history.state?.idx;
-    if (typeof historyIdx === 'number' && historyIdx > 0) {
-        window.history.back();
-        return;
-    }
-    const hasSameOriginReferrer = (() => {
-        try {
-            if (!document.referrer)
-                return false;
-            return new URL(document.referrer).origin === window.location.origin;
-        }
-        catch {
-            return false;
-        }
-    })();
-    if (hasSameOriginReferrer) {
-        window.history.back();
-        return;
-    }
-    if (window.history.length > 1) {
-        window.history.back();
-        return;
-    }
-    window.location.assign(fallbackHref);
-}
-class DbPageHeader extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.internalTabId = '';
-        this.isRendering = false;
-        this.handleBack = () => {
-            const event = new CustomEvent('db-back', { bubbles: true, composed: true, cancelable: true });
-            this.dispatchEvent(event);
-            if (event.defaultPrevented)
-                return;
-            navigatePageHeaderBack(this.getAttribute('back-fallback-href') || '/');
-        };
-        this.handleTabChange = (event) => {
-            const detail = event.detail;
-            const tabId = detail?.selectedId ??
-                this.parseTabs()[detail?.index ?? 0]?.id ??
-                String(detail?.index ?? 0);
-            if (!this.hasAttribute('selected-tab-id')) {
-                this.internalTabId = tabId;
-            }
-            this.dispatchEvent(new CustomEvent('db-tab-change', {
-                bubbles: true,
-                composed: true,
-                detail: { tabId },
-            }));
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'title',
-            'subtitle',
-            'description',
-            'breadcrumbs',
-            'variant',
-            'show-back-button',
-            'back-fallback-href',
-            'back-label',
-            'tabs',
-            'selected-tab-id',
-            'default-selected-tab-id',
-            'align',
-        ];
-    }
-    connectedCallback() {
-        this.syncDefaultTab();
-        this.render();
-        this.childObserver = new MutationObserver(() => {
-            if (this.isRendering)
-                return;
-            if (!this.hasPendingSlottedChildren())
-                return;
-            this.render();
-        });
-        this.childObserver.observe(this, { childList: true });
-    }
-    disconnectedCallback() {
-        this.childObserver?.disconnect();
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'default-selected-tab-id' || name === 'tabs') {
-            this.syncDefaultTab();
-        }
-        this.render();
-    }
-    /** React가 slot 자식을 host에 다시 붙였는지 감지 */
-    hasPendingSlottedChildren() {
-        return Array.from(this.children).some((child) => {
-            const slot = child.getAttribute('slot');
-            return slot === 'actions' || slot === 'meta' || slot === 'description';
-        });
-    }
-    syncDefaultTab() {
-        if (this.internalTabId)
-            return;
-        const tabs = this.parseTabs();
-        const defaultId = this.getAttribute('default-selected-tab-id');
-        this.internalTabId = defaultId || tabs[0]?.id || '';
-    }
-    parseTabs() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('tabs') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    parseBreadcrumbs() {
-        try {
-            const parsed = JSON.parse(this.getAttribute('breadcrumbs') || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    getActiveTabId() {
-        return this.getAttribute('selected-tab-id') || this.internalTabId;
-    }
-    getVariant() {
-        const raw = this.getAttribute('variant') || 'default';
-        return VARIANTS.includes(raw) ? raw : 'default';
-    }
-    getAlign() {
-        const raw = this.getAttribute('align') || 'center';
-        return ALIGNS.includes(raw) ? raw : 'center';
-    }
-    collectActions() {
-        const direct = Array.from(this.querySelectorAll(':scope > [slot="actions"]'));
-        if (direct.length)
-            return direct;
-        // aside > cta 로 이미 배치된 경우 (재렌더)
-        const cta = this.querySelector('.designbase-wc-page-header__cta');
-        if (cta?.children.length)
-            return Array.from(cta.children);
-        const actions = this.querySelector('.designbase-wc-page-header__actions');
-        if (actions?.children.length)
-            return Array.from(actions.children);
-        return [];
-    }
-    collectMeta() {
-        const direct = Array.from(this.querySelectorAll(':scope > [slot="meta"]'));
-        if (direct.length)
-            return direct;
-        // aside > meta 로 이미 배치된 경우 (재렌더)
-        const meta = this.querySelector('.designbase-wc-page-header__meta');
-        if (meta?.children.length)
-            return Array.from(meta.children);
-        return [];
-    }
-    renderMinimalAside(savedMeta, savedActions) {
-        if (!savedMeta.length && !savedActions.length)
-            return null;
-        const aside = document.createElement('div');
-        aside.className = 'designbase-wc-page-header__aside';
-        if (savedMeta.length) {
-            const meta = document.createElement('div');
-            meta.className = 'designbase-wc-page-header__meta';
-            savedMeta.forEach((node) => meta.append(node));
-            aside.append(meta);
-        }
-        if (savedActions.length) {
-            const cta = document.createElement('div');
-            cta.className = 'designbase-wc-page-header__cta';
-            savedActions.forEach((node) => cta.append(node));
-            aside.append(cta);
-        }
-        return aside;
-    }
-    collectDescriptionSlot() {
-        const slotted = this.querySelector(':scope > [slot="description"]');
-        if (slotted)
-            return slotted;
-        const description = this.querySelector(':scope .designbase-wc-page-header__description');
-        const child = description?.firstElementChild;
-        return child || null;
-    }
-    renderTitleBlock(descriptionSlot) {
-        const fragment = document.createDocumentFragment();
-        const title = this.getAttribute('title') || '';
-        const subtitle = this.getAttribute('subtitle');
-        const titleEl = document.createElement('h1');
-        titleEl.className = 'designbase-wc-page-header__title';
-        titleEl.textContent = title;
-        fragment.append(titleEl);
-        if (subtitle) {
-            const subtitleEl = document.createElement('h2');
-            subtitleEl.className = 'designbase-wc-page-header__subtitle';
-            subtitleEl.textContent = subtitle;
-            fragment.append(subtitleEl);
-        }
-        const description = this.getAttribute('description');
-        if (descriptionSlot || description) {
-            const descriptionEl = document.createElement('div');
-            descriptionEl.className = 'designbase-wc-page-header__description';
-            if (descriptionSlot) {
-                descriptionEl.append(descriptionSlot);
-            }
-            else {
-                descriptionEl.textContent = description;
-            }
-            fragment.append(descriptionEl);
-        }
-        return fragment;
-    }
-    render() {
-        this.isRendering = true;
-        const savedActions = this.collectActions();
-        const savedMeta = this.collectMeta();
-        const savedDescription = this.collectDescriptionSlot();
-        const variant = this.getVariant();
-        const isMinimal = variant === 'minimal';
-        const align = this.getAlign();
-        const breadcrumbs = this.parseBreadcrumbs();
-        const tabs = this.parseTabs();
-        const hasTabs = tabs.length > 0;
-        const showBackButton = this.hasAttribute('show-back-button');
-        this.className = [
-            'designbase-wc-page-header',
-            isMinimal ? 'designbase-wc-page-header--minimal' : `designbase-wc-page-header--${align}`,
-            isMinimal && hasTabs ? 'designbase-wc-page-header--has-tabs' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.replaceChildren();
-        if (breadcrumbs.length) {
-            const breadcrumbsWrap = document.createElement('div');
-            breadcrumbsWrap.className = 'designbase-wc-page-header__breadcrumbs';
-            const crumbs = document.createElement('db-breadcrumbs');
-            crumbs.setAttribute('size', 's');
-            crumbs.setAttribute('items', JSON.stringify(breadcrumbs));
-            breadcrumbsWrap.append(crumbs);
-            this.append(breadcrumbsWrap);
-        }
-        const main = document.createElement('div');
-        main.className = 'designbase-wc-page-header__main';
-        const content = document.createElement('div');
-        content.className = 'designbase-wc-page-header__content';
-        if (isMinimal && showBackButton) {
-            const titleRow = document.createElement('div');
-            titleRow.className = 'designbase-wc-page-header__title-row';
-            const backButton = document.createElement('db-button');
-            backButton.className = 'designbase-wc-page-header__back-button';
-            backButton.setAttribute('variant', 'tertiary');
-            backButton.setAttribute('size', 'm');
-            backButton.setAttribute('icon-only', '');
-            backButton.setAttribute('start-icon', 'chevron-left');
-            backButton.setAttribute('aria-label', this.getAttribute('back-label') || '뒤로가기');
-            backButton.setAttribute('tooltip', this.getAttribute('back-label') || '뒤로가기');
-            backButton.addEventListener('db-click', this.handleBack);
-            titleRow.append(backButton);
-            const titleGroup = document.createElement('div');
-            titleGroup.className = 'designbase-wc-page-header__title-group';
-            titleGroup.append(this.renderTitleBlock(savedDescription));
-            titleRow.append(titleGroup);
-            content.append(titleRow);
-        }
-        else {
-            content.append(this.renderTitleBlock(savedDescription));
-        }
-        main.append(content);
-        if (isMinimal) {
-            const aside = this.renderMinimalAside(savedMeta, savedActions);
-            if (aside)
-                main.append(aside);
-        }
-        this.append(main);
-        if (!isMinimal && savedActions.length) {
-            const actionsWrap = document.createElement('div');
-            actionsWrap.className = 'designbase-wc-page-header__actions';
-            savedActions.forEach((node) => actionsWrap.append(node));
-            this.append(actionsWrap);
-        }
-        this.renderMinimalTabs(isMinimal, hasTabs, tabs);
-        queueMicrotask(() => {
-            this.isRendering = false;
-        });
-    }
-    renderMinimalTabs(isMinimal, hasTabs, tabs) {
-        if (!isMinimal || !hasTabs)
-            return;
-        const toolbar = document.createElement('div');
-        toolbar.className = 'designbase-wc-page-header__toolbar';
-        const tabsWrap = document.createElement('div');
-        tabsWrap.className = 'designbase-wc-page-header__tabs';
-        const tabsEl = document.createElement('db-tabs');
-        tabsEl.setAttribute('size', 'm');
-        tabsEl.setAttribute('items', JSON.stringify(tabs));
-        tabsEl.setAttribute('selected-id', this.getActiveTabId());
-        tabsEl.addEventListener('db-change', this.handleTabChange);
-        tabsWrap.append(tabsEl);
-        toolbar.append(tabsWrap);
-        this.append(toolbar);
-    }
-}
-if (!customElements.get('db-page-header')) {
-    customElements.define('db-page-header', DbPageHeader);
-}
-
-export { DbPageHeader };
+const e=["default","minimal"],t=["center","left"];class DbPageHeader extends HTMLElement{constructor(){super(...arguments),this.internalTabId="",this.isRendering=!1,this.handleBack=()=>{const e=new CustomEvent("db-back",{bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(e),e.defaultPrevented||function navigatePageHeaderBack(e="/"){if("undefined"==typeof window)return;const t=window.history.state?.idx;if("number"==typeof t&&t>0)return void window.history.back();(()=>{try{return!!document.referrer&&new URL(document.referrer).origin===window.location.origin}catch{return!1}})()||window.history.length>1?window.history.back():window.location.assign(e)}(this.getAttribute("back-fallback-href")||"/")},this.handleTabChange=e=>{const t=e.detail,a=t?.selectedId??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.hasAttribute("selected-tab-id")||(this.internalTabId=a),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:a}}))}}static get observedAttributes(){return["title","subtitle","description","breadcrumbs","variant","show-back-button","back-fallback-href","back-label","tabs","selected-tab-id","default-selected-tab-id","align"]}connectedCallback(){this.syncDefaultTab(),this.render(),this.childObserver=new MutationObserver(()=>{this.isRendering||this.hasPendingSlottedChildren()&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){this.isConnected&&("default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),this.render())}hasPendingSlottedChildren(){return Array.from(this.children).some(e=>{const t=e.getAttribute("slot");return"actions"===t||"meta"===t||"description"===t})}syncDefaultTab(){if(this.internalTabId)return;const e=this.parseTabs(),t=this.getAttribute("default-selected-tab-id");this.internalTabId=t||e[0]?.id||""}parseTabs(){try{const e=JSON.parse(this.getAttribute("tabs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}parseBreadcrumbs(){try{const e=JSON.parse(this.getAttribute("breadcrumbs")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}getActiveTabId(){return this.getAttribute("selected-tab-id")||this.internalTabId}getVariant(){const t=this.getAttribute("variant")||"default";return e.includes(t)?t:"default"}getAlign(){const e=this.getAttribute("align")||"center";return t.includes(e)?e:"center"}collectActions(){const e=Array.from(this.querySelectorAll(':scope > [slot="actions"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__cta");if(t?.children.length)return Array.from(t.children);const a=this.querySelector(".designbase-wc-page-header__actions");return a?.children.length?Array.from(a.children):[]}collectMeta(){const e=Array.from(this.querySelectorAll(':scope > [slot="meta"]'));if(e.length)return e;const t=this.querySelector(".designbase-wc-page-header__meta");return t?.children.length?Array.from(t.children):[]}renderMinimalAside(e,t){if(!e.length&&!t.length)return null;const a=document.createElement("div");if(a.className="designbase-wc-page-header__aside",e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__meta",e.forEach(e=>t.append(e)),a.append(t)}if(t.length){const e=document.createElement("div");e.className="designbase-wc-page-header__cta",t.forEach(t=>e.append(t)),a.append(e)}return a}collectDescriptionSlot(){const e=this.querySelector(':scope > [slot="description"]');if(e)return e;const t=this.querySelector(":scope .designbase-wc-page-header__description"),a=t?.firstElementChild;return a||null}renderTitleBlock(e){const t=document.createDocumentFragment(),a=this.getAttribute("title")||"",n=this.getAttribute("subtitle"),s=document.createElement("h1");if(s.className="designbase-wc-page-header__title",s.textContent=a,t.append(s),n){const e=document.createElement("h2");e.className="designbase-wc-page-header__subtitle",e.textContent=n,t.append(e)}const i=this.getAttribute("description");if(e||i){const a=document.createElement("div");a.className="designbase-wc-page-header__description",e?a.append(e):a.textContent=i,t.append(a)}return t}render(){this.isRendering=!0;const e=this.collectActions(),t=this.collectMeta(),a=this.collectDescriptionSlot(),n="minimal"===this.getVariant(),s=this.getAlign(),i=this.parseBreadcrumbs(),r=this.parseTabs(),c=r.length>0,d=this.hasAttribute("show-back-button");if(this.className=["designbase-wc-page-header",n?"designbase-wc-page-header--minimal":`designbase-wc-page-header--${s}`,n&&c?"designbase-wc-page-header--has-tabs":""].filter(Boolean).join(" "),this.replaceChildren(),i.length){const e=document.createElement("div");e.className="designbase-wc-page-header__breadcrumbs";const t=document.createElement("db-breadcrumbs");t.setAttribute("size","s"),t.setAttribute("items",JSON.stringify(i)),e.append(t),this.append(e)}const l=document.createElement("div");l.className="designbase-wc-page-header__main";const o=document.createElement("div");if(o.className="designbase-wc-page-header__content",n&&d){const e=document.createElement("div");e.className="designbase-wc-page-header__title-row";const t=document.createElement("db-button");t.className="designbase-wc-page-header__back-button",t.setAttribute("variant","tertiary"),t.setAttribute("size","m"),t.setAttribute("icon-only",""),t.setAttribute("start-icon","chevron-left"),t.setAttribute("aria-label",this.getAttribute("back-label")||"뒤로가기"),t.setAttribute("tooltip",this.getAttribute("back-label")||"뒤로가기"),t.addEventListener("db-click",this.handleBack),e.append(t);const n=document.createElement("div");n.className="designbase-wc-page-header__title-group",n.append(this.renderTitleBlock(a)),e.append(n),o.append(e)}else o.append(this.renderTitleBlock(a));if(l.append(o),n){const a=this.renderMinimalAside(t,e);a&&l.append(a)}if(this.append(l),!n&&e.length){const t=document.createElement("div");t.className="designbase-wc-page-header__actions",e.forEach(e=>t.append(e)),this.append(t)}this.renderMinimalTabs(n,c,r),queueMicrotask(()=>{this.isRendering=!1})}renderMinimalTabs(e,t,a){if(!e||!t)return;const n=document.createElement("div");n.className="designbase-wc-page-header__toolbar";const s=document.createElement("div");s.className="designbase-wc-page-header__tabs";const i=document.createElement("db-tabs");i.setAttribute("size","m"),i.setAttribute("items",JSON.stringify(a)),i.setAttribute("selected-id",this.getActiveTabId()),i.addEventListener("db-change",this.handleTabChange),s.append(i),n.append(s),this.append(n)}}customElements.get("db-page-header")||customElements.define("db-page-header",DbPageHeader);export{DbPageHeader};

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

@@ -1,271 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-class DbPagination extends HTMLElement {
-    static get observedAttributes() {
-        return [
-            'current-page',
-            'total-pages',
-            'total-items',
-            'page-size',
-            'page-size-options',
-            'size',
-            'variant',
-            'alignment',
-            'show-first-last',
-            'show-previous-next',
-            'show-page-size-selector',
-            'show-total',
-            'sibling-count',
-            'boundary-count',
-            'disabled',
-            'full-width',
-        ];
-    }
-    get currentPage() {
-        return Number(this.getAttribute('current-page') || 1);
-    }
-    set currentPage(value) {
-        this.setAttribute('current-page', String(value));
-    }
-    get totalPages() {
-        return Number(this.getAttribute('total-pages') || 1);
-    }
-    set totalPages(value) {
-        this.setAttribute('total-pages', String(value));
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.render();
-    }
-    iconSize() {
-        const size = this.getAttribute('size') || 'm';
-        if (size === 's')
-            return 12;
-        if (size === 'l')
-            return 16;
-        return 14;
-    }
-    render() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const alignment = this.getAttribute('alignment') || 'center';
-        const disabled = this.hasAttribute('disabled');
-        const showFirstLast = this.hasAttribute('show-first-last');
-        const showPreviousNext = this.getAttribute('show-previous-next') !== 'false';
-        const showPageSizeSelector = this.hasAttribute('show-page-size-selector');
-        const showTotal = this.hasAttribute('show-total');
-        const fullWidth = this.hasAttribute('full-width') || showPageSizeSelector || showTotal;
-        const totalItems = Number(this.getAttribute('total-items') || 0);
-        const pageSize = Number(this.getAttribute('page-size') || 10);
-        const currentPage = this.currentPage;
-        const totalPages = this.totalPages;
-        const isFirstPage = currentPage <= 1;
-        const isLastPage = currentPage >= totalPages;
-        this.className = [
-            'designbase-wc-pagination',
-            `designbase-wc-pagination--${size}`,
-            `designbase-wc-pagination--${variant}`,
-            `designbase-wc-pagination--${alignment}`,
-            disabled && 'designbase-wc-pagination--disabled',
-            fullWidth && 'designbase-wc-pagination--full-width',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.setAttribute('role', 'navigation');
-        this.setAttribute('aria-label', '페이지 네비게이션');
-        this.replaceChildren();
-        const container = document.createElement('div');
-        container.className = [
-            'designbase-wc-pagination__container',
-            fullWidth && 'designbase-wc-pagination__container--full-width',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (showTotal && totalItems > 0) {
-            const totalEl = document.createElement('div');
-            totalEl.className = 'designbase-wc-pagination__total';
-            totalEl.textContent = this.getTotalLabel(totalItems, pageSize, currentPage);
-            container.append(totalEl);
-        }
-        const nav = document.createElement('nav');
-        nav.className = 'designbase-wc-pagination__nav';
-        nav.setAttribute('aria-label', '페이지 네비게이션');
-        const list = document.createElement('ul');
-        list.className = 'designbase-wc-pagination__list';
-        if (showFirstLast && !isFirstPage) {
-            list.append(this.createIconButton('arrow-bar-left', 1, '첫 페이지로 이동', 'first'));
-        }
-        if (showPreviousNext && !isFirstPage) {
-            list.append(this.createIconButton('chevron-left', currentPage - 1, '이전 페이지로 이동', 'previous'));
-        }
-        this.getPageNumbers().forEach((page, index) => {
-            if (page === '...') {
-                const item = document.createElement('li');
-                item.className = 'designbase-wc-pagination__ellipsis';
-                const text = document.createElement('span');
-                text.className = 'designbase-wc-pagination__ellipsis-text';
-                text.textContent = '...';
-                item.append(text);
-                list.append(item);
-                return;
-            }
-            if (typeof page !== 'number')
-                return;
-            list.append(this.createPageButton(page, disabled));
-        });
-        if (showPreviousNext && !isLastPage) {
-            list.append(this.createIconButton('chevron-right', currentPage + 1, '다음 페이지로 이동', 'next'));
-        }
-        if (showFirstLast && !isLastPage) {
-            list.append(this.createIconButton('arrow-bar-right', totalPages, '마지막 페이지로 이동', 'last'));
-        }
-        nav.append(list);
-        container.append(nav);
-        if (showPageSizeSelector) {
-            container.append(this.createPageSizeSelector(size, pageSize, disabled));
-        }
-        this.append(container);
-    }
-    getPageSizeOptions() {
-        const raw = this.getAttribute('page-size-options');
-        if (!raw)
-            return [10, 20, 50, 100];
-        try {
-            const parsed = JSON.parse(raw);
-            if (Array.isArray(parsed)) {
-                return parsed.map((value) => Number(value)).filter((value) => !Number.isNaN(value));
-            }
-        }
-        catch {
-            // ignore invalid JSON
-        }
-        return [10, 20, 50, 100];
-    }
-    getTotalLabel(totalItems, pageSize, currentPage) {
-        const start = (currentPage - 1) * pageSize + 1;
-        const end = Math.min(currentPage * pageSize, totalItems);
-        return `${start}-${end} / ${totalItems}개`;
-    }
-    createPageSizeSelector(size, pageSize, disabled) {
-        const wrapper = document.createElement('div');
-        wrapper.className = 'designbase-wc-pagination__page-size';
-        const label = document.createElement('label');
-        label.className = 'designbase-wc-pagination__page-size-label';
-        const text = document.createElement('span');
-        text.className = 'designbase-wc-pagination__page-size-text';
-        text.textContent = '페이지당';
-        const select = document.createElement('db-select');
-        select.className = 'designbase-wc-pagination__page-size-select';
-        select.setAttribute('size', size);
-        select.setAttribute('show-clear-button', 'false');
-        select.setAttribute('searchable', 'false');
-        select.setAttribute('options', JSON.stringify(this.getPageSizeOptions().map((option) => ({
-            value: String(option),
-            label: String(option),
-        }))));
-        select.setAttribute('value', String(pageSize));
-        if (disabled)
-            select.setAttribute('disabled', '');
-        select.addEventListener('db-change', (event) => {
-            const detail = event.detail;
-            const nextSize = Number(detail?.value);
-            if (Number.isNaN(nextSize) || nextSize === pageSize)
-                return;
-            this.setAttribute('page-size', String(nextSize));
-            this.dispatchEvent(new CustomEvent('db-page-size-change', {
-                detail: { pageSize: nextSize },
-                bubbles: true,
-                composed: true,
-            }));
-        });
-        label.append(text, select);
-        wrapper.append(label);
-        return wrapper;
-    }
-    getPageNumbers() {
-        const siblingCount = Number(this.getAttribute('sibling-count') || 1);
-        const boundaryCount = Number(this.getAttribute('boundary-count') || 1);
-        const totalPages = this.totalPages;
-        const currentPage = this.currentPage;
-        const totalNumbers = siblingCount * 2 + 3;
-        const totalBlocks = totalNumbers + 2;
-        if (totalPages <= totalBlocks) {
-            return Array.from({ length: totalPages }, (_, index) => index + 1);
-        }
-        const leftSiblingIndex = Math.max(currentPage - siblingCount, boundaryCount);
-        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages - boundaryCount + 1);
-        const shouldShowLeftDots = leftSiblingIndex > boundaryCount + 2;
-        const shouldShowRightDots = rightSiblingIndex < totalPages - boundaryCount - 1;
-        if (!shouldShowLeftDots && shouldShowRightDots) {
-            const leftItemCount = 3 + 2 * siblingCount;
-            return [...Array.from({ length: leftItemCount }, (_, index) => index + 1), '...', totalPages];
-        }
-        if (shouldShowLeftDots && !shouldShowRightDots) {
-            const rightItemCount = 3 + 2 * siblingCount;
-            return [
-                1,
-                '...',
-                ...Array.from({ length: rightItemCount }, (_, index) => totalPages - rightItemCount + index + 1),
-            ];
-        }
-        if (shouldShowLeftDots && shouldShowRightDots) {
-            const middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, index) => leftSiblingIndex + index);
-            return [1, '...', ...middleRange, '...', totalPages];
-        }
-        return Array.from({ length: totalPages }, (_, index) => index + 1);
-    }
-    createPageButton(page, disabled) {
-        const isActive = page === this.currentPage;
-        const item = document.createElement('li');
-        item.className = 'designbase-wc-pagination__item';
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.className = [
-            'designbase-wc-pagination__button',
-            isActive && 'designbase-wc-pagination__button--active',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        button.textContent = String(page);
-        button.disabled = disabled;
-        if (isActive)
-            button.setAttribute('aria-current', 'page');
-        button.setAttribute('aria-label', `페이지 ${page}로 이동`);
-        button.addEventListener('click', () => this.select(page));
-        item.append(button);
-        return item;
-    }
-    createIconButton(iconName, page, label, modifier) {
-        const item = document.createElement('li');
-        item.className = 'designbase-wc-pagination__item';
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.className = `designbase-wc-pagination__button designbase-wc-pagination__button--${modifier}`;
-        button.disabled = this.hasAttribute('disabled');
-        button.setAttribute('aria-label', label);
-        button.append(createDbIcon(iconName, this.iconSize()));
-        button.addEventListener('click', () => this.select(page));
-        item.append(button);
-        return item;
-    }
-    select(page) {
-        if (this.hasAttribute('disabled') || page === this.currentPage || page < 1 || page > this.totalPages) {
-            return;
-        }
-        this.currentPage = page;
-        this.dispatchEvent(new CustomEvent('db-change', {
-            detail: { page },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-}
-if (!customElements.get('db-pagination')) {
-    customElements.define('db-pagination', DbPagination);
-}
-
-export { DbPagination };
+import{createDbIcon as t}from"./db-icons.js";class DbPagination extends HTMLElement{static get observedAttributes(){return["current-page","total-pages","total-items","page-size","page-size-options","size","variant","alignment","show-first-last","show-previous-next","show-page-size-selector","show-total","sibling-count","boundary-count","disabled","full-width"]}get currentPage(){return Number(this.getAttribute("current-page")||1)}set currentPage(t){this.setAttribute("current-page",String(t))}get totalPages(){return Number(this.getAttribute("total-pages")||1)}set totalPages(t){this.setAttribute("total-pages",String(t))}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}iconSize(){const t=this.getAttribute("size")||"m";return"s"===t?12:"l"===t?16:14}render(){const t=this.getAttribute("size")||"m",e=this.getAttribute("variant")||"default",a=this.getAttribute("alignment")||"center",i=this.hasAttribute("disabled"),n=this.hasAttribute("show-first-last"),s="false"!==this.getAttribute("show-previous-next"),r=this.hasAttribute("show-page-size-selector"),o=this.hasAttribute("show-total"),c=this.hasAttribute("full-width")||r||o,l=Number(this.getAttribute("total-items")||0),g=Number(this.getAttribute("page-size")||10),u=this.currentPage,b=this.totalPages,d=u<=1,p=u>=b;this.className=["designbase-wc-pagination",`designbase-wc-pagination--${t}`,`designbase-wc-pagination--${e}`,`designbase-wc-pagination--${a}`,i&&"designbase-wc-pagination--disabled",c&&"designbase-wc-pagination--full-width"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label","페이지 네비게이션"),this.replaceChildren();const h=document.createElement("div");if(h.className=["designbase-wc-pagination__container",c&&"designbase-wc-pagination__container--full-width"].filter(Boolean).join(" "),o&&l>0){const t=document.createElement("div");t.className="designbase-wc-pagination__total",t.textContent=this.getTotalLabel(l,g,u),h.append(t)}const m=document.createElement("nav");m.className="designbase-wc-pagination__nav",m.setAttribute("aria-label","페이지 네비게이션");const A=document.createElement("ul");A.className="designbase-wc-pagination__list",n&&!d&&A.append(this.createIconButton("arrow-bar-left",1,"첫 페이지로 이동","first")),s&&!d&&A.append(this.createIconButton("chevron-left",u-1,"이전 페이지로 이동","previous")),this.getPageNumbers().forEach((t,e)=>{if("..."===t){const t=document.createElement("li");t.className="designbase-wc-pagination__ellipsis";const e=document.createElement("span");return e.className="designbase-wc-pagination__ellipsis-text",e.textContent="...",t.append(e),void A.append(t)}"number"==typeof t&&A.append(this.createPageButton(t,i))}),s&&!p&&A.append(this.createIconButton("chevron-right",u+1,"다음 페이지로 이동","next")),n&&!p&&A.append(this.createIconButton("arrow-bar-right",b,"마지막 페이지로 이동","last")),m.append(A),h.append(m),r&&h.append(this.createPageSizeSelector(t,g,i)),this.append(h)}getPageSizeOptions(){const t=this.getAttribute("page-size-options");if(!t)return[10,20,50,100];try{const e=JSON.parse(t);if(Array.isArray(e))return e.map(t=>Number(t)).filter(t=>!Number.isNaN(t))}catch{}return[10,20,50,100]}getTotalLabel(t,e,a){return`${(a-1)*e+1}-${Math.min(a*e,t)} / ${t}개`}createPageSizeSelector(t,e,a){const i=document.createElement("div");i.className="designbase-wc-pagination__page-size";const n=document.createElement("label");n.className="designbase-wc-pagination__page-size-label";const s=document.createElement("span");s.className="designbase-wc-pagination__page-size-text",s.textContent="페이지당";const r=document.createElement("db-select");return r.className="designbase-wc-pagination__page-size-select",r.setAttribute("size",t),r.setAttribute("show-clear-button","false"),r.setAttribute("searchable","false"),r.setAttribute("options",JSON.stringify(this.getPageSizeOptions().map(t=>({value:String(t),label:String(t)})))),r.setAttribute("value",String(e)),a&&r.setAttribute("disabled",""),r.addEventListener("db-change",t=>{const a=t.detail,i=Number(a?.value);Number.isNaN(i)||i===e||(this.setAttribute("page-size",String(i)),this.dispatchEvent(new CustomEvent("db-page-size-change",{detail:{pageSize:i},bubbles:!0,composed:!0})))}),n.append(s,r),i.append(n),i}getPageNumbers(){const t=Number(this.getAttribute("sibling-count")||1),e=Number(this.getAttribute("boundary-count")||1),a=this.totalPages,i=this.currentPage;if(a<=2*t+3+2)return Array.from({length:a},(t,e)=>e+1);const n=Math.max(i-t,e),s=Math.min(i+t,a-e+1),r=n>e+2,o=s<a-e-1;if(!r&&o){const e=3+2*t;return[...Array.from({length:e},(t,e)=>e+1),"...",a]}if(r&&!o){const e=3+2*t;return[1,"...",...Array.from({length:e},(t,i)=>a-e+i+1)]}if(r&&o){return[1,"...",...Array.from({length:s-n+1},(t,e)=>n+e),"...",a]}return Array.from({length:a},(t,e)=>e+1)}createPageButton(t,e){const a=t===this.currentPage,i=document.createElement("li");i.className="designbase-wc-pagination__item";const n=document.createElement("button");return n.type="button",n.className=["designbase-wc-pagination__button",a&&"designbase-wc-pagination__button--active"].filter(Boolean).join(" "),n.textContent=String(t),n.disabled=e,a&&n.setAttribute("aria-current","page"),n.setAttribute("aria-label",`페이지 ${t}로 이동`),n.addEventListener("click",()=>this.select(t)),i.append(n),i}createIconButton(e,a,i,n){const s=document.createElement("li");s.className="designbase-wc-pagination__item";const r=document.createElement("button");return r.type="button",r.className=`designbase-wc-pagination__button designbase-wc-pagination__button--${n}`,r.disabled=this.hasAttribute("disabled"),r.setAttribute("aria-label",i),r.append(t(e,this.iconSize())),r.addEventListener("click",()=>this.select(a)),s.append(r),s}select(t){this.hasAttribute("disabled")||t===this.currentPage||t<1||t>this.totalPages||(this.currentPage=t,this.dispatchEvent(new CustomEvent("db-change",{detail:{page:t},bubbles:!0,composed:!0})))}}customElements.get("db-pagination")||customElements.define("db-pagination",DbPagination);export{DbPagination};

package/dist/esm/components/db-phone-verify.d.ts

@@ -0,0 +1,61 @@
+import './db-button.js';
+import './db-input.js';
+import './db-otp-input.js';
+import './db-select.js';
+
+/**
+ * ui-wc — db-phone-verify (수동 작성, 자동 동기화 대상 아님)
+ *
+ * 한국형 휴대폰 본인인증: 통신사 → 번호 → 인증번호 발송 → OTP + 타이머/재전송.
+ */
+
+declare const SIZES: readonly ["s", "m", "l"];
+type Size = (typeof SIZES)[number];
+declare class DbPhoneVerify extends HTMLElement {
+    static get observedAttributes(): string[];
+    private built;
+    private timerId;
+    private remaining;
+    private carrierSelect;
+    private phoneInput;
+    private sendBtn;
+    private otpInput;
+    private timerEl;
+    private resendBtn;
+    private verifyBtn;
+    private codeBlock;
+    private errorEl;
+    get size(): Size;
+    get step(): 'phone' | 'code' | 'verified';
+    set step(v: 'phone' | 'code' | 'verified');
+    get phone(): string;
+    set phone(v: string);
+    get carrier(): string;
+    set carrier(v: string);
+    get code(): string;
+    set code(v: string);
+    get countdown(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** 인증번호 발송 단계로 전환하고 타이머를 시작합니다. */
+    startCodeStep(): void;
+    /** 수동 제어 모드에서 재전송 성공 후 카운트다운을 다시 시작합니다. */
+    restartCountdown(): void;
+    /** 인증 완료 상태로 전환합니다. */
+    markVerified(): void;
+    private clearTimer;
+    private startTimer;
+    private renderTimer;
+    private build;
+    private sync;
+    private isPhoneValid;
+    private requestVerify;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'db-phone-verify': DbPhoneVerify;
+    }
+}
+
+export { DbPhoneVerify };