@sellmate/design-system 1.20.1 → 1.21.0

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

@@ -5,29 +5,53 @@ export class SdSelect {
     static PORTAL_OFFSET_Y = 4;
     static CLOSE_ANIMATION_DURATION = 150;
     el;
+    /** 셀렉트 타입 (단일/다중/계층) */
     type = 'default';
+    /** 현재 선택된 값 */
     value = null;
+    /** 선택 옵션 목록 */
     options = [];
+    /** 값이 없을 때 표시할 플레이스홀더 */
     placeholder = '선택';
+    /** 드롭다운 너비 (없으면 트리거 너비로 자동 맞춤) */
     dropdownWidth = '';
+    /** 드롭다운 최대 너비 */
     maxDropdownWidth = '640px';
+    /** 드롭다운 최대 높이 */
     dropdownHeight = '260px';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 레이블 텍스트 */
     label = '';
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 에러 상태 여부 */
     error = false;
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
+    /** true이면 value로 SelectOption 대신 원시값(string|number) 방출 */
     emitValue = false;
+    /** 필드 너비 */
     width = '';
+    /** 드롭다운 내 검색 입력 표시 여부 */
     useSearch = false;
+    /** 전체 선택 시 표시할 레이블 */
     allSelectedLabel = '전체';
+    /** 전체 선택 체크박스 표시 여부 */
     useSelectAll = false;
     isOpen = false;
     isAnimatingOut = false;
@@ -36,13 +60,17 @@ export class SdSelect {
     resolvedMaxDropdownWidth = '640px';
     focused = false;
     hovered = false;
+    /** 선택 값이 변경될 때 발생합니다. */
     update;
+    /** 드롭다운 열림/닫힘 상태가 바뀔 때 발생합니다. */
     dropDownShow;
+    /** 셀렉트 트리거에 포커스를 이동합니다. */
     async sdFocus() {
         if (this.disabled)
             return;
         await this.triggerComponentRef?.sdFocus();
     }
+    /** 드롭다운을 엽니다. */
     async sdOpen() {
         // sdFocus 직후 호출 시 트리거 ref/레이아웃이 안정될 때까지 한 틱 대기
         await new Promise(resolve => setTimeout(resolve, 0));
@@ -57,6 +85,7 @@ export class SdSelect {
     triggerRef;
     triggerComponentRef;
     closeAnimationTimer;
+    /** 폼 연동용 name 속성 */
     name = nanoid();
     triggerHasFocus = false;
     watchIsOpen(newValue) {
@@ -254,15 +283,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: 'f95dc4008dd1f252f8cb41637aa817bdd4d72ba0', 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: '3387dc16a6f54bfae652338c71c4c0e1553828c9', 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: 'f12b88dc846a01fc2076242623ac1376ebc0105c', class: "sd-select", ref: el => {
+            } }, h("div", { key: '124325f8f6882a3c9ee1a1795ee969f13d67dfe2', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '8cef3403ca0a0430c3ce9f8255c98f0e28142d80', ref: el => {
+            } }, h("sd-select-trigger", { key: '2e0e44ae666282d3931f9889650a7999929a312b', 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: '417194938ff7aac0b22abbba621342dbe767b146', ...portalProps }, h("sd-select-listbox", { key: '0c311407fdc72f37fa7dddf48fdfbaab668a18f4', 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: 'b6e97e43c5ea3a06fbb2976dab52d4f544822ae0', ...portalProps }, h("sd-select-listbox", { key: '3d8a01c54667149507db2757d81813d2f285b32d', 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() {
@@ -296,7 +325,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC140\uB809\uD2B8 \uD0C0\uC785 (\uB2E8\uC77C/\uB2E4\uC911/\uACC4\uCE35)"
                 },
                 "getter": false,
                 "setter": false,
@@ -323,7 +352,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD604\uC7AC \uC120\uD0DD\uB41C \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -350,7 +379,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uC635\uC158 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -368,7 +397,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC12\uC774 \uC5C6\uC744 \uB54C \uD45C\uC2DC\uD560 \uD50C\uB808\uC774\uC2A4\uD640\uB354"
                 },
                 "getter": false,
                 "setter": false,
@@ -388,7 +417,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4 \uB108\uBE44 (\uC5C6\uC73C\uBA74 \uD2B8\uB9AC\uAC70 \uB108\uBE44\uB85C \uC790\uB3D9 \uB9DE\uCDA4)"
                 },
                 "getter": false,
                 "setter": false,
@@ -408,7 +437,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4 \uCD5C\uB300 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -428,7 +457,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4 \uCD5C\uB300 \uB192\uC774"
                 },
                 "getter": false,
                 "setter": false,
@@ -448,7 +477,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -468,7 +497,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -488,7 +517,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -508,7 +537,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC6B0\uCE21 \uC5B4\uB4DC\uC628 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -535,7 +564,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5B4\uB4DC\uC628 \uC815\uB82C \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -555,7 +584,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -575,7 +604,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -595,7 +624,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -622,7 +651,7 @@ export class SdSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -645,7 +674,7 @@ export class SdSelect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -663,7 +692,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -690,7 +719,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false,
@@ -708,7 +737,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "true\uC774\uBA74 value\uB85C SelectOption \uB300\uC2E0 \uC6D0\uC2DC\uAC12(string|number) \uBC29\uCD9C"
                 },
                 "getter": false,
                 "setter": false,
@@ -728,7 +757,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -748,7 +777,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4 \uB0B4 \uAC80\uC0C9 \uC785\uB825 \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -768,7 +797,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC804\uCCB4 \uC120\uD0DD \uC2DC \uD45C\uC2DC\uD560 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -788,7 +817,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC804\uCCB4 \uC120\uD0DD \uCCB4\uD06C\uBC15\uC2A4 \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -808,7 +837,7 @@ export class SdSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -838,7 +867,7 @@ export class SdSelect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC120\uD0DD \uAC12\uC774 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "SelectValue",
@@ -860,7 +889,7 @@ export class SdSelect {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4 \uC5F4\uB9BC/\uB2EB\uD798 \uC0C1\uD0DC\uAC00 \uBC14\uB014 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "{ isOpen: boolean }",
@@ -884,7 +913,7 @@ export class SdSelect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC140\uB809\uD2B8 \uD2B8\uB9AC\uAC70\uC5D0 \uD3EC\uCEE4\uC2A4\uB97C \uC774\uB3D9\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -901,7 +930,7 @@ export class SdSelect {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uB4DC\uB86D\uB2E4\uC6B4\uC744 \uC5FD\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

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

@@ -1,9 +1,13 @@
 import { h } from "@stencil/core";
 import { SWITCH_COLORS, SWITCH_LAYOUT, SWITCH_TYPOGRAPHY } from "./sd-switch.config";
 export class SdSwitch {
+    /** 현재 on/off 상태 */
     value = false;
+    /** 표시할 라벨 텍스트 */
     label = '';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 상태가 변경될 때 발생합니다. */
     change;
     get switchClasses() {
         const classes = ['sd-switch', this.value ? 'sd-switch--on' : 'sd-switch--off'];
@@ -41,7 +45,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '4746eeb0cd3b977be3bc537c30cbf58c51d3a8fc', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'f022803741f2ac787a8993a2d987eedc5d6c8f24', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'd8684dcb2b446885f849e6f00d773ef340e37c73', class: "sd-switch__track" }, h("div", { key: '572bd3dd7f65c9a9fd36c27b4444b0e653ae2b23', class: "sd-switch__knob" })), this.label && h("span", { key: '5228763c541a4bc0a71bfb457a4432dca01d452f', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '2cbee35194a8218f1526ecd26d0ff0cc660ed5fb', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '8c9a330a7b69035ace0644f0a2cab8f6f8672bfd', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '738a28fb9c26628d6b67f03d0b75f4155ad85966', class: "sd-switch__track" }, h("div", { key: '91b7bac6c4e48d1b5b1331713620a132e9921906', class: "sd-switch__knob" })), this.label && h("span", { key: 'a9cdfb08c240f3d6a15bef3e119c0c02f3fe3462', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {
@@ -68,7 +72,7 @@ export class SdSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD604\uC7AC on/off \uC0C1\uD0DC"
                 },
                 "getter": false,
                 "setter": false,
@@ -88,7 +92,7 @@ export class SdSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD45C\uC2DC\uD560 \uB77C\uBCA8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -108,7 +112,7 @@ export class SdSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -127,7 +131,7 @@ export class SdSwitch {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC0C1\uD0DC\uAC00 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "boolean",