@sellmate/design-system 1.31.0 → 1.32.0

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: '4fff470052d5d02cddf204f33df24247e087a55d', 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: '45649f31743eac574560399b07c9ba94d7185013', 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: '2e2c1dca85ed4be38cf8435df86f8ea4b7273673', 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: '3231c0ea91e678a71cac6a1c5805fa255a96deb2', class: {
+        return (h("div", { key: '5e1dc595bd89df5364d9a302dc917abb29fa2c7b', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'f25df864ea6bbe2db7c0ca8e1abc0645f11b12f3', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '494d5b964543e3a595629c02ef7b61b492d26eed', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '475b925b7987d98fb0a46d6b63a0a9edd2db00ae', 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: '26fa161589df77bea51e4568bfd2d501008a0846', 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: 'aca5037c9dbc171f201cc02e7a2d00f49e6e6397', 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: '1686c9749284be82edcf4eaf9c4741e1be3920d4', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '934e1bf38324bda71e0c4c956fd8ad82eb9c4f46', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '33ec8b142a0f60b329fcd58bc8952d3577c92f83', 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: '46d1f11884ed2fa9a55144fbf0633cb78f2f8ec3', 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: '3e5b42da3a391f52f597594ccf9ebf9e9b236ccc', 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: '56938d493425d54b2c69840014b0354674fcf9d6', 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: '90e7df2f8bd416ccd1545c78c79f02746c119db3', 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: 'a8107af7c63f38eee519b44e33021f3d650c97a4', 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: 'd1b3c4d6f1da7ca9eeb31a19db7dd7b28a94103d', class: "sd-select", ref: el => {
+            } }, h("div", { key: '575ece02e659c99154598ad4ab416e26a7217e52', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: 'c2ce229c398cf35aa1cdc58a12eb7ed81f316d0d', 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: '1f67ba5abb693d49b2e332edb991bf89edbc2456', ...portalProps }, h("sd-select-listbox", { key: '108acb8763dc0cf4bd7e807643140a9f41381248', 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,
+};

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

@@ -0,0 +1,50 @@
+sd-stepper {
+  display: inline-flex;
+}
+sd-stepper .sd-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sd-stepper-container-gap);
+  font-family: var(--sd-stepper-font-family);
+  font-size: var(--sd-stepper-font-size);
+  line-height: var(--sd-stepper-line-height);
+}
+sd-stepper .sd-stepper__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sd-stepper-item-gap);
+  color: var(--sd-stepper-text-default);
+  font-weight: var(--sd-stepper-font-weight-default);
+  white-space: nowrap;
+}
+sd-stepper .sd-stepper__item--active {
+  color: var(--sd-stepper-text-active);
+  font-weight: var(--sd-stepper-font-weight-active);
+}
+sd-stepper .sd-stepper__sequence {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sd-stepper-sequence-size);
+  height: var(--sd-stepper-sequence-size);
+  flex: 0 0 var(--sd-stepper-sequence-size);
+  border-radius: var(--sd-stepper-sequence-radius);
+  border: var(--sd-stepper-sequence-border-width) solid var(--sd-stepper-sequence-border);
+  background: var(--sd-stepper-sequence-bg);
+  color: var(--sd-stepper-sequence-text);
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 700;
+}
+sd-stepper .sd-stepper__label {
+  color: inherit;
+}
+sd-stepper .sd-stepper__dash {
+  display: inline-flex;
+  align-items: center;
+  width: var(--sd-stepper-dash-width);
+  height: 1px;
+  flex: 0 0 var(--sd-stepper-dash-width);
+  color: var(--sd-stepper-dash-color);
+}

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

