@sellmate/design-system 1.29.0 → 1.32.0

package/dist/collection/components/sd-popup/sd-popup.css

@@ -40,6 +40,46 @@ sd-popup .sd-popup__body {
   min-height: 0;
   overflow: auto;
 }
+sd-popup .sd-popup__body::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background: transparent;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-track {
+  background: transparent;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-thumb {
+  background-color: #CCCCCC;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background-clip: padding-box;
+}
+@supports not selector(::-webkit-scrollbar) {
+  sd-popup .sd-popup__body {
+    scrollbar-width: thin;
+    scrollbar-color: #CCCCCC transparent;
+  }
+}
+sd-popup .sd-popup__body::-webkit-scrollbar, sd-popup .sd-popup__body::-webkit-scrollbar-track {
+  background: #F6F6F6;
+}
+@supports not selector(::-webkit-scrollbar) {
+  sd-popup .sd-popup__body {
+    scrollbar-color: #CCCCCC #F6F6F6;
+  }
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid #E1E1E1;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid #E1E1E1;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-thumb:vertical {
+  border-left-width: 3px;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-thumb:horizontal {
+  border-top-width: 3px;
+}
 sd-popup .sd-popup__footer {
   display: flex;
   align-items: center;

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

@@ -40,7 +40,7 @@ export class SdPopup {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: 'd86bb173d6fe8540e8b96f5dff4c8285cbf9ff91', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '0f006173fda3be589cdc208f382ed1898c49396a', class: "sd-popup__header" }, h("h2", { key: '62179c692f08b21e6386175b153d4f8c1013ea53', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'a1a786d9d71f0a17eb4f3bce3a6b1ae8a1fa3367', class: "sd-popup__body" }, h("slot", { key: '40b772fd34963ef78507dddf81474eb5e1a58174' })), this.useFooter && (h("footer", { key: '40c981163f237b44764dec66205e01203a0d150d', class: "sd-popup__footer" }, h("div", { key: '0c91d37584c0bc5f74b510430a83889aea4abb93', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '120c41484fee23d160a1fa7b5ab7cd70c1422d12', name: "footer-left" })), h("sd-button", { key: '6dadd08ab99380d0e55730888fbbd2fea88bcfe9', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: '1b8dc171a7b0dea5216aa63425ccc72ae80e3a3e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '1ae57ef360ad124a2afac3340258dce481bb7bc7', class: "sd-popup__header" }, h("h2", { key: '3d0cc0df6ba901b4dc9e0917103e57d6279cde31', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'a0fee226ac513744243d6f78ddce6125170700da', class: "sd-popup__body" }, h("slot", { key: '55c5f94dff5413810f2c4648c9684e520db7268b' })), this.useFooter && (h("footer", { key: 'f8f0dc3751324ac5976aef55bec974341db036c1', class: "sd-popup__footer" }, h("div", { key: 'ea2f7e63c857d135eeffd7c2a43b171619067161', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '0d56c0c25e1e10f6900af0f632c7bb339b736032', name: "footer-left" })), h("sd-button", { key: 'd334174cd98be32856a6f3b1b3348ca2ebea3cdd', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get is() { return "sd-popup"; }
     static get originalStyleUrls() {

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

@@ -268,7 +268,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '623ee5423b145701ba9dd801d44874214f7a76e3' });
+        return h("slot", { key: '8b2a674bbd8c75c150940d53c0e5204e951cbb82' });
     }
     static get is() { return "sd-portal"; }
     static get styles() { return ":host { display: none !important; }"; }

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

@@ -9,6 +9,8 @@ export class SdRadio {
     disabled = false;
     /** 표시할 라벨 텍스트 */
     label;
+    /** native radio 그룹핑을 위한 name 속성 (미지정 시 val을 name으로 사용) */
+    name;
     /** 선택 값이 변경될 때 발생합니다. */
     update;
     valueChanged(newValue) {
@@ -52,7 +54,7 @@ export class SdRadio {
             '--sd-radio-label-color': RADIO_COLORS.label.default,
             '--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
         };
-        return (h("label", { key: 'cc7ff62ac992791ef81db9212bb5986989f6b4d6', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '20bfeaf5bc322335f5300955ebf653213d662fa6', 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: '61d8bdfdb5f8309b8832b89ea2979db5b80968c8', class: "sd-radio__circle" }), this.label && (h("span", { key: 'cc2a5402e4745aaae897c8f37d5fc287a2ba9b29', class: "sd-radio__label", "data-label": this.label }, this.label))));
+        return (h("label", { key: 'c4179fa98fcfdb885e7760a99acad56106cf2445', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '0fe92e2cf0a539ebe2562e907f41c0055eb5d54e', type: "radio", name: this.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: 'abf2338b324ee693edf3c98564f2e8f63028e584', class: "sd-radio__circle" }), this.label && (h("span", { key: '738c30cf39dd497bc2b710d5384be9634bbf74bf', class: "sd-radio__label", "data-label": this.label }, this.label))));
     }
     static get is() { return "sd-radio"; }
     static get originalStyleUrls() {
@@ -72,7 +74,7 @@ export class SdRadio {
                 "mutable": true,
                 "complexType": {
                     "original": "RadioValue",
-                    "resolved": "boolean | number | string",
+                    "resolved": "boolean | number | string | undefined",
                     "references": {
                         "RadioValue": {
                             "location": "local",
@@ -81,8 +83,8 @@ export class SdRadio {
                         }
                     }
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "\uB77C\uB514\uC624 \uADF8\uB8F9\uC758 \uD604\uC7AC \uC120\uD0DD \uAC12"
@@ -155,6 +157,25 @@ export class SdRadio {
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "native radio \uADF8\uB8F9\uD551\uC744 \uC704\uD55C name \uC18D\uC131 (\uBBF8\uC9C0\uC815 \uC2DC val\uC744 name\uC73C\uB85C \uC0AC\uC6A9)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             }
         };
     }

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { RADIO_BUTTON_COLORS, RADIO_BUTTON_LAYOUT, RADIO_BUTTON_SIZES, } from "./sd-radio-button.config";
 export class SdRadioButton {
-    /** 현재 선택된 값 */
+    /** 현재 선택된 값 (미지정 시 선택 없음) */
     value;
     /** 라디오 버튼 옵션 목록 */
     options = [];
@@ -81,7 +81,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: '17355ebde09f652f5b94b4f70f09f68ef44cd29d', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: '7621cf9885bb69bc18083dc076b4e6babc86ff62', 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)));
@@ -105,7 +105,7 @@ export class SdRadioButton {
                 "mutable": true,
                 "complexType": {
                     "original": "RadioValue",
-                    "resolved": "boolean | number | string",
+                    "resolved": "boolean | number | string | undefined",
                     "references": {
                         "RadioValue": {
                             "location": "import",
@@ -115,11 +115,11 @@ export class SdRadioButton {
                         }
                     }
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "\uD604\uC7AC \uC120\uD0DD\uB41C \uAC12"
+                    "text": "\uD604\uC7AC \uC120\uD0DD\uB41C \uAC12 (\uBBF8\uC9C0\uC815 \uC2DC \uC120\uD0DD \uC5C6\uC74C)"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export class SdRadioGroup {
-    /** 현재 선택된 값 */
+    /** 현재 선택된 값 (미지정 시 선택 없음) */
     value;
     /** 라디오 옵션 목록 */
     options = [];
@@ -28,8 +28,8 @@ export class SdRadioGroup {
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: 'e5f4051ea9b2843816a849a018b8040e7b951a55', 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) }));
+        return (h("div", { key: '7ee8aaf1872ac215e7d4c27e71d4a0a41c6f5e4e', 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) }));
         })));
     }
     static get is() { return "sd-radio-group"; }
