@sellmate/design-system 1.5.0 → 1.7.0

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: '3b3c22b1c5bf2d1bfa52c136113719e26b2e6767', style: hostStyle }, h("hr", { key: '4eca9f280e452330a2f57b03466e00f04688ad06', "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);

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

@@ -12,6 +12,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     label = '';
     items = [];
     disabled = false;
+    split = false;
     static CLOSE_ANIMATION_DURATION = 150;
     isOpen = false;
     isAnimatingOut = false;
@@ -20,6 +21,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     menuRef;
     closeAnimationTimer;
     click;
+    buttonClick;
     dropDownShow;
     handleOpenChange(isOpen) {
         this.onDropdownToggle(isOpen);
@@ -135,6 +137,14 @@ export class SdDropdownButton extends BaseDropdownEvent {
             this.isOpen = true;
         }
     };
+    handleButtonClick = (event) => {
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.buttonClick.emit();
+        this.closeDropdown();
+    };
     selectItem(item, event) {
         event?.stopPropagation();
         if (!item || item.disabled) {
@@ -143,7 +153,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
         this.click.emit(item.value);
         this.closeDropdown();
     }
-    getTriggerClasses(preset, size, disabled, isOpen) {
+    getTriggerClasses(preset, size, disabled, isOpen, part) {
         const classes = [
             'sd-dropdown-button__trigger',
             `sd-dropdown-button__trigger--${preset}`,
@@ -155,8 +165,24 @@ export class SdDropdownButton extends BaseDropdownEvent {
         if (isOpen) {
             classes.push('sd-dropdown-button__trigger--open');
         }
+        if (part !== undefined) {
+            classes.push(`sd-dropdown-button__trigger--${part}-part`);
+        }
         return classes.join(' ');
     }
+    getTriggerStyle(config, preset) {
+        return {
+            '--sd-dropdown-button-bg': config.color,
+            '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
+            '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
+            '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
+            '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
+            '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
+            '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
+            '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
+            '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
+        };
+    }
     getMenuItemClasses(isActive, isDisabled) {
         const classes = ['sd-dropdown-button__menu-item'];
         if (isActive) {
@@ -187,22 +213,20 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 } }, item.icon && (h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: sanitizeInlineHtml(item.label) })));
         })))));
     }
