@sellmate/design-system 1.19.0 → 1.20.1

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

@@ -70,7 +70,7 @@ const SdCircleProgress = class {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '35b4dc433f5e2bbd02dc3422b286da179472082f', style: hostStyle }, h("svg", { key: 'de1d3e44eccf421491a1107ba234e1562917945b', 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: 'b0a54a2e155222a416a6bdcb75f4fe54d9de8270', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '6bc314b3fce758d41a3499e9d87b7158b15777a5', 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: '16ec46b178d5f2f2f5ad245703c2f4362b8df261', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c199799d2466c75f91f1bc1f20fdb7e71c64ba0e', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: 'b8dc57144fcab41a7dce8f9aff9bec4609290a8e', style: hostStyle }, h("svg", { key: '2f38f745684057e2b568da3cdbb8a940125fa920', 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: 'e829f78dddbf5fb08e23b5774fe653c0019eedfd', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '4643ac0edf25a12660791d87acebbecd8a5c2ead', 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: '1ccaad0864e44d09902201bde466b7867c51646f', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: '0e26d97267552ef75dcc30f94392cbc733fee636', class: "sd-circle-progress__label" }, this.label)));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

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

@@ -100,9 +100,9 @@ const SdConfirmModal = class {
         const type = this.resolvedType;
         const iconName = CONFIRM_MODAL_ICON_MAP[type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[type];
-        return (h("div", { key: '51fb051b436cc511aeac2f578832a267e12ef3c4', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'dd9605e312eac8b0602ec558ad5439ea3daa7aa7', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '5027ec2d03731338a9197f7b5b910d2adbf83f0e', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '8456707355cc779c169b56abc16b0949909b829e', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: 'd11cb38e749f54ce5767ba9b5cca0129df742aca', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'de653458605a9591d7c66d644a143d0f33738b28', 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: '0517e400485551ab21f0f5452af764b5ede7a76d', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '689c6d50f52e1a4c5b8f501fcc1e14f0da42fcfc', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'fc3aedaa2b6aa3b95b9c0ce1e766df69af86c82f', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '4560ad7ee0d8929221a47b6c1b00cac04c7b387a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '8689d86f85c72a9f36e94f083842fc3354d3d82c', class: `sd-confirm-modal__title ${this.titleClass ?? ''}` }, this.modalTitle), h("div", { key: '5828e937b3b1d3f34c389e73a3d953388dd30cd0', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '0f64cda9195807dbf637a463ba2bc8acc8c1ff3a', 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: 'a090330cab2dbbc99127e616f3e50420bd44b9e4', 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: 'd542a08caee30ed7eb1d22ed85a51be6e1f6855e', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '02d012e899969ee55cba43c11d9caeaaff65a348', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: 'fd50d151e515646e5bef5658a1b05b2e26b21461', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '0c2092edf0866a8b1f4f432b176d78eedd9655d6', 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: 'a665a0ea56685496adf7c306b4a940762a8a2b3a', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: sanitizeInlineHtml(msg) })))))), h("div", { key: '0ad69928a260ed78edd7606f89790e6afa6b2d76', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button", { key: '1f835e091b4d96cb6c95dbda88d93ce86828da2c', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button", { key: '8e3cb23cb7207e402543b009b49d23a50521db24', name: this.resolvedMainButton, label: this.mainButtonLabel ?? '확인', onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -186,7 +186,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 (h(Host, { key: 'f40dcf4fa7e2ee7b4023be11be2b9361ec167610', style: hostStyle }, h("div", { key: '02bab8da4e09156340e8e9badef25755b57193d5', class: "sd-loading-modal" }, h("div", { key: '776833f7f85a5587dda59fe75e36ebb4b9109c3e', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '4bb9e434a4a2d6be6dbbe2ed4e89563bf7278c65', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '5da761513fdc38e5e646f72f75072e25d5313384', class: "sd-loading-modal__button" }, h("sd-button", { key: '2bf9beb84ab4a6c1e6793db453e04b947c432d13', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '12e8bb40871556dddad6bf3e9daa1703f3a29fc3', style: hostStyle }, h("div", { key: 'b1f0282746a8a4ceabd120a1c366b836edb805c1', class: "sd-loading-modal" }, h("div", { key: '496c034608b3d31557f154f77aa7cb7c2cb9558a', class: "sd-loading-modal__content" }, this.resolvedState === 'loading' ? (this.progress !== undefined ? (h("sd-circle-progress", { value: this.progress })) : (h("sd-circle-progress", { indeterminate: true }))) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: 'e0a57ee49f6fe46680a8e2393a00014edd76d36f', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'bd0c91c279a7cd4d58a18f7bfd6e8c345ae00fcf', class: "sd-loading-modal__button" }, h("sd-button", { key: '0d03006a668333de256b2142efc9d0c374bfef45', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

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

@@ -104,9 +104,9 @@ const SdDatePicker = class {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '9e1e5cb7419027db803248a657d0d134be049637', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'fbd9adeaa08d19cac34b045aba2b3fbb8d4adc8c', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'cbd8e081f56fb2fb53854cd0937fe24e5d6d9b97', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'e7798ec50f7d22628a17a953ac87882160248de4', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'd51161c4b1eedcfd90832c9b6d049559ff5df08b', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'd6588d3991eff39eb717d4211b38d68f093aace5', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '0dc6a8074fcfa63630aab7f0b126caa9f4c7b234', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: 'ce203f70a001f9caa9071fb667d9bf58f57748ec', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'c5f875bc826fa1f899205cfefe2db57da3dd34b4', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-calendar", { key: '8626faebafac8201979e02c444279124c3261b67', elevated: true, value: this.value, selectable: this.selectable, onSdUpdate: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -649,12 +649,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '64e7a3ba5e223341336248ba31e621b4416987fd', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'b66e286c35cc14c1eb02badcaaff24b38ff0a7b3', class: "sd-input__content" }, h("slot", { key: 'dc8b900eb2b38c18b85663bc930e810be77bdbd7', name: "prefix" }), h("input", { key: '36d35464338838aaaeff6f728020241d33a493ec', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '4f30d4a59794c0692f367d41af4311e191c5427b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '247da41512f20d8e562f345b08bd5bc13486734b', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'bc95e469a741a7130b07b5e2ecbc3ce9a7d1799d', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '63661c1e1202e729bbcaedcf83d8b034a7bf2e0b', class: "sd-input__content" }, h("slot", { key: '6c17e53e77c0e6751deb664b67b7daa471bd08cc', name: "prefix" }), h("input", { key: '1572e700b110b8d98b62ef30e72a17974288473c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '728316a43a96d7859849ef522c06a405f7d668b5', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: 'ec89154a98d603db8eccc5db786d3330b33713ab', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '70c596ef0072bf369bd59e2c58d0a6f8c6fd1b11', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '8dd3e79ffa2bf731850e94b9a0752aeebf13aff6', 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;
@@ -1040,15 +1040,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 (h("sd-field", { key: 'ad212dcbaf8e19cac070e6bdfa292ca614480fbc', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'b9c403df166e2f05f815ebf3851b6517b8afbd2a', class: {
+        return (h("sd-field", { key: 'f322e07238237b4b609fbc3cd819cf2856eb3e63', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8e4e7561a8b42b4a8b2e1f9559f7409d17f32c14', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '206f45b19bf8dd56b65ff55fb65d760e36d80ba7', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'd39cadc9a83cf7a0170144b8734a90f71d7aa9d1', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '642a5ce069d0af6347ecdbbb32c67ce2d8967cf4', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'd321af0b38dc8771ca58b52d079fe440551b4efc', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '0c97309540467d56ee3415001df7a027ba581a3d', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '9462f0c7ac028c038894ad184c7cf052e366e48c', 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 && h("span", { key: '5b84c95d1e4e8e151c9c71b8ff6513185e97dbf4', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '0580882231474e80471085e7d91748943caf2f73', 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 && h("span", { key: 'fdd4f4e680fe5de55cb68c848615ec6b00f00430', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '8cdfcc46a010fb0f503b48c34290fd096403524a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'ec8826370cd9d8c6054ca6ab216de6baa62d90db', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: 'd24110a5913272b0379f36823507c3c6ea4102be', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '2bcf9b96f875322b269630f14bbec6c64d55f042', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '809fb4ae2f33c4812bf329abc7dc1a9f78e9dd81', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -1230,7 +1230,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '526fc1a73f13e5170125a570c5a1c8459931aa25', 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 }, h("div", { key: 'e3c52fccc564a2488eb9e0d9399437b76e919c6a', class: "sd-textarea__content" }, h("textarea", { key: '3253873da3b9591e64a6dfd170c8d9ccb4861599', 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 (h("sd-field", { key: '696b0aa26405687dad43ce934adbe7ec19e9b893', 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 }, h("div", { key: '69a996d757345e25ef94238f8fffa521e7b7252e', class: "sd-textarea__content" }, h("textarea", { key: 'dbfcc43cbbf3bdde147f6a784df1c122bcb70b0e', 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/esm/sd-date-range-picker-calendar.entry.js

@@ -265,7 +265,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '71f25effececd0b83d9b33201230dc615ba87a30' }, h("div", { key: 'f075474fb0be9f8e8562a013532b3cdbaadee069', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '4dfa1d65b971f7d80f0799482c8ce41522200a94', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '20149f97a5115115cc49894383ca7f989ba2b904', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: 'd46df258093b5c57d1b958efb7e52cabd4cb1eb4' }, h("div", { key: '04fc01524115d9b57462ad1eaf9281fe1c63dd84', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '91428a1dd98b7a9c534b28a9cd683f35935dfee2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '26d4f7e3391c50340e0f45f018b02d11ad7bd23b', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -17,7 +17,7 @@ const SdDivider = class {
         const hostStyle = {
             '--sd-divider-color': DIVIDER_COLORS.default,
         };
-        return (h(Host, { key: '886ca68599a925678d7c598daeff3bf653db513d', style: hostStyle }, h("hr", { key: 'e213413f041cda5d18a74f8c0225c840d92f7dac', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
+        return (h(Host, { key: 'd7adb8181071f7e6b1c2238c5512c332a0c9bafb', style: hostStyle }, h("hr", { key: '8d376fce5cced248a573ffb189931ce613ef79b7', "aria-orientation": this.vertical ? 'vertical' : 'horizontal' })));
     }
 };
 SdDivider.style = sdDividerCss();

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

@@ -214,21 +214,21 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (h("div", { key: '9edafceb24a4fcde7cfb966f421bfb73f1b07617', class: {
+        return (h("div", { key: '76a1a2f41cafb2a665415f4e6e7bd9561aacb57f', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'e5c4a8aad05afb40f3eccc492135b2b968ffc646', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'e88d62a979eaab9f6794c851813e5f56c3c5c4ac', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: 'b4219a5e3e80ead00b0cb67d6c5c8a1b25e59f57', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '91dd10be9bf9fe70615d6f4f0ee00601cab5ee4a', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: 'be69d7e48d90dda0872ffc43c2a1b4044e99ac00', class: {
+                : {} }, h("div", { key: 'd15df53ff3d76ab9f9bd5e6ffe55f98b53c1211a', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (h("div", { key: '2c631ac0f8b9001cf6344908cf8cbcdf182cc1a7', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '34a49839ee200cd59c3ff5b84caf5ded2c50f7b0', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '693f20c529e5f2ea84d381e59327392edb7b4c15' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && (h("div", { key: 'fa65e5f352e20ae9f533bdf93d95b2d2f3ec4d7b', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '5c6d67ca4a72191622d14727567b8bca0975dcee', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: 'c4f4e9392b3e6df8bba7a0f9e39bb3847ccf5931' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -398,7 +398,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return h("slot", { key: 'f20806555ad198c33a62ec938ea7b77200fa1585' });
+        return h("slot", { key: '77829bed54180a72d233738d1f82d9996ae29cae' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -560,7 +560,7 @@ const SdTooltip = class {
         const bodyHTML = this.message && this.message.length > 0
             ? this.message.map(line => `<div>${line}</div>`).join('')
             : this.slotContentHTML;
-        return (h(Fragment, { key: 'c0d000057ed61fe7b6b4d92bc0df5e0c6d42d714' }, h("div", { key: '4ae084008ddec50e912fa81efbe3adbe0428d7ea', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (h("slot", { name: "anchor" })) : hasLabel ? (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 })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: 'd5a8718b4e4556b989e5439b89296a259d99c636', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: 'e81f2704ddbc90a19c1e8dd0c4660c4b057ca895', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: 'da2904e5cc41627283ff383366548453ef892dbc' }, h("div", { key: 'e94184fa6a51524f0dc5d3ba0610a3fa63663b4f', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (h("slot", { name: "anchor" })) : hasLabel ? (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 })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '52b86274d938e67a89018839812b4d26108f0921', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '177149d153ca4659a1dc4b71cd9d98cf36e19cd9', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -568,7 +568,7 @@ const SdTooltip = class {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: '735cfb9956644542afb3b9f65aea127c37d756b2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '53bac0c98b652b580b53b206d3da77deac0eea77' })), h("div", { key: '50c55e606002225363364ca6b5238a55a25374ba', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (h("sd-ghost-button", { key: '7ab15f030aef1ecda2a3be0c08af2c7ab4992f1c', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, h("i", { key: '6412bc25156af7a4bc276bc29f46458df7ac123b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'af6b98e12d0ce7816b9888614d7f70e93c9accd6' })), h("div", { key: '4b3bdb5eda8a67374a68e2ef3dbc51d630720c08', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (h("sd-ghost-button", { key: '2bbe32da05ec4e84dba7b00d12826d9fb2492dfe', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

package/dist/esm/{sd-ghost-button_2.entry.js → sd-ghost-button_3.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CAxodB5I.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CAxodB5I.js';
 
 const ghostButton = {
 	xxs: {
@@ -112,7 +112,7 @@ const GHOST_BUTTON_DISABLED_COLORS = {
     inverse: ghostButtonTokens.ghostButton.inverse.disabled,
 };
 
-const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}.sd-ghost-button__tooltip{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%) translateY(4px);z-index:1;display:inline-flex;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease}.sd-ghost-button--with-tooltip:hover:not(.sd-ghost-button--disabled) .sd-ghost-button__tooltip,.sd-ghost-button--with-tooltip:focus-visible:not(.sd-ghost-button--disabled) .sd-ghost-button__tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}`;
+const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}.sd-ghost-button__tooltip-inner{display:inline-flex;white-space:nowrap;transform:translateX(-50%)}`;
 
 const SdGhostButton = class {
     constructor(hostRef) {
@@ -123,15 +123,16 @@ const SdGhostButton = class {
     size = 'sm';
     intent = 'default';
     ariaLabel = '';
-    tooltipLabel = '';
+    tooltipText;
     disabled = false;
+    get hostEl() { return getElement(this); }
+    isTooltipOpen = false;
     click;
     hasWarnedMissingAriaLabel = false;
     componentWillLoad() {
         this.size ??= 'sm';
         this.intent ??= 'default';
         this.ariaLabel ??= '';
-        this.tooltipLabel ??= '';
     }
     handleClick = (event) => {
         if (this.disabled) {
@@ -140,6 +141,10 @@ const SdGhostButton = class {
         }
         this.click.emit(event);
     };
+    handleMouseEnter = () => { this.isTooltipOpen = true; };
+    handleMouseLeave = () => { this.isTooltipOpen = false; };
+    handleFocus = () => { this.isTooltipOpen = true; };
+    handleBlur = () => { this.isTooltipOpen = false; };
     componentWillRender() {
         this.warnIfMissingAriaLabel();
     }
@@ -162,23 +167,271 @@ const SdGhostButton = class {
             ? GHOST_BUTTON_DISABLED_COLORS[intent]
             : GHOST_BUTTON_CONTENT_COLORS[intent];
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
-        const tooltipLabel = (this.tooltipLabel ?? '').trim();
-        const hasTooltip = tooltipLabel.length > 0;
-        return (h("button", { key: 'fafdeaa60205f0190cc592ac8fdacbf140e28d6c', class: {
+        const tooltipText = (this.tooltipText ?? '').trim();
+        const hasTooltip = tooltipText.length > 0;
+        return (h("button", { key: '59b95275f6acd737d4b0d5c2187e1d40b3a6543f', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
-                'sd-ghost-button--with-tooltip': hasTooltip,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, hasTooltip && (h("span", { key: '57425145ccc76a0bf960377cb13ba06e37195fa3', class: "sd-ghost-button__tooltip", "aria-hidden": "true" }, h("sd-tag", { key: '9d097c96d701431ac92aa7fb305c418bb570bc16', name: "square_xs_grey", label: tooltipLabel }))), h("sd-icon", { key: '4b186b2fd33c70f4b47a2c736a53e1ac37bc2ebc', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (h("sd-portal", { key: 'd8ca94b6a931208c2c56eb2dbfee843935c6b666', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: '450d5dc528ad4eeb4a2a0d2920fe4553ab3f91f8', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: 'cc25d0e2794d3d4dc418b0c0aa1a57e4b76b56e1', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: 'bf9bf8bcc779011635fd34566ec7320d76f8d16b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();
 
+const SdPortal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "sdClose", 3);
+    }
+    get hostEl() { return getElement(this); }
+    to = 'body';
+    parentRef = null;
+    offset = [0, 4];
+    viewportPadding = 0;
+    zIndex = 998;
+    open = false;
+    placement = 'bottom';
+    close;
+    container;
+    wrapper;
+    rafId;
+    isInsideClick = false;
+    closeTransitionTimer;
+    handleObservedScroll = () => this.updatePosition();
+    resizeObserver;
+    mutationObserver;
+    scrollParents = [];
+    isObserved = false;
+    handleOpenChange() {
+        this.syncPortalState();
+    }
+    componentDidLoad() {
+        this.container = this.resolveContainer();
+        this.syncPortalState();
+    }
+    componentDidRender() {
+        this.syncPortalState();
+    }
+    disconnectedCallback() {
+        if (this.closeTransitionTimer)
+            clearTimeout(this.closeTransitionTimer);
+        this.unobserveParent();
+        if (this.wrapper?.parentNode) {
+            try {
+                this.wrapper.parentNode.removeChild(this.wrapper);
+            }
+            catch {
+                // Stencil spec mock DOM can already detach the wrapper before this callback runs.
+            }
+        }
+    }
+    resolveContainer() {
+        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
+        return el instanceof HTMLElement ? el : document.body;
+    }
+    createWrapper() {
+        this.wrapper = document.createElement('div');
+        Object.assign(this.wrapper.style, {
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            zIndex: (this.zIndex ?? 998).toString(),
+            opacity: '0',
+            transition: 'opacity 0.15s ease-out',
+            boxSizing: 'border-box',
+            visibility: 'hidden',
+        });
+        this.container.appendChild(this.wrapper);
+    }
+    ensureWrapper() {
+        if (this.wrapper)
+            return;
+        this.container ||= this.resolveContainer();
+        this.createWrapper();
+        this.moveSlotContent();
+    }
+    syncPortalState() {
+        if (!this.open) {
+            if (this.wrapper) {
+                this.wrapper.style.transition = 'opacity 0.15s ease-out';
+                this.wrapper.style.opacity = '0';
+                this.wrapper.style.pointerEvents = 'none';
+                if (this.closeTransitionTimer)
+                    clearTimeout(this.closeTransitionTimer);
+                this.closeTransitionTimer = setTimeout(() => {
+                    if (this.wrapper && !this.open) {
+                        this.wrapper.style.display = 'none';
+                    }
+                }, 150);
+            }
+            this.unobserveParent();
+            return;
+        }
+        if (this.closeTransitionTimer)
+            clearTimeout(this.closeTransitionTimer);
+        this.ensureWrapper();
+        if (!this.wrapper)
+            return;
+        this.wrapper.style.display = 'block';
+        this.wrapper.style.transition = 'opacity 0.25s ease-out';
+        this.wrapper.style.opacity = '0';
+        this.wrapper.style.pointerEvents = '';
+        this.observeParent();
+        this.updatePosition();
+    }
+    moveSlotContent() {
+        if (!this.wrapper)
+            return;
+        const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
+        nodes.forEach(n => this.wrapper.appendChild(n));
+    }
+    // 위치 갱신 (scroll / resize)
+    updatePosition() {
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            if (!this.parentRef || !this.wrapper)
+                return;
+            const parentRect = this.parentRef.getBoundingClientRect();
+            const viewport = {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            };
+            const offset = this.offset ?? [0, 4];
+            const viewportPadding = Math.max(0, this.viewportPadding ?? 0);
+            const maxWidth = Math.max(viewport.width - viewportPadding * 2, 0);
+            const maxHeight = Math.max(viewport.height - viewportPadding * 2, 0);
+            this.wrapper.style.maxWidth = `${maxWidth}px`;
+            this.wrapper.style.maxHeight = `${maxHeight}px`;
+            const wrapperRect = this.wrapper.getBoundingClientRect();
+            const availableBelow = viewport.height - parentRect.bottom - offset[1] - viewportPadding;
+            const availableAbove = parentRect.top - offset[1] - viewportPadding;
+            const preferTop = (this.placement ?? 'bottom') === 'top';
+            let top;
+            let left = parentRect.left + offset[0];
+            if (preferTop) {
+                top = parentRect.top - wrapperRect.height - offset[1];
+                if (availableAbove < wrapperRect.height && availableBelow > availableAbove) {
+                    top = parentRect.bottom + offset[1];
+                }
+            }
+            else {
+                top = parentRect.bottom + offset[1];
+                if (availableBelow < wrapperRect.height && availableAbove > availableBelow) {
+                    top = parentRect.top - wrapperRect.height - offset[1];
+                }
+            }
+            const minTop = viewportPadding;
+            const maxTop = viewport.height - viewportPadding - wrapperRect.height;
+            if (maxTop < minTop) {
+                top = minTop;
+            }
+            else {
+                top = Math.min(Math.max(top, minTop), maxTop);
+            }
+            if (parentRect.left + wrapperRect.width + offset[0] > viewport.width - viewportPadding) {
+                left = parentRect.right - wrapperRect.width - offset[0];
+            }
+            const minLeft = viewportPadding;
+            const maxLeft = viewport.width - viewportPadding - wrapperRect.width;
+            if (maxLeft < minLeft) {
+                left = minLeft;
+            }
+            else {
+                left = Math.min(Math.max(left, minLeft), maxLeft);
+            }
+            this.wrapper.style.top = `${top}px`;
+            this.wrapper.style.left = `${left}px`;
+            this.wrapper.style.visibility = 'visible';
+            this.wrapper.style.opacity = '1';
+        });
+    }
+    // parentRef의 이동 / 크기변경 감지
+    observeParent() {
+        if (!this.parentRef || this.isObserved)
+            return;
+        this.observeScrollParents(this.parentRef);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.updatePosition());
+            this.resizeObserver.observe(this.parentRef);
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(() => this.updatePosition());
+            this.mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        this.isObserved = true;
+    }
+    unobserveParent() {
+        if (!this.isObserved)
+            return;
+        this.unobserveScrollParents();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.mutationObserver?.disconnect();
+        this.mutationObserver = undefined;
+        this.isObserved = false;
+    }
+    observeScrollParents(element) {
+        const nextScrollParents = this.getScrollParents(element);
+        nextScrollParents.forEach(parent => {
+            parent.addEventListener('scroll', this.handleObservedScroll, { passive: true });
+        });
+        this.scrollParents = nextScrollParents;
+    }
+    unobserveScrollParents() {
+        this.scrollParents.forEach(parent => {
+            parent.removeEventListener('scroll', this.handleObservedScroll);
+        });
+        this.scrollParents = [];
+    }
+    getScrollParents(element) {
+        const scrollParents = [];
+        let currentElement = element.parentElement;
+        while (currentElement) {
+            const { overflow, overflowX, overflowY } = getComputedStyle(currentElement);
+            const isScrollable = [overflow, overflowX, overflowY].some(value => /(auto|scroll|overlay)/.test(value));
+            if (isScrollable) {
+                scrollParents.push(currentElement);
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return scrollParents;
+    }
+    isInsideTarget(target) {
+        return !!((this.wrapper?.contains(target)) ||
+            (this.parentRef?.contains(target)));
+    }
+    // 외부 클릭 감지
+    handleMouseDown(e) {
+        this.isInsideClick = this.isInsideTarget(e.target);
+    }
+    handleWindowClick(e) {
+        if (this.isInsideClick) {
+            this.isInsideClick = false;
+            return;
+        }
+        if (this.isInsideTarget(e.target))
+            return;
+        this.close.emit();
+    }
+    render() {
+        return h("slot", { key: '911d01b26a26a4bb4d7c4a15b51755acb9615c3a' });
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+
 const tag = {
 	xs: {
 		height: "20",
@@ -386,7 +639,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'b4d86dee7290a74d73fd27a9a4133c5c0ef9b750', class: "sd-tag", style: {
+        return (h("span", { key: '3117d8d5f3d9751dc193e426dbab7e0ead9fb369', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -396,9 +649,9 @@ 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, h("span", { key: '490c703ca9ce3d0516b1da89fec18045a750d715', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '8c299f140dc5bd026ed52d3f0921939bbf69fdd5', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();
 
-export { SdGhostButton as sd_ghost_button, SdTag as sd_tag };
+export { SdGhostButton as sd_ghost_button, SdPortal as sd_portal, SdTag as sd_tag };

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

@@ -37,7 +37,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
     tdLineHeight: Number(t.body.typography.lineHeight),
 };
 
-const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
 
 const SdKeyValueTable = class {
     constructor(hostRef) {
@@ -57,7 +57,7 @@ const SdKeyValueTable = class {
     /**
      * 테이블 border-radius 제어.
      * - 'default': 전체 radius 적용
-     * - 'usetop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때)
+     * - 'useTop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때)
      * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
     radius = 'default';
@@ -235,7 +235,7 @@ const SdKeyValueTable = class {
         const maxCols = this.computeMaxCols(autoSkip);
         const tableEl = (h("table", { class: {
                 'sd-key-value-table': true,
-                'sd-key-value-table--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table--radius-useTop': this.radius === 'useTop',
                 'sd-key-value-table--radius-full': this.radius === 'full',
             }, style: cssVars }, h("colgroup", null, Array.from({ length: maxCols }, (_, i) => {
             if (i % 2 !== 0)
@@ -260,7 +260,7 @@ const SdKeyValueTable = class {
             return tableEl;
         return (h("div", { class: {
                 'sd-key-value-table__wrapper': true,
-                'sd-key-value-table__wrapper--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table__wrapper--radius-useTop': this.radius === 'useTop',
                 'sd-key-value-table__wrapper--radius-full': this.radius === 'full',
             }, style: cssVars }, tableEl, h("div", { class: "sd-key-value-table__search-panel" }, h("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
     }

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

@@ -47,7 +47,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: '26b1e15732e289a9a37a6d3dbea24aec1ab60ffd', style: hostStyle }, h("div", { key: '5162d60390656286b56f6a96fd4b3932f399412a', class: 'sd-linear-progress__track' }, h("div", { key: 'a46b815f935b243e4b7f8988af65167e3f87b554', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'bc91914addd5addb84c7684a1f862033950905fc', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'c62cdc59464823286ff42fc7e97a7a255a2beeb4', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '4c7c280885c8411329f99c3fe04f5ede8b1f0708', class: 'sd-linear-progress__label' }, this.label)));
+        return (h(Host, { key: '1e6aa9c81d3e9516a2f986d3f209df005de38f48', style: hostStyle }, h("div", { key: '06115d6245603c7ae54d892a23074f34db203592', class: 'sd-linear-progress__track' }, h("div", { key: '353549cb3c885cef86f114830599f375bfad8e50', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: '61afec063cd8f6ccaca27217fe7b599926245192', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'fec238b0a6c73e06db3e53c019319a21b62e2836', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '668f63765b78c1047e3b850f3a17d6b2a1b9bfd4', class: 'sd-linear-progress__label' }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();