@sellmate/design-system 1.4.0 → 1.6.0

package/dist/cjs/sd-circle-progress.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 var component_progress = require('./component.progress-Bmg3vAAy.js');
-var system = require('./system-VmZRYp6V.js');
+var system = require('./system-CdAyz3ej.js');
 
 const spinner = {
 	color: {
@@ -72,7 +72,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (index.h(index.Host, { key: 'd4ace6f784fd64a45baa746870a84a88b4911cf8', style: hostStyle }, index.h("svg", { key: '08aef376ac746abf1a9b404e37703a862f956a08', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '42411ef6f92f6427309d92dfad84ad7dc8f8c3bb', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: 'a0ae53ce4dfd557e980155cd0ff22ba064fe32dc', 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 && (index.h("span", { key: '0917cfd3aa460872fa4c35da61530e01080d6937', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && index.h("span", { key: '051756bc7b20e87205b21c735b2827a81c2a17c9', class: "sd-circle-progress__label" }, this.label)));
+        return (index.h(index.Host, { key: 'f92bf4d6e4f1133c4465a4fec7b2bad4549a6d06', style: hostStyle }, index.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" }, index.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 }), index.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 && (index.h("span", { key: '91c0b91e69293b67c8a0ad67a6d4b9e9db5c6d4a', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && index.h("span", { key: '03a5bee22a2e2f1b4ba75dbeca2ef5b4b9840aeb', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

package/dist/cjs/sd-confirm-modal_2.cjs.entry.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
+var sanitizeInlineHtml = require('./sanitize-inline-html-BZCCwH_U.js');
 var component_modal = require('./component.modal-BFelrSMx.js');
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
@@ -101,9 +102,9 @@ const SdConfirmModal = class {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (index.h("div", { key: '6dc337947f7c05799cf7c97d45b0df84c7976196', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: 'b584cc4bc00191f8488be7265249922110d57d90', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '470716bef879befd1d6746bc27c10fb74d61a2b6', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: '5b0113f13b219a2e14c5d45397c293baafc28a2c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), index.h("div", { key: 'cee18d1afde384523ca0f96f4138b8854f89cb5c', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: 'b9466be3cbb635c9b8c0a50d7023b70fa31d9f0f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: 'f3ea52c0261a63e75b42175c2e7c602e02f82636', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (index.h("div", { key: 'f9a1d63c1cd047969c72d0e71ccd3b1cf30bac15', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: '8f1e4ec22a12ad9347c8c8c843f6dbb91591b289', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '8adada47e2dc0a6677cdf004ca8cad8794123d03', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'ddc0636d2cd8333aa0d5a3f242dbf2d57759fc5b', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), index.h("div", { key: '66d4c779f4269824937306ca34a0b51e6208d03f', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '87634b26cba0fb24115f0cd59fcc7956f9fde53c', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) }))))), this.showContentBox && (index.h("div", { key: '0b495d1393cf029e8b07f9041c51e344ff7cb5da', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: 'fa33e4f68a1c36e197ff6a6f5629005fbbebcbc3', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '378162e9e44cefc4e61113ba927545040e6a6c6c', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button", { key: '8fb93a086c4a42063f53ed533be2774de31db81e', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button", { key: '304c80915c9a7a685bddcf2d5edf4f56119860e8', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && (index.h("sd-tag", { name: this.tagPreset ?? 'square_sm_grey', label: this.tagLabel })), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '09d34f47a466e4277f1bb2215a3b087bc78e240d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(msg) })))))), index.h("div", { key: '2a62193311791f84b6eca22a49cff8a0fc65d5a7', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button", { key: '4c800376dec7ca035b2aaaaac00738851829108d', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button", { key: 'dcb473b7b6ce29983d89df6c288526071962ac01', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -186,7 +187,7 @@ const SdLoadingModal = class {
             '--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 (index.h(index.Host, { key: '3d792e07772b93de139fa505f061004b037ed05b', style: hostStyle }, index.h("div", { key: '8b63d47c502bdd66f893a484c4af36d2e8302081', class: "sd-loading-modal" }, index.h("div", { key: '5b35a93e1aed2e8d9f5eebfcbe0222c4f38b5536', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (index.h("sd-circle-progress", { indeterminate: true })) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("div", { key: '591bae1563f4b5c5dc8bce22161d99929fb18ce5', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (index.h("p", { class: "sd-loading-modal__message" }, message)))) : (index.h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (index.h("div", { key: '577acd55fb35229459990f7f1ca4f710c26c51d4', class: "sd-loading-modal__button" }, index.h("sd-button", { key: 'cda4f1b9a8bee1897efb53671c0f715858377ba7', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (index.h(index.Host, { key: '9276c9080c3f9bf2fdf31d1bb5e2b918a49b6a5a', style: hostStyle }, index.h("div", { key: '6f8d55dd13a92f248e0f7ed50c268f9105975913', class: "sd-loading-modal" }, index.h("div", { key: 'f40f91f1d61c6ba1bb2049277c664d5abd4657e8', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (index.h("sd-circle-progress", { indeterminate: true })) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("div", { key: '1ecad303970f074b50dab0050872a95ddc99aad4', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (index.h("p", { class: "sd-loading-modal__message" }, message)))) : (index.h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (index.h("div", { key: 'dd45d56a5475dc766487859e13e460bc2e27ec82', class: "sd-loading-modal__button" }, index.h("sd-button", { key: '5d11fa174168c568fd71013ee5600e0884f28c50', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdDatePicker_config = require('./sd-date-picker.config-D3lTpa6W.js');
 var component_textinput = require('./component.textinput-BpXDeZPD.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: '825c845ea1ada63a9f21cfc43aad04a598325c13', 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: 'b9dd1a8df29f340ad67331dbebd3ec71b79d128a', class: "sd-date-picker", ref: el => {
+        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 => {
                 this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: 'b9bed57fa4a2b06b004ec5a1b723ed5af25fda19', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '776e0ce183edd9c7903ce1a75208addc47c20408', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-calendar", { key: 'f86b502f6b17ee9ff262c1a64e1b0e24defc1660', value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, 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 })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -622,12 +622,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (index.h("sd-field", { key: 'c24b885ef9ca21fb69c1b67f2619896d4bd56155', 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 }, index.h("label", { key: '45a5669d2c8d7d571f50152f81139cedc8a2db3b', class: "sd-input__content" }, index.h("slot", { key: 'c1d032ee22344725e1d041c2351dd7785a8b6b5d', name: "prefix" }), index.h("input", { key: '8433abb36e666a7546870a9e3b77325e9c39551a', 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 }), index.h("slot", { key: '9f5eef3c48f88b90be2c821b1d43e2e9a9f91441', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (index.h("sd-ghost-button", { key: '62ab3e8e02a9db5424e573542dc10bde5a9fc4b8', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: '184bd0b614071b1c26d0ef3588db8eea1ac519cb', 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 }, index.h("label", { key: '599d757b62bd61be0ba5c2dde2e1030b4d6f2973', class: "sd-input__content" }, index.h("slot", { key: '8b71b1449225e51cbab4204e34c077d83101e09e', name: "prefix" }), index.h("input", { key: 'ed48cf8544adc9e3475229b03129ace0af0e6d4e', 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 }), index.h("slot", { key: 'f084df7c3174756111c6eeb824202e26273d369a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (index.h("sd-ghost-button", { key: '62f87c780b971ef43ec9bd15ae47d1f773ec18ca', 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' && (index.h("sd-ghost-button", { key: '0a16665e73a674c7208c7f488b50442c353e3fde', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: '83f511acdc0db74f6d7745e4a47c731f9bcf9bb5', 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;
@@ -765,6 +765,9 @@ const SdNumberInput = class {
     value = null;
     label;
     labelWidth = '';
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
     addonLabel = '';
     addonAlign = 'start';
     placeholder = '입력해 주세요.';
@@ -1025,15 +1028,15 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (index.h("sd-field", { key: '3ed260707f7e1b1a88d1407bb4b3c1965b302bcf', 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, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '889cd4055b46e0727aed2b78f2a8bbeeca88cfed', class: {
+        return (index.h("sd-field", { key: '36525cd069e57fc9177e25065381f722d1afa66e', 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 }, index.h("div", { key: '47e0981ffcd5dd5182fa5586fda0014be865da9e', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (index.h("button", { key: '5213f04a1db8a779762ae41672fd016388a06aa7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '76910ba2b46a78eb2e4aaf7241eeb7aa1223c92a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (index.h("button", { key: '7f5afc1ded2c889ccf7d689f4ee058cb171571d9', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'fd980fd4e568feaaebb19621ca837201bea519dd', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && index.h("span", { key: '273b809ff5bd5ebb2e8cd09a9df3f6f84167aeb2', class: "sd-number-input__prefix" }, this.inputPrefix), index.h("input", { key: '72917348a5ded30f5d8c4066af8e56d50de67db0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && index.h("span", { key: '2af6450d437cc765697e0bb4c8a0fcb58a9abd2f', class: "sd-number-input__prefix" }, this.inputPrefix), index.h("input", { key: '21396363bd0e08f1639cd5a56b0bb7d5c9acd6c1', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && index.h("span", { key: '232aa43852396a617e49403d30b4514aaf896740', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (index.h("button", { key: 'f9dab4cd21deb933e72a8ad906cafbbf1cae1e5a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '73208aca8e5e9be431ba03b4755053c74ec70296', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && index.h("span", { key: 'd3cd84cd41e0161cfe0b13ed44b412991e498a92', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (index.h("button", { key: '0a1fdf262b953ce79515ab9771d3177560e11eed', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '5ffd93512d528309a9051d01f59bb31f1b1f9bb8', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -1215,7 +1218,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (index.h("sd-field", { key: '404175c94949c2510082df905c53e97ab835369c', 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, 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: 'ca92dfe613b2c006ecc4021bb2f07a2e4b04239a', class: "sd-textarea__content" }, index.h("textarea", { key: 'a6d2bbdb9c88766182728cf3eb30ce7691fb048f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (index.h("sd-field", { key: '1f1a6ed592df92b4aa0aacfbc1ba8926b93b7066', 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, 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: '63b4847968e5a1ceb309b7d0950da33927e25244', class: "sd-textarea__content" }, index.h("textarea", { key: '89d81a7792c3b5a4a1bcaa0f7bd73e0b3a0bd192', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 var useDatePicker = require('./useDatePicker-dCuEgvjX.js');
 var component_datepicker = require('./component.datepicker-Cw_-oidk.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: 'f871d59077f63aa2f7d1bbe857a9ff095331c82d' }, index.h("div", { key: '47f4782b315450f07bccec8697d8e98a83e44faf', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: 'cf0eb07920b298f2fce001cc8246d51e1174c27d', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: 'e1d060092eb3b73c890bf0d62f6485ca2a09e187', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        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)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-BGwB03Tk.js');
+var system = require('./system-CdAyz3ej.js');
+
+const DIVIDER_COLORS = {
+    default: system.systemTokens.color.divider.default,
+};
+
+const sdDividerCss = () => `sd-divider{flex-shrink:0;line-height:0}:where(sd-divider:not([vertical])){display:block;width:100%;height:1px}:where(sd-divider[vertical]){display:inline-block;align-self:stretch;width:1px}sd-divider hr{display:block;width:100%;height:100%;margin:0;border:0;background-color:var(--sd-divider-color)}`;
+
+const SdDivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** true면 수직 분할선, false면 수평 분할선 */
+    vertical = false;
+    render() {
+        const hostStyle = {
+            '--sd-divider-color': DIVIDER_COLORS.default,
+        };
+        return (index.h(index.Host, { key: '92e9f5ef8d6d382e1e2a62f3421feaf1bc27aab7', style: hostStyle }, index.h("hr", { key: '40827e6308a258e6de4a438c53d4de9465a6d0a1', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+    }
+};
+SdDivider.style = sdDividerCss();
+
+exports.sd_divider = SdDivider;

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

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
-var sdButton_config = require('./sd-button.config-DH08UNfl.js');
-var system = require('./system-VmZRYp6V.js');
+var index = require('./index-BGwB03Tk.js');
+var sanitizeInlineHtml = require('./sanitize-inline-html-BZCCwH_U.js');
+var sdButton_config = require('./sd-button.config-BSHkfgdC.js');
+var system = require('./system-CdAyz3ej.js');
 
 class DropdownManager {
     static instance;
@@ -102,11 +103,11 @@ const PRESET_HOVER_BACKGROUNDS = sdButton_config.PRESET_HOVER_BACKGROUNDS;
 const PRESET_CONTENT_COLORS = sdButton_config.PRESET_CONTENT_COLORS;
 const PRESET_BORDER_COLORS = sdButton_config.PRESET_BORDER_COLORS;
 const PRESET_DIVIDER_COLORS = {
-    primary: sdButton_config.buttonTokens.button.brand.strong.dropdown.divider,
-    secondary: sdButton_config.buttonTokens.button.brand.subtle.dropdown.divider,
+    primary: sdButton_config.buttonTokens.button.dropdown.brand.strong.split,
+    secondary: sdButton_config.buttonTokens.button.dropdown.brand.subtle.split,
     primary_outline: PRESET_BORDER_COLORS.primary_outline,
     neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
-    danger: sdButton_config.buttonTokens.button.danger.strong.dropdown.divider,
+    danger: sdButton_config.buttonTokens.button.dropdown.danger.strong.split,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
 const MENU_ITEM_COLOR = system.systemTokens.color.fg.secondary;
@@ -147,13 +148,14 @@ const DROPDOWN_DISABLED_BORDER = sdButton_config.buttonTokens.button.border.disa
 const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
 const getDropdownButtonPreset = (value) => sdButton_config.getPresetName(value);
 
-const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#FFFFFF;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006AC1;--sd-dropdown-button-accent:#0075FF;--sd-dropdown-button-disabled-bg:var(--sd-button-button-bg-disabled, #E1E1E1);--sd-dropdown-button-disabled-content:var(--sd-button-button-text-disabled, #888888);--sd-dropdown-button-disabled-border:var(--sd-button-button-border-disabled, #CCCCCC);display:inline-flex;align-items:stretch;justify-content:space-between;min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-button-radius-sm, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-xs-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-sm-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-md-typography-text-decoration,     none   );border-radius:var(--sd-button-button-radius-md, 6px)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
+const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#FFFFFF;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006AC1;--sd-dropdown-button-accent:#0075FF;--sd-dropdown-button-disabled-bg:var(--sd-button-button-bg-disabled, #E1E1E1);--sd-dropdown-button-disabled-content:var(--sd-button-button-text-disabled, #888888);--sd-dropdown-button-disabled-border:var(--sd-button-button-border-disabled, #CCCCCC);display:inline-flex;align-items:stretch;justify-content:space-between;min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-button-radius-sm, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-xs-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-sm-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-md-typography-text-decoration,     none   );border-radius:var(--sd-button-button-radius-md, 6px)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger{gap:var(--sd-dropdown-button-gap);padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-label{padding:0}.sd-dropdown-button:not(.sd-dropdown-button--split) .sd-dropdown-button__trigger-icon{min-width:0;padding:0}.sd-dropdown-button--split{display:inline-flex;align-items:stretch}.sd-dropdown-button--split .sd-dropdown-button__trigger--label-part{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part{border-top-left-radius:0;border-bottom-left-radius:0;border-left:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-divider)}.sd-dropdown-button--split .sd-dropdown-button__trigger--chevron-part.sd-dropdown-button__trigger--disabled{border-left-color:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
 
 const SdDropdownButton = class extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
         this.click = index.createEvent(this, "sdClick", 7);
+        this.buttonClick = index.createEvent(this, "sdButtonClick", 7);
         this.dropDownShow = index.createEvent(this, "sdDropDownShow", 7);
     }
     get el() { return index.getElement(this); }
@@ -161,6 +163,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     label = '';
     items = [];
     disabled = false;
+    split = false;
     static CLOSE_ANIMATION_DURATION = 150;
     isOpen = false;
     isAnimatingOut = false;
@@ -169,6 +172,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     menuRef;
     closeAnimationTimer;
     click;
+    buttonClick;
     dropDownShow;
     handleOpenChange(isOpen) {
         this.onDropdownToggle(isOpen);
@@ -284,6 +288,14 @@ const SdDropdownButton = class extends BaseDropdownEvent {
             this.isOpen = true;
         }
     };
+    handleButtonClick = (event) => {
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        this.buttonClick.emit();
+        this.closeDropdown();
+    };
     selectItem(item, event) {
         event?.stopPropagation();
         if (!item || item.disabled) {
@@ -292,7 +304,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         this.click.emit(item.value);
         this.closeDropdown();
     }
-    getTriggerClasses(preset, size, disabled, isOpen) {
+    getTriggerClasses(preset, size, disabled, isOpen, part) {
         const classes = [
             'sd-dropdown-button__trigger',
             `sd-dropdown-button__trigger--${preset}`,
@@ -304,8 +316,24 @@ const SdDropdownButton = class extends BaseDropdownEvent {
         if (isOpen) {
             classes.push('sd-dropdown-button__trigger--open');
         }
+        if (part !== undefined) {
+            classes.push(`sd-dropdown-button__trigger--${part}-part`);
+        }
         return classes.join(' ');
     }
+    getTriggerStyle(config, preset) {
+        return {
+            '--sd-dropdown-button-bg': config.color,
+            '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
+            '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
+            '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
+            '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
+            '--sd-dropdown-button-accent': sdButton_config.BUTTON_FOCUS_RING_COLOR,
+            '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
+            '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
+            '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
+        };
+    }
     getMenuItemClasses(isActive, isDisabled) {
         const classes = ['sd-dropdown-button__menu-item'];
         if (isActive) {
@@ -333,25 +361,23 @@ const SdDropdownButton = class extends BaseDropdownEvent {
                     if (!item.disabled) {
                         this.itemIndex = index$1;
                     }
-                } }, item.icon && (index.h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), index.h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: item.label })));
+                } }, item.icon && (index.h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: "var(--sd-dropdown-button-menu-item-current-color)" })), index.h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(item.label) })));
         })))));
     }
+    renderChevron(size) {
+        const iconName = this.split ? 'etc' : 'caretDown';
+        return (index.h("span", { class: {
+                'sd-dropdown-button__trigger-icon': true,
+                'sd-dropdown-button__trigger-icon--open': this.isOpen && !this.split,
+            }, "aria-hidden": "true" }, index.h("sd-icon", { name: iconName, size: DROPDOWN_CHEVRON_ICON_SIZE[size], color: "var(--sd-dropdown-button-current-content)" })));
+    }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (index.h("div", { key: 'ac9063bf34834043d2c786b81fa487f004d54462', class: "sd-dropdown-button" }, index.h("button", { key: 'cff62ed70794e18627b03c22d54accab9248b235', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
-                '--sd-dropdown-button-bg': config.color,
-                '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
-                '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
-                '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
-                '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
-                '--sd-dropdown-button-accent': sdButton_config.BUTTON_FOCUS_RING_COLOR,
-                '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
-                '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
-                '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, index.h("span", { key: '8c3c382c1b23f63be23936cca44175950fd636b8', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '4b1e74dd6b5c680e07ef3b8391279ef4d9bb750d', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '1018c43a428abe211536f4f3f8069b70a7ff1845', class: {
-                'sd-dropdown-button__trigger-icon': true,
-                'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, index.h("sd-icon", { key: '64248aa427db42e8c8ef65d806befaeab0943059', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+        const triggerStyle = this.getTriggerStyle(config, preset);
+        if (this.split) {
+            return (index.h("div", { class: "sd-dropdown-button sd-dropdown-button--split" }, index.h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'label'), disabled: this.disabled, onClick: this.handleButtonClick, style: triggerStyle }, index.h("span", { class: "sd-dropdown-button__trigger-label" }, this.label)), index.h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen, 'chevron'), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), "aria-label": "dropdown toggle", onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, this.renderChevron(config.size)), this.renderDropdown(preset)));
+        }
+        return (index.h("div", { class: "sd-dropdown-button" }, index.h("button", { type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: triggerStyle }, index.h("span", { class: "sd-dropdown-button__trigger-label" }, this.label), this.renderChevron(config.size)), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
-var tooltipArrow = require('./tooltipArrow-BjSFKIUq.js');
+var index = require('./index-BGwB03Tk.js');
+var tooltipArrow = require('./tooltipArrow-COD-SNZL.js');
 
 const field = {
 	label: {
@@ -248,20 +248,20 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (index.h("div", { key: 'fa7d46fb1cdfa572c19fe5014c5f2df6579537fa', class: {
+        return (index.h("div", { key: '1cc135c77708546f23b699bf337c018f6c4d315e', 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: '92d544710c5f49f17342c2c5d9f4e499e995b3b2', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '1740f6d0c385311cf714b7e64fd7f5513f758c3e', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, 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
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, index.h("div", { key: '1364e46db78dc55b1139035296d2e6f33cb8fbb6', class: {
+                : {} }, index.h("div", { key: '1f3c5f2009a0d96b8a3544c58b96f7ecc4ddee6b', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && index.h("div", { key: '638c670ec084e51af7d9ec566c93e00a3d158eef', class: "sd-field__addon" }, addon), index.h("slot", { key: 'e1b00ee9db0a0e8dade33166dc908183304bc37f' })), 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: '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))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -432,7 +432,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return index.h("slot", { key: 'c4543ebf24c83fc67bdda0340adb00f02761b62e' });
+        return index.h("slot", { key: 'df97046860db0225724f9768428063a3390c5f6e' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -550,14 +550,14 @@ const SdTooltip = class {
         const hasLabel = this.label !== undefined && this.label !== '';
         const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
-        return (index.h(index.Fragment, { key: 'ef33f9f183820d684f2805e40134a81f7149fc16' }, index.h("div", { key: 'dd931825c55b0ee748c7ef45f15be0d6de37ad23', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (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-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '443dbbe8f0b9a66aaae9b8482a3f615d2d41e8ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '040bde0321b1fd35014db976aeaddc515d87c807', ref: el => (this.menuEl = el), class: {
+        return (index.h(index.Fragment, { key: '0ffbc5e61b4b5ab9bf1fda1c064de63c1467bb37' }, index.h("div", { key: 'c74bff7fde9c1f139435c2b37f69e7ee7492ec91', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (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-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '3a83a7d7a33fbdd720a52149b2a156ecc72c087b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: 'abb63e4db76edae3df1d16d756e20a61284db87f', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, index.h("i", { key: 'e802c09cc13ec3db29704197fa402588bf97d670', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'b698fbdba2cee74955f65ed7b04abeea8ccabee5' })), index.h("div", { key: '97e856c543a8cdb880daae9ed0e461f5fd0f2b44', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, index.h("i", { key: 'c29052cc7ed0e514ed27a7f576585d8865728cd4', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '9602237020591571cd76d3afa9e1c6383f7f421f' })), index.h("div", { key: '29091435fa3008eaf352b831eb4345ed9d6a5d86', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const SdForm = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const ghostButton = {
 	xxs: {

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

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
-var system = require('./system-VmZRYp6V.js');
+var index = require('./index-BGwB03Tk.js');
+var system = require('./system-CdAyz3ej.js');
+var sanitizeInlineHtml = require('./sanitize-inline-html-BZCCwH_U.js');
 
 const guide = {
 	button: {
@@ -187,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: '9d5ad3049230e61d1aae3cd9270dd84f89fb5b1c', class: "sd-guide", style: this.guideStyle }, index.h("sd-button", { key: 'ac55b4d96f64695a0fbfedf7bf0e451b7afdc499', 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: 'df51b29383f7449720d8700387bb44fbd4dbebba', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '265390b48b9d37e9c7f92e19ef124da3faae6590', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: 'b45c101ac8dd6e4d490661b377979226335defa2', 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: '2a803402b120509ef8b6de361f360a7b5b96e9db', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '3e591b85ac24ea1db37bdaaf130f983d70ef2f36', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
                 width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, index.h("sd-ghost-button", { key: 'd91722fedd8cd4f74e673964c90b1840ccfcd8e1', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), index.h("div", { key: 'b7bb7ffa79363939f4b6144d48732e686ec5e365', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'cfe42d9139cdae8a90ce81af3dbc7636dc56b380', name: iconName, size: 24, color: popupIconColor }), index.h("h3", { key: '9724df2304c13c36e21a6e1ef3be7d4b0f5e5454', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), index.h("ul", { key: '8f5eec181c32b7d0220963ce57e82e952094ad36', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, 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))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {
@@ -205,7 +206,7 @@ const SdGuide = class {
         return listItems;
     }
     renderLi = (message, depth) => {
-        return (index.h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, index.h("p", { innerHTML: message })));
+        return (index.h("li", { class: `sd-guide__popup__list__item sd-guide__popup__list__item--depth-${depth}` }, index.h("p", { innerHTML: sanitizeInlineHtml.sanitizeInlineHtml(message) })));
     };
 };
 SdGuide.style = sdGuideCss();

package/dist/cjs/sd-key-value-table.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
-var system = require('./system-VmZRYp6V.js');
-var component_table = require('./component.table-qOFez3z3.js');
+var index = require('./index-BGwB03Tk.js');
+var system = require('./system-CdAyz3ej.js');
+var component_table = require('./component.table-DIxmbGBT.js');
 
 const t = component_table.tableTokens.table;
 const KEY_VALUE_TABLE_LAYOUT = {

package/dist/cjs/sd-linear-progress.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 var component_progress = require('./component.progress-Bmg3vAAy.js');
-var system = require('./system-VmZRYp6V.js');
+var system = require('./system-CdAyz3ej.js');
 
 const LINEAR_PROGRESS_COLORS = {
     track: component_progress.progressTokens.progress.color.track,
@@ -49,7 +49,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (index.h(index.Host, { key: '6fb48662dc2c921237a387c748bbc529ba5ea77f', style: hostStyle }, index.h("div", { key: 'e8fa0fdf4ac3ceeaae74fff6194c1f66b9138bc7', class: 'sd-linear-progress__track' }, index.h("div", { key: '7016850214e73fc6a9079e8f54674976d0320adf', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (index.h("span", { key: '154b18f54d79ddbacf720370dc9ace94508c6667', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (index.h("span", { key: '555e41d961ad7d061ac71347e998641d104f499d', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'f90f3df3b959aee549fab33a62a85d6df6ba8410', class: 'sd-linear-progress__label' }, this.label)));
+        return (index.h(index.Host, { key: '41d89c01b35a6edba09a3ef9f848458d284d491a', style: hostStyle }, index.h("div", { key: '79d7490c934437aa0075e39aea0f352dec61eae0', class: 'sd-linear-progress__track' }, index.h("div", { key: 'd6743f9b4f5a086e11a368989fd0f52a10bdc2ef', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (index.h("span", { key: '2d013c7cdf438e069d00c6fcddfca12ff55490e6', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (index.h("span", { key: '4f473a670cab7b0d104f9c455c28e415d5863a86', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: '6581d326a1d05413587b44715613a4d878e4f658', class: 'sd-linear-progress__label' }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cw-78mnC.js');
+var index = require('./index-BGwB03Tk.js');
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -18,10 +18,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (index.h("div", { key: '08675a9dc0b1c11c42fb65a414f0fed88d03f1b0', class: {
+        return (index.h("div", { key: '99c6d9e798862f41142f246f371a357cd604aa44', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '4a10e9009d824bef1bf2f9930941931dc1fef43a', class: "sd-loading-container__backdrop" }), index.h("div", { key: '88edd1c19f5d22057e1e14f1e6bd10e23f45ec7b', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: 'b9c67678d799e429ec6cb2d3094da7bcc4cea150', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: 'ce016465e9d8b20f2121e8846bff75bbad5d7d94', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: 'b836c7d283113e57d0947a178035591521dc8ee2', class: "sd-loading-container__backdrop" }), index.h("div", { key: '02f1ae9b17eedb29f24d0170c65ef4217f38a5b5', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '3d9c1b33693e823c4c55967d00a63eff8a2a805e', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '46c060f444506a9771507b09fd0867f763a95680', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();