@sellmate/design-system 1.9.0 → 1.11.0

package/dist/esm/sd-chip-input.entry.js

@@ -0,0 +1,272 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+import { C as CHIP_TYPOGRAPHY, a as CHIP_COLORS, b as CHIP_LAYOUT } from './sd-chip.config-DDj5KTBF.js';
+
+const chipInput = {
+	sm: {
+		minHeight: "36",
+		paddingX: "12",
+		paddingY: "6",
+		radius: "4",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"}
+	},
+	md: {
+		minHeight: "40",
+		paddingX: "16",
+		paddingY: "8",
+		radius: "6",
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "400",
+			fontSize: "14",
+			lineHeight: "24"
+		}
+	},
+	chip: {
+		gap: "8"
+	},
+	text: {
+		placeholder: "#AAAAAA"
+	}
+};
+var chipInputTokens = {
+	chipInput: chipInput
+};
+
+const sm = chipInputTokens.chipInput.sm;
+const md = chipInputTokens.chipInput.md;
+const CHIP_INPUT_SIZE_MAP = {
+    sm: {
+        minHeight: sm.minHeight,
+        paddingX: sm.paddingX,
+        paddingY: sm.paddingY,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+        fontFamily: sm.typography.fontFamily,
+    },
+    md: {
+        minHeight: md.minHeight,
+        paddingX: md.paddingX,
+        paddingY: md.paddingY,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+        fontFamily: md.typography.fontFamily,
+    },
+};
+const CHIP_INPUT_COLORS = {
+    text: {
+        placeholder: chipInputTokens.chipInput.text.placeholder,
+    },
+};
+const CHIP_INPUT_LAYOUT = {
+    chipGap: `${chipInputTokens.chipInput.chip.gap}px`,
+};
+const CHIP_INPUT_RESET = {
+    dividerColor: '#E1E1E1', // TODO: 토큰 반영 후 교체
+    iconColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
+    labelColor: '#555555', // TODO: 토큰 반영 후 교체 (grey_70)
+};
+
+const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}`;
+
+const SdChipInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+        this.focusEvent = createEvent(this, "sdFocus", 7);
+        this.blurEvent = createEvent(this, "sdBlur", 7);
+    }
+    get host() { return getElement(this); }
+    values = [];
+    errors = [];
+    size = 'sm';
+    disabled = false;
+    placeholder = '입력해 주세요.';
+    name = nanoid();
+    rules = [];
+    error = false;
+    useReset = false;
+    // sd-field props
+    label = '';
+    labelWidth = '';
+    hint = '';
+    errorMessage = '';
+    width = '';
+    status;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
+    internalValues = [];
+    internalErrors = [];
+    focused = false;
+    hovered = false;
+    inputValue = '';
+    inputEl;
+    formField;
+    get value() {
+        return this.internalValues;
+    }
+    valuesChanged(newValues) {
+        this.internalValues = [...(newValues ?? [])];
+    }
+    errorsChanged(newErrors) {
+        if (Array.isArray(newErrors)) {
+            this.internalErrors = [...newErrors];
+        }
+    }
+    componentWillLoad() {
+        this.internalValues = [...(this.values ?? [])];
+        if (Array.isArray(this.errors)) {
+            this.internalErrors = [...this.errors];
+        }
+    }
+    getChipError(index) {
+        if (typeof this.errors === 'function') {
+            return this.errors(this.internalValues[index] ?? '');
+        }
+        return this.internalErrors[index] ?? false;
+    }
+    update;
+    focusEvent;
+    blurEvent;
+    async sdValidate() {
+        return this.formField?.sdValidate();
+    }
+    async sdReset() {
+        return this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        return this.formField?.sdFocus();
+    }
+    handleChipUpdate = (index, newValue) => {
+        if (newValue.trim() === '') {
+            this.handleChipRemove(index);
+            return;
+        }
+        const next = [...this.internalValues];
+        next[index] = newValue;
+        this.internalValues = next;
+        this.values = next;
+        this.update.emit(next);
+    };
+    handleChipRemove = (index) => {
+        const next = this.internalValues.filter((_, i) => i !== index);
+        this.internalValues = next;
+        this.values = next;
+        if (Array.isArray(this.errors)) {
+            const nextErrors = this.internalErrors.filter((_, i) => i !== index);
+            this.internalErrors = nextErrors;
+            this.errors = nextErrors;
+        }
+        this.update.emit(next);
+        this.inputEl?.focus();
+    };
+    handleKeyDown = (event) => {
+        const input = event.target;
+        if (event.key === 'Enter' && !event.isComposing && input.value.trim() !== '') {
+            event.preventDefault();
+            const next = [...this.internalValues, input.value.trim()];
+            this.internalValues = next;
+            this.values = next;
+            input.value = '';
+            this.inputValue = '';
+            this.update.emit(next);
+        }
+        else if (event.key === 'Backspace' && input.value === '' && this.internalValues.length > 0) {
+            event.preventDefault();
+            const next = this.internalValues.slice(0, -1);
+            const nextErrors = this.internalErrors.slice(0, -1);
+            this.internalValues = next;
+            this.internalErrors = nextErrors;
+            this.values = next;
+            this.errors = nextErrors;
+            this.update.emit(next);
+        }
+    };
+    handleInput = (event) => {
+        this.inputValue = event.target.value;
+    };
+    handleFocus = () => {
+        this.focused = true;
+        this.focusEvent.emit();
+    };
+    handleBlur = () => {
+        this.focused = false;
+        this.blurEvent.emit();
+    };
+    handleContainerClick = () => {
+        if (!this.disabled) {
+            this.inputEl?.focus();
+        }
+    };
+    handleResetInput = () => {
+        this.internalValues = [];
+        this.internalErrors = [];
+        this.values = [];
+        if (Array.isArray(this.errors)) {
+            this.errors = [];
+        }
+        this.update.emit([]);
+        this.inputEl?.focus();
+    };
+    render() {
+        const sizeTokens = CHIP_INPUT_SIZE_MAP[this.size] ?? CHIP_INPUT_SIZE_MAP.sm;
+        const cssVars = {
+            [`--sd-system-size-field-${this.size}-height`]: 'auto',
+            [`--sd-system-radius-field-${this.size}`]: `${sizeTokens.radius}px`,
+            '--sd-chip-input-min-height': `${sizeTokens.minHeight}px`,
+            '--sd-chip-input-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-chip-input-padding-y': `${sizeTokens.paddingY}px`,
+            '--sd-chip-input-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-chip-input-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-chip-input-font-weight': sizeTokens.fontWeight,
+            '--sd-chip-input-font-family': sizeTokens.fontFamily,
+            '--sd-chip-input-chip-gap': CHIP_INPUT_LAYOUT.chipGap,
+            '--sd-chip-input-placeholder-color': CHIP_INPUT_COLORS.text.placeholder,
+            '--sd-chip-input-reset-gap': CHIP_INPUT_LAYOUT.chipGap,
+            '--sd-chip-input-divider-color': CHIP_INPUT_RESET.dividerColor,
+            '--sd-chip-input-field-height': CHIP_LAYOUT.height,
+            '--sd-chip-input-field-padding-x': CHIP_LAYOUT.paddingX,
+            '--sd-chip-input-field-radius': CHIP_LAYOUT.radius,
+            '--sd-chip-input-field-border-width': CHIP_LAYOUT.borderWidth,
+            '--sd-chip-input-field-bg': CHIP_COLORS.bg.default,
+            '--sd-chip-input-field-border-color': 'transparent',
+            '--sd-chip-input-field-content': CHIP_COLORS.content.focus,
+            '--sd-chip-input-field-font-size': CHIP_TYPOGRAPHY.focus.fontSize,
+            '--sd-chip-input-field-font-weight': CHIP_TYPOGRAPHY.focus.fontWeight,
+            '--sd-chip-input-field-line-height': CHIP_TYPOGRAPHY.focus.lineHeight,
+            '--sd-chip-input-field-font-family': CHIP_TYPOGRAPHY.focus.fontFamily,
+        };
+        return (h("sd-field", { key: 'cfff85a1732e23052fb2c736512f48f5653c4e1a', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '872d73f015e8aa79a9afcf1592372b3ba3bbb9a5', class: "sd-chip-input", onClick: this.handleContainerClick }, this.internalValues.map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.disabled, onSdUpdate: (e) => this.handleChipUpdate(i, e.detail), onSdRemove: () => this.handleChipRemove(i), onSdFocus: () => {
+                this.focused = true;
+            }, onSdBlur: () => {
+                this.focused = false;
+            } }))), h("div", { key: '33746a3ce014b5d28329c193d93d8bf1fc4957a6', class: {
+                'sd-chip-input__field': true,
+                'sd-chip-input__field--filled': this.inputValue !== '',
+                'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
+            }, "data-value": this.inputValue !== '' ? this.inputValue : this.internalValues.length === 0 ? this.placeholder : '' }, h("input", { key: '74b1e76b3123c371fffe344d922ff42801f028e7', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.useReset && this.internalValues.length > 0 && (h("div", { key: '3343b3d3fed05856739675d802115f7e5b2ea110', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: 'c0398e9c476309964c132b3647dd95cd2a65d948', class: "sd-chip-input__divider" }), h("sd-text-link", { key: 'e00af312380d40e8b6a3c9a463cea796146632a1', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput }))))));
+    }
+    static get watchers() { return {
+        "values": [{
+                "valuesChanged": 0
+            }],
+        "errors": [{
+                "errorsChanged": 0
+            }]
+    }; }
+};
+SdChipInput.style = sdChipInputCss();
+
+export { SdChipInput as sd_chip_input };

package/dist/esm/sd-chip.config-DDj5KTBF.js

@@ -0,0 +1,67 @@
+const chip = {
+	height: "24",
+	paddingX: "8",
+	gap: "4",
+	radius: "9999",
+	typography: {
+		"default": {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			lineHeight: "20"
+		},
+		focus: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "400",
+			lineHeight: "20"
+		}
+	},
+	bg: {
+		"default": "#F6F6F6",
+		error: "#FCEFEF"},
+	content: {
+		"default": "#555555",
+		error: "#E30000",
+		focus: "#222222"},
+	border: {
+		width: "1"
+	}
+};
+var chipTokens = {
+	chip: chip
+};
+
+const CHIP_LAYOUT = {
+    height: `${chipTokens.chip.height}px`,
+    paddingX: `${chipTokens.chip.paddingX}px`,
+    gap: `${chipTokens.chip.gap}px`,
+    radius: `${chipTokens.chip.radius}px`,
+    borderWidth: `${chipTokens.chip.border.width}px`,
+};
+const CHIP_COLORS = {
+    bg: {
+        default: chipTokens.chip.bg.default,
+        error: chipTokens.chip.bg.error,
+    },
+    content: {
+        default: chipTokens.chip.content.default,
+        error: chipTokens.chip.content.error,
+        focus: chipTokens.chip.content.focus,
+    }};
+const CHIP_TYPOGRAPHY = {
+    default: {
+        fontFamily: chipTokens.chip.typography.default.fontFamily,
+        fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.default.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
+    },
+    focus: {
+        fontFamily: chipTokens.chip.typography.focus.fontFamily,
+        fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.focus.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
+    },
+};
+
+export { CHIP_TYPOGRAPHY as C, CHIP_COLORS as a, CHIP_LAYOUT as b };

package/dist/esm/sd-chip.entry.js

@@ -1,79 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
+import { C as CHIP_TYPOGRAPHY, a as CHIP_COLORS, b as CHIP_LAYOUT } from './sd-chip.config-DDj5KTBF.js';
 
-const chip = {
-	height: "24",
-	paddingX: "8",
-	gap: "4",
-	radius: "9999",
-	typography: {
-		"default": {
-			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
-			fontSize: "12",
-			fontWeight: "500",
-			lineHeight: "20"
-		},
-		focus: {
-			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
-			fontSize: "12",
-			fontWeight: "400",
-			lineHeight: "20"
-		}
-	},
-	bg: {
-		"default": "#F6F6F6",
-		error: "#FCEFEF",
-		focus: "#FFFFFF"},
-	content: {
-		"default": "#555555",
-		error: "#E30000",
-		focus: "#222222"},
-	border: {
-		focus: "#E1E1E1",
-		width: "1"
-	}
-};
-var chipTokens = {
-	chip: chip
-};
-
-const CHIP_LAYOUT = {
-    height: `${chipTokens.chip.height}px`,
-    paddingX: `${chipTokens.chip.paddingX}px`,
-    gap: `${chipTokens.chip.gap}px`,
-    radius: `${chipTokens.chip.radius}px`,
-    borderWidth: `${chipTokens.chip.border.width}px`,
-};
-const CHIP_COLORS = {
-    bg: {
-        default: chipTokens.chip.bg.default,
-        error: chipTokens.chip.bg.error,
-        focus: chipTokens.chip.bg.focus,
-    },
-    content: {
-        default: chipTokens.chip.content.default,
-        error: chipTokens.chip.content.error,
-        focus: chipTokens.chip.content.focus,
-    },
-    border: {
-        focus: chipTokens.chip.border.focus,
-    },
-};
-const CHIP_TYPOGRAPHY = {
-    default: {
-        fontFamily: chipTokens.chip.typography.default.fontFamily,
-        fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
-        fontWeight: chipTokens.chip.typography.default.fontWeight,
-        lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
-    },
-    focus: {
-        fontFamily: chipTokens.chip.typography.focus.fontFamily,
-        fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
-        fontWeight: chipTokens.chip.typography.focus.fontWeight,
-        lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
-    },
-};
-
-const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
+const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;max-width:100%;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);max-width:100%;height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
 
 const SdChip = class {
     constructor(hostRef) {
@@ -208,10 +136,12 @@ const SdChip = class {
     handleInputKeyDown = (event) => {
         if (event.key === 'Enter') {
             event.preventDefault();
+            event.stopPropagation();
             this.commitEdit();
         }
         else if (event.key === 'Escape') {
             event.preventDefault();
+            event.stopPropagation();
             this.cancelEdit();
         }
     };
@@ -272,22 +202,22 @@ const SdChip = class {
     }
     render() {
         const state = this.resolveState();
-        const typography = state === 'focus' ? CHIP_TYPOGRAPHY.focus : CHIP_TYPOGRAPHY.default;
+        const typography = CHIP_TYPOGRAPHY.default;
         const cssVars = {
             '--sd-chip-height': CHIP_LAYOUT.height,
             '--sd-chip-padding-x': CHIP_LAYOUT.paddingX,
             '--sd-chip-gap': CHIP_LAYOUT.gap,
             '--sd-chip-radius': CHIP_LAYOUT.radius,
             '--sd-chip-border-width': CHIP_LAYOUT.borderWidth,
-            '--sd-chip-bg': CHIP_COLORS.bg[state],
-            '--sd-chip-content': CHIP_COLORS.content[state],
-            '--sd-chip-border-color': state === 'focus' ? CHIP_COLORS.border.focus : 'transparent',
+            '--sd-chip-bg': state === 'error' ? CHIP_COLORS.bg.error : CHIP_COLORS.bg.default,
+            '--sd-chip-content': state === 'error' ? CHIP_COLORS.content.error : CHIP_COLORS.content.default,
+            '--sd-chip-border-color': 'transparent',
             '--sd-chip-font-family': typography.fontFamily,
             '--sd-chip-font-size': typography.fontSize,
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '6503611c9cb03be2de4fc09398e2ce1b34b8ab10', class: {
+        return (h("span", { key: 'e1c1386f3143f4830256784853c1d931706a6beb', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

package/dist/esm/sd-circle-progress.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, h, H as Host } from './index-D3yCWQNg.js';
 import { p as progressTokens } from './component.progress-D1vaasIp.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 
@@ -70,7 +70,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, h("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

package/dist/esm/sd-confirm-modal_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-D3yCWQNg.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 import { m as modalTokens } from './component.modal-DOXMJi-V.js';
 
@@ -100,9 +100,9 @@ const SdConfirmModal = class {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: 'c41a58f13b95da7f1f0aea3620abf239dcb116b6', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'bdc1bc374934c2f9745f567b4e6ffd55ec3675ce', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'ff16ebde448157e657eb74e1b0c5f4a331cf396a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd718b2ae6f6e92f8c77ec821b78924ffbe267d12', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'a3909abde84c4d6987c9036a705cba4aa7d01ea6', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '29a4bf80ab75d973544c0a29c87133c9ef8a5aab', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '93eb2c75728cf26969a229a876f9217b4e00c63a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '4d3ce0662b2d860a4ed6ae3c8177ae75dae4fb92', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '7c406d59c2470b610a187bf45aa5cd4ab5c6b26b', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '10e3d2c8a87a728df4e3f3be7dfab96475738e2b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '9cc844c8cefb2fd0dc96871b55fc1c7c6e41c526', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'bbaa81a02c067d66c4cc19cf805b7a6939231311', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '31734f096eee6e6a9be770eafa43066c8e763608', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: 'a10838fb7c7081fdaa85cdaa33f92ef30c00a888', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '730fd073ade9b8788de77d36fc4aeddd0b304c07', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '059fd87fb39b8e2976fcb671c7dd78310324119f', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '6b320645505c099783a4a6704e96e9261054c7dc', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'd6a4554a7db861ae7afc610a629591224946d990', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '540f3bb73aa61a1a2a041eba9a22a198c7772914', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '1944aeb4d140c779d0af1304160a86c5056335a8', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'efd463686d98e9d2edc3e1cd7b4f54d8da4fef56', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'b9033fb98acf3de36b7fb3e1969ccf5a7becef39', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -186,7 +186,7 @@ const SdLoadingModal = class {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: 'e1161a16a56cddedc8e4bb76370bdf456d90e15a', style: hostStyle }, h("div", { key: 'e01979e4636465afa4b960ffdb9722f645386dca', class: "sd-loading-modal" }, h("div", { key: '1c1ecc05d20f58084c0d6f8048b17cd84f446edb', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '6793b86562b67699c59fd83fb0d6ee7378f6d991', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '75036f7d88be636987de2fe999c00d338fa352d5', class: "sd-loading-modal__button" }, h("sd-button", { key: '91f30470702df2be7256d451cc80d27e86510d2e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '17636253239532d90e596f20d84795fe2e65508d', style: hostStyle }, h("div", { key: '2f925afceca4102049d7876ab4d1e33fa1ef5ef7', class: "sd-loading-modal" }, h("div", { key: '0598cff340210ca9ec5e28fb1992cbbc1b8e5a06', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '3d699238c19ee66fd3afc72194133a865501cc08', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'd454a168360cd23a3e71482d67ee81d8eabdec58', class: "sd-loading-modal__button" }, h("sd-button", { key: '0aa26dc830d1c4827f2ee0ca0bfdf4bb8cd2c9f5', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

package/dist/esm/sd-date-box.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 

package/dist/esm/sd-date-picker_7.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-6dvDZPGx.js';
 import { i as inputTokens } from './component.textinput-e0ABNkP6.js';
@@ -104,9 +104,9 @@ const SdDatePicker = class {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '12d77a181caa4a6a9125db8a5c823149386ee059', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '2abc775817955caf06dd721d7b91c65d1bfd54de', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'baa957e5534b6587da2ef067ecad4a0934693800', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '652f9f5c6bd5c6ee58f3c89eee45325a98234ac0', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'c8c041a503785e35ac4a14d902eeef0a20fa2dd7', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '2c3bf831068ca090247fa4494fac6c2ce3b20e81', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '52df44d23b85540cbca17c352aba5568ff43685d', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '7b0f81badbcf7ca283afd274b4572e4a6eaa590b', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '65fbe892e4cdd9d643b5000d69220b5e28972902', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'e9187264f336295907f1d5574810df4a07a0f114', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -649,12 +649,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '184bd0b614071b1c26d0ef3588db8eea1ac519cb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '599d757b62bd61be0ba5c2dde2e1030b4d6f2973', class: "sd-input__content" }, h("slot", { key: '8b71b1449225e51cbab4204e34c077d83101e09e', name: "prefix" }), h("input", { key: 'ed48cf8544adc9e3475229b03129ace0af0e6d4e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'f084df7c3174756111c6eeb824202e26273d369a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '62f87c780b971ef43ec9bd15ae47d1f773ec18ca', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'fce402fae267b5700501e44935f23bebc28efb62', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'f7d8f95cf5ee38a7aa2e44940ba39b9eb001064c', class: "sd-input__content" }, h("slot", { key: '23f1f770a268a0798293420ce0df9e5cc94e07b2', name: "prefix" }), h("input", { key: 'b8c041cc4a8761cf1cf93a8d1af139cd7720d2d8', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '5a288d50726b21c156da480937b9759e6c76d33a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'b5315624a6fd5fdcb70526b1abea4fbac83641c1', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '83f511acdc0db74f6d7745e4a47c731f9bcf9bb5', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '5ae70d65c531db0bc57d17f85c328a275f7aab2b', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -1040,15 +1040,15 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: '36525cd069e57fc9177e25065381f722d1afa66e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '47e0981ffcd5dd5182fa5586fda0014be865da9e', class: {
+        return (h("sd-field", { key: '53c6935bbf98ed1eb0f28d6bed675ea369b0b2bc', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8f0da8b179cd3946d625ab6b525a2ffd614a5333', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '7f5afc1ded2c889ccf7d689f4ee058cb171571d9', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'fd980fd4e568feaaebb19621ca837201bea519dd', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '1be42c16d5e671c567d4768f505c2c17c50f1b60', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'dc074328208c8da2ee43ea2cb03dbc838b7d46c9', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '2af6450d437cc765697e0bb4c8a0fcb58a9abd2f', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '21396363bd0e08f1639cd5a56b0bb7d5c9acd6c1', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '84896d40d79e936480052ab45d618cd73550ee87', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'f2c8995b6c059c2a4130018b2ff0c7eabcd7abfb', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && h("span", { key: 'd3cd84cd41e0161cfe0b13ed44b412991e498a92', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '0a1fdf262b953ce79515ab9771d3177560e11eed', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '5ffd93512d528309a9051d01f59bb31f1b1f9bb8', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'd6b1ca9f5991f1b2382dd4a35ae4f20832192e3c', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '56a59f94ca27e8ef4255cabdd5fe003c602bb8d6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '1b8fca91e893b5ade47ed63db4d4d54933c94e53', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -1230,7 +1230,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '040a857ec7eed2400e115d7a48a3497fc0ce9c95', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '465f284ad513125b43632c0ab883482149b4aab5', class: "sd-textarea__content" }, h("textarea", { key: '45afdfbffcf80a99c0b6fa611c7b9c84aeaa3ec6', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: '2a1cd03e4f0fa5457b3164f1b6b71d808633414c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'b4e25ced8e583ed3d6e8a6026db0d3a2f198acb4', class: "sd-textarea__content" }, h("textarea", { key: '4faeceee380a7ab9a4ff337d16f46c4d7f42fa50', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{