@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

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

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

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

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

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

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

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