@designbasekorea/ui-wc 0.5.5 → 0.5.6

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

@@ -1 +1,420 @@
-import{getDbComponentIconSize as t,createDbIcon as e}from"./db-icons.js";import{getPasswordValidation as s}from"./input-validation.js";import{attachNumberScrub as i,readNumericAttribute as n}from"./number-scrub.js";const a=["text","email","password","url","search","tel","number"],r=["s","m","l"],l=new Set(["arrow-bar-left","arrow-bar-right","caret-down-filled","chevron-down","chevron-left","chevron-right","circle-checked","close","error-filled","edit","hide","info-filled","lock","mail","plus","search","share-alt","show","sparkle","trash","user","warning-filled"]);class DbInput extends HTMLElement{constructor(){super(...arguments),this.passwordVisible=!1,this.isFocused=!1,this.touched=!1,this.isScrubbing=!1,this.handleInput=t=>{t.stopPropagation();const e=t.target;this.updateDynamicUI(),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:e.value,nativeEvent:t},bubbles:!0,composed:!0}))},this.handleChange=t=>{t.stopPropagation();const e=t.target;this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new CustomEvent("db-change",{detail:{value:e.value,nativeEvent:t},bubbles:!0,composed:!0}))},this.handleFocus=t=>{this.isFocused=!0,this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-focus",{detail:{nativeEvent:t},bubbles:!0,composed:!0}))},this.handleBlur=t=>{this.isFocused=!1,this.touched=!0,this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-blur",{detail:{nativeEvent:t},bubbles:!0,composed:!0}))},this.handlePasswordToggle=()=>{this.passwordVisible=!this.passwordVisible,this.render()},this.handleSearchClear=()=>{this.input&&(this.input.value="",this.setAttribute("value",""),this.input.focus(),this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:"",nativeEvent:null},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("db-clear",{bubbles:!0,composed:!0})))}}static get observedAttributes(){return["type","label","placeholder","value","default-value","size","disabled","readonly","required","error","error-message","helper-text","full-width","name","start-icon","end-icon","validate","validation-visibility","validate-on-blur","password-min-length","scrubbable","scrub-step","scrub-sensitivity","min","max","step"]}get value(){return this.input?.value??this.getAttribute("value")??""}set value(t){this.setAttribute("value",t),this.input&&(this.input.value=t),this.updateDynamicUI()}get type(){return this.getAttribute("type")||"text"}set type(t){this.setAttribute("type",t)}get size(){return this.getAttribute("size")||"m"}set size(t){this.setAttribute("size",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){this.toggleAttribute("readonly",t)}connectedCallback(){this.render()}disconnectedCallback(){this.detachScrub?.(),this.detachScrub=void 0}attributeChangedCallback(t){if("value"!==t||!this.isScrubbing){if("value"===t&&this.input){const t=this.getAttribute("value")??"";return this.input.value!==t&&(this.input.value=t),void this.updateDynamicUI()}this.render()}}focus(){this.input?.focus()}get passwordMinLength(){return Number(this.getAttribute("password-min-length")||8)}get validationVisibility(){return this.getAttribute("validation-visibility")||"focus"}get validateOnBlur(){return!this.hasAttribute("validate-on-blur")||"false"!==this.getAttribute("validate-on-blur")}get isValidationEnabled(){return this.hasAttribute("validate")}getIconSize(){return t(this.size)}resolveIconName(t){const e=this.getAttribute(t);if(e&&l.has(e))return e}resolveStartIcon(){const t=this.resolveIconName("start-icon");return t||("search"===this.type?"search":void 0)}getCurrentValue(){return this.input?.value??this.getAttribute("value")??this.getAttribute("default-value")??""}render(){const t=this.getCurrentValue(),e=a.includes(this.type)?this.type:"text",s="search"===e,l="password"===e,u=l&&this.passwordVisible||s?"text":e,d=this.getAttribute("label")||"",h=this.getAttribute("helper-text")||"",c=this.getAttribute("error-message")||"",o=this.hasAttribute("error"),b=this.resolveStartIcon(),p=this.resolveIconName("end-icon");this.classList.add("designbase-wc-input"),r.forEach(t=>this.classList.remove(`designbase-wc-input--${t}`)),this.classList.add(`designbase-wc-input--${r.includes(this.size)?this.size:"m"}`),this.classList.toggle("designbase-wc-input--error",o),this.classList.toggle("designbase-wc-input--disabled",this.disabled),this.classList.toggle("designbase-wc-input--readonly",this.readOnly),this.classList.toggle("designbase-wc-input--full-width",this.hasAttribute("full-width")),this.classList.toggle("designbase-wc-input--with-start-icon",Boolean(b));const g=s&&t.length>0&&!this.disabled&&!this.readOnly;this.classList.toggle("designbase-wc-input--with-end-icon",Boolean(p&&!l&&!s)||l||g),this.classList.toggle("designbase-wc-input--with-password-toggle",l),this.classList.toggle("designbase-wc-input--with-search-clear",g);const v=this.hasAttribute("scrubbable")&&"number"===e&&!this.disabled&&!this.readOnly;this.classList.toggle("designbase-wc-input--scrubbable",v),this.classList.toggle("designbase-wc-input--scrubbing",this.isScrubbing);const w=this.getAttribute("id")||`db-input-${Math.random().toString(36).slice(2)}`;this.hasAttribute("id")||this.setAttribute("id",w);const m=`${w}-field`,_=`${w}-helper`,y=`${w}-error`,$=`${w}-validation`,A=this.getAttribute("min"),E=this.getAttribute("max"),S=this.getAttribute("step");this.innerHTML=`\n            ${d?`<label class="designbase-wc-input__label" for="${m}">${this.escape(d)}${this.hasAttribute("required")?'<span aria-hidden="true"> *</span>':""}</label>`:""}\n            <span class="designbase-wc-input__wrapper">\n                ${b?'<span class="designbase-wc-input__start-icon" aria-hidden="true"></span>':""}\n                <input\n                    id="${m}"\n                    class="designbase-wc-input__field"\n                    type="${u}"\n                    value="${this.escape(t)}"\n                    placeholder="${this.escape(this.getAttribute("placeholder")||"")}"\n                    ${s?'role="searchbox"':""}\n                    ${this.getAttribute("name")?`name="${this.escape(this.getAttribute("name")||"")}"`:""}\n                    ${this.disabled?"disabled":""}\n                    ${this.readOnly?"readonly":""}\n                    ${this.hasAttribute("required")?"required":""}\n                    ${null!==A?`min="${this.escape(A)}"`:""}\n                    ${null!==E?`max="${this.escape(E)}"`:""}\n                    ${null!==S?`step="${this.escape(S)}"`:""}\n                    aria-invalid="${String(o)}"\n                />\n                ${l?`<button type="button" class="designbase-wc-input__password-toggle" ${this.disabled?"disabled":""} aria-label="${this.passwordVisible?"비밀번호 숨기기":"비밀번호 보기"}"></button>`:""}\n                ${s?'<button type="button" class="designbase-wc-input__clear-button" hidden aria-label="검색어 지우기"></button>':""}\n                ${!p||l||s?"":'<span class="designbase-wc-input__end-icon" aria-hidden="true"></span>'}\n            </span>\n            ${this.isValidationEnabled&&l?`<div class="designbase-wc-input__validation-slot" id="${$}"></div>`:""}\n            ${h&&!o?`<p id="${_}" class="designbase-wc-input__helper-text">${this.escape(h)}</p>`:""}\n            ${o&&c?`<p id="${y}" class="designbase-wc-input__error-message">${this.escape(c)}</p>`:""}\n        `,this.mountIcons(b,!p||l||s?void 0:p,l),this.input=this.querySelector("input")||void 0,this.input&&(this.input.value=t,this.input.addEventListener("input",this.handleInput),this.input.addEventListener("change",this.handleChange),this.input.addEventListener("focus",this.handleFocus),this.input.addEventListener("blur",this.handleBlur)),this.querySelector(".designbase-wc-input__password-toggle")?.addEventListener("click",this.handlePasswordToggle),this.querySelector(".designbase-wc-input__clear-button")?.addEventListener("click",this.handleSearchClear),this.detachScrub?.(),this.detachScrub=void 0,v&&this.input&&(this.detachScrub=i(this.input,{isEnabled:()=>this.hasAttribute("scrubbable")&&"number"===this.type,isInteractive:()=>!this.disabled&&!this.readOnly,getValue:()=>this.getCurrentValue(),getStep:()=>n(this,"scrub-step")??n(this,"step")??1,getMin:()=>n(this,"min"),getMax:()=>n(this,"max"),getSensitivity:()=>n(this,"scrub-sensitivity")??4,onValueChange:t=>this.applyScrubValue(t),onScrubStateChange:t=>{this.isScrubbing=t,this.classList.toggle("designbase-wc-input--scrubbing",t),!t&&this.input&&this.dispatchEvent(new CustomEvent("db-change",{detail:{value:this.input.value,nativeEvent:null},bubbles:!0,composed:!0}))}})),this.updateDynamicUI()}mountIcons(t,s,i=!1){const n=this.getIconSize();if(t){const s=this.querySelector(".designbase-wc-input__start-icon");s?.replaceChildren(e(t,n))}if(s){const t=this.querySelector(".designbase-wc-input__end-icon");t?.replaceChildren(e(s,n))}if(i){const t=this.querySelector(".designbase-wc-input__password-toggle");t?.replaceChildren(e(this.passwordVisible?"hide":"show",n))}const a=this.querySelector(".designbase-wc-input__clear-button");a?.replaceChildren(e("close",n))}shouldShowPasswordValidation(t){return!(!this.isValidationEnabled||"password"!==this.type)&&("never"!==this.validationVisibility&&("always"===this.validationVisibility||(this.isFocused||t.length>0)))}renderValidationMarkup(t){const e=s(t,this.passwordMinLength),i=Array.from({length:4},(t,s)=>`<span class="designbase-wc-input__password-strength-segment${s<e.score?` designbase-wc-input__password-strength-segment--${e.level}`:""}"></span>`).join(""),n=e.requirements.map(t=>`<li class="designbase-wc-input__password-requirement${t.met?" designbase-wc-input__password-requirement--met":""}">${t.met?'<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"></span>':'<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"><span class="designbase-wc-input__password-requirement-dot"></span></span>'}<span class="designbase-wc-input__password-requirement-label">${this.escape(t.label)}</span></li>`).join("");return`\n            <div class="designbase-wc-input__validation" aria-live="polite">\n                <div class="designbase-wc-input__password-strength">\n                    <div class="designbase-wc-input__password-strength-bar" role="progressbar" aria-valuemin="0" aria-valuemax="4" aria-valuenow="${e.score}" aria-label="비밀번호 강도">${i}</div>\n                    <span class="designbase-wc-input__password-strength-label designbase-wc-input__password-strength-label--${e.level}">${e.levelLabel}</span>\n                </div>\n                <ul class="designbase-wc-input__password-requirements">${n}</ul>\n            </div>\n        `}updateDynamicUI(){const t=this.getCurrentValue(),s="search"===this.type&&t.length>0&&!this.disabled&&!this.readOnly;this.classList.toggle("designbase-wc-input--with-search-clear",s);const i=this.querySelector(".designbase-wc-input__clear-button");i&&(i.hidden=!s,i.replaceChildren(e("close",this.getIconSize())));const n=this.querySelector(".designbase-wc-input__validation-slot");if(n&&(this.shouldShowPasswordValidation(t)?(n.innerHTML=this.renderValidationMarkup(t),n.querySelectorAll(".designbase-wc-input__password-requirement--met .designbase-wc-input__password-requirement-icon").forEach(t=>{t.replaceChildren(e("circle-checked",12))})):n.innerHTML=""),this.input){const e=`${this.getAttribute("id")}-helper`,s=`${this.getAttribute("id")}-error`,i=`${this.getAttribute("id")}-validation`,n=this.getAttribute("helper-text")||"",a=this.getAttribute("error-message")||"",r=this.hasAttribute("error"),l=[n&&!r?e:"",this.shouldShowPasswordValidation(t)?i:"",r&&a?s:""].filter(Boolean).join(" ")||void 0;l?this.input.setAttribute("aria-describedby",l):this.input.removeAttribute("aria-describedby")}}applyScrubValue(t){this.input&&(this.input.value=t,this.setAttribute("value",t),this.updateDynamicUI(),this.dispatchEvent(new CustomEvent("db-input",{detail:{value:t,nativeEvent:null},bubbles:!0,composed:!0})))}escape(t){return t.replace(/[&<>"']/g,t=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[t]||t))}}customElements.get("db-input")||customElements.define("db-input",DbInput);export{DbInput};
+import { getDbComponentIconSize, createDbIcon } from './db-icons.js';
+import { getPasswordValidation } from './input-validation.js';
+import { attachNumberScrub, readNumericAttribute } from './number-scrub.js';
+
+const TYPES = ['text', 'email', 'password', 'url', 'search', 'tel', 'number'];
+const SIZES = ['s', 'm', 'l'];
+const ICON_NAMES = new Set([
+    'arrow-bar-left', 'arrow-bar-right', 'caret-down-filled', 'chevron-down', 'chevron-left',
+    'chevron-right', 'circle-checked', 'close', 'error-filled', 'edit', 'hide', 'info-filled',
+    'lock', 'mail', 'plus', 'search', 'share-alt', 'show', 'sparkle', 'trash', 'user', 'warning-filled',
+]);
+class DbInput extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.passwordVisible = false;
+        this.isFocused = false;
+        this.touched = false;
+        this.isScrubbing = false;
+        this.handleInput = (event) => {
+            event.stopPropagation();
+            const target = event.target;
+            this.updateDynamicUI();
+            this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent('db-input', {
+                detail: { value: target.value, nativeEvent: event },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            const target = event.target;
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+            this.dispatchEvent(new CustomEvent('db-change', {
+                detail: { value: target.value, nativeEvent: event },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.handleFocus = (event) => {
+            this.isFocused = true;
+            this.updateDynamicUI();
+            this.dispatchEvent(new CustomEvent('db-focus', {
+                detail: { nativeEvent: event },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.handleBlur = (event) => {
+            this.isFocused = false;
+            this.touched = true;
+            this.updateDynamicUI();
+            this.dispatchEvent(new CustomEvent('db-blur', {
+                detail: { nativeEvent: event },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this.handlePasswordToggle = () => {
+            this.passwordVisible = !this.passwordVisible;
+            this.render();
+        };
+        this.handleSearchClear = () => {
+            if (!this.input)
+                return;
+            this.input.value = '';
+            this.setAttribute('value', '');
+            this.input.focus();
+            this.updateDynamicUI();
+            this.dispatchEvent(new CustomEvent('db-input', {
+                detail: { value: '', nativeEvent: null },
+                bubbles: true,
+                composed: true,
+            }));
+            this.dispatchEvent(new CustomEvent('db-clear', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'type',
+            'label',
+            'placeholder',
+            'value',
+            'default-value',
+            'size',
+            'disabled',
+            'readonly',
+            'required',
+            'error',
+            'error-message',
+            'helper-text',
+            'full-width',
+            'name',
+            'start-icon',
+            'end-icon',
+            'validate',
+            'validation-visibility',
+            'validate-on-blur',
+            'password-min-length',
+            'scrubbable',
+            'scrub-step',
+            'scrub-sensitivity',
+            'min',
+            'max',
+            'step',
+        ];
+    }
+    get value() {
+        return this.input?.value ?? this.getAttribute('value') ?? '';
+    }
+    set value(value) {
+        this.setAttribute('value', value);
+        if (this.input)
+            this.input.value = value;
+        this.updateDynamicUI();
+    }
+    get type() {
+        return this.getAttribute('type') || 'text';
+    }
+    set type(value) {
+        this.setAttribute('type', value);
+    }
+    get size() {
+        return this.getAttribute('size') || 'm';
+    }
+    set size(value) {
+        this.setAttribute('size', value);
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        this.toggleAttribute('disabled', value);
+    }
+    get readOnly() {
+        return this.hasAttribute('readonly');
+    }
+    set readOnly(value) {
+        this.toggleAttribute('readonly', value);
+    }
+    connectedCallback() {
+        this.render();
+    }
+    disconnectedCallback() {
+        this.detachScrub?.();
+        this.detachScrub = undefined;
+    }
+    attributeChangedCallback(name) {
+        if (name === 'value' && this.isScrubbing)
+            return;
+        if (name === 'value' && this.input) {
+            const next = this.getAttribute('value') ?? '';
+            if (this.input.value !== next)
+                this.input.value = next;
+            this.updateDynamicUI();
+            return;
+        }
+        this.render();
+    }
+    focus() {
+        this.input?.focus();
+    }
+    get passwordMinLength() {
+        return Number(this.getAttribute('password-min-length') || 8);
+    }
+    get validationVisibility() {
+        return this.getAttribute('validation-visibility') || 'focus';
+    }
+    get validateOnBlur() {
+        return !this.hasAttribute('validate-on-blur') || this.getAttribute('validate-on-blur') !== 'false';
+    }
+    get isValidationEnabled() {
+        return this.hasAttribute('validate');
+    }
+    getIconSize() {
+        return getDbComponentIconSize(this.size);
+    }
+    resolveIconName(attribute) {
+        const value = this.getAttribute(attribute);
+        if (value && ICON_NAMES.has(value))
+            return value;
+        return undefined;
+    }
+    resolveStartIcon() {
+        const explicit = this.resolveIconName('start-icon');
+        if (explicit)
+            return explicit;
+        if (this.type === 'search')
+            return 'search';
+        return undefined;
+    }
+    getCurrentValue() {
+        return this.input?.value ?? this.getAttribute('value') ?? this.getAttribute('default-value') ?? '';
+    }
+    render() {
+        const value = this.getCurrentValue();
+        const type = TYPES.includes(this.type) ? this.type : 'text';
+        const isSearch = type === 'search';
+        const isPassword = type === 'password';
+        const actualType = isPassword && this.passwordVisible ? 'text' : isSearch ? 'text' : type;
+        const label = this.getAttribute('label') || '';
+        const helperText = this.getAttribute('helper-text') || '';
+        const errorMessage = this.getAttribute('error-message') || '';
+        const hasError = this.hasAttribute('error');
+        const startIcon = this.resolveStartIcon();
+        const endIcon = this.resolveIconName('end-icon');
+        this.classList.add('designbase-wc-input');
+        SIZES.forEach((size) => this.classList.remove(`designbase-wc-input--${size}`));
+        this.classList.add(`designbase-wc-input--${SIZES.includes(this.size) ? this.size : 'm'}`);
+        this.classList.toggle('designbase-wc-input--error', hasError);
+        this.classList.toggle('designbase-wc-input--disabled', this.disabled);
+        this.classList.toggle('designbase-wc-input--readonly', this.readOnly);
+        this.classList.toggle('designbase-wc-input--full-width', this.hasAttribute('full-width'));
+        this.classList.toggle('designbase-wc-input--with-start-icon', Boolean(startIcon));
+        const showSearchClear = isSearch && value.length > 0 && !this.disabled && !this.readOnly;
+        this.classList.toggle('designbase-wc-input--with-end-icon', Boolean(endIcon && !isPassword && !isSearch) || isPassword || showSearchClear);
+        this.classList.toggle('designbase-wc-input--with-password-toggle', isPassword);
+        this.classList.toggle('designbase-wc-input--with-search-clear', showSearchClear);
+        const isScrubbable = this.hasAttribute('scrubbable') && type === 'number' && !this.disabled && !this.readOnly;
+        this.classList.toggle('designbase-wc-input--scrubbable', isScrubbable);
+        this.classList.toggle('designbase-wc-input--scrubbing', this.isScrubbing);
+        const id = this.getAttribute('id') || `db-input-${Math.random().toString(36).slice(2)}`;
+        if (!this.hasAttribute('id'))
+            this.setAttribute('id', id);
+        const fieldId = `${id}-field`;
+        const helperId = `${id}-helper`;
+        const errorId = `${id}-error`;
+        const validationId = `${id}-validation`;
+        const min = this.getAttribute('min');
+        const max = this.getAttribute('max');
+        const step = this.getAttribute('step');
+        this.innerHTML = `
+            ${label ? `<label class="designbase-wc-input__label" for="${fieldId}">${this.escape(label)}${this.hasAttribute('required') ? '<span aria-hidden="true"> *</span>' : ''}</label>` : ''}
+            <span class="designbase-wc-input__wrapper">
+                ${startIcon ? '<span class="designbase-wc-input__start-icon" aria-hidden="true"></span>' : ''}
+                <input
+                    id="${fieldId}"
+                    class="designbase-wc-input__field"
+                    type="${actualType}"
+                    value="${this.escape(value)}"
+                    placeholder="${this.escape(this.getAttribute('placeholder') || '')}"
+                    ${isSearch ? 'role="searchbox"' : ''}
+                    ${this.getAttribute('name') ? `name="${this.escape(this.getAttribute('name') || '')}"` : ''}
+                    ${this.disabled ? 'disabled' : ''}
+                    ${this.readOnly ? 'readonly' : ''}
+                    ${this.hasAttribute('required') ? 'required' : ''}
+                    ${min !== null ? `min="${this.escape(min)}"` : ''}
+                    ${max !== null ? `max="${this.escape(max)}"` : ''}
+                    ${step !== null ? `step="${this.escape(step)}"` : ''}
+                    aria-invalid="${String(hasError)}"
+                />
+                ${isPassword ? `<button type="button" class="designbase-wc-input__password-toggle" ${this.disabled ? 'disabled' : ''} aria-label="${this.passwordVisible ? '비밀번호 숨기기' : '비밀번호 보기'}"></button>` : ''}
+                ${isSearch ? `<button type="button" class="designbase-wc-input__clear-button" hidden aria-label="검색어 지우기"></button>` : ''}
+                ${endIcon && !isPassword && !isSearch ? '<span class="designbase-wc-input__end-icon" aria-hidden="true"></span>' : ''}
+            </span>
+            ${this.isValidationEnabled && isPassword ? `<div class="designbase-wc-input__validation-slot" id="${validationId}"></div>` : ''}
+            ${helperText && !hasError ? `<p id="${helperId}" class="designbase-wc-input__helper-text">${this.escape(helperText)}</p>` : ''}
+            ${hasError && errorMessage ? `<p id="${errorId}" class="designbase-wc-input__error-message">${this.escape(errorMessage)}</p>` : ''}
+        `;
+        this.mountIcons(startIcon, endIcon && !isPassword && !isSearch ? endIcon : undefined, isPassword);
+        this.input = this.querySelector('input') || undefined;
+        if (this.input) {
+            this.input.value = value;
+            this.input.addEventListener('input', this.handleInput);
+            this.input.addEventListener('change', this.handleChange);
+            this.input.addEventListener('focus', this.handleFocus);
+            this.input.addEventListener('blur', this.handleBlur);
+        }
+        this.querySelector('.designbase-wc-input__password-toggle')
+            ?.addEventListener('click', this.handlePasswordToggle);
+        this.querySelector('.designbase-wc-input__clear-button')
+            ?.addEventListener('click', this.handleSearchClear);
+        this.detachScrub?.();
+        this.detachScrub = undefined;
+        if (isScrubbable && this.input) {
+            this.detachScrub = attachNumberScrub(this.input, {
+                isEnabled: () => this.hasAttribute('scrubbable') && this.type === 'number',
+                isInteractive: () => !this.disabled && !this.readOnly,
+                getValue: () => this.getCurrentValue(),
+                getStep: () => readNumericAttribute(this, 'scrub-step') ?? readNumericAttribute(this, 'step') ?? 1,
+                getMin: () => readNumericAttribute(this, 'min'),
+                getMax: () => readNumericAttribute(this, 'max'),
+                getSensitivity: () => readNumericAttribute(this, 'scrub-sensitivity') ?? 4,
+                onValueChange: (nextValue) => this.applyScrubValue(nextValue),
+                onScrubStateChange: (active) => {
+                    this.isScrubbing = active;
+                    this.classList.toggle('designbase-wc-input--scrubbing', active);
+                    if (!active && this.input) {
+                        this.dispatchEvent(new CustomEvent('db-change', {
+                            detail: { value: this.input.value, nativeEvent: null },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    }
+                },
+            });
+        }
+        this.updateDynamicUI();
+    }
+    mountIcons(startIcon, endIcon, isPassword = false) {
+        const iconSize = this.getIconSize();
+        if (startIcon) {
+            const host = this.querySelector('.designbase-wc-input__start-icon');
+            host?.replaceChildren(createDbIcon(startIcon, iconSize));
+        }
+        if (endIcon) {
+            const host = this.querySelector('.designbase-wc-input__end-icon');
+            host?.replaceChildren(createDbIcon(endIcon, iconSize));
+        }
+        if (isPassword) {
+            const toggle = this.querySelector('.designbase-wc-input__password-toggle');
+            toggle?.replaceChildren(createDbIcon(this.passwordVisible ? 'hide' : 'show', iconSize));
+        }
+        const clearButton = this.querySelector('.designbase-wc-input__clear-button');
+        clearButton?.replaceChildren(createDbIcon('close', iconSize));
+    }
+    shouldShowPasswordValidation(value) {
+        if (!this.isValidationEnabled || this.type !== 'password')
+            return false;
+        if (this.validationVisibility === 'never')
+            return false;
+        if (this.validationVisibility === 'always')
+            return true;
+        return this.isFocused || value.length > 0;
+    }
+    renderValidationMarkup(value) {
+        const validation = getPasswordValidation(value, this.passwordMinLength);
+        const segments = Array.from({ length: 4 }, (_, index) => {
+            const active = index < validation.score;
+            const levelClass = active ? ` designbase-wc-input__password-strength-segment--${validation.level}` : '';
+            return `<span class="designbase-wc-input__password-strength-segment${levelClass}"></span>`;
+        }).join('');
+        const requirements = validation.requirements.map((requirement) => {
+            const metClass = requirement.met ? ' designbase-wc-input__password-requirement--met' : '';
+            const icon = requirement.met
+                ? '<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"></span>'
+                : '<span class="designbase-wc-input__password-requirement-icon" aria-hidden="true"><span class="designbase-wc-input__password-requirement-dot"></span></span>';
+            return `<li class="designbase-wc-input__password-requirement${metClass}">${icon}<span class="designbase-wc-input__password-requirement-label">${this.escape(requirement.label)}</span></li>`;
+        }).join('');
+        return `
+            <div class="designbase-wc-input__validation" aria-live="polite">
+                <div class="designbase-wc-input__password-strength">
+                    <div class="designbase-wc-input__password-strength-bar" role="progressbar" aria-valuemin="0" aria-valuemax="4" aria-valuenow="${validation.score}" aria-label="비밀번호 강도">${segments}</div>
+                    <span class="designbase-wc-input__password-strength-label designbase-wc-input__password-strength-label--${validation.level}">${validation.levelLabel}</span>
+                </div>
+                <ul class="designbase-wc-input__password-requirements">${requirements}</ul>
+            </div>
+        `;
+    }
+    updateDynamicUI() {
+        const value = this.getCurrentValue();
+        const isSearch = this.type === 'search';
+        const showSearchClear = isSearch && value.length > 0 && !this.disabled && !this.readOnly;
+        this.classList.toggle('designbase-wc-input--with-search-clear', showSearchClear);
+        const clearButton = this.querySelector('.designbase-wc-input__clear-button');
+        if (clearButton) {
+            clearButton.hidden = !showSearchClear;
+            clearButton.replaceChildren(createDbIcon('close', this.getIconSize()));
+        }
+        const validationSlot = this.querySelector('.designbase-wc-input__validation-slot');
+        if (validationSlot) {
+            if (this.shouldShowPasswordValidation(value)) {
+                validationSlot.innerHTML = this.renderValidationMarkup(value);
+                validationSlot.querySelectorAll('.designbase-wc-input__password-requirement--met .designbase-wc-input__password-requirement-icon')
+                    .forEach((iconHost) => {
+                    iconHost.replaceChildren(createDbIcon('circle-checked', 12));
+                });
+            }
+            else {
+                validationSlot.innerHTML = '';
+            }
+        }
+        if (this.input) {
+            const helperId = `${this.getAttribute('id')}-helper`;
+            const errorId = `${this.getAttribute('id')}-error`;
+            const validationId = `${this.getAttribute('id')}-validation`;
+            const helperText = this.getAttribute('helper-text') || '';
+            const errorMessage = this.getAttribute('error-message') || '';
+            const hasError = this.hasAttribute('error');
+            const describedBy = [
+                helperText && !hasError ? helperId : '',
+                this.shouldShowPasswordValidation(value) ? validationId : '',
+                hasError && errorMessage ? errorId : '',
+            ].filter(Boolean).join(' ') || undefined;
+            if (describedBy)
+                this.input.setAttribute('aria-describedby', describedBy);
+            else
+                this.input.removeAttribute('aria-describedby');
+        }
+    }
+    applyScrubValue(nextValue) {
+        if (!this.input)
+            return;
+        this.input.value = nextValue;
+        this.setAttribute('value', nextValue);
+        this.updateDynamicUI();
+        this.dispatchEvent(new CustomEvent('db-input', {
+            detail: { value: nextValue, nativeEvent: null },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    escape(value) {
+        return value.replace(/[&<>"']/g, (char) => ({
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#39;',
+        }[char] || char));
+    }
+}
+if (!customElements.get('db-input')) {
+    customElements.define('db-input', DbInput);
+}
+
+export { DbInput };