@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,174 @@
-import{isDbIconName as e,createDbIcon as t}from"./db-icons.js";const i="designbase-wc-timeline";class DbTimeline extends HTMLElement{static get observedAttributes(){return["items","type","variant","size","color","clickable","full-width","disabled"]}connectedCallback(){this.style.display="block",this.render()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}getItemPosition(e){return"left"===(this.getAttribute("type")||"alternate")||e%2==0?"left":"right"}handleItemClick(e,t){this.hasAttribute("disabled")||e.disabled||!this.hasAttribute("clickable")||this.dispatchEvent(new CustomEvent("db-item-click",{bubbles:!0,composed:!0,detail:{item:e,index:t}}))}render(){const n=this.getAttribute("type")||"alternate",s=this.getAttribute("variant")||"default",a=this.getAttribute("size")||"m",l=this.getAttribute("color")||"primary",c=this.hasAttribute("clickable"),d=this.hasAttribute("disabled"),o=this.items;this.className=[i,`${i}--${n}`,`${i}--${s}`,`${i}--${a}`,c&&`${i}--clickable`,this.hasAttribute("full-width")&&`${i}--full-width`,d&&`${i}--disabled`].filter(Boolean).join(" "),this.replaceChildren();const r=document.createElement("div");r.className=`${i}__container`,o.forEach((n,m)=>{const b=this.getItemPosition(m),u=m===o.length-1,p=c&&!d&&!n.disabled,h=n.color||l,_=n.status||"pending",$=document.createElement("div");$.className=[`${i}__item`,`${i}__item--${b}`,`${i}__item--${h}`,p&&`${i}__item--clickable`,n.disabled&&`${i}__item--disabled`].filter(Boolean).join(" ");const v=document.createElement("div");if(v.className=`${i}__indicator-container`,"active"===_&&!n.icon&&void 0===n.number){const e=document.createElement("div");e.className=`${i}__pulse`,v.append(e)}const E=document.createElement("div");if(E.className=[`${i}__dot`,`${i}__dot--${h}`,`${i}__dot--${s}`,`${i}__dot--${_}`,p&&`${i}__dot--clickable`,n.icon&&`${i}__dot--with-icon`,void 0!==n.number&&!n.icon&&`${i}__dot--with-number`].filter(Boolean).join(" "),p&&(E.tabIndex=0,E.setAttribute("role","button"),E.setAttribute("aria-label",n.title?`${n.title} 타임라인 점`:`타임라인 점 ${m+1}`),E.addEventListener("click",()=>this.handleItemClick(n,m)),E.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleItemClick(n,m))})),n.icon&&e(n.icon)){const e=document.createElement("div");e.className=`${i}__icon`,e.append(t(n.icon,"s"===a?14:"l"===a?20:16)),E.append(e)}else if(void 0!==n.number){const e=document.createElement("span");e.className=`${i}__number`,e.textContent=String(n.number),E.append(e)}if(v.append(E),!u){const e=document.createElement("div");e.className=`${i}__connector`,v.append(e)}const f=document.createElement("div");if(f.className=[`${i}__content`,`${i}__content--${b}`].join(" "),n.timestamp){const e=document.createElement("div");e.className=`${i}__timestamp`,e.textContent=n.timestamp,f.append(e)}const k=document.createElement("div");if(k.className=`${i}__content-inner`,p&&(k.tabIndex=0,k.setAttribute("role","button"),k.setAttribute("aria-label",n.title?`${n.title} 타임라인 아이템`:`타임라인 아이템 ${m+1}`),k.addEventListener("click",()=>this.handleItemClick(n,m)),k.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleItemClick(n,m))})),n.title){const e=document.createElement("h3");e.className=`${i}__title`,e.textContent=n.title,k.append(e)}if(n.description){const e=document.createElement("p");e.className=`${i}__description`,e.textContent=n.description,k.append(e)}f.append(k),$.append(v,f),r.append($)}),this.append(r)}}customElements.get("db-timeline")||customElements.define("db-timeline",DbTimeline);export{DbTimeline};
+import { isDbIconName, createDbIcon } from './db-icons.js';
+
+const CLASS = 'designbase-wc-timeline';
+class DbTimeline extends HTMLElement {
+    static get observedAttributes() {
+        return ['items', 'type', 'variant', 'size', 'color', 'clickable', 'full-width', 'disabled'];
+    }
+    connectedCallback() {
+        this.style.display = 'block';
+        this.render();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.render();
+    }
+    get items() {
+        try {
+            return JSON.parse(this.getAttribute('items') || '[]');
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
+    }
+    getItemPosition(index) {
+        const type = this.getAttribute('type') || 'alternate';
+        if (type === 'left')
+            return 'left';
+        return index % 2 === 0 ? 'left' : 'right';
+    }
+    handleItemClick(item, index) {
+        if (this.hasAttribute('disabled') || item.disabled || !this.hasAttribute('clickable'))
+            return;
+        this.dispatchEvent(new CustomEvent('db-item-click', {
+            bubbles: true,
+            composed: true,
+            detail: { item, index },
+        }));
+    }
+    render() {
+        const type = this.getAttribute('type') || 'alternate';
+        const variant = this.getAttribute('variant') || 'default';
+        const size = this.getAttribute('size') || 'm';
+        const color = this.getAttribute('color') || 'primary';
+        const clickable = this.hasAttribute('clickable');
+        const disabled = this.hasAttribute('disabled');
+        const items = this.items;
+        this.className = [
+            CLASS,
+            `${CLASS}--${type}`,
+            `${CLASS}--${variant}`,
+            `${CLASS}--${size}`,
+            clickable && `${CLASS}--clickable`,
+            this.hasAttribute('full-width') && `${CLASS}--full-width`,
+            disabled && `${CLASS}--disabled`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.replaceChildren();
+        const container = document.createElement('div');
+        container.className = `${CLASS}__container`;
+        items.forEach((item, index) => {
+            const itemPosition = this.getItemPosition(index);
+            const isLast = index === items.length - 1;
+            const isClickable = clickable && !disabled && !item.disabled;
+            const itemColor = item.color || color;
+            const itemStatus = item.status || 'pending';
+            const itemEl = document.createElement('div');
+            itemEl.className = [
+                `${CLASS}__item`,
+                `${CLASS}__item--${itemPosition}`,
+                `${CLASS}__item--${itemColor}`,
+                isClickable && `${CLASS}__item--clickable`,
+                item.disabled && `${CLASS}__item--disabled`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            const indicatorContainer = document.createElement('div');
+            indicatorContainer.className = `${CLASS}__indicator-container`;
+            if (itemStatus === 'active' && !item.icon && item.number === undefined) {
+                const pulse = document.createElement('div');
+                pulse.className = `${CLASS}__pulse`;
+                indicatorContainer.append(pulse);
+            }
+            const dot = document.createElement('div');
+            dot.className = [
+                `${CLASS}__dot`,
+                `${CLASS}__dot--${itemColor}`,
+                `${CLASS}__dot--${variant}`,
+                `${CLASS}__dot--${itemStatus}`,
+                isClickable && `${CLASS}__dot--clickable`,
+                item.icon && `${CLASS}__dot--with-icon`,
+                item.number !== undefined && !item.icon && `${CLASS}__dot--with-number`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            if (isClickable) {
+                dot.tabIndex = 0;
+                dot.setAttribute('role', 'button');
+                dot.setAttribute('aria-label', item.title ? `${item.title} 타임라인 점` : `타임라인 점 ${index + 1}`);
+                dot.addEventListener('click', () => this.handleItemClick(item, index));
+                dot.addEventListener('keydown', (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        this.handleItemClick(item, index);
+                    }
+                });
+            }
+            if (item.icon && isDbIconName(item.icon)) {
+                const iconWrap = document.createElement('div');
+                iconWrap.className = `${CLASS}__icon`;
+                iconWrap.append(createDbIcon(item.icon, size === 's' ? 14 : size === 'l' ? 20 : 16));
+                dot.append(iconWrap);
+            }
+            else if (item.number !== undefined) {
+                const number = document.createElement('span');
+                number.className = `${CLASS}__number`;
+                number.textContent = String(item.number);
+                dot.append(number);
+            }
+            indicatorContainer.append(dot);
+            if (!isLast) {
+                const connector = document.createElement('div');
+                connector.className = `${CLASS}__connector`;
+                indicatorContainer.append(connector);
+            }
+            const content = document.createElement('div');
+            content.className = [`${CLASS}__content`, `${CLASS}__content--${itemPosition}`].join(' ');
+            if (item.timestamp) {
+                const timestamp = document.createElement('div');
+                timestamp.className = `${CLASS}__timestamp`;
+                timestamp.textContent = item.timestamp;
+                content.append(timestamp);
+            }
+            const contentInner = document.createElement('div');
+            contentInner.className = `${CLASS}__content-inner`;
+            if (isClickable) {
+                contentInner.tabIndex = 0;
+                contentInner.setAttribute('role', 'button');
+                contentInner.setAttribute('aria-label', item.title ? `${item.title} 타임라인 아이템` : `타임라인 아이템 ${index + 1}`);
+                contentInner.addEventListener('click', () => this.handleItemClick(item, index));
+                contentInner.addEventListener('keydown', (event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        this.handleItemClick(item, index);
+                    }
+                });
+            }
+            if (item.title) {
+                const title = document.createElement('h3');
+                title.className = `${CLASS}__title`;
+                title.textContent = item.title;
+                contentInner.append(title);
+            }
+            if (item.description) {
+                const description = document.createElement('p');
+                description.className = `${CLASS}__description`;
+                description.textContent = item.description;
+                contentInner.append(description);
+            }
+            content.append(contentInner);
+            itemEl.append(indicatorContainer, content);
+            container.append(itemEl);
+        });
+        this.append(container);
+    }
+}
+if (!customElements.get('db-timeline')) {
+    customElements.define('db-timeline', DbTimeline);
+}
+
+export { DbTimeline };

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

@@ -1 +1,158 @@
-import{createDbIcon as t}from"./db-icons.js";class DbToast extends HTMLElement{constructor(){super(...arguments),this.timeoutId=null,this.progressInterval=null,this.closeTimerId=null,this.closed=!1}static get observedAttributes(){return["toast-id","status","title","description","duration","show-close","show-progress","auto-remove"]}connectedCallback(){this.closed=!1,this.render(),this.startTimers(),requestAnimationFrame(()=>this.classList.add("designbase-wc-toast--visible"))}disconnectedCallback(){this.clearTimers(),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=null}attributeChangedCallback(t){if(!this.isConnected||this.closed)return;const e=this.classList.contains("designbase-wc-toast--visible");this.render(),e&&requestAnimationFrame(()=>this.classList.add("designbase-wc-toast--visible")),"duration"!==t&&"show-progress"!==t||(this.clearTimers(),this.startTimers())}clearTimers(){this.timeoutId&&clearTimeout(this.timeoutId),this.progressInterval&&clearInterval(this.progressInterval),this.timeoutId=null,this.progressInterval=null}startTimers(){const t=Number(this.getAttribute("duration")??"5000");if(!Number.isFinite(t)||t<=0)return;if("false"!==this.getAttribute("show-progress")&&this.hasAttribute("show-progress")){const e=this.querySelector(".designbase-wc-toast__progress-bar");e&&(e.style.width="0%");const s=Date.now();return void(this.progressInterval=setInterval(()=>{const i=Date.now()-s,o=Math.min(100,i/t*100);e&&(e.style.width=`${o}%`),o>=100&&this.close()},16))}this.timeoutId=setTimeout(()=>this.close(),t)}close(){this.closed||(this.closed=!0,this.clearTimers(),this.classList.remove("designbase-wc-toast--visible"),this.classList.add("designbase-wc-toast--closing"),this.closeTimerId&&clearTimeout(this.closeTimerId),this.closeTimerId=setTimeout(()=>{this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0,detail:{id:this.getAttribute("toast-id")||""}}));("true"===this.getAttribute("auto-remove")||this.hasAttribute("auto-remove")&&"false"!==this.getAttribute("auto-remove"))&&this.remove()},300))}iconForStatus(t){return"success"===t?"circle-checked":"warning"===t?"warning-filled":"error"===t?"error-filled":"info-filled"}render(){const e=this.getAttribute("status")||"info",s=this.getAttribute("title")||"",i=this.getAttribute("description")||"",o="false"!==this.getAttribute("show-close"),r="false"!==this.getAttribute("show-progress")&&this.hasAttribute("show-progress");if(this.className=["designbase-wc-toast",`designbase-wc-toast--${e}`,this.closed&&"designbase-wc-toast--closing"].filter(Boolean).join(" "),this.setAttribute("role","alert"),this.setAttribute("aria-live","assertive"),this.replaceChildren(),r){const t=document.createElement("div");t.className="designbase-wc-toast__progress";const e=document.createElement("div");e.className="designbase-wc-toast__progress-bar",e.style.width="0%",t.append(e),this.append(t)}const a=document.createElement("div");a.className=`designbase-wc-toast__icon designbase-wc-toast__icon--${e}`,a.append(t(this.iconForStatus(e),20));const n=document.createElement("div");n.className="designbase-wc-toast__content";const c=document.createElement("div");if(c.className="designbase-wc-toast__title",c.textContent=s,n.append(c),i){const t=document.createElement("div");t.className="designbase-wc-toast__description",t.textContent=i,n.append(t)}if(this.append(a,n),o){const e=document.createElement("button");e.type="button",e.className="designbase-wc-toast__close-button",e.setAttribute("aria-label","토스트 닫기"),e.append(t("close",20)),e.addEventListener("click",()=>this.close()),this.append(e)}}}customElements.get("db-toast")||customElements.define("db-toast",DbToast);export{DbToast};
+import { createDbIcon } from './db-icons.js';
+
+const CLOSE_ANIMATION_MS = 300;
+class DbToast extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.timeoutId = null;
+        this.progressInterval = null;
+        this.closeTimerId = null;
+        this.closed = false;
+    }
+    static get observedAttributes() {
+        return ['toast-id', 'status', 'title', 'description', 'duration', 'show-close', 'show-progress', 'auto-remove'];
+    }
+    connectedCallback() {
+        this.closed = false;
+        this.render();
+        this.startTimers();
+        requestAnimationFrame(() => this.classList.add('designbase-wc-toast--visible'));
+    }
+    disconnectedCallback() {
+        this.clearTimers();
+        if (this.closeTimerId)
+            clearTimeout(this.closeTimerId);
+        this.closeTimerId = null;
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected || this.closed)
+            return;
+        const wasVisible = this.classList.contains('designbase-wc-toast--visible');
+        this.render();
+        if (wasVisible) {
+            requestAnimationFrame(() => this.classList.add('designbase-wc-toast--visible'));
+        }
+        if (name === 'duration' || name === 'show-progress') {
+            this.clearTimers();
+            this.startTimers();
+        }
+    }
+    clearTimers() {
+        if (this.timeoutId)
+            clearTimeout(this.timeoutId);
+        if (this.progressInterval)
+            clearInterval(this.progressInterval);
+        this.timeoutId = null;
+        this.progressInterval = null;
+    }
+    startTimers() {
+        const duration = Number(this.getAttribute('duration') ?? '5000');
+        if (!Number.isFinite(duration) || duration <= 0)
+            return;
+        const showProgress = this.getAttribute('show-progress') !== 'false' && this.hasAttribute('show-progress');
+        if (showProgress) {
+            const bar = this.querySelector('.designbase-wc-toast__progress-bar');
+            if (bar)
+                bar.style.width = '0%';
+            const start = Date.now();
+            this.progressInterval = setInterval(() => {
+                const elapsed = Date.now() - start;
+                const progress = Math.min(100, (elapsed / duration) * 100);
+                if (bar)
+                    bar.style.width = `${progress}%`;
+                if (progress >= 100)
+                    this.close();
+            }, 16);
+            return;
+        }
+        this.timeoutId = setTimeout(() => this.close(), duration);
+    }
+    /** 토스트를 닫고(애니메이션 포함) auto-remove 설정 시 DOM에서 제거합니다. */
+    close() {
+        if (this.closed)
+            return;
+        this.closed = true;
+        this.clearTimers();
+        this.classList.remove('designbase-wc-toast--visible');
+        this.classList.add('designbase-wc-toast--closing');
+        if (this.closeTimerId)
+            clearTimeout(this.closeTimerId);
+        this.closeTimerId = setTimeout(() => {
+            this.dispatchEvent(new CustomEvent('db-close', {
+                bubbles: true,
+                composed: true,
+                detail: { id: this.getAttribute('toast-id') || '' },
+            }));
+            const autoRemove = this.getAttribute('auto-remove') === 'true' ||
+                (this.hasAttribute('auto-remove') && this.getAttribute('auto-remove') !== 'false');
+            if (autoRemove) {
+                this.remove();
+            }
+        }, CLOSE_ANIMATION_MS);
+    }
+    iconForStatus(status) {
+        if (status === 'success')
+            return 'circle-checked';
+        if (status === 'warning')
+            return 'warning-filled';
+        if (status === 'error')
+            return 'error-filled';
+        return 'info-filled';
+    }
+    render() {
+        const status = this.getAttribute('status') || 'info';
+        const title = this.getAttribute('title') || '';
+        const description = this.getAttribute('description') || '';
+        const showClose = this.getAttribute('show-close') !== 'false';
+        const showProgress = this.getAttribute('show-progress') !== 'false' && this.hasAttribute('show-progress');
+        this.className = [
+            'designbase-wc-toast',
+            `designbase-wc-toast--${status}`,
+            this.closed && 'designbase-wc-toast--closing',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        this.setAttribute('role', 'alert');
+        this.setAttribute('aria-live', 'assertive');
+        this.replaceChildren();
+        if (showProgress) {
+            const progress = document.createElement('div');
+            progress.className = 'designbase-wc-toast__progress';
+            const bar = document.createElement('div');
+            bar.className = 'designbase-wc-toast__progress-bar';
+            bar.style.width = '0%';
+            progress.append(bar);
+            this.append(progress);
+        }
+        const icon = document.createElement('div');
+        icon.className = `designbase-wc-toast__icon designbase-wc-toast__icon--${status}`;
+        icon.append(createDbIcon(this.iconForStatus(status), 20));
+        const content = document.createElement('div');
+        content.className = 'designbase-wc-toast__content';
+        const titleEl = document.createElement('div');
+        titleEl.className = 'designbase-wc-toast__title';
+        titleEl.textContent = title;
+        content.append(titleEl);
+        if (description) {
+            const desc = document.createElement('div');
+            desc.className = 'designbase-wc-toast__description';
+            desc.textContent = description;
+            content.append(desc);
+        }
+        this.append(icon, content);
+        if (showClose) {
+            const close = document.createElement('button');
+            close.type = 'button';
+            close.className = 'designbase-wc-toast__close-button';
+            close.setAttribute('aria-label', '토스트 닫기');
+            close.append(createDbIcon('close', 20));
+            close.addEventListener('click', () => this.close());
+            this.append(close);
+        }
+    }
+}
+if (!customElements.get('db-toast')) {
+    customElements.define('db-toast', DbToast);
+}
+
+export { DbToast };

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

