@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,218 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'minimal', 'card', 'colored', 'iconBox'];
-const LAYOUTS = ['horizontal', 'vertical', 'reverse'];
-const COLORS = ['primary', 'secondary', 'success', 'warning', 'error', 'info', 'custom'];
-const ICON_BOX_GLYPH_PX = {
-    s: 16,
-    m: 20,
-    l: 24,
-};
-class DbStat extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.handleClick = () => {
-            if (this.hasAttribute('disabled') || !this.hasAttribute('clickable'))
-                return;
-            this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
-        };
-        this.handleKeyDown = (e) => {
-            if (!this.hasAttribute('clickable') || this.hasAttribute('disabled'))
-                return;
-            if (e.key !== 'Enter' && e.key !== ' ')
-                return;
-            e.preventDefault();
-            this.handleClick();
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'value',
-            'label',
-            'icon',
-            'icon-position',
-            'size',
-            'variant',
-            'layout',
-            'color',
-            'custom-color',
-            'progress',
-            'show-progress',
-            'change',
-            'show-change',
-            'description',
-            'show-description',
-            'clickable',
-            'disabled',
-            'animated',
-        ];
-    }
-    connectedCallback() {
-        this.addEventListener('click', this.handleClick);
-        this.addEventListener('keydown', this.handleKeyDown);
-        this.render();
-    }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.handleClick);
-        this.removeEventListener('keydown', this.handleKeyDown);
-    }
-    attributeChangedCallback() {
-        this.render();
-    }
-    parseChange() {
-        const raw = this.getAttribute('change');
-        if (!raw)
-            return null;
-        try {
-            const parsed = JSON.parse(raw);
-            if (parsed && typeof parsed.value === 'number' && parsed.type)
-                return parsed;
-        }
-        catch {
-            // ignore
-        }
-        return null;
-    }
-    getChangeText(change) {
-        const sign = change.type === 'increase' ? '+' : '-';
-        const period = change.period ? ` ${change.period}` : '';
-        return `${sign}${Math.abs(change.value)}%${period}`;
-    }
-    resolveIconName(icon) {
-        if (!icon)
-            return undefined;
-        const icons = {
-            user: 1,
-            sparkle: 1,
-            award: 1,
-            bulb: 1,
-            edit: 1,
-            search: 1,
-        };
-        return icon in icons ? icon : undefined;
-    }
-    getProgressVariant(color) {
-        if (color === 'primary')
-            return 'primary';
-        if (color === 'success')
-            return 'success';
-        if (color === 'warning')
-            return 'warning';
-        if (color === 'error')
-            return 'danger';
-        return 'default';
-    }
-    render() {
-        const value = this.getAttribute('value') ?? '';
-        const label = this.getAttribute('label') || '';
-        const icon = this.getAttribute('icon') || '';
-        const iconPosition = this.getAttribute('icon-position') || 'left';
-        const rawSize = this.getAttribute('size') || 'm';
-        const size = SIZES.includes(rawSize) ? rawSize : 'm';
-        const rawVariant = this.getAttribute('variant') || 'default';
-        const variant = VARIANTS.includes(rawVariant) ? rawVariant : 'default';
-        const rawLayout = this.getAttribute('layout') || 'horizontal';
-        const layout = LAYOUTS.includes(rawLayout) ? rawLayout : 'horizontal';
-        const rawColor = this.getAttribute('color') || 'primary';
-        const color = COLORS.includes(rawColor) ? rawColor : 'primary';
-        const customColor = this.getAttribute('custom-color') || '';
-        const progressRaw = this.getAttribute('progress');
-        const progress = progressRaw !== null ? Number(progressRaw) : NaN;
-        const showProgress = this.hasAttribute('show-progress');
-        const change = this.parseChange();
-        const showChange = this.hasAttribute('show-change');
-        const description = this.getAttribute('description') || '';
-        const showDescription = this.hasAttribute('show-description');
-        const clickable = this.hasAttribute('clickable');
-        const disabled = this.hasAttribute('disabled');
-        const animated = this.hasAttribute('animated');
-        this.className = [
-            'designbase-wc-stat',
-            `designbase-wc-stat--size-${size}`,
-            `designbase-wc-stat--variant-${variant}`,
-            `designbase-wc-stat--layout-${layout}`,
-            `designbase-wc-stat--color-${color}`,
-            clickable && 'designbase-wc-stat--clickable',
-            disabled && 'designbase-wc-stat--disabled',
-            animated && 'designbase-wc-stat--animated',
-            showProgress && 'designbase-wc-stat--with-progress',
-            showChange && change && 'designbase-wc-stat--with-change',
-            showDescription && description && 'designbase-wc-stat--with-description',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        if (customColor) {
-            this.style.setProperty('--stat-color', customColor);
-        }
-        else {
-            this.style.removeProperty('--stat-color');
-        }
-        if (clickable && !disabled) {
-            this.setAttribute('role', 'button');
-            this.setAttribute('tabindex', '0');
-        }
-        else {
-            this.removeAttribute('role');
-            this.removeAttribute('tabindex');
-        }
-        this.replaceChildren();
-        const body = document.createElement('div');
-        body.className = 'designbase-wc-stat__body';
-        const iconName = this.resolveIconName(icon);
-        if (iconName) {
-            const iconEl = document.createElement('div');
-            iconEl.className = `designbase-wc-stat__icon designbase-wc-stat__icon--${iconPosition}`;
-            const glyphSize = variant === 'iconBox' ? ICON_BOX_GLYPH_PX[size] : 20;
-            iconEl.append(createDbIcon(iconName, glyphSize));
-            body.append(iconEl);
-        }
-        const content = document.createElement('div');
-        content.className = 'designbase-wc-stat__content';
-        const main = document.createElement('div');
-        main.className = 'designbase-wc-stat__main';
-        const labelEl = document.createElement('div');
-        labelEl.className = 'designbase-wc-stat__label';
-        labelEl.textContent = label;
-        const valueEl = document.createElement('div');
-        valueEl.className = 'designbase-wc-stat__value';
-        valueEl.textContent = String(value);
-        main.append(labelEl, valueEl);
-        content.append(main);
-        if (showChange && change) {
-            const changeEl = document.createElement('div');
-            changeEl.className = [
-                'designbase-wc-stat__change',
-                change.type === 'increase'
-                    ? 'designbase-wc-stat__change--increase'
-                    : 'designbase-wc-stat__change--decrease',
-            ].join(' ');
-            changeEl.textContent = this.getChangeText(change);
-            content.append(changeEl);
-        }
-        if (showDescription && description) {
-            const descEl = document.createElement('div');
-            descEl.className = 'designbase-wc-stat__description';
-            descEl.textContent = description;
-            content.append(descEl);
-        }
-        body.append(content);
-        this.append(body);
-        if (showProgress && !Number.isNaN(progress)) {
-            const clamped = Math.min(Math.max(progress, 0), 100);
-            const progressWrap = document.createElement('div');
-            progressWrap.className = 'designbase-wc-stat__progress';
-            const bar = document.createElement('db-progressbar');
-            bar.setAttribute('value', String(clamped));
-            bar.setAttribute('size', 's');
-            bar.setAttribute('variant', this.getProgressVariant(color));
-            bar.setAttribute('full-width', '');
-            progressWrap.append(bar);
-            this.append(progressWrap);
-        }
-    }
-}
-if (!customElements.get('db-stat'))
-    customElements.define('db-stat', DbStat);
-
-export { DbStat };
+import{createDbIcon as t}from"./db-icons.js";const e=["s","m","l"],s=["default","minimal","card","colored","iconBox"],i=["horizontal","vertical","reverse"],a=["primary","secondary","success","warning","error","info","custom"],n={s:16,m:20,l:24};class DbStat extends HTMLElement{constructor(){super(...arguments),this.handleClick=()=>{!this.hasAttribute("disabled")&&this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.handleKeyDown=t=>{this.hasAttribute("clickable")&&!this.hasAttribute("disabled")&&("Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleClick()))}}static get observedAttributes(){return["value","label","icon","icon-position","size","variant","layout","color","custom-color","progress","show-progress","change","show-change","description","show-description","clickable","disabled","animated"]}connectedCallback(){this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.render()}disconnectedCallback(){this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(){this.render()}parseChange(){const t=this.getAttribute("change");if(!t)return null;try{const e=JSON.parse(t);if(e&&"number"==typeof e.value&&e.type)return e}catch{}return null}getChangeText(t){const e="increase"===t.type?"+":"-",s=t.period?` ${t.period}`:"";return`${e}${Math.abs(t.value)}%${s}`}resolveIconName(t){if(!t)return;return t in{user:1,sparkle:1,award:1,bulb:1,edit:1,search:1}?t:void 0}getProgressVariant(t){return"primary"===t?"primary":"success"===t?"success":"warning"===t?"warning":"error"===t?"danger":"default"}render(){const r=this.getAttribute("value")??"",c=this.getAttribute("label")||"",o=this.getAttribute("icon")||"",d=this.getAttribute("icon-position")||"left",l=this.getAttribute("size")||"m",h=e.includes(l)?l:"m",b=this.getAttribute("variant")||"default",u=s.includes(b)?b:"default",g=this.getAttribute("layout")||"horizontal",m=i.includes(g)?g:"horizontal",p=this.getAttribute("color")||"primary",w=a.includes(p)?p:"primary",v=this.getAttribute("custom-color")||"",A=this.getAttribute("progress"),y=null!==A?Number(A):NaN,_=this.hasAttribute("show-progress"),k=this.parseChange(),E=this.hasAttribute("show-change"),f=this.getAttribute("description")||"",N=this.hasAttribute("show-description"),C=this.hasAttribute("clickable"),x=this.hasAttribute("disabled"),$=this.hasAttribute("animated");this.className=["designbase-wc-stat",`designbase-wc-stat--size-${h}`,`designbase-wc-stat--variant-${u}`,`designbase-wc-stat--layout-${m}`,`designbase-wc-stat--color-${w}`,C&&"designbase-wc-stat--clickable",x&&"designbase-wc-stat--disabled",$&&"designbase-wc-stat--animated",_&&"designbase-wc-stat--with-progress",E&&k&&"designbase-wc-stat--with-change",N&&f&&"designbase-wc-stat--with-description"].filter(Boolean).join(" "),v?this.style.setProperty("--stat-color",v):this.style.removeProperty("--stat-color"),C&&!x?(this.setAttribute("role","button"),this.setAttribute("tabindex","0")):(this.removeAttribute("role"),this.removeAttribute("tabindex")),this.replaceChildren();const z=document.createElement("div");z.className="designbase-wc-stat__body";const D=this.resolveIconName(o);if(D){const e=document.createElement("div");e.className=`designbase-wc-stat__icon designbase-wc-stat__icon--${d}`;const s="iconBox"===u?n[h]:20;e.append(t(D,s)),z.append(e)}const S=document.createElement("div");S.className="designbase-wc-stat__content";const L=document.createElement("div");L.className="designbase-wc-stat__main";const M=document.createElement("div");M.className="designbase-wc-stat__label",M.textContent=c;const P=document.createElement("div");if(P.className="designbase-wc-stat__value",P.textContent=String(r),L.append(M,P),S.append(L),E&&k){const t=document.createElement("div");t.className=["designbase-wc-stat__change","increase"===k.type?"designbase-wc-stat__change--increase":"designbase-wc-stat__change--decrease"].join(" "),t.textContent=this.getChangeText(k),S.append(t)}if(N&&f){const t=document.createElement("div");t.className="designbase-wc-stat__description",t.textContent=f,S.append(t)}if(z.append(S),this.append(z),_&&!Number.isNaN(y)){const t=Math.min(Math.max(y,0),100),e=document.createElement("div");e.className="designbase-wc-stat__progress";const s=document.createElement("db-progressbar");s.setAttribute("value",String(t)),s.setAttribute("size","s"),s.setAttribute("variant",this.getProgressVariant(w)),s.setAttribute("full-width",""),e.append(s),this.append(e)}}}customElements.get("db-stat")||customElements.define("db-stat",DbStat);export{DbStat};

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

@@ -1,398 +1 @@
-/**
- * Stepper Web Component
- */
-const CLASS = 'designbase-wc-stepper';
-const SIZES = ['s', 'm', 'l'];
-const MINUS_SVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>';
-const PLUS_SVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>';
-const VALUE_INPUT_APPEARANCE = {
-    display: 'block',
-    width: '100%',
-    minWidth: '0',
-    height: 'auto',
-    padding: '0',
-    margin: '0',
-    border: '0',
-    background: 'transparent',
-    color: 'inherit',
-    fontFamily: 'inherit',
-    fontWeight: '600',
-    lineHeight: '1',
-    textAlign: 'center',
-    outline: 'none',
-    boxShadow: 'none',
-    boxSizing: 'border-box',
-    appearance: 'none',
-};
-class DbStepper extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.decrementBtn = null;
-        this.incrementBtn = null;
-        this.valueWrapEl = null;
-        this.valueTextEl = null;
-        this.valueInputEl = null;
-        this.descriptionEl = null;
-        this.boundInputKeyDown = (e) => this.handleInputKeyDown(e);
-        this.boundInputInput = () => this.handleInputInput();
-        this.boundInputPaste = (e) => this.handleInputPaste(e);
-        this.boundInputBlur = () => this.commitInputValue();
-    }
-    static get observedAttributes() {
-        return ['value', 'min', 'max', 'step', 'size', 'editable', 'full-width', 'disabled', 'readonly'];
-    }
-    connectedCallback() {
-        if (!this.querySelector(`.${CLASS}__button`)) {
-            this.build();
-        }
-        this.syncFromAttributes();
-    }
-    attributeChangedCallback(name) {
-        if (!this.decrementBtn)
-            return;
-        if (name === 'editable' || name === 'disabled' || name === 'readonly') {
-            this.syncFromAttributes();
-            return;
-        }
-        this.syncFromAttributes();
-    }
-    get value() {
-        return Number(this.getAttribute('value') || 0);
-    }
-    set value(value) {
-        this.setAttribute('value', String(value));
-    }
-    build() {
-        this.decrementBtn = document.createElement('button');
-        this.decrementBtn.type = 'button';
-        this.decrementBtn.className = `${CLASS}__button ${CLASS}__button--decrement`;
-        this.decrementBtn.setAttribute('aria-label', '감소');
-        this.decrementBtn.innerHTML = MINUS_SVG;
-        this.valueWrapEl = document.createElement('div');
-        this.valueWrapEl.className = `${CLASS}__value`;
-        this.valueTextEl = document.createElement('span');
-        this.valueTextEl.className = `${CLASS}__value-text`;
-        this.valueWrapEl.appendChild(this.valueTextEl);
-        this.incrementBtn = document.createElement('button');
-        this.incrementBtn.type = 'button';
-        this.incrementBtn.className = `${CLASS}__button ${CLASS}__button--increment`;
-        this.incrementBtn.setAttribute('aria-label', '증가');
-        this.incrementBtn.innerHTML = PLUS_SVG;
-        this.descriptionEl = document.createElement('div');
-        this.descriptionEl.id = 'stepper-description';
-        this.descriptionEl.className = 'sr-only';
-        this.decrementBtn.addEventListener('click', () => this.change(this.value - this.getStep()));
-        this.incrementBtn.addEventListener('click', () => this.change(this.value + this.getStep()));
-        this.append(this.decrementBtn, this.valueWrapEl, this.incrementBtn, this.descriptionEl);
-    }
-    isEditable() {
-        if (this.hasAttribute('disabled') || this.hasAttribute('readonly')) {
-            return false;
-        }
-        return this.getAttribute('editable') !== 'false';
-    }
-    syncFromAttributes() {
-        const size = this.getAttribute('size') || 'm';
-        const disabled = this.hasAttribute('disabled');
-        const readOnly = this.hasAttribute('readonly');
-        const min = this.getMin();
-        const max = this.getMax();
-        const step = this.getStep();
-        const value = this.clamp(this.snapToStep(this.value));
-        if (this.getAttribute('value') !== String(value)) {
-            this.setAttribute('value', String(value));
-        }
-        this.className = [
-            CLASS,
-            `${CLASS}--${SIZES.includes(size) ? size : 'm'}`,
-            this.hasAttribute('full-width') && `${CLASS}--full-width`,
-            this.isEditable() && `${CLASS}--editable`,
-            disabled && `${CLASS}--disabled`,
-            readOnly && `${CLASS}--readonly`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        this.syncValueField(value);
-        if (this.descriptionEl) {
-            const editHint = this.isEditable() ? '값을 직접 입력할 수 있습니다. ' : '';
-            this.descriptionEl.textContent =
-                `${editHint}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: ${value}, 최소값: ${min}, 최대값: ${max}, 단계: ${step}`;
-        }
-        this.decrementBtn?.setAttribute('aria-describedby', 'stepper-description');
-        this.incrementBtn?.setAttribute('aria-describedby', 'stepper-description');
-        this.updateButtons();
-    }
-    applyValueInputAppearance() {
-        if (!this.valueInputEl)
-            return;
-        Object.assign(this.valueInputEl.style, VALUE_INPUT_APPEARANCE);
-        this.valueInputEl.style.setProperty('-webkit-appearance', 'none');
-        this.valueInputEl.style.setProperty('-moz-appearance', 'textfield');
-    }
-    syncValueField(value) {
-        if (!this.valueWrapEl)
-            return;
-        if (this.isEditable()) {
-            if (!this.valueInputEl) {
-                this.valueInputEl = document.createElement('input');
-                this.valueInputEl.className = `${CLASS}__value-input`;
-                this.valueInputEl.type = 'text';
-                this.valueInputEl.setAttribute('inputmode', this.allowsDecimal() ? 'decimal' : 'numeric');
-                this.valueInputEl.setAttribute('pattern', this.buildInputPattern());
-                this.valueInputEl.setAttribute('aria-label', '값 입력');
-                this.valueInputEl.autocomplete = 'off';
-                this.valueInputEl.spellcheck = false;
-                this.valueInputEl.addEventListener('keydown', this.boundInputKeyDown);
-                this.valueInputEl.addEventListener('input', this.boundInputInput);
-                this.valueInputEl.addEventListener('paste', this.boundInputPaste);
-                this.valueInputEl.addEventListener('blur', this.boundInputBlur);
-                this.applyValueInputAppearance();
-            }
-            this.applyValueInputAppearance();
-            this.valueInputEl.setAttribute('inputmode', this.allowsDecimal() ? 'decimal' : 'numeric');
-            this.valueInputEl.setAttribute('pattern', this.buildInputPattern());
-            this.valueInputEl.setAttribute('aria-valuemin', String(this.getMin()));
-            this.valueInputEl.setAttribute('aria-valuemax', String(this.getMax()));
-            this.valueInputEl.disabled = false;
-            if (document.activeElement !== this.valueInputEl) {
-                this.valueInputEl.value = String(value);
-            }
-            this.valueTextEl?.remove();
-            if (!this.valueWrapEl.contains(this.valueInputEl)) {
-                this.valueWrapEl.appendChild(this.valueInputEl);
-            }
-            return;
-        }
-        if (this.valueInputEl) {
-            this.valueInputEl.removeEventListener('keydown', this.boundInputKeyDown);
-            this.valueInputEl.removeEventListener('input', this.boundInputInput);
-            this.valueInputEl.removeEventListener('paste', this.boundInputPaste);
-            this.valueInputEl.removeEventListener('blur', this.boundInputBlur);
-            this.valueInputEl.remove();
-            this.valueInputEl = null;
-        }
-        if (!this.valueTextEl) {
-            this.valueTextEl = document.createElement('span');
-            this.valueTextEl.className = `${CLASS}__value-text`;
-        }
-        this.valueTextEl.textContent = String(value);
-        if (!this.valueWrapEl.contains(this.valueTextEl)) {
-            this.valueWrapEl.appendChild(this.valueTextEl);
-        }
-    }
-    allowsNegative() {
-        return this.getMin() < 0;
-    }
-    allowsDecimal() {
-        const step = this.getStep();
-        return !Number.isInteger(step);
-    }
-    buildInputPattern() {
-        const sign = this.allowsNegative() ? '-?' : '';
-        const fraction = this.allowsDecimal() ? '(\\.\\d*)?' : '';
-        return `^${sign}\\d*${fraction}$`;
-    }
-    sanitizeInputString(raw) {
-        let result = '';
-        let hasMinus = false;
-        let hasDot = false;
-        for (let i = 0; i < raw.length; i++) {
-            const ch = raw[i];
-            if (ch === '-' && this.allowsNegative() && result.length === 0 && !hasMinus) {
-                result += ch;
-                hasMinus = true;
-                continue;
-            }
-            if (ch === '.' && this.allowsDecimal() && !hasDot) {
-                result += ch;
-                hasDot = true;
-                continue;
-            }
-            if (/\d/.test(ch)) {
-                result += ch;
-            }
-        }
-        return result;
-    }
-    parseInputValue(raw) {
-        const trimmed = raw.trim();
-        if (trimmed === '' || trimmed === '-' || trimmed === '.')
-            return null;
-        const parsed = Number(trimmed);
-        return Number.isFinite(parsed) ? parsed : null;
-    }
-    enforceInputBounds(raw, options = {}) {
-        const sanitized = this.sanitizeInputString(raw);
-        const parsed = this.parseInputValue(sanitized);
-        if (parsed === null)
-            return sanitized;
-        const min = this.getMin();
-        const max = this.getMax();
-        if (parsed > max)
-            return String(max);
-        if (options.clampMin && parsed < min)
-            return String(min);
-        return sanitized;
-    }
-    handleInputKeyDown(e) {
-        const controlKeys = [
-            'Backspace',
-            'Delete',
-            'Tab',
-            'Escape',
-            'ArrowLeft',
-            'ArrowRight',
-            'Home',
-            'End',
-        ];
-        if (controlKeys.includes(e.key))
-            return;
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            this.commitInputValue();
-            this.valueInputEl?.blur();
-            return;
-        }
-        if (e.key === '-' && this.allowsNegative()) {
-            const input = this.valueInputEl;
-            if (input &&
-                input.selectionStart === 0 &&
-                input.selectionEnd === 0 &&
-                !input.value.includes('-')) {
-                return;
-            }
-        }
-        if (e.key === '.' && this.allowsDecimal() && !this.valueInputEl?.value.includes('.')) {
-            return;
-        }
-        if (/^\d$/.test(e.key))
-            return;
-        e.preventDefault();
-    }
-    handleInputInput() {
-        if (!this.valueInputEl)
-            return;
-        const next = this.enforceInputBounds(this.valueInputEl.value);
-        if (this.valueInputEl.value !== next) {
-            this.valueInputEl.value = next;
-        }
-    }
-    handleInputPaste(e) {
-        e.preventDefault();
-        if (!this.valueInputEl)
-            return;
-        const pasted = e.clipboardData?.getData('text') ?? '';
-        const merged = this.enforceInputBounds(this.sanitizeInputString(this.valueInputEl.value + pasted));
-        this.valueInputEl.value = merged;
-        this.handleInputInput();
-    }
-    commitInputValue() {
-        if (!this.valueInputEl || !this.isEditable())
-            return;
-        const raw = this.valueInputEl.value.trim();
-        if (raw === '' || raw === '-' || raw === '.') {
-            this.valueInputEl.value = String(this.value);
-            return;
-        }
-        const parsed = this.parseInputValue(raw);
-        if (parsed === null) {
-            this.valueInputEl.value = String(this.value);
-            return;
-        }
-        const normalized = this.snapToStep(parsed);
-        this.valueInputEl.value = String(normalized);
-        this.change(normalized);
-    }
-    getMin() {
-        return Number(this.getAttribute('min') ?? 0);
-    }
-    getMax() {
-        return Number(this.getAttribute('max') ?? 100);
-    }
-    getStep() {
-        return Number(this.getAttribute('step') ?? 1);
-    }
-    snapToStep(value) {
-        const step = this.getStep();
-        const stepped = Math.round(value / step) * step;
-        return this.clamp(stepped);
-    }
-    clamp(next) {
-        return Math.max(this.getMin(), Math.min(this.getMax(), next));
-    }
-    updateButtons() {
-        const min = this.getMin();
-        const max = this.getMax();
-        const disabled = this.hasAttribute('disabled');
-        const readOnly = this.hasAttribute('readonly');
-        const value = this.value;
-        const isMin = value <= min;
-        const isMax = value >= max;
-        if (this.decrementBtn) {
-            const decDisabled = disabled || readOnly || isMin;
-            this.decrementBtn.disabled = decDisabled;
-            this.decrementBtn.classList.toggle(`${CLASS}__button--disabled`, decDisabled);
-        }
-        if (this.incrementBtn) {
-            const incDisabled = disabled || readOnly || isMax;
-            this.incrementBtn.disabled = incDisabled;
-            this.incrementBtn.classList.toggle(`${CLASS}__button--disabled`, incDisabled);
-        }
-    }
-    change(next) {
-        if (this.hasAttribute('disabled') || this.hasAttribute('readonly'))
-            return;
-        const min = this.getMin();
-        const max = this.getMax();
-        const normalized = this.clamp(this.snapToStep(next));
-        const prev = this.value;
-        if (normalized === prev) {
-            if (this.valueInputEl) {
-                this.valueInputEl.value = String(normalized);
-            }
-            return;
-        }
-        this.setAttribute('value', String(normalized));
-        if (this.valueTextEl) {
-            this.valueTextEl.textContent = String(normalized);
-        }
-        if (this.valueInputEl) {
-            this.valueInputEl.value = String(normalized);
-        }
-        this.updateButtons();
-        if (this.descriptionEl) {
-            const step = this.getStep();
-            const editHint = this.isEditable() ? '값을 직접 입력할 수 있습니다. ' : '';
-            this.descriptionEl.textContent =
-                `${editHint}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: ${normalized}, 최소값: ${min}, 최대값: ${max}, 단계: ${step}`;
-        }
-        this.dispatchEvent(new CustomEvent('db-change', {
-            detail: {
-                value: normalized,
-                minReached: normalized <= min,
-                maxReached: normalized >= max,
-            },
-            bubbles: true,
-            composed: true,
-        }));
-        if (normalized <= min && prev > min) {
-            this.dispatchEvent(new CustomEvent('db-min-reached', {
-                bubbles: true,
-                composed: true,
-                detail: { value: normalized },
-            }));
-        }
-        if (normalized >= max && prev < max) {
-            this.dispatchEvent(new CustomEvent('db-max-reached', {
-                bubbles: true,
-                composed: true,
-                detail: { value: normalized },
-            }));
-        }
-    }
-}
-if (!customElements.get('db-stepper')) {
-    customElements.define('db-stepper', DbStepper);
-}
-
-export { DbStepper };
+const t="designbase-wc-stepper",e=["s","m","l"],i={display:"block",width:"100%",minWidth:"0",height:"auto",padding:"0",margin:"0",border:"0",background:"transparent",color:"inherit",fontFamily:"inherit",fontWeight:"600",lineHeight:"1",textAlign:"center",outline:"none",boxShadow:"none",boxSizing:"border-box",appearance:"none"};class DbStepper extends HTMLElement{constructor(){super(...arguments),this.decrementBtn=null,this.incrementBtn=null,this.valueWrapEl=null,this.valueTextEl=null,this.valueInputEl=null,this.descriptionEl=null,this.boundInputKeyDown=t=>this.handleInputKeyDown(t),this.boundInputInput=()=>this.handleInputInput(),this.boundInputPaste=t=>this.handleInputPaste(t),this.boundInputBlur=()=>this.commitInputValue()}static get observedAttributes(){return["value","min","max","step","size","editable","full-width","disabled","readonly"]}connectedCallback(){this.querySelector(`.${t}__button`)||this.build(),this.syncFromAttributes()}attributeChangedCallback(t){this.decrementBtn&&this.syncFromAttributes()}get value(){return Number(this.getAttribute("value")||0)}set value(t){this.setAttribute("value",String(t))}build(){this.decrementBtn=document.createElement("button"),this.decrementBtn.type="button",this.decrementBtn.className=`${t}__button ${t}__button--decrement`,this.decrementBtn.setAttribute("aria-label","감소"),this.decrementBtn.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>',this.valueWrapEl=document.createElement("div"),this.valueWrapEl.className=`${t}__value`,this.valueTextEl=document.createElement("span"),this.valueTextEl.className=`${t}__value-text`,this.valueWrapEl.appendChild(this.valueTextEl),this.incrementBtn=document.createElement("button"),this.incrementBtn.type="button",this.incrementBtn.className=`${t}__button ${t}__button--increment`,this.incrementBtn.setAttribute("aria-label","증가"),this.incrementBtn.innerHTML='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',this.descriptionEl=document.createElement("div"),this.descriptionEl.id="stepper-description",this.descriptionEl.className="sr-only",this.decrementBtn.addEventListener("click",()=>this.change(this.value-this.getStep())),this.incrementBtn.addEventListener("click",()=>this.change(this.value+this.getStep())),this.append(this.decrementBtn,this.valueWrapEl,this.incrementBtn,this.descriptionEl)}isEditable(){return!this.hasAttribute("disabled")&&!this.hasAttribute("readonly")&&"false"!==this.getAttribute("editable")}syncFromAttributes(){const i=this.getAttribute("size")||"m",n=this.hasAttribute("disabled"),s=this.hasAttribute("readonly"),l=this.getMin(),u=this.getMax(),a=this.getStep(),r=this.clamp(this.snapToStep(this.value));if(this.getAttribute("value")!==String(r)&&this.setAttribute("value",String(r)),this.className=[t,`${t}--${e.includes(i)?i:"m"}`,this.hasAttribute("full-width")&&`${t}--full-width`,this.isEditable()&&`${t}--editable`,n&&`${t}--disabled`,s&&`${t}--readonly`].filter(Boolean).join(" "),this.syncValueField(r),this.descriptionEl){const t=this.isEditable()?"값을 직접 입력할 수 있습니다. ":"";this.descriptionEl.textContent=`${t}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: ${r}, 최소값: ${l}, 최대값: ${u}, 단계: ${a}`}this.decrementBtn?.setAttribute("aria-describedby","stepper-description"),this.incrementBtn?.setAttribute("aria-describedby","stepper-description"),this.updateButtons()}applyValueInputAppearance(){this.valueInputEl&&(Object.assign(this.valueInputEl.style,i),this.valueInputEl.style.setProperty("-webkit-appearance","none"),this.valueInputEl.style.setProperty("-moz-appearance","textfield"))}syncValueField(e){if(this.valueWrapEl){if(this.isEditable())return this.valueInputEl||(this.valueInputEl=document.createElement("input"),this.valueInputEl.className=`${t}__value-input`,this.valueInputEl.type="text",this.valueInputEl.setAttribute("inputmode",this.allowsDecimal()?"decimal":"numeric"),this.valueInputEl.setAttribute("pattern",this.buildInputPattern()),this.valueInputEl.setAttribute("aria-label","값 입력"),this.valueInputEl.autocomplete="off",this.valueInputEl.spellcheck=!1,this.valueInputEl.addEventListener("keydown",this.boundInputKeyDown),this.valueInputEl.addEventListener("input",this.boundInputInput),this.valueInputEl.addEventListener("paste",this.boundInputPaste),this.valueInputEl.addEventListener("blur",this.boundInputBlur),this.applyValueInputAppearance()),this.applyValueInputAppearance(),this.valueInputEl.setAttribute("inputmode",this.allowsDecimal()?"decimal":"numeric"),this.valueInputEl.setAttribute("pattern",this.buildInputPattern()),this.valueInputEl.setAttribute("aria-valuemin",String(this.getMin())),this.valueInputEl.setAttribute("aria-valuemax",String(this.getMax())),this.valueInputEl.disabled=!1,document.activeElement!==this.valueInputEl&&(this.valueInputEl.value=String(e)),this.valueTextEl?.remove(),void(this.valueWrapEl.contains(this.valueInputEl)||this.valueWrapEl.appendChild(this.valueInputEl));this.valueInputEl&&(this.valueInputEl.removeEventListener("keydown",this.boundInputKeyDown),this.valueInputEl.removeEventListener("input",this.boundInputInput),this.valueInputEl.removeEventListener("paste",this.boundInputPaste),this.valueInputEl.removeEventListener("blur",this.boundInputBlur),this.valueInputEl.remove(),this.valueInputEl=null),this.valueTextEl||(this.valueTextEl=document.createElement("span"),this.valueTextEl.className=`${t}__value-text`),this.valueTextEl.textContent=String(e),this.valueWrapEl.contains(this.valueTextEl)||this.valueWrapEl.appendChild(this.valueTextEl)}}allowsNegative(){return this.getMin()<0}allowsDecimal(){const t=this.getStep();return!Number.isInteger(t)}buildInputPattern(){return`^${this.allowsNegative()?"-?":""}\\d*${this.allowsDecimal()?"(\\.\\d*)?":""}$`}sanitizeInputString(t){let e="",i=!1,n=!1;for(let s=0;s<t.length;s++){const l=t[s];"-"!==l||!this.allowsNegative()||0!==e.length||i?"."!==l||!this.allowsDecimal()||n?/\d/.test(l)&&(e+=l):(e+=l,n=!0):(e+=l,i=!0)}return e}parseInputValue(t){const e=t.trim();if(""===e||"-"===e||"."===e)return null;const i=Number(e);return Number.isFinite(i)?i:null}enforceInputBounds(t,e={}){const i=this.sanitizeInputString(t),n=this.parseInputValue(i);if(null===n)return i;const s=this.getMin(),l=this.getMax();return n>l?String(l):e.clampMin&&n<s?String(s):i}handleInputKeyDown(t){if(!["Backspace","Delete","Tab","Escape","ArrowLeft","ArrowRight","Home","End"].includes(t.key)){if("Enter"===t.key)return t.preventDefault(),this.commitInputValue(),void this.valueInputEl?.blur();if("-"===t.key&&this.allowsNegative()){const t=this.valueInputEl;if(t&&0===t.selectionStart&&0===t.selectionEnd&&!t.value.includes("-"))return}"."===t.key&&this.allowsDecimal()&&!this.valueInputEl?.value.includes(".")||/^\d$/.test(t.key)||t.preventDefault()}}handleInputInput(){if(!this.valueInputEl)return;const t=this.enforceInputBounds(this.valueInputEl.value);this.valueInputEl.value!==t&&(this.valueInputEl.value=t)}handleInputPaste(t){if(t.preventDefault(),!this.valueInputEl)return;const e=t.clipboardData?.getData("text")??"",i=this.enforceInputBounds(this.sanitizeInputString(this.valueInputEl.value+e));this.valueInputEl.value=i,this.handleInputInput()}commitInputValue(){if(!this.valueInputEl||!this.isEditable())return;const t=this.valueInputEl.value.trim();if(""===t||"-"===t||"."===t)return void(this.valueInputEl.value=String(this.value));const e=this.parseInputValue(t);if(null===e)return void(this.valueInputEl.value=String(this.value));const i=this.snapToStep(e);this.valueInputEl.value=String(i),this.change(i)}getMin(){return Number(this.getAttribute("min")??0)}getMax(){return Number(this.getAttribute("max")??100)}getStep(){return Number(this.getAttribute("step")??1)}snapToStep(t){const e=this.getStep(),i=Math.round(t/e)*e;return this.clamp(i)}clamp(t){return Math.max(this.getMin(),Math.min(this.getMax(),t))}updateButtons(){const e=this.getMin(),i=this.getMax(),n=this.hasAttribute("disabled"),s=this.hasAttribute("readonly"),l=this.value,u=l<=e,a=l>=i;if(this.decrementBtn){const e=n||s||u;this.decrementBtn.disabled=e,this.decrementBtn.classList.toggle(`${t}__button--disabled`,e)}if(this.incrementBtn){const e=n||s||a;this.incrementBtn.disabled=e,this.incrementBtn.classList.toggle(`${t}__button--disabled`,e)}}change(t){if(this.hasAttribute("disabled")||this.hasAttribute("readonly"))return;const e=this.getMin(),i=this.getMax(),n=this.clamp(this.snapToStep(t)),s=this.value;if(n!==s){if(this.setAttribute("value",String(n)),this.valueTextEl&&(this.valueTextEl.textContent=String(n)),this.valueInputEl&&(this.valueInputEl.value=String(n)),this.updateButtons(),this.descriptionEl){const t=this.getStep(),s=this.isEditable()?"값을 직접 입력할 수 있습니다. ":"";this.descriptionEl.textContent=`${s}숫자 조정기. +/- 버튼으로 값을 조정할 수 있습니다. 현재 값: ${n}, 최소값: ${e}, 최대값: ${i}, 단계: ${t}`}this.dispatchEvent(new CustomEvent("db-change",{detail:{value:n,minReached:n<=e,maxReached:n>=i},bubbles:!0,composed:!0})),n<=e&&s>e&&this.dispatchEvent(new CustomEvent("db-min-reached",{bubbles:!0,composed:!0,detail:{value:n}})),n>=i&&s<i&&this.dispatchEvent(new CustomEvent("db-max-reached",{bubbles:!0,composed:!0,detail:{value:n}}))}else this.valueInputEl&&(this.valueInputEl.value=String(n))}}customElements.get("db-stepper")||customElements.define("db-stepper",DbStepper);export{DbStepper};