+    renderChevron(size) {
+        const iconName = this.split ? 'etc' : 'caretDown';
+        return (h("span", { class: {
+                'sd-dropdown-button__trigger-icon': true,
+                'sd-dropdown-button__trigger-icon--open': this.isOpen && !this.split,
+            }, "aria-hidden": "true" }, h("sd-icon", { name: iconName, size: DROPDOWN_CHEVRON_ICON_SIZE[size], color: "var(--sd-dropdown-button-current-content)" })));
+    }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: '69cc705c92386162bfe3eaaec92d60c5daedd673', class: "sd-dropdown-button" }, h("button", { key: 'c054cd7f979a5b5d7e6266fc098722b13f6419f6', 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-bg': config.color,
-                '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
-                '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
-                '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
-                '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
-                '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
-                '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
-                '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
-                '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: 'de889d149ece2a5856dc37940cc8f8cc612546d7', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '8ae62fe45e6f292f4269da090adda28c6fd47854', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'c2bc641416469fc2a375f07cb68f36e1c782ba48', class: {
-                'sd-dropdown-button__trigger-icon': true,
-                'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '46111923f6a95fdd789aa9493a6941218e1fe0f5', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+        const triggerStyle = this.getTriggerStyle(config, preset);
+        if (this.split) {
+            return (h("div", { class: "sd-dropdown-button sd-dropdown-button--split" }, h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, h("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
+        }
+        return (h("div", { class: "sd-dropdown-button" }, h("button", { 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: triggerStyle }, h("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {
@@ -308,6 +332,26 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "split": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "split",
+                "defaultValue": "false"
             }
         };
     }
@@ -341,6 +385,21 @@ export class SdDropdownButton extends BaseDropdownEvent {
                         }
                     }
                 }
+            }, {
+                "method": "buttonClick",
+                "name": "sdButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "dropDownShow",
                 "name": "sdDropDownShow",

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

@@ -185,7 +185,8 @@ export class SdField {
                 : {} }, h("div", { key: '1f3c5f2009a0d96b8a3544c58b96f7ecc4ddee6b', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && h("div", { key: '39a28adaa959b89d3724672910157662e50b35ed', class: "sd-field__addon" }, addon), h("slot", { key: '0c9360e8644df658c389554c13a04bc22985e84d' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (h("div", { key: 'e4f180f0183267ea99e2b8b65b6e4cd769a47946', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'c5503a823d8c5534abd27dc59bbd399702a07283', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '8b8bd230703e0b1e45eab3a5334dbdbb55fae8c9' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')

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

@@ -1,8 +1,22 @@
 sd-file-picker {
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.sd-file-picker__wrapper {
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
+.sd-file-picker__chip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
 .sd-file-picker__content {
   width: 100%;
   height: 100%;

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

@@ -65,11 +65,11 @@ export class SdFilePicker {
             return undefined;
         return typeof value === 'string' ? Number(value) : value;
     }
-    validateFiles(files) {
+    validateFiles(files, existingCount = 0) {
         const maxFileSize = this.toBytes(this.maxFileSize);
         const maxTotalSize = this.toBytes(this.maxTotalSize);
         const maxFiles = this.maxFiles != null ? Number(this.maxFiles) : undefined;
-        if (maxFiles != null && files.length > maxFiles) {
+        if (maxFiles != null && existingCount + files.length > maxFiles) {
             return { accepted: [], rejected: files, reason: 'max-files' };
         }
         if (maxFileSize != null) {
@@ -93,22 +93,34 @@ export class SdFilePicker {
             return;
         }
         const fileArray = Array.from(files);
-        const { accepted, rejected, reason } = this.validateFiles(fileArray);
-        if (reason != null) {
-            this.reject?.emit({ files: rejected, reason });
+        if (this.multiple) {
+            const existing = Array.isArray(this.internalValue) ? this.internalValue : [];
+            const { accepted, rejected, reason } = this.validateFiles(fileArray, existing.length);
             if (this.fileInputRef) {
                 this.fileInputRef.value = '';
             }
-            return;
-        }
-        if (this.multiple) {
-            this.internalValue = accepted;
+            if (reason != null) {
+                this.reject?.emit({ files: rejected, reason });
+                return;
+            }
+            const merged = [...existing, ...accepted];
+            this.internalValue = merged;
+            this.value = merged;
+            this.update?.emit(this.value);
         }
         else {
+            const { accepted, rejected, reason } = this.validateFiles(fileArray);
+            if (reason != null) {
+                this.reject?.emit({ files: rejected, reason });
+                if (this.fileInputRef) {
+                    this.fileInputRef.value = '';
+                }
+                return;
+            }
             this.internalValue = accepted[0];
+            this.value = this.internalValue;
+            this.update?.emit(this.value);
         }
-        this.value = this.internalValue;
-        this.update?.emit(this.value);
     };
     handleClear = (event) => {
         if (this.disabled)
@@ -128,6 +140,8 @@ export class SdFilePicker {
         this.fileInputRef?.click();
     };
     hasFiles() {
+        if (this.multiple)
+            return false;
         if (!this.internalValue)
             return false;
         if (Array.isArray(this.internalValue)) {
@@ -135,14 +149,28 @@ export class SdFilePicker {
         }
         return true;
     }
+    hasChips() {
+        return Array.isArray(this.internalValue) && this.internalValue.length > 0;
+    }
     getDisplayText() {
         if (!this.hasFiles())
             return this.placeholder ?? 'Click to upload';
-        if (Array.isArray(this.internalValue)) {
-            return this.internalValue.map(f => f.name).join(', ');
-        }
         return this.internalValue?.name || (this.placeholder ?? 'Click to upload');
     }
+    handleChipRemove = (index) => {
+        if (!Array.isArray(this.internalValue))
+            return;
+        const newFiles = [...this.internalValue];
+        newFiles.splice(index, 1);
+        this.internalValue = newFiles;
+        this.value = newFiles;
+        this.update?.emit(this.value);
+    };
+    renderChipList() {
+        if (!this.hasChips())
+            return null;
+        return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index) })))));
+    }
     checkOverflow() {
         if (!this.fileNamesRef)
             return;
@@ -182,9 +210,9 @@ export class SdFilePicker {
             return (h("div", { class: {
                     'sd-file-picker--inline': true,
                     'sd-file-picker--inline-disabled': this.disabled,
-                }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
+                }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content, this.renderChipList()));
         }
-        return (h("sd-field", { 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, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
+        return (h("div", { class: "sd-file-picker__wrapper", style: cssVars }, h("sd-field", { 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, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content), this.renderChipList()));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

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

@@ -153,7 +153,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '5b469964bfbbdf1d40c6d7c88a266d655fe3e029' });
+        return h("slot", { key: 'b1514fc54df3e304cfb53b824df96431fa815a6e' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -112,12 +112,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: 'e6e58ebc18e458f1d52a3f8afcd0892bfd8ffa45', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, 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("label", { key: '9bdcdf6e515a57e9cd72e263bcd8d2c59aac22c9', class: "sd-input__content" }, h("slot", { key: '0273119e456386ba23c361ef1e826b4d2d9bf1be', name: "prefix" }), h("input", { key: 'ad61c8ff1372f6163f2e742cf31884363e8fd31f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'e68578946f23fff0e4abc3f9919d12b3d624b5f8', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '3c64ce859d71dbd57800a4a34b6a09696f90ff60', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '44bf19bfbe047e00eb02530a4f9c9eac37d9f0fb', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, 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("label", { key: '2f610f980107fc552554b9415d878a7b8464e460', class: "sd-input__content" }, h("slot", { key: 'da4fa13a9f4c8e5cabb238743b74dbc216cf3d27', name: "prefix" }), h("input", { key: 'dd4fc95ef5136348e764552fb8847a7fedf6fd42', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'ab2403fafd7eecf37bc03b0147025b06154230a7', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '7b6ca184d3c08fc160556abf135939d1e8064b98', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'db4c66f0b3e91d780262ec7320fc15ffc32e622d', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '52b5a72f6140b441ea971330594749208e302597', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;

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

@@ -28,7 +28,7 @@ export class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: 'ae56f969b9d4cd6e6e4d697d919ad122e2e4dad7', style: hostStyle }, h("div", { key: '86af10d7d1e6e343700a1c161745599ec863b3d7', class: 'sd-linear-progress__track' }, h("div", { key: '46d5dfe06e82facc5dc83977584bc93970b7fd28', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'd1ae1220a482c50bc770a22ccbc45ccb66ebfc27', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '39bc3af718e0797c5e06cda62ee8a6047f303a34', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '944ca6d50f6588894e97265a8ef0484f3e676981', class: 'sd-linear-progress__label' }, this.label)));
+        return (h(Host, { key: '0ae06e8a25685038b5e0834eba2ea090f8334fed', style: hostStyle }, h("div", { key: 'bc4d4b10d0ec63dbeda35eff00de62ab7335ce81', class: 'sd-linear-progress__track' }, h("div", { key: '5c228c7dade94c9cf22edbf48ef7d2edbc81d7b9', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'e8abe8b206fc0b07fd348038ad81c3fdd8141797', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'b6f43931cbd98e799e3481c23d1ae98f1a65da34', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '616eba6d54d25cad5eceebc8de6f1122668307cf', class: 'sd-linear-progress__label' }, this.label)));
     }
     static get is() { return "sd-linear-progress"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-loading-container/sd-loading-container.js

@@ -10,10 +10,10 @@ export class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: '0b6c91593d615ac39f8a4fc30df8466969ae4d9b', class: {
+        return (h("div", { key: 'bae5e9473237c0389d6fb404294abe6897c9847c', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'de41bd4fe1c824c9517d000b91abb817ea58e90c', class: "sd-loading-container__backdrop" }), h("div", { key: '4de64a1540a0af9c955bbea5d4c83c129e6846ea', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ae2955bc1d40123f06e7c9e107afe4b46c3b0175', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '6c58c3fd4074edd48cdd0d21eef15c49c94626db', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'd78b4d84c7cd34739452b0ab84df640c94939b2b', class: "sd-loading-container__backdrop" }), h("div", { key: '890c86605412bf67ab878155fd299c2f0b84e375', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '0912c4b7c23700b6ccf8ffdc6b4ce0d67b568320', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '373d1765d0a7c24b54bb22e65a8a6a525771ed78', class: "sd-loading-container__message" }, this.message)))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

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

@@ -7,6 +7,7 @@ export class SdLoadingModal {
     buttonLabel = '';
     width;
     height;
+    progress;
     click;
     get resolvedState() {
         return this.state ?? 'loading';
@@ -45,7 +46,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: 'e4b95f8fcd666e0b616d193c40f7b57313527a78', style: hostStyle }, h("div", { key: '397f63795ab8523cb41a989c7fc0e2187ceb3d18', class: "sd-loading-modal" }, h("div", { key: '1c2f6f16dbc8fe3b76db29707602b3df6de1380e', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '439302e28cd4843f86f2060c66fe3e5c358ec379', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'a6facf71c52d242ff521adbf7f9161c51431cf9d', class: "sd-loading-modal__button" }, h("sd-button", { key: '26d66b9ccf569bbf7bd9d3819fb0380eced791a2', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: 'f14baf774d5d8547158a84bc3948035e69e022b5', style: hostStyle }, h("div", { key: 'f441c9718abd608c687e92884fbbefb6030610f4', class: "sd-loading-modal" }, h("div", { key: '9e7a73f9f35fc800326ffd809058ae23a5b60688', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '1d468a2ad713efa5162648868b6c137255834a39', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '75a88c01cd7df4953c766cb71a7cf89a150de65e', class: "sd-loading-modal__button" }, h("sd-button", { key: 'bdd17775f1b57e140cc09f7a79835ca10693ceff', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {
@@ -184,6 +185,25 @@ export class SdLoadingModal {
                 "setter": false,
                 "reflect": false,
                 "attribute": "height"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress"
             }
         };
     }

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

@@ -195,6 +195,9 @@ export class SdModalContainer {
         if (this.hasOwnProp(options, 'height')) {
             this.setAttr(el, 'height', options.height != null ? String(options.height) : undefined);
         }
+        if (this.hasOwnProp(options, 'progress')) {
+            el.progress = options.progress;
+        }
     }
     applyProps(el, options) {
         if (this.hasOwnProp(options, 'type'))