@sellmate/design-system 1.28.0 → 1.31.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: 'f138f3d792295a6e1cb3894033547176cfd03163', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '7ff26c89a03cd79d5abe83513d96ae5f40b83869', class: "sd-popup__header" }, h("h2", { key: 'd9d3282b60b5b6baa5c2b1568c13db5847e9f9af', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'a296adcd58df30f4915b2523931c5b9eb4588e5d', class: "sd-popup__body" }, h("slot", { key: 'aaf4dfc93d5664ca19a8071e3f37bf8a5857e471' })), this.useFooter && (h("footer", { key: '1afb1b638fa8bfa69f5d4bc87fca538800614312', class: "sd-popup__footer" }, h("div", { key: '7539bc751847a03fef6ec1e15587b346ffb19c83', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '66fbec51d23bd1a203159f6c968935034a4c086c', name: "footer-left" })), h("sd-button", { key: '8d236d5fcd9b5fdae1c27ade7bff6bc605ef8bde', ...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-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: '0e0a07c33c9e6718771ba8cc27d62e4909434562', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: '4fff470052d5d02cddf204f33df24247e087a55d', 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: 'd3078da8737c28b279f2057c06266710af6191cd', 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: '36b88dbda0d2bbd27b5df60eaaa855ebe77e0905', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, 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, ")"))));
     }
     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: '6caac256fb6b1fc3e7b3fc7f7ee66b163737f944', class: {
+        return (h("div", { key: '3231c0ea91e678a71cac6a1c5805fa255a96deb2', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '3193b47072cb73c4400e606aa8dbd4553e178738', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '6165dae71933cbdf5c66d533d4cae43ae95f7bd4', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'd0526a3a20e220068a4b4cb489af060c80952325', ref: el => {
+            } }, 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 => {
                 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: 'e139b3ddab9ac793bfcf44480161a1d0c501a861', 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: '26fa161589df77bea51e4568bfd2d501008a0846', 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: '4d29274a17767dec92bb6052196832272ab215df', name: "close", size: 12, color: "#888888" })))));
