@sellmate/design-system 1.4.0 → 1.6.0

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

@@ -0,0 +1,87 @@
+@charset "UTF-8";
+sd-callout {
+  display: block;
+  width: fit-content;
+}
+sd-callout .sd-callout {
+  display: inline-flex;
+  align-items: stretch;
+  width: fit-content;
+  border: var(--sd-callout-border-width) solid var(--sd-callout-border);
+  border-radius: var(--sd-callout-radius);
+  background-color: var(--sd-callout-bg);
+  color: var(--sd-callout-content);
+  overflow: hidden;
+}
+sd-callout .sd-callout__title {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sd-callout-title-gap);
+  padding: 8px var(--sd-callout-title-padding-x);
+  background-color: var(--sd-callout-title-bg);
+  color: var(--sd-callout-title-color);
+  font-family: var(--sd-callout-title-font-family);
+  font-size: var(--sd-callout-title-font-size);
+  font-weight: var(--sd-callout-title-font-weight);
+  line-height: var(--sd-callout-title-line-height);
+  flex-shrink: 0;
+}
+sd-callout .sd-callout__title-text {
+  white-space: nowrap;
+}
+sd-callout .sd-callout__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sd-callout-body-gap);
+  padding: var(--sd-callout-body-padding-y) var(--sd-callout-body-padding-x);
+  font-family: var(--sd-callout-body-font-family);
+  font-size: var(--sd-callout-body-font-size);
+  font-weight: var(--sd-callout-body-font-weight);
+  line-height: var(--sd-callout-body-line-height);
+}
+sd-callout .sd-callout__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sd-callout-body-gap);
+}
+sd-callout .sd-callout__list__item {
+  display: flex;
+  align-items: flex-start;
+  color: var(--sd-callout-content);
+}
+sd-callout .sd-callout__list__item p {
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  min-width: 0;
+  word-break: break-word;
+}
+sd-callout .sd-callout__list__item::before {
+  display: block;
+  flex-shrink: 0;
+  text-align: center;
+  color: var(--sd-callout-content);
+  font-size: var(--sd-callout-body-font-size);
+  font-weight: var(--sd-callout-body-font-weight);
+  line-height: var(--sd-callout-body-line-height);
+}
+sd-callout .sd-callout__list__item--depth-1::before {
+  content: "-";
+  width: 24px;
+}
+sd-callout .sd-callout__list__item--depth-2 {
+  padding-left: 32px;
+}
+sd-callout .sd-callout__list__item--depth-2::before {
+  content: "•";
+  width: 24px;
+}

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

