@sellmate/design-system 1.0.15 → 1.0.17

package/dist/esm/{sd-button_17.entry.js → sd-button_21.entry.js}

@@ -1,7 +1,8 @@
-import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment, d as readTask } from './index-DqSa0XJ6.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment, d as readTask } from './index-BNCQkS1w.js';
 import { r as resolveColor } from './resolveColor-DcGvp3RM.js';
-import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './select-keyboard-navigation-C2JaR3A6.js';
-import { T as TooltipArrow } from './tooltipArrow-BZ2GZRbH.js';
+import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
+import { n as nanoid, B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './select-keyboard-navigation-D8-D-mJX.js';
+import { T as TooltipArrow } from './tooltipArrow-DSxHqrjN.js';
 
 const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:1px solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
 
@@ -14,6 +15,7 @@ const ICON_SIZES = {
 const SdButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.click = createEvent(this, "sdClick");
     }
     get el() { return getElement(this); }
     variant = 'primary';
@@ -27,7 +29,14 @@ const SdButton = class {
     iconSize;
     iconRight;
     noHover = false;
-    class = '';
+    sdClass = '';
+    click;
+    handleClick = (event) => {
+        if (this.disabled) {
+            return;
+        }
+        this.click.emit(event);
+    };
     getButtonClasses() {
         const classes = ['sd-button'];
         classes.push(`sd-button--${this.variant}`);
@@ -48,7 +57,7 @@ const SdButton = class {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor(this.color);
-        return (h("button", { key: '9b92f98528d06453492eab68bb6137bcaefbf656', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor } }, h("div", { key: 'a7dae76ec9112b95c2ee765cb2f9b0b4fe5f705a', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '71784bfcb2d08c77305a70311192dfc2c059ff0a', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'bc4b7dec430602765e98fa484d397b141686d8e7', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '26744c6ace43cbbfc9758a8fdf0174b49f24cd2c', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
+        return (h("button", { key: '9ec771aafd98f10d37d2cb2f5e77c1a2a4e78f1f', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '0f58e79c1c12bf071ff839fdf3db7ddc09c71a67', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '6e4135d9c5315e1504ce6ae617f7eebe1f24b2d9', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: '6dbf55c9fbb992ddd85fec51777679c4fa03f67d', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '318d664ac5a689560b9aaa5ba43e2c5abb5f17ae', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
 };
 SdButton.style = sdButtonCss();
@@ -131,11 +140,247 @@ const SdCheckbox = class {
         return (h("label", { key: 'b4f1e82e461cfc649a1bc5414fb55bcd8ea9c87d', "aria-label": this.label || 'checkbox', class: this.checkboxClasses }, h("input", { key: 'bb6f1d911ccc9a62c0149bb9e65bbf73ac86fc9b', type: "checkbox", value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.label || 'checkbox' }), h("div", { key: '2598f80d9028b306f04898544f94af2a06604093', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: 12, color: this.disabled ? '#888888' : 'white' })) : null), this.label && h("span", { key: 'd07198f3d0796189988d030db5b882911d80c6bf', class: "sd-checkbox__label" }, this.label)));
     }
     static get watchers() { return {
-        "value": ["watchValueHandler"]
+        "value": [{
+                "watchValueHandler": 0
+            }]
     }; }
 };
 SdCheckbox.style = sdCheckboxCss();
 
+const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#cccccc;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#d9eaff}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#d9eaff}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075ff;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #e1e1e1 !important;border-radius:14px}`;
+
+const SdDateBox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.click = createEvent(this, "sdClick");
+        this.mouseOver = createEvent(this, "sdMouseOver");
+    }
+    date = null;
+    disabled = false;
+    selected = false;
+    isStartDate = false;
+    isEndDate = false;
+    isToday = false;
+    inRange = false;
+    type = '';
+    click;
+    mouseOver;
+    handleClickDate() {
+        if (this.disabled || !this.date)
+            return;
+        if (typeof this.date === 'string')
+            return;
+        this.click?.emit(this.date);
+    }
+    handleHoverDate() {
+        if (typeof this.date === 'string')
+            return;
+        this.mouseOver?.emit(this.date);
+    }
+    render() {
+        return (h("div", { key: '8b5d369f26776aadd97b40aa52b96ec143b0689e', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+                'sd-date-box': true,
+                'sd-hoverable': !this.disabled || !this.selected || this.type === '',
+                'sd-date-box--disabled': this.disabled,
+                'sd-date-box--selected': this.selected,
+                'sd-date-box--today': this.isToday,
+                'sd-date-box--start-date': this.isStartDate,
+                'sd-date-box--end-date': this.isEndDate,
+                'sd-date-box--in-range': this.inRange,
+                'sd-date-box--type-start': this.type === 'start',
+                'sd-date-box--type-end': this.type === 'end',
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: '566df713adddf344588ce8f156a07e9e96ac6ae5', class: "sd-date-box__content" }, h("div", { key: '16ac9ecfdb4cea3c8573cfc5a5c7940123660dd5', class: "sd-date-box__label" }, this.date))));
+    }
+};
+SdDateBox.style = sdDateBoxCss();
+
+const addDays = (inputDate, days) => {
+    const [year, month, day] = inputDate.split('-').map(Number);
+    const date = new Date(year, month - 1, day); // month는 0부터 시작하므로 -1
+    // 날짜 계산
+    date.setDate(date.getDate() + days);
+    // yyyy-mm-dd 형식으로 변환
+    const resultYear = date.getFullYear();
+    const resultMonth = String(date.getMonth() + 1).padStart(2, '0');
+    const resultDay = String(date.getDate()).padStart(2, '0');
+    return `${resultYear}-${resultMonth}-${resultDay}`;
+};
+
+const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-field__control.sc-sd-date-range-picker{min-width:210px}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#d8d8d8}`;
+
+const SdDateRangePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate");
+    }
+    get el() { return getElement(this); }
+    value = ['', ''];
+    label;
+    selectable;
+    maxRange;
+    disabled = false;
+    placeholder = '';
+    isOpen = false;
+    dateRange = this.value;
+    hoverDate = '';
+    prevYear = Number(this.dateRange[0].split('-')[0]);
+    prevMonth = Number(this.dateRange[0].split('-')[1]);
+    update;
+    inputEl;
+    dateUtil = useDatePicker();
+    tempDateRange = ['', ''];
+    componentWillLoad() {
+        this.syncFromValue(this.value);
+    }
+    onValueChange(newValue) {
+        this.dateRange = [...newValue];
+    }
+    syncFromValue(value) {
+        this.dateRange = [...value];
+        this.resetCalendarByDateRange(value);
+    }
+    /* ----------------------------------
+     * Calendar View Logic
+     * ---------------------------------- */
+    resetCalendarByDateRange(range) {
+        // this.dateRange = this.value;
+        const start = range[0] || today;
+        const end = range[1] || start;
+        const [startYear, startMonth] = start.split('-').map(Number);
+        const [todayYear, todayMonth] = today.split('-').map(Number);
+        if (end <= today) {
+            // A. 완전 과거 검색(당월 포함X): 좌측 = 시작월 / 우측 = 종료월
+            this.prevYear = startYear;
+            this.prevMonth = startMonth;
+        }
+        else if (start < today && end > today) {
+            // B. 과거~미래 걸침(당월 포함O): 좌측 = 오늘의 달
+            this.prevYear = todayYear;
+            this.prevMonth = todayMonth;
+        }
+        else {
+            // C. 완전 미래 검색(당월 포함X): 좌측 = 시작월
+            this.prevYear = startYear;
+            this.prevMonth = startMonth;
+        }
+    }
+    get nextYear() {
+        return this.prevMonth === 12 ? this.prevYear + 1 : this.prevYear;
+    }
+    get nextMonth() {
+        return this.prevMonth === 12 ? 1 : this.prevMonth + 1;
+    }
+    get prevCalendar() {
+        return this.dateUtil.createCalendar(this.prevYear, this.prevMonth);
+    }
+    get nextCalendar() {
+        return this.dateUtil.createCalendar(this.nextYear, this.nextMonth);
+    }
+    setPrevYear(year) {
+        this.prevYear = year;
+    }
+    setPrevMonth(month) {
+        this.prevMonth = month;
+    }
+    updateYearMonth(type) {
+        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.prevYear, this.prevMonth, type);
+        this.setPrevYear(newYear);
+        this.setPrevMonth(newMonth);
+    }
+    setHoverDate(date) {
+        this.hoverDate = date;
+    }
+    setDateRange(dateRange) {
+        this.dateRange = dateRange;
+    }
+    /* ----------------------------------
+     * UI Helpers
+     * ---------------------------------- */
+    formatDate(index, day) {
+        return this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, day);
+    }
+    getDateBoxType(date) {
+        const [start, end] = this.dateRange;
+        if (date === start)
+            return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';
+        if (date === end)
+            return 'end';
+        return '';
+    }
+    isDateInRange(date) {
+        const [start, end] = this.dateRange;
+        // 1. 날짜 범위가 완전히 선택된 경우
+        if (start && end) {
+            return date >= start && date <= end;
+        }
+        // 2. hover 상태의 날짜 범위를 확인
+        if (!this.hoverDate || !start || end) {
+            return false;
+        }
+        // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산
+        const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];
+        return date >= from && date <= to;
+    }
+    isDisabledDate(date) {
+        const [start, end] = this.dateRange;
+        if (this.maxRange && start && !end) {
+            const minDate = addDays(start, -this.maxRange);
+            const maxDate = addDays(start, this.maxRange);
+            return !(minDate <= date && date <= maxDate);
+        }
+        if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {
+            return false;
+        }
+        return !(date >= this.selectable[0] && date <= this.selectable[1]);
+    }
+    /* ----------------------------------
+     * Interaction
+     * ---------------------------------- */
+    openMenu() {
+        if (this.disabled)
+            return;
+        this.tempDateRange = [...this.dateRange];
+        this.resetCalendarByDateRange(this.dateRange);
+        this.isOpen = true;
+    }
+    closeMenu = () => {
+        if (!this.dateRange[0] || !this.dateRange[1]) {
+            this.dateRange = [...this.tempDateRange];
+        }
+        this.isOpen = false;
+    };
+    handleDateClick(index, day) {
+        this.setHoverDate('');
+        const selectedDate = this.formatDate(index, day);
+        if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {
+            this.setDateRange([selectedDate, '']);
+            return; // 아직 완료 아님
+        }
+        const newRange = [this.dateRange[0], selectedDate];
+        this.setDateRange(newRange);
+        this.value = newRange;
+        this.update.emit?.(newRange);
+    }
+    handleDateHover(index, day) {
+        const hoverDate = this.formatDate(index, day);
+        this.setHoverDate(hoverDate);
+    }
+    render() {
+        return (h("div", { key: '96cd4e99ae976517e7b24c5ff3046af976adc5cb', class: {
+                'sd-date-range-picker': true,
+                'sd-date-range-picker--disabled': this.disabled,
+            } }, h("sd-input", { key: 'a84838a1a84d990b289f0b753ccf3e2f45da4770', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'd926c672dcf457a68ebe644b32c90a03ba29b175', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0af519c7ac2ade00972e23b9ecb0344989d87f51', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'd9109e573215092c6b386ae27ac7377c4347df4c', class: "sd-date-range-picker__menu" }, h("div", { key: 'ca4743a26ed0571bc3b63218a32a113e50dbd81a', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: '6f0fe1ede6d171e749a241fbeec32056250709b9', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '821526a069a845f271b0e5db607f747efe4e610c', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: 'e9402009c8b034953d7ff4be5a4eea64d7fed21d', class: "header-label" }, this.prevYear), h("button", { key: 'b752631ab64e32a4a39c13898cc3db5e25897c4b', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '62c6e0004ff1a0d8f260e11b9d17ea7ccca942ee', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3a05a7e02664be8d9dfb85d0bada03a2d352af12', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
+            : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+SdDateRangePicker.style = sdDateRangePickerCss();
+
 const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;margin-right:12px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__required-icon{margin-right:4px}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:12px;line-height:20px;color:#333333;white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:2px}sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label{margin-right:0;display:flex;align-items:center;justify-content:center;padding:3px 12px;border:1px solid #cccccc;border-right:none;border-radius:4px 0 0 4px;border-color:#aaaaaa;background-color:#f6f6f6}sd-field .sd-field__wrapper{width:100%;height:28px;display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:#333333;cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;width:100%;height:100%;display:flex;flex:1;border:1px solid #aaaaaa;border-radius:4px;background:white}sd-field .sd-field__wrapper .sd-field__control--label-inside{border-top-left-radius:0px;border-bottom-left-radius:0px}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid #fb4444 !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid #0075ff !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:#fb4444;font-size:12px;line-height:20px;margin-top:4px}`;
 
 const FORM_PARENT_TAGS = [
@@ -144,6 +389,7 @@ const FORM_PARENT_TAGS = [
     'sd-select-multiple-group',
     'sd-input',
     'sd-textarea',
+    'sd-number-input',
 ];
 const SdField = class {
     constructor(hostRef) {
@@ -255,15 +501,15 @@ const SdField = class {
         }
     }
     render() {
-        return (h("div", { key: 'd37aff590a1721b0dfe06698566721534b81b9cb', class: {
+        return (h("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: 'e10b6410261ed2589c7c6a691debcdb7fda696af', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '398930ec704a709af85a30b9fe5c03acaf014959', class: {
+            } }, h("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: 'b4fc8cf7d8fefc437e6201ad1926c1583a96bdf1' }))), this.errorMsg && h("div", { key: '0fde078aeaa157f0d9e4760324cd4b89b12d5656', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && h("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -1360,7 +1606,7 @@ const date = {
     24: Date24,
 };
 
-var Date = /*#__PURE__*/Object.freeze({
+var Date$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   date: date
 });
@@ -2368,7 +2614,7 @@ const Icons = {
     ...Close,
     ...Copy,
     ...Dashboard,
-    ...Date,
+    ...Date$1,
     ...Delete,
     ...Download,
     ...Drag,
@@ -2443,18 +2689,6 @@ const SdIcon = class {
 };
 SdIcon.style = sdIconCss();
 
-/* @ts-self-types="./index.d.ts" */
-let urlAlphabet =
-  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
-let nanoid = (size = 21) => {
-  let id = '';
-  let i = size | 0;
-  while (i--) {
-    id += urlAlphabet[(Math.random() * 64) | 0];
-  }
-  return id
-};
-
 const sdInputCss = () => `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-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{width:304px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-picker__menu .sd-date-picker__header{display:flex;flex-flow:row nowrap;align-items:center;gap:20px;font-size:14px;padding:0 5px;height:24px;line-height:24px}.sd-date-picker__menu .sd-date-picker__header .year-nav,.sd-date-picker__menu .sd-date-picker__header .month-nav{display:flex;flex-flow:row nowrap;align-items:center;gap:12px}.sd-date-picker__menu .sd-date-picker__header .year-nav button,.sd-date-picker__menu .sd-date-picker__header .month-nav button{background:none;border:none;cursor:pointer;margin:0;padding:0}.sd-date-picker__menu .sd-date-picker__header .year-nav__current{width:40px;text-align:center}.sd-date-picker__menu .sd-date-picker__header .month-nav__current{width:100px;text-align:center}.sd-date-picker__menu .sd-date-picker__days{margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px;padding:0 5px}.sd-date-picker__menu .sd-date-picker__days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-picker__menu .sd-date-picker__body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#d8d8d8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:#333333;font-size:12px;line-height:20px;padding:0 8px}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:#888888}sd-input .sd-input__content .sd-input__native::placeholder{color:#aaaaaa}`;
 
 const SdInput = class {
@@ -2554,8 +2788,12 @@ const SdInput = class {
             } })))));
     }
     static get watchers() { return {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
     }; }
 };
 SdInput.style = sdInputCss();
@@ -2576,6 +2814,318 @@ const SdLoadingSpinner = class {
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
 
+const sdModalCardCss = () => `sd-modal-card{display:block}sd-modal-card .sd-modal-card{position:relative;padding:40px 32px;border-radius:8px;box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:white}sd-modal-card .sd-modal-card__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-modal-card .sd-modal-card sd-icon.sd-modal-card__icon{display:block;width:32px;height:32px;margin:0 auto 12px auto}sd-modal-card .sd-modal-card__title{color:var(--point-color);font-size:18px;font-weight:700;line-height:30px;text-align:center;margin:0 0 20px 0}sd-modal-card .sd-modal-card__message{color:#222222;font-weight:400;font-size:12px;line-height:22px;text-align:center;margin:0}sd-modal-card .sd-modal-card__button-container{display:flex;margin:32px auto 0 auto;justify-content:center;align-items:center;gap:8px}sd-modal-card .sd-modal-card__button-container.flex-column{flex-direction:column}sd-modal-card .sd-modal-card__button-container button.sd-modal-card__button{width:89px}`;
+
+const SdModalCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "sdClose");
+        this.confirm = createEvent(this, "sdConfirm");
+    }
+    type = 'info';
+    system = 'normal';
+    useCloseButton = true;
+    modalTitle = 'normal';
+    buttonFlexDirection = 'row';
+    buttonProps;
+    message = [];
+    sdClass = '';
+    close;
+    confirm;
+    get pointColor() {
+        if (this.type !== 'normal') {
+            return 'grey_95';
+        }
+        switch (this.system) {
+            case 'positive':
+                return resolveColor('brilliantblue_75');
+            case 'negative':
+                return resolveColor('red_75');
+            default:
+                return resolveColor('grey_95');
+        }
+    }
+    get getModalClass() {
+        let modalClass = `sd-modal-card ${this.sdClass}`;
+        modalClass += ' ' + `sd-modal-card-${this.system}`;
+        return modalClass;
+    }
+    render() {
+        return (h("div", { key: '0390932a29db512f09a47fbb030b1140410b6a73', class: this.getModalClass, style: { '--point-color': this.pointColor } }, this.useCloseButton && (h("sd-icon", { key: '338844b48a075507352a72a6f8784d912e1f51a0', class: "sd-modal-card__close-button", name: "close", size: "20", color: "grey_65", onClick: () => this.close.emit() })), this.type !== 'normal' && (h("sd-icon", { key: '5209a86ad65c6f255a37691897940d50b15d59e8', class: "sd-modal-card__icon", name: this.type === 'info' ? 'notificationOutline' : 'warningOutline', size: "32", color: this.type === 'info' ? 'brilliantblue_75' : 'red_75' })), h("h2", { key: '5586e88dd9882f89ccd3aff047435c7dc821cebc', class: "sd-modal-card__title" }, this.modalTitle), h("slot", { key: '0f12630ca6434885e4efc0810ae552dc0f0433b5' }, h("div", { key: '04af07e88d2b65274a3ca28b3975d496917f1139', class: `sd-modal-card__message-container` }, this.message.map(msg => (h("p", { class: "sd-modal-card__message" }, msg))))), h("div", { key: 'b81e9fae8781fe8e57c54c0b51adc141c13c7ba8', class: `sd-modal-card__button-container flex-${this.buttonFlexDirection}` }, this.buttonProps?.map(button => (h("sd-button", { sdClass: `sd-modal-card__button ${button.class || ''}`, variant: button.variant ? button.variant : 'outline', label: button.label, color: button.color, size: button.size, onSdClick: () => !button.type || button.type === 'confirm' ? this.confirm.emit() : this.close.emit() }))))));
+    }
+};
+SdModalCard.style = sdModalCardCss();
+
+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;
+    insideLabel = false;
+    placeholder = '입력해 주세요.';
+    disabled = false;
+    width;
+    rules = [];
+    autoFocus = false;
+    status;
+    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.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: 'ea231ae67c1e209d4c9adca87bd9760bcd28ec51', name: this.name, label: this.label, insideLabel: this.insideLabel, 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: '76bbc2fb1e36d25887ac0559ff7f34617a35883e', 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: '7978c4e8383017b9a8213e827f92c2d9ccc7b275', 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: 'aff328615ab939724ee0f77f4b7ac8b046eb16d1', class: "sd-number-input__buttons" }, h("button", { key: 'a27a592cc4e74b3272e3473988dbd877e9d0afd3', 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: '79853e0a9ab38cfaafbd8027dae1a0732702d5bc', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '0993c22719cdbdf3982dea138653ba1f2f6aa523', 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: '6da02951a443a1a46fd44f6bd7c1a7ed41af0b01', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
+    }; }
+};
+SdNumberInput.style = sdNumberInputCss();
+
 const sdPaginationCss = () => `.sd-pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:8px;color:#555555;width:100%;font-size:12px}.sd-pagination .prepend-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .prepend-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .prepend-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .append-btns{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;width:60px}.sd-pagination .append-btns button{width:26px;height:26px;border:0;background:none}.sd-pagination .append-btns button:hover{border:1px solid #006ac1;border-radius:14px}.sd-pagination .pagination-btn{display:flex;align-items:center;justify-content:center;border-radius:14px;outline:none;border:none;cursor:pointer;height:26px;color:#555555;width:var(--pagination-btn-width, 26px)}.sd-pagination .pagination-btn--selected{background-color:#006ac1;color:white}.sd-pagination .pagination-btn:hover{border:1px solid #006ac1}.sd-pagination--simple .pagination-info{line-height:26px;display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.sd-pagination--simple .pagination-info .current-page,.sd-pagination--simple .pagination-info .last-page{padding:0 2px}`;
 
 const BUTTON_WIDTH = {
@@ -2619,7 +3169,7 @@ const SdPagination = class {
         this.pageChange.emit(page);
     }
     handleGroupChange(direction) {
-        const delta = direction === 'forward' ? PER_PAGE : -10;
+        const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
         const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
         this.handlePageChange(newPage);
     }
@@ -2651,12 +3201,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (h("div", { key: '3113faf5d75fa4a13e267653cae820035270e652', class: this.paginationClasses }, h("div", { key: 'a770afe37da389511bbfda99324e7794ffa299f5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, h("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '7e3842b531373d6485ae8912addea1aa531ca891', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -2779,7 +3329,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '5469d915f8a11d490a1839167b3ae771624d257b' });
+        return h("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
     }
 };
 
@@ -2832,7 +3382,7 @@ const SdSelect = class extends BaseDropdownEvent {
     value = null;
     options = [];
     placeholder = '선택';
-    optionPlaceholder = '옵션이 없습니다.';
+    optionPlaceholder = '선택지가 없습니다.';
     width = '200px';
     dropdownHeight = '260px';
     autoFocus = false;
@@ -2957,7 +3507,7 @@ const SdSelect = class extends BaseDropdownEvent {
         }
     };
     render() {
-        return (h("sd-field", { key: '3eecb395a34ace6342ea78c95775c2dee4332c6f', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '002ce6f8214c57f6bddcef82d5bf711d24b47d5c', class: {
+        return (h("sd-field", { key: 'ad737ef5facfd4f2c8dfdbfc2c97010aa82ba39e', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'ecff910f0d0d6b02f29c2f21a4264b1a573a9170', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -2980,12 +3530,14 @@ const SdSelect = class extends BaseDropdownEvent {
         return (h("sd-portal", { open: this.isOpen, parentRef: parentRef, onSdClose: this.closeDropdown }, h("sd-select-dropdown", { value: this.value, options: this.options, itemIndex: this.itemIndex, width: this.dropDownWidth, dropdownHeight: this.dropdownHeight, searchable: this.searchable, optionPlaceholder: this.optionPlaceholder, onSdOptionClick: ({ detail }) => this.handleOptionClick(detail), onSdOptionFiltered: ({ detail }) => (this.filteredOptions = detail) })));
     }
     static get watchers() { return {
-        "isOpen": ["isOpenChanged"]
+        "isOpen": [{
+                "isOpenChanged": 0
+            }]
     }; }
 };
 SdSelect.style = sdSelectCss();
 
-const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
+const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{min-width:fit-content;width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
 
 const SdSelectDropdown = class {
     constructor(hostRef) {
@@ -3138,15 +3690,21 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: '91c0ce599b9f479404c9353bc976949d2e71f161', class: {
+        return (h("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '6ede4c281647a0282caf04db174d5b522969e897', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
-        "filteredOptions": ["filteredOptionsChanged"],
-        "searchText": ["searchTextChanged"],
-        "itemIndex": ["itemIndexChanged"]
+        "filteredOptions": [{
+                "filteredOptionsChanged": 0
+            }],
+        "searchText": [{
+                "searchTextChanged": 0
+            }],
+        "itemIndex": [{
+                "itemIndexChanged": 0
+            }]
     }; }
 };
 SdSelectDropdown.style = sdSelectDropdownCss();
@@ -3182,7 +3740,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (h("div", { key: '59df3cd1bfc1195025ae829999ff882f369f40f4', class: {
+        return (h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -3228,17 +3786,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
+        return (h("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();
@@ -3266,8 +3824,6 @@ const SdTable = class {
     noDataLabel = '데이터가 없습니다.';
     isLoading = false;
     pagination;
-    headerCellRenderer;
-    bodyCellRenderer;
     useInternalPagination = false;
     useRowsPerPageSelect = false;
     rowsPerPageOption = [
@@ -3305,14 +3861,13 @@ const SdTable = class {
     // 가상 스크롤 Raf(Request Animation Frame) 관리
     scrollRequestAnimationFrame = null;
     scrollContainer = null;
+    resizeObserver = null;
     rafScheduled = false;
     pendingUpdates = {
         vertical: false,
         horizontal: false,
     };
     // 상태 캐시값
-    cachedVisibleColumns = null;
-    lastColumnsRef = null;
     cachedVirtualRows = null;
     cachedVirtualIndexKey = '';
     cachedColumnOrder = null;
@@ -3327,13 +3882,28 @@ const SdTable = class {
     lastSelectionKey = '';
     onScroll;
     handleColumnsChange(newCols) {
-        this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
-        this.cleanUpVirtualCache();
-        this.stickyStyleCache.clear();
-        if (this.useVirtualScroll.horizontal) {
-            this.scheduleUpdate('horizontal');
+        this.columnWidths = this.getColumnWidths(newCols);
+        this.refreshColumnLayout();
+    }
+    handleUseVirtualScrollChange() {
+        this.columnWidths = this.getColumnWidths(this.columns || []);
+        this.refreshColumnLayout();
+        if (this.useVirtualScroll.vertical) {
+            this.scheduleUpdate('vertical');
         }
     }
+    handleVirtualColumnWidthChange() {
+        if (!this.useVirtualScroll.horizontal)
+            return;
+        this.columnWidths = this.getColumnWidths(this.columns || []);
+        this.refreshColumnLayout();
+    }
+    handleSelectableChange() {
+        this.refreshColumnLayout();
+    }
+    handleStickyColumnChange() {
+        this.refreshColumnLayout();
+    }
     handleColumnWidthsChange() {
         this.stickyStyleCache.clear();
         if (this.useVirtualScroll.horizontal) {
@@ -3342,23 +3912,38 @@ const SdTable = class {
     }
     handleRowsChange(newRows) {
         this.innerRows = [...newRows];
-        this.cleanUpVirtualCache();
+        this.clearRowDerivedCache();
         if (this.useVirtualScroll.vertical) {
             this.scheduleUpdate('vertical');
         }
     }
     handleSelectedChange(newSelected) {
-        this.innerSelected = new Set(newSelected);
+        this.innerSelected = new Set(this.dedupeRowsByKey(newSelected || []));
+        this.clearSelectionCache();
     }
     cleanUpVirtualCache() {
-        this.cachedVisibleColumns = null;
-        this.lastColumnsRef = null;
         this.cachedVirtualRows = null;
         this.cachedVirtualIndexKey = '';
         this.cachedColumnOrder = null;
         this.lastColumnOrderKey = '';
     }
+    refreshColumnLayout() {
+        this.cleanUpVirtualCache();
+        this.stickyStyleCache.clear();
+        if (this.useVirtualScroll.horizontal) {
+            this.scheduleUpdate('horizontal');
+        }
+    }
+    clearSelectionCache() {
+        this.cachedIsAllChecked = undefined;
+        this.lastSelectionKey = '';
+    }
+    clearRowDerivedCache() {
+        this.cleanUpVirtualCache();
+        this.clearSelectionCache();
+    }
     handlePaginationChange(newVal) {
+        this.clearRowDerivedCache();
         if (newVal?.page && newVal.page !== this.currentPage) {
             this.currentPage = newVal.page;
             if (this.useVirtualScroll.vertical && this.scrollContainer) {
@@ -3370,8 +3955,8 @@ const SdTable = class {
     }
     componentWillLoad() {
         this.innerRows = [...(this.rows || [])];
-        this.innerSelected = new Set(this.selected || []);
-        this.columnWidths = (this.columns || []).map(c => parseInt(c.width || '120', 10));
+        this.innerSelected = new Set(this.dedupeRowsByKey(this.selected || []));
+        this.columnWidths = this.getColumnWidths(this.columns || []);
         if (this.pagination?.page) {
             this.currentPage = this.pagination.page;
         }
@@ -3417,6 +4002,7 @@ const SdTable = class {
                     this.cachedContainerHeight = this.scrollContainer.clientHeight;
                     this.cachedContainerWidth = this.scrollContainer.clientWidth;
                     middle.addEventListener('scroll', this.onScroll, { passive: true });
+                    this.startResizeObserver();
                     if (this.useVirtualScroll.vertical) {
                         this.calculateVisibleRange();
                     }
@@ -3434,6 +4020,12 @@ const SdTable = class {
             return;
         }
         this.currentPage = page;
+        this.clearRowDerivedCache();
+        if (this.useVirtualScroll.vertical && this.scrollContainer) {
+            this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
+            this.scrollTopPosition = 0;
+            this.calculateVisibleRange();
+        }
         this.sdPageChange.emit(this.currentPage);
     }
     changeRowsPerPage(perPage) {
@@ -3454,24 +4046,26 @@ const SdTable = class {
             lastPage: newLastPage,
         };
         this.currentPage = newCurrentPage;
+        this.clearRowDerivedCache();
+        if (this.useVirtualScroll.vertical && this.scrollContainer) {
+            this.scrollContainer.scrollTo({ top: 0, behavior: 'instant' });
+            this.scrollTopPosition = 0;
+            this.calculateVisibleRange();
+        }
         this.sdRowsPerPageChange.emit(changedRowsPerPage);
     }
     disconnectedCallback() {
         if (this.scrollContainer && this.onScroll) {
             this.scrollContainer.removeEventListener('scroll', this.onScroll);
         }
+        this.resizeObserver?.disconnect();
         if (this.scrollRequestAnimationFrame !== null) {
             cancelAnimationFrame(this.scrollRequestAnimationFrame);
         }
     }
     // ----- Derived getters -----
-    get visibleColumns() {
-        if (this.cachedVisibleColumns && this.lastColumnsRef === this.columns) {
-            return this.cachedVisibleColumns;
-        }
-        this.lastColumnsRef = this.columns;
-        this.cachedVisibleColumns = this.columns.filter(col => col.visible !== false);
-        return this.cachedVisibleColumns;
+    get tableColumns() {
+        return this.columns || [];
     }
     get paginatedRows() {
         if (!this.pagination || !this.useInternalPagination)
@@ -3480,7 +4074,10 @@ const SdTable = class {
         return this.innerRows.slice((this.currentPage - 1) * rowsPerPage, this.currentPage * rowsPerPage);
     }
     get virtualRows() {
-        const newVirtualIndexKey = `${this.virtualStartIndex}-${this.virtualEndIndex}`;
+        const pageKey = this.useInternalPagination
+            ? `${this.currentPage}-${this.pagination?.rowsPerPage ?? 'all'}`
+            : 'all';
+        const newVirtualIndexKey = `${pageKey}-${this.innerRows.length}-${this.virtualStartIndex}-${this.virtualEndIndex}`;
         if (this.cachedVirtualRows && this.cachedVirtualIndexKey === newVirtualIndexKey) {
             return this.cachedVirtualRows;
         }
@@ -3510,9 +4107,8 @@ const SdTable = class {
         return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
     }
     getHorizontalSpacerWidth(position) {
-        const stickyLeftCount = this.stickyColumn.left || 0;
-        const stickyRightCount = this.stickyColumn.right || 0;
-        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
+        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
         const remainingCols = virtualColumnWidths.length - this.virtualEndColIdx - 1;
         if (position === 'right' && remainingCols <= 0)
             return 0;
@@ -3547,52 +4143,63 @@ const SdTable = class {
             this.selectable && 'sd-table--selectable',
             this.resizable && 'sd-table--resizable',
             !this.innerRows.length && 'sd-table--no-data',
-            ((this.stickyColumn?.left ?? 0) > 0 || (this.stickyColumn?.right ?? 0) > 0) &&
-                'sd-table--sticky-column',
+            this.hasStickyColumn && 'sd-table--sticky-column',
             this.scrolledLeft && 'sd-table--scrolled-left',
             this.scrolledRight && 'sd-table--scrolled-right',
         ]
             .filter(Boolean)
             .join(' ');
     }
+    get hasStickyColumn() {
+        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
+        return (this.selectable || stickyLeftCount > 0 || stickyRightCount > 0);
+    }
+    get hasStickyLeftDataColumn() {
+        return this.getNormalizedStickyCounts().stickyLeftCount > 0;
+    }
     // ----- Selection -----
     isRowSelected(row) {
-        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+        return Array.from(this.innerSelected).some(r => this.getRowKeyValue(r) === this.getRowKeyValue(row));
     }
     updateRowSelect(row) {
         const selectedArray = Array.from(this.innerSelected);
         const exists = this.isRowSelected(row);
         const newSelected = exists
-            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
+            ? selectedArray.filter(r => this.getRowKeyValue(r) !== this.getRowKeyValue(row))
             : [...selectedArray, row];
         // 동일 상태면 set하지 않음 → 불필요 렌더 방지
         if (newSelected.length === selectedArray.length)
             return;
-        this.innerSelected = new Set(newSelected);
-        this.cachedIsAllChecked = undefined;
+        this.innerSelected = new Set(this.dedupeRowsByKey(newSelected));
+        this.clearSelectionCache();
         this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     toggleSelectAll(checked) {
+        const selectedRows = Array.from(this.innerSelected);
         if (checked) {
-            const pageRows = new Set([...this.paginatedRows]);
-            this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
+            this.innerSelected = new Set(this.dedupeRowsByKey([...selectedRows, ...this.paginatedRows]));
         }
         else {
-            const currentPageKeys = this.paginatedRows.map(r => r[this.rowKey]);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
+            const currentPageKeys = new Set(this.paginatedRows.map(r => this.getRowKeyValue(r)));
+            this.innerSelected = new Set(selectedRows.filter(r => !currentPageKeys.has(this.getRowKeyValue(r))));
         }
-        this.cachedIsAllChecked = undefined;
+        this.clearSelectionCache();
         this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
     }
     get isAllChecked() {
-        const selectionKey = `${this.paginatedRows.length}-${this.innerSelected.size}`;
+        const paginatedKeys = this.paginatedRows.map(row => String(this.getRowKeyValue(row))).join('|');
+        const selectedKeys = Array.from(this.innerSelected)
+            .map(row => String(this.getRowKeyValue(row)))
+            .sort()
+            .join('|');
+        const selectionKey = `${paginatedKeys}::${selectedKeys}`;
         if (this.cachedIsAllChecked !== undefined && this.lastSelectionKey === selectionKey) {
             return this.cachedIsAllChecked;
         }
         const total = this.paginatedRows.length;
-        const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
+        const selectedCount = this.paginatedRows.filter(row => Array.from(this.innerSelected).some(selectedRow => this.getRowKeyValue(selectedRow) === this.getRowKeyValue(row))).length;
         let result;
         if (selectedCount === 0) {
             result = false; // 아무것도 안 선택됨
@@ -3652,7 +4259,7 @@ const SdTable = class {
     calculateVisibleColumnRange() {
         if (!this.useVirtualScroll.horizontal) {
             this.virtualStartColIdx = 0;
-            this.virtualEndColIdx = this.visibleColumns.length - 1;
+            this.virtualEndColIdx = this.tableColumns.length - 1;
             return;
         }
         const scrollLeft = this.scrollLeftPosition;
@@ -3662,10 +4269,9 @@ const SdTable = class {
             containerWidth = this.scrollContainer.clientWidth;
             this.cachedContainerWidth = containerWidth;
         }
-        const stickyLeftCount = this.stickyColumn.left || 0;
-        const stickyRightCount = this.stickyColumn.right || 0;
+        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
         // 가상 스크롤 컬럼 - sticky column 제외
-        const virtualColumns = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        const virtualColumns = this.tableColumns.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
         if (virtualColumns.length === 0) {
             this.virtualStartColIdx = 0;
             this.virtualEndColIdx = 0;
@@ -3674,11 +4280,11 @@ const SdTable = class {
         const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
             (this.selectable ? 52 : 0);
         const stickyRightWidth = this.columnWidths
-            .slice(this.visibleColumns.length - stickyRightCount)
+            .slice(this.tableColumns.length - stickyRightCount)
             .reduce((sum, width) => sum + width, 0);
         // 가상 스크롤 영역의 너비 계산
         const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
-        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
         const virtualScrollLeft = Math.max(0, scrollLeft - stickyLeftWidth);
         const reducedVirtualWidth = virtualColumnWidths.reduce((acc, width, idx) => {
             acc.push((acc[idx - 1] || 0) + width);
@@ -3716,8 +4322,9 @@ const SdTable = class {
             return this.stickyStyleCache.get(colIdx);
         }
         const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this.selectable ? 52 : 0);
+        const { stickyRightCount } = this.getNormalizedStickyCounts();
         const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this.stickyColumn.right || 0) && i > colIdx)
+            .filter((_, i) => i >= this.tableColumns.length - stickyRightCount && i > colIdx)
             .reduce((a, b) => a + b, 0);
         const style = {
             '--sticky-left-offset': `${leftOffset}px`,
@@ -3730,6 +4337,72 @@ const SdTable = class {
         this.stickyStyleCache.set(colIdx, style);
         return style;
     }
+    startResizeObserver() {
+        if (!this.scrollContainer || typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = new ResizeObserver(() => {
+            if (!this.scrollContainer)
+                return;
+            const nextHeight = this.scrollContainer.clientHeight;
+            const nextWidth = this.scrollContainer.clientWidth;
+            const heightChanged = this.cachedContainerHeight !== nextHeight;
+            const widthChanged = this.cachedContainerWidth !== nextWidth;
+            if (!heightChanged && !widthChanged)
+                return;
+            this.cachedContainerHeight = nextHeight;
+            this.cachedContainerWidth = nextWidth;
+            if (heightChanged && this.useVirtualScroll.vertical) {
+                this.scheduleUpdate('vertical');
+            }
+            if (widthChanged && this.useVirtualScroll.horizontal) {
+                this.scheduleUpdate('horizontal');
+            }
+        });
+        this.resizeObserver.observe(this.scrollContainer);
+    }
+    parseColumnWidth(width, fallbackWidth) {
+        if (typeof width === 'number') {
+            return Number.isFinite(width) ? width : fallbackWidth;
+        }
+        if (typeof width !== 'string')
+            return fallbackWidth;
+        const normalized = width.trim();
+        if (!normalized)
+            return fallbackWidth;
+        if (/^\d+(\.\d+)?px$/.test(normalized)) {
+            return Number.parseFloat(normalized);
+        }
+        if (/^\d+(\.\d+)?$/.test(normalized)) {
+            return Number.parseFloat(normalized);
+        }
+        return fallbackWidth;
+    }
+    getColumnWidths(columns = []) {
+        const fallbackWidth = this.useVirtualScroll.horizontal ? this.virtualColumnWidth : 120;
+        return columns.map(c => this.parseColumnWidth(c.width, fallbackWidth));
+    }
+    getNormalizedStickyCounts() {
+        const totalColumnCount = this.tableColumns.length;
+        const requestedLeft = Number(this.stickyColumn?.left ?? 0) || 0;
+        const requestedRight = Number(this.stickyColumn?.right ?? 0) || 0;
+        const stickyLeftCount = Math.min(totalColumnCount, Math.max(0, requestedLeft));
+        const stickyRightCount = Math.min(Math.max(0, totalColumnCount - stickyLeftCount), Math.max(0, requestedRight));
+        return {
+            stickyLeftCount,
+            stickyRightCount,
+        };
+    }
+    getRowKeyValue(row) {
+        return row?.[this.rowKey];
+    }
+    dedupeRowsByKey(rows) {
+        const rowMap = new Map();
+        rows.forEach(row => {
+            rowMap.set(this.getRowKeyValue(row), row);
+        });
+        return Array.from(rowMap.values());
+    }
     handleResize(index, event) {
         // SSR 환경 체크
         if (typeof document === 'undefined')
@@ -3737,11 +4410,12 @@ const SdTable = class {
         const startX = event.clientX;
         const startWidth = this.columnWidths[index];
         const handleMouseMove = (moveEvent) => {
-            const targetColumn = this.columnWidths[index];
-            if (!targetColumn)
+            const currentWidth = this.columnWidths[index];
+            if (!currentWidth)
                 return;
-            const minWidth = this.columns[index]?.minWidth || 50;
-            const maxWidth = this.columns[index]?.maxWidth || 9999;
+            const targetColumn = this.tableColumns[index];
+            const minWidth = targetColumn?.minWidth || 50;
+            const maxWidth = targetColumn?.maxWidth || 9999;
             const newWidth = Math.min(Math.max(startWidth + moveEvent.clientX - startX, minWidth), maxWidth);
             this.columnWidths = this.columnWidths.map((width, idx) => (idx === index ? newWidth : width));
         };
@@ -3758,20 +4432,19 @@ const SdTable = class {
         return format ? format(value, row) : value;
     }
     getColumnRenderedInOrder() {
-        const orderKey = `${this.visibleColumns.length}-${this.virtualStartColIdx}-${this.virtualEndColIdx}`;
+        const { stickyLeftCount, stickyRightCount } = this.getNormalizedStickyCounts();
+        const orderKey = `${this.tableColumns.map(col => col.name).join('|')}-${stickyLeftCount}-${stickyRightCount}-${this.useVirtualScroll.horizontal ? `${this.virtualStartColIdx}-${this.virtualEndColIdx}` : 'all'}`;
         if (this.cachedColumnOrder && this.lastColumnOrderKey === orderKey) {
             return this.cachedColumnOrder;
         }
-        const stickyLeftCount = this.stickyColumn.left || 0;
-        const stickyRightCount = this.stickyColumn.right || 0;
         // Sticky left 컬럼들
-        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
-        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
+        const stickyLeftCols = this.tableColumns.slice(0, stickyLeftCount);
+        const stickyRightCols = this.tableColumns.slice(this.tableColumns.length - stickyRightCount);
         const middleCols = this.useVirtualScroll.horizontal
-            ? this.visibleColumns
-                .slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
+            ? this.tableColumns
+                .slice(stickyLeftCount, this.tableColumns.length - stickyRightCount)
                 .slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
-            : this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+            : this.tableColumns.slice(stickyLeftCount, this.tableColumns.length - stickyRightCount);
         this.cachedColumnOrder = {
             stickyLeftCount,
             stickyRightCount,
@@ -3788,33 +4461,31 @@ const SdTable = class {
         return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: {
                 'sd-th': true,
                 'sd-th--selected': true,
-                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+                'sticky-left': true,
+                'sticky-left-edge': !this.hasStickyLeftDataColumn,
             }, style: {
                 '--sticky-left-offset': '0px',
             } }, h("sd-checkbox", { value: this.isAllChecked, disabled: !this.paginatedRows.length, onSdUpdate: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
-            const rendered = this.headerCellRenderer?.(col);
             return (h("th", { key: col.name, class: {
                     'sd-th': true,
                     [`${col.thClass}`]: Boolean(col.thClass),
                     'sticky-left': true,
                     'sticky-left-edge': idx === stickyLeftCount - 1,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))));
-        }), this.renderSpacerTd('left', -1), middleCols.map((col, relativeIdx) => {
+                }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))));
+        }), this.renderSpacerTh('left'), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
-            const rendered = this.headerCellRenderer?.(col);
             return (h("th", { key: col.name, class: {
                     'sd-th': true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
-        }), this.renderSpacerTd('right', -1), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            const rendered = this.headerCellRenderer?.(col);
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+        }), this.renderSpacerTh('right'), stickyRightCols.map((col, relativeIdx) => {
+            const actualColIdx = this.tableColumns.length - stickyRightCount + relativeIdx;
             return (h("th", { key: col.name, class: {
                     'sd-th': true,
                     [`${col.thClass}`]: Boolean(col.thClass),
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, h("slot", { name: `header-cell-${col.name}` }, h("div", { class: "sd-th__content--label" }, col.label)), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (h("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
         }))));
     }
     renderBody() {
@@ -3832,46 +4503,62 @@ const SdTable = class {
                 : {} }, this.selectable && (h("td", { class: {
                 'sd-td': true,
                 'sd-td--selected': true,
-                'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
+                'sticky-left': true,
+                'sticky-left-edge': !this.hasStickyLeftDataColumn,
             }, style: {
                 '--sticky-left-offset': '0px',
             } }, h("sd-checkbox", { value: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdUpdate: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
-            const rendered = this.bodyCellRenderer?.(column, row);
             return (h("td", { key: column.name, part: `td-${column.name}`, class: {
                     'sd-td': true,
                     [`sd-td--${column.align || 'left'}`]: true,
                     'sticky-left': true,
                     'sticky-left-edge': idx === stickyLeftCount - 1,
                     [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(idx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+                }, style: this.getStickyStyle(idx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, this.getCellValue(column, row))));
         }), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
             const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
-            const rendered = this.bodyCellRenderer?.(column, row);
             return (h("td", { key: column.name, part: `td-${column.name}`, class: {
                     'sd-td': true,
                     [`sd-td--${column.align || 'left'}`]: true,
                     [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, this.getCellValue(column, row))));
         }), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            const rendered = this.bodyCellRenderer?.(column, row);
+            const actualColIdx = this.tableColumns.length - stickyRightCount + relativeIdx;
             return (h("td", { key: column.name, part: `td-${column.name}`, class: {
                     'sd-td': true,
                     [`sd-td--${column.align || 'left'}`]: true,
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     [`${column.tdClass}`]: Boolean(column.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (h("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
+                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `body-cell-${column.name}-${rowIdx}` }, this.getCellValue(column, row))));
         })));
     }
     renderSpacerRow(position) {
         const spacerHeight = position === 'top' ? this.topSpacerHeight : this.bottomSpacerHeight;
         return (h("tr", { key: `virtual-${position}-spacer`, class: "sd-table__virtual-row-spacer", style: {
                 height: `${spacerHeight}px`,
-            }, "aria-hidden": "true" }, h("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton", style: {
+            }, "aria-hidden": "true" }, h("td", { colSpan: this.tableColumns.length + (this.selectable ? 1 : 0) }, h("div", { class: "sd-table__skeleton", style: {
                 '--row-height': `${this.virtualRowHeight}px`,
             } }))));
     }
+    getSpacerCellStyle(spacerWidth) {
+        return {
+            width: `${spacerWidth}px`,
+            minWidth: `${spacerWidth}px`,
+            maxWidth: `${spacerWidth}px`,
+            padding: '0',
+            border: 'none',
+        };
+    }
+    renderSpacerTh(position) {
+        const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
+        const showSpacer = position === 'left'
+            ? this.useVirtualScroll.horizontal && this.leftSpacerWidth > 0
+            : this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
+        if (!showSpacer)
+            return null;
+        return (h("th", { key: `virtual-${position}-spacer-header`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
+    }
     renderSpacerTd(position, rowIdx) {
         const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
         const showSpacer = position === 'left'
@@ -3879,32 +4566,48 @@ const SdTable = class {
             : this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
         if (!showSpacer)
             return null;
-        return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: {
-                width: `${spacerWidth}px`,
-                minWidth: `${spacerWidth}px`,
-                maxWidth: `${spacerWidth}px`,
-                padding: '0',
-                border: 'none',
-            }, "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
+        return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Fragment, { key: '7aea9a9b5854e18ba13760e12b801a355ea52add' }, h("div", { key: '5f2ae57e4ba8babba34bca163f7afa625a4a8c5d', class: "sd-table__wrapper", style: {
+        return (h(Fragment, { key: 'd5568bc96a6ec0e973eda494deacceef6ec4bce9' }, h("div", { key: '8ec11dd8a4e0cd9f32a9dccd345711e64d10043a', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: '964adaf80c1ecabb83effc9f42a468434d0e8774', class: "sd-table__container", style: {
+            } }, h("div", { key: 'f96bbc29c77f6aaa46467d375a8a457938a27e13', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: '081ad3b8df8796cc71d81f6e77d8c8459ad75ffa', class: {
+            } }, h("div", { key: 'fe66db102a053e90ffe02d26a28ac225e90f1ea3', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '2c6c7a9f8f978118b5c9bf90eb3eff1d4ab918af', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '09ba19e6ad135e7bc5cfc2ced11e584eb4ce5dd5' }))), h("table", { key: 'f06d35afbbaf2c0a9787836d1adac3b3ddd9b562', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'eb594ff940a0c005b67369b433b1d53fb60660f2', class: "sd-table__bottom" }, h("div", { key: 'f9191f0643b4a50a37d7c2916ee7e52b1c2957e4', class: "sd-table__no-data" }, h("slot", { key: 'dabb530c384a0e8bffac1b9bdb8f68ea01c55c1c', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '48df8203d88221faa836b364c4cfb2728439c695', class: "sd-table__pagination" }, h("sd-pagination", { key: '6e3655ecc990a295fda78d05458dfce27ac66af5', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'bfbb5f6f11e379ec4395ca9c3741bf7eb921a2e4', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: '0851750dd88030f05e413bbdb6a7911bbc259d00', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '557674426413df32198427509c8f50921b268212' }))), h("table", { key: 'f04e1c387e34523c3a77137b82457ace6aeeb74b', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'aca217244defe434eb44cea583e1b2d7b17431ef', class: "sd-table__bottom" }, h("div", { key: '19a1049a467f9aec618324b0268803ddfa52e0d5', class: "sd-table__no-data" }, h("slot", { key: 'a2170c15879dc9124eb41985e902c0119b5e45c1', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '6a12ce1409f35ff6ec9dd737829b4678b2ce2920', class: "sd-table__pagination" }, h("sd-pagination", { key: 'cec76c2c6f7dc276565e17f25ed42ea2f1578b02', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'f868e4f6fc8f67e00d25914b189a82d342cc767a', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get watchers() { return {
-        "columns": ["handleColumnsChange"],
-        "columnWidths": ["handleColumnWidthsChange"],
-        "rows": ["handleRowsChange"],
-        "selected": ["handleSelectedChange"],
-        "pagination": ["handlePaginationChange"]
+        "columns": [{
+                "handleColumnsChange": 0
+            }],
+        "useVirtualScroll": [{
+                "handleUseVirtualScrollChange": 0
+            }],
+        "virtualColumnWidth": [{
+                "handleVirtualColumnWidthChange": 0
+            }],
+        "selectable": [{
+                "handleSelectableChange": 0
+            }],
+        "stickyColumn": [{
+                "handleStickyColumnChange": 0
+            }],
+        "columnWidths": [{
+                "handleColumnWidthsChange": 0
+            }],
+        "rows": [{
+                "handleRowsChange": 0
+            }],
+        "selected": [{
+                "handleSelectedChange": 0
+            }],
+        "pagination": [{
+                "handlePaginationChange": 0
+            }]
     }; }
 };
 SdTable.style = sdTableCss();
@@ -3993,14 +4696,18 @@ const SdTextarea = class {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (h("div", { key: 'a5c69ab99ae634450f45211158ecc7aaf4ae7ed5', class: {
+        return (h("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '805bcdc30afbc6d91ae1ece93935ef3b95458c4d', class: "sd-textarea__content" }, h("textarea", { key: '9bacae67219729f46c8e05e2d3c5a8b3dda05447', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: '394681f2a6b62747b29fd2d4561ffca93fc482d7', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: '2740dc673980d558d460e0caa100365ec0c10587', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'f7100c74718da4aa705d3213dbcbaf200bb0d6d5', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '1f91a1e435b2dba1817ce181f91bdf3829142682', class: "sd-textarea__content" }, h("textarea", { key: 'd883f4cdfd56220cf4382893f94a469f7afd7ff2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: 'e9350d8e49eb87b2caddfc24079ece0d59c79739', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'cda9e2b8b0c15fbc7356597d4363d438688c8e4e', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: '491e990142e07837169e84a3fcc3e80c00bc7153', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
-        "value": ["valueChanged"],
-        "internalValue": ["internalValueChanged"]
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
     }; }
 };
 SdTextarea.style = sdTextareaCss();
@@ -4044,15 +4751,22 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: 'd0db4bd2d57b38eae1522abd96c2776d6ffdd7c7' }, 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-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-floating-portal", { key: 'ef5951d34aa4a0b5b831eadf464ab2c6711b9320', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, h("div", { key: '07f7090e1de9461d1a67b092631e1c8daae1abaa', class: {
+        const buttonTrigger = this.trigger === 'hover'
+            ? {
+                onMouseEnter: () => (this.showTooltip = true),
+                onMouseLeave: () => (this.showTooltip = false),
+            }
+            : {
+                onSdClick: () => (this.showTooltip = !this.showTooltip),
+            };
+        return (h(Fragment, { key: '1aefeca1e8e1e5da1ad3394dbc2cd5529c0ce854' }, 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-tooltip", ...buttonTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-floating-portal", { key: '65c83f4f0d03d17345e9c19b462dadb78f7ea83b', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, h("div", { key: 'ca2f15d29a5999842f39ef3bb5eefc6f8675e386', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.type}`]: true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 'sd-floating-menu--with-close': this.useClose,
-            } }, h("i", { key: '2e8a1f6d7c2159ed48819229ee41ab75237ad2c2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '8bc18f6aeb197026ead06ef02837a70f924752f5' })), h("div", { key: 'cb91d969f481e7e1cf22e4a84aed3237b7b22376', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (h("div", { key: '856bf6d63862406177c32400e3d919f5fcd1c8df', class: "sd-floating-menu__close-button" }, h("button", { key: '83e107c58f9bc7927c449a186b19e6fa4730e53f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: this.handleClose.bind(this) }, h("sd-icon", { key: 'dc9dc331be0c6eb3ae96150ea50515f021746260', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, h("i", { key: 'd118d136589ef1e421e03bae59b0a9d5bfbbb2ba', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '2a2e0599bcf1cd2261335d0c46297a7650ac30a2' })), h("div", { key: 'fced40f561dae6a81a9e5c9c4be44555db358745', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (h("div", { key: 'dec97887df051d3253f05f03190e145d0515b522', class: "sd-floating-menu__close-button" }, h("button", { key: '66cd01a3228a27abdc9e4d9e974fe90c91c6ad97', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: this.handleClose.bind(this) }, h("sd-icon", { key: 'bc179a3452f83d96a7a36ca12821c093f7f53527', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss();
 
-export { SdButton as sd_button, SdCheckbox as sd_checkbox, SdField as sd_field, SdFloatingPopover as sd_floating_portal, SdIcon as sd_icon, SdInput as sd_input, SdLoadingSpinner as sd_loading_spinner, SdPagination as sd_pagination, SdPortal as sd_portal, SdRadio as sd_radio, SdSelect as sd_select, SdSelectDropdown as sd_select_dropdown, SdSelectOption as sd_select_option, SdSelectSearchInput as sd_select_search_input, SdTable as sd_table, SdTextarea as sd_textarea, SdTooltip as sd_tooltip };
-//# sourceMappingURL=sd-button.sd-checkbox.sd-field.sd-floating-portal.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-radio.sd-select.sd-select-dropdown.sd-select-option.sd-select-search-input.sd-table.sd-textarea.sd-tooltip.entry.js.map
+export { SdButton as sd_button, SdCheckbox as sd_checkbox, SdDateBox as sd_date_box, SdDateRangePicker as sd_date_range_picker, SdField as sd_field, SdFloatingPopover as sd_floating_portal, SdIcon as sd_icon, SdInput as sd_input, SdLoadingSpinner as sd_loading_spinner, SdModalCard as sd_modal_card, SdNumberInput as sd_number_input, SdPagination as sd_pagination, SdPortal as sd_portal, SdRadio as sd_radio, SdSelect as sd_select, SdSelectDropdown as sd_select_dropdown, SdSelectOption as sd_select_option, SdSelectSearchInput as sd_select_search_input, SdTable as sd_table, SdTextarea as sd_textarea, SdTooltip as sd_tooltip };