+            }, 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" })))));
     }
     static get is() { return "sd-select-list-item-search"; }
     static get originalStyleUrls() {

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

@@ -361,9 +361,9 @@ export class SdSelectListbox {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: '4de15e4c150ee542656ee3f73aa41dd32379748f', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'cb656ccafc2833b438f14ac48ca8686684212ead', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '5ffaefb63605c4319810046e9d40aa5fcb4754de', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        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 => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: 'e1d3f7a37a037b386aae50cceb61e2b79d37453e', 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: '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) })))))));
     }
     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: '33e639898a581e8556e1e9c966f14cb863246c35', ref: el => {
+        return (h("div", { key: '3e5b42da3a391f52f597594ccf9ebf9e9b236ccc', 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: 'a935f82879727eb212422c875b16e5fbf01460ba', 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: 'e98e8e317aa86a960674b21714ca90cfa3920197', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, 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: {
                 '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: '2272f300b9aa6645dd772d06694e728f9abcea28', 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: '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: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: 'b9c769146720634abb4d018d022e28749ef0b939', class: "sd-select", ref: el => {
+            } }, h("div", { key: 'd1b3c4d6f1da7ca9eeb31a19db7dd7b28a94103d', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '792bbee6e36298a306d720bc15bff61d5bba7545', ref: el => {
+            } }, h("sd-select-trigger", { key: 'c2ce229c398cf35aa1cdc58a12eb7ed81f316d0d', 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: 'c70299735ea4f9fd257a0b3384e728bbf9fc9d97', ...portalProps }, h("sd-select-listbox", { key: 'd0dbfc0382131e998f54d6a0cb04fc6b1a9128c8', 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: '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) })))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,14 @@ import { SWITCH_COLORS, SWITCH_LAYOUT, SWITCH_TYPOGRAPHY } from "./sd-switch.con
 export class SdSwitch {
     /** 현재 on/off 상태 */
     value = false;
-    /** 표시할 라벨 텍스트 */
+    /** 스위치 좌측 라벨 */
+    leftLabel;
+    /** 스위치 우측 라벨 */
+    rightLabel;
+    /**
+     * 표시할 라벨 텍스트
+     * @deprecated `rightLabel` 사용. 우측 라벨(하위호환)
+     */
     label = '';
     /** 비활성 상태 여부 */
     disabled = false;
@@ -45,7 +52,10 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '0dd7063a45e2adc589e2e8dfc7cdb5c0c585aeac', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '01b94b14edd1571b8e21ba5a8bb72a0bd151b3a2', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '6c6bfaa3909ed885811f3e2af402d3a16c9b75e2', class: "sd-switch__track" }, h("div", { key: 'd3861a5c67779b7e871d7a2f45b20439648402cc', class: "sd-switch__knob" })), this.label && h("span", { key: '25c5198adb208b1016e9eb5bf01eaa6fb501ebe5', class: "sd-switch__label" }, this.label)));
+        // label(deprecated)은 rightLabel 로 흡수 (하위호환)
+        const right = this.rightLabel ?? this.label;
+        const accessibleName = [this.leftLabel, right].filter(Boolean).join(' ') || 'switch';
+        return (h("label", { key: '617ec652e8878aa41abd2d376479730e4db69025', "aria-label": accessibleName, class: this.switchClasses, style: cssVars }, h("input", { key: 'd765a1b3038d2decec2bf561d96a201cb617b40d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.leftLabel && h("span", { key: '2c6e398e7f926d3d9d9049aa1aa3fe459b92f51e', class: "sd-switch__label" }, this.leftLabel), h("div", { key: 'c71fdd196c0d50ce499c4c524005d01b834d066a', class: "sd-switch__track" }, h("div", { key: 'eabac4c3305fabf2e857fc8066a9acb80f90bf31', class: "sd-switch__knob" })), right && h("span", { key: '41a0f8ffd56791138b605379f88545b6e20d8df3', class: "sd-switch__label" }, right)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {
@@ -80,6 +90,44 @@ export class SdSwitch {
                 "attribute": "value",
                 "defaultValue": "false"
             },
+            "leftLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2A4\uC704\uCE58 \uC88C\uCE21 \uB77C\uBCA8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-label"
+            },
+            "rightLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2A4\uC704\uCE58 \uC6B0\uCE21 \uB77C\uBCA8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-label"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -91,7 +139,10 @@ export class SdSwitch {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "`rightLabel` \uC0AC\uC6A9. \uC6B0\uCE21 \uB77C\uBCA8(\uD558\uC704\uD638\uD658)"
+                        }],
                     "text": "\uD45C\uC2DC\uD560 \uB77C\uBCA8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,

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

@@ -78,7 +78,7 @@ export class SdTabs {
         };
     }
     render() {
-        return (h("div", { key: 'a844eb9710ff03e3878225aa8dc5e14ed270efde', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: 'd8d86075bbf5e13444f99e57cf63c2f5b9ef28fc', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -7,9 +7,8 @@ export class SdTag {
     label = '';
     /** 아이콘명 */
     icon;
-    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
-    /** true이면 아이콘을 레이블 왼쪽에 배치 */
-    isLeft = true;
+    /** 아이콘을 레이블 왼쪽에 배치할지 여부 (기본값 true) */
+    iconLeft = true;
     /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
     width = '';
     componentWillLoad() {
@@ -38,7 +37,7 @@ export class SdTag {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
         const width = this.resolvedWidth;
-        return (h(Host, { key: '37bb1fefd51f583b0a9dde9fe46cf843a48e8e13', style: width != null ? { '--sd-tag-width': width } : undefined }, h("span", { key: 'e996471849834802eaeff02abaadee1a2addac4f', class: "sd-tag", style: {
+        return (h(Host, { key: '9e893a8ec67d1baa12cdfe030d3ae15798666c0c', style: width != null ? { '--sd-tag-width': width } : undefined }, h("span", { key: 'fe6b05143032b33bec7cc95ce5355701e894d0ea', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -48,7 +47,7 @@ export class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '2e63073d1950046747521071ba5db5f9a404acef', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.iconLeft && iconNode, h("span", { key: '9c4a07ac015672839dc5dda40d01609870979e04', class: "sd-tag__label" }, this.label), this.icon && !this.iconLeft && iconNode)));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {
@@ -134,7 +133,7 @@ export class SdTag {
                 "reflect": false,
                 "attribute": "icon"
             },
-            "isLeft": {
+            "iconLeft": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -146,12 +145,12 @@ export class SdTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "true\uC774\uBA74 \uC544\uC774\uCF58\uC744 \uB808\uC774\uBE14 \uC67C\uCABD\uC5D0 \uBC30\uCE58"
+                    "text": "\uC544\uC774\uCF58\uC744 \uB808\uC774\uBE14 \uC67C\uCABD\uC5D0 \uBC30\uCE58\uD560\uC9C0 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12 true)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "is-left",
+                "attribute": "icon-left",
                 "defaultValue": "true"
             },
             "width": {

package/dist/collection/components/sd-text-link/sd-text-link.js

@@ -57,7 +57,7 @@ export class SdTextLink {
         };
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (h("span", { key: 'd9653ed47a77fb5c00dc57f8f7cc2b4dc9035ca4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("span", { key: '363829c6d53fc3df03dee7ddd290ca078c255039', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -65,13 +65,13 @@ export class SdTextLink {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (h("sd-portal", { key: '62b3cb48c5b5fa6eb0b2b2962ef6c78bac5ac545', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, h("div", { key: '5a428366f5bc2f8686a78fc73d91517ccca13eb9', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: '3416662595e9bfd164279e684e2ead9d1575a9d8', name: "square_xs_grey", label: tooltipText })))), this.icon && (h("sd-icon", { key: '5056f0c55ebe92963e856f2970cfd74143876cfb', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '6cf8474ba642c9ec3dc5952c5530f9ba15046053', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (h("span", { key: '17a74ec3a3e1a26f18b73f7d4816ea0aee0cb22c', class: "sd-text-link__arrow", style: {
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (h("sd-portal", { key: '4dcb8ca39f7b9627b5f77885c0823848d0aa5a5f', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, h("div", { key: '7bbcabbd9d9bb3594d8c4817dbbb922018bbbd19', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: '313c23dc9caf81d885ebf288c475ebe01bd24515', name: "square_xs_grey", label: tooltipText })))), this.icon && (h("sd-icon", { key: '2668c579bc22547b542ca2045f9af0fad25a5ee7', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '28246109bab90175498e841ecb02ac4a53a992b8', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (h("span", { key: 'c157788957cbba17a1411ebb329897fc6524171d', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 height: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: 'ed0a6bf8b678a93fa8a0da907efb0cbf60427738', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'b74ca3398a1dd74ac5a9f7a16c872d313882fd4d', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {

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

@@ -139,7 +139,7 @@ export class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '2ad9f1d11282bcbf4da1d365e8084b3e6dd1a434', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8e70c87579b4d2ec7908b749867ba090cd4ca743', class: "sd-textarea__content" }, h("textarea", { key: 'fe72f7208a22c8f36786cb53b8bbf18e5d7cf939', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: 'f8fd8949824938bb79f101de2e5eca7980224b09', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '382441be15dd047888cf876006f1966256a503b7', class: "sd-textarea__content" }, h("textarea", { key: '5f5985ccdcc401f4aff2f47fe40003abeb76e8b3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-time-picker/sd-time-picker-selector/sd-time-picker-selector.css

@@ -0,0 +1,87 @@
+sd-time-picker-selector {
+  display: block;
+}
+sd-time-picker-selector .sd-time-picker-selector {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--selector-bg);
+  border-radius: var(--selector-radius);
+  box-shadow: 4px 8px 16px -4px rgba(34, 34, 34, 0.1), 0 0 24px -6px rgba(34, 34, 34, 0.12);
+}
+sd-time-picker-selector .sd-time-picker-selector__meridiem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--selector-section-padding-y) var(--selector-section-padding-x);
+  background: var(--selector-bg);
+}
+sd-time-picker-selector .sd-time-picker-selector__meridiem-group {
+  display: flex;
+  isolation: isolate;
+}
+sd-time-picker-selector .sd-time-picker-selector__meridiem-button {
+  width: 61px;
+  height: 28px;
+  border: 1px solid #ccc;
+  background: #fff;
+  color: #555;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+  cursor: pointer;
+}
+sd-time-picker-selector .sd-time-picker-selector__meridiem-button--first {
+  border-radius: 4px 0 0 4px;
+  margin-right: -1px;
+}
+sd-time-picker-selector .sd-time-picker-selector__meridiem-button--end {
+  border-radius: 0 4px 4px 0;
+}
+sd-time-picker-selector .sd-time-picker-selector__meridiem-button--selected {
+  z-index: 1;
+  border-color: #0075ff;
+  color: #0075ff;
+}
+sd-time-picker-selector .sd-time-picker-selector__divider {
+  height: 1px;
+  width: 100%;
+  background: #e1e1e1;
+}
+sd-time-picker-selector .sd-time-picker-selector__time {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--selector-time-gap);
+  padding: var(--selector-section-padding-y) var(--selector-section-padding-x);
+  background: var(--selector-bg);
+}
+sd-time-picker-selector .sd-time-picker-selector__column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--selector-time-column-gap);
+}
+sd-time-picker-selector .sd-time-picker-selector__input {
+  width: var(--selector-input-width);
+  height: 28px;
+  box-sizing: border-box;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  background: #fff;
+  color: #222;
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  outline: none;
+}
+sd-time-picker-selector .sd-time-picker-selector__colon {
+  width: var(--selector-colon-size);
+  color: #555;
+  font-size: 16px;
+  line-height: 16px;
+  text-align: center;
+}