@sellmate/design-system 1.0.21 → 1.0.23

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

@@ -0,0 +1,249 @@
+import { h } from "@stencil/core";
+import { BUTTON_CONFIG, BUTTON_FOCUS_RING_COLOR, BUTTON_ICON_SIZES, DISABLED_CONTENT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS, getPresetName, isButtonV2Name, } from "./sd-button-v2.config";
+export class SdButtonV2 {
+    name = 'primary_sm';
+    label = '';
+    icon;
+    ariaLabel = '';
+    disabled = false;
+    type = 'button';
+    click;
+    hasWarnedMissingAriaLabel = false;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.click.emit(event);
+    };
+    get resolvedConfig() {
+        if (!isButtonV2Name(this.name)) {
+            throw new Error(`Invalid sd-button-v2 name: ${this.name}`);
+        }
+        const config = BUTTON_CONFIG[this.name];
+        const preset = getPresetName(this.name);
+        return {
+            config,
+            preset,
+        };
+    }
+    getButtonClasses(preset, size, hasLabel, iconOnly) {
+        const classes = ['sd-button-v2', `sd-button-v2--${preset}`, `sd-button-v2--${size}`];
+        if (this.disabled) {
+            classes.push('sd-button-v2--disabled');
+        }
+        if (iconOnly) {
+            classes.push('sd-button-v2--icon-only');
+        }
+        if (hasLabel) {
+            classes.push('sd-button-v2--has-label');
+        }
+        return classes.join(' ');
+    }
+    componentWillRender() {
+        this.warnIfMissingAriaLabel();
+    }
+    warnIfMissingAriaLabel() {
+        const iconOnly = !this.label && Boolean(this.icon);
+        const missingAriaLabel = iconOnly && !this.ariaLabel.trim();
+        if (!missingAriaLabel) {
+            this.hasWarnedMissingAriaLabel = false;
+            return;
+        }
+        if (this.hasWarnedMissingAriaLabel) {
+            return;
+        }
+        console.warn(`[sd-button-v2] icon-only buttons require \`ariaLabel\`. Received name="${this.name}" icon="${this.icon}".`);
+        this.hasWarnedMissingAriaLabel = true;
+    }
+    render() {
+        const { config, preset } = this.resolvedConfig;
+        const hasLabel = Boolean(this.label);
+        const iconOnly = !this.label && Boolean(this.icon);
+        const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
+        const iconColor = this.disabled ? DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
+        return (h("button", { key: '9adec3868e5337822463a5a37a741ef146a081be', 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',
+                '--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: '849c90886e77e792e4e34ef064352361a29664f0', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '5c5bc61ab43aa17124337a7107a3e6ab82f566ae', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: iconColor })), this.label && h("span", { key: 'e2d1a5ce465f07310a4d03966609baaf7e968b0e', class: "sd-button-v2__label" }, this.label))));
+    }
+    static get is() { return "sd-button-v2"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-button-v2.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-button-v2.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonV2Name",
+                    "resolved": "\"danger_lg\" | \"danger_md\" | \"danger_outline_lg\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_lg\" | \"neutral_md\" | \"neutral_outline_lg\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"neutral_sm\" | \"neutral_xs\" | \"primary_lg\" | \"primary_md\" | \"primary_outline_lg\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_lg\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
+                    "references": {
+                        "ButtonV2Name": {
+                            "location": "import",
+                            "path": "./sd-button-v2.config",
+                            "id": "src/components/sd-button-v2/sd-button-v2.config.ts::ButtonV2Name",
+                            "referenceLocation": "ButtonV2Name"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'primary_sm'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFilled\" | \"checkOutline\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "references": {
+                        "IconName": {
+                            "location": "global",
+                            "id": "global::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonV2Type",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonV2Type": {
+                            "location": "import",
+                            "path": "./sd-button-v2.config",
+                            "id": "src/components/sd-button-v2/sd-button-v2.config.ts::ButtonV2Type",
+                            "referenceLocation": "ButtonV2Type"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "sdClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '155504b50cb1c21fc1f847af8a9e8b685f7881ef' }, h("div", { key: 'c461e3e40da44586da5e02ad508bf59942a9e82a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '0c0ee023155c08c565c3496c44699a900666b084' }))));
+        return (h(Fragment, { key: '3999f64f54054b3a1662fac4aacf9f6898acb957' }, h("div", { key: '666b8e849b92a5e75d259ff079237911fd591cdd', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'dc8f4ae80e9aca7a0aecaed81f45d40e7df2c067' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -76,7 +76,7 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h("div", { key: 'bb17d32f08d998e599c90cf1a7a35b17e19d3dc4', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: 'ae028d5999a8df40a83b0d77d2dd5c2e0d0d8eb0', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'fbb954703d19161ab4507696a21278d5b4962b25', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'a335d5d317718e30be14fdb4aa1a63cb1347b929', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '38deef7127db10c91a51b8d6cb017d85fce25888', class: "sd-date-picker__menu" }, h("div", { key: 'f2ef8eb33086103df65b434360ecc1aac2949bf9', class: "sd-date-picker__header" }, h("div", { key: '8b949551a157de1e2ded7f1de621ccacd136126e', class: "year-nav" }, h("button", { key: 'b1bbd712094885223c21f030c32914d14f3904c2', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '7bb6f5f216d02cde59eff87fcaebc32eccbaac25', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '645c12556fe1b9f1d1c8f7c4cfe73c3b65ad7431', class: "year-nav__current" }, this.currentYear), h("button", { key: 'f6cb58c23effd1aa0566aaacf41170482f03df51', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'e92ef17b8d50e5115a159d2dd984e738a920f065', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '73018a9ca04929f4be017631e8e49a73cef71855', class: "month-nav" }, h("button", { key: '0983ca35486b8ad29c09740848b4288b602d0cd9', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '2c9257564786287f825c83391f3e05745c23cf9a', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '0b9e048eeea62c452671b74db468aa5587e8ddbf', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '3ead15a341d5e361e7fb9b1cb2842e5a38b0e03c', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'a3dbd8606dd51f72f1c315f2eea7ff089a95e6fa', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '6bbadc79157ae64bf492a965b78d014dcd968ea6', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '972c00769b40eff8015b68e0a9479a6c7c6009db', class: "sd-date-picker__body" }, [
+        return (h("div", { key: 'cd2f9c240e1e67806d1d9334937a905330d29a1f', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '1d77404494bd1fadf15d82dfabecbf61b73e5da8', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '627b76b7d276cff34224a130bb2596ca6f2ff49e', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '9dd006a9051c22dd8084ae9cb72e82c9c0b9be2b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '5090eb945c7241f3224b3d2c7a5a96221cc46c04', class: "sd-date-picker__menu" }, h("div", { key: 'fa127745062937dfe4f04773b7d6afa74d13bd7a', class: "sd-date-picker__header" }, h("div", { key: '7c59917872614d1351a3dfe3783017bd6bc6b75c', class: "year-nav" }, h("button", { key: '9e27d2d76ca72820d57c2d9ebc40fa842129da22', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '17c8f872b7cfb2825d4c9528b5838487b97529f0', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '41999c78367c90bc4d1d9bfdeb6e3d29d44df2c2', class: "year-nav__current" }, this.currentYear), h("button", { key: '52953ec66118afd480e7ce6207a551f18b61ac6d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'e740bcc2a23f4df850b4e2579ce0cae14419313c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '7fac86c6405a3936a1f0bdb51e5ca61463ef463a', class: "month-nav" }, h("button", { key: '62e22a2063c7ea972bf74ea08af0d519a5250b3f', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'fa53cbb5f2e61a3b1f0807639ce2c81516a1ca57', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '57eb7eaf1e3a11ba69cf4ef4af9852541abd7902', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '08a783b73efd7a5df2638df7c8bcac5411b2e642', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '4a5bb4f4e6f3105fc9fda008eb51a47efe606b81', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '8dd540a7188716446b2e9bcda707d7458a2ea817', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'f2da8d2325cb2fb9cb89d9c93d850cefc62235bf', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

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

@@ -155,10 +155,10 @@ export class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
+        return (h("div", { key: '1862958ea2e972700ea83ed61f0285f09cf52c02', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: 'a84838a1a84d990b289f0b753ccf3e2f45da4770', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd926c672dcf457a68ebe644b32c90a03ba29b175', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0af519c7ac2ade00972e23b9ecb0344989d87f51', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'd9109e573215092c6b386ae27ac7377c4347df4c', class: "sd-date-range-picker__menu" }, h("div", { key: 'ca4743a26ed0571bc3b63218a32a113e50dbd81a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '6f0fe1ede6d171e749a241fbeec32056250709b9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '821526a069a845f271b0e5db607f747efe4e610c', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'e9402009c8b034953d7ff4be5a4eea64d7fed21d', class: "header-label" }, this.prevYear), h("button", { key: 'b752631ab64e32a4a39c13898cc3db5e25897c4b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '62c6e0004ff1a0d8f260e11b9d17ea7ccca942ee', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3a05a7e02664be8d9dfb85d0bada03a2d352af12', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, h("sd-input", { key: '808670f22b59401c0125dd1191a6180cc6f72799', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '123e8beb77c3fceaaa3a8d994f8a8539fe35d317', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '448c174030598565f910df316002d78bdfec3f89', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'b5cf493587c7831e59a6156df87cb56be6bd585b', class: "sd-date-range-picker__menu" }, h("div", { key: 'c044d5377d0d88affecaa61eec2a2239b87158d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'c497891fe1d06b8f6c1a79000edc0e4f4fd79735', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'ad899e9daec0752b744bc73e9cbd99c6a731b7db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '595ac699adc90e8b15775ce47a2cda8bbc2f5c25', class: "header-label" }, this.prevYear), h("button", { key: '684ce75f14b08cd57ce6f019a1dfb3ab384b0c11', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '31dde7526d0ee3e7abf965eea6f825d557e7c745', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3e70334c95d29f302f2dc6d1cb7fbb3603c74a48', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }

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

@@ -0,0 +1,62 @@
+import buttonTokens from "../../tokens/generated/component.button.json";
+import systemTokens from "../../tokens/generated/system.json";
+import { BUTTON_CONFIG, PRESET_BORDER_COLORS as BUTTON_PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS as BUTTON_PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS as BUTTON_PRESET_HOVER_BACKGROUNDS, getPresetName, } from "../sd-button-v2/sd-button-v2.config";
+const UNSUPPORTED_DROPDOWN_BUTTON_NAMES = new Set([
+    'neutral_xs',
+    'neutral_sm',
+    'neutral_md',
+]);
+const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg') && !UNSUPPORTED_DROPDOWN_BUTTON_NAMES.has(name));
+export const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
+export const DROPDOWN_BUTTON_MIN_WIDTHS = {
+    xs: buttonTokens.dropdown.xs.minWidth,
+    sm: buttonTokens.dropdown.sm.minWidth,
+    md: buttonTokens.dropdown.md.minWidth,
+};
+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.brand.strong.dropdown.divider,
+    secondary: buttonTokens.brand.subtle.dropdown.divider,
+    primary_outline: PRESET_BORDER_COLORS.primary_outline,
+    neutral: buttonTokens.neutral.outline.border,
+    neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
+    danger: buttonTokens.danger.strong.dropdown.divider,
+    danger_outline: PRESET_BORDER_COLORS.danger_outline,
+};
+const MENU_ITEM_COLOR = systemTokens.color.text.secondary;
+const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
+const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.text.inverse;
+export const PRESET_MENU_ITEM_COLORS = {
+    primary: MENU_ITEM_COLOR,
+    secondary: MENU_ITEM_COLOR,
+    primary_outline: MENU_ITEM_COLOR,
+    neutral: MENU_ITEM_COLOR,
+    neutral_outline: MENU_ITEM_COLOR,
+    danger: MENU_ITEM_COLOR,
+    danger_outline: MENU_ITEM_COLOR,
+};
+export const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS = {
+    primary: MENU_ITEM_ACTIVE_BACKGROUND,
+    secondary: MENU_ITEM_ACTIVE_BACKGROUND,
+    primary_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+    neutral: MENU_ITEM_ACTIVE_BACKGROUND,
+    neutral_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+    danger: MENU_ITEM_ACTIVE_BACKGROUND,
+    danger_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+};
+export const PRESET_MENU_ITEM_ACTIVE_COLORS = {
+    primary: MENU_ITEM_ACTIVE_COLOR,
+    secondary: MENU_ITEM_ACTIVE_COLOR,
+    primary_outline: MENU_ITEM_ACTIVE_COLOR,
+    neutral: MENU_ITEM_ACTIVE_COLOR,
+    neutral_outline: MENU_ITEM_ACTIVE_COLOR,
+    danger: MENU_ITEM_ACTIVE_COLOR,
+    danger_outline: MENU_ITEM_ACTIVE_COLOR,
+};
+export const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.bg.disabled;
+export const DROPDOWN_DISABLED_CONTENT = buttonTokens.content.disabled;
+export const DROPDOWN_DISABLED_BORDER = buttonTokens.border.disabled;
+export const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
+export const getDropdownButtonPreset = (value) => getPresetName(value);

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

@@ -0,0 +1,171 @@
+sd-dropdown-button {
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+}
+
+.sd-dropdown-button {
+  display: inline-flex;
+  position: relative;
+}
+
+.sd-dropdown-button__trigger {
+  --sd-dropdown-button-height: var(--sd-button-md-height, 34px);
+  --sd-dropdown-button-padding-x: var(--sd-button-md-padding-x, 20px);
+  --sd-dropdown-button-gap: var(--sd-button-md-gap, 8px);
+  --sd-dropdown-button-font-family: var(--sd-button-md-typography-font-family, inherit);
+  --sd-dropdown-button-font-size: var(--sd-button-md-typography-font-size, 12px);
+  --sd-dropdown-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
+  --sd-dropdown-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-dropdown-button-bg: #025497;
+  --sd-dropdown-button-bg-hover: #004177;
+  --sd-dropdown-button-border: transparent;
+  --sd-dropdown-button-content: #ffffff;
+  --sd-dropdown-button-divider: #006ac1;
+  --sd-dropdown-button-accent: #006ac1;
+  --sd-dropdown-button-min-width: 106px;
+  --sd-dropdown-button-disabled-bg: var(--sd-button-bg-disabled, $grey_30);
+  --sd-dropdown-button-disabled-content: var(--sd-button-content-disabled, $grey_65);
+  --sd-dropdown-button-disabled-border: var(--sd-button-border-disabled, $grey_45);
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: space-between;
+  min-width: var(--sd-dropdown-button-min-width);
+  min-height: var(--sd-dropdown-button-height);
+  padding: 0;
+  border: var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);
+  border-radius: var(--sd-button-radius-default, 4px);
+  background: var(--sd-dropdown-button-bg);
+  color: var(--sd-dropdown-button-content);
+  cursor: pointer;
+  box-sizing: border-box;
+  font-family: var(--sd-dropdown-button-font-family);
+  font-size: var(--sd-dropdown-button-font-size);
+  font-weight: var(--sd-dropdown-button-font-weight);
+  line-height: 1;
+  text-decoration: var(--sd-dropdown-button-text-decoration);
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+  white-space: nowrap;
+}
+.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled) {
+  background: var(--sd-dropdown-button-bg-hover);
+}
+.sd-dropdown-button__trigger:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 2px var(--sd-dropdown-button-accent);
+}
+.sd-dropdown-button__trigger--xs {
+  --sd-dropdown-button-height: var(--sd-button-xs-height, 24px);
+  --sd-dropdown-button-padding-x: var(--sd-button-xs-padding-x, 8px);
+  --sd-dropdown-button-gap: var(--sd-button-xs-gap, 4px);
+  --sd-dropdown-button-font-family: var(--sd-button-xs-typography-font-family, inherit);
+  --sd-dropdown-button-font-size: var(--sd-button-xs-typography-font-size, 12px);
+  --sd-dropdown-button-font-weight: var(--sd-button-xs-typography-font-weight, 500);
+  --sd-dropdown-button-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+}
+.sd-dropdown-button__trigger--sm {
+  --sd-dropdown-button-height: var(--sd-button-sm-height, 28px);
+  --sd-dropdown-button-padding-x: var(--sd-button-sm-padding-x, 12px);
+  --sd-dropdown-button-gap: var(--sd-button-sm-gap, 6px);
+  --sd-dropdown-button-font-family: var(--sd-button-sm-typography-font-family, inherit);
+  --sd-dropdown-button-font-size: var(--sd-button-sm-typography-font-size, 12px);
+  --sd-dropdown-button-font-weight: var(--sd-button-sm-typography-font-weight, 500);
+  --sd-dropdown-button-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+}
+.sd-dropdown-button__trigger--md {
+  --sd-dropdown-button-height: var(--sd-button-md-height, 34px);
+  --sd-dropdown-button-padding-x: var(--sd-button-md-padding-x, 20px);
+  --sd-dropdown-button-gap: var(--sd-button-md-gap, 8px);
+  --sd-dropdown-button-font-family: var(--sd-button-md-typography-font-family, inherit);
+  --sd-dropdown-button-font-size: var(--sd-button-md-typography-font-size, 16px);
+  --sd-dropdown-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
+  --sd-dropdown-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+}
+.sd-dropdown-button__trigger--disabled {
+  border-color: var(--sd-dropdown-button-disabled-border);
+  background: var(--sd-dropdown-button-disabled-bg);
+  color: 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__trigger-label,
+.sd-dropdown-button__trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sd-dropdown-button__trigger-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  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);
+  padding: 0 calc(var(--sd-dropdown-button-gap) + 2px);
+}
+
+.sd-dropdown-button__menu {
+  display: grid;
+  width: max-content;
+  min-width: max-content;
+  max-width: calc(100vw - 24px);
+  padding: 4px 0;
+  border: 0;
+  border-radius: 4px;
+  background: #FFFFFF;
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.sd-dropdown-button__menu-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  width: 100%;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sd-dropdown-button-menu-item-color);
+  cursor: pointer;
+  box-sizing: border-box;
+  font: inherit;
+  text-align: left;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.sd-dropdown-button__menu-item--active {
+  background: var(--sd-dropdown-button-menu-item-active-bg);
+  color: var(--sd-dropdown-button-menu-item-active-color);
+}
+.sd-dropdown-button__menu-item--disabled {
+  color: var(--sd-dropdown-button-disabled-content);
+  cursor: not-allowed;
+}
+
+.sd-dropdown-button__menu-item-icon {
+  flex: 0 0 auto;
+}
+
+.sd-dropdown-button__menu-item-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  white-space: nowrap;
+  font-size: 12px;
+}