@sellmate/design-system 1.0.62 → 1.0.64

package/dist/collection/components/sd-button-v2/sd-button-v2.css

@@ -5,7 +5,7 @@ sd-button-v2 {
 }
 
 .sd-button-v2 {
-  --sd-button-v2-height: 34px;
+  --sd-button-v2-height: 36px;
   --sd-button-v2-padding-x: 20px;
   --sd-button-v2-gap: 8px;
   --sd-button-v2-font-family: inherit;
@@ -14,10 +14,10 @@ sd-button-v2 {
   --sd-button-v2-text-decoration: none;
   --sd-button-v2-label-min-width: auto;
   --sd-button-v2-icon-only-size: var(--sd-button-v2-height);
-  --sd-button-v2-bg: $oceanblue_75;
-  --sd-button-v2-bg-hover: $oceanblue_80;
+  --sd-button-v2-bg: #025497;
+  --sd-button-v2-bg-hover: #004177;
   --sd-button-v2-border: transparent;
-  --sd-button-v2-content: $white;
+  --sd-button-v2-content: #FFFFFF;
   --sd-button-v2-current-content: var(--sd-button-v2-content);
   --sd-button-v2-current-icon: var(--sd-button-v2-content);
   display: inline-flex;
@@ -26,8 +26,8 @@ sd-button-v2 {
   min-height: var(--sd-button-v2-height);
   min-width: var(--sd-button-v2-min-width, auto);
   padding: 0 var(--sd-button-v2-padding-x);
-  border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-v2-border);
-  border-radius: var(--sd-button-radius-sm, 4px);
+  border: var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-v2-border);
+  border-radius: var(--sd-button-button-radius-sm, 4px);
   background: var(--sd-button-v2-bg);
   color: var(--sd-button-v2-current-content);
   cursor: pointer;
@@ -50,50 +50,50 @@ sd-button-v2 {
   box-shadow: 0 0 0 2px var(--sd-button-v2-accent);
 }
 .sd-button-v2--xs {
-  --sd-button-v2-height: var(--sd-button-xs-height, 24px);
-  --sd-button-v2-padding-x: var(--sd-button-xs-padding-x, 8px);
-  --sd-button-v2-gap: var(--sd-button-xs-gap, 4px);
-  --sd-button-v2-font-family: var(--sd-button-xs-typography-font-family, inherit);
-  --sd-button-v2-font-size: var(--sd-button-xs-typography-font-size, 12px);
-  --sd-button-v2-font-weight: var(--sd-button-xs-typography-font-weight, 500);
-  --sd-button-v2-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+  --sd-button-v2-height: var(--sd-button-button-xs-height, 24px);
+  --sd-button-v2-padding-x: var(--sd-button-button-xs-padding-x, 8px);
+  --sd-button-v2-gap: var(--sd-button-button-xs-gap, 4px);
+  --sd-button-v2-font-family: var(--sd-button-button-xs-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-button-xs-typography-font-size, 12px);
+  --sd-button-v2-font-weight: var(--sd-button-button-xs-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-button-xs-typography-text-decoration, none);
   --sd-button-v2-label-min-width: var(--sd-button-label-xs-min-width, 36px);
-  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-v2-height));
+  --sd-button-v2-icon-only-size: var(--sd-button-button-icon-only-xs-width, var(--sd-button-v2-height));
 }
 .sd-button-v2--sm {
-  --sd-button-v2-height: var(--sd-button-sm-height, 28px);
-  --sd-button-v2-padding-x: var(--sd-button-sm-padding-x, 12px);
-  --sd-button-v2-gap: var(--sd-button-sm-gap, 6px);
-  --sd-button-v2-font-family: var(--sd-button-sm-typography-font-family, inherit);
-  --sd-button-v2-font-size: var(--sd-button-sm-typography-font-size, 12px);
-  --sd-button-v2-font-weight: var(--sd-button-sm-typography-font-weight, 500);
-  --sd-button-v2-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+  --sd-button-v2-height: var(--sd-button-button-sm-height, 28px);
+  --sd-button-v2-padding-x: var(--sd-button-button-sm-padding-x, 12px);
+  --sd-button-v2-gap: var(--sd-button-button-sm-gap, 6px);
+  --sd-button-v2-font-family: var(--sd-button-button-sm-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-button-sm-typography-font-size, 12px);
+  --sd-button-v2-font-weight: var(--sd-button-button-sm-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-button-sm-typography-text-decoration, none);
   --sd-button-v2-label-min-width: var(--sd-button-label-sm-min-width, 70px);
-  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-v2-height));
+  --sd-button-v2-icon-only-size: var(--sd-button-button-icon-only-sm-width, var(--sd-button-v2-height));
 }
 .sd-button-v2--md {
-  --sd-button-v2-height: var(--sd-button-md-height, 34px);
-  --sd-button-v2-padding-x: var(--sd-button-md-padding-x, 20px);
-  --sd-button-v2-gap: var(--sd-button-md-gap, 8px);
-  --sd-button-v2-font-family: var(--sd-button-md-typography-font-family, inherit);
-  --sd-button-v2-font-size: var(--sd-button-md-typography-font-size, 16px);
-  --sd-button-v2-font-weight: var(--sd-button-md-typography-font-weight, 500);
-  --sd-button-v2-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-button-v2-height: var(--sd-button-button-md-height, 36px);
+  --sd-button-v2-padding-x: var(--sd-button-button-md-padding-x, 20px);
+  --sd-button-v2-gap: var(--sd-button-button-md-gap, 8px);
+  --sd-button-v2-font-family: var(--sd-button-button-md-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-button-md-typography-font-size, 16px);
+  --sd-button-v2-font-weight: var(--sd-button-button-md-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-button-md-typography-text-decoration, none);
   --sd-button-v2-label-min-width: var(--sd-button-label-md-min-width, 100px);
-  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-v2-height));
-  border-radius: var(--sd-button-radius-md, 6px);
+  --sd-button-v2-icon-only-size: var(--sd-button-button-icon-only-md-width, var(--sd-button-v2-height));
+  border-radius: var(--sd-button-button-radius-md, 6px);
 }
 .sd-button-v2--lg {
-  --sd-button-v2-height: var(--sd-button-lg-height, 62px);
-  --sd-button-v2-padding-x: var(--sd-button-lg-padding-x, 28px);
-  --sd-button-v2-gap: var(--sd-button-lg-gap, 12px);
-  --sd-button-v2-font-family: var(--sd-button-lg-typography-font-family, inherit);
-  --sd-button-v2-font-size: var(--sd-button-lg-typography-font-size, 18px);
-  --sd-button-v2-font-weight: var(--sd-button-lg-typography-font-weight, 500);
-  --sd-button-v2-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
+  --sd-button-v2-height: var(--sd-button-button-lg-height, 62px);
+  --sd-button-v2-padding-x: var(--sd-button-button-lg-padding-x, 28px);
+  --sd-button-v2-gap: var(--sd-button-button-lg-gap, 12px);
+  --sd-button-v2-font-family: var(--sd-button-button-lg-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-button-lg-typography-font-size, 18px);
+  --sd-button-v2-font-weight: var(--sd-button-button-lg-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-button-lg-typography-text-decoration, none);
   --sd-button-v2-label-min-width: var(--sd-button-label-lg-min-width, 120px);
-  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-v2-height));
-  border-radius: var(--sd-button-radius-md, 6px);
+  --sd-button-v2-icon-only-size: var(--sd-button-button-icon-only-lg-width, var(--sd-button-v2-height));
+  border-radius: var(--sd-button-button-radius-md, 6px);
 }
 .sd-button-v2--has-label {
   --sd-button-v2-min-width: var(--sd-button-v2-label-min-width, auto);
@@ -108,10 +108,10 @@ sd-button-v2 {
   gap: 0;
 }
 .sd-button-v2--disabled {
-  border-color: var(--sd-button-border-disabled, #CCCCCC);
-  background: var(--sd-button-bg-disabled, #E1E1E1);
-  --sd-button-v2-current-content: var(--sd-button-text-disabled, $grey_65);
-  --sd-button-v2-current-icon: var(--sd-button-icon-disabled, $grey_75);
+  border-color: var(--sd-button-button-border-disabled, #CCCCCC);
+  background: var(--sd-button-button-bg-disabled, #E1E1E1);
+  --sd-button-v2-current-content: var(--sd-button-button-text-disabled, #888888);
+  --sd-button-v2-current-icon: var(--sd-button-button-icon-disabled, #BBBBBB);
   cursor: not-allowed;
 }
 .sd-button-v2 .sd-button-v2__content {

package/dist/collection/components/sd-button-v2/sd-button-v2.js

@@ -4,6 +4,7 @@ export class SdButtonV2 {
     name = 'primary_sm';
     label = '';
     icon;
+    rightIcon;
     ariaLabel = '';
     disabled = false;
     type = 'button';
@@ -44,7 +45,7 @@ export class SdButtonV2 {
         this.warnIfMissingAriaLabel();
     }
     warnIfMissingAriaLabel() {
-        const iconOnly = !this.label && Boolean(this.icon);
+        const iconOnly = !this.label && (Boolean(this.icon) || Boolean(this.rightIcon));
         const missingAriaLabel = iconOnly && !this.ariaLabel.trim();
         if (!missingAriaLabel) {
             this.hasWarnedMissingAriaLabel = false;
@@ -53,21 +54,21 @@ export class SdButtonV2 {
         if (this.hasWarnedMissingAriaLabel) {
             return;
         }
-        console.warn(`[sd-button-v2] icon-only buttons require \`ariaLabel\`. Received name="${this.name}" icon="${this.icon}".`);
+        console.warn(`[sd-button-v2] icon-only buttons require \`ariaLabel\`. Received name="${this.name}" icon="${this.icon ?? this.rightIcon}".`);
         this.hasWarnedMissingAriaLabel = true;
     }
     render() {
         const { config, preset } = this.resolvedConfig;
         const hasLabel = Boolean(this.label);
-        const iconOnly = !this.label && Boolean(this.icon);
+        const iconOnly = !this.label && (Boolean(this.icon) !== Boolean(this.rightIcon));
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: 'b61c65948aacc951a46fb4d6cce8e4df715c5ae5', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
-                '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
+        return (h("button", { key: '50bb61cfbf36d2f002b6937603640ea585d42a0e', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+                '--sd-button-v2-bg': config.color,
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: 'bdfe42f07909dee43ddd596eccc73eb0de7b59fd', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'ec6b33b19f26f9732d969dd351f578706de37016', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '1eebf5dacec105472215f2a1e33052c13366b40b', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: 'a1f34337cc33a6eba29547ff7df39109739bb06c', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'fb4b8c87c57979f3c39eaa893626e6c3f5e56b08', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '00e78a17818e7c286b33ca45e37eac78102cf590', class: "sd-button-v2__label" }, this.label), this.rightIcon && (h("sd-icon", { key: '9e146585df41a6784a09e8239b28c8e8b4f30516', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {
@@ -153,6 +154,30 @@ export class SdButtonV2 {
                 "reflect": false,
                 "attribute": "icon"
             },
+            "rightIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "references": {
+                        "IconName": {
+                            "location": "global",
+                            "id": "global::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-icon"
+            },
             "ariaLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '1097b68c59997cb041057ff7b77330275c52f7c7' }, h("div", { key: 'a6eb3be04f9bcad7f712c0f28ff9750ebfd5697a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'c2b5ae153d520f4078bb6e7ab4cd41f83eb32ad3' }))));
+        return (h(Fragment, { key: 'dd37653555ffeab3b249575c8a1cbe9aa70498b1' }, h("div", { key: 'eb0cea509b62fe1942d8ddfb955fee920b5c51a5', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'a792a49e58b1b1756f11d0bb6e7441674c63455e' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -22,8 +22,11 @@ export const CHECKBOX_COLORS = {
         bg: checkboxTokens.checkbox.checked.bg.default,
         icon: checkboxTokens.checkbox.checked.icon.default,
         iconDisabled: checkboxTokens.checkbox.checked.icon.disabled,
+        iconInverse: checkboxTokens.checkbox.checked.icon.inverse,
+        borderInverse: checkboxTokens.checkbox.checked.border.inverse,
     },
     label: checkboxTokens.checkbox.label.default,
+    labelInverse: checkboxTokens.checkbox.label.inverse,
     disabled: {
         bg: checkboxTokens.checkbox.bg.disabled,
         border: checkboxTokens.checkbox.border.disabled,

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

@@ -65,4 +65,19 @@ sd-checkbox .sd-checkbox--disabled {
 sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg {
   background: var(--sd-checkbox-disabled-bg);
   border-color: var(--sd-checkbox-disabled-border);
+}
+sd-checkbox .sd-checkbox--inverse .sd-checkbox__label {
+  color: var(--sd-checkbox-inverse-label);
+}
+sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg {
+  background: transparent;
+  border-color: var(--sd-checkbox-inverse-border);
+}
+sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg {
+  background: transparent;
+  border-color: var(--sd-checkbox-inverse-border);
+}
+sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg {
+  background: rgba(255, 255, 255, 0.12);
+  border-color: var(--sd-checkbox-inverse-border);
 }

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

@@ -8,6 +8,8 @@ export class SdCheckbox {
     val;
     /** 비활성화 여부 */
     disabled = false;
+    /** 어두운 배경 위에서 사용하는 inverse(흰색) 스타일 */
+    inverse = false;
     /** 표시할 라벨 텍스트 */
     label = '';
     /** 내부 체크 상태 */
@@ -30,6 +32,9 @@ export class SdCheckbox {
         if (this.disabled) {
             classes.push('sd-checkbox--disabled');
         }
+        if (this.inverse) {
+            classes.push('sd-checkbox--inverse');
+        }
         return classes.join(' ');
     }
     updateCheckedState(value) {
@@ -88,8 +93,17 @@ export class SdCheckbox {
             '--sd-checkbox-label-color': CHECKBOX_COLORS.label,
             '--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: 'b343ac293abfb6a7834cccc597cd30e56e3a161c', class: this.checkboxClasses, style: cssVars }, h("input", { key: '89d3c5ec214af16680f2111e5e85fcb228ff2223', 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: '8eef48a269cbbf8c479d60a53996b09cc4aa8f20', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled ? CHECKBOX_COLORS.checked.iconDisabled : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '43bf36ec3a3890f68ef699dbb73b48eb6a98451d', class: "sd-checkbox__label" }, this.label)));
+        return (h("label", { key: '1a1c4dac0a2ce24ae51ce0baba74a7add387aa2f', class: this.checkboxClasses, style: cssVars }, h("input", { key: '4a45bc9bbaaf6ddaebf3445045ab7b1f789f81d5', 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: '7d8ae7276470bf4543cdee1a0b25793f07d23c66', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', 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: 'd791d977073b0916917c7ce770cf73c1ff81f3bd', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {
@@ -164,10 +178,30 @@ export class SdCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "inverse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC5B4\uB450\uC6B4 \uBC30\uACBD \uC704\uC5D0\uC11C \uC0AC\uC6A9\uD558\uB294 inverse(\uD770\uC0C9) \uC2A4\uD0C0\uC77C"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "inverse",
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sd-circle-progress/sd-circle-progress.config.js

@@ -0,0 +1,24 @@
+import spinnerTokens from "../../tokens/generated/component.spinner.json";
+// TODO: error/complete 색상 및 inverse 흰색은 토큰 반영 후 교체
+export const CIRCLE_PROGRESS_COLOR_MAP = {
+    primary: {
+        arc: spinnerTokens.spinner.color.arc,
+        track: spinnerTokens.spinner.color.track,
+    },
+    inverse: {
+        arc: '#FFFFFF',
+        track: 'transparent',
+    },
+    error: {
+        arc: '#E30000',
+        track: spinnerTokens.spinner.color.track,
+    },
+    complete: {
+        arc: '#01BB4B',
+        track: spinnerTokens.spinner.color.track,
+    },
+};
+export const CIRCLE_PROGRESS_VIEWBOX_SIZE = 80;
+export const CIRCLE_PROGRESS_RADIUS = 34;
+export const CIRCLE_PROGRESS_STROKE_WIDTH = 12;
+export const CIRCLE_PROGRESS_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_PROGRESS_RADIUS;

package/dist/collection/components/sd-circle-progress/sd-circle-progress.css

@@ -0,0 +1,53 @@
+@charset "UTF-8";
+sd-circle-progress {
+  display: inline-flex;
+  width: 80px;
+  height: 80px;
+}
+sd-circle-progress .sd-circle-progress {
+  width: 100%;
+  height: 100%;
+}
+sd-circle-progress .sd-circle-progress__track {
+  stroke: var(--sd-circle-progress-track);
+}
+sd-circle-progress .sd-circle-progress__arc {
+  stroke: var(--sd-circle-progress-arc);
+  transform: rotate(-90deg);
+  transform-origin: center center;
+  transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease;
+}
+sd-circle-progress {
+  /* indeterminate 모드: 회전 + dasharray grow/shrink 애니메이션 */
+}
+sd-circle-progress[indeterminate] .sd-circle-progress {
+  animation: sd-circle-progress-spin 2s linear infinite;
+  transform-origin: center center;
+}
+sd-circle-progress[indeterminate] .sd-circle-progress__arc {
+  transform: none;
+  transition: none;
+  animation: sd-circle-progress-spin-path 1.5s ease-in-out infinite;
+}
+@keyframes sd-circle-progress-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes sd-circle-progress-spin-path {
+  0% {
+    stroke-dasharray: 1, 340;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 151, 340;
+    stroke-dashoffset: -60;
+  }
+  100% {
+    stroke-dasharray: 151, 340;
+    stroke-dashoffset: -211;
+  }
+}

package/dist/collection/components/sd-circle-progress/sd-circle-progress.js

@@ -0,0 +1,109 @@
+import { Host, h } from "@stencil/core";
+import { CIRCLE_PROGRESS_CIRCUMFERENCE, CIRCLE_PROGRESS_COLOR_MAP, CIRCLE_PROGRESS_RADIUS, CIRCLE_PROGRESS_STROKE_WIDTH, CIRCLE_PROGRESS_VIEWBOX_SIZE, } from "./sd-circle-progress.config";
+export class SdCircleProgress {
+    indeterminate = false;
+    value = 0;
+    type = 'primary';
+    get clampedValue() {
+        if (!Number.isFinite(this.value))
+            return 0;
+        return Math.max(0, Math.min(100, this.value));
+    }
+    render() {
+        const colors = CIRCLE_PROGRESS_COLOR_MAP[this.type] ?? CIRCLE_PROGRESS_COLOR_MAP.primary;
+        const hostStyle = {
+            '--sd-circle-progress-track': colors.track,
+            '--sd-circle-progress-arc': colors.arc,
+        };
+        const arcStyle = {};
+        if (!this.indeterminate) {
+            const filled = (this.clampedValue / 100) * CIRCLE_PROGRESS_CIRCUMFERENCE;
+            arcStyle.strokeDasharray = `${filled} ${CIRCLE_PROGRESS_CIRCUMFERENCE}`;
+            arcStyle.strokeDashoffset = '0';
+        }
+        const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
+        return (h(Host, { key: 'fb876909febfc95bb69c58031ac37419baa07137', style: hostStyle }, h("svg", { key: '3bb8130bab317a74c1553dd2ceb52b8c0f65f69f', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '5904f93a6b1c333dbcbd805140d5e65b5af20080', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '4d8a1d352e4003a75dd63f67a66a05f595ae5700', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
+    }
+    static get is() { return "sd-circle-progress"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-circle-progress.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-circle-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CircleProgressType",
+                    "resolved": "\"complete\" | \"error\" | \"inverse\" | \"primary\"",
+                    "references": {
+                        "CircleProgressType": {
+                            "location": "import",
+                            "path": "./sd-circle-progress.config",
+                            "id": "src/components/sd-circle-progress/sd-circle-progress.config.ts::CircleProgressType",
+                            "referenceLocation": "CircleProgressType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'primary'"
+            }
+        };
+    }
+}

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.css

@@ -38,7 +38,7 @@ sd-confirm-modal .sd-confirm-modal__message-text {
   color: var(--sd-modal-modal-confirm-message-color);
   font-size: 12px;
   font-weight: 400;
-  line-height: 22px;
+  line-height: 20px;
   text-align: center;
   margin: 0;
 }
@@ -62,5 +62,5 @@ sd-confirm-modal .sd-confirm-modal__button {
   display: flex;
   justify-content: center;
   gap: var(--sd-modal-modal-confirm-button-gap);
-  margin-top: 32px;
+  margin-top: 40px;
 }

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js

@@ -67,9 +67,9 @@ export class SdConfirmModal {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: '5a81aa943cbaf554e665b5030c1c46e6aedc0a38', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'd4d48c22ce5cd3895adb6e48688907f7c9d4202a', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'da157d4699b67cb75d25ee8d5da6694e13b874e4', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '4362cd4581cec25b4fd9b88206cc21f5ffa68ca9', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '2169cdc63bc9affb0149e50f0fb94d08ec371bf5', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '3f51315daed6bf8bce81137d8621c26b1960dac3', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '5826cd4b28b8b4c38f28bea030a43f32a2a4203e', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: 'c95e6e3992e9d63c19f27624e92c00b5046503e0', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'edab233c28ebcfc181062d78cb80ec27a3ace8b4', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '4ea2ef8ac6027a6455367b39b6d3cc6cf073f0a8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '5a25a6f0812a6932949a2667db2af1b69d772293', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'b431572003c129a0d44095a317532b535753abd3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'cd425d24bde982323a0156ff18f4dcdc81660dd5', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '9486cf19dc6692228f615112b0777b6167c1a8de', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'a28bacaafc973b8b5d8be998c49d4b203f7ecc19', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '791db1eb69ba9ef56fa0298d7539cde55b08e2ac', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '08407e3d972c6828f58020be94aa81a93f5e0e8c', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: '6ef6528e54d2fe81ad96a546512a8a49b17f67d5', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '7218d8bf72e26f36f88db68f57818911bb09056d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'e16de1bb3c851988050b12ac07c7adcedab560da', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '8c14b099e6b8a93673ff3eb2f0931a45c98d620a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: 'fb9a3984f0476d2fceca98bac186d0a52a0ab206', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js

@@ -133,7 +133,7 @@ export class SdDatePickerCalendar {
             '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (h("div", { key: 'df2517386d844ade51de158c511a7f2ec77714f9', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '16185a3b082fdf59f7ea325a96cf9d7f67622278', class: "sd-date-picker-calendar__header" }, h("div", { key: 'bf6839f659dd01238310721284fae78f2189de8a', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '474514e32f4ce65b07e704f246a60104f0adec0e', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '51c0f67e762a2a9efd166eaeb066d28e6b412f7d', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '9fbb3f071917370764886ab63f2f39d90ff7224d', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'b9afde6cc30bf791d487d16b67a50d4a270601f6', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '3d9c647a135376c524036eec85dc80c143225e2d', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '233351d0151458b088264872fca2bb75fa3d3d4f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '26913dd888a4a3589edc3ae63345c2e02e418aa5', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '7700394ff1c9f19a5559e829fb016f2d2a97b242', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '7d2b2577092fb2f817bbd6fcb711425992d4ba34', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: 'c6784bcbf7c939eb1848cfa20f87f17534ade21e', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: '9e47bf6790f947639b1868a653c9d451905d4a49', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '641a9726b22aff0e465347bf3363fdd6f3110919', class: "sd-date-picker-calendar__header" }, h("div", { key: '71e4838be05148f989af7ccb692482db425c38d7', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '060795c43807ee50b13448ac559fb7945a48d8be', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '5cf2c070134aa04dc5f9d506b91bdff759d9453b', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'dd3c9d26bc4b79673e12b90d2a7d563e4adda707', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '962ee5b8adbcbf988bc94b81b3dd0fe4e388a588', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '54d1fcfbcbe1e232cbea5cdd9a948045207771c7', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: 'ff8011dbf88a257ba4b47dbcd1a3b8c414b4e7b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '2594eed1efacc8b3bdf648ab7527a81608e2321d', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: 'a83692da9caeaef4c02c777d43f769026182d5a2', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'bc131a11ed98ac84dee775090ca24be794fece55', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: 'bc4deb734c9c01806ae7e75640f97d76c9e79f64', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);

package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js

@@ -31,10 +31,10 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: 'e39df39c0b865be9f08e60787ea122dccaa7bff4', class: {
+        return (h("div", { key: '5d8508069232bba144bfb9480b0befe420a3392b', class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: 'a04c576196fb9695a044485f30d459fd6e945b33', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '94b4da3bc41f31519afbb49324548209582be850', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: '71131e34dd1225e9633395041f7a768c020343bd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '192520646e181add5f87f6ce1d3a5caf8556b163', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker.config.js

@@ -51,7 +51,7 @@ export const CALENDAR_LAYOUT = {
         rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
     },
     day: {
-        size: datepickerTokens.datepicker.calendar.day.size,
+        size: datepickerTokens.datepicker.calendar.day.width,
         circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
         circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
         defaultText: datepickerTokens.datepicker.calendar.day.default.text,