@@ -0,0 +1,114 @@
+import { h } from "@stencil/core";
+import { CALLOUT_LAYOUT, CALLOUT_TYPE_CONFIG, CALLOUT_TYPOGRAPHY, DANGER_TITLE_LABEL, TYPE_ICON, } from "./sd-callout.config";
+import { sanitizeInlineHtml } from "../../utils/html/sanitize-inline-html";
+export class SdCallout {
+    type = 'default';
+    message = [];
+    get calloutStyle() {
+        const typeConfig = CALLOUT_TYPE_CONFIG[this.type] ?? CALLOUT_TYPE_CONFIG.default;
+        return {
+            '--sd-callout-bg': typeConfig.bg,
+            '--sd-callout-border': typeConfig.border,
+            '--sd-callout-border-width': CALLOUT_LAYOUT.borderWidth,
+            '--sd-callout-content': typeConfig.content,
+            '--sd-callout-radius': CALLOUT_LAYOUT.radius,
+            '--sd-callout-body-padding-x': CALLOUT_LAYOUT.bodyPaddingX,
+            '--sd-callout-body-padding-y': CALLOUT_LAYOUT.bodyPaddingY,
+            '--sd-callout-body-gap': CALLOUT_LAYOUT.bodyGap,
+            '--sd-callout-body-font-family': CALLOUT_TYPOGRAPHY.body.fontFamily,
+            '--sd-callout-body-font-size': CALLOUT_TYPOGRAPHY.body.fontSize,
+            '--sd-callout-body-font-weight': CALLOUT_TYPOGRAPHY.body.fontWeight,
+            '--sd-callout-body-line-height': CALLOUT_TYPOGRAPHY.body.lineHeight,
+            '--sd-callout-title-bg': typeConfig.titleBg ?? 'transparent',
+            '--sd-callout-title-color': typeConfig.titleColor ?? 'inherit',
+            '--sd-callout-title-padding-x': CALLOUT_LAYOUT.titlePaddingX,
+            '--sd-callout-title-gap': CALLOUT_LAYOUT.titleGap,
+            '--sd-callout-title-font-family': CALLOUT_TYPOGRAPHY.title.fontFamily,
+            '--sd-callout-title-font-size': CALLOUT_TYPOGRAPHY.title.fontSize,
+            '--sd-callout-title-font-weight': CALLOUT_TYPOGRAPHY.title.fontWeight,
+            '--sd-callout-title-line-height': CALLOUT_TYPOGRAPHY.title.lineHeight,
+        };
+    }
+    renderListItem(msg, depth = 0) {
+        if (Array.isArray(msg)) {
+            return msg.flatMap(m => this.renderListItem(m, depth + 1));
+        }
+        return [this.renderLi(msg, depth)];
+    }
+    renderLi = (msg, depth) => {
+        const safeDepth = Math.min(Math.max(depth, 1), 2);
+        return (h("li", { class: `sd-callout__list__item sd-callout__list__item--depth-${safeDepth}` }, h("p", { innerHTML: sanitizeInlineHtml(msg) })));
+    };
+    renderBody() {
+        return h("ul", { class: "sd-callout__list" }, this.renderListItem(this.message));
+    }
+    renderTitle() {
+        const iconName = TYPE_ICON[this.type];
+        const titleColor = CALLOUT_TYPE_CONFIG[this.type].titleColor;
+        return (h("div", { class: "sd-callout__title" }, iconName && (h("sd-icon", { name: iconName, size: CALLOUT_LAYOUT.titleIconSize, color: titleColor })), h("span", { class: "sd-callout__title-text" }, DANGER_TITLE_LABEL)));
+    }
+    render() {
+        const showTitle = this.type === 'danger';
+        return (h("div", { key: 'ce91120e7c71907e6c07728554e340ad552d6e34', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '56b55c2fed40e59023856029b8c86c35b29d26e5', class: "sd-callout__body" }, this.renderBody())));
+    }
+    static get is() { return "sd-callout"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-callout.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-callout.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CalloutType",
+                    "resolved": "\"danger\" | \"default\"",
+                    "references": {
+                        "CalloutType": {
+                            "location": "import",
+                            "path": "./sd-callout.config",
+                            "id": "src/components/sd-callout/sd-callout.config.ts::CalloutType",
+                            "referenceLocation": "CalloutType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "message": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(string | string[])[]",
+                    "resolved": "(string | string[])[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '61c364f88b03eb56b60c660a58533f417d209e6a' }, h("div", { key: 'dee3671e757c273ffec06a15a0191a798280522c', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'f991bf5df95f8c1bac417aa4e70f40cf68624fb8' }))));
+        return (h(Fragment, { key: '2700ffa3af5b6b35882c396a838d9da2e866ee4b' }, h("div", { key: '3d3aeaac318fc089c42ae4348bc72015d4476276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e72f00bc8c209644baf5f431ce485fb5b691f354' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -67,7 +67,12 @@ export class SdCheckbox {
                 this.hasWarnedMissingVal = true;
             }
             const valueSet = new Set(this.value);
-            valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
+            if (valueSet.has(this.val)) {
+                valueSet.delete(this.val);
+            }
+            else {
+                valueSet.add(this.val);
+            }
             newValue = Array.from(valueSet);
         }
         else if (this.value === null) {
@@ -100,13 +105,13 @@ export class SdCheckbox {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '6fb506c448a5968d403f779d113fd60857901982', class: this.checkboxClasses, style: cssVars }, h("input", { key: 'fb08f531416255b8886d2bd2c21c3f62e8a9d47d', type: "checkbox", ref: el => {
+        return (h("label", { key: '1e1ba8ab22e34327cfdfb8d236aba0e1ff2806f6', class: this.checkboxClasses, style: cssVars }, h("input", { key: '82b852e0fb3ca94c460b7181ae1c575b361ddd4d', 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: 'e49eb38375ba680e08510f83a15ce8a6bbecd4b8', 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: '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
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '92bc308561b0a7653926d751d029d80c38844b07', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '396b7aa27a10428e5d9d24a3f523c3a384d4e463', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

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

@@ -205,7 +205,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '3cd683af3aed7cc6e549c5fc5da1e00cda2dc2a0', class: {
+        return (h("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

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

@@ -27,7 +27,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: 'd4ace6f784fd64a45baa746870a84a88b4911cf8', style: hostStyle }, h("svg", { key: '08aef376ac746abf1a9b404e37703a862f956a08', 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: '42411ef6f92f6427309d92dfad84ad7dc8f8c3bb', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'a0ae53ce4dfd557e980155cd0ff22ba064fe32dc', 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 })), showPercent && (h("span", { key: '0917cfd3aa460872fa4c35da61530e01080d6937', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '051756bc7b20e87205b21c735b2827a81c2a17c9', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, h("svg", { key: '669fa503cc6007f48f35474b08e4359de695026d', 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: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'e409da4a5c34adcd8744f16040ae9d5d6019a415', 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 })), showPercent && (h("span", { key: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { sanitizeInlineHtml } from "../../utils/html/sanitize-inline-html";
 import { CONFIRM_MODAL_DEFAULT_BUTTON, CONFIRM_MODAL_ICON_COLOR, CONFIRM_MODAL_ICON_MAP, SUB_BUTTON_PRESET, TITLE_ICON_SIZE, } from "./sd-confirm-modal.config";
 export class SdConfirmModal {
     el;
@@ -72,9 +73,9 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '6dc337947f7c05799cf7c97d45b0df84c7976196', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'b584cc4bc00191f8488be7265249922110d57d90', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '470716bef879befd1d6746bc27c10fb74d61a2b6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '5b0113f13b219a2e14c5d45397c293baafc28a2c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'cee18d1afde384523ca0f96f4138b8854f89cb5c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'b9466be3cbb635c9b8c0a50d7023b70fa31d9f0f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'f3ea52c0261a63e75b42175c2e7c602e02f82636', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: 'f9a1d63c1cd047969c72d0e71ccd3b1cf30bac15', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '8f1e4ec22a12ad9347c8c8c843f6dbb91591b289', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '8adada47e2dc0a6677cdf004ca8cad8794123d03', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'ddc0636d2cd8333aa0d5a3f242dbf2d57759fc5b', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: '66d4c779f4269824937306ca34a0b51e6208d03f', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '87634b26cba0fb24115f0cd59fcc7956f9fde53c', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '0b495d1393cf029e8b07f9041c51e344ff7cb5da', 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 ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'fa33e4f68a1c36e197ff6a6f5629005fbbebcbc3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '378162e9e44cefc4e61113ba927545040e6a6c6c', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '8fb93a086c4a42063f53ed533be2774de31db81e', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '304c80915c9a7a685bddcf2d5edf4f56119860e8', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '09d34f47a466e4277f1bb2215a3b087bc78e240d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '2a62193311791f84b6eca22a49cff8a0fc65d5a7', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '4c800376dec7ca035b2aaaaac00738851829108d', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'dcb473b7b6ce29983d89df6c288526071962ac01', 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-trigger/sd-date-picker-trigger.js

@@ -33,7 +33,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '57a23626b1a392be20dccead71b792590fab61b8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -41,7 +41,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: 'd4bb58eb97f9f2b98c27315547a85b019530ce5e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '25222882fa966eb5d6ead15e62b65af26586afbd', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: '76f41c99e1695eaa191cbc81ae057e65cb78e955', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '4e1a4b2b41737f05dc1a4e642d317f5fc93bf9b2', 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.js

@@ -93,9 +93,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '825c845ea1ada63a9f21cfc43aad04a598325c13', 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, size: this.size, 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: 'b9dd1a8df29f340ad67331dbebd3ec71b79d128a', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: '35d821e9a21a09e4b2dc0d47f9a95d895c4f9dc4', 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, size: this.size, 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: '21fe3c0ab5dff10265139111de741216fb06e4e4', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'b9bed57fa4a2b06b004ec5a1b723ed5af25fda19', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '776e0ce183edd9c7903ce1a75208addc47c20408', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'f86b502f6b17ee9ff262c1a64e1b0e24defc1660', value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: 'b9fd9b90afa512aefdd4b227c66d0b4660b69318', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'b6e439d2b507922cc2e345fe1fba856d77441cbc', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: 'ae09060fec5542b9e30d051133f4bca3c772f5d9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {

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

@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: 'f871d59077f63aa2f7d1bbe857a9ff095331c82d' }, h("div", { key: '47f4782b315450f07bccec8697d8e98a83e44faf', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'cf0eb07920b298f2fce001cc8246d51e1174c27d', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'e1d060092eb3b73c890bf0d62f6485ca2a09e187', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: 'b4082936889d6bed77917d9b06aafa3c80d413a7' }, h("div", { key: 'baf10fa376bf32982816258f950edf65d5622a99', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: 'bacc88f756b64f4382b1c8c648269bb2c233dc54', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'dcebf3cd120e2e606784c365c309d4c48296a5ae', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,4 @@
+import systemTokens from "../../tokens/generated/system.json";
+export const DIVIDER_COLORS = {
+    default: systemTokens.color.divider.default,
+};

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

@@ -0,0 +1,25 @@
+sd-divider {
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+:where(sd-divider:not([vertical])) {
+  display: block;
+  width: 100%;
+  height: 1px;
+}
+
+:where(sd-divider[vertical]) {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+}
+
+sd-divider hr {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  background-color: var(--sd-divider-color);
+}

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

@@ -0,0 +1,47 @@
+import { Host, h } from "@stencil/core";
+import { DIVIDER_COLORS } from "./sd-divider.config";
+export class SdDivider {
+    /** true면 수직 분할선, false면 수평 분할선 */
+    vertical = false;
+    render() {
+        const hostStyle = {
+            '--sd-divider-color': DIVIDER_COLORS.default,
+        };
+        return (h(Host, { key: '92e9f5ef8d6d382e1e2a62f3421feaf1bc27aab7', style: hostStyle }, h("hr", { key: '40827e6308a258e6de4a438c53d4de9465a6d0a1', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+    }
+    static get is() { return "sd-divider"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-divider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "true\uBA74 \uC218\uC9C1 \uBD84\uD560\uC120, false\uBA74 \uC218\uD3C9 \uBD84\uD560\uC120"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js

@@ -11,11 +11,11 @@ export const PRESET_HOVER_BACKGROUNDS = BUTTON_PRESET_HOVER_BACKGROUNDS;
 export const PRESET_CONTENT_COLORS = BUTTON_PRESET_CONTENT_COLORS;
 export const PRESET_BORDER_COLORS = BUTTON_PRESET_BORDER_COLORS;
 export const PRESET_DIVIDER_COLORS = {
-    primary: buttonTokens.button.brand.strong.dropdown.divider,
-    secondary: buttonTokens.button.brand.subtle.dropdown.divider,
+    primary: buttonTokens.button.dropdown.brand.strong.split,
+    secondary: buttonTokens.button.dropdown.brand.subtle.split,
     primary_outline: PRESET_BORDER_COLORS.primary_outline,
     neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
-    danger: buttonTokens.button.danger.strong.dropdown.divider,
+    danger: buttonTokens.button.dropdown.danger.strong.split,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
 const MENU_ITEM_COLOR = systemTokens.color.fg.secondary;

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

@@ -96,8 +96,35 @@ sd-dropdown-button {
   --sd-dropdown-button-current-content: var(--sd-dropdown-button-disabled-content);
   cursor: not-allowed;
 }
-.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider {
-  background: var(--sd-dropdown-button-disabled-border);
+
+.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger {
+  gap: var(--sd-dropdown-button-gap);
+  padding: 0 var(--sd-dropdown-button-padding-x);
+}
+.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-label {
+  padding: 0;
+}
+.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-icon {
+  min-width: 0;
+  padding: 0;
+}
+
+.sd-dropdown-button--split {
+  display: inline-flex;
+  align-items: stretch;
+}
+.sd-dropdown-button--split .sd-dropdown-button__trigger--label-part {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right-width: 0;
+}
+.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-divider);
+}
+.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part.sd-dropdown-button__trigger--disabled {
+  border-left-color: var(--sd-dropdown-button-disabled-border);
 }
 
 .sd-dropdown-button__trigger-label,
@@ -113,14 +140,6 @@ sd-dropdown-button {
   padding: 0 var(--sd-dropdown-button-padding-x);
 }
 
-.sd-dropdown-button__trigger-divider {
-  align-self: stretch;
-  width: 1px;
-  height: auto;
-  background: var(--sd-dropdown-button-divider);
-  opacity: 0.9;
-}
-
 .sd-dropdown-button__trigger-icon {
   flex: 0 0 auto;
   min-width: calc(var(--sd-dropdown-button-height) - 2px);