@sellmate/design-system 1.31.0 → 1.33.0

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: '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() })))));
+        return (h("div", { key: 'e899263de5d4302c9a58c8e22ca1366abcd43587', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '53e061eec94ad45d381fb15e94dff0f690a20223', class: "sd-popup__header" }, h("h2", { key: '39fcc038b4e903fcb4d86ec6e0e70d73873138e9', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'df51ca67e7107f8b221500613d97d823cf94bb8a', class: "sd-popup__body" }, h("slot", { key: 'cbeeddd919167af08e67b9d15fe90099b40a7725' })), this.useFooter && (h("footer", { key: '8811d33320a3034b38f11628bced2aa7dc07df80', class: "sd-popup__footer" }, h("div", { key: 'c58051284ec4d304ec49782f1ef05a9e6622888a', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '4b5bdf0dd89940af008ffc09f527c19afdcb8f84', name: "footer-left" })), h("sd-button", { key: '7257231b31aa62b47af221bc5899ba3960c8c2af', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
     static get is() { return "sd-popup"; }
     static get originalStyleUrls() {

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: '238d7d1221187a0c679b486e7f2dd61fa902bc94' }, h("div", { key: 'cfe4d56bdc5c8749f84fa42990eab6b872bc9e10', 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: 'be9fbcce4477fd96a485af314f561cbd538faac4' }))));
+    }
+    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: '20492e7ba882ac768bee279fe1506e69186ec958', 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: '1b413ea873fb41380928bbc1de435242966e8649', 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: 'b6b97fcfc49794b61ec27e48680a0168ce895a6b', 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: 'e461ae14d90896bf0abfbe357b0d8068c25b439b', 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: '870b68748e166f56fbf921ab6431e165c397278c', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '0252b5648c10042ce7b7db6af880f00a0f81f50a', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: '5154a2d317f66d4722dfcd4f9ae8a87a3e9d651f', 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: 'a6d7e8ee24139325d66ff0e987d6b1140ea88ea7', 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: '03a33242101dbe710cb3c3327b6f2c695d76baab', 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: 'c336ef386ead6881694925cc3e1fb1cd99e92037', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: '9b8db37fbd34b71e2206e6919c122fa2666a68f9', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '5e02d3d337dd337c2029c50a7582abd0dbaafd33', 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: '955b332da48d42a76637827e966568af3b495b39', 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: 'e69f1033d563735330a3ca334bed2cdadbff8b64', 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: 'e64c73dbafbbcf4b4f487669cc7fc2513e68b371', 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: '7607b8286ac5b9ee0d04c3b89153372d225093d9', 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: 'a0c87e52733b30d61b3d5d5c62448afd42430458', 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: '0ae8920ff073dec69d26224b6f3c9d393014b276', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: 'c2ce229c398cf35aa1cdc58a12eb7ed81f316d0d', ref: el => {
+            } }, h("sd-select-trigger", { key: '196b9e1fdfede2c24f8d1f963bfbb14062a7a819', 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: '1c0ddae84bbe0b02e7a726eccff2ecbdc0214d72', ...portalProps }, h("sd-select-listbox", { key: '90372a0eb3db042ed1c23fd789356a3e1d90cc80', 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);
+}