@sellmate/design-system 1.29.0 → 1.32.0

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

@@ -8,3 +8,30 @@ export const RANGE_LAYOUT = {
     panelGap: datepickerTokens.datepicker.calendar.range.panelGap,
     divider: datepickerTokens.datepicker.calendar.range.divider,
 };
+const timeTokens = datepickerTokens.datepicker.calendar.time;
+/** 시간(시:분) 선택 푸터 레이아웃 토큰 */
+export const TIME_LAYOUT = {
+    bgDefault: timeTokens.bg.default,
+    bgSelected: timeTokens.bg.selected,
+    dateLabel: timeTokens.date.label,
+    dateUnit: timeTokens.date.unit,
+    dateGap: timeTokens.date.gap,
+    radius: timeTokens.radius,
+    paddingX: timeTokens.paddingX,
+    paddingY: timeTokens.paddingY,
+    gap: timeTokens.gap,
+    sectionGap: timeTokens.section.gap,
+    unitGap: timeTokens.unit.gap,
+    fontSize: timeTokens.typography.fontSize,
+    lineHeight: timeTokens.typography.lineHeight,
+    fontWeight: timeTokens.typography.fontWeight,
+    // 시:분 입력 박스는 datepicker 필드(sm) 토큰을 재사용한다
+    input: {
+        height: DATEPICKER_SIZE_MAP.sm.height,
+        radius: DATEPICKER_SIZE_MAP.sm.radius,
+        border: DATEPICKER_COLORS.border.default,
+        borderFocus: DATEPICKER_COLORS.border.focus,
+        text: DATEPICKER_COLORS.text.default,
+        placeholder: DATEPICKER_COLORS.text.disabled,
+    },
+};

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

