@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

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

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

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