@@ -0,0 +1,186 @@
+import { h } from "@stencil/core";
+import { STEPPER_COLORS, STEPPER_LAYOUT, STEPPER_SIZES, } from "./sd-stepper.config";
+export class SdStepper {
+    /** 단계 목록 */
+    items = [];
+    /** 현재 활성 단계 value */
+    value = '';
+    /** 크기 */
+    size = 'sm';
+    /** 접근성 레이블 */
+    ariaLabel = '진행 단계';
+    valueChanged(newValue) {
+        this.value = newValue;
+    }
+    getItemValue(item, index) {
+        return item.value ?? String(index + 1);
+    }
+    getActiveIndex() {
+        const found = this.items.findIndex((item, index) => this.getItemValue(item, index) === this.value);
+        return found >= 0 ? found : 0;
+    }
+    getState(index) {
+        const activeIndex = this.getActiveIndex();
+        if (index < activeIndex)
+            return 'completed';
+        if (index === activeIndex)
+            return 'active';
+        return 'default';
+    }
+    buildCssVars() {
+        const size = STEPPER_SIZES[this.size];
+        return {
+            '--sd-stepper-sequence-size': `${size.sequenceSize}px`,
+            '--sd-stepper-font-family': size.fontFamily,
+            '--sd-stepper-font-size': `${size.fontSize}px`,
+            '--sd-stepper-line-height': `${size.lineHeight}px`,
+            '--sd-stepper-font-weight-active': size.fontWeightActive,
+            '--sd-stepper-font-weight-default': size.fontWeightDefault,
+            '--sd-stepper-container-gap': `${STEPPER_LAYOUT.containerGap}px`,
+            '--sd-stepper-item-gap': `${STEPPER_LAYOUT.itemGap}px`,
+            '--sd-stepper-dash-width': `${STEPPER_LAYOUT.dashWidth}px`,
+            '--sd-stepper-dash-color': STEPPER_COLORS.dash,
+            '--sd-stepper-sequence-radius': `${STEPPER_LAYOUT.radius}px`,
+            '--sd-stepper-sequence-border-width': `${STEPPER_LAYOUT.borderWidth}px`,
+        };
+    }
+    getStateVars(state) {
+        return {
+            '--sd-stepper-sequence-border': STEPPER_COLORS.sequenceBorder[state],
+            '--sd-stepper-sequence-bg': STEPPER_COLORS.sequenceBg[state],
+            '--sd-stepper-sequence-text': state === 'completed'
+                ? STEPPER_COLORS.text.default
+                : STEPPER_COLORS.sequenceText[state],
+            '--sd-stepper-text-active': STEPPER_COLORS.text.active,
+            '--sd-stepper-text-default': STEPPER_COLORS.text.default,
+        };
+    }
+    render() {
+        return (h("div", { key: '0255899ce447c38d44a618acc72692d2c746ebc3', class: "sd-stepper", role: "list", "aria-label": this.ariaLabel, style: this.buildCssVars() }, this.items.map((item, index) => {
+            const state = this.getState(index);
+            const className = [
+                'sd-stepper__item',
+                `sd-stepper__item--${state}`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            return [
+                h("span", { class: className, role: "listitem", "aria-current": state === 'active' ? 'step' : undefined, style: this.getStateVars(state) }, h("span", { class: "sd-stepper__sequence", "aria-hidden": "true" }, state === 'completed' ? (h("sd-icon", { name: "check", size: STEPPER_LAYOUT.iconSize, color: "currentColor" })) : (index + 1)), h("span", { class: "sd-stepper__label" }, item.label)),
+                index < this.items.length - 1 && (h("span", { class: "sd-stepper__dash", "aria-hidden": "true" }, h("svg", { width: STEPPER_LAYOUT.dashWidth, height: "1", viewBox: `0 0 ${STEPPER_LAYOUT.dashWidth} 1`, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "1.6", height: "1", fill: "#888888" }), h("rect", { x: "5", width: "3.3", height: "1", fill: "#888888" }), h("rect", { x: "11.7", width: "3.3", height: "1", fill: "#888888" }), h("rect", { x: "18.4", width: "1.6", height: "1", fill: "#888888" })))),
+            ];
+        })));
+    }
+    static get is() { return "sd-stepper"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-stepper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "StepperItem[]",
+                    "resolved": "StepperItem[]",
+                    "references": {
+                        "StepperItem": {
+                            "location": "import",
+                            "path": "./sd-stepper.config",
+                            "id": "src/components/sd-stepper/sd-stepper.config.ts::StepperItem",
+                            "referenceLocation": "StepperItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB2E8\uACC4 \uBAA9\uB85D"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD604\uC7AC \uD65C\uC131 \uB2E8\uACC4 value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepperSize",
+                    "resolved": "\"lg\" | \"sm\"",
+                    "references": {
+                        "StepperSize": {
+                            "location": "import",
+                            "path": "./sd-stepper.config",
+                            "id": "src/components/sd-stepper/sd-stepper.config.ts::StepperSize",
+                            "referenceLocation": "StepperSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD06C\uAE30"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC811\uADFC\uC131 \uB808\uC774\uBE14"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'\uC9C4\uD589 \uB2E8\uACC4'"
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}