@sellmate/design-system 1.0.37 → 1.0.39

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

@@ -0,0 +1,385 @@
+import { h } from "@stencil/core";
+import { CONFIRM_MODAL_ICON_MAP, CONFIRM_MODAL_ICON_COLOR, CONFIRM_MODAL_DEFAULT_BUTTON, TITLE_ICON_SIZE, CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, SUB_BUTTON_PRESET, } from "./sd-confirm-modal.config";
+export class SdConfirmModal {
+    el;
+    hasSlottedContent = false;
+    customContentRef;
+    slotObserver;
+    type = 'positive';
+    modalTitle = '';
+    titleClass = '';
+    topMessage = [];
+    bottomMessage = [];
+    mainButtonName;
+    mainButtonLabel = '확인';
+    subButtonLabel = '';
+    tagPreset = 'square_sm_grey';
+    tagLabel = '';
+    slotLabel = '';
+    tagContents;
+    close;
+    confirm;
+    componentWillLoad() {
+        this.syncHasSlottedContent();
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.slotObserver = new MutationObserver(() => this.syncHasSlottedContent());
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
+            if (typeof this.customContentRef.replaceChildren === 'function') {
+                this.customContentRef.replaceChildren(this.tagContents);
+            }
+            else {
+                this.customContentRef.innerHTML = '';
+                this.customContentRef.appendChild(this.tagContents);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.slotObserver?.disconnect();
+    }
+    get resolvedMainButton() {
+        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
+    }
+    get hasTagContent() {
+        return !!(this.tagLabel || this.slotLabel);
+    }
+    get showContentBox() {
+        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+    }
+    syncHasSlottedContent() {
+        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
+            node.classList.contains('sd-confirm-modal')) &&
+            (node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        if (hasSlottedContent !== this.hasSlottedContent) {
+            this.hasSlottedContent = hasSlottedContent;
+        }
+    }
+    render() {
+        const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
+        const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
+        return (h("div", { key: '6fc7e6c41e74e44c1eb6228375a8230ffa46dab5', class: "sd-confirm-modal" }, h("sd-icon", { key: '79e901efb1b32fdd8d7be3bd8f33eb2d606cd25c', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("sd-icon", { key: '8d80711f1ddea567a388b0ad7c76608f0d794fde', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor }), h("h2", { key: '47dcfe8774e2d14d4edc8d1c23fff413146119e6', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'fb18833bd9f5cb858f2f5b05b7b45d5e0f3cdb72', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '9d158176578cb4374fe1ca37b62b4d61e81df6a1', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '4f781266ecdd43ac51195e1ee473d67d2bcff681', 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: '04baced447a0cf11406df52b734f73ea39ff00d2', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '7054a3388d93610b21152c4c3df34445b7b64cdd', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '25fdec9094700beaf4d6fa0dee15920d6c3c294a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: '7611e5b0a187b1588026308220b09e3239f59463', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+    }
+    static get is() { return "sd-confirm-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-confirm-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-confirm-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfirmModalType",
+                    "resolved": "\"negative\" | \"positive\"",
+                    "references": {
+                        "ConfirmModalType": {
+                            "location": "import",
+                            "path": "./sd-confirm-modal.config",
+                            "id": "src/components/sd-confirm-modal/sd-confirm-modal.config.ts::ConfirmModalType",
+                            "referenceLocation": "ConfirmModalType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'positive'"
+            },
+            "modalTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal-title",
+                "defaultValue": "''"
+            },
+            "titleClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-class",
+                "defaultValue": "''"
+            },
+            "topMessage": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "bottomMessage": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "mainButtonName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfirmModalMainButton",
+                    "resolved": "\"danger_md\" | \"danger_outline_md\" | \"primary_md\" | \"primary_outline_md\" | undefined",
+                    "references": {
+                        "ConfirmModalMainButton": {
+                            "location": "import",
+                            "path": "./sd-confirm-modal.config",
+                            "id": "src/components/sd-confirm-modal/sd-confirm-modal.config.ts::ConfirmModalMainButton",
+                            "referenceLocation": "ConfirmModalMainButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "main-button-name"
+            },
+            "mainButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "main-button-label",
+                "defaultValue": "'\uD655\uC778'"
+            },
+            "subButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sub-button-label",
+                "defaultValue": "''"
+            },
+            "tagPreset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagName",
+                    "resolved": "\"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_green\" | \"pill_md_grey\" | \"pill_md_indigo\" | \"pill_md_orange\" | \"pill_md_red\" | \"pill_md_yellow\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_green\" | \"pill_sm_grey\" | \"pill_sm_indigo\" | \"pill_sm_orange\" | \"pill_sm_red\" | \"pill_sm_yellow\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_green\" | \"pill_xs_grey\" | \"pill_xs_indigo\" | \"pill_xs_orange\" | \"pill_xs_red\" | \"pill_xs_yellow\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_green\" | \"square_md_grey\" | \"square_md_indigo\" | \"square_md_orange\" | \"square_md_red\" | \"square_md_yellow\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_green\" | \"square_sm_grey\" | \"square_sm_indigo\" | \"square_sm_orange\" | \"square_sm_red\" | \"square_sm_yellow\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_green\" | \"square_xs_grey\" | \"square_xs_indigo\" | \"square_xs_orange\" | \"square_xs_red\" | \"square_xs_yellow\"",
+                    "references": {
+                        "TagName": {
+                            "location": "import",
+                            "path": "./sd-confirm-modal.config",
+                            "id": "src/components/sd-confirm-modal/sd-confirm-modal.config.ts::TagName",
+                            "referenceLocation": "TagName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag-preset",
+                "defaultValue": "'square_sm_grey'"
+            },
+            "tagLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag-label",
+                "defaultValue": "''"
+            },
+            "slotLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slot-label",
+                "defaultValue": "''"
+            },
+            "tagContents": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlottedContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "sdClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "confirm",
+                "name": "sdConfirm",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -27,7 +27,7 @@ export class SdDatePicker {
         this.viewChange.emit(e.detail);
     };
     render() {
-        return (h("div", { key: '45d377178babbbf10004c3551de90abb1f8137cc', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '7850afd672ecbdcbee68002add8a7ee3b223fc20', 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: '5b37640ab87c5a963bf153943f42467e3fa5dbfc', 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: '3585b5cee494f3d0871d50f47351cf278b493c35', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '5ebb7dd31aac4a7e8402a4bc393ef6b2afaea0c2', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'e7150c47392fab2a79442e0ca86912e1bb534c9d', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
+        return (h("div", { key: '9f1e5b391dec4623e6f628449a459ab1a6f6ec7d', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '8473fc052a8e61b1b403328046b984b858a69ccd', ref: el => (this.inputEl = el), value: this.value, addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'ccc4ac16bcb3e340e574d1098d229d93bba32671', 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: '9b85074b30fc5d6e8204c1e815fe325871e8205a', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'fff4a6d1d2b1c0923b74abcf453a32829ee5865a', class: "sd-date-picker__menu" }, h("sd-calendar", { key: 'f157822fca3dffb9fbbaa05e9d9ba67ba6a440bb', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange }))))));
     }
     static get is() { return "sd-date-picker"; }
     static get encapsulation() { return "scoped"; }

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

@@ -158,16 +158,16 @@ export class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h("div", { key: 'f96121cbdd02bd5dfafb47cee2c15084f53d77d2', class: {
+        return (h("div", { key: 'd76c5830570b080fe07fc01e9a3ea8f09ec1bf40', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: 'bf18d51662c7bbe16e831175eb1b5df93f7ed78d', 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: '7fa976563de08e44b8c9572d9e9ec717285cabba', 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: '69abd97403ea83264b4408526d0423470421f877', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '50dfb1e8b63e12f7707c53fa73063b8a88563209', class: "sd-date-range-picker__menu" }, h("div", { key: '666f6d6b41853f47d26bccb598dec7bcf1af6a5a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'af226c05c51de90e073730d7b9557024d55ceed6', type: "button", name: "prev", title: "Previous", onClick: () => {
+            } }, h("sd-input", { key: '3ecf2ccaa66e472037607fca63f29317a59e2f5d', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '317167fa8f25a25e869757dfdc6df63671caea57', 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: 'f11baac3755a432b5c379a1b5a26590341136d68', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'c0cbd599dd4fac9970f3aa9bd84594fffb394533', class: "sd-date-range-picker__menu" }, h("div", { key: 'caaaa777a14f77d421b5d547ee45d71731390f74', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '6c5169b88ce2f6d132ae18f1944ab4dcae3ba304', type: "button", name: "prev", title: "Previous", onClick: () => {
                 this.setPrevYear(this.prevYear - 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: '68a42e30d39305ff9d876389df1e26083cf170f8', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'b489964425b45cd993e474fe1c1f0c8a8e1fc2a5', class: "header-label" }, this.prevYear), h("button", { key: '4e4008ed5eaffec84a4ad17df60ab1753465d146', type: "button", name: "next", title: "Next", onClick: () => {
+            } }, h("sd-icon", { key: '19a1d47598e047faa63ad230e5470421e71ecc66', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '8f6d4100f1de0b5c830cc2b7cf1479a7e87f77f5', class: "header-label" }, this.prevYear), h("button", { key: '56d402286b78e5be0c2d1cc3227afbc6e8b327c7', type: "button", name: "next", title: "Next", onClick: () => {
                 this.setPrevYear(this.prevYear + 1);
                 this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, h("sd-icon", { key: 'c6067f45fa602520dff886ea5c2c01c46c439f1d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '5cd806e75ade0161f3551bc99449b833bb2637be', 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-icon", { key: '6d6faeb9a890643e8b4b79a40d5c71a4a0e488f6', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: 'a959a9309a6a6fe17f3cf4b813c865d0b0470722', 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.js

@@ -186,7 +186,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: '69db2205a157752f264128ed38c541edf7ae155a', class: "sd-dropdown-button" }, h("button", { key: 'a765967799282988bd05f06750828024a94c11a4', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (h("div", { key: 'd2c725861a4667633a2726b47101d604436c5c16', class: "sd-dropdown-button" }, h("button", { key: '51a4a2f049f53d61f45632a89e179c95f9cf9755', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
@@ -197,10 +197,10 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: '9df1ce5517422a283015d3e06068ced63b7b7ffe', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'c3c577e7366c66fbc17457d26b0c07ac3e8d4553', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '6df1177a45e91f5588c5c0688662e04b681a1b5e', class: {
+            } }, h("span", { key: '595bf90d834102371492f478e23f7886ec7e5dcf', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '79a12ecba11d82944e2563d60dfb76c5a9bb9a39', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '7160b1e8f7e25d822c539a57ab19ee2572c7b146', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '702ed4e27a5de332396d23c35405b4e9217162a8', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: 'd041b1bfb0bb902f5b670fbf5524babfa0ee47ac', name: "arrowDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -33,7 +33,7 @@ sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control {
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label {
   display: flex;
   align-items: center;
-  margin-right: var(--sd-system-space-field-gap);
+  margin-right: var(--sd-system-space-field-sm-gap);
 }
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon {
   margin-right: 6px;
@@ -47,20 +47,21 @@ sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text {
 sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip {
   margin-left: 2px;
 }
-sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label {
-  margin-right: 0;
+sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 3px var(--sd-system-space-field-sm-padding-x);
-  border: 1px solid var(--sd-system-color-field-border-default);
-  border-right: none;
-  border-radius: var(--sd-system-radius-field-default) 0 0 var(--sd-system-radius-field-default);
-  background-color: #F6F6F6;
+  white-space: nowrap;
+  padding: 0 var(--sd-field-addon-padding-x);
+  font-size: var(--sd-field-addon-font-size);
+  line-height: var(--sd-field-addon-line-height);
+  font-weight: var(--sd-field-addon-font-weight);
+  background: var(--sd-field-addon-bg);
+  border-right: 1px solid var(--sd-field-addon-border-color);
+  border-radius: calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px);
 }
 sd-field .sd-field__wrapper {
   width: 100%;
-  height: var(--sd-system-size-field-height);
+  height: var(--sd-system-size-field-sm-height);
   display: flex;
   align-items: center;
   flex-flow: row nowrap;
@@ -77,13 +78,9 @@ sd-field .sd-field__wrapper .sd-field__control {
   display: flex;
   flex: 1;
   border: 1px solid var(--sd-system-color-field-border-default);
-  border-radius: var(--sd-system-radius-field-default);
+  border-radius: var(--sd-system-radius-field-sm);
   background: var(--sd-system-color-field-bg-default);
 }
-sd-field .sd-field__wrapper .sd-field__control--label-inside {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
 sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control {
   border: 1px solid var(--sd-system-color-field-border-danger) !important;
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import fieldTokens from "../../tokens/generated/component.field.json";
 const FORM_PARENT_TAGS = [
     'sd-select',
     'sd-select-multiple',
@@ -19,7 +20,7 @@ export class SdField {
     status;
     // props - label
     label = '';
-    insideLabel = false;
+    addonLabel = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -115,20 +116,32 @@ export class SdField {
         }
     }
     render() {
-        return (h("div", { key: '2fbaf36430425bac24666667a781dbf17c51da26', class: {
+        const addon = this.addonLabel;
+        const addonTokens = fieldTokens.field.addonLabel;
+        const addonCssVars = addon ? {
+            '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
+            '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
+            '--sd-field-addon-line-height': `${addonTokens.typography.lineHeight}px`,
+            '--sd-field-addon-font-weight': addonTokens.typography.fontWeight,
+            '--sd-field-addon-bg': addonTokens.bg,
+            '--sd-field-addon-border-color': this.disabled
+                ? addonTokens.border.disabled
+                : addonTokens.border.default,
+        } : {};
+        return (h("div", { key: '54d2c495dbfb3a4e749b49fe770c3ed4b5f9f5ad', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
-                'sd-field--has-label-inside': !!this.label && this.insideLabel,
+                'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: 'c6559295b6bd18dbdc44b180dd401236e3dc1470', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '9ed48bc10ffb0a9bacc66f39ed22b2acf3fe4686', class: {
+            }, style: addonCssVars }, h("div", { key: '7399b420af3adf54f3a1c7c3257e85453e17a9a1', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'db4915376244d14cfd63fcd07258de2c7d0e4c81', class: {
                 'sd-field__control': true,
-                'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: '4e94489e186763f5cc16af7d38108f7d36ae3f90' }))), this.errorMsg && h("div", { key: '48f9d3e519615ed357f397041053345af23b5eff', class: "sd-field__error-message" }, this.errorMsg)));
+                'sd-field__control--has-addon': !!addon,
+            } }, addon && (h("div", { key: 'f1dde4b40f69fd14a625ff93146b0837d02b2a78', class: "sd-field__addon" }, addon)), h("slot", { key: '44d3d67efa90d71eb9868de9a8a7fcdd373dfff8' }))), this.errorMsg && h("div", { key: '2923e6fd9be55fe20489e7b1b164afa719d86dfa', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
             return null;
-        return (h("label", { class: { 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel } }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? 10, color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, h("div", { slot: "content" }, this.labelTooltip)))));
+        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? 10, color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, h("div", { slot: "content" }, this.labelTooltip)))));
     }
     static get is() { return "sd-field"; }
     static get originalStyleUrls() {
@@ -307,12 +320,12 @@ export class SdField {
                 "attribute": "label",
                 "defaultValue": "''"
             },
-            "insideLabel": {
-                "type": "boolean",
+            "addonLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -324,8 +337,8 @@ export class SdField {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "inside-label",
-                "defaultValue": "false"
+                "attribute": "addon-label",
+                "defaultValue": "''"
             },
             "icon": {
                 "type": "unknown",

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

@@ -91,15 +91,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: 'cb3a96b8911cb422bb30623d86b94b5c536f8f44', class: {
+        return (h("div", { key: 'f1a0f3eaf06618eb5e4c08f465425eeb969fffaa', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: 'f507cd78ac9a05eea64b209f11ed9ab048a925ca', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '33f42ba84419b72a941b5e3162531fa795744525', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '6e4252b659bc19d8f8841ff874a7bf50c86cee48', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '759217d5121c7b97dab6c70516efbf79b836884e', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '95f94370b7b64e16220b7e4a63d4613790bb6e28', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '1bae1466b85d68719bd558a67c64e86c6070b9d0', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '5879b1d0783ad1fbdbe44621efc42c86ea13a9af', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '59718655bc66a60ee7d1ca53e78a1deea592406d', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: 'd45e9a39d8c2661f8e92bd7760c36b170c1a76c0', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '8bcd7f87363167c482f3b99d931443491eaa7bbe', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -144,7 +144,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'ff0dbd7795ab2ee4f8ee89174b2b74fc2861f88e' });
+        return h("slot", { key: 'a49df03bd324a4d37ac077881c0df71603cd3c8f' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {