@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-Cnwbjz1F.js';
-import { T as TooltipArrow } from './tooltipArrow-D8sr81Xw.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-0U6dRjlq.js';
+import { T as TooltipArrow } from './tooltipArrow-O5LOsHae.js';
 
 const popover = {
 	bg: "#07284A"};
@@ -21,11 +21,15 @@ const SdPopover = class {
     icon = 'helpOutline';
     iconSize = 12;
     label = '';
-    buttonSize = 'sm';
-    buttonVariant = 'primary';
+    name = 'primary_sm';
+    rightIcon;
+    ariaLabel = '';
+    disabled = false;
+    type = 'button';
     menuTitle;
     messages = [];
-    buttons = [];
+    leftLink;
+    button;
     menuClass = '';
     useClose = false;
     showChange;
@@ -54,19 +58,22 @@ const SdPopover = class {
         const color = this.color ?? '#01BB4B';
         const icon = this.icon ?? 'helpOutline';
         const iconSize = this.iconSize ?? 12;
-        const buttonSize = this.buttonSize ?? 'sm';
-        const buttonVariant = this.buttonVariant ?? 'primary';
         const menuClass = this.menuClass ?? '';
         const messages = Array.isArray(this.messages) ? this.messages : [];
-        const buttons = Array.isArray(this.buttons) ? this.buttons : [];
-        return (h(Fragment, { key: 'e576deaacba9395c5aeb76fd13baa0dc1e908d38' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: buttonSize, color: color, variant: buttonVariant, 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: '7520067b46527c22108292a659dd7e8fba85397c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'ba48632dd93359851bd87f4d55f2341653b0caab', class: {
+        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: '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: 'fce80e5bc6f49f5dbc1772f910eae0fb9bc09a6b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '32aaa3b00f7ac77d47fd2bc3c968a7a4c20102c6' })), h("div", { key: '29b3240126412070466acee7ee1d061d235ba51e', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '6cb5cf4531f573e93146a552b34831dc04851661', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: 'ba15bb4efc4af37dd89b0da61539f516cc31a2f3', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), buttons.length > 0 && (h("div", { key: '2656545909634d8c54e9d34155e699041b5512f5', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${buttons.length}` }, buttons.map((button, i) => (h("sd-button", { key: `btn-${i}`, ...button })))))), this.useClose && (h("sd-ghost-button", { key: '315bf10dde1b7cde5727beb101a1a1ad07966138', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
+            } }, 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: '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 })))))));
     }
 };
 SdPopover.style = sdPopoverCss();

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

@@ -0,0 +1,110 @@
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
+
+const popup$1 = {
+	header: {
+		bg: {
+			"default": "#07284A",
+			inverse: "#FFFFFF"
+		},
+		title: {
+			"default": "#FFFFFF",
+			inverse: "#004290"
+		},
+		typography: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontWeight: "700",
+			fontSize: "18",
+			lineHeight: "30"}
+	},
+	footer: {
+		bg: "#FFFFFF",
+		paddingX: "20",
+		paddingY: "8",
+		gap: "16"
+	},
+	bg: "#EEEEEE"
+};
+var popupTokens = {
+	popup: popup$1
+};
+
+const { popup } = popupTokens;
+const POPUP_LAYOUT = {
+    bodyBg: popup.bg,
+};
+const POPUP_HEADER = {
+    bg: {
+        default: popup.header.bg.default,
+        light: popup.header.bg.inverse,
+    },
+    titleColor: {
+        default: popup.header.title.default,
+        light: popup.header.title.inverse,
+    },
+    fontFamily: popup.header.typography.fontFamily,
+    fontWeight: popup.header.typography.fontWeight,
+    fontSize: Number(popup.header.typography.fontSize),
+    lineHeight: Number(popup.header.typography.lineHeight),
+    // TODO: 토큰 반영 후 교체
+    height: 50,
+    paddingX: 16,
+    paddingY: 10,
+};
+const POPUP_FOOTER = {
+    bg: popup.footer.bg,
+    paddingX: Number(popup.footer.paddingX),
+    paddingY: Number(popup.footer.paddingY),
+    gap: Number(popup.footer.gap),
+    // TODO: 토큰 반영 후 교체
+    height: 52,
+    slotHeight: 36,
+    // TODO: shadow/spread/md 토큰 반영 후 교체
+    shadow: '0 -2px 8px 0 rgba(0, 0, 0, 0.08)',
+};
+
+const sdPopupCss = () => `sd-popup{display:block;width:100%;height:100%}sd-popup .sd-popup{display:flex;flex-direction:column;width:100%;height:100%;background:var(--sd-popup-bg);overflow:hidden;box-sizing:border-box}sd-popup .sd-popup__header{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100%;height:var(--sd-popup-header-height);padding:var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);background:var(--sd-popup-header-bg);box-sizing:border-box}sd-popup .sd-popup__title{margin:0;color:var(--sd-popup-header-title-color);font-family:var(--sd-popup-header-font-family);font-weight:var(--sd-popup-header-font-weight);font-size:var(--sd-popup-header-font-size);line-height:var(--sd-popup-header-line-height);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-popup .sd-popup__body{flex:1 1 auto;min-height:0;overflow:auto}sd-popup .sd-popup__footer{display:flex;align-items:center;flex-shrink:0;width:100%;height:var(--sd-popup-footer-height);padding:var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);gap:var(--sd-popup-footer-gap);background:var(--sd-popup-footer-bg);box-shadow:var(--sd-popup-footer-shadow);box-sizing:border-box;position:relative;z-index:1}sd-popup .sd-popup__footer-slot{display:flex;align-items:center;height:var(--sd-popup-footer-slot-height)}sd-popup .sd-popup__footer-slot--left{justify-content:flex-start;flex:1 1 auto;min-width:0}sd-popup .sd-popup__footer-slot:empty{display:none}sd-popup .sd-popup__submit{flex-shrink:0;margin-left:auto}`;
+
+const DEFAULT_SUBMIT_BUTTON_PROPS = {
+    name: 'primary_md',
+    label: '확인',
+};
+const SdPopup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.submit = createEvent(this, "sdSubmit", 7);
+    }
+    popupTitle = '';
+    type = 'default';
+    useFooter = true;
+    submitButtonProps;
+    submit;
+    render() {
+        const cssVars = {
+            '--sd-popup-bg': POPUP_LAYOUT.bodyBg,
+            '--sd-popup-header-bg': POPUP_HEADER.bg[this.type],
+            '--sd-popup-header-title-color': POPUP_HEADER.titleColor[this.type],
+            '--sd-popup-header-font-family': POPUP_HEADER.fontFamily,
+            '--sd-popup-header-font-weight': POPUP_HEADER.fontWeight,
+            '--sd-popup-header-font-size': `${POPUP_HEADER.fontSize}px`,
+            '--sd-popup-header-line-height': `${POPUP_HEADER.lineHeight}px`,
+            '--sd-popup-header-height': `${POPUP_HEADER.height}px`,
+            '--sd-popup-header-padding-x': `${POPUP_HEADER.paddingX}px`,
+            '--sd-popup-header-padding-y': `${POPUP_HEADER.paddingY}px`,
+            '--sd-popup-footer-bg': POPUP_FOOTER.bg,
+            '--sd-popup-footer-padding-x': `${POPUP_FOOTER.paddingX}px`,
+            '--sd-popup-footer-padding-y': `${POPUP_FOOTER.paddingY}px`,
+            '--sd-popup-footer-gap': `${POPUP_FOOTER.gap}px`,
+            '--sd-popup-footer-height': `${POPUP_FOOTER.height}px`,
+            '--sd-popup-footer-slot-height': `${POPUP_FOOTER.slotHeight}px`,
+            '--sd-popup-footer-shadow': POPUP_FOOTER.shadow,
+        };
+        const submitButtonProps = {
+            ...DEFAULT_SUBMIT_BUTTON_PROPS,
+            ...this.submitButtonProps,
+        };
+        return (h("div", { key: '15e86848fe487b9df5b09a91e5319b35d7332a6e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'd8281c73a80fe5a4b8ce3ca219e967932b0ec1d3', class: "sd-popup__header" }, h("h2", { key: '31031d3988bae465e023cc94713fb39ef9299250', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'dfa941b0dc100b55fc08ab8cb9fce2835aaa62a5', class: "sd-popup__body" }, h("slot", { key: 'd7532a39c61746e8f517973e6fd4f7f3ac10fae0' })), this.useFooter && (h("footer", { key: 'aacedcc4c2f2e4336449bc0fbafc9f67d70cc763', class: "sd-popup__footer" }, h("div", { key: '8f093e0a8c24b03fa28e872b025cb159006d3449', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '11e2cd175c7ae3151408ca7e564df0a37d6eebb5', name: "footer-left" })), h("sd-button", { key: '49b98d39181bd30392b7388dc7acc66caaca6038', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+    }
+};
+SdPopup.style = sdPopupCss();
+
+export { SdPopup as sd_popup };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
 
 const SdPortal = class {
     constructor(hostRef) {
@@ -108,7 +108,7 @@ const SdPortal = class {
     }
     // 위치 갱신 (scroll / resize)
     updatePosition() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.rafId = requestAnimationFrame(() => {
             if (!this.parentRef || !this.wrapper)
@@ -225,7 +225,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '28858d6833d8ff7f86295f7e445d51ffc84db99a' });
+        return h("slot", { key: '8b728e4a9a97cb1c4dbdaf8b6a6d85b37fc07af7' });
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const radioButton = {
 	xs: {
@@ -138,18 +138,21 @@ const SdRadioButton = class {
         return classes.join(' ');
     }
     getGroupClasses() {
-        const classes = ['sd-radio-button', `sd-radio-button--${this.size}`];
+        const classes = ['sd-radio-button', `sd-radio-button--${this.size ?? 'sm'}`];
         return classes.join(' ');
     }
     _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;
     }
     render() {
-        const sizeTokens = RADIO_BUTTON_SIZES[this.size];
+        const sizeTokens = RADIO_BUTTON_SIZES[this.size ?? 'sm'] ?? RADIO_BUTTON_SIZES.sm;
         const cssVars = {
             '--sd-radio-button-height': `${sizeTokens.height}px`,
             '--sd-radio-button-padding-x': `${sizeTokens.paddingX}px`,
@@ -173,7 +176,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (h("div", { key: 'fbc0246d9cf615956121295e29bf8c702ee73edc', 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/esm/sd-radio.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const radio = {
 	size: "16",
@@ -116,7 +116,7 @@ const SdRadio = class {
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
             '--sd-radio-label-color': RADIO_COLORS.label,
         };
-        return (h("label", { key: '2b809f1f3ce39e6dd2429cf1c48a935500287614', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '1f44ab44d741ef40152318ce6fd437bb091c3cfb', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: '941fddbb939a46afbe72c642d3b6f6f252f143f1', class: "sd-radio__circle" }), this.label && h("span", { key: 'e30139892e82b8da251525e3c717549a2b7522d0', class: "sd-radio__label" }, this.label)));
+        return (h("label", { key: 'bbbca45f706514a12be434ba877de0bd0f82c944', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: 'e2cacd52037790cfe2d0eacacb975864858f73f8', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: 'bfbfdcb93536cef9fecbf1cc3a5dc5c2adbf5dd0', class: "sd-radio__circle" }), this.label && h("span", { key: '04c8d1e8de88bbb8d4041ebbbda00f58f8dc460c', class: "sd-radio__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

package/dist/esm/sd-select-list-item_2.entry.js

@@ -0,0 +1,156 @@
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
+import { e as LIST_ITEM_LAYOUT, g as LIST_ITEM_TYPOGRAPHY, h as LIST_ITEM_COLORS, i as SEARCH_DEBOUNCE_MS } from './sd-select.config-CxOCk_ge.js';
+
+const sdSelectListItemCss = () => `sd-select-list-item{display:block}sd-select-list-item .sd-select-list-item{display:flex;align-items:center;gap:var(--list-item-gap);padding:var(--list-item-padding-y) var(--list-item-padding-right) var(--list-item-padding-y) var(--list-item-padding-left);font-size:var(--list-item-font-size);line-height:var(--list-item-line-height);font-weight:var(--list-item-font-weight);background:var(--list-item-bg);color:var(--list-item-color);cursor:default;user-select:none}sd-select-list-item .sd-select-list-item--selectable{cursor:pointer}sd-select-list-item .sd-select-list-item--depth1-group{border-top:var(--list-item-border-top);font-weight:700}sd-select-list-item .sd-select-list-item--depth2-group{font-weight:500}sd-select-list-item .sd-select-list-item--focused.sd-select-list-item--selectable:not(.sd-select-list-item--disabled){background:var(--list-item-bg-hover);color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--selected:not(.sd-select-list-item--group){font-weight:var(--list-item-font-weight-selected);color:var(--list-item-color-selected)}sd-select-list-item .sd-select-list-item--selected.sd-select-list-item--focused{color:var(--list-item-color-hover)}sd-select-list-item .sd-select-list-item--disabled{color:var(--list-item-color-disabled);cursor:not-allowed}sd-select-list-item .sd-select-list-item__label{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-select-list-item .sd-select-list-item__count{flex-shrink:0;font-weight:500;color:var(--list-item-color-disabled)}sd-select-list-item .sd-select-list-item--group.sd-select-list-item--focused .sd-select-list-item__count{color:#ffffff}sd-select-list-item .sd-select-list-item__checkbox{flex-shrink:0}`;
+
+const SdSelectListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.listItemClick = createEvent(this, "sdListItemClick", 7);
+    }
+    option;
+    depth = 1;
+    isSelected = false;
+    isFocused = false;
+    useCheckbox = false;
+    countInfo;
+    listItemClick;
+    get isGroup() {
+        return !!this.option.children;
+    }
+    get isSelectable() {
+        return !this.isGroup || this.useCheckbox;
+    }
+    get depthKey() {
+        if (this.depth <= 1)
+            return 'depth1';
+        if (this.depth === 2)
+            return 'depth2';
+        return 'depth3';
+    }
+    get paddingLeft() {
+        return `${LIST_ITEM_LAYOUT.paddingLeft[this.depthKey]}px`;
+    }
+    handleClick = (e) => {
+        e.stopPropagation();
+        if (this.option.disabled || !this.isSelectable)
+            return;
+        this.listItemClick.emit(this.option);
+    };
+    handleCheckboxClick = (e) => {
+        e.stopPropagation();
+    };
+    handleCheckboxUpdate = (e) => {
+        e.stopPropagation();
+        if (this.option.disabled || !this.isSelectable)
+            return;
+        this.listItemClick.emit(this.option);
+    };
+    render() {
+        const isGroup = this.isGroup;
+        const isDepth1Group = isGroup && this.depth === 1;
+        const isDepth2Group = isGroup && this.depth === 2;
+        const cssVars = {
+            '--list-item-padding-y': `${LIST_ITEM_LAYOUT.paddingY}px`,
+            '--list-item-padding-left': this.paddingLeft,
+            '--list-item-padding-right': `${LIST_ITEM_LAYOUT.paddingRight}px`,
+            '--list-item-gap': `${LIST_ITEM_LAYOUT.gap}px`,
+            '--list-item-font-size': `${LIST_ITEM_TYPOGRAPHY.fontSize}px`,
+            '--list-item-line-height': `${LIST_ITEM_TYPOGRAPHY.lineHeight}px`,
+            '--list-item-font-weight': LIST_ITEM_TYPOGRAPHY.fontWeight,
+            '--list-item-bg': isDepth1Group
+                ? LIST_ITEM_COLORS.depth1.bg
+                : isDepth2Group
+                    ? LIST_ITEM_COLORS.depth2.bg
+                    : LIST_ITEM_COLORS.bg.default,
+            '--list-item-bg-hover': LIST_ITEM_COLORS.bg.hover,
+            '--list-item-color': LIST_ITEM_COLORS.content.default,
+            '--list-item-color-hover': LIST_ITEM_COLORS.content.hover,
+            '--list-item-color-disabled': LIST_ITEM_COLORS.content.disabled,
+            '--list-item-color-selected': LIST_ITEM_COLORS.content.selected,
+            '--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}`;
+        }
+        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,
+                'sd-select-list-item--depth2-group': isDepth2Group,
+                'sd-select-list-item--selected': this.isSelected === true,
+                'sd-select-list-item--indeterminate': this.isSelected === null,
+                '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: '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, ")"))));
+    }
+};
+SdSelectListItem.style = sdSelectListItemCss();
+
+const sdSelectListItemSearchCss = () => `sd-select-list-item-search{display:block}sd-select-list-item-search .sd-select-list-item-search{padding:4px 8px;position:sticky;top:0;z-index:1;background:white}sd-select-list-item-search .sd-select-list-item-search--scrolled{box-shadow:0 2px 4px rgba(0, 0, 0, 0.08)}sd-select-list-item-search .sd-select-list-item-search__inner{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #cccccc;border-radius:4px;background:white}sd-select-list-item-search .sd-select-list-item-search__inner:focus-within{border-color:#0075ff}sd-select-list-item-search .sd-select-list-item-search__icon{flex-shrink:0}sd-select-list-item-search .sd-select-list-item-search__input{flex:1;border:none;outline:none;font-size:12px;line-height:20px;color:#222222;background:transparent;min-width:0}sd-select-list-item-search .sd-select-list-item-search__input::placeholder{color:#aaaaaa}sd-select-list-item-search .sd-select-list-item-search__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:2px;border:none;background:transparent;cursor:pointer;border-radius:2px}sd-select-list-item-search .sd-select-list-item-search__clear:hover{background:#f0f0f0}sd-select-list-item-search .sd-select-list-item-search__clear--hidden{visibility:hidden;pointer-events:none}`;
+
+const SdSelectListItemSearch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.searchFilter = createEvent(this, "sdSearchFilter", 7);
+        this.searchFocus = createEvent(this, "sdSearchFocus", 7);
+    }
+    isScrolled = false;
+    searchText = '';
+    searchFilter;
+    searchFocus;
+    inputEl;
+    debounceTimer;
+    focusRafId;
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.focusRafId = requestAnimationFrame(() => {
+                this.inputEl?.focus();
+            });
+        });
+    }
+    async sdFocus() {
+        this.inputEl?.focus();
+    }
+    handleInput = (e) => {
+        this.searchText = e.target.value;
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+            this.searchFilter.emit(this.searchText);
+        }, SEARCH_DEBOUNCE_MS);
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.searchText = '';
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        this.searchFilter.emit('');
+        this.inputEl?.focus();
+    };
+    disconnectedCallback() {
+        if (this.focusRafId !== undefined)
+            cancelAnimationFrame(this.focusRafId);
+        if (this.debounceTimer !== undefined)
+            clearTimeout(this.debounceTimer);
+    }
+    render() {
+        return (h("div", { key: '6872376ea0f47c256273f751fad367f2c49a9160', class: {
+                'sd-select-list-item-search': true,
+                'sd-select-list-item-search--scrolled': this.isScrolled,
+            } }, 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: '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: 'ad89b3421ec345f47c8d67d78f20cae86869d4c1', name: "close", size: 12, color: "#888888" })))));
+    }
+};
+SdSelectListItemSearch.style = sdSelectListItemSearchCss();
+
+export { SdSelectListItem as sd_select_list_item, SdSelectListItemSearch as sd_select_list_item_search };

package/dist/esm/sd-select.config-CxOCk_ge.js

@@ -0,0 +1,165 @@
+const select = {
+	paddingX: "12",
+	icon: {
+		"default": "#888888",
+		disabled: "#BBBBBB"
+	},
+	gap: "8",
+	typography: {
+		fontWeight: "400",
+		fontSize: "12",
+		lineHeight: "20"},
+	text: {
+		"default": "#222222",
+		disabled: "#888888"
+	}};
+var selectTokens = {
+	select: select
+};
+
+const listItem = {
+	paddingY: "4",
+	paddingRight: "12",
+	gap: "8",
+	paddingLeft: {
+		depth1: "12",
+		depth2: "20",
+		depth3: "28"
+	},
+	typography: {
+		"default": {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"},
+		selected: {
+			fontWeight: "700"}
+	},
+	bg: {
+		"default": "#FFFFFF",
+		hover: "#0075FF"
+	},
+	content: {
+		"default": "#222222",
+		hover: "#FFFFFF",
+		disabled: "#888888",
+		selected: "#0075FF"
+	},
+	depth1: {
+		bg: {
+			"default": "#EFF6FF"},
+		border: {
+			color: "#E1E1E1",
+			width: "1"
+		}},
+	depth2: {
+		middle: {
+			bg: "#F6F6F6"}
+	}};
+var listItemTokens = {
+	listItem: listItem
+};
+
+const listBox = {
+	radius: "4"};
+var listBoxTokens = {
+	listBox: listBox
+};
+
+// ── Select Trigger Tokens ──
+const SELECT_LAYOUT = {
+    paddingX: selectTokens.select.paddingX,
+    gap: selectTokens.select.gap};
+const SELECT_TYPOGRAPHY = {
+    fontSize: selectTokens.select.typography.fontSize,
+    lineHeight: selectTokens.select.typography.lineHeight,
+    fontWeight: selectTokens.select.typography.fontWeight,
+};
+const SELECT_COLORS = {
+    icon: {
+        default: selectTokens.select.icon.default,
+        disabled: selectTokens.select.icon.disabled,
+    },
+    text: {
+        default: selectTokens.select.text.default,
+        disabled: selectTokens.select.text.disabled,
+    },
+};
+// ── ListItem Tokens ──
+const LIST_ITEM_LAYOUT = {
+    paddingY: listItemTokens.listItem.paddingY,
+    paddingRight: listItemTokens.listItem.paddingRight,
+    paddingLeft: {
+        depth1: listItemTokens.listItem.paddingLeft.depth1,
+        depth2: listItemTokens.listItem.paddingLeft.depth2,
+        depth3: listItemTokens.listItem.paddingLeft.depth3,
+    },
+    gap: listItemTokens.listItem.gap,
+};
+const LIST_ITEM_TYPOGRAPHY = {
+    fontSize: listItemTokens.listItem.typography.default.fontSize,
+    lineHeight: listItemTokens.listItem.typography.default.lineHeight,
+    fontWeight: listItemTokens.listItem.typography.default.fontWeight,
+    selectedFontWeight: listItemTokens.listItem.typography.selected.fontWeight,
+};
+const LIST_ITEM_COLORS = {
+    bg: {
+        default: listItemTokens.listItem.bg.default,
+        hover: listItemTokens.listItem.bg.hover,
+    },
+    content: {
+        default: listItemTokens.listItem.content.default,
+        hover: listItemTokens.listItem.content.hover,
+        disabled: listItemTokens.listItem.content.disabled,
+        selected: listItemTokens.listItem.content.selected,
+    },
+    depth1: {
+        bg: listItemTokens.listItem.depth1.bg.default,
+        border: listItemTokens.listItem.depth1.border.color,
+        borderWidth: listItemTokens.listItem.depth1.border.width,
+    },
+    depth2: {
+        bg: listItemTokens.listItem.depth2.middle.bg,
+    }};
+// ── ListBox Tokens ──
+const LIST_BOX_LAYOUT = {
+    radius: listBoxTokens.listBox.radius,
+};
+// ── Constants ──
+const SEARCH_THRESHOLD = 11;
+const SEARCH_DEBOUNCE_MS = 1000;
+const EMPTY_MESSAGE = '표시할 항목이 없습니다.';
+// ── Utilities ──
+function countLeaves(options) {
+    return options.reduce((sum, option) => {
+        if (option.children) {
+            return sum + countLeaves(option.children);
+        }
+        return sum + 1;
+    }, 0);
+}
+function filterTree(options, keyword) {
+    const lowerKeyword = keyword.toLowerCase();
+    return options.reduce((acc, option) => {
+        const selfMatch = option.label.toLowerCase().includes(lowerKeyword);
+        if (option.children) {
+            // 그룹: 자식은 항상 추가로 필터링한다.
+            // - 자식 중 일치하는 게 있으면 그 자식들만 노출
+            // - 자식 매칭이 없더라도 그룹명이 매칭되면 그룹 헤더는 그대로 노출
+            //   (이때 children 은 빈 배열로 두고, 선택 동작은 collectVisibleLeaves
+            //    의 fallback 이 원본 트리를 사용해 처리한다)
+            const filteredChildren = filterTree(option.children, keyword);
+            if (filteredChildren.length > 0) {
+                acc.push({ ...option, children: filteredChildren });
+            }
+            else if (selfMatch) {
+                acc.push({ ...option, children: [] });
+            }
+        }
+        else if (selfMatch) {
+            acc.push({ ...option });
+        }
+        return acc;
+    }, []);
+}
+
+export { EMPTY_MESSAGE as E, LIST_BOX_LAYOUT as L, SEARCH_THRESHOLD as S, SELECT_COLORS as a, SELECT_TYPOGRAPHY as b, countLeaves as c, SELECT_LAYOUT as d, LIST_ITEM_LAYOUT as e, filterTree as f, LIST_ITEM_TYPOGRAPHY as g, LIST_ITEM_COLORS as h, SEARCH_DEBOUNCE_MS as i };