@@ -50,7 +50,7 @@ export class SdRadioGroup {
                 "mutable": true,
                 "complexType": {
                     "original": "RadioValue",
-                    "resolved": "boolean | number | string",
+                    "resolved": "boolean | number | string | undefined",
                     "references": {
                         "RadioValue": {
                             "location": "import",
@@ -60,11 +60,11 @@ export class SdRadioGroup {
                         }
                     }
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "\uD604\uC7AC \uC120\uD0DD\uB41C \uAC12"
+                    "text": "\uD604\uC7AC \uC120\uD0DD\uB41C \uAC12 (\uBBF8\uC9C0\uC815 \uC2DC \uC120\uD0DD \uC5C6\uC74C)"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/sd-scroll-area/sd-scroll-area.config.js

@@ -0,0 +1,8 @@
+import systemTokens from "../../tokens/generated/system.json";
+// background/bordered는 컨테이너가 아니라 스크롤바에만 적용된다.
+// 트랙/썸 색은 전용 토큰이 없어 스타일(scss)에서 공용 grey 스케일($grey_10/$grey_45)을 쓰고,
+// 스크롤바 구분선만 시맨틱 토큰(border.default)을 참조한다.
+export const SCROLL_AREA_AXES = ['vertical', 'horizontal', 'both'];
+export const SCROLL_AREA_COLORS = {
+    border: systemTokens.color.border.default,
+};

package/dist/collection/components/sd-scroll-area/sd-scroll-area.css

@@ -0,0 +1,61 @@
+sd-scroll-area {
+  display: block;
+  min-width: 0;
+  min-height: 0;
+}
+
+.sd-scroll-area__viewport {
+  width: 100%;
+  height: 100%;
+}
+.sd-scroll-area__viewport::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background: transparent;
+}
+.sd-scroll-area__viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sd-scroll-area__viewport::-webkit-scrollbar-thumb {
+  background-color: #CCCCCC;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background-clip: padding-box;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .sd-scroll-area__viewport {
+    scrollbar-width: thin;
+    scrollbar-color: #CCCCCC transparent;
+  }
+}
+.sd-scroll-area__viewport--bg::-webkit-scrollbar, .sd-scroll-area__viewport--bg::-webkit-scrollbar-track {
+  background: #F6F6F6;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .sd-scroll-area__viewport--bg {
+    scrollbar-color: #CCCCCC #F6F6F6;
+  }
+}
+.sd-scroll-area__viewport--bordered::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid var(--sd-scroll-area-border-color);
+}
+.sd-scroll-area__viewport--bordered::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid var(--sd-scroll-area-border-color);
+}
+.sd-scroll-area__viewport--bordered::-webkit-scrollbar-thumb:vertical {
+  border-left-width: 3px;
+}
+.sd-scroll-area__viewport--bordered::-webkit-scrollbar-thumb:horizontal {
+  border-top-width: 3px;
+}
+.sd-scroll-area__viewport--vertical {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.sd-scroll-area__viewport--horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.sd-scroll-area__viewport--both {
+  overflow: auto;
+}

package/dist/collection/components/sd-scroll-area/sd-scroll-area.js

@@ -0,0 +1,151 @@
+import { Host, h } from "@stencil/core";
+import { SCROLL_AREA_COLORS } from "./sd-scroll-area.config";
+export class SdScrollArea {
+    /** 스크롤 방향. vertical=세로만, horizontal=가로만, both=양방향 */
+    axis = 'both';
+    /** true면 스크롤바 트랙 배경을 채운다. 콘텐츠 영역 배경은 바뀌지 않는다. */
+    background = false;
+    /** true면 스크롤바와 콘텐츠 사이에 1px 구분선을 그린다. 컨테이너 테두리가 아니다. */
+    bordered = false;
+    /** viewport 최대 높이 (예: '400px'). 비우면 호스트 크기를 따른다. */
+    maxHeight = '';
+    /** viewport 최대 너비 (예: '480px'). 비우면 호스트 크기를 따른다. */
+    maxWidth = '';
+    render() {
+        const viewportStyle = {
+            '--sd-scroll-area-border-color': SCROLL_AREA_COLORS.border,
+        };
+        if (this.maxHeight !== '')
+            viewportStyle.maxHeight = this.maxHeight;
+        if (this.maxWidth !== '')
+            viewportStyle.maxWidth = this.maxWidth;
+        return (h(Host, { key: '4b9b22910436388a2017af0bea5d1c55463a5f94' }, h("div", { key: '13d9301c1bd43dad765a6f18bb11482d7ae4788a', class: {
+                'sd-scroll-area__viewport': true,
+                [`sd-scroll-area__viewport--${this.axis}`]: true,
+                'sd-scroll-area__viewport--bg': this.background,
+                'sd-scroll-area__viewport--bordered': this.bordered,
+            }, style: viewportStyle }, h("slot", { key: '1d28dd8bac0a3b40d8beca9553b061ae21be8342' }))));
+    }
+    static get is() { return "sd-scroll-area"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-scroll-area.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-scroll-area.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "axis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrollAreaAxis",
+                    "resolved": "\"both\" | \"horizontal\" | \"vertical\"",
+                    "references": {
+                        "ScrollAreaAxis": {
+                            "location": "import",
+                            "path": "./sd-scroll-area.config",
+                            "id": "src/components/sd-scroll-area/sd-scroll-area.config.ts::ScrollAreaAxis",
+                            "referenceLocation": "ScrollAreaAxis"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2A4\uD06C\uB864 \uBC29\uD5A5. vertical=\uC138\uB85C\uB9CC, horizontal=\uAC00\uB85C\uB9CC, both=\uC591\uBC29\uD5A5"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "axis",
+                "defaultValue": "'both'"
+            },
+            "background": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "true\uBA74 \uC2A4\uD06C\uB864\uBC14 \uD2B8\uB799 \uBC30\uACBD\uC744 \uCC44\uC6B4\uB2E4. \uCF58\uD150\uCE20 \uC601\uC5ED \uBC30\uACBD\uC740 \uBC14\uB00C\uC9C0 \uC54A\uB294\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "background",
+                "defaultValue": "false"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "true\uBA74 \uC2A4\uD06C\uB864\uBC14\uC640 \uCF58\uD150\uCE20 \uC0AC\uC774\uC5D0 1px \uAD6C\uBD84\uC120\uC744 \uADF8\uB9B0\uB2E4. \uCEE8\uD14C\uC774\uB108 \uD14C\uB450\uB9AC\uAC00 \uC544\uB2C8\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "bordered",
+                "defaultValue": "false"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "viewport \uCD5C\uB300 \uB192\uC774 (\uC608: '400px'). \uBE44\uC6B0\uBA74 \uD638\uC2A4\uD2B8 \uD06C\uAE30\uB97C \uB530\uB978\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height",
+                "defaultValue": "''"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "viewport \uCD5C\uB300 \uB108\uBE44 (\uC608: '480px'). \uBE44\uC6B0\uBA74 \uD638\uC2A4\uD2B8 \uD06C\uAE30\uB97C \uB530\uB978\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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

@@ -78,7 +78,7 @@ export class SdSelectListItem {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: '86ebbdb437d7799cefb9a9466997df44ea346e44', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: 'e4f8fc195a7231cd3218b91a26c77f51df14e6dc', 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,
@@ -88,7 +88,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: '297067b88bedf8eed648f60050688e23e9dfcbdd', 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 })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: 'e71dbbfcd454a43fe2364aa0205f14805de20653', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'a9720067837860a8259b1a16b5eab111f02c7ac4', 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 })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: '8ece77c44bea9aea99883efe099137bca7d89475', 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

@@ -45,15 +45,15 @@ export class SdSelectListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: 'fd13ed863fa624bb672a80594a1397831c55b859', class: {
+        return (h("div", { key: '5e1dc595bd89df5364d9a302dc917abb29fa2c7b', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'c36783523de2c29b04ce300307770a666daad9df', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '6e21aebf25090024c882dda1e9fec46219dce8ee', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '2ed89f33de74c98cde3caa4e8924ef2e7b3baa0f', ref: el => {
+            } }, h("div", { key: 'd07b293bf685652dcc965071f47c0492776f9d41', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '065e1df3105048322ababd7237df83d045543fc3', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '973977bfbd98f5430b1b53f1ad59128383481197', 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: 'c16ed94bbddd24e829548b4ff063a6a3095f955a', 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: '2a1386ef266f7398f97ff99adc89ee3cec4a594e', 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: 'f2808e3b1b5ae6937bd818e4f29f999d04286b60', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '1060c9fe4e3e6ce239800f04b382df9ce83e9d16', 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.css

@@ -20,20 +20,44 @@
   padding-bottom: 0;
 }
 :host .sd-select-listbox__list::-webkit-scrollbar {
-  opacity: 0;
-  width: 8px;
-  background: #E5E5E5;
+  width: 12px;
+  height: 12px;
+  background: transparent;
 }
-:host .sd-select-listbox__list::-webkit-scrollbar:horizontal {
-  height: 8px;
+:host .sd-select-listbox__list::-webkit-scrollbar-track {
+  background: transparent;
 }
 :host .sd-select-listbox__list::-webkit-scrollbar-thumb {
-  height: 80px;
   background-color: #CCCCCC;
-  border-radius: 4px;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background-clip: padding-box;
 }
-:host .sd-select-listbox__list::-webkit-scrollbar-track {
-  background-color: #E5E5E5;
+@supports not selector(::-webkit-scrollbar) {
+  :host .sd-select-listbox__list {
+    scrollbar-width: thin;
+    scrollbar-color: #CCCCCC transparent;
+  }
+}
+:host .sd-select-listbox__list::-webkit-scrollbar, :host .sd-select-listbox__list::-webkit-scrollbar-track {
+  background: #F6F6F6;
+}
+@supports not selector(::-webkit-scrollbar) {
+  :host .sd-select-listbox__list {
+    scrollbar-color: #CCCCCC #F6F6F6;
+  }
+}
+:host .sd-select-listbox__list::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid #E1E1E1;
+}
+:host .sd-select-listbox__list::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid #E1E1E1;
+}
+:host .sd-select-listbox__list::-webkit-scrollbar-thumb:vertical {
+  border-left-width: 3px;
+}
+:host .sd-select-listbox__list::-webkit-scrollbar-thumb:horizontal {
+  border-top-width: 3px;
 }
 :host .sd-select-listbox__empty {
   padding: 12px;

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

@@ -361,9 +361,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'cec8e4e12dd806a93375853386a1d7cc3ac6b269', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '9e07a7e742e956df314796e9babf6c0a7fb21d7f', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'd5ff5620c63b5c53e69b6348f2c9cd6cb73cbe88', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '060d455fa7eb31d50fb13251f352643460cc1232', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '70543defd307911c3885b9ef3a0726465e9e4471', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '17aed7b1eb402f3b61044814cfad734e2cd4b922', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '9b36cdd7466b639c65497da94ee1e3c5129566cb', 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: '1f43ef353e470ebb0f70bfed5c495eb7de227c62', 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"; }

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

@@ -51,7 +51,7 @@ export class SdSelectTrigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '2ec5e736c0742a10fdfa9b4b12b0820e99c30f7f', ref: el => {
+        return (h("div", { key: 'afda44bd2f8dcf0ab75d75b0178b067f96e61707', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -62,7 +62,7 @@ export class SdSelectTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '6b71e60a76d430bfe14bc5b7c59d82130be27c8a', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: 'e34eae87f518f1b015e1d59bacf97bec66b6ec6d', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '061acc7d557d222b2616538346d415a6f37a198e', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '6444177838d54360776bbbfa7f08da7a6f556a16', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -283,15 +283,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '13ca7b4ddb0e124e90dd2b843df9a11b7cc98487', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '5a224160fc18dff8deb4c3a2a9d1bc024c3ebd5b', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '3892e98679d28ed6199578f1033571fec2137143', class: "sd-select", ref: el => {
+            } }, h("div", { key: '575ece02e659c99154598ad4ab416e26a7217e52', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '150dda9f50762bedc538181d8c1e5623e8d3fbac', ref: el => {
+            } }, h("sd-select-trigger", { key: '39f1dc9bbb7e2e94e0ccf3a3b2f339b48f5e0b84', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '554e158719e791600a6215223a5c0c7ac289b00a', ...portalProps }, h("sd-select-listbox", { key: 'c309fdfc53ff0c970ff33eb9eeec58636a869408', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'c1ec4d1f8f5aebeff2427e8323a3eb74f7c02ebb', ...portalProps }, h("sd-select-listbox", { key: 'd74641151357b007a7293d5a2a0dabb625a5e55b', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-stepper/sd-stepper.config.js

@@ -0,0 +1,35 @@
+import stepperTokens from "../../tokens/generated/component.stepper.json";
+const stepper = stepperTokens.stepper;
+export const STEPPER_SIZES = {
+    sm: {
+        sequenceSize: stepper.sm.sequence.size,
+        fontFamily: stepper.sm.typography.default.fontFamily,
+        fontSize: stepper.sm.typography.default.fontSize,
+        lineHeight: stepper.sm.typography.default.lineHeight,
+        fontWeightActive: stepper.sm.typography.active.fontWeight,
+        fontWeightDefault: stepper.sm.typography.default.fontWeight,
+    },
+    lg: {
+        sequenceSize: stepper.lg.sequence.size,
+        fontFamily: stepper.lg.typography.default.fontFamily,
+        fontSize: stepper.lg.typography.default.fontSize,
+        lineHeight: stepper.lg.typography.default.lineHeight,
+        fontWeightActive: stepper.lg.typography.active.fontWeight,
+        fontWeightDefault: stepper.lg.typography.default.fontWeight,
+    },
+};
+export const STEPPER_LAYOUT = {
+    containerGap: stepper.container.gap,
+    itemGap: stepper.item.gap,
+    dashWidth: stepper.dash.width,
+    radius: stepper.sequence.radius,
+    borderWidth: stepper.sequence.border.witdh,
+    iconSize: stepper.sequence.icon,
+};
+export const STEPPER_COLORS = {
+    dash: stepper.dash.color,
+    sequenceBorder: stepper.sequence.border,
+    sequenceBg: stepper.sequence.bg,
+    sequenceText: stepper.sequence.text,
+    text: stepper.text,
+};