@sellmate/design-system 1.20.1 → 1.22.0

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

@@ -1,9 +1,11 @@
 import { Fragment, h } from "@stencil/core";
 export class SdCard {
+    /** 테두리 표시 여부 */
     bordered = false;
+    /** 카드 루트 엘리먼트에 추가할 클래스 */
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'cda3366416a347552ffe66446f9fd1267654fa75' }, h("div", { key: '5b29d955402031dcc82df70df25fe1146787adec', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'f2a5c548de34d6bf32de75db76686da91d605e28' }))));
+        return (h(Fragment, { key: '1f40edfdae15a66922336229ebe49c570efa2059' }, h("div", { key: '365233f8ee792e36b6b6f1084ed1adc79787029b', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'd015ddda7cfb610e1def605d7077d710312514d1' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {
@@ -30,7 +32,7 @@ export class SdCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD14C\uB450\uB9AC \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -50,7 +52,7 @@ export class SdCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE74\uB4DC \uB8E8\uD2B8 \uC5D8\uB9AC\uBA3C\uD2B8\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -7,9 +7,10 @@ export const CHECKBOX_LAYOUT = {
     iconSize: checkboxTokens.checkbox.icon,
 };
 export const CHECKBOX_TYPOGRAPHY = {
-    fontSize: checkboxTokens.checkbox.typography.fontSize,
-    lineHeight: checkboxTokens.checkbox.typography.lineHeight,
-    fontWeight: checkboxTokens.checkbox.typography.fontWeight,
+    fontSize: checkboxTokens.checkbox.typography.default.fontSize,
+    lineHeight: checkboxTokens.checkbox.typography.default.lineHeight,
+    fontWeight: checkboxTokens.checkbox.typography.default.fontWeight,
+    selectedFontWeight: checkboxTokens.checkbox.typography.selected.fontWeight,
 };
 export const CHECKBOX_COLORS = {
     unchecked: {
@@ -27,6 +28,7 @@ export const CHECKBOX_COLORS = {
     },
     label: checkboxTokens.checkbox.label.default,
     labelInverse: checkboxTokens.checkbox.label.inverse,
+    labelDisabled: checkboxTokens.checkbox.label.disabled,
     disabled: {
         bg: checkboxTokens.checkbox.bg.disabled,
         border: checkboxTokens.checkbox.border.disabled,

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

@@ -43,11 +43,24 @@ sd-checkbox .sd-checkbox__bg {
   line-height: 0;
 }
 sd-checkbox .sd-checkbox__label {
+  display: inline-flex;
+  flex-direction: column;
   font-size: var(--sd-checkbox-font-size);
   font-weight: var(--sd-checkbox-font-weight);
   color: var(--sd-checkbox-label-color);
   line-height: var(--sd-checkbox-line-height);
 }
+sd-checkbox .sd-checkbox__label::after {
+  content: attr(data-text);
+  height: 0;
+  font-weight: var(--sd-checkbox-font-weight-selected);
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+}
+sd-checkbox .sd-checkbox--checked .sd-checkbox__label, sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__label {
+  font-weight: var(--sd-checkbox-font-weight-selected);
+}
 sd-checkbox .sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg {
   border-color: var(--sd-checkbox-checked-bg);
   background: var(--sd-checkbox-checked-bg);
@@ -62,6 +75,9 @@ sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg {
 sd-checkbox .sd-checkbox--disabled {
   cursor: not-allowed;
 }
+sd-checkbox .sd-checkbox--disabled .sd-checkbox__label {
+  color: var(--sd-checkbox-label-disabled);
+}
 sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg {
   background: var(--sd-checkbox-disabled-bg);
   border-color: var(--sd-checkbox-disabled-border);

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

@@ -93,25 +93,27 @@ export class SdCheckbox {
             '--sd-checkbox-font-size': `${CHECKBOX_TYPOGRAPHY.fontSize}px`,
             '--sd-checkbox-line-height': `${CHECKBOX_TYPOGRAPHY.lineHeight}px`,
             '--sd-checkbox-font-weight': CHECKBOX_TYPOGRAPHY.fontWeight,
+            '--sd-checkbox-font-weight-selected': CHECKBOX_TYPOGRAPHY.selectedFontWeight,
             '--sd-checkbox-unchecked-bg': CHECKBOX_COLORS.unchecked.bg,
             '--sd-checkbox-unchecked-bg-hover': CHECKBOX_COLORS.unchecked.bgHover,
             '--sd-checkbox-unchecked-border': CHECKBOX_COLORS.unchecked.border,
             '--sd-checkbox-unchecked-border-hover': CHECKBOX_COLORS.unchecked.borderHover,
             '--sd-checkbox-checked-bg': CHECKBOX_COLORS.checked.bg,
             '--sd-checkbox-label-color': CHECKBOX_COLORS.label,
+            '--sd-checkbox-label-disabled': CHECKBOX_COLORS.labelDisabled,
             '--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
             '--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
             '--sd-checkbox-inverse-border': CHECKBOX_COLORS.checked.borderInverse,
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '1e1ba8ab22e34327cfdfb8d236aba0e1ff2806f6', class: this.checkboxClasses, style: cssVars }, h("input", { key: '82b852e0fb3ca94c460b7181ae1c575b361ddd4d', type: "checkbox", ref: el => {
+        return (h("label", { key: '3fa9a68790e4a777904d1c8ec1fc18b646a2e41b', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'ecbabd8967c8c73e0b9216157d96b5d5f07777bd', type: "checkbox", ref: el => {
                 this.inputEl = el;
-            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: 'e7a32ccbb915c857d188fecde0b388e15edebdfb', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '633c38ae79790aa5745240f68253613705f804cf', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'checkboxCheck' : 'checkboxIndeterminate', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '396b7aa27a10428e5d9d24a3f523c3a384d4e463', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && (h("span", { key: '6e46c09aa41d4d1b0dbad75b825513d6e4e08f11', class: "sd-checkbox__label", "data-text": this.label }, this.label))));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

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

@@ -2,18 +2,29 @@ import { h, } from "@stencil/core";
 import { CHIP_COLORS, CHIP_LAYOUT, CHIP_TYPOGRAPHY } from "./sd-chip.config";
 export class SdChip {
     el;
+    /** 폼 연동용 name 속성 */
     name = '';
+    /** 칩 텍스트 값 */
     value = '';
+    /** 에러 상태 여부 */
     error = false;
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 인라인 편집 가능 여부 */
     editable = true;
+    /** 편집 중 표시할 placeholder */
     placeholder = '';
+    /** 유효성 검사 규칙 목록 */
     rules = [];
     internalValue = '';
     isEditing = false;
+    /** 편집 완료 시 새 값을 전달합니다. */
     update;
+    /** 삭제 버튼 클릭 시 발생합니다. */
     delete;
+    /** 편집 모드 진입 시 발생합니다. */
     focus;
+    /** 편집 모드 이탈 시 발생합니다. */
     blur;
     inputEl;
     draftValue = '';
@@ -39,6 +50,7 @@ export class SdChip {
     disconnectedCallback() {
         this.unregisterFromForm();
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         if (!this.rules || this.rules.length === 0) {
             this.error = false;
@@ -54,6 +66,7 @@ export class SdChip {
         this.error = false;
         return true;
     }
+    /** 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.internalValue = '';
         this.value = '';
@@ -62,17 +75,21 @@ export class SdChip {
         this.isEditing = false;
         this.shouldInitInput = false;
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         this.error = false;
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidation() {
         this.error = false;
     }
+    /** 편집 모드로 전환하여 포커스를 이동합니다. */
     async sdFocus() {
         if (this.disabled)
             return;
         this.enterEditMode();
     }
+    /** 네이티브 input 엘리먼트를 반환합니다. */
     async sdGetNativeElement() {
         return this.inputEl ?? null;
     }
@@ -215,7 +232,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: 'a51c874d8f2ce5abea1dbcf878b4f1ceda0952a3', class: {
+        return (h("span", { key: '03dca835a12de78ae3c72cf50a8f1ed16b19cf00', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
@@ -250,7 +267,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -270,7 +287,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCE69 \uD14D\uC2A4\uD2B8 \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -290,7 +307,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -310,7 +327,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -330,7 +347,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC778\uB77C\uC778 \uD3B8\uC9D1 \uAC00\uB2A5 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -350,7 +367,7 @@ export class SdChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3B8\uC9D1 \uC911 \uD45C\uC2DC\uD560 placeholder"
                 },
                 "getter": false,
                 "setter": false,
@@ -377,7 +394,7 @@ export class SdChip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -400,7 +417,7 @@ export class SdChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3B8\uC9D1 \uC644\uB8CC \uC2DC \uC0C8 \uAC12\uC744 \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "string",
@@ -415,7 +432,7 @@ export class SdChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC0AD\uC81C \uBC84\uD2BC \uD074\uB9AD \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -430,7 +447,7 @@ export class SdChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3B8\uC9D1 \uBAA8\uB4DC \uC9C4\uC785 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -445,7 +462,7 @@ export class SdChip {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3B8\uC9D1 \uBAA8\uB4DC \uC774\uD0C8 \uC2DC \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "void",
@@ -469,7 +486,7 @@ export class SdChip {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -486,7 +503,7 @@ export class SdChip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -503,7 +520,7 @@ export class SdChip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -520,7 +537,7 @@ export class SdChip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -537,7 +554,7 @@ export class SdChip {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uD3B8\uC9D1 \uBAA8\uB4DC\uB85C \uC804\uD658\uD558\uC5EC \uD3EC\uCEE4\uC2A4\uB97C \uC774\uB3D9\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -558,7 +575,7 @@ export class SdChip {
                     "return": "Promise<HTMLSpanElement | null>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uB124\uC774\uD2F0\uBE0C input \uC5D8\uB9AC\uBA3C\uD2B8\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

package/dist/collection/components/sd-chip-input/sd-chip-input.css

@@ -113,6 +113,7 @@ sd-chip-input .sd-chip-input__suggestions {
 }
 sd-chip-input .sd-chip-input__suggestion-item {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   gap: var(--sd-chip-input-suggestion-gap);
   padding: var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);
@@ -132,6 +133,11 @@ sd-chip-input .sd-chip-input__suggestion-item--active {
   color: var(--sd-chip-input-suggestion-color-hover);
   font-weight: var(--sd-chip-input-suggestion-font-weight-selected);
 }
+sd-chip-input .sd-chip-input__suggestion-item--selected {
+  cursor: default;
+  overflow: visible;
+  text-overflow: unset;
+}
 sd-chip-input .sd-chip-input__suggestions-empty {
   padding: 12px;
   text-align: center;