@sellmate/design-system 1.6.0 → 1.7.1

package/dist/cjs/sd-date-picker_7.cjs.entry.js

@@ -105,9 +105,9 @@ const SdDatePicker = class {
             '--sd-system-color-field-border-focus': sdDatePicker_config.DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdDatePicker_config.DATEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: '35d821e9a21a09e4b2dc0d47f9a95d895c4f9dc4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '21fe3c0ab5dff10265139111de741216fb06e4e4', class: "sd-date-picker", ref: el => {
+        return (index.h("sd-field", { key: '12d77a181caa4a6a9125db8a5c823149386ee059', 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 }, index.h("div", { key: '2abc775817955caf06dd721d7b91c65d1bfd54de', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: 'b9fd9b90afa512aefdd4b227c66d0b4660b69318', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'b6e439d2b507922cc2e345fe1fba856d77441cbc', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-calendar", { key: 'ae09060fec5542b9e30d051133f4bca3c772f5d9', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, index.h("sd-date-picker-trigger", { key: 'c8c041a503785e35ac4a14d902eeef0a20fa2dd7', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '2c3bf831068ca090247fa4494fac6c2ce3b20e81', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-calendar", { key: '52df44d23b85540cbca17c352aba5568ff43685d', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -276,7 +276,7 @@ const FILE_PICKER_COLORS = {
     },
 };
 
-const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
+const sdFilePickerCss = () => `sd-file-picker{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%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
 
 const SdFilePicker = class {
     constructor(hostRef) {
@@ -347,11 +347,11 @@ const SdFilePicker = class {
             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) {
@@ -375,22 +375,34 @@ const SdFilePicker = class {
             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)
@@ -410,6 +422,8 @@ const SdFilePicker = class {
         this.fileInputRef?.click();
     };
     hasFiles() {
+        if (this.multiple)
+            return false;
         if (!this.internalValue)
             return false;
         if (Array.isArray(this.internalValue)) {
@@ -417,14 +431,28 @@ const SdFilePicker = class {
         }
         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 (index.h("div", { class: "sd-file-picker__chip-list" }, this.internalValue.map((file, index$1) => (index.h("sd-chip", { value: file.name, onSdRemove: () => this.handleChipRemove(index$1) })))));
+    }
     checkOverflow() {
         if (!this.fileNamesRef)
             return;
@@ -464,9 +492,9 @@ const SdFilePicker = class {
             return (index.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 (index.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 (index.h("div", { class: "sd-file-picker__wrapper", style: cssVars }, index.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 watchers() { return {
         "value": [{
@@ -1080,7 +1108,7 @@ const SdRadioGroup = class {
         return classes.join(' ');
     }
     render() {
-        return (index.h("div", { key: '3bb952a72d5bccd1ad4842d9554efe6c69829773', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (index.h("div", { key: 'd60a7fed2bbe1cd2d577827b10c99627aabbda66', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (index.h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js

@@ -267,7 +267,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (index.h(index.Fragment, { key: 'b4082936889d6bed77917d9b06aafa3c80d413a7' }, index.h("div", { key: 'baf10fa376bf32982816258f950edf65d5622a99', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: 'bacc88f756b64f4382b1c8c648269bb2c233dc54', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: 'dcebf3cd120e2e606784c365c309d4c48296a5ae', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (index.h(index.Fragment, { key: 'a9e5bc8198cfda50227069661812341e7a19b21d' }, index.h("div", { key: 'a2c5bf6ae806fc24f421cb6b52323f4e92bfc255', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '2575175fa3537e010e1c7d573428d5c8ebfae488', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: 'bd43ac98b88665dbe85804c8b6345c19dca7d9fa', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-field_3.cjs.entry.js

@@ -248,20 +248,21 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (index.h("div", { key: '1cc135c77708546f23b699bf337c018f6c4d315e', class: {
+        return (index.h("div", { key: 'c6d4bc9d09982d65c31596319569590df9b994b1', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, index.h("div", { key: '506ace23aa27ad50a8ad60dcf6c71a0bdf04d7af', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '41b77a52c21eef8c38127362423378f1b9a6cb77', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, index.h("div", { key: '24f3e7702b3d3be42f8236988e1d64e26a31840e', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '7c45edce014adee7e2eb91296779896d9fd9fcc3', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, index.h("div", { key: '1f3c5f2009a0d96b8a3544c58b96f7ecc4ddee6b', class: {
+                : {} }, index.h("div", { key: '13c99702bf11e4ff76332141a9eaff93185882d3', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && index.h("div", { key: '39a28adaa959b89d3724672910157662e50b35ed', class: "sd-field__addon" }, addon), index.h("slot", { key: '0c9360e8644df658c389554c13a04bc22985e84d' })), this.errorMsg !== '' || this.errorMessage !== '' ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && index.h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (index.h("div", { key: '461170360e26e24051fab4507a22e932f5a37244', class: "sd-field__addon" }, this.icon && (index.h("sd-icon", { key: 'c8b63273a253da7911e5d8a6f57143a9cc909853', 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)), index.h("slot", { key: '3c4a72a6152c50d525df972a2a4c4d6840240116' })), this.errorMsg !== '' || this.errorMessage !== '' ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && index.h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')

package/dist/cjs/sd-ghost-button.cjs.entry.js

@@ -162,7 +162,7 @@ const SdGhostButton = class {
             ? GHOST_BUTTON_DISABLED_COLORS[intent]
             : GHOST_BUTTON_CONTENT_COLORS[intent];
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
-        return (index.h("button", { key: '0707c0067aded10ea53bffbca0dbddbfdef35dc6', class: {
+        return (index.h("button", { key: '7bf9f8b8d487be0b66a969668308fd451faeb442', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -171,7 +171,7 @@ const SdGhostButton = class {
                 '--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 }, index.h("sd-icon", { key: 'c362f7da310fc5b20fbbf0b08da4959b6f4a5374', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, index.h("sd-icon", { key: '4b6b05d186f8c38d2f05415fa24960349dd6c453', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();

package/dist/cjs/sd-guide.cjs.entry.js

@@ -188,10 +188,10 @@ const SdGuide = class {
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (index.h("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, index.h("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (index.h("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '2a803402b120509ef8b6de361f360a7b5b96e9db', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '3e591b85ac24ea1db37bdaaf130f983d70ef2f36', class: "sd-guide__popup", style: {
+        return (index.h("div", { key: 'ea4f220faf6165f7650360f74a19d9f781b81489', class: "sd-guide", style: this.guideStyle }, index.h("sd-button", { key: 'c90eaa6cc42a9a2f20b8fc79db16697db0cf2ff2', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (index.h("sd-portal", { key: '21f57a739141ffa36f3b799a2688ca5b3c1bd428', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '94e12fa797748a02334b97e13c5012ab95bc2bce', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
                 width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, index.h("sd-ghost-button", { key: '1aa20f7bd3a1ba45c4932a67a8c1e67d6e068702', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), index.h("div", { key: 'e48378d1731e0b9fcd5990cb908ae3af236d0346', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'c8c71c7c2f0fdb25e3741415c1f1fae1a8d4d3d2', name: iconName, size: 24, color: popupIconColor }), index.h("h3", { key: '4996225c27fbeae4fd9b4d68d6e493d87225d427', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), index.h("ul", { key: 'edb2d35594b47f19f2e847ba546fac0fc19b21b4', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, index.h("sd-ghost-button", { key: '6fc71032016e7a3be0581508ef0ecc6772981185', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), index.h("div", { key: '385c0c18bc888be6a654525dc6f4359a56ad6de9', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '34624d2ac3397ba15b2dc7ba23dc460a87cb878b', name: iconName, size: 24, color: popupIconColor }), index.h("h3", { key: 'dd3527ec329698b0fd1ec82f2a7d0cf5865802c2', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), index.h("ul", { key: '429357d0203acdf31177353ceb45d9ac41fadae7', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/cjs/sd-modal-container.cjs.entry.js

@@ -203,6 +203,9 @@ const SdModalContainer = class {
         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'))

package/dist/cjs/sd-popover.cjs.entry.js

@@ -29,10 +29,10 @@ const SdPopover = class {
     disabled = false;
     type = 'button';
     menuTitle;
-    messages = [];
     leftLink;
     button;
     menuClass = '';
+    slotContentHTML = '';
     showChange;
     buttonEl;
     setShow = (next) => {
@@ -54,27 +54,30 @@ const SdPopover = class {
         }
     }
     handleClose = () => this.setShow(false);
+    componentWillLoad() {
+        this.slotContentHTML = this.el.innerHTML;
+        this.el.innerHTML = '';
+    }
     render() {
         const placement = this.placement ?? 'bottom';
         const color = this.color ?? '#01BB4B';
         const icon = this.icon ?? 'helpOutline';
         const iconSize = this.iconSize ?? 12;
         const menuClass = this.menuClass ?? '';
-        const messages = Array.isArray(this.messages) ? this.messages : [];
         const leftLink = this.leftLink;
         const button = this.button;
         const hasFooter = !!leftLink || !!button;
-        return (index.h(index.Fragment, { key: '7bf954f334ae12586a02b799139dc29421a86551' }, this.label !== '' ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: 'f785e5851cf126052d2c016220d9ff2376f2a9f3', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: '5eb30ad12f0f1cb3f23ae90e6b51e9c545dee8fd', class: {
+        return (index.h(index.Fragment, { key: 'f0b7cc015ab688e21d6df2a797c3964808965934' }, this.label !== '' ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel || this.label || icon || 'Open popover', disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (index.h("sd-floating-portal", { key: '3b8ad8010a7d74fb519f0ad9ff504c0c0fa32941', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, index.h("div", { key: '8fba73c8cf2718258a176dac2033fb3b33a8a618', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
                 [menuClass]: menuClass !== '',
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: '632639d52731fe47baf2860464013a4d0fd3c3d8', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '1f963e1a52b09803fd9f2d1f1ce7a07023951fc9' })), index.h("div", { key: '1c90735369085c465321e398775c4ce484190479', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '29584cd7bcb244c3fb6b0cb895a5c4b55093418a', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (index.h("div", { key: '2c7a9671cbec98f0fb393b1d049bfecc1e8b8013', class: "sd-floating-menu__messages" }, messages.map((message, i) => (index.h("div", { key: `msg-${i}` }, message))))), hasFooter && (index.h("div", { key: '18667a0a8eaf8f022513b048095c24487dd4ae98', class: {
+            } }, index.h("i", { key: '1cef252c66b1c350ea43849e552faced5a53fec0', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '755246fe5fbf9b203509f8d45d2bcbeead0c02c6' })), index.h("div", { key: 'cbefa421598f83f692533d4abf8cfc584b4e02e1', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '0f1dfbaf65236416ba00e5f87cb60e2e98971995', class: "sd-floating-menu__title" }, this.menuTitle), this.slotContentHTML && (index.h("div", { key: '38ef67a38921e3fbd1e8bee95892655fc57d124c', class: "sd-floating-menu__messages", innerHTML: this.slotContentHTML })), hasFooter && (index.h("div", { key: '6b3f297563e3b7aa17ace0e20c4423d09b528b32', class: {
                 'sd-floating-menu__buttons': true,
                 'sd-floating-menu__buttons--with-link': !!leftLink,
-            } }, leftLink && (index.h("sd-text-link", { key: 'efbeb3047ea9eb62eba2f5940ec4f71f46d1c479', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (index.h("sd-button", { key: '9044ee54225a7b441c85d1acf3355e2d3688f942', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), index.h("sd-ghost-button", { key: '4f37394444b692ff5a2b736fe3514e51eb49b601', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
+            } }, leftLink && (index.h("sd-text-link", { key: '6ff83b0aefa24ac3bbae7f1399fdaaa1028b4e75', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (index.h("sd-button", { key: 'b8b75cd68c55b16b5eb0e4635c16b784381ced78', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel || button.label || button.icon || 'Open popover', disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), index.h("sd-ghost-button", { key: '246ab053d1109d7b999e63c3aa5a1048d6096583', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose }))))));
     }
 };
 SdPopover.style = sdPopoverCss();

package/dist/cjs/sd-portal.cjs.entry.js

@@ -227,7 +227,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: 'a227fa8a0639de7fd3a014762998692151284f87' });
+        return index.h("slot", { key: '87fb9bf3f15d09321c6c02a1f7b4ed9084516a04' });
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/sd-radio-button.cjs.entry.js

@@ -178,7 +178,7 @@ const SdRadioButton = class {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (index.h("div", { key: 'd1f572315ee66c5defebc4386e815fb21928b548', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (index.h("div", { key: 'b916d790862409f8b8e1da566f049daadfc4e5e2', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (index.h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, index.h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && index.h("span", { class: "sd-radio-button__label" }, option.label)));

package/dist/cjs/sd-radio.cjs.entry.js

@@ -118,7 +118,7 @@ const SdRadio = class {
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
             '--sd-radio-label-color': RADIO_COLORS.label,
         };
-        return (index.h("label", { key: '2b7819249e5070a22b626530011db4a8e56194f1', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: '233699a7c3bc13708d43ca3719f61edf53836c83', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: 'eb665c5f8c6202b66b65b6b120f144970fba0a38', class: "sd-radio__circle" }), this.label && index.h("span", { key: '3d0db13e083bacb4cb7ace9129fcfcd61f18dfc7', class: "sd-radio__label" }, this.label)));
+        return (index.h("label", { key: '68f1b169f2a7b072a92a64286fa88eff99313faf', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: 'fa2474cc359ef4f5480a68d9b5d0b6f151e7eec8', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: '345f286e2f87e5dd0687fb94a59f6886eac25f24', class: "sd-radio__circle" }), this.label && index.h("span", { key: 'e8bd76682569820121c9469984f0054386d9b117', class: "sd-radio__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-tag.cjs.entry.js

@@ -209,7 +209,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: 'c8b8b88e2c83401bb9d3e05004b0517d7e4a3a6a', class: "sd-tag", style: {
+        return (index.h("span", { key: '945a8a13f4891b5174e48e262b2a108674da7198', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -219,7 +219,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '67094b09ab1d7b7e865c9f6b8017f8c5c3f8274a', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '441932c2eb85eea471838db541fb95302527df23', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -76,7 +76,7 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '11d2153cc91818c1214e21ffa14bd08249ad1116', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("span", { key: '23ddcce86220acc4e6c8a585e4240ecb7baee9f8', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -84,13 +84,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (index.h("sd-icon", { key: '23972d53b4968c9bdef9b54dfa785e658ba117ef', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '5e99a6c1151093929086ec4398b93d7db590d959', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: 'b814759278cefe229a5321556374438f281ce0f3', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (index.h("sd-icon", { key: 'd265458a74db086efa270fd165fa5fa9855b708b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '9cb7e5909036aea5b70496fbe5ca69ce10ab3035', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: '5ebe27c5929095d1799d81e930b2efa8d616f5bd', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: 'dfe3286eaeef9a176f5ff1a69950713e2712a550', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '5fc735391386ac733b77bfac6947cccc61fad198', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -39,7 +39,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: '7b59ff655bb9f7a6bc79bb948201a6a532c16b06', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '3e141509dc7082e08f448043573de3a8bd8e7cf0', class: "sd-action-modal__header" }, h("h2", { key: 'ba80634b72ce1168d2ab3aec12bdf2a6546ff08d', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'aed32008f0dcaa2deec098ca3c0c9cb1e8f6fb50', class: "sd-action-modal__header-sub" }, h("slot", { key: '32a015a006cbcf26373c64a72e4131b878c53222', name: "header-sub-title" })), h("sd-ghost-button", { key: '574d14cf2d0031dbf43cbb5999d4471a235ca72a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '713761da4ad2217c1d762fd56bc391ddc5c9cded', class: "sd-action-modal__body" }, h("slot", { key: 'e224251b153d60cf35056b542c5d9925f4918b7f', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '43d6e4ffed21704ac68689f0742f8d7a6456b0b6', class: "sd-action-modal__footer" }, h("div", { key: 'bd9cce1c5b1fb02156008a4e76c65dc8cb4385aa', class: "sd-action-modal__footer-sub" }, h("slot", { key: '4de818c9ba8fcdb159963b9c9c7ce893fa3216da', name: "bottom-sub-content" })), h("sd-button", { key: 'af9f4c1fd4c6bb482690c2545e0add53c308b95a', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '91a94a7058a38f4433809705cf2fefdc3bbaefa9', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'e47efbc4183c9cff34d0ed66aab69521efb9e9e5', class: "sd-action-modal__header" }, h("h2", { key: '7a54d5f4decb8d6d599808feafca68e548cf173e', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '621c4a86ef0ba69833b84515c74d4972f0a6cc42', class: "sd-action-modal__header-sub" }, h("slot", { key: 'f7453ed96822804094c239cef05638934aed288e', name: "header-sub-title" })), h("sd-ghost-button", { key: '29cee49b27b6f261d719e6856f8b38a9fa590bf4', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '610840c291b3a26a82146549220ff1be470eafc2', class: "sd-action-modal__body" }, h("slot", { key: '7d390550e2ba1ae27409fb64beccf4f33f744aad', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'c835a2fb96066b393a8833d492d03adc2806cb07', class: "sd-action-modal__footer" }, h("div", { key: 'b46ed9f18f9e760bd5159260e2cf4b3f27d8dd23', class: "sd-action-modal__footer-sub" }, h("slot", { key: '4b9cce3c5b44b7921e82cb813a87ca5e76cd4928', name: "bottom-sub-content" })), h("sd-button", { key: '6cf14c10ef064a1c5993a48ef9f921069d6d70f6', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -4,7 +4,7 @@ export class SdBadge {
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '9ae835aba8a4acde4b918eceda00441ee2c22905', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'c3b648845b5c138026a82a6a2c483d2a56ed2aab', class: "sd-badge__dot" })));
+        return (h("div", { key: '5fec3220f60c6567d1aa5de6aa3d1c7c9f9e605b', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '892f2c5c1d004d172c06bc0871688d30e449e80f', class: "sd-badge__dot" })));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '61eb9beceb57e58323c1477c71147607db834e71', 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, 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: '9d4fa219af76d29b2d2e8443af1e66b980d62dd1', class: "sd-barcode-input__content" }, h("slot", { key: '044bf2c4a6e79bb0d6b2a76398107b47d1237662', name: "prefix" }), h("input", { key: '2522d0ded40b69c76872877bede00b1e4e5260d2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '8dc300df9f8bd7045f9c9e357925be3b7f2bdbb4', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '1b3cab2c7fe9caf973e7defff170f64b3fd35daa', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'c009f4c33b31e9498c230e9a0f4064925a1e5757', 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, 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: 'a614817eab514a80f7132ebb92ebb0b8bb8009e4', class: "sd-barcode-input__content" }, h("slot", { key: '16a0bf4c55eafec3fb827ba8fe54f61e546fbbca', name: "prefix" }), h("input", { key: 'de9e2abcfe4b8f34084feb8691ef6c8183568932', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'dbfc3e2c03b20da68e80cc3855cace42aae268ec', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '05670236ffb93c7b894bdea9763d11adcab75e05', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -69,13 +69,13 @@ export class SdButton {
         const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
         const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
         const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
-        return (h("button", { key: '3caa9dff467ec7efa748eecd736296500a222ecb', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: 'a234c7f16473512ada9eb1e06bf64f77c399cbfc', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-bg': config.color,
                 '--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: 'cded66e4802956c29064cbdcc12b9dd1066a45c3', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: 'b989e3eb8661e16f052d5c7a292ea316a2b821df', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: '07695896bd8f11ca8753dcb171b5c7f0e7304c0d', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: 'bfd18c0a390a955d8de99789c86ce39fb605beae', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
+            }, onClick: this.handleClick }, h("span", { key: 'f7b9352e23e52ff28380e06deb25e777a5432800', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: '07327cab83e95c69cf8739be2eb08cdd8272393d', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: '4274f4b275c3ac9f3f09d4a6c1bf75d2d5f650ee', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: 'ba796a53ba1cb389db209d91c224b04381445b25', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {

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

@@ -173,7 +173,7 @@ export class SdCalendar {
         const eventMap = this.eventMap;
         const legend = this.legendItems;
         const hasEvents = (this.events?.length ?? 0) > 0;
-        return (h("div", { key: '0ed0317b3cecffea4015de8688888e0ab2a38586', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: 'b915f275a31617711d06d98c8a4d9369ddd36af5', class: "sd-calendar__header" }, h("div", { key: 'cd3b625e4e26af4b11f6af8b22c02099e8ab68a5', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: 'e0ebfed48a7fdb61fd082371e7247176c02a8fb1', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '6bfebc94dce54ca472ad5b3e03a7630e32676c3f', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '2e42ad52cd7d1b5d3502d578347c997910f3efc3', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '95be4ab5e03d7378e82006221f190ffd55659cf1', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'edce7cf91a873cdaeed68e50372bdfa20af7507d', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: '9ba274e9db32177d30d8c218303384855b7a3f60', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'bc113063e769fe12c2a39732cd82060752b7d9eb', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '52cfde203e06334c5eee85abc9d82d6889bf511c', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '9ae80aee03a4e6392a1d9a4ef28e565db20faea3', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '7c47907311ea24f1af030931b8efd11955e55436', class: "sd-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: 'd85abe861103677565ff172def182761255eee97', class: { 'sd-calendar': true, 'sd-calendar--elevated': this.elevated }, style: cssVars }, h("div", { key: '2d087beb6f61c1545c61c040d7266eb809c59c56', class: "sd-calendar__header" }, h("div", { key: '90b85428cd8f22aac7f0d8915a0fb0fc1ba0fd0f', class: "sd-calendar__nav-group" }, h("sd-ghost-button", { key: '6a5b6c35489eeeae6d2fca4a96a77755b5d48c5a', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'b00bab4993fb6f57bf1c6e8fd02243b8cbab8007', class: "sd-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '1ed1ea634a311b429c6e2053c22e1d043d34aa82', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '1d471e12d7e5a48998b33ef6c3b7208c2fff1796', class: "sd-calendar__divider", "aria-hidden": "true" }), h("div", { key: '07e70fb3696cfe6bcf2253c0ead87fead96ad04e', class: "sd-calendar__nav-group sd-calendar__nav-group-month" }, h("sd-ghost-button", { key: 'c8401e8f8a1018eec46d9ee9857e8aa64235fff5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '3ceaa4a07a45eb16c43ed70e953f4540c2554ae9', class: "sd-calendar__label sd-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '6dd7c2c29159e549e2294141726b39c0ad559634', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '623928bc8970c2746f3d924a4ae36149ce7d21f7', class: "sd-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-calendar__week-cell" }, label)))), h("div", { key: '5ab1f7042906eb7542f4effa35c0c9992ded34dc', class: "sd-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && this.value !== '' && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);
@@ -186,8 +186,8 @@ export class SdCalendar {
                     'sd-calendar__day--disabled': isDisabled,
                 }, disabled: !cell.inCurrentMonth || isDisabled, tabindex: !cell.inCurrentMonth ? -1 : undefined, "aria-hidden": !cell.inCurrentMonth ? 'true' : undefined, onClick: () => cell.inCurrentMonth && this.handleDayClick(cell) }, h("span", { class: "sd-calendar__day-circle" }, cell.inCurrentMonth ? cell.day : ''), hasEvents && (h("span", { class: "sd-calendar__dot-row", "aria-hidden": "true" }, dayEvents?.map((ev, i) => (h("span", { key: `${ev.color}|${ev.label}|${i}`, class: "sd-calendar__dot", style: { backgroundColor: ev.color } })))))));
         })), legend.length > 0 && [
-            h("span", { key: '4ba064cad3188db8342f51ca017e4bf5af8aa460', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
-            h("div", { key: 'ac132a1f1f948e618ee75d4c01a1c99a0dfc2c0a', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
+            h("span", { key: '9d3f938ca0ac1d48ec6189a6b9f7598c06dbaf13', class: "sd-calendar__divider-bottom", "aria-hidden": "true" }),
+            h("div", { key: '1b5a55959212257085707478d7d0a358dc355403', class: "sd-calendar__legend" }, legend.map(item => (h("span", { key: `${item.color}|${item.label}`, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: item.color }, "aria-hidden": "true" }), h("span", { class: "sd-calendar__legend-label" }, item.label))))),
         ]));
     }
     static get is() { return "sd-calendar"; }

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

@@ -49,7 +49,7 @@ export class SdCallout {
     }
     render() {
         const showTitle = this.type === 'danger';
-        return (h("div", { key: 'ce91120e7c71907e6c07728554e340ad552d6e34', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '56b55c2fed40e59023856029b8c86c35b29d26e5', class: "sd-callout__body" }, this.renderBody())));
+        return (h("div", { key: 'b11c9ade2fcd2a17704b4d8965e53cc80ddd4a15', class: "sd-callout", style: this.calloutStyle, role: "note" }, showTitle && this.renderTitle(), h("div", { key: '0c5712690ab2141820f444092a63ac4c11d33c80', class: "sd-callout__body" }, this.renderBody())));
     }
     static get is() { return "sd-callout"; }
     static get originalStyleUrls() {

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

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

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

@@ -11,7 +11,7 @@ export class SdChip {
     internalValue = '';
     isEditing = false;
     update;
-    remove;
+    delete;
     focus;
     blur;
     inputEl;
@@ -145,7 +145,7 @@ export class SdChip {
         event.stopPropagation();
         if (this.disabled)
             return;
-        this.remove.emit();
+        this.delete.emit();
     };
     syncInputValue(value) {
         if (!this.inputEl)
@@ -205,7 +205,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '0addb8566b639d05921b9320b99abab7f1d67899', class: {
+        return (h("span", { key: '6503611c9cb03be2de4fc09398e2ce1b34b8ab10', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,
@@ -378,7 +378,7 @@ export class SdChip {
                     "references": {}
                 }
             }, {
-                "method": "remove",
+                "method": "delete",
                 "name": "sdRemove",
                 "bubbles": true,
                 "cancelable": true,

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

@@ -27,7 +27,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, h("svg", { key: '669fa503cc6007f48f35474b08e4359de695026d', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '020c7d840a6592d7705b65b14d27e3b5752629bf', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'e409da4a5c34adcd8744f16040ae9d5d6019a415', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {

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

@@ -73,9 +73,9 @@ export class SdConfirmModal {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: 'f9a1d63c1cd047969c72d0e71ccd3b1cf30bac15', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: '8f1e4ec22a12ad9347c8c8c843f6dbb91591b289', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '8adada47e2dc0a6677cdf004ca8cad8794123d03', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'ddc0636d2cd8333aa0d5a3f242dbf2d57759fc5b', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: '66d4c779f4269824937306ca34a0b51e6208d03f', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '87634b26cba0fb24115f0cd59fcc7956f9fde53c', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '0b495d1393cf029e8b07f9041c51e344ff7cb5da', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: 'c41a58f13b95da7f1f0aea3620abf239dcb116b6', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'bdc1bc374934c2f9745f567b4e6ffd55ec3675ce', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'ff16ebde448157e657eb74e1b0c5f4a331cf396a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd718b2ae6f6e92f8c77ec821b78924ffbe267d12', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'a3909abde84c4d6987c9036a705cba4aa7d01ea6', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '29a4bf80ab75d973544c0a29c87133c9ef8a5aab', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) }))))), this.showContentBox && (h("div", { key: '93eb2c75728cf26969a229a876f9217b4e00c63a', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '09d34f47a466e4277f1bb2215a3b087bc78e240d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '2a62193311791f84b6eca22a49cff8a0fc65d5a7', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '4c800376dec7ca035b2aaaaac00738851829108d', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'dcb473b7b6ce29983d89df6c288526071962ac01', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '730fd073ade9b8788de77d36fc4aeddd0b304c07', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '059fd87fb39b8e2976fcb671c7dd78310324119f', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '6b320645505c099783a4a6704e96e9261054c7dc', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: 'd6a4554a7db861ae7afc610a629591224946d990', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {

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

@@ -33,7 +33,7 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: 'df53dd75ead71167d7089daab5718c7ff1c990ae', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: '8a41444172b2d9aa54fa6efe09c4440705d55e06', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -41,7 +41,7 @@ export class SdDatePickerTrigger {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: '76f41c99e1695eaa191cbc81ae057e65cb78e955', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '4e1a4b2b41737f05dc1a4e642d317f5fc93bf9b2', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            } }, h("sd-icon", { key: '74613a1b65814a1f73d00c67d7c1f01019961511', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '118733548ddee2bc20ccdc92785ada3bbc765303', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {