@sellmate/design-system 1.17.0 → 1.18.0

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

@@ -1,5 +1,7 @@
 import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CAxodB5I.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
+import { s as systemTokens } from './system-BJfiMC9H.js';
+import { l as listBoxTokens, a as listItemTokens } from './component.listItem-U8VaRj9c.js';
 import { C as CHIP_TYPOGRAPHY, a as CHIP_COLORS, b as CHIP_LAYOUT } from './sd-chip.config-DDj5KTBF.js';
 
 const chipInput = {
@@ -74,8 +76,34 @@ const CHIP_INPUT_RESET = {
     iconColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
     labelColor: '#555555', // TODO: 토큰 반영 후 교체 (grey_70)
 };
+const feedbackSm = systemTokens.typography.feedback.sm.regular;
+const CHIP_INPUT_MAX_COUNT = {
+    fontSize: `${feedbackSm.fontSize}px`,
+    fontWeight: `${feedbackSm.fontWeight}`,
+    color: chipInputTokens.chipInput.text.placeholder,
+};
+const listItem = listItemTokens.listItem;
+const CHIP_INPUT_SUGGESTIONS = {
+    radius: `${listBoxTokens.listBox.radius}px`,
+    maxHeight: '260px',
+    itemPaddingY: `${listItem.paddingY}px`,
+    itemPaddingX: `${listItem.paddingLeft.depth1}px`,
+    itemPaddingRight: `${listItem.paddingRight}px`,
+    itemGap: `${listItem.gap}px`,
+    itemFontSize: `${listItem.typography.default.fontSize}px`,
+    itemFontWeight: listItem.typography.default.fontWeight,
+    itemFontWeightSelected: listItem.typography.selected.fontWeight,
+    itemLineHeight: `${listItem.typography.default.lineHeight}px`,
+    itemFontFamily: listItem.typography.default.fontFamily,
+    itemColor: listItem.content.default,
+    itemColorHover: listItem.content.hover,
+    itemBgHover: listItem.bg.hover,
+    emptyColor: '#888888',
+    emptyFontSize: '12px',
+    emptyLineHeight: '20px',
+};
 
-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 sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;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__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;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)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
 
 const SdChipInput = class {
     constructor(hostRef) {
@@ -83,7 +111,9 @@ const SdChipInput = class {
         this.update = createEvent(this, "sdUpdate", 7);
         this.focusEvent = createEvent(this, "sdFocus", 7);
         this.blurEvent = createEvent(this, "sdBlur", 7);
+        this.inputEvent = createEvent(this, "sdInput", 7);
     }
+    static SUGGESTIONS_VIEWPORT_PADDING = 8;
     get host() { return getElement(this); }
     values = [];
     errors = [];
@@ -95,6 +125,11 @@ const SdChipInput = class {
     rules = [];
     error = false;
     useReset = false;
+    maxCount;
+    suggestions = [];
+    loadingSuggestions = false;
+    recommendedItems = [];
+    loadingRecommendedItems = false;
     // sd-field props
     label = '';
     labelWidth = '';
@@ -110,8 +145,12 @@ const SdChipInput = class {
     focused = false;
     hovered = false;
     inputValue = '';
+    activeSuggestionIndex = -1;
+    suppressSuggestions = false;
+    suppressRecommendations = false;
     inputEl;
     formField;
+    chipInputRef;
     get value() {
         return this.internalValues;
     }
@@ -123,6 +162,17 @@ const SdChipInput = class {
             this.internalErrors = [...newErrors];
         }
     }
+    suggestionsChanged(newVal) {
+        if (!Array.isArray(newVal))
+            this.suggestions = [];
+        this.activeSuggestionIndex = -1;
+        this.suppressSuggestions = false;
+    }
+    recommendedItemsChanged(newVal) {
+        if (!Array.isArray(newVal))
+            this.recommendedItems = [];
+        this.activeSuggestionIndex = -1;
+    }
     componentWillLoad() {
         this.internalValues = Array.isArray(this.values) ? [...this.values] : [];
         if (Array.isArray(this.errors)) {
@@ -147,6 +197,7 @@ const SdChipInput = class {
     update;
     focusEvent;
     blurEvent;
+    inputEvent;
     async sdValidate() {
         return this.formField?.sdValidate();
     }
@@ -159,6 +210,31 @@ const SdChipInput = class {
     async sdFocus() {
         return this.formField?.sdFocus();
     }
+    addChip = (value) => {
+        if (this.maxCount != null && this.internalValues.length >= this.maxCount)
+            return;
+        const next = [...this.internalValues, value];
+        this.internalValues = next;
+        this.values = next;
+        if (Array.isArray(this.errors)) {
+            const nextErrors = [...this.internalErrors, false];
+            this.internalErrors = nextErrors;
+            this.errors = nextErrors;
+        }
+        if (Array.isArray(this.disabledChips)) {
+            this.disabledChips = [...this.disabledChips, false];
+        }
+        if (this.inputEl != null) {
+            this.inputEl.value = '';
+        }
+        this.inputValue = '';
+        this.activeSuggestionIndex = -1;
+        this.suppressSuggestions = true;
+        this.update.emit(next);
+        this.inputEvent.emit('');
+        this.inputEl?.focus();
+        this.suppressRecommendations = true;
+    };
     handleChipRemove = (index) => {
         const next = this.internalValues.filter((_, i) => i !== index);
         this.internalValues = next;
@@ -172,26 +248,54 @@ const SdChipInput = class {
             this.disabledChips = this.disabledChips.filter((_, i) => i !== index);
         }
         this.update.emit(next);
+        // .focus()는 동기 실행 → handleFocus가 suppressRecommendations=false로 리셋하므로 이후 덮어씀
         this.inputEl?.focus();
+        this.suppressRecommendations = true;
     };
     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;
-            if (Array.isArray(this.errors)) {
-                const nextErrors = [...this.internalErrors, false];
-                this.internalErrors = nextErrors;
-                this.errors = nextErrors;
+        const suggestions = this.suggestions ?? [];
+        const recommendedItems = this.recommendedItems ?? [];
+        const showAutocomplete = this.focused &&
+            this.inputValue !== '' &&
+            !this.suppressSuggestions &&
+            (suggestions.length > 0 || this.loadingSuggestions);
+        const showRecommendations = this.focused &&
+            this.inputValue === '' &&
+            !this.suppressRecommendations &&
+            (recommendedItems.length > 0 || this.loadingRecommendedItems);
+        const showDropdown = showAutocomplete || showRecommendations;
+        const activeItems = showAutocomplete ? suggestions : recommendedItems;
+        if (showDropdown) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.activeSuggestionIndex = Math.min(this.activeSuggestionIndex + 1, activeItems.length - 1);
+                return;
             }
-            if (Array.isArray(this.disabledChips)) {
-                this.disabledChips = [...this.disabledChips, false];
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.activeSuggestionIndex = Math.max(this.activeSuggestionIndex - 1, -1);
+                return;
             }
-            input.value = '';
-            this.inputValue = '';
-            this.update.emit(next);
+            if (event.key === 'Escape') {
+                if (showAutocomplete)
+                    this.suppressSuggestions = true;
+                if (showRecommendations)
+                    this.suppressRecommendations = true;
+                this.activeSuggestionIndex = -1;
+                return;
+            }
+            if (event.key === 'Enter' && this.activeSuggestionIndex >= 0) {
+                event.preventDefault();
+                this.addChip(activeItems[this.activeSuggestionIndex]);
+                return;
+            }
+        }
+        if (event.key === 'Enter' && !event.isComposing && input.value.trim() !== '') {
+            if (this.maxCount != null && this.internalValues.length >= this.maxCount)
+                return;
+            event.preventDefault();
+            this.addChip(input.value.trim());
         }
         else if (event.key === 'Backspace' && input.value === '' && this.internalValues.length > 0) {
             if (this.getChipDisabled(this.internalValues.length - 1))
@@ -212,16 +316,35 @@ const SdChipInput = class {
         }
     };
     handleInput = (event) => {
-        this.inputValue = event.target.value;
+        const value = event.target.value;
+        const wasEmpty = this.inputValue === '';
+        const isEmpty = value === '';
+        if (wasEmpty !== isEmpty) {
+            this.activeSuggestionIndex = -1;
+            if (isEmpty) {
+                this.suppressRecommendations = false;
+            }
+        }
+        this.inputValue = value;
+        this.suppressSuggestions = false;
+        this.inputEvent.emit(value);
     };
     handleFocus = () => {
         this.focused = true;
+        this.suppressRecommendations = false;
         this.focusEvent.emit();
     };
     handleBlur = () => {
         this.focused = false;
+        this.activeSuggestionIndex = -1;
         this.blurEvent.emit();
     };
+    closeSuggestions = () => {
+        this.focused = false;
+        this.activeSuggestionIndex = -1;
+        this.suppressSuggestions = true;
+        this.suppressRecommendations = true;
+    };
     handleContainerClick = () => {
         if (!this.disabled) {
             this.inputEl?.focus();
@@ -278,8 +401,84 @@ const SdChipInput = class {
             '--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,
+            '--sd-chip-input-max-count-font-size': CHIP_INPUT_MAX_COUNT.fontSize,
+            '--sd-chip-input-max-count-font-weight': CHIP_INPUT_MAX_COUNT.fontWeight,
+            '--sd-chip-input-max-count-color': CHIP_INPUT_MAX_COUNT.color,
+            '--sd-chip-input-suggestions-radius': CHIP_INPUT_SUGGESTIONS.radius,
+            '--sd-chip-input-suggestions-max-height': CHIP_INPUT_SUGGESTIONS.maxHeight,
+            '--sd-chip-input-suggestion-padding-y': CHIP_INPUT_SUGGESTIONS.itemPaddingY,
+            '--sd-chip-input-suggestion-padding-x': CHIP_INPUT_SUGGESTIONS.itemPaddingX,
+            '--sd-chip-input-suggestion-padding-right': CHIP_INPUT_SUGGESTIONS.itemPaddingRight,
+            '--sd-chip-input-suggestion-gap': CHIP_INPUT_SUGGESTIONS.itemGap,
+            '--sd-chip-input-suggestion-font-size': CHIP_INPUT_SUGGESTIONS.itemFontSize,
+            '--sd-chip-input-suggestion-font-weight': CHIP_INPUT_SUGGESTIONS.itemFontWeight,
+            '--sd-chip-input-suggestion-font-weight-selected': CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
+            '--sd-chip-input-suggestion-line-height': CHIP_INPUT_SUGGESTIONS.itemLineHeight,
+            '--sd-chip-input-suggestion-font-family': CHIP_INPUT_SUGGESTIONS.itemFontFamily,
+            '--sd-chip-input-suggestion-color': CHIP_INPUT_SUGGESTIONS.itemColor,
+            '--sd-chip-input-suggestion-color-hover': CHIP_INPUT_SUGGESTIONS.itemColorHover,
+            '--sd-chip-input-suggestion-bg-hover': CHIP_INPUT_SUGGESTIONS.itemBgHover,
+            '--sd-chip-input-suggestions-empty-color': CHIP_INPUT_SUGGESTIONS.emptyColor,
+            '--sd-chip-input-suggestions-empty-font-size': CHIP_INPUT_SUGGESTIONS.emptyFontSize,
+            '--sd-chip-input-suggestions-empty-line-height': CHIP_INPUT_SUGGESTIONS.emptyLineHeight,
         };
-        return (h("sd-field", { key: 'ea69cfd9fd589f3657f3dff1f73196f684d35d80', 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: 'b4948c02ea157000002661ca9374b300af5e71a8', 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.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), h("div", { key: 'ad36a2c8dd5b8d8ad00d7130da75e92a1fb3b350', class: {
+        const isMaxReached = this.maxCount != null && this.internalValues.length >= this.maxCount;
+        const showResetArea = (this.useReset && this.internalValues.length > 0) || this.maxCount != null;
+        const suggestions = this.suggestions ?? [];
+        const recommendedItems = this.recommendedItems ?? [];
+        const showAutocomplete = this.focused &&
+            this.inputValue !== '' &&
+            !this.suppressSuggestions &&
+            (suggestions.length > 0 || this.loadingSuggestions);
+        const showRecommendations = this.focused &&
+            this.inputValue === '' &&
+            !this.suppressRecommendations &&
+            (recommendedItems.length > 0 || this.loadingRecommendedItems);
+        const showDropdown = showAutocomplete || showRecommendations;
+        const dropdownItems = showAutocomplete ? suggestions : recommendedItems;
+        const isDropdownLoading = showAutocomplete
+            ? this.loadingSuggestions && suggestions.length === 0
+            : this.loadingRecommendedItems && recommendedItems.length === 0;
+        const suggestionBoxStyle = {
+            width: `${this.chipInputRef?.offsetWidth ?? 0}px`,
+            display: 'flex',
+            flexDirection: 'column',
+            boxSizing: 'border-box',
+            background: '#FFFFFF',
+            borderRadius: CHIP_INPUT_SUGGESTIONS.radius,
+            boxShadow: '2px 2px 12px 2px rgba(0, 0, 0, 0.1)',
+            maxHeight: CHIP_INPUT_SUGGESTIONS.maxHeight,
+            minHeight: '0',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            outline: 'none',
+        };
+        const suggestionItemStyle = {
+            display: 'flex',
+            alignItems: 'center',
+            gap: CHIP_INPUT_SUGGESTIONS.itemGap,
+            padding: `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingRight} ` +
+                `${CHIP_INPUT_SUGGESTIONS.itemPaddingY} ${CHIP_INPUT_SUGGESTIONS.itemPaddingX}`,
+            fontSize: CHIP_INPUT_SUGGESTIONS.itemFontSize,
+            lineHeight: CHIP_INPUT_SUGGESTIONS.itemLineHeight,
+            fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeight,
+            fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
+            color: CHIP_INPUT_SUGGESTIONS.itemColor,
+            cursor: 'pointer',
+            userSelect: 'none',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        };
+        const suggestionEmptyStyle = {
+            padding: '12px',
+            textAlign: 'center',
+            fontSize: CHIP_INPUT_SUGGESTIONS.emptyFontSize,
+            lineHeight: CHIP_INPUT_SUGGESTIONS.emptyLineHeight,
+            fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
+            color: CHIP_INPUT_SUGGESTIONS.emptyColor,
+        };
+        return (h("sd-field", { key: '6ff0688cd9a076cd81693364bfeb6a98b5bf018e', 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: '0c6ae92de4dcb44ed4fbcd12f1dddef93cec12db', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: 'df111f3110b444ed296db8c6b7f00d9209f858af', 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,
@@ -287,7 +486,20 @@ const SdChipInput = class {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, h("input", { key: '6ea7cdaa1011543b6c7784561d3752e4ed4a9d7d', 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: '65c366e84ba427704a9c89f6f5c6fdeeb5889554', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: 'e78f17df8e2fd9a91cc5f0450d22542720adef1b', class: "sd-chip-input__divider" }), h("sd-text-link", { key: '298bd3ce40e0c0c4b91337548d6c6887d5239ccc', 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 }))))));
+                    : '' }, h("input", { key: '8e170c84cedab36edbdd0a84e7e2e1ac0fba9632', 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 }))), showResetArea && (h("div", { key: '5b30bb4f89c9d3c9b18870acccad22bd97e1d748', class: "sd-chip-input__reset" }, this.inputValue === '' && h("span", { key: '6fbf74a5a77b70789a609d28f5c4b6dd2aab57ef', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'fbb21a27bdd2aa38870cfd8d16b7e5293769eaf3', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '83626145602b13d7a00ef955a6db59f41c152529', 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 })))), showDropdown && (h("sd-portal", { key: '1682a89b513098f192f776af782aa9ee432574e8', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '3efb484bd5616e411824f7014a759a34a9e93d8b', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: 'b5b1d5e6db03f6fe60864b6c19e9b2c753468447', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), dropdownItems.map((item, i) => (h("div", { key: item, class: {
+                'sd-chip-input__suggestion-item': true,
+                'sd-chip-input__suggestion-item--active': i === this.activeSuggestionIndex,
+            }, role: "option", tabIndex: -1, "aria-selected": i === this.activeSuggestionIndex, style: i === this.activeSuggestionIndex
+                ? {
+                    ...suggestionItemStyle,
+                    background: CHIP_INPUT_SUGGESTIONS.itemBgHover,
+                    color: CHIP_INPUT_SUGGESTIONS.itemColorHover,
+                    fontWeight: CHIP_INPUT_SUGGESTIONS.itemFontWeightSelected,
+                }
+                : suggestionItemStyle, onMouseDown: e => {
+                e.preventDefault();
+                this.addChip(item);
+            } }, item)))))))));
     }
     static get watchers() { return {
         "values": [{
@@ -295,6 +507,12 @@ const SdChipInput = class {
             }],
         "errors": [{
                 "errorsChanged": 0
+            }],
+        "suggestions": [{
+                "suggestionsChanged": 0
+            }],
+        "recommendedItems": [{
+                "recommendedItemsChanged": 0
             }]
     }; }
 };

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-CAxodB5I.js';
 import { p as progressTokens } from './component.progress-D1vaasIp.js';
-import { s as systemTokens } from './system-j2khhcHY.js';
+import { s as systemTokens } from './system-BJfiMC9H.js';
 
 const spinner = {
 	color: {
@@ -70,7 +70,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        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)));
+        return (h(Host, { key: '35b4dc433f5e2bbd02dc3422b286da179472082f', style: hostStyle }, h("svg", { key: 'de1d3e44eccf421491a1107ba234e1562917945b', 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: 'b0a54a2e155222a416a6bdcb75f4fe54d9de8270', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '6bc314b3fce758d41a3499e9d87b7158b15777a5', 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: '16ec46b178d5f2f2f5ad245703c2f4362b8df261', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c199799d2466c75f91f1bc1f20fdb7e71c64ba0e', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

package/dist/esm/sd-confirm-modal_2.entry.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: '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 => {
+        return (h("div", { key: '51fb051b436cc511aeac2f578832a267e12ef3c4', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'dd9605e312eac8b0602ec558ad5439ea3daa7aa7', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '5027ec2d03731338a9197f7b5b910d2adbf83f0e', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '8456707355cc779c169b56abc16b0949909b829e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'd11cb38e749f54ce5767ba9b5cca0129df742aca', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'de653458605a9591d7c66d644a143d0f33738b28', 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: '0517e400485551ab21f0f5452af764b5ede7a76d', 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: '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() }))));
+            } })) : (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: 'd542a08caee30ed7eb1d22ed85a51be6e1f6855e', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '02d012e899969ee55cba43c11d9caeaaff65a348', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'fd50d151e515646e5bef5658a1b05b2e26b21461', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '0c2092edf0866a8b1f4f432b176d78eedd9655d6', 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: '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 }))))));
+        return (h(Host, { key: 'f40dcf4fa7e2ee7b4023be11be2b9361ec167610', style: hostStyle }, h("div", { key: '02bab8da4e09156340e8e9badef25755b57193d5', class: "sd-loading-modal" }, h("div", { key: '776833f7f85a5587dda59fe75e36ebb4b9109c3e', 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: '4bb9e434a4a2d6be6dbbe2ed4e89563bf7278c65', 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: '5da761513fdc38e5e646f72f75072e25d5313384', class: "sd-loading-modal__button" }, h("sd-button", { key: '2bf9beb84ab4a6c1e6793db453e04b947c432d13', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

package/dist/esm/sd-date-picker_7.entry.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: '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 => {
+        return (h("sd-field", { key: '9e1e5cb7419027db803248a657d0d134be049637', 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: 'fbd9adeaa08d19cac34b045aba2b3fbb8d4adc8c', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, 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 })))));
+            } }, h("sd-date-picker-trigger", { key: 'd51161c4b1eedcfd90832c9b6d049559ff5df08b', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'd6588d3991eff39eb717d4211b38d68f093aace5', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '0dc6a8074fcfa63630aab7f0b126caa9f4c7b234', 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: '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 () => {
+        return (h("sd-field", { key: '64e7a3ba5e223341336248ba31e621b4416987fd', 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: 'b66e286c35cc14c1eb02badcaaff24b38ff0a7b3', class: "sd-input__content" }, h("slot", { key: 'dc8b900eb2b38c18b85663bc930e810be77bdbd7', name: "prefix" }), h("input", { key: '36d35464338838aaaeff6f728020241d33a493ec', 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: '4f30d4a59794c0692f367d41af4311e191c5427b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '247da41512f20d8e562f345b08bd5bc13486734b', 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: '5ae70d65c531db0bc57d17f85c328a275f7aab2b', 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: '70c596ef0072bf369bd59e2c58d0a6f8c6fd1b11', 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: '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: {
+        return (h("sd-field", { key: 'ad212dcbaf8e19cac070e6bdfa292ca614480fbc', 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: 'b9c403df166e2f05f815ebf3851b6517b8afbd2a', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, 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()
+            } }, this.useButton && (h("button", { key: '206f45b19bf8dd56b65ff55fb65d760e36d80ba7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'd39cadc9a83cf7a0170144b8734a90f71d7aa9d1', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : 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: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '0c97309540467d56ee3415001df7a027ba581a3d', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '9462f0c7ac028c038894ad184c7cf052e366e48c', 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: '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()
+            } }), this.inputSuffix && h("span", { key: 'fdd4f4e680fe5de55cb68c848615ec6b00f00430', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '8cdfcc46a010fb0f503b48c34290fd096403524a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'ec8826370cd9d8c6054ca6ab216de6baa62d90db', 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: '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 }))));
+        return (h("sd-field", { key: '526fc1a73f13e5170125a570c5a1c8459931aa25', 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: 'e3c52fccc564a2488eb9e0d9399437b76e919c6a', class: "sd-textarea__content" }, h("textarea", { key: '3253873da3b9591e64a6dfd170c8d9ccb4861599', 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": [{

package/dist/esm/sd-date-range-picker-calendar.entry.js

@@ -265,7 +265,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '91ba95cf0786d59363ac6b72e9c8f91d1802feee' }, h("div", { key: '98f66737a15e5c3129dd20f674736115a4fad42e', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'd9f326b485864484ed786cb172d3bd33136987ea', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'df7d835ac0da6788f08c7963ed04ed98b7fd6091', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '71f25effececd0b83d9b33201230dc615ba87a30' }, h("div", { key: 'f075474fb0be9f8e8562a013532b3cdbaadee069', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '4dfa1d65b971f7d80f0799482c8ce41522200a94', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '20149f97a5115115cc49894383ca7f989ba2b904', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-CAxodB5I.js';
-import { s as systemTokens } from './system-j2khhcHY.js';
+import { s as systemTokens } from './system-BJfiMC9H.js';
 
 const DIVIDER_COLORS = {
     default: systemTokens.color.divider.default,
@@ -17,7 +17,7 @@ const SdDivider = class {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: '8282aae8e5cd26630c54f4347cd26f544672d15d', style: hostStyle }, h("hr", { key: '94df7dc7465b05ecad6527da2c008a4ff503f034', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: '886ca68599a925678d7c598daeff3bf653db513d', style: hostStyle }, h("hr", { key: 'e213413f041cda5d18a74f8c0225c840d92f7dac', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
 };
 SdDivider.style = sdDividerCss();

package/dist/esm/sd-dropdown-button.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CAxodB5I.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 import { B as BUTTON_CONFIG, g as getPresetName, f as buttonTokens, d as PRESET_BORDER_COLORS$1, P as PRESET_ICON_COLORS$1, c as PRESET_TEXT_COLORS$1, e as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button.config-DjcjlPt7.js';
-import { s as systemTokens } from './system-j2khhcHY.js';
+import { s as systemTokens } from './system-BJfiMC9H.js';
 
 class DropdownManager {
     static instance;
@@ -141,6 +141,13 @@ const DROPDOWN_CHEVRON_ICON_SIZE = {
     sm: 12,
     md: 16,
 };
+// 버튼 자체의 min-width (px). split 여부에 따라 chevron 버튼이 추가되므로 별도 값을 지정.
+// TODO: 디자인 토큰으로 관리될 때 대체 예정
+const DROPDOWN_BUTTON_MIN_WIDTH = {
+    xs: { default: 44, split: 60 },
+    sm: { default: 70, split: 76 },
+    md: { default: 100, split: 106 },
+};
 const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.button.bg.disabled;
 const DROPDOWN_DISABLED_TEXT = buttonTokens.button.text.disabled;
 const DROPDOWN_DISABLED_ICON = buttonTokens.button.icon.disabled;
@@ -169,6 +176,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     isAnimatingOut = false;
     itemIndex = -1;
     triggerRef;
+    splitContainerRef;
     menuRef;
     closeAnimationTimer;
     click;
@@ -347,10 +355,11 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         return classes.join(' ');
     }
     renderDropdown(preset) {
-        if ((!this.isOpen && !this.isAnimatingOut) || !this.triggerRef)
+        const anchorRef = this.split ? this.splitContainerRef : this.triggerRef;
+        if ((!this.isOpen && !this.isAnimatingOut) || !anchorRef)
             return null;
-        return (h("sd-portal", { open: this.isOpen, parentRef: this.triggerRef, onSdClose: this.closeDropdown }, h("div", { style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
-                '--sd-dropdown-button-menu-min-width': `${this.triggerRef.offsetWidth}px`,
+        return (h("sd-portal", { open: this.isOpen, parentRef: anchorRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
+                '--sd-dropdown-button-menu-min-width': `${anchorRef.offsetWidth}px`,
                 '--sd-dropdown-button-menu-item-color': PRESET_MENU_ITEM_COLORS[preset],
                 '--sd-dropdown-button-menu-item-active-bg': PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS[preset],
                 '--sd-dropdown-button-menu-item-active-color': PRESET_MENU_ITEM_ACTIVE_COLORS[preset],
@@ -364,7 +373,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
                         this.itemIndex = index;
                     }
                 } }, item.icon && (h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: sanitizeInlineHtml(item.label) })));
-        })))));
+        }))));
     }
     renderChevron(size) {
         const iconName = this.split ? 'etc' : 'caretDown';
@@ -376,10 +385,11 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     render() {
         const { config, preset } = this.resolvedConfig;
         const triggerStyle = this.getTriggerStyle(config, preset);
+        const minWidth = DROPDOWN_BUTTON_MIN_WIDTH[config.size];
         if (this.split) {
-            return (h("div", { class: "sd-dropdown-button sd-dropdown-button--split" }, h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, h("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
+            return (h("div", { class: "sd-dropdown-button sd-dropdown-button--split", ref: el => (this.splitContainerRef = el), style: { minWidth: `${minWidth.split}px` } }, h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, h("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
         }
-        return (h("div", { class: "sd-dropdown-button" }, h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, h("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
+        return (h("div", { class: "sd-dropdown-button" }, h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: { ...triggerStyle, minWidth: `${minWidth.default}px` } }, h("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{