@@ -1 +1,162 @@
-const t=["s","m","l"];class DbToggle extends HTMLElement{constructor(){super(...arguments),this.internals=this.attachInternals(),this.built=!1,this.handleClick=()=>{if(this.disabled||this.readOnly)return;const t=!this.checked;this.toggleAttribute("checked",t),this.syncFormValue(),this.syncState(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","size","disabled","readonly","has-label","name","value"]}get checked(){return this.hasAttribute("checked")||this.hasAttribute("selected")}set checked(t){this.toggleAttribute("checked",t),this.syncFormValue(),this.syncClasses()}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.root&&(this.root.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.syncClasses()}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}connectedCallback(){this.style.display="contents",this.built||this.build(),this.syncState()}attributeChangedCallback(){this.built&&this.syncState()}formResetCallback(){const t=this.hasAttribute("default-checked")||this.hasAttribute("default-selected");this.toggleAttribute("checked",t),this.syncFormValue(),this.syncState()}formDisabledCallback(t){this.toggleAttribute("disabled",t),this.root&&(this.root.disabled=t),this.syncClasses()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}syncFormValue(){const t=this.hasAttribute("checked")||this.hasAttribute("selected");this.internals.setFormValue(t?this.getAttribute("value")||"on":null)}build(){this.root=document.createElement("button"),this.root.type="button",this.root.className="designbase-wc-toggle";const t=document.createElement("span");t.className="designbase-wc-toggle__track",t.setAttribute("aria-hidden","true");const e=document.createElement("span");for(e.className="designbase-wc-toggle__thumb",t.appendChild(e),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-toggle__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(t,this.labelEl),this.appendChild(this.root),this.root.addEventListener("click",this.handleClick),this.built=!0}syncState(){this.root&&(this.root.disabled=this.disabled,this.syncFormValue(),this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncClasses())}syncClasses(){if(!this.root)return;const e=t.includes(this.size)?this.size:"m",s=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim()),i=this.hasAttribute("checked")||this.hasAttribute("selected")||!this.hasAttribute("checked")&&!this.hasAttribute("selected")&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected"));this.root.className=["designbase-wc-toggle",`designbase-wc-toggle--${e}`,i&&"designbase-wc-toggle--selected",this.disabled&&"designbase-wc-toggle--disabled",this.readOnly&&"designbase-wc-toggle--readonly",!s&&"designbase-wc-toggle--no-label"].filter(Boolean).join(" "),this.root.setAttribute("aria-pressed",String(i))}}DbToggle.formAssociated=!0,customElements.get("db-toggle")||customElements.define("db-toggle",DbToggle);export{DbToggle};
+const SIZES = ['s', 'm', 'l'];
+class DbToggle extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.internals = this.attachInternals();
+        this.built = false;
+        this.handleClick = () => {
+            if (this.disabled || this.readOnly)
+                return;
+            const next = !this.checked;
+            this.toggleAttribute('checked', next);
+            this.syncFormValue();
+            this.syncState();
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+            this.dispatchEvent(new CustomEvent('db-change', {
+                detail: { checked: next, selected: next },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'checked',
+            'selected',
+            'default-checked',
+            'default-selected',
+            'size',
+            'disabled',
+            'readonly',
+            'has-label',
+            'name',
+            'value',
+        ];
+    }
+    get checked() {
+        return this.hasAttribute('checked') || this.hasAttribute('selected');
+    }
+    set checked(value) {
+        this.toggleAttribute('checked', value);
+        this.syncFormValue();
+        this.syncClasses();
+    }
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(value) {
+        this.setAttribute('name', value);
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        this.toggleAttribute('disabled', value);
+        if (this.root)
+            this.root.disabled = value;
+        this.syncClasses();
+    }
+    get readOnly() {
+        return this.hasAttribute('readonly');
+    }
+    set readOnly(value) {
+        this.toggleAttribute('readonly', value);
+        this.syncClasses();
+    }
+    get size() {
+        return this.getAttribute('size') || 'm';
+    }
+    set size(value) {
+        this.setAttribute('size', value);
+    }
+    connectedCallback() {
+        this.style.display = 'contents';
+        if (!this.built) {
+            this.build();
+        }
+        this.syncState();
+    }
+    attributeChangedCallback() {
+        if (!this.built)
+            return;
+        this.syncState();
+    }
+    formResetCallback() {
+        const defaultChecked = this.hasAttribute('default-checked') || this.hasAttribute('default-selected');
+        this.toggleAttribute('checked', defaultChecked);
+        this.syncFormValue();
+        this.syncState();
+    }
+    formDisabledCallback(disabled) {
+        this.toggleAttribute('disabled', disabled);
+        if (this.root)
+            this.root.disabled = disabled;
+        this.syncClasses();
+    }
+    get hasLabel() {
+        return !this.hasAttribute('has-label') || this.getAttribute('has-label') !== 'false';
+    }
+    syncFormValue() {
+        const checked = this.hasAttribute('checked') || this.hasAttribute('selected');
+        this.internals.setFormValue(checked ? (this.getAttribute('value') || 'on') : null);
+    }
+    build() {
+        this.root = document.createElement('button');
+        this.root.type = 'button';
+        this.root.className = 'designbase-wc-toggle';
+        const track = document.createElement('span');
+        track.className = 'designbase-wc-toggle__track';
+        track.setAttribute('aria-hidden', 'true');
+        const thumb = document.createElement('span');
+        thumb.className = 'designbase-wc-toggle__thumb';
+        track.appendChild(thumb);
+        this.labelEl = document.createElement('span');
+        this.labelEl.className = 'designbase-wc-toggle__label';
+        while (this.firstChild) {
+            this.labelEl.appendChild(this.firstChild);
+        }
+        this.root.append(track, this.labelEl);
+        this.appendChild(this.root);
+        this.root.addEventListener('click', this.handleClick);
+        this.built = true;
+    }
+    syncState() {
+        if (!this.root)
+            return;
+        this.root.disabled = this.disabled;
+        this.syncFormValue();
+        if (this.hasLabel) {
+            this.labelEl?.removeAttribute('hidden');
+        }
+        else {
+            this.labelEl?.setAttribute('hidden', '');
+        }
+        this.syncClasses();
+    }
+    syncClasses() {
+        if (!this.root)
+            return;
+        const size = SIZES.includes(this.size) ? this.size : 'm';
+        const hasLabelText = this.hasLabel && Boolean(this.labelEl?.textContent?.trim());
+        const checked = this.hasAttribute('checked')
+            || this.hasAttribute('selected')
+            || (!this.hasAttribute('checked')
+                && !this.hasAttribute('selected')
+                && (this.hasAttribute('default-checked') || this.hasAttribute('default-selected')));
+        this.root.className = [
+            'designbase-wc-toggle',
+            `designbase-wc-toggle--${size}`,
+            checked && 'designbase-wc-toggle--selected',
+            this.disabled && 'designbase-wc-toggle--disabled',
+            this.readOnly && 'designbase-wc-toggle--readonly',
+            !hasLabelText && 'designbase-wc-toggle--no-label',
+        ].filter(Boolean).join(' ');
+        this.root.setAttribute('aria-pressed', String(checked));
+    }
+}
+DbToggle.formAssociated = true;
+if (!customElements.get('db-toggle')) {
+    customElements.define('db-toggle', DbToggle);
+}
+
+export { DbToggle };

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

@@ -1 +1,94 @@
-class DbToolbar extends HTMLElement{static get observedAttributes(){return["items","size","variant","position","full-width","shadow","rounded","fixed"]}get items(){try{return JSON.parse(this.getAttribute("items")||"[]")}catch{return[]}}set items(t){this.setAttribute("items","string"==typeof t?t:JSON.stringify(t))}connectedCallback(){this.render()}attributeChangedCallback(t){"items"!==t?this.syncHostClasses():this.render()}syncHostClasses(){const t=this.getAttribute("size")||"m",e=this.getAttribute("variant")||"default",s=this.getAttribute("position")||"top";this.className=["designbase-wc-toolbar",`designbase-wc-toolbar--size-${t}`,`designbase-wc-toolbar--variant-${e}`,`designbase-wc-toolbar--position-${s}`,this.hasAttribute("full-width")&&"designbase-wc-toolbar--full-width",this.hasAttribute("fixed")&&"designbase-wc-toolbar--fixed",this.hasAttribute("shadow")&&"designbase-wc-toolbar--shadow",this.hasAttribute("rounded")&&"designbase-wc-toolbar--rounded"].filter(Boolean).join(" ")}render(){this.syncHostClasses(),this.setAttribute("role","toolbar");let t=this.querySelector(".designbase-wc-toolbar__content");t?t.replaceChildren():(t=document.createElement("div"),t.className="designbase-wc-toolbar__content",this.replaceChildren(t));const e=document.createElement("div");e.className="designbase-wc-toolbar__group",t.append(e),this.items.forEach(t=>{if("separator"===t.type){const t=document.createElement("div");return t.className="designbase-wc-toolbar__item designbase-wc-toolbar__item--separator",t.setAttribute("role","separator"),void e.append(t)}const s=document.createElement("button");s.type="button",s.className=["designbase-wc-toolbar__item","designbase-wc-toolbar__item--button",t.active&&"designbase-wc-toolbar__item--active",t.disabled&&"designbase-wc-toolbar__item--disabled"].filter(Boolean).join(" "),s.textContent=t.label||t.id,s.disabled=Boolean(t.disabled),t.tooltip&&(s.title=t.tooltip),s.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("db-item-click",{detail:{item:t},bubbles:!0,composed:!0}))}),e.append(s)})}}customElements.get("db-toolbar")||customElements.define("db-toolbar",DbToolbar);export{DbToolbar};
+class DbToolbar extends HTMLElement {
+    static get observedAttributes() {
+        return ['items', 'size', 'variant', 'position', 'full-width', 'shadow', 'rounded', 'fixed'];
+    }
+    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();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'items') {
+            this.render();
+            return;
+        }
+        this.syncHostClasses();
+    }
+    syncHostClasses() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const position = this.getAttribute('position') || 'top';
+        this.className = [
+            'designbase-wc-toolbar',
+            `designbase-wc-toolbar--size-${size}`,
+            `designbase-wc-toolbar--variant-${variant}`,
+            `designbase-wc-toolbar--position-${position}`,
+            this.hasAttribute('full-width') && 'designbase-wc-toolbar--full-width',
+            this.hasAttribute('fixed') && 'designbase-wc-toolbar--fixed',
+            this.hasAttribute('shadow') && 'designbase-wc-toolbar--shadow',
+            this.hasAttribute('rounded') && 'designbase-wc-toolbar--rounded',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    render() {
+        this.syncHostClasses();
+        this.setAttribute('role', 'toolbar');
+        let content = this.querySelector('.designbase-wc-toolbar__content');
+        if (!content) {
+            content = document.createElement('div');
+            content.className = 'designbase-wc-toolbar__content';
+            this.replaceChildren(content);
+        }
+        else {
+            content.replaceChildren();
+        }
+        const group = document.createElement('div');
+        group.className = 'designbase-wc-toolbar__group';
+        content.append(group);
+        this.items.forEach((item) => {
+            if (item.type === 'separator') {
+                const separator = document.createElement('div');
+                separator.className = 'designbase-wc-toolbar__item designbase-wc-toolbar__item--separator';
+                separator.setAttribute('role', 'separator');
+                group.append(separator);
+                return;
+            }
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = [
+                'designbase-wc-toolbar__item',
+                'designbase-wc-toolbar__item--button',
+                item.active && 'designbase-wc-toolbar__item--active',
+                item.disabled && 'designbase-wc-toolbar__item--disabled',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            button.textContent = item.label || item.id;
+            button.disabled = Boolean(item.disabled);
+            if (item.tooltip)
+                button.title = item.tooltip;
+            button.addEventListener('click', () => {
+                this.dispatchEvent(new CustomEvent('db-item-click', {
+                    detail: { item },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+            group.append(button);
+        });
+    }
+}
+if (!customElements.get('db-toolbar'))
+    customElements.define('db-toolbar', DbToolbar);
+
+export { DbToolbar };