@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

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

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

@@ -1 +1,231 @@
-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};
+/**
+ * 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 };