@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

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

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

@@ -1 +1,398 @@
-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};
+/**
+ * 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 };