@sellmate/design-system 1.0.45 → 1.0.47

package/dist/esm/sd-number-input.entry.js

@@ -0,0 +1,277 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+import { n as nanoid } from './index-CCwNgVmC.js';
+
+const sdNumberInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}sd-number-input .sd-number-input{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border-radius:4px;color:#333333;font-size:12px;line-height:20px;position:relative}sd-number-input .sd-number-input .sd-number-input__input{display:block;width:100%;height:20px;line-height:20px;border:none;outline:none;background:transparent;font-size:inherit;color:#333333;margin-left:4px;margin-right:4px;padding-block:0;padding-inline:0;text-align:right}sd-number-input .sd-number-input .sd-number-input__input[disabled]{cursor:not-allowed;color:#888888}sd-number-input .sd-number-input .sd-number-input__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#AAAAAA}sd-number-input .sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}sd-number-input .sd-number-input .sd-number-input__buttons{padding:4px;display:flex;justify-content:space-between;align-items:center;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button{width:20px;height:20px;border:none;border-radius:2px;background-color:#EFF6FF;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color 0.2s ease}sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled){background-color:#E6F1FF}sd-number-input .sd-number-input .sd-number-input__button:disabled{background-color:#EEEEEE;cursor:not-allowed}sd-number-input .sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}sd-number-input .sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}sd-number-input .sd-number-input .sd-number-input__label{margin-bottom:8px;font-weight:500;color:#333333}sd-number-input:focus-within .sd-number-input__buttons{opacity:1;pointer-events:auto}sd-number-input:focus-within .sd-number-input{border-color:#0075FF;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}`;
+
+const SdNumberInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate");
+        this.focus = createEvent(this, "sdFocus");
+        this.blur = createEvent(this, "sdBlur");
+    }
+    get el() { return getElement(this); }
+    min = Number.NEGATIVE_INFINITY;
+    max = Number.POSITIVE_INFINITY;
+    step = 1;
+    useButton = false;
+    useDecimal = false;
+    value = null;
+    label;
+    addonLabel = '';
+    placeholder = '입력해 주세요.';
+    disabled = false;
+    width;
+    rules = [];
+    autoFocus = false;
+    status;
+    hint = '';
+    errorMessage = '';
+    inputClass = '';
+    readonly = false;
+    inputStyle = {};
+    error = false;
+    focused = false;
+    hovered = false;
+    internalValue = null;
+    displayValue = '';
+    nativeEl = undefined;
+    formField;
+    name = nanoid();
+    update;
+    focus;
+    blur;
+    formatWithCommas(value) {
+        if (value === null || value === undefined)
+            return '';
+        const isNegative = value < 0;
+        const absValue = Math.abs(value);
+        const [intPart, decPart] = absValue.toString().split('.');
+        const formatted = (+intPart).toLocaleString();
+        const result = isNegative ? '-' + formatted : formatted;
+        return decPart ? result + '.' + decPart : String(result);
+    }
+    parseInput(input) {
+        if (!input || input.trim() === '')
+            return null;
+        const cleaned = input.replace(/,/g, '').trim();
+        // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n
+        if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
+            return null;
+        }
+        const parsed = parseFloat(cleaned);
+        if (isNaN(parsed))
+            return null;
+        // 소수점 사용 하지 않는데 . 이 있는 경우
+        if (!this.useDecimal && cleaned.includes('.')) {
+            return null;
+        }
+        return parsed;
+    }
+    clampMinMax(value) {
+        return Math.min(Math.max(value, this.min), this.max);
+    }
+    updateDisplay() {
+        this.displayValue = this.formatWithCommas(this.internalValue);
+    }
+    isIncrementDisabled() {
+        if (this.disabled || this.readonly)
+            return true;
+        if (this.internalValue !== null) {
+            return this.internalValue >= this.max;
+        }
+        return false;
+    }
+    isDecrementDisabled() {
+        if (this.disabled || this.readonly)
+            return true;
+        if (this.internalValue !== null) {
+            return this.internalValue <= this.min;
+        }
+        return false;
+    }
+    valueChanged(newValue) {
+        if (newValue === null || newValue === '') {
+            this.internalValue = null;
+        }
+        else {
+            const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;
+            if (parsed !== null) {
+                this.internalValue = this.clampMinMax(parsed);
+            }
+        }
+        this.updateDisplay();
+    }
+    internalValueChanged(newValue) {
+        this.updateDisplay();
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.update?.emit(newValue);
+        }
+    }
+    async sdValidate() {
+        this.formField?.sdValidate();
+    }
+    async sdReset() {
+        this.formField?.sdReset();
+    }
+    async sdResetValidate() {
+        this.formField?.sdResetValidation();
+    }
+    async sdFocus() {
+        this.formField?.sdFocus();
+    }
+    componentWillLoad() {
+        if (this.value !== null && this.value !== undefined) {
+            const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;
+            if (parsed !== null) {
+                this.internalValue = this.clampMinMax(parsed);
+            }
+        }
+        this.updateDisplay();
+    }
+    // TODO: 현재 숫자를 크게 넣어서 숫자e+21등의 형식으로 변환되면 값이 바뀌지않음 수정 필요
+    handleInput = (event) => {
+        const target = event.target;
+        const inputValue = target.value;
+        if (inputValue === '') {
+            this.internalValue = null;
+            this.displayValue = '';
+            return;
+        }
+        const commasRemoved = inputValue.replace(/,/g, '');
+        // 만약에 소수점 (.) 이 여러개 일 경우
+        const decimalCount = (commasRemoved.match(/\./g) || []).length;
+        if (decimalCount > 1) {
+            target.value = this.displayValue;
+            return;
+        }
+        // 가능: "-", ".", "-." (단순 기호만 있는 경우)
+        if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {
+            target.value = commasRemoved;
+            return;
+        }
+        // 숫자 뒤에 . 이 있는 경우 (예: "1000.") -> 콤마 포맷 적용 + . 유지
+        if (commasRemoved.endsWith('.') && decimalCount === 1) {
+            const numberPart = commasRemoved.slice(0, -1);
+            const parsed = this.parseInput(numberPart);
+            if (parsed !== null) {
+                const formatted = this.formatWithCommas(parsed);
+                target.value = formatted + '.';
+                return;
+            }
+        }
+        const parsed = this.parseInput(commasRemoved);
+        if (parsed !== null) {
+            if (parsed < this.min) {
+                target.value = this.displayValue;
+                return;
+            }
+            if (parsed > this.max) {
+                target.value = this.displayValue;
+                return;
+            }
+            this.internalValue = parsed;
+            this.displayValue = this.formatWithCommas(parsed);
+            target.value = this.displayValue;
+        }
+        else {
+            target.value = this.displayValue;
+        }
+    };
+    handleFocus = (event) => {
+        this.focused = true;
+        this.focus?.emit(event);
+    };
+    handleBlur = async (event) => {
+        this.updateDisplay();
+        if (this.nativeEl) {
+            this.nativeEl.value = this.displayValue;
+        }
+        if (this.rules && this.rules.length > 0) {
+            await this.formField?.sdValidate();
+        }
+        this.focused = false;
+        this.blur?.emit(event);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.handleIncrement();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.handleDecrement();
+        }
+    };
+    handleIncrement = () => {
+        if (this.isIncrementDisabled())
+            return;
+        const currentVal = this.internalValue ?? this.min ?? 0;
+        let nextVal = currentVal + this.step;
+        if (nextVal > this.max) {
+            nextVal = this.max;
+        }
+        if (nextVal === currentVal)
+            return;
+        this.internalValue = nextVal;
+    };
+    handleDecrement = () => {
+        if (this.isDecrementDisabled())
+            return;
+        const currentVal = this.internalValue ?? this.min ?? 0;
+        let nextVal = currentVal - this.step;
+        if (nextVal < this.min) {
+            nextVal = this.min;
+        }
+        if (nextVal === currentVal)
+            return;
+        this.internalValue = nextVal;
+    };
+    async sdGetNativeElement() {
+        return this.nativeEl || null;
+    }
+    getInputStatus() {
+        if (this.disabled)
+            return 'sd-number-input--disabled';
+        if (this.hovered)
+            return 'sd-number-input--hovered';
+        if (this.status)
+            return `sd-number-input--${this.status}`;
+        if (this.error)
+            return 'sd-number-input--error';
+        return '';
+    }
+    render() {
+        const inputWidth = this.width
+            ? {
+                '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
+            }
+            : {};
+        const inputStyles = {
+            textAlign: this.useButton ? 'center' : 'right',
+        };
+        return (h("sd-field", { key: '6951d11c493d35757c7fae5f9b22314798aa049f', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'adae8f831085b29df56a22fbe1d8420f5b6f3a68', class: {
+                'sd-number-input': true,
+                [this.getInputStatus()]: true,
+                'sd-number-input--with-buttons': this.useButton,
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'ab50a454f491b3c15161ea7a78a275bd840a3510', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${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, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '5f750d199e684fb077f6de49a07c6040eb3b7d44', class: "sd-number-input__buttons" }, h("button", { key: 'a07229ded6d8d7a08b2c0689b49e571b83d54324', type: "button", class: {
+                'sd-number-input__button': true,
+                'sd-number-input__button--decrement': true,
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '7dc6cbe609c39deecbdbf639d820679f4a635acc', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '200e7811481d2cdbb598622626b0777cdb2d471a', type: "button", class: {
+                'sd-number-input__button': true,
+                'sd-number-input__button--increment': true,
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '3b94c87f4596e18b77cc31f54e779160b422562f', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
+    }; }
+};
+SdNumberInput.style = sdNumberInputCss();
+
+export { SdNumberInput as sd_number_input };

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

@@ -54,14 +54,14 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'f367ea2ada0fda7c28c943bd7bd48785b1810999' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'afdb58bfdf25af2adc45a7b81221c1859b517a5a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: '38757707dd8c055674edbc2381409f5fd8712c8d', class: {
+        return (h(Fragment, { key: 'fff237ce8170b96e2df5ee6a0ca41788faaf7a8d' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'ebe20947b2b40bbc1f52830f4cd87a8c5caf560d', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: 'c4d3b775caf8f3894f9dfb01940415efee240a6f', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: '333bae4cb23470121d63d4d8b34a1d2b15837e7d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '617781bb6fc8957576eb149471fd8bf0f44ca552' })), h("div", { key: '8c57d49782edd344c8c2c0b9bf44fff8ec154159', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'a06b93124684cb96910ffa2603cf7410a01d6381', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '24691930b8ae03a3c92ed8e74dae708b5e64f03b', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'd73cd4cc978711857c4c946dd2a1c1b64bb5feb6', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'cda218024d04b03fc2931afa99f0127bc7a9c4c5', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '3f41ebce27fd4bab823370d6bbe25b5caed9d5e1', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, h("i", { key: 'eec87654cb0106ae923d3066bebb7c8f2b45fc9d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '65e6ec07ad22a9af4cf8a55364dd150367e6014f' })), h("div", { key: '622d4cb7f8da1156282d7f4cfdbaedf252ad5ce5', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '57a0b7f7a59b33301f4f98a94bee93cf3417b1ca', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '51687eca637e52d3a3a0bc1b3ff3a8bc3ff4cedc', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'b523cb228acaff8f09169bffcaac48e6bd722336', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'e40870c25bf20cd4f6e9d94fd3eb8bc1966a301f', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '149b7ef2e71c2dbb3d20e72c69db0131e657d811', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -0,0 +1,237 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+
+const SdPortal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "sdClose");
+    }
+    get hostEl() { return getElement(this); }
+    to = 'body';
+    parentRef = null;
+    offset = [0, 4];
+    viewportPadding = 0;
+    zIndex = 9999;
+    open = false;
+    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: 'absolute',
+            top: '0',
+            left: '0',
+            zIndex: (this.zIndex ?? 9999).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)
+            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;
+            let top = parentRect.bottom + window.scrollY + offset[1];
+            let left = parentRect.left + window.scrollX + offset[0];
+            if (availableBelow < wrapperRect.height && availableAbove > availableBelow) {
+                top = parentRect.top + window.scrollY - wrapperRect.height - offset[1];
+            }
+            const minTop = window.scrollY + viewportPadding;
+            const maxTop = window.scrollY + 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 + window.scrollX - wrapperRect.width - offset[0];
+            }
+            const minLeft = window.scrollX + viewportPadding;
+            const maxLeft = window.scrollX + 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;
+    }
+    // 외부 클릭 감지
+    handleMouseDown(e) {
+        this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target));
+    }
+    handleWindowClick(e) {
+        if (this.isInsideClick) {
+            this.isInsideClick = false;
+            return;
+        }
+        if (this.wrapper?.contains(e.target))
+            return;
+        this.close.emit();
+    }
+    render() {
+        return h("slot", { key: '4f303830ccd316e27880d300a953cf7fe5fe5e36' });
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+
+export { SdPortal as sd_portal };

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

@@ -39,10 +39,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: 'b97a1ba0ad800ada8a2e87aab6108a77053a3ed5', style: {
+        return (h("div", { key: 'c2151eaee443634267c305786ccdaf6416fe394d', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '6a182e4ade2d9c361a85d3fda62f08f62f4722a3', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'aa56564899ccecead394dc3387c34702d5500b34', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/esm/sd-radio-group.entry.js

@@ -19,16 +19,18 @@ const SdRadioGroup = class {
     handleRadioChange = (optionValue) => {
         if (this.disabled)
             return;
-        this.value = optionValue;
-        this.change?.emit(optionValue);
+        const matched = this.options.find(o => String(o.value) === String(optionValue));
+        const resolved = matched ? matched.value : optionValue;
+        this.value = resolved;
+        this.change?.emit(resolved);
     };
     getGroupClasses() {
         const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: 'b749c9d5cba0a5ed6ca041d56512301f24509234', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
-            return (h("sd-radio", { key: `radio-${option.value}`, val: option.value, value: this.value, label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
+        return (h("div", { key: '82979426bafc24b48858588ad186dfe069616883', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+            return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }
     static get watchers() { return {

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

@@ -0,0 +1,36 @@
+import { r as registerInstance, c as createEvent, h } from './index-B8tGP77V.js';
+
+const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content}sd-radio .sd-radio{cursor:pointer;height:20px;display:inline-flex;align-items:center}sd-radio .sd-radio label{display:inline-flex;width:fit-content;align-items:center;gap:8px;cursor:pointer}sd-radio .sd-radio label input{display:inline-block;position:relative;appearance:none;margin:0;width:16px;height:16px;border:1px solid #888888;border-radius:50%;accent-color:#0075FF;background-color:white;cursor:pointer}sd-radio .sd-radio label input:checked{border-color:#0075FF;background-color:white}sd-radio .sd-radio label input:checked::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;border-radius:50%;background-color:#0075FF}sd-radio .sd-radio label input:disabled{border-color:#CCCCCC;background-color:#EEEEEE}sd-radio .sd-radio label input:disabled:checked::before{background-color:#CCCCCC}sd-radio .sd-radio label input:not(:disabled):hover{border-color:#0075FF;background-color:#D9EAFF}sd-radio .sd-radio--disabled{cursor:not-allowed !important}sd-radio .sd-radio--disabled label{cursor:not-allowed !important}sd-radio .sd-radio--disabled label input{cursor:not-allowed !important}`;
+
+const SdRadio = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate");
+    }
+    value;
+    disabled = false;
+    val;
+    label;
+    update;
+    getRadioClasses() {
+        const isSelected = String(this.val) === String(this.value);
+        const classes = ['sd-radio', isSelected ? 'sd-radio--selected' : 'sd-radio--unselected'];
+        if (this.disabled) {
+            classes.push('sd-radio--disabled');
+        }
+        return classes.join(' ');
+    }
+    handleRadioChange() {
+        if (this.disabled)
+            return;
+        this.value = this.val;
+        this.update.emit(this.value);
+    }
+    render() {
+        const isSelected = String(this.val) === String(this.value);
+        return (h("div", { key: 'e9d7875b19c108505e7dfd455432102c8035097f', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: 'cc0aa88287000b77c2329bba2371e9e4404f8203', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (h("span", { key: 'b2a371ef8bc4ccc57ffbbc6acc22bf4b9c391fc1', class: "sd-radio-group__label" }, this.label || String(this.val))))));
+    }
+};
+SdRadio.style = sdRadioCss();
+
+export { SdRadio as sd_radio };