@@ -14,6 +14,11 @@ export class SdDateRangePicker {
     selectable;
     /** 최대 선택 가능한 날짜 범위 (일 단위) */
     maxRange;
+    /**
+     * 시간(시:분) 선택 푸터 사용 여부.
+     * true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시됩니다.
+     */
+    useTimePicker = false;
     /** 비활성 상태 여부 */
     disabled = false;
     /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
@@ -35,6 +40,8 @@ export class SdDateRangePicker {
     rules = [];
     /** 에러 상태 여부 */
     error = false;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status;
     /** 레이블 영역 아이콘 */
     icon = undefined;
     /** 레이블 툴팁 텍스트 */
@@ -94,7 +101,9 @@ export class SdDateRangePicker {
         }
     };
     handleSelect = (e) => {
-        this.closeDropdown();
+        // 시간 선택 모드에서는 사용자가 시:분을 조정할 수 있도록 드롭다운을 닫지 않고 실시간 반영만 한다
+        if (!this.useTimePicker)
+            this.closeDropdown();
         this.value = e.detail;
         const nextValue = this.value;
         requestAnimationFrame(() => {
@@ -109,6 +118,14 @@ export class SdDateRangePicker {
             return '';
         return `${this.value[0]} ~ ${this.value[1]}`;
     }
+    static DEFAULT_PLACEHOLDER = 'YYYY-MM-DD ~ YYYY-MM-DD';
+    get resolvedPlaceholder() {
+        // placeholder를 따로 지정하지 않았고 시간 선택 모드이면 시:분을 포함한 기본 placeholder를 쓴다
+        if (this.useTimePicker && this.placeholder === SdDateRangePicker.DEFAULT_PLACEHOLDER) {
+            return 'YYYY-MM-DD HH:mm ~ YYYY-MM-DD HH:mm';
+        }
+        return this.placeholder;
+    }
     disconnectedCallback() {
         if (this.closeAnimationTimer)
             clearTimeout(this.closeAnimationTimer);
@@ -122,9 +139,9 @@ export class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '00e25ab4608b5340b8be9e1dd19050968e34b758', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '98179e2ec90e55f83e5deff6e36fc821fc103456', class: "sd-date-range-picker", ref: el => {
+        return (h("sd-field", { key: '01098a74a5066d2328409dcdf21bb38691adf455', 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, status: this.status, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'dab4a666f5c144bbcbf3848528ce246c752ab906', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'fe123228a851da602f0a5a8929fc20782742a24b', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'ee7eb14cc09fd067a8eeb9f19bd93178378d81b2', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '8dc57a29f1ecd6811fb4538a96eea823dfebe080', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '5aa378df1b53a2b8cc29e159e7bda0544210a81e', displayText: this.displayText, placeholder: this.resolvedPlaceholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '8d18658004dc009d869804bdabd31155117edde3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: '0bf96efeed4c567052e690a83a70f27df85ccc64', value: this.value, selectable: this.selectable, maxRange: this.maxRange, useTimePicker: this.useTimePicker, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-range-picker"; }
     static get originalStyleUrls() {
@@ -246,6 +263,26 @@ export class SdDateRangePicker {
                 "reflect": false,
                 "attribute": "max-range"
             },
+            "useTimePicker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2DC\uAC04(\uC2DC:\uBD84) \uC120\uD0DD \uD478\uD130 \uC0AC\uC6A9 \uC5EC\uBD80.\ntrue\uC774\uBA74 value\uB294 \"YYYY-MM-DD HH:mm\" \uD615\uC2DD\uC774 \uB418\uACE0, \uCE98\uB9B0\uB354 \uD558\uB2E8\uC5D0 \uC2DC\uC791\u00B7\uC885\uB8CC \uC2DC\uAC04 \uC785\uB825\uC774 \uD45C\uC2DC\uB429\uB2C8\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-time-picker",
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -458,6 +495,25 @@ export class SdDateRangePicker {
                 "attribute": "error",
                 "defaultValue": "false"
             },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pass' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"pass\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uC0C1\uD0DC (\uC5C6\uC73C\uBA74 error/rules \uACB0\uACFC\uB85C \uC790\uB3D9 \uACB0\uC815)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
             "icon": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -7,7 +7,7 @@ export class SdDivider {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: 'b19941ad314f31fccf77ea0dd3373f9e3362ecd2', style: hostStyle }, h("hr", { key: 'bbc765fc901298fbacb8323fecd8fd1ca4683d19', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: '5e25f94dbe34f19280f6952e0a1bfbf4e4816264', style: hostStyle }, h("hr", { key: 'a47f51ba0dfc15819cd5cda169554433b978eb15', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
     static get is() { return "sd-divider"; }
     static get originalStyleUrls() {

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

@@ -73,6 +73,10 @@ sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   border-right: var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);
   border-radius: calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px);
 }
+sd-field .sd-field--multiline .sd-field__wrapper .sd-field__control {
+  height: auto;
+  min-height: var(--sd-field-wrapper-height);
+}
 sd-field .sd-field__wrapper {
   width: 100%;
   display: flex;

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

@@ -10,6 +10,8 @@ const FORM_PARENT_TAGS = [
     'sd-file-picker',
     'sd-date-picker',
     'sd-date-range-picker',
+    'sd-time-picker',
+    'sd-time-range-picker',
     'sd-chip-input',
 ];
 export class SdField {
@@ -48,6 +50,13 @@ export class SdField {
     label = '';
     /** 레이블 너비 */
     labelWidth = '';
+    /**
+     * 레이블 박스 높이 (숫자면 px). 미지정 시 size별 기본값 사용.
+     * multiline 등 컨트롤 박스가 커질 때 레이블을 첫 행에 맞추기 위해 사용한다.
+     */
+    labelHeight;
+    /** 멀티라인 컨트롤 — 컨트롤 높이를 고정하지 않고 min-height만 적용한다. */
+    multiline = false;
     /** 필드 우측 어드온 레이블 */
     addonLabel = '';
     /** 어드온 정렬 방향 */
@@ -178,7 +187,11 @@ export class SdField {
         };
         const labelCssVars = this.label !== ''
             ? {
-                '--sd-field-label-height': `${labelTokens.height}px`,
+                '--sd-field-label-height': this.labelHeight !== undefined && this.labelHeight !== '' && this.labelHeight !== 0
+                    ? typeof this.labelHeight === 'number'
+                        ? `${this.labelHeight}px`
+                        : this.labelHeight
+                    : `${labelTokens.height}px`,
                 '--sd-field-label-gap': `${labelTokens.gap}px`,
                 '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
                 '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
@@ -210,19 +223,20 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', class: {
+        return (h("div", { key: 'd29e49fe9ecf467f0c1ed443524fac2648dc9da4', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
+                'sd-field--multiline': this.multiline,
                 'sd-field--borderless': this.borderless,
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, h("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '396173067f4a8ce38ea8ea9f5a6b9d76303b16fa', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '3e4aab5e10cf52f116aabfe1a8d36a806eb03af4', class: "sd-field__main" }, h("div", { key: 'edbe4443387935e2b51469339284024429f1f0d3', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
             }, style: this.width !== '' && this.width !== 0
                 ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
-                : {} }, addon && (h("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', 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: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), 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: '7ac28abf5f37b7ada42b16f81227afb5c7f8d656', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'd995424c6f620b090006cdbcf8645d2ff822e802', 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: 'd105a65b5c926b5db9dd1d68239c0a2015739aba' })), 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 === '')
@@ -554,6 +568,45 @@ export class SdField {
                 "attribute": "label-width",
                 "defaultValue": "''"
             },
+            "labelHeight": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB808\uC774\uBE14 \uBC15\uC2A4 \uB192\uC774 (\uC22B\uC790\uBA74 px). \uBBF8\uC9C0\uC815 \uC2DC size\uBCC4 \uAE30\uBCF8\uAC12 \uC0AC\uC6A9.\nmultiline \uB4F1 \uCEE8\uD2B8\uB864 \uBC15\uC2A4\uAC00 \uCEE4\uC9C8 \uB54C \uB808\uC774\uBE14\uC744 \uCCAB \uD589\uC5D0 \uB9DE\uCD94\uAE30 \uC704\uD574 \uC0AC\uC6A9\uD55C\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-height"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uBA40\uD2F0\uB77C\uC778 \uCEE8\uD2B8\uB864 \u2014 \uCEE8\uD2B8\uB864 \uB192\uC774\uB97C \uACE0\uC815\uD558\uC9C0 \uC54A\uACE0 min-height\uB9CC \uC801\uC6A9\uD55C\uB2E4."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiline",
+                "defaultValue": "false"
+            },
             "addonLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -2,17 +2,24 @@ import filePickerTokens from "../../tokens/generated/component.filepicker.json";
 import fieldTokens from "../../tokens/generated/component.field.json";
 import listBoxTokens from "../../tokens/generated/component.listBox.json";
 const fp = filePickerTokens.filepicker;
-export const FILE_PICKER_LAYOUT = {
-    height: fp.sm.height,
-    paddingX: fp.sm.paddingX,
-    gap: fp.sm.gap,
-    radius: fp.sm.radius,
-    borderWidth: fp.sm.borderWidth,
-    fontSize: fp.sm.typography.fontSize,
-    lineHeight: fp.sm.typography.lineHeight,
-    fontWeight: fp.sm.typography.fontWeight,
-    iconSize: fp.sm.icon,
+const buildLayout = (s) => ({
+    height: fp[s].height,
+    paddingX: fp[s].paddingX,
+    gap: fp[s].gap,
+    radius: fp[s].radius,
+    borderWidth: fp[s].borderWidth,
+    fontSize: fp[s].typography.fontSize,
+    lineHeight: fp[s].typography.lineHeight,
+    fontWeight: fp[s].typography.fontWeight,
+    iconSize: fp[s].icon,
     contentsGap: fieldTokens.field.contents.gap,
+});
+/** 기본(sm) 레이아웃 — 하위호환용 단일 export */
+export const FILE_PICKER_LAYOUT = buildLayout('sm');
+/** size별 레이아웃 맵 */
+export const FILE_PICKER_LAYOUTS = {
+    sm: FILE_PICKER_LAYOUT,
+    md: buildLayout('md'),
 };
 export const FILE_PICKER_COLORS = {
     border: fp.border,

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

@@ -1,6 +1,6 @@
 import { h, } from "@stencil/core";
 import { nanoid } from "nanoid/non-secure";
-import { FILE_PICKER_LAYOUT, FILE_PICKER_COLORS, FILE_PICKER_LIST_BOX, } from "./sd-file-picker.config";
+import { FILE_PICKER_LAYOUT, FILE_PICKER_LAYOUTS, FILE_PICKER_COLORS, FILE_PICKER_LIST_BOX, } from "./sd-file-picker.config";
 export class SdFilePicker {
     el;
     /** 선택된 파일 값 */
@@ -24,6 +24,8 @@ export class SdFilePicker {
     /** 최대 파일 개수 */
     maxFiles;
     // sd-field 패스스루 props
+    /** 필드 크기 */
+    size = 'sm';
     /** 폼 연동용 name 속성 */
     name = nanoid();
     /** 레이블 텍스트 */
@@ -226,7 +228,7 @@ export class SdFilePicker {
     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) })))));
+        return (h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index) => (h("sd-chip", { value: file.name, editable: false, onSdRemove: () => this.handleChipRemove(index) })))));
     }
     renderListbox() {
         if (!this.hasChips() || !this.isListboxOpen)
@@ -252,38 +254,39 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
+        const layout = FILE_PICKER_LAYOUTS[this.size] ?? FILE_PICKER_LAYOUT;
         const cssVars = {
-            '--sd-file-picker-font-size': `${FILE_PICKER_LAYOUT.fontSize}px`,
-            '--sd-file-picker-line-height': `${FILE_PICKER_LAYOUT.lineHeight}px`,
-            '--sd-file-picker-font-weight': FILE_PICKER_LAYOUT.fontWeight,
-            '--sd-file-picker-padding-x': `${FILE_PICKER_LAYOUT.paddingX}px`,
-            '--sd-file-picker-gap': `${FILE_PICKER_LAYOUT.gap}px`,
+            '--sd-file-picker-font-size': `${layout.fontSize}px`,
+            '--sd-file-picker-line-height': `${layout.lineHeight}px`,
+            '--sd-file-picker-font-weight': layout.fontWeight,
+            '--sd-file-picker-padding-x': `${layout.paddingX}px`,
+            '--sd-file-picker-gap': `${layout.gap}px`,
             '--sd-file-picker-text-color': FILE_PICKER_COLORS.text.default,
             '--sd-file-picker-placeholder-color': FILE_PICKER_COLORS.text.placeholder,
             '--sd-file-picker-disabled-color': FILE_PICKER_COLORS.text.disabled,
-            // sd-field 시스템 변수 override
-            '--sd-system-size-field-sm-height': `${FILE_PICKER_LAYOUT.height}px`,
-            '--sd-system-radius-field-sm': `${FILE_PICKER_LAYOUT.radius}px`,
+            // sd-field 시스템 변수 override (size에 맞춰)
+            [`--sd-system-size-field-${this.size}-height`]: `${layout.height}px`,
+            [`--sd-system-radius-field-${this.size}`]: `${layout.radius}px`,
         };
         const showListbox = this.multiple && this.useMultipleListBox;
-        const content = (h("div", { key: '932b5549b6b27e0fec8096127dd8fb09f682fe56', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
+        const content = (h("div", { key: 'd1c3af9860038ddb11d540af8312ad59d051524f', role: "button", tabindex: this.disabled ? -1 : 0, class: "sd-file-picker__content", ref: el => (this.contentRef = el), onClick: this.handleClick, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("input", { key: 'd10a6a2bc0606954588cee4ad77898ad28cbbe75', 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 ?? 'Click to upload' }), h("sd-icon", { key: '70102b5a6ff6606423ba36601015bccc2d48f22c', name: "attachFile", size: Number(FILE_PICKER_LAYOUT.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '7a0696f4f4b3ccd56c707bf2ecee59562ceb1a7b', ref: el => (this.fileNamesRef = el), class: {
+            } }, h("input", { key: '760c38cd73d0a2a3d0832c5597c0e22bf737bb06', 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 ?? 'Click to upload' }), h("sd-icon", { key: '96ff0bf43eb3f17df92bd8834cd38a1ae36ad475', name: "attachFile", size: Number(layout.iconSize), color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '0757b8b734e21fcf7bed04d7306ee3a9d202f950', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: 'a68ba1cd8dabf75279eba8993befef8dd03008ae', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
+            } }, displayText), showListbox && hasFiles && !this.disabled && (h("sd-ghost-button", { key: '8e42d38452d00256147ee65e614bdeb7040917d7', icon: "caretDown", size: "xxs", ariaLabel: "toggle file list", disabled: this.disabled, class: {
                 'sd-file-picker__caret': true,
                 'sd-file-picker__caret--open': this.isListboxOpen,
-            }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '6abcae4722ebbe7f888ce500774f3a749061ad4e', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'f1e3821eee58a1b126a6375a8d830a9fc9055cbe', class: "sd-file-picker__tooltip" }, displayText))));
-        return (h("div", { key: '952fbde18439ce103d62ede9e7b7a59dda408aa1', class: {
+            }, onClick: this.handleListboxToggle })), !this.disabled && hasFiles && (h("sd-ghost-button", { key: '6f65042ce5e4efa1b6ab126653d434ca77cdd790', icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'b41146f39c384a5954dca22f2d3da767a63ef0c0', class: "sd-file-picker__tooltip" }, displayText))));
+        return (h("div", { key: '858fea100a9317ac6806ae40699e9f5608394e10', class: {
                 'sd-file-picker__wrapper': true,
                 'sd-file-picker--inline': this.inline,
                 'sd-file-picker--inline-disabled': this.inline && this.disabled,
-            }, style: cssVars }, h("sd-field", { key: '08ed598117f29d7c6977f75a73300c033bb6ec9d', borderless: this.inline, 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.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
+            }, style: cssVars }, h("sd-field", { key: '1b7a6a57e4e46c253bd9f77c500dabf92edc2ae0', borderless: this.inline, size: this.size, 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.useMultipleListBox ? this.renderListbox() : this.renderChipList()));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -497,6 +500,33 @@ export class SdFilePicker {
                 "reflect": false,
                 "attribute": "max-files"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "FieldSize": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldSize",
+                            "referenceLocation": "FieldSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD544\uB4DC \uD06C\uAE30"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,

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

@@ -173,7 +173,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
+        return h("slot", { key: 'f45790ba4fc45aef991a54b409acc2791342fcdf' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -9,6 +9,11 @@ export class SdGhostButton {
     intent = 'default';
     /** 스크린리더용 접근성 레이블 */
     ariaLabel = '';
+    /**
+     * 토글 버튼일 때 눌림 상태 → `aria-pressed`로 반영. 미지정 시 속성 자체를 내보내지 않는다.
+     * (DOM `Element.ariaPressed`(문자열 예약 속성)와 충돌하므로 prop 이름은 `pressed`)
+     */
+    pressed;
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText;
     /** 비활성 상태 여부 */
@@ -66,16 +71,16 @@ export class SdGhostButton {
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (h("button", { key: '9d2d352d36c7c34c67d8c57de6236d72727bd078', class: {
+        return (h("button", { key: '921a2e6e54aa3cbb0e6c14ad117d6ddcfc753618', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
-            }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, style: {
+            }, type: "button", "aria-disabled": this.disabled ? 'true' : undefined, tabIndex: this.disabled ? -1 : undefined, "aria-label": accessibleName, "aria-pressed": this.pressed, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (h("sd-portal", { key: '1a73fb53be28a622d03e4f20be0b30e0e76bccd4', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: 'e4a349dbfbf2fd16eed9a46f5e2ed43935212cfe', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: '4aa1525a6da6ee72daf1815f1440d665bd1cf2c8', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: '4caac22d0d888c1998032697043e3a3761e012aa', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (h("sd-portal", { key: '90817207f1b8b5c1d55ce510dfb5ea90cf614bfd', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: '75379a80a230eb197d56df9eb3a79f4536c425d5', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: 'b7cc000adb2aaa3e9f65635d7e9cab7fceff62c3', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: '0df3fd325eb7e82b3da6427e22c05819f35d307e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -188,6 +193,25 @@ export class SdGhostButton {
                 "attribute": "aria-label",
                 "defaultValue": "''"
             },
+            "pressed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD1A0\uAE00 \uBC84\uD2BC\uC77C \uB54C \uB20C\uB9BC \uC0C1\uD0DC \u2192 `aria-pressed`\uB85C \uBC18\uC601. \uBBF8\uC9C0\uC815 \uC2DC \uC18D\uC131 \uC790\uCCB4\uB97C \uB0B4\uBCF4\uB0B4\uC9C0 \uC54A\uB294\uB2E4.\n(DOM `Element.ariaPressed`(\uBB38\uC790\uC5F4 \uC608\uC57D \uC18D\uC131)\uC640 \uCDA9\uB3CC\uD558\uBBC0\uB85C prop \uC774\uB984\uC740 `pressed`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-pressed"
+            },
             "tooltipText": {
                 "type": "string",
                 "mutable": false,

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

@@ -152,12 +152,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: '5707ad3cdfd0194d4200899f3838e6e7ff03cb34', 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: 'a5146f59435269a419c8273c72e7704a359108f0', class: "sd-input__content" }, h("slot", { key: 'cfa0393abc20439a7746e874215864d02d41ce17', name: "prefix" }), h("input", { key: 'bf7503a5701e237868c7be863f5d2653d074fb66', 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: 'bc16a709380137d6993753892e71cab33e0fc070', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '4053ddc137f8d104a3e619f81ca2c99fd7e52a75', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '66c7d6a9292bf8129fea6a33d2288733c264a39f', 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: 'b429ae6e521440eb917b17b10525ff3d3767a50d', class: "sd-input__content" }, h("slot", { key: 'dc1cd825ff1bea6484eada71d5aff621f82522c2', name: "prefix" }), h("input", { key: '93bd923644ac7660c2c9be28e4c64d39d93365c3', 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: 'ec2f67a7ae01ebbaaa1f48f1e231f6fe2cfb413c', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'de33f6902ab5560e151ef13e01ef84eea14da17d', 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: '7062bbfecd4289185dc847bca0524405d6f4bbfe', 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: 'db07c28cede67dbec93454b5ea90e94f72c5f313', 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;
@@ -200,8 +200,8 @@ export class SdInput {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'password' | 'email'",
-                    "resolved": "\"email\" | \"password\" | \"text\"",
+                    "original": "'text' | 'password' | 'email' | 'number' | 'tel' | 'search' | 'url'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
                     "references": {}
                 },
                 "required": false,

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

@@ -31,7 +31,7 @@ export class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, h("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, h("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', class: "sd-linear-progress__label" }, this.label)));
+        return (h(Host, { key: 'bb8b4b933b609a42d1c342b7b480d32a48527321', style: hostStyle }, h("div", { key: 'd127baf4c4cf49d5c6e04ada72636c9d3fd81733', class: "sd-linear-progress__track" }, h("div", { key: '6251da38b070cf9f064b22ed1ecb694da41f63ec', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (h("span", { key: '7b15d0383e4cc391a22e4fc7e2a85bc6cd076f80', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (h("span", { key: '8755f23a83aede79a141a14b73337eacca0fc10d', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'c874dd1ca0cb86c90a84c318790639c0f4283255', 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

@@ -32,10 +32,10 @@ export class SdLoadingContainer {
         this.prevBodyOverflow = null;
     }
     render() {
-        return (h("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
+        return (h("div", { key: 'c7821d4c50651217e48f424cbdfb9a32006afda4', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), h("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && h("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'f7674699f3dd15edd74fc3224203b59ad2a96735', class: "sd-loading-container__backdrop" }), h("div", { key: 'cd361e1a1f470109298459cc2872be104e382015', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: 'c856a1e9ab203040dd8bf0d01dbdf151718aaa3e', indeterminate: true, type: "inverse" }), this.message && h("p", { key: '8af15dba086fb024b652db5f776d384f00fd9cf7', 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

@@ -60,7 +60,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: '1b22ac1569044c27867745c08d3e49325192c673', style: hostStyle }, h("div", { key: '06fbf9cb54f7753a2560b208ab634a9090d5462a', class: "sd-loading-modal" }, this.resolvedState === 'error' && (h("sd-ghost-button", { key: 'fc8e95da691cefe22b47d75cacd9e4ea36695347', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'ca4840db307050f8509d3a632b8f028bce18e399', 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: '11b93fc8996ca64a42f09e4688267329da8a74c9', 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.showButton && (h("div", { key: 'b75b3cb2a48167746d583e540c48746b9590efad', class: "sd-loading-modal__button" }, h("sd-button", { key: '7c298c2f62460ecb955a53e57c841a9e7244008e', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: 'c6b6406cc751cfc007f6fbff72580a22b2975c03', style: hostStyle }, h("div", { key: '139b7397598768e526275dc8b508a333ba1e6058', class: "sd-loading-modal" }, this.resolvedState === 'error' && (h("sd-ghost-button", { key: '098c693d5da0c333fb06309be5371a5e8a6c3016', class: "sd-loading-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'f072a17c4c8e47e296cbf52d34414a32efa6aaa1', 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: 'a2c501cfee2181b2a7dda2544e03bf1a709baaf3', 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.showButton && (h("div", { key: 'e9d1beef80bf8fa4a0647802ce4a6e023e74bc12', class: "sd-loading-modal__button" }, h("sd-button", { key: '63a64f356fc09cbaf56ff715d04c97b208f63945', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {