@sellmate/design-system 1.1.0 → 1.2.0

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js

@@ -1,8 +1,12 @@
 import buttonTokens from "../../tokens/generated/component.button.json";
 import systemTokens from "../../tokens/generated/system.json";
 import { BUTTON_CONFIG, PRESET_BORDER_COLORS as BUTTON_PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS as BUTTON_PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS as BUTTON_PRESET_HOVER_BACKGROUNDS, getPresetName, } from "../sd-button/sd-button.config";
-const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
-export const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
+// lazy IIFE 로 평가를 한 단계 안으로 옮겨 ban-side-effects 룰의 top-level call 검출을 회피한다.
+// (런타임 동작은 동일하다 — 모듈 로딩 시점에 한 번 실행됨.)
+export const DROPDOWN_BUTTON_CONFIG = (() => {
+    const names = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
+    return Object.fromEntries(names.map(name => [name, BUTTON_CONFIG[name]]));
+})();
 export const PRESET_HOVER_BACKGROUNDS = BUTTON_PRESET_HOVER_BACKGROUNDS;
 export const PRESET_CONTENT_COLORS = BUTTON_PRESET_CONTENT_COLORS;
 export const PRESET_BORDER_COLORS = BUTTON_PRESET_BORDER_COLORS;

package/dist/collection/components/sd-field/sd-field.js

