@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,329 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const CHEVRON_SIZE = { s: 12, m: 14, l: 16 };
-function formatBreadcrumbLabel(label, maxLabelLength) {
-    if (!maxLabelLength || label.length <= maxLabelLength) {
-        return { text: label, full: label, truncated: false };
-    }
-    return {
-        text: `${label.slice(0, maxLabelLength)}...`,
-        full: label,
-        truncated: true,
-    };
-}
-class DbBreadcrumbs extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.openMenuId = null;
-        this.onDocumentMouseDown = null;
-        this.onDocumentKeyDown = null;
-    }
-    static get observedAttributes() {
-        return ['items', 'size', 'variant', 'breadcrumb-style', 'max-items', 'menu-dropdown', 'max-label-length'];
-    }
-    get items() {
-        try {
-            return JSON.parse(this.getAttribute('items') || '[]');
-        }
-        catch {
-            return [];
-        }
-    }
-    set items(value) {
-        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    connectedCallback() {
-        this.render();
-    }
-    disconnectedCallback() {
-        this.removeGlobalListeners();
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.openMenuId = null;
-        this.render();
-    }
-    get menuDropdown() {
-        return this.hasAttribute('menu-dropdown');
-    }
-    get maxLabelLength() {
-        const value = Number(this.getAttribute('max-label-length'));
-        return Number.isFinite(value) && value > 0 ? value : 12;
-    }
-    get resolvedVariant() {
-        return this.getAttribute('variant') || this.getAttribute('breadcrumb-style') || 'default';
-    }
-    itemId(item, index) {
-        return item.id || `item-${index}`;
-    }
-    menuItemId(menuItem, index) {
-        return menuItem.id || `menu-${index}`;
-    }
-    visibleItems() {
-        const items = this.items;
-        const maxItems = Number(this.getAttribute('max-items') || 0);
-        if (!maxItems || items.length <= maxItems)
-            return items;
-        const firstItem = items[0];
-        const lastItem = items[items.length - 1];
-        const middleItems = items.slice(1, -1);
-        const visibleMiddleCount = maxItems - 2;
-        if (visibleMiddleCount <= 0) {
-            return [firstItem, lastItem];
-        }
-        const startIndex = Math.floor(middleItems.length / 2) - Math.floor(visibleMiddleCount / 2);
-        const visibleMiddleItems = middleItems.slice(startIndex, startIndex + visibleMiddleCount);
-        return [firstItem, ...visibleMiddleItems, lastItem];
-    }
-    shouldUseDropdown(item) {
-        return this.menuDropdown && Boolean(item.menu?.length);
-    }
-    closeMenu() {
-        if (!this.openMenuId)
-            return;
-        this.openMenuId = null;
-        this.removeGlobalListeners();
-        this.updateDropdownStates();
-    }
-    openMenu(id) {
-        this.openMenuId = id;
-        this.addGlobalListeners();
-        this.updateDropdownStates();
-    }
-    toggleMenu(id) {
-        if (this.openMenuId === id) {
-            this.closeMenu();
-        }
-        else {
-            this.openMenu(id);
-        }
-    }
-    addGlobalListeners() {
-        if (this.onDocumentMouseDown)
-            return;
-        this.onDocumentMouseDown = (event) => {
-            if (!this.contains(event.target)) {
-                this.closeMenu();
-            }
-        };
-        this.onDocumentKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                this.closeMenu();
-            }
-        };
-        document.addEventListener('mousedown', this.onDocumentMouseDown);
-        document.addEventListener('keydown', this.onDocumentKeyDown);
-    }
-    removeGlobalListeners() {
-        if (this.onDocumentMouseDown) {
-            document.removeEventListener('mousedown', this.onDocumentMouseDown);
-            this.onDocumentMouseDown = null;
-        }
-        if (this.onDocumentKeyDown) {
-            document.removeEventListener('keydown', this.onDocumentKeyDown);
-            this.onDocumentKeyDown = null;
-        }
-    }
-    updateDropdownStates() {
-        this.querySelectorAll('[data-breadcrumb-dropdown]').forEach((dropdown) => {
-            const id = dropdown.dataset.breadcrumbDropdown || '';
-            const isOpen = this.openMenuId === id;
-            dropdown.classList.toggle('designbase-wc-breadcrumbs__dropdown--open', isOpen);
-            const trigger = dropdown.querySelector('.designbase-wc-breadcrumbs__trigger');
-            if (trigger) {
-                trigger.setAttribute('aria-expanded', String(isOpen));
-            }
-        });
-    }
-    createLabel(label) {
-        const formatted = formatBreadcrumbLabel(label, this.maxLabelLength);
-        const labelEl = document.createElement('span');
-        labelEl.className = 'designbase-wc-breadcrumbs__label';
-        labelEl.textContent = formatted.text;
-        if (formatted.truncated) {
-            labelEl.setAttribute('title', formatted.full);
-        }
-        return labelEl;
-    }
-    createMenuItem(menuItem, menuIndex, parentItem) {
-        const menuItemEl = menuItem.href && !menuItem.disabled
-            ? document.createElement('a')
-            : document.createElement('button');
-        menuItemEl.className = [
-            'designbase-wc-breadcrumbs__menu-item',
-            menuItem.active && 'designbase-wc-breadcrumbs__menu-item--active',
-            menuItem.disabled && 'designbase-wc-breadcrumbs__menu-item--disabled',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        menuItemEl.setAttribute('role', 'menuitem');
-        if (menuItemEl instanceof HTMLButtonElement) {
-            menuItemEl.type = 'button';
-            menuItemEl.disabled = Boolean(menuItem.disabled);
-        }
-        else {
-            menuItemEl.href = menuItem.href || '#';
-        }
-        if (menuItem.icon) {
-            const icon = document.createElement('span');
-            icon.className = 'designbase-wc-breadcrumbs__icon';
-            icon.append(createDbIcon(menuItem.icon, 16));
-            menuItemEl.append(icon);
-        }
-        menuItemEl.append(this.createLabel(menuItem.label));
-        menuItemEl.addEventListener('click', (event) => {
-            if (menuItem.disabled) {
-                event.preventDefault();
-                return;
-            }
-            this.closeMenu();
-            this.dispatchEvent(new CustomEvent('db-menu-click', {
-                detail: {
-                    menuItem: { ...menuItem, id: this.menuItemId(menuItem, menuIndex) },
-                    parentItem,
-                },
-                bubbles: true,
-                composed: true,
-            }));
-        });
-        return menuItemEl;
-    }
-    createDropdownItem(item, index, isLast, chevronSize) {
-        const id = this.itemId(item, index);
-        const isOpen = this.openMenuId === id;
-        const dropdown = document.createElement('div');
-        dropdown.className = [
-            'designbase-wc-breadcrumbs__dropdown',
-            isOpen && 'designbase-wc-breadcrumbs__dropdown--open',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        dropdown.dataset.breadcrumbDropdown = id;
-        const trigger = document.createElement('button');
-        trigger.type = 'button';
-        trigger.className = [
-            'designbase-wc-breadcrumbs__trigger',
-            (isLast || item.active) && 'designbase-wc-breadcrumbs__trigger--active',
-            item.disabled && 'designbase-wc-breadcrumbs__trigger--disabled',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        trigger.setAttribute('aria-haspopup', 'menu');
-        trigger.setAttribute('aria-expanded', String(isOpen));
-        trigger.disabled = Boolean(item.disabled);
-        if (item.icon) {
-            const icon = document.createElement('span');
-            icon.className = 'designbase-wc-breadcrumbs__icon';
-            icon.append(createDbIcon(item.icon, 16));
-            trigger.append(icon);
-        }
-        trigger.append(this.createLabel(item.label));
-        const chevron = document.createElement('span');
-        chevron.className = 'designbase-wc-breadcrumbs__chevron';
-        chevron.setAttribute('aria-hidden', 'true');
-        chevron.append(createDbIcon('chevron-down', chevronSize));
-        trigger.append(chevron);
-        trigger.addEventListener('click', (event) => {
-            event.stopPropagation();
-            if (item.disabled)
-                return;
-            this.toggleMenu(id);
-        });
-        dropdown.append(trigger);
-        const menu = document.createElement('div');
-        menu.className = 'designbase-wc-breadcrumbs__menu';
-        menu.setAttribute('role', 'menu');
-        item.menu?.forEach((menuItem, menuIndex) => {
-            menu.append(this.createMenuItem(menuItem, menuIndex, item));
-        });
-        dropdown.append(menu);
-        return dropdown;
-    }
-    createStandardItem(item, index, isLast) {
-        const content = item.href && !isLast && !item.disabled
-            ? document.createElement('a')
-            : document.createElement('span');
-        content.className = content instanceof HTMLAnchorElement
-            ? [
-                'designbase-wc-breadcrumbs__link',
-                item.active && 'designbase-wc-breadcrumbs__link--active',
-                item.disabled && 'designbase-wc-breadcrumbs__link--disabled',
-            ]
-                .filter(Boolean)
-                .join(' ')
-            : [
-                'designbase-wc-breadcrumbs__text',
-                isLast && 'designbase-wc-breadcrumbs__text--active',
-                item.disabled && 'designbase-wc-breadcrumbs__text--disabled',
-            ]
-                .filter(Boolean)
-                .join(' ');
-        if (item.icon) {
-            const icon = document.createElement('span');
-            icon.className = 'designbase-wc-breadcrumbs__icon';
-            icon.append(createDbIcon(item.icon, 16));
-            content.append(icon);
-        }
-        content.append(this.createLabel(item.label));
-        if (content instanceof HTMLAnchorElement) {
-            content.href = item.href || '#';
-        }
-        content.addEventListener('click', (event) => {
-            if (item.disabled || item.active || isLast) {
-                event.preventDefault();
-            }
-            this.dispatchEvent(new CustomEvent('db-click', {
-                detail: { item },
-                bubbles: true,
-                composed: true,
-            }));
-        });
-        return content;
-    }
-    render() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.resolvedVariant;
-        const visibleItems = this.visibleItems();
-        const hasCollapsedItems = visibleItems.length < this.items.length;
-        const chevronSize = CHEVRON_SIZE[size] || 14;
-        this.className = [
-            'designbase-wc-breadcrumbs',
-            `designbase-wc-breadcrumbs--${size}`,
-            `designbase-wc-breadcrumbs--${variant}`,
-            hasCollapsedItems && 'designbase-wc-breadcrumbs--collapsed',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.setAttribute('role', 'navigation');
-        this.setAttribute('aria-label', '브레드크럼 네비게이션');
-        this.replaceChildren();
-        const list = document.createElement('ol');
-        list.className = 'designbase-wc-breadcrumbs__list';
-        visibleItems.forEach((item, index) => {
-            const isLast = index === visibleItems.length - 1;
-            const listItem = document.createElement('li');
-            listItem.className = 'designbase-wc-breadcrumbs__item';
-            if (this.shouldUseDropdown(item)) {
-                listItem.append(this.createDropdownItem(item, index, isLast, chevronSize));
-            }
-            else {
-                listItem.append(this.createStandardItem(item, index, isLast));
-            }
-            if (!isLast) {
-                const separator = document.createElement('span');
-                separator.className = 'designbase-wc-breadcrumbs__separator';
-                separator.setAttribute('aria-hidden', 'true');
-                separator.append(createDbIcon('chevron-right', 16));
-                listItem.append(separator);
-            }
-            list.append(listItem);
-        });
-        this.append(list);
-    }
-}
-if (!customElements.get('db-breadcrumbs')) {
-    customElements.define('db-breadcrumbs', DbBreadcrumbs);
-}
-
-export { DbBreadcrumbs };
+import{createDbIcon as e}from"./db-icons.js";const t={s:12,m:14,l:16};class DbBreadcrumbs extends HTMLElement{constructor(){super(...arguments),this.openMenuId=null,this.onDocumentMouseDown=null,this.onDocumentKeyDown=null}static get observedAttributes(){return["items","size","variant","breadcrumb-style","max-items","menu-dropdown","max-label-length"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}connectedCallback(){this.render()}disconnectedCallback(){this.removeGlobalListeners()}attributeChangedCallback(){this.isConnected&&(this.openMenuId=null,this.render())}get menuDropdown(){return this.hasAttribute("menu-dropdown")}get maxLabelLength(){const e=Number(this.getAttribute("max-label-length"));return Number.isFinite(e)&&e>0?e:12}get resolvedVariant(){return this.getAttribute("variant")||this.getAttribute("breadcrumb-style")||"default"}itemId(e,t){return e.id||`item-${t}`}menuItemId(e,t){return e.id||`menu-${t}`}visibleItems(){const e=this.items,t=Number(this.getAttribute("max-items")||0);if(!t||e.length<=t)return e;const n=e[0],s=e[e.length-1],a=e.slice(1,-1),r=t-2;if(r<=0)return[n,s];const i=Math.floor(a.length/2)-Math.floor(r/2);return[n,...a.slice(i,i+r),s]}shouldUseDropdown(e){return this.menuDropdown&&Boolean(e.menu?.length)}closeMenu(){this.openMenuId&&(this.openMenuId=null,this.removeGlobalListeners(),this.updateDropdownStates())}openMenu(e){this.openMenuId=e,this.addGlobalListeners(),this.updateDropdownStates()}toggleMenu(e){this.openMenuId===e?this.closeMenu():this.openMenu(e)}addGlobalListeners(){this.onDocumentMouseDown||(this.onDocumentMouseDown=e=>{this.contains(e.target)||this.closeMenu()},this.onDocumentKeyDown=e=>{"Escape"===e.key&&this.closeMenu()},document.addEventListener("mousedown",this.onDocumentMouseDown),document.addEventListener("keydown",this.onDocumentKeyDown))}removeGlobalListeners(){this.onDocumentMouseDown&&(document.removeEventListener("mousedown",this.onDocumentMouseDown),this.onDocumentMouseDown=null),this.onDocumentKeyDown&&(document.removeEventListener("keydown",this.onDocumentKeyDown),this.onDocumentKeyDown=null)}updateDropdownStates(){this.querySelectorAll("[data-breadcrumb-dropdown]").forEach(e=>{const t=e.dataset.breadcrumbDropdown||"",n=this.openMenuId===t;e.classList.toggle("designbase-wc-breadcrumbs__dropdown--open",n);const s=e.querySelector(".designbase-wc-breadcrumbs__trigger");s&&s.setAttribute("aria-expanded",String(n))})}createLabel(e){const t=function formatBreadcrumbLabel(e,t){return!t||e.length<=t?{text:e,full:e,truncated:!1}:{text:`${e.slice(0,t)}...`,full:e,truncated:!0}}(e,this.maxLabelLength),n=document.createElement("span");return n.className="designbase-wc-breadcrumbs__label",n.textContent=t.text,t.truncated&&n.setAttribute("title",t.full),n}createMenuItem(t,n,s){const a=t.href&&!t.disabled?document.createElement("a"):document.createElement("button");if(a.className=["designbase-wc-breadcrumbs__menu-item",t.active&&"designbase-wc-breadcrumbs__menu-item--active",t.disabled&&"designbase-wc-breadcrumbs__menu-item--disabled"].filter(Boolean).join(" "),a.setAttribute("role","menuitem"),a instanceof HTMLButtonElement?(a.type="button",a.disabled=Boolean(t.disabled)):a.href=t.href||"#",t.icon){const n=document.createElement("span");n.className="designbase-wc-breadcrumbs__icon",n.append(e(t.icon,16)),a.append(n)}return a.append(this.createLabel(t.label)),a.addEventListener("click",e=>{t.disabled?e.preventDefault():(this.closeMenu(),this.dispatchEvent(new CustomEvent("db-menu-click",{detail:{menuItem:{...t,id:this.menuItemId(t,n)},parentItem:s},bubbles:!0,composed:!0})))}),a}createDropdownItem(t,n,s,a){const r=this.itemId(t,n),i=this.openMenuId===r,d=document.createElement("div");d.className=["designbase-wc-breadcrumbs__dropdown",i&&"designbase-wc-breadcrumbs__dropdown--open"].filter(Boolean).join(" "),d.dataset.breadcrumbDropdown=r;const o=document.createElement("button");if(o.type="button",o.className=["designbase-wc-breadcrumbs__trigger",(s||t.active)&&"designbase-wc-breadcrumbs__trigger--active",t.disabled&&"designbase-wc-breadcrumbs__trigger--disabled"].filter(Boolean).join(" "),o.setAttribute("aria-haspopup","menu"),o.setAttribute("aria-expanded",String(i)),o.disabled=Boolean(t.disabled),t.icon){const n=document.createElement("span");n.className="designbase-wc-breadcrumbs__icon",n.append(e(t.icon,16)),o.append(n)}o.append(this.createLabel(t.label));const c=document.createElement("span");c.className="designbase-wc-breadcrumbs__chevron",c.setAttribute("aria-hidden","true"),c.append(e("chevron-down",a)),o.append(c),o.addEventListener("click",e=>{e.stopPropagation(),t.disabled||this.toggleMenu(r)}),d.append(o);const u=document.createElement("div");return u.className="designbase-wc-breadcrumbs__menu",u.setAttribute("role","menu"),t.menu?.forEach((e,n)=>{u.append(this.createMenuItem(e,n,t))}),d.append(u),d}createStandardItem(t,n,s){const a=!t.href||s||t.disabled?document.createElement("span"):document.createElement("a");if(a.className=a instanceof HTMLAnchorElement?["designbase-wc-breadcrumbs__link",t.active&&"designbase-wc-breadcrumbs__link--active",t.disabled&&"designbase-wc-breadcrumbs__link--disabled"].filter(Boolean).join(" "):["designbase-wc-breadcrumbs__text",s&&"designbase-wc-breadcrumbs__text--active",t.disabled&&"designbase-wc-breadcrumbs__text--disabled"].filter(Boolean).join(" "),t.icon){const n=document.createElement("span");n.className="designbase-wc-breadcrumbs__icon",n.append(e(t.icon,16)),a.append(n)}return a.append(this.createLabel(t.label)),a instanceof HTMLAnchorElement&&(a.href=t.href||"#"),a.addEventListener("click",e=>{(t.disabled||t.active||s)&&e.preventDefault(),this.dispatchEvent(new CustomEvent("db-click",{detail:{item:t},bubbles:!0,composed:!0}))}),a}render(){const n=this.getAttribute("size")||"m",s=this.resolvedVariant,a=this.visibleItems(),r=a.length<this.items.length,i=t[n]||14;this.className=["designbase-wc-breadcrumbs",`designbase-wc-breadcrumbs--${n}`,`designbase-wc-breadcrumbs--${s}`,r&&"designbase-wc-breadcrumbs--collapsed"].filter(Boolean).join(" "),this.setAttribute("role","navigation"),this.setAttribute("aria-label","브레드크럼 네비게이션"),this.replaceChildren();const d=document.createElement("ol");d.className="designbase-wc-breadcrumbs__list",a.forEach((t,n)=>{const s=n===a.length-1,r=document.createElement("li");if(r.className="designbase-wc-breadcrumbs__item",this.shouldUseDropdown(t)?r.append(this.createDropdownItem(t,n,s,i)):r.append(this.createStandardItem(t,n,s)),!s){const t=document.createElement("span");t.className="designbase-wc-breadcrumbs__separator",t.setAttribute("aria-hidden","true"),t.append(e("chevron-right",16)),r.append(t)}d.append(r)}),this.append(d)}}customElements.get("db-breadcrumbs")||customElements.define("db-breadcrumbs",DbBreadcrumbs);export{DbBreadcrumbs};

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

@@ -1,316 +1 @@
-import { isDbIconName, createDbIcon } from './db-icons.js';
-
-const BOOLEAN_ATTRIBUTES = ['disabled', 'loading', 'icon-only', 'full-width'];
-const VARIANTS = ['primary', 'secondary', 'tertiary', 'danger', 'ghost', 'accent'];
-const SIZES = ['s', 'm', 'l'];
-const RADIUS_VALUES = ['none', 's', 'm', 'l', 'pill'];
-const ACCENT_STYLES = ['gradient', 'backlight'];
-const CIRCULAR_SPINNER_HTML = '<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>';
-/**
- * Light DOM custom element for the canonical web Button.
- *
- * The host itself behaves like the button so framework children stay owned by
- * their renderer. This keeps React/Vue slots stable while sharing one element.
- */
-class DbButton extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.handleClick = (e) => {
-            if (this.disabled || this.loading) {
-                e.preventDefault();
-                e.stopPropagation();
-                return;
-            }
-            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-        };
-        this.handleKeyDown = (e) => {
-            if (e.key !== 'Enter' && e.key !== ' ')
-                return;
-            e.preventDefault();
-            if (!this.disabled && !this.loading) {
-                this.classList.add('designbase-wc-button--pressed');
-            }
-            this.click();
-        };
-        this.handleKeyUp = (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                this.classList.remove('designbase-wc-button--pressed');
-            }
-        };
-        this.handlePointerDown = () => {
-            if (this.disabled || this.loading)
-                return;
-            this.classList.add('designbase-wc-button--pressed');
-        };
-        this.handlePointerUp = () => {
-            this.classList.remove('designbase-wc-button--pressed');
-        };
-    }
-    static get observedAttributes() {
-        return ['variant', 'size', 'radius', 'accent-style', 'type', 'loading-text', 'start-icon', 'end-icon', ...BOOLEAN_ATTRIBUTES];
-    }
-    get variant() {
-        return this.getAttribute('variant') || 'primary';
-    }
-    set variant(value) {
-        this.setAttribute('variant', value);
-    }
-    get size() {
-        return this.getAttribute('size') || 'm';
-    }
-    set size(value) {
-        this.setAttribute('size', value);
-    }
-    get radius() {
-        return this.getAttribute('radius') || '';
-    }
-    set radius(value) {
-        if (value)
-            this.setAttribute('radius', value);
-        else
-            this.removeAttribute('radius');
-    }
-    get accentStyle() {
-        return this.getAttribute('accent-style') || 'gradient';
-    }
-    set accentStyle(value) {
-        if (value)
-            this.setAttribute('accent-style', value);
-        else
-            this.removeAttribute('accent-style');
-    }
-    get type() {
-        return this.getAttribute('type') || 'button';
-    }
-    set type(value) {
-        this.setAttribute('type', value);
-    }
-    get loadingText() {
-        return this.getAttribute('loading-text') || '';
-    }
-    set loadingText(value) {
-        if (value)
-            this.setAttribute('loading-text', value);
-        else
-            this.removeAttribute('loading-text');
-    }
-    get disabled() {
-        return this.hasAttribute('disabled');
-    }
-    set disabled(value) {
-        this.toggleAttribute('disabled', value);
-    }
-    get loading() {
-        return this.hasAttribute('loading');
-    }
-    set loading(value) {
-        this.toggleAttribute('loading', value);
-    }
-    get iconOnly() {
-        return this.hasAttribute('icon-only');
-    }
-    set iconOnly(value) {
-        this.toggleAttribute('icon-only', value);
-    }
-    get fullWidth() {
-        return this.hasAttribute('full-width');
-    }
-    set fullWidth(value) {
-        this.toggleAttribute('full-width', value);
-    }
-    connectedCallback() {
-        this.addEventListener('click', this.handleClick);
-        this.addEventListener('keydown', this.handleKeyDown);
-        this.addEventListener('keyup', this.handleKeyUp);
-        this.addEventListener('pointerdown', this.handlePointerDown);
-        this.addEventListener('pointerup', this.handlePointerUp);
-        this.addEventListener('pointerleave', this.handlePointerUp);
-        this.addEventListener('pointercancel', this.handlePointerUp);
-        this.syncAttributes();
-    }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.handleClick);
-        this.removeEventListener('keydown', this.handleKeyDown);
-        this.removeEventListener('keyup', this.handleKeyUp);
-        this.removeEventListener('pointerdown', this.handlePointerDown);
-        this.removeEventListener('pointerup', this.handlePointerUp);
-        this.removeEventListener('pointerleave', this.handlePointerUp);
-        this.removeEventListener('pointercancel', this.handlePointerUp);
-    }
-    attributeChangedCallback() {
-        this.syncAttributes();
-    }
-    syncAttributes() {
-        this.classList.add('designbase-wc-button');
-        this.setAttribute('role', 'button');
-        this.setAttribute('aria-disabled', String(this.disabled || this.loading));
-        if (this.disabled || this.loading) {
-            this.removeAttribute('tabindex');
-        }
-        else if (!this.hasAttribute('tabindex')) {
-            this.setAttribute('tabindex', '0');
-        }
-        this.syncModifier('variant', this.variant);
-        this.syncModifier('size', this.size);
-        this.syncRadius();
-        this.syncAccentStyle();
-        this.syncAccentField();
-        this.syncBooleanModifier('disabled');
-        this.syncBooleanModifier('icon-only');
-        this.syncBooleanModifier('full-width');
-        this.syncLoadingVisual();
-        if (!this.loading) {
-            this.syncIcons();
-        }
-        else {
-            this.querySelector(':scope > .designbase-wc-button__start-icon')?.remove();
-            this.querySelector(':scope > .designbase-wc-button__end-icon')?.remove();
-        }
-    }
-    getIconSize() {
-        if (this.size === 's')
-            return 16;
-        if (this.size === 'l')
-            return 24;
-        return 20;
-    }
-    resolveIconName(raw) {
-        if (!raw || !isDbIconName(raw))
-            return undefined;
-        return raw;
-    }
-    isManagedIconNode(node) {
-        return (node instanceof HTMLElement &&
-            (node.classList.contains('designbase-wc-button__start-icon') ||
-                node.classList.contains('designbase-wc-button__end-icon') ||
-                node.classList.contains('designbase-wc-button__spinner') ||
-                node.classList.contains('designbase-wc-button__accent-field') ||
-                node.classList.contains('designbase-wc-button__accent-glass') ||
-                node.classList.contains('designbase-wc-button__accent-orb')));
-    }
-    syncIcons() {
-        const startIconName = this.resolveIconName(this.getAttribute('start-icon'));
-        const endIconName = this.resolveIconName(this.getAttribute('end-icon'));
-        const iconPx = this.getIconSize();
-        let startHost = this.querySelector(':scope > .designbase-wc-button__start-icon');
-        if (startIconName) {
-            if (!startHost) {
-                startHost = document.createElement('span');
-                startHost.className = 'designbase-wc-button__start-icon';
-                startHost.setAttribute('aria-hidden', 'true');
-                const anchor = Array.from(this.childNodes).find((node) => !this.isManagedIconNode(node));
-                if (anchor)
-                    this.insertBefore(startHost, anchor);
-                else
-                    this.append(startHost);
-            }
-            startHost.replaceChildren(createDbIcon(startIconName, iconPx));
-        }
-        else {
-            startHost?.remove();
-        }
-        let endHost = this.querySelector(':scope > .designbase-wc-button__end-icon');
-        if (endIconName) {
-            if (!endHost) {
-                endHost = document.createElement('span');
-                endHost.className = 'designbase-wc-button__end-icon';
-                endHost.setAttribute('aria-hidden', 'true');
-            }
-            endHost.replaceChildren(createDbIcon(endIconName, iconPx));
-            this.append(endHost);
-        }
-        else {
-            endHost?.remove();
-        }
-    }
-    getDefaultRadiusClass() {
-        if (RADIUS_VALUES.includes(this.radius)) {
-            return `designbase-wc-button--radius-${this.radius}`;
-        }
-        const size = SIZES.includes(this.size) ? this.size : 'm';
-        const radiusBySize = size === 's' || size === 'l' ? size : 'm';
-        return `designbase-wc-button--radius-${radiusBySize}`;
-    }
-    syncRadius() {
-        RADIUS_VALUES.forEach((value) => this.classList.remove(`designbase-wc-button--radius-${value}`));
-        this.classList.add(this.getDefaultRadiusClass());
-    }
-    syncAccentStyle() {
-        ACCENT_STYLES.forEach((style) => this.classList.remove(`designbase-wc-button--accent-${style}`));
-        if (this.variant !== 'accent')
-            return;
-        const raw = this.accentStyle;
-        const style = ACCENT_STYLES.includes(raw) ? raw : 'gradient';
-        this.classList.add(`designbase-wc-button--accent-${style}`);
-    }
-    syncAccentField() {
-        const useGradientField = this.variant === 'accent' && this.accentStyle === 'gradient';
-        const field = this.querySelector(':scope > .designbase-wc-button__accent-field');
-        const glass = this.querySelector(':scope > .designbase-wc-button__accent-glass');
-        if (!useGradientField) {
-            field?.remove();
-            glass?.remove();
-            return;
-        }
-        let accentField = field;
-        if (!accentField) {
-            accentField = document.createElement('span');
-            accentField.className = 'designbase-wc-button__accent-field';
-            accentField.setAttribute('aria-hidden', 'true');
-            for (let index = 1; index <= 5; index += 1) {
-                const orb = document.createElement('span');
-                orb.className = `designbase-wc-button__accent-orb designbase-wc-button__accent-orb--${index}`;
-                accentField.appendChild(orb);
-            }
-            this.insertBefore(accentField, this.firstChild);
-        }
-        if (!glass) {
-            const accentGlass = document.createElement('span');
-            accentGlass.className = 'designbase-wc-button__accent-glass';
-            accentGlass.setAttribute('aria-hidden', 'true');
-            accentField.insertAdjacentElement('afterend', accentGlass);
-        }
-    }
-    syncModifier(name, value) {
-        Array.from(this.classList)
-            .filter((className) => className.startsWith(`designbase-wc-button--${name}-`))
-            .forEach((className) => this.classList.remove(className));
-        if (name === 'variant' || name === 'size') {
-            const values = name === 'variant' ? VARIANTS : SIZES;
-            values.forEach((item) => this.classList.remove(`designbase-wc-button--${item}`));
-            this.classList.add(`designbase-wc-button--${value}`);
-        }
-    }
-    syncBooleanModifier(attribute) {
-        const className = `designbase-wc-button--${attribute}`;
-        this.classList.toggle(className, this.hasAttribute(attribute));
-    }
-    getSpinnerSize() {
-        return SIZES.includes(this.size) ? this.size : 'm';
-    }
-    syncLoadingVisual() {
-        this.classList.toggle('designbase-wc-button--loading', this.loading);
-        const spinnerHost = this.querySelector(':scope > .designbase-wc-button__spinner');
-        if (!this.loading) {
-            spinnerHost?.remove();
-            return;
-        }
-        const spinnerSize = this.getSpinnerSize();
-        const spinnerClassName = `designbase-wc-button__spinner designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${spinnerSize}`;
-        if (spinnerHost) {
-            spinnerHost.className = spinnerClassName;
-            spinnerHost.setAttribute('aria-hidden', 'true');
-            return;
-        }
-        const spinner = document.createElement('span');
-        spinner.className = spinnerClassName;
-        spinner.setAttribute('aria-hidden', 'true');
-        spinner.innerHTML = CIRCULAR_SPINNER_HTML;
-        this.insertBefore(spinner, this.firstChild);
-    }
-}
-if (!customElements.get('db-button')) {
-    customElements.define('db-button', DbButton);
-}
-
-export { DbButton };
+import{isDbIconName as t,createDbIcon as e}from"./db-icons.js";const s=["disabled","loading","icon-only","full-width"],i=["primary","secondary","tertiary","danger","ghost","accent"],n=["s","m","l"],a=["none","s","m","l","pill"],r=["gradient","backlight"];class DbButton extends HTMLElement{constructor(){super(...arguments),this.handleClick=t=>{if(this.disabled||this.loading)return t.preventDefault(),void t.stopPropagation();this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.disabled||this.loading||this.classList.add("designbase-wc-button--pressed"),this.click())},this.handleKeyUp=t=>{"Enter"!==t.key&&" "!==t.key||this.classList.remove("designbase-wc-button--pressed")},this.handlePointerDown=()=>{this.disabled||this.loading||this.classList.add("designbase-wc-button--pressed")},this.handlePointerUp=()=>{this.classList.remove("designbase-wc-button--pressed")}}static get observedAttributes(){return["variant","size","radius","accent-style","type","loading-text","start-icon","end-icon",...s]}get variant(){return this.getAttribute("variant")||"primary"}set variant(t){this.setAttribute("variant",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get radius(){return this.getAttribute("radius")||""}set radius(t){t?this.setAttribute("radius",t):this.removeAttribute("radius")}get accentStyle(){return this.getAttribute("accent-style")||"gradient"}set accentStyle(t){t?this.setAttribute("accent-style",t):this.removeAttribute("accent-style")}get type(){return this.getAttribute("type")||"button"}set type(t){this.setAttribute("type",t)}get loadingText(){return this.getAttribute("loading-text")||""}set loadingText(t){t?this.setAttribute("loading-text",t):this.removeAttribute("loading-text")}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get loading(){return this.hasAttribute("loading")}set loading(t){this.toggleAttribute("loading",t)}get iconOnly(){return this.hasAttribute("icon-only")}set iconOnly(t){this.toggleAttribute("icon-only",t)}get fullWidth(){return this.hasAttribute("full-width")}set fullWidth(t){this.toggleAttribute("full-width",t)}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("keyup",this.handleKeyUp),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointerleave",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp),this.syncAttributes()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("keyup",this.handleKeyUp),this.removeEventListener("pointerdown",this.handlePointerDown),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointerleave",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp)}attributeChangedCallback(){this.syncAttributes()}syncAttributes(){this.classList.add("designbase-wc-button"),this.setAttribute("role","button"),this.setAttribute("aria-disabled",String(this.disabled||this.loading)),this.disabled||this.loading?this.removeAttribute("tabindex"):this.hasAttribute("tabindex")||this.setAttribute("tabindex","0"),this.syncModifier("variant",this.variant),this.syncModifier("size",this.size),this.syncRadius(),this.syncAccentStyle(),this.syncAccentField(),this.syncBooleanModifier("disabled"),this.syncBooleanModifier("icon-only"),this.syncBooleanModifier("full-width"),this.syncLoadingVisual(),this.loading?(this.querySelector(":scope > .designbase-wc-button__start-icon")?.remove(),this.querySelector(":scope > .designbase-wc-button__end-icon")?.remove()):this.syncIcons()}getIconSize(){return"s"===this.size?16:"l"===this.size?24:20}resolveIconName(e){if(e&&t(e))return e}isManagedIconNode(t){return t instanceof HTMLElement&&(t.classList.contains("designbase-wc-button__start-icon")||t.classList.contains("designbase-wc-button__end-icon")||t.classList.contains("designbase-wc-button__spinner")||t.classList.contains("designbase-wc-button__accent-field")||t.classList.contains("designbase-wc-button__accent-glass")||t.classList.contains("designbase-wc-button__accent-orb"))}syncIcons(){const t=this.resolveIconName(this.getAttribute("start-icon")),s=this.resolveIconName(this.getAttribute("end-icon")),i=this.getIconSize();let n=this.querySelector(":scope > .designbase-wc-button__start-icon");if(t){if(!n){n=document.createElement("span"),n.className="designbase-wc-button__start-icon",n.setAttribute("aria-hidden","true");const t=Array.from(this.childNodes).find(t=>!this.isManagedIconNode(t));t?this.insertBefore(n,t):this.append(n)}n.replaceChildren(e(t,i))}else n?.remove();let a=this.querySelector(":scope > .designbase-wc-button__end-icon");s?(a||(a=document.createElement("span"),a.className="designbase-wc-button__end-icon",a.setAttribute("aria-hidden","true")),a.replaceChildren(e(s,i)),this.append(a)):a?.remove()}getDefaultRadiusClass(){if(a.includes(this.radius))return`designbase-wc-button--radius-${this.radius}`;const t=n.includes(this.size)?this.size:"m";return`designbase-wc-button--radius-${"s"===t||"l"===t?t:"m"}`}syncRadius(){a.forEach(t=>this.classList.remove(`designbase-wc-button--radius-${t}`)),this.classList.add(this.getDefaultRadiusClass())}syncAccentStyle(){if(r.forEach(t=>this.classList.remove(`designbase-wc-button--accent-${t}`)),"accent"!==this.variant)return;const t=this.accentStyle,e=r.includes(t)?t:"gradient";this.classList.add(`designbase-wc-button--accent-${e}`)}syncAccentField(){const t="accent"===this.variant&&"gradient"===this.accentStyle,e=this.querySelector(":scope > .designbase-wc-button__accent-field"),s=this.querySelector(":scope > .designbase-wc-button__accent-glass");if(!t)return e?.remove(),void s?.remove();let i=e;if(!i){i=document.createElement("span"),i.className="designbase-wc-button__accent-field",i.setAttribute("aria-hidden","true");for(let t=1;t<=5;t+=1){const e=document.createElement("span");e.className=`designbase-wc-button__accent-orb designbase-wc-button__accent-orb--${t}`,i.appendChild(e)}this.insertBefore(i,this.firstChild)}if(!s){const t=document.createElement("span");t.className="designbase-wc-button__accent-glass",t.setAttribute("aria-hidden","true"),i.insertAdjacentElement("afterend",t)}}syncModifier(t,e){if(Array.from(this.classList).filter(e=>e.startsWith(`designbase-wc-button--${t}-`)).forEach(t=>this.classList.remove(t)),"variant"===t||"size"===t){("variant"===t?i:n).forEach(t=>this.classList.remove(`designbase-wc-button--${t}`)),this.classList.add(`designbase-wc-button--${e}`)}}syncBooleanModifier(t){const e=`designbase-wc-button--${t}`;this.classList.toggle(e,this.hasAttribute(t))}getSpinnerSize(){return n.includes(this.size)?this.size:"m"}syncLoadingVisual(){this.classList.toggle("designbase-wc-button--loading",this.loading);const t=this.querySelector(":scope > .designbase-wc-button__spinner");if(!this.loading)return void t?.remove();const e=`designbase-wc-button__spinner designbase-wc-spinner designbase-wc-spinner--circular designbase-wc-spinner--${this.getSpinnerSize()}`;if(t)return t.className=e,void t.setAttribute("aria-hidden","true");const s=document.createElement("span");s.className=e,s.setAttribute("aria-hidden","true"),s.innerHTML='<svg class="designbase-wc-spinner__circular" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle class="designbase-wc-spinner__circular-track" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle><circle class="designbase-wc-spinner__circular-indicator" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"></circle></svg>',this.insertBefore(s,this.firstChild)}}customElements.get("db-button")||customElements.define("db-button",DbButton);export{DbButton};