@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,385 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-class DbSection extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.contentId = `db-section-${Math.random().toString(36).slice(2, 9)}`;
-        this.internalExpanded = true;
-        this.internalTabId = '';
-        this.handleToggle = () => {
-            if (!this.isCollapsible())
-                return;
-            const next = !this.isExpanded();
-            if (!this.hasAttribute('expanded')) {
-                this.internalExpanded = next;
-            }
-            this.dispatchEvent(new CustomEvent('db-expanded-change', {
-                bubbles: true,
-                composed: true,
-                detail: { expanded: next },
-            }));
-            if (!this.hasAttribute('expanded')) {
-                this.syncHostClasses();
-                this.syncCollapsibleState();
-            }
-        };
-        this.handleTabChange = (event) => {
-            const detail = event.detail;
-            const tabId = detail?.id ??
-                this.parseTabs()[detail?.index ?? 0]?.id ??
-                String(detail?.index ?? 0);
-            this.internalTabId = tabId;
-            this.tabsEl?.setAttribute('selected-id', tabId);
-            this.dispatchEvent(new CustomEvent('db-tab-change', {
-                bubbles: true,
-                composed: true,
-                detail: { tabId },
-            }));
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'title',
-            'subtitle',
-            'description',
-            'size',
-            'collapsible',
-            'default-expanded',
-            'expanded',
-            'no-padding',
-            'full-width',
-            'full-height',
-            'overflow-visible',
-            'tabs',
-            'selected-tab-id',
-            'default-selected-tab-id',
-        ];
-    }
-    connectedCallback() {
-        this.internalExpanded = this.getAttribute('default-expanded') !== 'false';
-        this.syncDefaultTab();
-        this.ensureStructure();
-        this.sync();
-        this.observer = new MutationObserver(() => this.sync());
-        this.observer.observe(this, { childList: true });
-    }
-    disconnectedCallback() {
-        this.observer?.disconnect();
-    }
-    attributeChangedCallback(name) {
-        if (!this.isConnected)
-            return;
-        if (name === 'default-expanded' && !this.hasAttribute('expanded')) {
-            this.internalExpanded = this.getAttribute('default-expanded') !== 'false';
-        }
-        if (name === 'default-selected-tab-id' || name === 'tabs') {
-            this.syncDefaultTab();
-        }
-        if (name === 'selected-tab-id') {
-            const next = this.getAttribute('selected-tab-id');
-            if (next)
-                this.internalTabId = next;
-        }
-        this.sync();
-    }
-    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 [];
-        }
-    }
-    getActiveTabId() {
-        const attr = this.getAttribute('selected-tab-id');
-        if (attr && this.internalTabId && attr !== this.internalTabId) {
-            return this.internalTabId;
-        }
-        return attr || this.internalTabId || this.tabsEl?.getAttribute('selected-id') || '';
-    }
-    hasHeaderTabs() {
-        return this.parseTabs().length > 0 && !this.isCollapsible();
-    }
-    isCollapsible() {
-        return this.hasAttribute('collapsible');
-    }
-    isExpanded() {
-        if (!this.isCollapsible())
-            return true;
-        if (this.hasAttribute('expanded')) {
-            return this.getAttribute('expanded') !== 'false';
-        }
-        return this.internalExpanded;
-    }
-    isUserNode(node) {
-        return !node.hasAttribute('data-wc-internal');
-    }
-    collectSlotted(name) {
-        const direct = Array.from(this.querySelectorAll(`:scope > [slot="${name}"]`)).filter(this.isUserNode);
-        if (direct.length)
-            return direct;
-        if (name === 'actions' && this.actionsHostEl) {
-            return Array.from(this.actionsHostEl.children);
-        }
-        if (name === 'footer' && this.footerEl) {
-            return Array.from(this.footerEl.children);
-        }
-        if (name === 'header') {
-            const main = this.headerEl?.querySelector('.designbase-wc-section__header-main');
-            return main ? Array.from(main.children) : [];
-        }
-        if (name === 'description') {
-            const description = this.headerEl?.querySelector('.designbase-wc-section__description');
-            const child = description?.firstElementChild;
-            return child ? [child] : [];
-        }
-        return [];
-    }
-    collectContentNodes() {
-        const direct = Array.from(this.children).filter((child) => {
-            if (!this.isUserNode(child))
-                return false;
-            const slot = child.getAttribute('slot');
-            return !slot || slot === 'default';
-        });
-        if (direct.length)
-            return direct;
-        return this.contentEl ? Array.from(this.contentEl.children) : [];
-    }
-    ensureStructure() {
-        if (!this.headerEl) {
-            this.headerEl = document.createElement('div');
-            this.headerEl.className = 'designbase-wc-section__header';
-            this.headerEl.setAttribute('data-wc-internal', '');
-        }
-        if (!this.bodyEl) {
-            this.bodyEl = document.createElement('div');
-            this.bodyEl.className = 'designbase-wc-section__body';
-            this.bodyEl.id = this.contentId;
-            this.bodyEl.setAttribute('data-wc-internal', '');
-            this.bodyInnerEl = document.createElement('div');
-            this.bodyInnerEl.className = 'designbase-wc-section__body-inner';
-            this.bodyInnerEl.setAttribute('data-wc-internal', '');
-            this.bodyEl.append(this.bodyInnerEl);
-        }
-        if (!this.contentEl) {
-            this.contentEl = document.createElement('div');
-            this.contentEl.className = 'designbase-wc-section__content';
-            this.contentEl.setAttribute('data-wc-internal', '');
-        }
-        if (!this.footerEl) {
-            this.footerEl = document.createElement('div');
-            this.footerEl.className = 'designbase-wc-section__footer';
-            this.footerEl.setAttribute('data-wc-internal', '');
-        }
-        if (!this.headerEl.isConnected) {
-            this.append(this.headerEl);
-        }
-    }
-    mountBody() {
-        const contentNodes = this.collectContentNodes();
-        const footerNodes = this.collectSlotted('footer');
-        this.contentEl.replaceChildren(...contentNodes);
-        this.footerEl.replaceChildren(...footerNodes);
-        this.footerEl.hidden = footerNodes.length === 0;
-        if (this.isCollapsible()) {
-            this.bodyInnerEl.replaceChildren(this.contentEl, this.footerEl);
-            if (!this.bodyEl.isConnected) {
-                this.append(this.bodyEl);
-            }
-            return;
-        }
-        this.bodyEl?.remove();
-        if (!this.contentEl.isConnected) {
-            this.append(this.contentEl);
-        }
-        if (footerNodes.length) {
-            if (!this.footerEl.isConnected) {
-                this.append(this.footerEl);
-            }
-        }
-        else {
-            this.footerEl.remove();
-        }
-    }
-    getChevronSize() {
-        const size = this.getAttribute('size') || 'm';
-        if (size === 's')
-            return 16;
-        if (size === 'l')
-            return 24;
-        return 20;
-    }
-    createTitleArea() {
-        const title = this.getAttribute('title');
-        const subtitle = this.getAttribute('subtitle');
-        const description = this.getAttribute('description');
-        const descriptionSlot = this.collectSlotted('description')[0];
-        if (!title && !subtitle && !description && !descriptionSlot)
-            return null;
-        const area = document.createElement('div');
-        area.className = 'designbase-wc-section__title-area';
-        if (title) {
-            const heading = document.createElement('h2');
-            heading.className = 'designbase-wc-section__title';
-            heading.textContent = title;
-            area.append(heading);
-        }
-        if (subtitle) {
-            const sub = document.createElement('h3');
-            sub.className = 'designbase-wc-section__subtitle';
-            sub.textContent = subtitle;
-            area.append(sub);
-        }
-        if (descriptionSlot) {
-            const body = document.createElement('p');
-            body.className = 'designbase-wc-section__description';
-            body.append(descriptionSlot);
-            area.append(body);
-        }
-        else if (description) {
-            const body = document.createElement('p');
-            body.className = 'designbase-wc-section__description';
-            body.textContent = description;
-            area.append(body);
-        }
-        return area;
-    }
-    createChevron() {
-        const chevron = document.createElement('span');
-        chevron.className = 'designbase-wc-section__chevron';
-        chevron.setAttribute('aria-hidden', 'true');
-        chevron.append(createDbIcon('chevron-down', this.getChevronSize()));
-        return chevron;
-    }
-    renderHeader() {
-        if (!this.headerEl)
-            return;
-        const headerSlot = this.collectSlotted('header')[0];
-        const actionNodes = this.collectSlotted('actions');
-        const titleArea = this.createTitleArea();
-        const hasTabs = this.hasHeaderTabs();
-        const hasHeader = Boolean(headerSlot || titleArea || actionNodes.length);
-        this.headerEl.replaceChildren();
-        this.headerEl.hidden = !hasHeader && !hasTabs;
-        this.headerEl.classList.toggle('designbase-wc-section__header--with-tabs', hasTabs);
-        if (!hasHeader && !hasTabs)
-            return;
-        if (this.isCollapsible()) {
-            if (headerSlot) {
-                const trigger = document.createElement('button');
-                trigger.type = 'button';
-                trigger.className = 'designbase-wc-section__header-trigger';
-                trigger.setAttribute('aria-expanded', String(this.isExpanded()));
-                trigger.setAttribute('aria-controls', this.contentId);
-                trigger.addEventListener('click', this.handleToggle);
-                const main = document.createElement('div');
-                main.className = 'designbase-wc-section__header-main';
-                main.append(headerSlot);
-                trigger.append(main, this.createChevron());
-                this.headerEl.append(trigger);
-            }
-            else {
-                const trigger = document.createElement('button');
-                trigger.type = 'button';
-                trigger.className = 'designbase-wc-section__header-trigger';
-                trigger.setAttribute('aria-expanded', String(this.isExpanded()));
-                trigger.setAttribute('aria-controls', this.contentId);
-                trigger.addEventListener('click', this.handleToggle);
-                if (titleArea)
-                    trigger.append(titleArea);
-                trigger.append(this.createChevron());
-                this.headerEl.append(trigger);
-                if (actionNodes.length) {
-                    this.actionsHostEl = document.createElement('div');
-                    this.actionsHostEl.className = 'designbase-wc-section__actions';
-                    this.actionsHostEl.addEventListener('click', (event) => event.stopPropagation());
-                    actionNodes.forEach((node) => this.actionsHostEl.append(node));
-                    this.headerEl.append(this.actionsHostEl);
-                }
-            }
-            return;
-        }
-        const appendHeaderMain = (container) => {
-            if (headerSlot) {
-                container.append(headerSlot);
-                return;
-            }
-            if (titleArea)
-                container.append(titleArea);
-            if (actionNodes.length) {
-                this.actionsHostEl = document.createElement('div');
-                this.actionsHostEl.className = 'designbase-wc-section__actions';
-                actionNodes.forEach((node) => this.actionsHostEl.append(node));
-                container.append(this.actionsHostEl);
-            }
-        };
-        if (hasTabs) {
-            const row = document.createElement('div');
-            row.className = 'designbase-wc-section__header-row';
-            appendHeaderMain(row);
-            this.headerEl.append(row);
-            const tabsWrap = document.createElement('div');
-            tabsWrap.className = 'designbase-wc-section__header-tabs';
-            if (!this.tabsEl) {
-                this.tabsEl = document.createElement('db-tabs');
-                this.tabsEl.setAttribute('size', 'm');
-                this.tabsEl.addEventListener('db-change', this.handleTabChange);
-            }
-            this.tabsEl.setAttribute('items', JSON.stringify(this.parseTabs()));
-            this.tabsEl.setAttribute('selected-id', this.getActiveTabId());
-            tabsWrap.append(this.tabsEl);
-            this.headerEl.append(tabsWrap);
-            return;
-        }
-        appendHeaderMain(this.headerEl);
-    }
-    syncHostClasses() {
-        const size = this.getAttribute('size') || 'm';
-        const safeSize = SIZES.includes(size) ? size : 'm';
-        const expanded = this.isExpanded();
-        this.className = [
-            'designbase-wc-section',
-            `designbase-wc-section--size-${safeSize}`,
-            this.hasAttribute('no-padding') && 'designbase-wc-section--no-padding',
-            this.hasHeaderTabs() && 'designbase-wc-section--has-header-tabs',
-            this.hasAttribute('full-width') && 'designbase-wc-section--full-width',
-            this.hasAttribute('full-height') && 'designbase-wc-section--full-height',
-            this.hasAttribute('overflow-visible') && 'designbase-wc-section--overflow-visible',
-            this.isCollapsible() && 'designbase-wc-section--collapsible',
-            this.isCollapsible() && expanded && 'designbase-wc-section--expanded',
-            this.isCollapsible() && !expanded && 'designbase-wc-section--collapsed',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    syncCollapsibleState() {
-        if (!this.isCollapsible() || !this.bodyEl)
-            return;
-        const expanded = this.isExpanded();
-        this.bodyEl.setAttribute('aria-hidden', String(!expanded));
-        const trigger = this.headerEl?.querySelector('.designbase-wc-section__header-trigger');
-        trigger?.setAttribute('aria-expanded', String(expanded));
-    }
-    sync() {
-        this.ensureStructure();
-        this.syncHostClasses();
-        this.renderHeader();
-        this.mountBody();
-        this.syncCollapsibleState();
-    }
-}
-if (!customElements.get('db-section')) {
-    customElements.define('db-section', DbSection);
-}
-
-export { DbSection };
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"];class DbSection extends HTMLElement{constructor(){super(...arguments),this.contentId=`db-section-${Math.random().toString(36).slice(2,9)}`,this.internalExpanded=!0,this.internalTabId="",this.handleToggle=()=>{if(!this.isCollapsible())return;const e=!this.isExpanded();this.hasAttribute("expanded")||(this.internalExpanded=e),this.dispatchEvent(new CustomEvent("db-expanded-change",{bubbles:!0,composed:!0,detail:{expanded:e}})),this.hasAttribute("expanded")||(this.syncHostClasses(),this.syncCollapsibleState())},this.handleTabChange=e=>{const t=e.detail,s=t?.id??this.parseTabs()[t?.index??0]?.id??String(t?.index??0);this.internalTabId=s,this.tabsEl?.setAttribute("selected-id",s),this.dispatchEvent(new CustomEvent("db-tab-change",{bubbles:!0,composed:!0,detail:{tabId:s}}))}}static get observedAttributes(){return["title","subtitle","description","size","collapsible","default-expanded","expanded","no-padding","full-width","full-height","overflow-visible","tabs","selected-tab-id","default-selected-tab-id"]}connectedCallback(){this.internalExpanded="false"!==this.getAttribute("default-expanded"),this.syncDefaultTab(),this.ensureStructure(),this.sync(),this.observer=new MutationObserver(()=>this.sync()),this.observer.observe(this,{childList:!0})}disconnectedCallback(){this.observer?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("default-expanded"!==e||this.hasAttribute("expanded")||(this.internalExpanded="false"!==this.getAttribute("default-expanded")),"default-selected-tab-id"!==e&&"tabs"!==e||this.syncDefaultTab(),"selected-tab-id"===e){const e=this.getAttribute("selected-tab-id");e&&(this.internalTabId=e)}this.sync()}}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[]}}getActiveTabId(){const e=this.getAttribute("selected-tab-id");return e&&this.internalTabId&&e!==this.internalTabId?this.internalTabId:e||this.internalTabId||this.tabsEl?.getAttribute("selected-id")||""}hasHeaderTabs(){return this.parseTabs().length>0&&!this.isCollapsible()}isCollapsible(){return this.hasAttribute("collapsible")}isExpanded(){return!this.isCollapsible()||(this.hasAttribute("expanded")?"false"!==this.getAttribute("expanded"):this.internalExpanded)}isUserNode(e){return!e.hasAttribute("data-wc-internal")}collectSlotted(e){const t=Array.from(this.querySelectorAll(`:scope > [slot="${e}"]`)).filter(this.isUserNode);if(t.length)return t;if("actions"===e&&this.actionsHostEl)return Array.from(this.actionsHostEl.children);if("footer"===e&&this.footerEl)return Array.from(this.footerEl.children);if("header"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__header-main");return e?Array.from(e.children):[]}if("description"===e){const e=this.headerEl?.querySelector(".designbase-wc-section__description"),t=e?.firstElementChild;return t?[t]:[]}return[]}collectContentNodes(){const e=Array.from(this.children).filter(e=>{if(!this.isUserNode(e))return!1;const t=e.getAttribute("slot");return!t||"default"===t});return e.length?e:this.contentEl?Array.from(this.contentEl.children):[]}ensureStructure(){this.headerEl||(this.headerEl=document.createElement("div"),this.headerEl.className="designbase-wc-section__header",this.headerEl.setAttribute("data-wc-internal","")),this.bodyEl||(this.bodyEl=document.createElement("div"),this.bodyEl.className="designbase-wc-section__body",this.bodyEl.id=this.contentId,this.bodyEl.setAttribute("data-wc-internal",""),this.bodyInnerEl=document.createElement("div"),this.bodyInnerEl.className="designbase-wc-section__body-inner",this.bodyInnerEl.setAttribute("data-wc-internal",""),this.bodyEl.append(this.bodyInnerEl)),this.contentEl||(this.contentEl=document.createElement("div"),this.contentEl.className="designbase-wc-section__content",this.contentEl.setAttribute("data-wc-internal","")),this.footerEl||(this.footerEl=document.createElement("div"),this.footerEl.className="designbase-wc-section__footer",this.footerEl.setAttribute("data-wc-internal","")),this.headerEl.isConnected||this.append(this.headerEl)}mountBody(){const e=this.collectContentNodes(),t=this.collectSlotted("footer");if(this.contentEl.replaceChildren(...e),this.footerEl.replaceChildren(...t),this.footerEl.hidden=0===t.length,this.isCollapsible())return this.bodyInnerEl.replaceChildren(this.contentEl,this.footerEl),void(this.bodyEl.isConnected||this.append(this.bodyEl));this.bodyEl?.remove(),this.contentEl.isConnected||this.append(this.contentEl),t.length?this.footerEl.isConnected||this.append(this.footerEl):this.footerEl.remove()}getChevronSize(){const e=this.getAttribute("size")||"m";return"s"===e?16:"l"===e?24:20}createTitleArea(){const e=this.getAttribute("title"),t=this.getAttribute("subtitle"),s=this.getAttribute("description"),i=this.collectSlotted("description")[0];if(!(e||t||s||i))return null;const n=document.createElement("div");if(n.className="designbase-wc-section__title-area",e){const t=document.createElement("h2");t.className="designbase-wc-section__title",t.textContent=e,n.append(t)}if(t){const e=document.createElement("h3");e.className="designbase-wc-section__subtitle",e.textContent=t,n.append(e)}if(i){const e=document.createElement("p");e.className="designbase-wc-section__description",e.append(i),n.append(e)}else if(s){const e=document.createElement("p");e.className="designbase-wc-section__description",e.textContent=s,n.append(e)}return n}createChevron(){const t=document.createElement("span");return t.className="designbase-wc-section__chevron",t.setAttribute("aria-hidden","true"),t.append(e("chevron-down",this.getChevronSize())),t}renderHeader(){if(!this.headerEl)return;const e=this.collectSlotted("header")[0],t=this.collectSlotted("actions"),s=this.createTitleArea(),i=this.hasHeaderTabs(),n=Boolean(e||s||t.length);if(this.headerEl.replaceChildren(),this.headerEl.hidden=!n&&!i,this.headerEl.classList.toggle("designbase-wc-section__header--with-tabs",i),!n&&!i)return;if(this.isCollapsible()){if(e){const t=document.createElement("button");t.type="button",t.className="designbase-wc-section__header-trigger",t.setAttribute("aria-expanded",String(this.isExpanded())),t.setAttribute("aria-controls",this.contentId),t.addEventListener("click",this.handleToggle);const s=document.createElement("div");s.className="designbase-wc-section__header-main",s.append(e),t.append(s,this.createChevron()),this.headerEl.append(t)}else{const e=document.createElement("button");e.type="button",e.className="designbase-wc-section__header-trigger",e.setAttribute("aria-expanded",String(this.isExpanded())),e.setAttribute("aria-controls",this.contentId),e.addEventListener("click",this.handleToggle),s&&e.append(s),e.append(this.createChevron()),this.headerEl.append(e),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",this.actionsHostEl.addEventListener("click",e=>e.stopPropagation()),t.forEach(e=>this.actionsHostEl.append(e)),this.headerEl.append(this.actionsHostEl))}return}const appendHeaderMain=i=>{e?i.append(e):(s&&i.append(s),t.length&&(this.actionsHostEl=document.createElement("div"),this.actionsHostEl.className="designbase-wc-section__actions",t.forEach(e=>this.actionsHostEl.append(e)),i.append(this.actionsHostEl)))};if(i){const e=document.createElement("div");e.className="designbase-wc-section__header-row",appendHeaderMain(e),this.headerEl.append(e);const t=document.createElement("div");return t.className="designbase-wc-section__header-tabs",this.tabsEl||(this.tabsEl=document.createElement("db-tabs"),this.tabsEl.setAttribute("size","m"),this.tabsEl.addEventListener("db-change",this.handleTabChange)),this.tabsEl.setAttribute("items",JSON.stringify(this.parseTabs())),this.tabsEl.setAttribute("selected-id",this.getActiveTabId()),t.append(this.tabsEl),void this.headerEl.append(t)}appendHeaderMain(this.headerEl)}syncHostClasses(){const e=this.getAttribute("size")||"m",s=t.includes(e)?e:"m",i=this.isExpanded();this.className=["designbase-wc-section",`designbase-wc-section--size-${s}`,this.hasAttribute("no-padding")&&"designbase-wc-section--no-padding",this.hasHeaderTabs()&&"designbase-wc-section--has-header-tabs",this.hasAttribute("full-width")&&"designbase-wc-section--full-width",this.hasAttribute("full-height")&&"designbase-wc-section--full-height",this.hasAttribute("overflow-visible")&&"designbase-wc-section--overflow-visible",this.isCollapsible()&&"designbase-wc-section--collapsible",this.isCollapsible()&&i&&"designbase-wc-section--expanded",this.isCollapsible()&&!i&&"designbase-wc-section--collapsed"].filter(Boolean).join(" ")}syncCollapsibleState(){if(!this.isCollapsible()||!this.bodyEl)return;const e=this.isExpanded();this.bodyEl.setAttribute("aria-hidden",String(!e));const t=this.headerEl?.querySelector(".designbase-wc-section__header-trigger");t?.setAttribute("aria-expanded",String(e))}sync(){this.ensureStructure(),this.syncHostClasses(),this.renderHeader(),this.mountBody(),this.syncCollapsibleState()}}customElements.get("db-section")||customElements.define("db-section",DbSection);export{DbSection};

package/dist/esm/components/db-segment-control.js

@@ -1,231 +1 @@
-/**
- * SegmentControl Web Component
- * packages/ui SegmentControl.tsx와 DOM·동작·스타일 1:1 동기화
- */
-const CLASS = 'designbase-wc-segment-control';
-const ICON_SVGS = {
-    bar: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="12" width="4" height="8"/><rect x="10" y="8" width="4" height="12"/><rect x="17" y="4" width="4" height="16"/></svg>',
-    line: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 16 9 10 14 13 20 6"/></svg>',
-    pie: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v10l8.66 5"/><circle cx="12" cy="12" r="10"/></svg>',
-    donut: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg>',
-    radar: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 20 8 17 20 7 20 4 8"/></svg>',
-};
-class DbSegmentControl extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.indicatorEl = null;
-        this.segmentButtons = [];
-        this.focusedIndex = -1;
-        this.boundKeyDown = (e) => this.handleKeyDown(e);
-        this.boundResize = () => this.updateIndicator();
-        this.resizeObserver = null;
-    }
-    static get observedAttributes() {
-        return ['options', 'value', 'default-value', 'size', 'variant', 'appearance', 'full-width', 'disabled'];
-    }
-    connectedCallback() {
-        if (!this.built) {
-            this.built = true;
-        }
-        this.render();
-        this.addEventListener('keydown', this.boundKeyDown);
-        window.addEventListener('resize', this.boundResize);
-        this.resizeObserver = new ResizeObserver(() => this.updateIndicator());
-        this.resizeObserver.observe(this);
-    }
-    disconnectedCallback() {
-        this.removeEventListener('keydown', this.boundKeyDown);
-        window.removeEventListener('resize', this.boundResize);
-        this.resizeObserver?.disconnect();
-        this.resizeObserver = null;
-    }
-    attributeChangedCallback(name) {
-        if (!this.built)
-            return;
-        if (name === 'value') {
-            this.updateSelection();
-            return;
-        }
-        this.render();
-    }
-    get options() {
-        return this.parseOptions(this.getAttribute('options'));
-    }
-    set options(value) {
-        this.setAttribute('options', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get value() {
-        return this.getAttribute('value') || this.getAttribute('default-value') || this.options[0]?.value || '';
-    }
-    set value(value) {
-        this.setAttribute('value', value);
-    }
-    parseOptions(raw) {
-        if (!raw)
-            return [];
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    render() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const appearance = this.getAttribute('appearance') || 'pill';
-        const disabled = this.hasAttribute('disabled');
-        const options = this.options;
-        const selected = this.value;
-        this.className = [
-            CLASS,
-            `${CLASS}--${size}`,
-            `${CLASS}--${variant}`,
-            appearance === 'rounded' && `${CLASS}--appearance-rounded`,
-            this.hasAttribute('full-width') && `${CLASS}--full-width`,
-            disabled && `${CLASS}--disabled`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.setAttribute('role', 'tablist');
-        this.setAttribute('aria-label', '세그먼트 컨트롤');
-        this.replaceChildren();
-        this.segmentButtons = [];
-        options.forEach((option, index) => {
-            const isSelected = option.value === selected;
-            const isDisabled = Boolean(disabled || option.disabled);
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = [
-                `${CLASS}__segment`,
-                isSelected && `${CLASS}__segment--selected`,
-                isDisabled && `${CLASS}__segment--disabled`,
-            ]
-                .filter(Boolean)
-                .join(' ');
-            button.setAttribute('role', 'tab');
-            button.setAttribute('aria-selected', String(isSelected));
-            button.setAttribute('aria-disabled', String(isDisabled));
-            button.setAttribute('tabindex', isSelected ? '0' : '-1');
-            button.disabled = isDisabled;
-            if (option.icon && ICON_SVGS[option.icon]) {
-                const iconWrap = document.createElement('span');
-                iconWrap.className = `${CLASS}__segment-icon`;
-                iconWrap.innerHTML = ICON_SVGS[option.icon];
-                button.appendChild(iconWrap);
-            }
-            const label = document.createElement('span');
-            label.className = `${CLASS}__segment-label`;
-            label.textContent = option.label;
-            if (variant === 'icon-only') {
-                label.setAttribute('aria-label', option.label);
-            }
-            button.appendChild(label);
-            button.addEventListener('click', () => this.select(option.value));
-            button.addEventListener('focus', () => {
-                this.focusedIndex = index;
-                button.classList.add(`${CLASS}__segment--focused`);
-            });
-            button.addEventListener('blur', () => {
-                this.focusedIndex = -1;
-                button.classList.remove(`${CLASS}__segment--focused`);
-            });
-            this.appendChild(button);
-            this.segmentButtons.push(button);
-        });
-        this.indicatorEl = document.createElement('div');
-        this.indicatorEl.className = `${CLASS}__indicator`;
-        this.appendChild(this.indicatorEl);
-        this.updateSelection();
-    }
-    updateSelection() {
-        const options = this.options;
-        const selected = this.value;
-        const selectedIndex = options.findIndex((option) => option.value === selected);
-        this.segmentButtons.forEach((button, index) => {
-            const option = options[index];
-            const isSelected = option?.value === selected;
-            button.classList.toggle(`${CLASS}__segment--selected`, isSelected);
-            button.setAttribute('aria-selected', String(isSelected));
-            button.setAttribute('tabindex', isSelected ? '0' : '-1');
-        });
-        if (this.indicatorEl && options.length > 0 && selectedIndex >= 0) {
-            requestAnimationFrame(() => this.updateIndicator());
-        }
-    }
-    updateIndicator() {
-        const selectedIndex = this.options.findIndex((option) => option.value === this.value);
-        const activeButton = this.segmentButtons[selectedIndex];
-        if (!this.indicatorEl || !activeButton)
-            return;
-        this.indicatorEl.style.width = `${activeButton.offsetWidth}px`;
-        this.indicatorEl.style.transform = `translateX(${activeButton.offsetLeft}px)`;
-    }
-    select(value) {
-        if (this.hasAttribute('disabled'))
-            return;
-        const option = this.options.find((item) => item.value === value);
-        if (!option || option.disabled)
-            return;
-        this.setAttribute('value', value);
-        this.dispatchEvent(new CustomEvent('db-change', {
-            detail: { value },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    handleKeyDown(event) {
-        if (this.hasAttribute('disabled'))
-            return;
-        const options = this.options;
-        const currentIndex = options.findIndex((option) => option.value === this.value);
-        if (currentIndex === -1)
-            return;
-        let nextIndex = currentIndex;
-        switch (event.key) {
-            case 'ArrowLeft':
-                event.preventDefault();
-                nextIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
-                break;
-            case 'Home':
-                event.preventDefault();
-                nextIndex = 0;
-                break;
-            case 'End':
-                event.preventDefault();
-                nextIndex = options.length - 1;
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                this.select(options[nextIndex]?.value ?? this.value);
-                return;
-            default:
-                return;
-        }
-        while (nextIndex !== currentIndex) {
-            const nextOption = options[nextIndex];
-            if (nextOption && !nextOption.disabled) {
-                this.segmentButtons[nextIndex]?.focus();
-                break;
-            }
-            if (event.key === 'ArrowLeft' || event.key === 'Home') {
-                nextIndex = nextIndex > 0 ? nextIndex - 1 : options.length - 1;
-            }
-            else {
-                nextIndex = nextIndex < options.length - 1 ? nextIndex + 1 : 0;
-            }
-        }
-    }
-}
-if (!customElements.get('db-segment-control')) {
-    customElements.define('db-segment-control', DbSegmentControl);
-}
-
-export { DbSegmentControl };
+const e="designbase-wc-segment-control",t={bar:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="12" width="4" height="8"/><rect x="10" y="8" width="4" height="12"/><rect x="17" y="4" width="4" height="16"/></svg>',line:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 16 9 10 14 13 20 6"/></svg>',pie:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v10l8.66 5"/><circle cx="12" cy="12" r="10"/></svg>',donut:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg>',radar:'<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 20 8 17 20 7 20 4 8"/></svg>'};class DbSegmentControl extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.indicatorEl=null,this.segmentButtons=[],this.focusedIndex=-1,this.boundKeyDown=e=>this.handleKeyDown(e),this.boundResize=()=>this.updateIndicator(),this.resizeObserver=null}static get observedAttributes(){return["options","value","default-value","size","variant","appearance","full-width","disabled"]}connectedCallback(){this.built||(this.built=!0),this.render(),this.addEventListener("keydown",this.boundKeyDown),window.addEventListener("resize",this.boundResize),this.resizeObserver=new ResizeObserver(()=>this.updateIndicator()),this.resizeObserver.observe(this)}disconnectedCallback(){this.removeEventListener("keydown",this.boundKeyDown),window.removeEventListener("resize",this.boundResize),this.resizeObserver?.disconnect(),this.resizeObserver=null}attributeChangedCallback(e){this.built&&("value"!==e?this.render():this.updateSelection())}get options(){return this.parseOptions(this.getAttribute("options"))}set options(e){this.setAttribute("options","string"==typeof e?e:JSON.stringify(e))}get value(){return this.getAttribute("value")||this.getAttribute("default-value")||this.options[0]?.value||""}set value(e){this.setAttribute("value",e)}parseOptions(e){if(!e)return[];try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}}render(){const i=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",n=this.getAttribute("appearance")||"pill",r=this.hasAttribute("disabled"),o=this.options,a=this.value;this.className=[e,`${e}--${i}`,`${e}--${s}`,"rounded"===n&&`${e}--appearance-rounded`,this.hasAttribute("full-width")&&`${e}--full-width`,r&&`${e}--disabled`].filter(Boolean).join(" "),this.setAttribute("role","tablist"),this.setAttribute("aria-label","세그먼트 컨트롤"),this.replaceChildren(),this.segmentButtons=[],o.forEach((i,n)=>{const o=i.value===a,l=Boolean(r||i.disabled),d=document.createElement("button");if(d.type="button",d.className=[`${e}__segment`,o&&`${e}__segment--selected`,l&&`${e}__segment--disabled`].filter(Boolean).join(" "),d.setAttribute("role","tab"),d.setAttribute("aria-selected",String(o)),d.setAttribute("aria-disabled",String(l)),d.setAttribute("tabindex",o?"0":"-1"),d.disabled=l,i.icon&&t[i.icon]){const s=document.createElement("span");s.className=`${e}__segment-icon`,s.innerHTML=t[i.icon],d.appendChild(s)}const h=document.createElement("span");h.className=`${e}__segment-label`,h.textContent=i.label,"icon-only"===s&&h.setAttribute("aria-label",i.label),d.appendChild(h),d.addEventListener("click",()=>this.select(i.value)),d.addEventListener("focus",()=>{this.focusedIndex=n,d.classList.add(`${e}__segment--focused`)}),d.addEventListener("blur",()=>{this.focusedIndex=-1,d.classList.remove(`${e}__segment--focused`)}),this.appendChild(d),this.segmentButtons.push(d)}),this.indicatorEl=document.createElement("div"),this.indicatorEl.className=`${e}__indicator`,this.appendChild(this.indicatorEl),this.updateSelection()}updateSelection(){const t=this.options,i=this.value,s=t.findIndex(e=>e.value===i);this.segmentButtons.forEach((s,n)=>{const r=t[n],o=r?.value===i;s.classList.toggle(`${e}__segment--selected`,o),s.setAttribute("aria-selected",String(o)),s.setAttribute("tabindex",o?"0":"-1")}),this.indicatorEl&&t.length>0&&s>=0&&requestAnimationFrame(()=>this.updateIndicator())}updateIndicator(){const e=this.options.findIndex(e=>e.value===this.value),t=this.segmentButtons[e];this.indicatorEl&&t&&(this.indicatorEl.style.width=`${t.offsetWidth}px`,this.indicatorEl.style.transform=`translateX(${t.offsetLeft}px)`)}select(e){if(this.hasAttribute("disabled"))return;const t=this.options.find(t=>t.value===e);t&&!t.disabled&&(this.setAttribute("value",e),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e},bubbles:!0,composed:!0})))}handleKeyDown(e){if(this.hasAttribute("disabled"))return;const t=this.options,i=t.findIndex(e=>e.value===this.value);if(-1===i)return;let s=i;switch(e.key){case"ArrowLeft":e.preventDefault(),s=i>0?i-1:t.length-1;break;case"ArrowRight":e.preventDefault(),s=i<t.length-1?i+1:0;break;case"Home":e.preventDefault(),s=0;break;case"End":e.preventDefault(),s=t.length-1;break;case"Enter":case" ":return e.preventDefault(),void this.select(t[s]?.value??this.value);default:return}for(;s!==i;){const i=t[s];if(i&&!i.disabled){this.segmentButtons[s]?.focus();break}s="ArrowLeft"===e.key||"Home"===e.key?s>0?s-1:t.length-1:s<t.length-1?s+1:0}}}customElements.get("db-segment-control")||customElements.define("db-segment-control",DbSegmentControl);export{DbSegmentControl};