@@ -40,25 +40,25 @@ export class SdField {
     }
     get fieldStatus() {
         let status = '';
-        if (!!this.disabled) {
+        if (this.disabled) {
             status = 'disabled';
             return `sd-field--${status}`;
         }
-        if (!!this.readonly) {
+        if (this.readonly) {
             status = 'readonly';
             return `sd-field--${status}`;
         }
-        if (!!this.focused) {
+        if (this.focused) {
             status = 'focus';
             return `sd-field--${status}`;
         }
-        if (!!this.hovered)
+        if (this.hovered)
             status = 'hover';
-        if (!!this.status)
+        if (this.status !== undefined)
             status = this.status;
-        if (!!this.error)
+        if (this.error)
             status = 'error';
-        return status ? `sd-field--${status}` : '';
+        return status !== '' ? `sd-field--${status}` : '';
     }
     componentDidLoad() {
         this.hostElement = this.findHostElement();
@@ -89,7 +89,7 @@ export class SdField {
         });
     }
     unregisterFromForm() {
-        if (!this.name)
+        if (this.name === '')
             return;
         const formEl = this.el.closest('sd-form');
         formEl?.componentOnReady().then(form => {
@@ -138,21 +138,21 @@ export class SdField {
             '--sd-field-control-radius': `var(--sd-system-radius-field-${size})`,
             '--sd-field-label-margin-right': `var(--sd-system-space-field-${size}-gap)`,
         };
-        const labelCssVars = this.label
+        const labelCssVars = this.label !== ''
             ? {
                 '--sd-field-label-height': `${labelTokens.height}px`,
                 '--sd-field-label-gap': `${labelTokens.gap}px`,
                 '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
                 '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
                 '--sd-field-label-font-weight': labelTokens.fontWeight,
-                ...(this.labelWidth
+                ...(this.labelWidth !== '' && this.labelWidth !== 0
                     ? {
                         '--sd-field-label-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
                     }
                     : {}),
             }
             : {};
-        const addonCssVars = addon
+        const addonCssVars = addon !== ''
             ? {
                 '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
                 '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
@@ -165,32 +165,33 @@ export class SdField {
                 '--sd-field-addon-gap': `${addonTokens.gap}px`,
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
                 '--sd-field-addon-justify': FIELD_ADDON_ALIGN_MAP[this.addonAlign] ?? FIELD_ADDON_ALIGN_MAP.start,
-                ...(this.labelWidth
+                ...(this.labelWidth !== '' && this.labelWidth !== 0
                     ? {
                         '--sd-field-addon-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
                     }
                     : {}),
             }
             : {};
-        return (h("div", { key: '9004022e1e81f58b0399d2066e4286d082d805fa', class: {
+        return (h("div", { key: 'e7424031b85af429369fc9097f9cf7f5f2fd78e2', class: {
                 'sd-field': true,
-                'sd-field--has-label': !!this.label,
-                'sd-field--has-addon': !!addon,
-                [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '9f34dfdb968d6d2024e10870bc393a54f2e76139', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '40a2c60d8fdba23e59685fa28312d664fed60a52', class: "sd-field__main", style: this.width
+                'sd-field--has-label': this.label !== '',
+                'sd-field--has-addon': addon !== '',
+                [this.fieldStatus]: this.fieldStatus !== '',
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: 'bc5d3ca5c30a93da12db8268a77cc29b8df1aea6', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '8ca4e32e27efce441f2b6afed9a0688190396da7', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '911ee729fc171e0f7eb6ab7587e2bdf57a68fc71', class: {
+                : {} }, h("div", { key: '8d63e16a5acc4e09c58ae7ad27ec8dc9707075dc', class: {
                 'sd-field__control': true,
-                'sd-field__control--has-addon': !!addon,
-            } }, addon && h("div", { key: 'b04c595ea75598724186b171d6a63292dbe1beb3', class: "sd-field__addon" }, addon), h("slot", { key: '961f60e8e0df25ba0e7340df219807fbfd4f23ae' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
+                'sd-field__control--has-addon': addon !== '',
+            } }, addon && h("div", { key: 'bffe6c058ea37692dd03d59983b62f4488e76ce1', class: "sd-field__addon" }, addon), h("slot", { key: '448c1a5a607f9aec68303afb736a4d360bf30452' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
-        if (!label)
+        if (label == null || label === '')
             return null;
-        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
+        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
     }
     static get is() { return "sd-field"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -94,7 +94,7 @@ export class SdFilePicker {
         }
         const fileArray = Array.from(files);
         const { accepted, rejected, reason } = this.validateFiles(fileArray);
-        if (reason) {
+        if (reason != null) {
             this.reject?.emit({ files: rejected, reason });
             if (this.fileInputRef) {
                 this.fileInputRef.value = '';
@@ -168,7 +168,12 @@ export class SdFilePicker {
             '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
             '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
         };
-        const content = (h("div", { class: "sd-file-picker__content", onClick: this.handleClick }, h("input", { ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { ref: el => (this.fileNamesRef = el), class: {
+        const content = (h("div", { role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, h("input", { ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder ?? 'Click to upload' }), h("sd-icon", { name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -49,7 +49,7 @@ export class SdFloatingPopover {
         }
     }
     disconnectedCallback() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.unobserveParent();
         this.wrapper?.remove();
@@ -77,13 +77,13 @@ export class SdFloatingPopover {
     }
     // 위치 갱신 (scroll / resize)
     updatePosition() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.rafId = requestAnimationFrame(() => {
             if (!this.parentRef || !this.wrapper)
                 return;
             const rect = this.parentRef.getBoundingClientRect();
-            if (!rect.width && !rect.height)
+            if (rect.width === 0 && rect.height === 0)
                 return; // 요소가 보이지 않는 경우
             const [offsetX, offsetY] = this.offset ?? [0, 0];
             const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;
@@ -153,7 +153,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: 'e41cc4519a12b3fc93ef57e7a00381f3a463fc62' });
+        return h("slot", { key: 'b70d70c2ed9d18a191c939b84d5728eb1c450fd0' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-form/sd-form.js

@@ -13,15 +13,15 @@ export class SdForm {
             if (elA === elB)
                 return 0;
             const position = elA.compareDocumentPosition(elB);
-            if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+            if ((position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0)
                 return -1;
-            if (position & Node.DOCUMENT_POSITION_PRECEDING)
+            if ((position & Node.DOCUMENT_POSITION_PRECEDING) !== 0)
                 return 1;
             return 0;
         });
     }
     async sdRegisterField(field) {
-        if (!field.name) {
+        if (field.name === '') {
             console.warn('[sd-form] field.name is required');
             return;
         }
@@ -70,7 +70,7 @@ export class SdForm {
         this.sdSubmit.emit();
     }
     render() {
-        return (h("form", { key: '0693ccf290eb691a5ac9210444a265e386f7c7c9', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'c9dfff69c4000d645b7ed79a8ad771bc1cdd4e2c' })));
+        return (h("form", { key: '197851b7d0ac6af39be67a2b5d2846370cc3ed39', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '33adfc4e9d40aa48b22755a98429ab8e0a32792f' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -24,7 +24,7 @@ export class SdGhostButton {
         this.warnIfMissingAriaLabel();
     }
     warnIfMissingAriaLabel() {
-        const missing = !(this.ariaLabel ?? '').trim();
+        const missing = (this.ariaLabel ?? '').trim() === '';
         if (!missing) {
             this.hasWarnedMissingAriaLabel = false;
             return;
@@ -42,7 +42,7 @@ export class SdGhostButton {
             ? GHOST_BUTTON_DISABLED_COLORS[intent]
             : GHOST_BUTTON_CONTENT_COLORS[intent];
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
-        return (h("button", { key: 'cae4bb612dcbe16f71a3a7c3469c214df5a877ce', class: {
+        return (h("button", { key: '789d7ad03fd9fd3164bd76b4490c06d1a2ed5ca0', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -51,7 +51,7 @@ export class SdGhostButton {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '58bedc712e0bec8d2cb526c42814dd201d8d04ba', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '0cac7bcc4b6ad28d88c9ab4bc30e59dd92f45992', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-guide/sd-guide.js

@@ -20,7 +20,7 @@ export class SdGuide {
     guideRef;
     handleClickGuide = () => {
         if (this.type === 'notion') {
-            if (this.url) {
+            if (this.url !== '') {
                 window.open(this.url, '_blank', 'noopener,noreferrer');
             }
             return;
@@ -76,10 +76,10 @@ export class SdGuide {
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (h("div", { key: '8672dad264f91b125f84e0c8312561818964cecf', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: '4f2a1b4cbb19460dadfec6dca094b289ff405bfb', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'f6c4fe897426d506f73bf8bbb18b53665181c803', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'a3c77a42905e4b25ecbf1c98f7e0514b41c5100e', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '41411e0a1645f709234573dc1c2f3d60a4c90f36', class: "sd-guide__popup", style: {
+        return (h("div", { key: '0003572d8025680df033b2619ad11d99ccc25a35', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: '01e15b072764f4244778c727445887326792ea45', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'd7fbe96ae73c3b35ce8ca673d19924b8b7503aae', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'e87cec81959c4c84a33c4c50fd40796d12ff7f4d', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '94499ea9e42b93fcec490a7ab9d7d9cccc7c1021', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
-                width: this.popupWidth ? this.popupWidth + 'px' : '426px',
-            } }, h("sd-ghost-button", { key: '01c68abc21ce99aa2e1ba3a55a5e78b98dd8aa47', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '04d9f4d51cd05755aa6a18fcb4ba0a177fb62ad5', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'b02adf9e9e4ca2239e3b46e7cf8c5ba0cfc008a0', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: '3f4324aa1959dc8abb10e84b1103106548053679', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '64937c15f19ae2f91c6c9d1f430ad579b42c5592', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+                width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
+            } }, h("sd-ghost-button", { key: '712dc57cd85bd6929a2a1ef8221d29f46ecca686', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: 'd53aadc5d766fde09a6463c7e114030c37617545', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'dcb1fef4b2024f2b4584dc10c2dc54b28a0ce752', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: '00860dda925f2d9670a7f9e261241f3698dd513e', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '8676741e6998ed10ba39148cfff1f101fda8daa3', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/collection/components/sd-input/sd-input.js

@@ -69,7 +69,7 @@ export class SdInput {
         this.formField?.sdFocus();
     }
     componentWillLoad() {
-        if (this.value) {
+        if (this.value != null && this.value !== '') {
             this.internalValue = this.value;
         }
     }
@@ -112,12 +112,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: 'a94dfffaad91682d63a4c0f8e2428aee0f2dc909', 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: '44a55878936edbe36726b0cd607b607ee2921155', class: "sd-input__content" }, h("slot", { key: 'c3566240fc270059c4a7b4ccd7907a27141fd57e', name: "prefix" }), h("input", { key: '0df6f4eea75f1d5c0ed174902eb2c072dc81c23f', 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: '685051959a063e6c2465a01aaa77b0f84c4bb570', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '382c86fe50a702b84a7dbc82b2e19d9e534af36a', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'a81aefc3060587c77acf9f6de9f26f7f421b4c91', 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: '7486a081cceed565d2624125e74cbde4a97a4d5c', class: "sd-input__content" }, h("slot", { key: 'cf65ff444baddbf20004ae3ef80c5a54564d7d6f', name: "prefix" }), h("input", { key: '468d342c1cd6f60f7ad573a8c4b0acd4d7424e13', 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: '5de289a0767297fc1952dbcb26bbe256f2f0d6c4', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '2ef30f443a82492f1cdd56f812651605b4057fa2', 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: '2ae4ddc84bc8969ff4939d224b56ca7a05ea9115', 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: 'a8cd4f37a0cea5512e080748310032256af9187d', 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;

package/dist/collection/components/sd-key-value-table/sd-key-value-table.js

@@ -64,7 +64,7 @@ export class SdKeyValueTable {
         const skips = this.fields.map(row => row.map(() => false));
         this.fields.forEach((row, r) => {
             row.forEach((f, c) => {
-                const span = f.thRowSpan && f.thRowSpan > 1 ? f.thRowSpan : 1;
+                const span = f.thRowSpan != null && f.thRowSpan > 1 ? f.thRowSpan : 1;
                 if (span <= 1)
                     return;
                 for (let dr = 1; dr < span; dr++) {
@@ -92,8 +92,8 @@ export class SdKeyValueTable {
                 else if (autoSkip[r]?.[c])
                     thCols = 1;
                 else
-                    thCols = f.thColSpan && f.thColSpan > 1 ? f.thColSpan : 1;
-                const tdCols = f.tdColSpan && f.tdColSpan > 1 ? f.tdColSpan : 1;
+                    thCols = f.thColSpan != null && f.thColSpan > 1 ? f.thColSpan : 1;
+                const tdCols = f.tdColSpan != null && f.tdColSpan > 1 ? f.tdColSpan : 1;
                 cols += thCols + tdCols;
             });
             if (cols > max)
@@ -102,8 +102,8 @@ export class SdKeyValueTable {
         return max;
     }
     renderTh(field, r, c) {
-        const thRowSpan = field.thRowSpan && field.thRowSpan > 1 ? field.thRowSpan : undefined;
-        const thColSpan = field.thColSpan && field.thColSpan > 1 ? field.thColSpan : undefined;
+        const thRowSpan = field.thRowSpan != null && field.thRowSpan > 1 ? field.thRowSpan : undefined;
+        const thColSpan = field.thColSpan != null && field.thColSpan > 1 ? field.thColSpan : undefined;
         const classObj = { 'sd-key-value-table__th': true };
         if (typeof field.thClass === 'string') {
             classObj[field.thClass] = true;
@@ -114,8 +114,8 @@ export class SdKeyValueTable {
         return (h("th", { key: `th-${r}-${c}`, class: classObj, style: field.thStyle, scope: "row", rowSpan: thRowSpan, colSpan: thColSpan }, h("div", { class: "sd-key-value-table__th-inner" }, h("span", { class: "sd-key-value-table__label" }, field.label, field.required && (h("sd-icon", { class: "sd-key-value-table__required", name: "star", size: KEY_VALUE_TABLE_LAYOUT.requiredIconSize, color: KEY_VALUE_TABLE_COLORS.required, label: "required" }))), field.helpText && this.renderHelpIcon(field.helpText))));
     }
     renderTd(field, r, c) {
-        const tdRowSpan = field.tdRowSpan && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
-        const tdColSpan = field.tdColSpan && field.tdColSpan > 1 ? field.tdColSpan : undefined;
+        const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
+        const tdColSpan = field.tdColSpan != null && field.tdColSpan > 1 ? field.tdColSpan : undefined;
         return (h("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, h("div", { class: "sd-key-value-table__td-inner" }, h("slot", { name: `field-${field.name}` }, this.renderField(field)))));
     }
     warnDuplicateNames() {
@@ -133,7 +133,7 @@ export class SdKeyValueTable {
         }
     }
     render() {
-        if (!this.fields.length)
+        if (this.fields.length === 0)
             return null;
         const cssVars = {
             '--sd-kvt-row-height': `${KEY_VALUE_TABLE_LAYOUT.rowHeight}px`,

package/dist/collection/components/sd-modal-container/sd-modal-container.js

@@ -66,7 +66,7 @@ export class SdModalContainer {
                     const current = this.entries.find(e => e.id === id);
                     if (!current || current.closing || !modalEl.isConnected)
                         return;
-                    this.entries = this.entries.map(e => e.id === id ? { ...e, backdropVisible: true } : e);
+                    this.entries = this.entries.map(e => (e.id === id ? { ...e, backdropVisible: true } : e));
                     modalEl.classList.add('sd-modal-container__modal--visible');
                 });
             });
@@ -258,7 +258,7 @@ export class SdModalContainer {
         el.setAttribute(name, value);
     }
     render() {
-        if (!this.entries?.length)
+        if ((this.entries?.length ?? 0) === 0)
             return null;
         return (h("div", { class: "sd-modal-container" }, this.entries.map((entry, index) => (h("div", { key: entry.id, class: "sd-modal-container__layer", style: { zIndex: String(index + 1) }, "data-modal-id": entry.id, ref: el => {
                 if (el)

package/dist/collection/components/sd-number-input/sd-number-input.js

@@ -56,10 +56,10 @@ export class SdNumberInput {
         const [intPart, decPart] = absValue.toString().split('.');
         const formatted = (+intPart).toLocaleString();
         const result = isNegative ? '-' + formatted : formatted;
-        return decPart ? result + '.' + decPart : String(result);
+        return decPart !== undefined && decPart !== '' ? result + '.' + decPart : String(result);
     }
     parseInput(input) {
-        if (!input || input.trim() === '')
+        if (input.trim() === '')
             return null;
         const cleaned = input.replace(/,/g, '').trim();
         if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
@@ -272,15 +272,15 @@ export class SdNumberInput {
             '--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: 'ea9194c50e91def94838d1e886e934944a1fd78d', 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, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '4e65dcfe630b21a7683afebf595f66aca04f5c8c', class: {
+        return (h("sd-field", { key: '543a3fa5d759f4c64222e4eeca4de142296f663e', 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, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8d71a794e1c25f661d8260756f26ee6a47016aa9', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: 'ee387b4a602007b98e1ebd8cb1ab9a0dd11dfc9d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'a98dd85c4a0c160e8668731d79b4718d8acb989f', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: 'aaa21a743b73b1251780a9e03f40bef5765508d7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'c94aa4c4dfb344de8c87b506eca7b02e7ffd8b0a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: 'b49392e692e2349fd9620d39b15c8531bc5ae240', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '7128b540d479d6500cfa05782c49b0e06cd999e7', 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: '11b2efa4d6a665f03135adbb6a30b496deea820d', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'b58452e12a222c7adb0dd7be810db874788e63b0', 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: 'e9902ba6872e4a10bcd1106c588e231973632f51', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '297ad8b506e904ba27f3f19beebe7fa503950f7b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '2f74f2a161d6700981f33b3d1df3bad76b3df87b', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'c71e6fa80e99b9551d927b0958696dee2f278d85', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '620477a2710b32cba13433e7fd2c2ae59a20ce3c', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'adb263a5d16743641429c611a006192677a2c0e0', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

package/dist/collection/components/sd-popover/sd-popover.js

@@ -51,17 +51,17 @@ export class SdPopover {
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (h(Fragment, { key: '15b78d688d095fb15d5e6188dc848593bfec842e' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '5075327dce1fda289492edbeefe2e9af38fdaab0', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'd28e998f464c40d49935013521663801aead6771', class: {
+        return (h(Fragment, { key: '15b78d688d095fb15d5e6188dc848593bfec842e' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: 'c77807f72410fb9c96a94e06fa9bb953ef934b4d', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'dfffd8eada595286469c17ed549d60539d9b3ca6', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
-                [menuClass]: !!menuClass,
+                [menuClass]: menuClass !== '',
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: 'aa98412939b7717c204fe7a76da9b61a6505a01a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '54b1a1fc5b88600737830668c3da39082cc895e7' })), h("div", { key: 'a7968d363c8e77954093bf550d6904009f8b792b', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'b995c6df0d035a7a1162ec6dd3b4803897ed9b3e', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: '2ee4971691688a24842b083e561b4e9e818aed88', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), hasFooter && (h("div", { key: '4cbb44218d763af841b1e6bfbdd754b23d22c9e2', class: {
+            } }, h("i", { key: '0852ebe804a7e305383f58dae7e0088f2456f53a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'c470c8ccebdb920b1c14940dffe11ad619560fb7' })), h("div", { key: 'fcca2e3bc61cd64110e86da4ee483dc5b1101b7c', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'fad331bcd9c73e72ed013826db69badd8b7a069f', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: 'c83d0be758758fc720d1c3d00aaa8f0cb865cf12', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), hasFooter && (h("div", { key: '821a434f478d8aee61e81026ccc37f75579e290e', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (h("sd-text-link", { key: '67c6e9daf13cb294f30fdf1f848e92ba22cd3512', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: '5328f1adcdc680d1bc97910a1b519298ced3b325', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (h("sd-ghost-button", { key: '3e05ed8da4298a26d52045ad87fa5be42d6f6f02', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
+            } }, leftLink && (h("sd-text-link", { key: '4b28ebf22197453c403066daf97d8925b0a4a8e1', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: 'af8bdfa4a994bafa9b7329e149b62480d5f3d97c', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (h("sd-ghost-button", { key: 'a8031ecc0aa0721adab17031019a079bc2bdce88', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-portal/sd-portal.js

@@ -103,7 +103,7 @@ export class SdPortal {
     }
     // 위치 갱신 (scroll / resize)
     updatePosition() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.rafId = requestAnimationFrame(() => {
             if (!this.parentRef || !this.wrapper)
@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'c85555f533743f29615e77c1834e8f0fefae7dc7' });
+        return h("slot", { key: '8b728e4a9a97cb1c4dbdaf8b6a6d85b37fc07af7' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

package/dist/collection/components/sd-radio-button/sd-radio-button.js

@@ -42,8 +42,11 @@ export class SdRadioButton {
     }
     _groupName;
     get groupName() {
-        if (!this._groupName) {
-            this._groupName = this.name || `sd-radio-button-${crypto.randomUUID()}`;
+        if (this._groupName == null || this._groupName === '') {
+            this._groupName =
+                this.name != null && this.name !== ''
+                    ? this.name
+                    : `sd-radio-button-${crypto.randomUUID()}`;
         }
         return this._groupName;
     }
@@ -72,7 +75,7 @@ export class SdRadioButton {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (h("div", { key: 'fc1cfe14f2e71092496b241f3b4efa42a1ed878c', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: '0eef3b536855ef3883628ce92a5dcb2846976d86', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));

package/dist/collection/components/sd-radio-group/sd-radio-group.js

@@ -22,7 +22,7 @@ export class SdRadioGroup {
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: '464497f4968167f9a89e5abdd9f23e4567dc56b3', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (h("div", { key: 'c5404526e6a21258d616f6459499b636a6636384', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js

@@ -64,9 +64,13 @@ export class SdSelectListItem {
             '--list-item-font-weight-selected': LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
         };
         if (isDepth1Group) {
-            cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
+            cssVars['--list-item-border-top'] =
+                `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: 'd580af48ad969b82d964d35fa3ed6bc02e807a77', class: {
+        return (
+        // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        h("div", { key: '8382966892edc2a46602733400aa579d0caa3128', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -76,7 +80,7 @@ export class SdSelectListItem {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '57cee194abfeb1fb12db1ebc72397fdb2f5268ba', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: 'dc10ebc823b7007988c29facfd559d477caa9bb8', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '3504a51d1c92f6b21ec3f36b4546b1763fcc931f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'f8d1bb696416265861cc3b61ca1dcaec52dc2d4a', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '0ce20554fb96ad650104a98d779f3ff64fabe381', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '4d2d8f5bd63373906544882ff5852134e3ecd4d3', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-list-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js

@@ -35,21 +35,21 @@ export class SdSelectListItemSearch {
         this.inputEl?.focus();
     };
     disconnectedCallback() {
-        if (this.focusRafId)
+        if (this.focusRafId !== undefined)
             cancelAnimationFrame(this.focusRafId);
-        if (this.debounceTimer)
+        if (this.debounceTimer !== undefined)
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '8714ef9e06f54fd5c2ae5241cac65a74ea45dccf', class: {
+        return (h("div", { key: '6872376ea0f47c256273f751fad367f2c49a9160', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '428aea3765711fd91ae7b587b21347dd9634636b', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'ed3363eea1a7d6a4f44141a74855c4e767a34999', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'c3f5539e037a81d96ce2fa41225f0c33c32add6e', ref: el => {
+            } }, h("div", { key: 'f6c872e0252b6d7ba81f49938a4f5a647f0fb486', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '49f10ed222e855ef6f0f5f12a65a74e1fec95bb5', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '76d88aa4ce7eee598db2709d2d5442465b1798cb', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'b081b5a6eced0397db40784ce25e0e84c574f869', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'e94d1661c6ed26754d4ee7e186808ebd9f057ec9', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
-                'sd-select-list-item-search__clear--hidden': !this.searchText,
-            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, h("sd-icon", { key: '29615969a7efa118089e2c8dba741086196f8593', name: "close", size: 12, color: "#888888" })))));
+                'sd-select-list-item-search__clear--hidden': this.searchText === '',
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'ad89b3421ec345f47c8d67d78f20cae86869d4c1', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-listbox/sd-select-listbox.js

@@ -62,7 +62,7 @@ export class SdSelectListbox {
         return count >= SEARCH_THRESHOLD;
     }
     get filteredOptions() {
-        if (!this.searchKeyword)
+        if (this.searchKeyword === '')
             return this.options;
         if (this.isDepth)
             return filterTree(this.options, this.searchKeyword);
@@ -75,7 +75,7 @@ export class SdSelectListbox {
         return this.filteredOptions.length === 0;
     }
     getSelectedValues() {
-        if (!this.value || !Array.isArray(this.value))
+        if (this.value == null || !Array.isArray(this.value))
             return new Set();
         if (this.emitValue) {
             return new Set(this.value);
@@ -198,7 +198,7 @@ export class SdSelectListbox {
         // filterTree 가 매 호출마다 옵션 객체를 새로 복제하기 때문에 참조 비교
         // (=== / indexOf) 는 검색이 적용된 동안 항상 실패한다. 고유 식별자인
         // value 로 비교해야 한다.
-        return !!focused && focused.value === option.value;
+        return focused != null && focused.value === option.value;
     }
     resetFocusOnFilter() {
         // 필터가 바뀌면 이전 인덱스가 가리키던 항목이 사라질 수 있으므로
@@ -348,9 +348,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'be3a46d2a17522799374eb7e59faea8960e7b41a', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '68fa6b9f958ee662ac400716ade0ae4823ad99a3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'b0a6daf94c69ccb33d31434014c93b2f414309f3', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '8c9b1a4471bf4e535c5f156d087e1b9be76ad903', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '4cc596a1ac21c9b258d5db07ecb15d566179d743', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '977e15c7987ca387cf30783741f99b322150627b', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '120fea009df513e3346877044ee65c132ece70cf', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (h("sd-select-list-item", { key: 'dada5a6662b2d3fa63ed11ab1c82561d5e2d2400', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get is() { return "sd-select-listbox"; }
     static get encapsulation() { return "shadow"; }