@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

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

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

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

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

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

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

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