@designbasekorea/ui-wc 0.5.6 → 0.6.1

package/dist/esm/components/db-progress-step.js

@@ -1,166 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-class DbProgressStep extends HTMLElement {
-    static get observedAttributes() {
-        return ['items', 'size', 'layout', 'current-step', 'clickable', 'full-width', 'disabled'];
-    }
-    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() {
-        this.render();
-    }
-    resolveStatus(index, item) {
-        const itemStatus = item.status ?? 'pending';
-        if (itemStatus !== 'pending')
-            return itemStatus;
-        const current = Number(this.getAttribute('current-step') || 0);
-        if (index < current)
-            return 'completed';
-        if (index === current)
-            return 'active';
-        return 'pending';
-    }
-    iconSize(size) {
-        if (size === 's')
-            return 12;
-        if (size === 'l')
-            return 20;
-        return 16;
-    }
-    renderIndicatorContent(status, index, size) {
-        const iconWrap = document.createElement('div');
-        iconWrap.className = 'designbase-wc-progress-step__icon';
-        if (status === 'completed') {
-            iconWrap.append(createDbIcon('done', this.iconSize(size)));
-        }
-        else if (status === 'error') {
-            iconWrap.append(createDbIcon('warning-filled', this.iconSize(size)));
-        }
-        else {
-            const number = document.createElement('span');
-            number.className = 'designbase-wc-progress-step__number';
-            number.textContent = String(index + 1);
-            iconWrap.append(number);
-        }
-        return iconWrap;
-    }
-    handleStepClick(item, index) {
-        const disabled = this.hasAttribute('disabled');
-        const clickable = this.hasAttribute('clickable');
-        if (disabled || item.disabled || !clickable)
-            return;
-        this.dispatchEvent(new CustomEvent('db-step-click', {
-            detail: { item, index },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    render() {
-        const size = this.getAttribute('size') || 'm';
-        const layout = this.getAttribute('layout') || 'horizontal';
-        const clickable = this.hasAttribute('clickable');
-        const disabled = this.hasAttribute('disabled');
-        const items = this.items;
-        this.className = [
-            'designbase-wc-progress-step',
-            `designbase-wc-progress-step--${size}`,
-            `designbase-wc-progress-step--${layout}`,
-            clickable && 'designbase-wc-progress-step--clickable',
-            this.hasAttribute('full-width') && 'designbase-wc-progress-step--full-width',
-            disabled && 'designbase-wc-progress-step--disabled',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.replaceChildren();
-        items.forEach((item, index) => {
-            const status = this.resolveStatus(index, item);
-            const isLast = index === items.length - 1;
-            const isClickable = clickable && !disabled && !item.disabled;
-            const prevStatus = index > 0 ? this.resolveStatus(index - 1, items[index - 1]) : 'pending';
-            const connectorStatus = prevStatus === 'completed' ? 'completed' : status;
-            const row = document.createElement('div');
-            row.className = [
-                'designbase-wc-progress-step__item',
-                `designbase-wc-progress-step__item--${status}`,
-                isClickable && 'designbase-wc-progress-step__item--clickable',
-                item.disabled && 'designbase-wc-progress-step__item--disabled',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            const indicatorContainer = document.createElement('div');
-            indicatorContainer.className = 'designbase-wc-progress-step__indicator-container';
-            const indicator = document.createElement('div');
-            indicator.className = 'designbase-wc-progress-step__indicator';
-            if (isClickable) {
-                indicator.tabIndex = 0;
-                indicator.setAttribute('role', 'button');
-                indicator.setAttribute('aria-label', `${item.title} 단계로 이동`);
-                indicator.addEventListener('click', () => this.handleStepClick(item, index));
-                indicator.addEventListener('keydown', (event) => {
-                    if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault();
-                        this.handleStepClick(item, index);
-                    }
-                });
-            }
-            else {
-                indicator.tabIndex = -1;
-            }
-            if (status === 'active') {
-                const pulse = document.createElement('div');
-                pulse.className = 'designbase-wc-progress-step__pulse';
-                indicator.append(pulse);
-            }
-            indicator.append(this.renderIndicatorContent(status, index, size));
-            indicatorContainer.append(indicator);
-            if (!isLast) {
-                const connector = document.createElement('div');
-                connector.className = [
-                    'designbase-wc-progress-step__connector',
-                    `designbase-wc-progress-step__connector--${connectorStatus}`,
-                ].join(' ');
-                indicatorContainer.append(connector);
-            }
-            row.append(indicatorContainer);
-            const content = document.createElement('div');
-            content.className = 'designbase-wc-progress-step__content';
-            const header = document.createElement('div');
-            header.className = 'designbase-wc-progress-step__header';
-            const title = document.createElement('h3');
-            title.className = 'designbase-wc-progress-step__title';
-            title.textContent = item.title;
-            header.append(title);
-            content.append(header);
-            if (item.description) {
-                const description = document.createElement('p');
-                description.className = 'designbase-wc-progress-step__description';
-                description.textContent = item.description;
-                content.append(description);
-            }
-            if (item.timestamp) {
-                const timestamp = document.createElement('span');
-                timestamp.className = 'designbase-wc-progress-step__timestamp';
-                timestamp.textContent = item.timestamp;
-                content.append(timestamp);
-            }
-            row.append(content);
-            this.append(row);
-        });
-    }
-}
-if (!customElements.get('db-progress-step'))
-    customElements.define('db-progress-step', DbProgressStep);
-
-export { DbProgressStep };
+import{createDbIcon as e}from"./db-icons.js";class DbProgressStep extends HTMLElement{static get observedAttributes(){return["items","size","layout","current-step","clickable","full-width","disabled"]}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()}attributeChangedCallback(){this.render()}resolveStatus(e,t){const s=t.status??"pending";if("pending"!==s)return s;const n=Number(this.getAttribute("current-step")||0);return e<n?"completed":e===n?"active":"pending"}iconSize(e){return"s"===e?12:"l"===e?20:16}renderIndicatorContent(t,s,n){const i=document.createElement("div");if(i.className="designbase-wc-progress-step__icon","completed"===t)i.append(e("done",this.iconSize(n)));else if("error"===t)i.append(e("warning-filled",this.iconSize(n)));else{const e=document.createElement("span");e.className="designbase-wc-progress-step__number",e.textContent=String(s+1),i.append(e)}return i}handleStepClick(e,t){const s=this.hasAttribute("disabled"),n=this.hasAttribute("clickable");s||e.disabled||!n||this.dispatchEvent(new CustomEvent("db-step-click",{detail:{item:e,index:t},bubbles:!0,composed:!0}))}render(){const e=this.getAttribute("size")||"m",t=this.getAttribute("layout")||"horizontal",s=this.hasAttribute("clickable"),n=this.hasAttribute("disabled"),i=this.items;this.className=["designbase-wc-progress-step",`designbase-wc-progress-step--${e}`,`designbase-wc-progress-step--${t}`,s&&"designbase-wc-progress-step--clickable",this.hasAttribute("full-width")&&"designbase-wc-progress-step--full-width",n&&"designbase-wc-progress-step--disabled"].filter(Boolean).join(" "),this.replaceChildren(),i.forEach((t,r)=>{const a=this.resolveStatus(r,t),c=r===i.length-1,d=s&&!n&&!t.disabled,o="completed"===(r>0?this.resolveStatus(r-1,i[r-1]):"pending")?"completed":a,p=document.createElement("div");p.className=["designbase-wc-progress-step__item",`designbase-wc-progress-step__item--${a}`,d&&"designbase-wc-progress-step__item--clickable",t.disabled&&"designbase-wc-progress-step__item--disabled"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-progress-step__indicator-container";const m=document.createElement("div");if(m.className="designbase-wc-progress-step__indicator",d?(m.tabIndex=0,m.setAttribute("role","button"),m.setAttribute("aria-label",`${t.title} 단계로 이동`),m.addEventListener("click",()=>this.handleStepClick(t,r)),m.addEventListener("keydown",e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleStepClick(t,r))})):m.tabIndex=-1,"active"===a){const e=document.createElement("div");e.className="designbase-wc-progress-step__pulse",m.append(e)}if(m.append(this.renderIndicatorContent(a,r,e)),l.append(m),!c){const e=document.createElement("div");e.className=["designbase-wc-progress-step__connector",`designbase-wc-progress-step__connector--${o}`].join(" "),l.append(e)}p.append(l);const b=document.createElement("div");b.className="designbase-wc-progress-step__content";const g=document.createElement("div");g.className="designbase-wc-progress-step__header";const u=document.createElement("h3");if(u.className="designbase-wc-progress-step__title",u.textContent=t.title,g.append(u),b.append(g),t.description){const e=document.createElement("p");e.className="designbase-wc-progress-step__description",e.textContent=t.description,b.append(e)}if(t.timestamp){const e=document.createElement("span");e.className="designbase-wc-progress-step__timestamp",e.textContent=t.timestamp,b.append(e)}p.append(b),this.append(p)})}}customElements.get("db-progress-step")||customElements.define("db-progress-step",DbProgressStep);export{DbProgressStep};

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

@@ -1,171 +1 @@
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'success', 'warning', 'danger'];
-const CIRCULAR_STYLES = ['default', 'minimal'];
-function getCircularMetrics(circularStyle, size) {
-    if (circularStyle === 'minimal') {
-        return { svgSize: 20, radius: 8, strokeWidth: 2, center: 10 };
-    }
-    switch (size) {
-        case 's':
-            return { svgSize: 64, radius: 26, strokeWidth: 4, center: 32 };
-        case 'l':
-            return { svgSize: 160, radius: 62, strokeWidth: 10, center: 80 };
-        default:
-            return { svgSize: 120, radius: 45, strokeWidth: 8, center: 60 };
-    }
-}
-function createSvgCircle(className, cx, cy, radius, strokeWidth, extras) {
-    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-    circle.setAttribute('class', className);
-    circle.setAttribute('cx', String(cx));
-    circle.setAttribute('cy', String(cy));
-    circle.setAttribute('r', String(radius));
-    circle.setAttribute('stroke-width', String(strokeWidth));
-    if (extras) {
-        Object.entries(extras).forEach(([key, value]) => circle.setAttribute(key, value));
-    }
-    return circle;
-}
-class DbProgress extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        // 재사용을 위한 DOM 참조 — 매 렌더마다 새로 만들지 않아야 width/offset 트랜지션이 부드럽다.
-        this.structureSignature = '';
-        this.circumference = 0;
-    }
-    static get observedAttributes() {
-        return ['value', 'max', 'size', 'variant', 'type', 'circular-style', 'show-value', 'animated', 'striped', 'glow', 'gradient'];
-    }
-    get value() {
-        return Number(this.getAttribute('value') || 0);
-    }
-    set value(value) {
-        this.setAttribute('value', String(value));
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    render() {
-        const max = Number(this.getAttribute('max') || 100);
-        const percentage = Math.min(Math.max((this.value / max) * 100, 0), 100);
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const type = this.getAttribute('type') || 'linear';
-        const circularStyle = this.getAttribute('circular-style') || 'default';
-        const resolvedSize = SIZES.includes(size) ? size : 'm';
-        const resolvedVariant = VARIANTS.includes(variant) ? variant : 'default';
-        const resolvedCircularStyle = CIRCULAR_STYLES.includes(circularStyle)
-            ? circularStyle
-            : 'default';
-        const showValue = this.hasAttribute('show-value');
-        this.className = [
-            'designbase-wc-progress',
-            `designbase-wc-progress--size-${resolvedSize}`,
-            `designbase-wc-progress--variant-${resolvedVariant}`,
-            `designbase-wc-progress--type-${type}`,
-            type === 'circular' && resolvedCircularStyle === 'minimal' ? 'designbase-wc-progress--circular-minimal' : '',
-            this.hasAttribute('animated') ? 'designbase-wc-progress--animated' : '',
-            this.hasAttribute('striped') ? 'designbase-wc-progress--striped' : '',
-            this.hasAttribute('gradient') ? 'designbase-wc-progress--gradient' : '',
-            this.hasAttribute('glow') ? 'designbase-wc-progress--glow' : '',
-        ].filter(Boolean).join(' ');
-        this.setAttribute('role', 'progressbar');
-        this.setAttribute('aria-valuemin', '0');
-        this.setAttribute('aria-valuemax', String(max));
-        this.setAttribute('aria-valuenow', String(this.value));
-        // 구조가 바뀔 때만 다시 만든다. 값만 바뀔 땐 in-place 업데이트로 트랜지션 유지.
-        const signature = [type, resolvedCircularStyle, resolvedSize, showValue ? '1' : '0'].join('|');
-        if (signature !== this.structureSignature) {
-            this.structureSignature = signature;
-            if (type === 'circular') {
-                this.buildCircular(resolvedCircularStyle, resolvedSize, showValue);
-            }
-            else {
-                this.buildLinear(showValue);
-            }
-        }
-        if (type === 'circular') {
-            this.updateCircular(percentage);
-        }
-        else {
-            this.updateLinear(percentage);
-        }
-    }
-    buildLinear(showValue) {
-        this.circularBarEl = undefined;
-        this.circularValueEl = undefined;
-        const linear = document.createElement('div');
-        linear.className = 'designbase-wc-progress__linear';
-        const track = document.createElement('div');
-        track.className = 'designbase-wc-progress__track';
-        const bar = document.createElement('div');
-        bar.className = 'designbase-wc-progress__bar';
-        track.append(bar);
-        linear.append(track);
-        this.barEl = bar;
-        if (showValue) {
-            const value = document.createElement('span');
-            value.className = 'designbase-wc-progress__value';
-            linear.append(value);
-            this.linearValueEl = value;
-        }
-        else {
-            this.linearValueEl = undefined;
-        }
-        this.replaceChildren(linear);
-    }
-    updateLinear(percentage) {
-        if (this.barEl)
-            this.barEl.style.width = `${percentage}%`;
-        if (this.linearValueEl)
-            this.linearValueEl.textContent = `${Math.round(percentage)}%`;
-    }
-    buildCircular(circularStyle, size, showValue) {
-        this.barEl = undefined;
-        this.linearValueEl = undefined;
-        const { svgSize, radius, strokeWidth, center } = getCircularMetrics(circularStyle, size);
-        this.circumference = 2 * Math.PI * radius;
-        const wrapper = document.createElement('div');
-        wrapper.className = 'designbase-wc-progress__circular';
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('class', 'designbase-wc-progress__circular-svg');
-        svg.setAttribute('width', String(svgSize));
-        svg.setAttribute('height', String(svgSize));
-        svg.setAttribute('viewBox', `0 0 ${svgSize} ${svgSize}`);
-        svg.setAttribute('aria-hidden', 'true');
-        const barCircle = createSvgCircle('designbase-wc-progress__circular-bar', center, center, radius, strokeWidth, {
-            'stroke-dasharray': String(this.circumference),
-            'stroke-dashoffset': String(this.circumference),
-            transform: `rotate(-90 ${center} ${center})`,
-        });
-        this.circularBarEl = barCircle;
-        svg.append(createSvgCircle('designbase-wc-progress__circular-track', center, center, radius, strokeWidth), barCircle);
-        wrapper.append(svg);
-        if (showValue && circularStyle !== 'minimal') {
-            const value = document.createElement('span');
-            value.className = 'designbase-wc-progress__circular-value';
-            wrapper.append(value);
-            this.circularValueEl = value;
-        }
-        else {
-            this.circularValueEl = undefined;
-        }
-        this.replaceChildren(wrapper);
-    }
-    updateCircular(percentage) {
-        if (this.circularBarEl) {
-            const offset = this.circumference - (percentage / 100) * this.circumference;
-            this.circularBarEl.setAttribute('stroke-dashoffset', String(offset));
-        }
-        if (this.circularValueEl)
-            this.circularValueEl.textContent = `${Math.round(percentage)}%`;
-    }
-}
-if (!customElements.get('db-progress')) {
-    customElements.define('db-progress', DbProgress);
-}
-
-export { DbProgress };
+const e=["s","m","l"],t=["default","success","warning","danger"],r=["default","minimal"];function createSvgCircle(e,t,r,s,i,a){const c=document.createElementNS("http://www.w3.org/2000/svg","circle");return c.setAttribute("class",e),c.setAttribute("cx",String(t)),c.setAttribute("cy",String(r)),c.setAttribute("r",String(s)),c.setAttribute("stroke-width",String(i)),a&&Object.entries(a).forEach(([e,t])=>c.setAttribute(e,t)),c}class DbProgress extends HTMLElement{constructor(){super(...arguments),this.structureSignature="",this.circumference=0}static get observedAttributes(){return["value","max","size","variant","type","circular-style","show-value","animated","striped","glow","gradient"]}get value(){return Number(this.getAttribute("value")||0)}set value(e){this.setAttribute("value",String(e))}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const s=Number(this.getAttribute("max")||100),i=Math.min(Math.max(this.value/s*100,0),100),a=this.getAttribute("size")||"m",c=this.getAttribute("variant")||"default",n=this.getAttribute("type")||"linear",u=this.getAttribute("circular-style")||"default",l=e.includes(a)?a:"m",d=t.includes(c)?c:"default",o=r.includes(u)?u:"default",g=this.hasAttribute("show-value");this.className=["designbase-wc-progress",`designbase-wc-progress--size-${l}`,`designbase-wc-progress--variant-${d}`,`designbase-wc-progress--type-${n}`,"circular"===n&&"minimal"===o?"designbase-wc-progress--circular-minimal":"",this.hasAttribute("animated")?"designbase-wc-progress--animated":"",this.hasAttribute("striped")?"designbase-wc-progress--striped":"",this.hasAttribute("gradient")?"designbase-wc-progress--gradient":"",this.hasAttribute("glow")?"designbase-wc-progress--glow":""].filter(Boolean).join(" "),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(s)),this.setAttribute("aria-valuenow",String(this.value));const h=[n,o,l,g?"1":"0"].join("|");h!==this.structureSignature&&(this.structureSignature=h,"circular"===n?this.buildCircular(o,l,g):this.buildLinear(g)),"circular"===n?this.updateCircular(i):this.updateLinear(i)}buildLinear(e){this.circularBarEl=void 0,this.circularValueEl=void 0;const t=document.createElement("div");t.className="designbase-wc-progress__linear";const r=document.createElement("div");r.className="designbase-wc-progress__track";const s=document.createElement("div");if(s.className="designbase-wc-progress__bar",r.append(s),t.append(r),this.barEl=s,e){const e=document.createElement("span");e.className="designbase-wc-progress__value",t.append(e),this.linearValueEl=e}else this.linearValueEl=void 0;this.replaceChildren(t)}updateLinear(e){this.barEl&&(this.barEl.style.width=`${e}%`),this.linearValueEl&&(this.linearValueEl.textContent=`${Math.round(e)}%`)}buildCircular(e,t,r){this.barEl=void 0,this.linearValueEl=void 0;const{svgSize:s,radius:i,strokeWidth:a,center:c}=function getCircularMetrics(e,t){if("minimal"===e)return{svgSize:20,radius:8,strokeWidth:2,center:10};switch(t){case"s":return{svgSize:64,radius:26,strokeWidth:4,center:32};case"l":return{svgSize:160,radius:62,strokeWidth:10,center:80};default:return{svgSize:120,radius:45,strokeWidth:8,center:60}}}(e,t);this.circumference=2*Math.PI*i;const n=document.createElement("div");n.className="designbase-wc-progress__circular";const u=document.createElementNS("http://www.w3.org/2000/svg","svg");u.setAttribute("class","designbase-wc-progress__circular-svg"),u.setAttribute("width",String(s)),u.setAttribute("height",String(s)),u.setAttribute("viewBox",`0 0 ${s} ${s}`),u.setAttribute("aria-hidden","true");const l=createSvgCircle("designbase-wc-progress__circular-bar",c,c,i,a,{"stroke-dasharray":String(this.circumference),"stroke-dashoffset":String(this.circumference),transform:`rotate(-90 ${c} ${c})`});if(this.circularBarEl=l,u.append(createSvgCircle("designbase-wc-progress__circular-track",c,c,i,a),l),n.append(u),r&&"minimal"!==e){const e=document.createElement("span");e.className="designbase-wc-progress__circular-value",n.append(e),this.circularValueEl=e}else this.circularValueEl=void 0;this.replaceChildren(n)}updateCircular(e){if(this.circularBarEl){const t=this.circumference-e/100*this.circumference;this.circularBarEl.setAttribute("stroke-dashoffset",String(t))}this.circularValueEl&&(this.circularValueEl.textContent=`${Math.round(e)}%`)}}customElements.get("db-progress")||customElements.define("db-progress",DbProgress);export{DbProgress};

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

@@ -1,72 +1 @@
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'primary', 'success', 'warning', 'danger'];
-const STYLES = ['solid', 'striped', 'animated'];
-class DbProgressbar extends HTMLElement {
-    static get observedAttributes() {
-        return ['value', 'min', 'max', 'size', 'variant', 'bar-style', 'show-label', 'label', 'label-position', 'full-width', 'disabled'];
-    }
-    connectedCallback() {
-        this.render();
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    render() {
-        const min = Number(this.getAttribute('min') || 0);
-        const max = Number(this.getAttribute('max') || 100);
-        const rawValue = Number(this.getAttribute('value') || 0);
-        const value = Math.max(min, Math.min(max, rawValue));
-        const percentage = max === min ? 0 : ((value - min) / (max - min)) * 100;
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const barStyle = this.getAttribute('bar-style') || 'solid';
-        const labelPosition = this.getAttribute('label-position') || 'top';
-        const showLabel = this.hasAttribute('show-label');
-        const label = this.getAttribute('label') || (showLabel ? `${Math.round(percentage)}%` : '');
-        const disabled = this.hasAttribute('disabled');
-        this.className = [
-            'designbase-wc-progressbar',
-            `designbase-wc-progressbar--${SIZES.includes(size) ? size : 'm'}`,
-            `designbase-wc-progressbar--${VARIANTS.includes(variant) ? variant : 'default'}`,
-            `designbase-wc-progressbar--${STYLES.includes(barStyle) ? barStyle : 'solid'}`,
-            this.hasAttribute('full-width') && 'designbase-wc-progressbar--full-width',
-            disabled && 'designbase-wc-progressbar--disabled',
-            percentage === 100 && 'designbase-wc-progressbar--completed',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.setAttribute('role', 'progressbar');
-        this.setAttribute('aria-valuemin', String(min));
-        this.setAttribute('aria-valuemax', String(max));
-        this.setAttribute('aria-valuenow', String(value));
-        if (label)
-            this.setAttribute('aria-label', label);
-        this.replaceChildren();
-        const container = document.createElement('div');
-        container.className = `designbase-wc-progressbar__container designbase-wc-progressbar__container--${labelPosition}`;
-        if (label && labelPosition !== 'inside') {
-            const labelEl = document.createElement('span');
-            labelEl.className = `designbase-wc-progressbar__label designbase-wc-progressbar__label--${labelPosition}`;
-            labelEl.textContent = label;
-            container.append(labelEl);
-        }
-        const track = document.createElement('div');
-        track.className = 'designbase-wc-progressbar__track';
-        const fill = document.createElement('div');
-        fill.className = 'designbase-wc-progressbar__fill';
-        fill.style.width = `${percentage}%`;
-        if (label && labelPosition === 'inside') {
-            const inside = document.createElement('span');
-            inside.className = 'designbase-wc-progressbar__fill-label';
-            inside.textContent = label;
-            fill.append(inside);
-        }
-        track.append(fill);
-        container.append(track);
-        this.append(container);
-    }
-}
-if (!customElements.get('db-progressbar'))
-    customElements.define('db-progressbar', DbProgressbar);
-
-export { DbProgressbar };
+const e=["s","m","l"],t=["default","primary","success","warning","danger"],s=["solid","striped","animated"];class DbProgressbar extends HTMLElement{static get observedAttributes(){return["value","min","max","size","variant","bar-style","show-label","label","label-position","full-width","disabled"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const a=Number(this.getAttribute("min")||0),r=Number(this.getAttribute("max")||100),i=Number(this.getAttribute("value")||0),n=Math.max(a,Math.min(r,i)),b=r===a?0:(n-a)/(r-a)*100,l=this.getAttribute("size")||"m",d=this.getAttribute("variant")||"default",o=this.getAttribute("bar-style")||"solid",c=this.getAttribute("label-position")||"top",g=this.hasAttribute("show-label"),u=this.getAttribute("label")||(g?`${Math.round(b)}%`:""),m=this.hasAttribute("disabled");this.className=["designbase-wc-progressbar",`designbase-wc-progressbar--${e.includes(l)?l:"m"}`,`designbase-wc-progressbar--${t.includes(d)?d:"default"}`,`designbase-wc-progressbar--${s.includes(o)?o:"solid"}`,this.hasAttribute("full-width")&&"designbase-wc-progressbar--full-width",m&&"designbase-wc-progressbar--disabled",100===b&&"designbase-wc-progressbar--completed"].filter(Boolean).join(" "),this.setAttribute("role","progressbar"),this.setAttribute("aria-valuemin",String(a)),this.setAttribute("aria-valuemax",String(r)),this.setAttribute("aria-valuenow",String(n)),u&&this.setAttribute("aria-label",u),this.replaceChildren();const p=document.createElement("div");if(p.className=`designbase-wc-progressbar__container designbase-wc-progressbar__container--${c}`,u&&"inside"!==c){const e=document.createElement("span");e.className=`designbase-wc-progressbar__label designbase-wc-progressbar__label--${c}`,e.textContent=u,p.append(e)}const h=document.createElement("div");h.className="designbase-wc-progressbar__track";const w=document.createElement("div");if(w.className="designbase-wc-progressbar__fill",w.style.width=`${b}%`,u&&"inside"===c){const e=document.createElement("span");e.className="designbase-wc-progressbar__fill-label",e.textContent=u,w.append(e)}h.append(w),p.append(h),this.append(p)}}customElements.get("db-progressbar")||customElements.define("db-progressbar",DbProgressbar);export{DbProgressbar};

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

@@ -1,172 +1 @@
-const SIZES = ['s', 'm', 'l'];
-class DbRadio extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.handleChange = () => {
-            if (!this.input || this.disabled || this.readOnly)
-                return;
-            const checked = this.input.checked;
-            this.toggleAttribute('checked', checked);
-            this.syncVisual();
-            this.syncClasses();
-            this.dispatchEvent(new CustomEvent('db-change', {
-                detail: {
-                    checked,
-                    selected: checked,
-                    value: this.getAttribute('value') || '',
-                },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'checked',
-            'selected',
-            'default-checked',
-            'default-selected',
-            'size',
-            'disabled',
-            'readonly',
-            'required',
-            'name',
-            'value',
-            'has-label',
-        ];
-    }
-    get checked() {
-        return this.input?.checked ?? (this.hasAttribute('checked') || this.hasAttribute('selected'));
-    }
-    set checked(value) {
-        this.toggleAttribute('checked', value);
-        if (this.input) {
-            this.input.checked = value;
-            this.syncVisual();
-            this.syncClasses();
-        }
-    }
-    get disabled() {
-        return this.hasAttribute('disabled');
-    }
-    set disabled(value) {
-        this.toggleAttribute('disabled', value);
-        if (this.input)
-            this.input.disabled = value;
-        this.syncClasses();
-    }
-    get readOnly() {
-        return this.hasAttribute('readonly');
-    }
-    set readOnly(value) {
-        this.toggleAttribute('readonly', value);
-        if (this.input)
-            this.input.readOnly = value;
-        this.syncClasses();
-    }
-    get required() {
-        return this.hasAttribute('required');
-    }
-    set required(value) {
-        this.toggleAttribute('required', value);
-        if (this.input)
-            this.input.required = value;
-    }
-    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(name) {
-        if (!this.built)
-            return;
-        if (name === 'checked' || name === 'selected') {
-            if (this.input) {
-                this.input.checked = this.hasAttribute('checked') || this.hasAttribute('selected');
-            }
-            this.syncVisual();
-            this.syncClasses();
-            return;
-        }
-        this.syncState();
-    }
-    get hasLabel() {
-        return !this.hasAttribute('has-label') || this.getAttribute('has-label') !== 'false';
-    }
-    build() {
-        this.root = document.createElement('label');
-        this.root.className = 'designbase-wc-radio';
-        this.input = document.createElement('input');
-        this.input.type = 'radio';
-        this.input.className = 'designbase-wc-radio__input';
-        this.visual = document.createElement('span');
-        this.visual.className = 'designbase-wc-radio__visual';
-        this.visual.setAttribute('aria-hidden', 'true');
-        this.dot = document.createElement('span');
-        this.dot.className = 'designbase-wc-radio__dot';
-        this.visual.appendChild(this.dot);
-        this.labelEl = document.createElement('span');
-        this.labelEl.className = 'designbase-wc-radio__label';
-        while (this.firstChild) {
-            this.labelEl.appendChild(this.firstChild);
-        }
-        this.root.append(this.input, this.visual, this.labelEl);
-        this.appendChild(this.root);
-        this.input.addEventListener('change', this.handleChange);
-        this.built = true;
-    }
-    syncState() {
-        if (!this.root || !this.input || !this.visual)
-            return;
-        const checked = this.hasAttribute('checked')
-            || this.hasAttribute('selected')
-            || (!this.hasAttribute('checked')
-                && !this.hasAttribute('selected')
-                && (this.hasAttribute('default-checked') || this.hasAttribute('default-selected')));
-        this.input.checked = checked;
-        this.input.disabled = this.disabled;
-        this.input.readOnly = this.readOnly;
-        this.input.required = this.required;
-        this.input.name = this.getAttribute('name') || '';
-        this.input.value = this.getAttribute('value') || '';
-        if (this.hasLabel) {
-            this.labelEl?.removeAttribute('hidden');
-        }
-        else {
-            this.labelEl?.setAttribute('hidden', '');
-        }
-        this.syncVisual();
-        this.syncClasses();
-    }
-    syncVisual() {
-        // Dot stays in DOM; visibility is controlled via --selected CSS.
-    }
-    syncClasses() {
-        if (!this.root || !this.input)
-            return;
-        const size = SIZES.includes(this.size) ? this.size : 'm';
-        const hasLabelText = this.hasLabel && Boolean(this.labelEl?.textContent?.trim());
-        this.root.className = [
-            'designbase-wc-radio',
-            `designbase-wc-radio--${size}`,
-            this.input.checked && 'designbase-wc-radio--selected',
-            this.disabled && 'designbase-wc-radio--disabled',
-            this.readOnly && 'designbase-wc-radio--readonly',
-            !hasLabelText && 'designbase-wc-radio--no-label',
-        ].filter(Boolean).join(' ');
-    }
-}
-if (!customElements.get('db-radio')) {
-    customElements.define('db-radio', DbRadio);
-}
-
-export { DbRadio };
+const t=["s","m","l"];class DbRadio extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.handleChange=()=>{if(!this.input||this.disabled||this.readOnly)return;const t=this.input.checked;this.toggleAttribute("checked",t),this.syncVisual(),this.syncClasses(),this.dispatchEvent(new CustomEvent("db-change",{detail:{checked:t,selected:t,value:this.getAttribute("value")||""},bubbles:!0,composed:!0}))}}static get observedAttributes(){return["checked","selected","default-checked","default-selected","size","disabled","readonly","required","name","value","has-label"]}get checked(){return this.input?.checked??(this.hasAttribute("checked")||this.hasAttribute("selected"))}set checked(t){this.toggleAttribute("checked",t),this.input&&(this.input.checked=t,this.syncVisual(),this.syncClasses())}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t),this.input&&(this.input.disabled=t),this.syncClasses()}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t),this.input&&(this.input.readOnly=t),this.syncClasses()}get required(){return this.hasAttribute("required")}set required(t){this.toggleAttribute("required",t),this.input&&(this.input.required=t)}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(t){if(this.built)return"checked"===t||"selected"===t?(this.input&&(this.input.checked=this.hasAttribute("checked")||this.hasAttribute("selected")),this.syncVisual(),void this.syncClasses()):void this.syncState()}get hasLabel(){return!this.hasAttribute("has-label")||"false"!==this.getAttribute("has-label")}build(){for(this.root=document.createElement("label"),this.root.className="designbase-wc-radio",this.input=document.createElement("input"),this.input.type="radio",this.input.className="designbase-wc-radio__input",this.visual=document.createElement("span"),this.visual.className="designbase-wc-radio__visual",this.visual.setAttribute("aria-hidden","true"),this.dot=document.createElement("span"),this.dot.className="designbase-wc-radio__dot",this.visual.appendChild(this.dot),this.labelEl=document.createElement("span"),this.labelEl.className="designbase-wc-radio__label";this.firstChild;)this.labelEl.appendChild(this.firstChild);this.root.append(this.input,this.visual,this.labelEl),this.appendChild(this.root),this.input.addEventListener("change",this.handleChange),this.built=!0}syncState(){if(!this.root||!this.input||!this.visual)return;const t=this.hasAttribute("checked")||this.hasAttribute("selected")||!this.hasAttribute("checked")&&!this.hasAttribute("selected")&&(this.hasAttribute("default-checked")||this.hasAttribute("default-selected"));this.input.checked=t,this.input.disabled=this.disabled,this.input.readOnly=this.readOnly,this.input.required=this.required,this.input.name=this.getAttribute("name")||"",this.input.value=this.getAttribute("value")||"",this.hasLabel?this.labelEl?.removeAttribute("hidden"):this.labelEl?.setAttribute("hidden",""),this.syncVisual(),this.syncClasses()}syncVisual(){}syncClasses(){if(!this.root||!this.input)return;const e=t.includes(this.size)?this.size:"m",s=this.hasLabel&&Boolean(this.labelEl?.textContent?.trim());this.root.className=["designbase-wc-radio",`designbase-wc-radio--${e}`,this.input.checked&&"designbase-wc-radio--selected",this.disabled&&"designbase-wc-radio--disabled",this.readOnly&&"designbase-wc-radio--readonly",!s&&"designbase-wc-radio--no-label"].filter(Boolean).join(" ")}}customElements.get("db-radio")||customElements.define("db-radio",DbRadio);export{DbRadio};