@sellmate/design-system 0.0.53 → 0.0.54

package/hydrate/index.js

@@ -6903,6 +6903,315 @@ class SdModalCard {
     }; }
 }
 
+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{box-sizing:border-box;display:flex;width:var(--input-width, 100%);align-items:center;height:28px;padding:4px 8px;border:1px solid #aaaaaa;border-radius:4px;color:#333333;font-size:12px;line-height:20px;background:white;position:relative}.sd-number-input--hovered{border-color:#0075ff;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}.sd-number-input.sd-number-input--error{border-color:#fb4444}.sd-number-input.sd-number-input--pass{border-color:#2bce6c}.sd-number-input.sd-number-input--disabled{background-color:#eeeeee !important;border-color:#cccccc !important;cursor:not-allowed !important;box-shadow:none !important}.sd-number-input.sd-number-input--disabled .sd-number-input__input{color:#888888 !important}.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__input::placeholder{font-size:12px;height:20px;line-height:20px;color:#aaaaaa}.sd-number-input .sd-number-input__clear-icon{cursor:pointer;margin-left:8px}.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__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__button:hover:not(:disabled){background-color:#e6f1ff}.sd-number-input .sd-number-input__button:disabled{background-color:#eeeeee;cursor:not-allowed}.sd-number-input .sd-number-input__button--decrement{border-bottom-left-radius:0;border-bottom-right-radius:0}.sd-number-input .sd-number-input__button--increment{border-top-left-radius:0;border-top-right-radius:0}.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)}`;
+
+class SdNumberInput {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sdIncrement = createEvent(this, "sdIncrement");
+        this.sdDecrement = createEvent(this, "sdDecrement");
+        this.sdInput = createEvent(this, "sdInput");
+        this.sdChange = createEvent(this, "sdChange");
+        this.sdFocus = createEvent(this, "sdFocus");
+        this.sdBlur = 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;
+    placeholder = '입력해 주세요.';
+    disabled = false;
+    width;
+    rules;
+    autoFocus = false;
+    status;
+    inputClass = '';
+    readonly = false;
+    inputStyle = {};
+    internalValue = null;
+    displayValue = '';
+    hovered = false;
+    error = false;
+    nativeEl = undefined;
+    sdIncrement;
+    sdDecrement;
+    sdInput;
+    sdChange;
+    sdFocus;
+    sdBlur;
+    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.sdInput?.emit(newValue);
+        }
+        if (!this.rules || this.rules.length === 0)
+            return;
+        this.error = false;
+        for (const rule of this.rules) {
+            const result = rule(newValue);
+            if (result !== true) {
+                this.error = true;
+                break;
+            }
+        }
+    }
+    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();
+    }
+    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;
+        }
+    };
+    handleChange = (event) => {
+        const target = event.target;
+        const inputValue = target.value;
+        if (inputValue === '') {
+            this.internalValue = null;
+        }
+        else {
+            const parsed = this.parseInput(inputValue);
+            if (parsed !== null) {
+                this.internalValue = this.clampMinMax(parsed);
+            }
+        }
+        this.sdChange?.emit(this.internalValue);
+    };
+    handleFocus = (event) => {
+        this.sdFocus?.emit(event);
+    };
+    handleBlur = (event) => {
+        this.updateDisplay();
+        if (this.nativeEl) {
+            this.nativeEl.value = this.displayValue;
+        }
+        this.sdBlur?.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.sdIncrement?.emit({ currentVal: nextVal, prevVal: currentVal });
+        this.internalValue = nextVal;
+        this.sdChange?.emit(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.sdDecrement?.emit({ currentVal: nextVal, prevVal: currentVal });
+        this.internalValue = nextVal;
+        this.sdChange?.emit(nextVal);
+    };
+    async getNativeElement() {
+        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 (hAsync(Host, { key: '353b3f99bf5933d6f445a78c9cecd93fcbdd3a9c', style: inputWidth, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.useButton ? 'use buttons' : 'dont use buttons', this.label && hAsync("div", { key: '95d9687fa5634fb53f6a2120d2125cf92e12ccdd', class: "sd-number-input__label" }, this.label), hAsync("label", { key: '05ba4deb72261325788b25842c27d7a177fda58a', 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 }, hAsync("input", { key: 'e4c415d40c20f5e915765f4f7d68cd123517acc1', 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, onChange: this.handleChange, onKeyDown: this.handleKeyDown, style: inputStyles }), this.useButton && (hAsync("div", { key: '1b960a710170212032a8cd7c1c6ad002a3275d69', class: "sd-number-input__buttons" }, hAsync("button", { key: 'c9a80bbdf96e4e191c2d43f581eba9c77f465464', type: "button", class: {
+                'sd-number-input__button': true,
+                'sd-number-input__button--decrement': true,
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, hAsync("sd-icon", { key: 'c4791c052f390013e7dfdf78ef42d987e9609da1', name: "minus", size: 12, color: this.isDecrementDisabled() ? '#CCCCCC' : '#2D8DFF' })), hAsync("button", { key: '769fb6ebcde814f1f8667eaadd35f97139869bf3', type: "button", class: {
+                'sd-number-input__button': true,
+                'sd-number-input__button--increment': true,
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, hAsync("sd-icon", { key: '6a4d263152daaf8f4a565f6659f6bfa6c0acc814', name: "add", size: 12, color: this.isIncrementDisabled() ? '#CCCCCC' : '#2D8DFF' })))))));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "internalValue": ["internalValueChanged"]
+    }; }
+    static get style() { return sdNumberInputCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 768,
+        "$tagName$": "sd-number-input",
+        "$members$": {
+            "min": [2],
+            "max": [2],
+            "step": [2],
+            "useButton": [4, "use-button"],
+            "useDecimal": [4, "use-decimal"],
+            "value": [1032],
+            "label": [1],
+            "placeholder": [1],
+            "disabled": [4],
+            "width": [8],
+            "rules": [16],
+            "autoFocus": [4, "auto-focus"],
+            "status": [1],
+            "inputClass": [1, "input-class"],
+            "readonly": [4],
+            "inputStyle": [16],
+            "internalValue": [32],
+            "displayValue": [32],
+            "hovered": [32],
+            "error": [32],
+            "getNativeElement": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 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 = {
@@ -6977,12 +7286,12 @@ class SdPagination {
         }
     }
     render() {
-        return (hAsync("div", { key: '6b743779100f7835b29da728d642ced495b11116', class: this.paginationClasses }, hAsync("div", { key: '34be0cf1db6cc55f761b32fa9e4f9bee236933f6', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (hAsync("div", { key: 'b027af83594c0408615d4c34b861c5c31112f298', class: this.paginationClasses }, hAsync("div", { key: '959c79e58c7745606d719c66e8090ef23f7db554', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (hAsync("div", { class: "pagination-info" }, hAsync("span", { class: "current-page" }, this.currentPage), hAsync("span", null, "/"), hAsync("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (hAsync("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)))), hAsync("div", { key: '108017450555fb73c74c71cc7605ef8af5679a20', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), hAsync("div", { key: '64f13226aa9249395ac7aa7d11ea5cc946f5477a', class: "append-btns" }, this.renderNextButtons())));
     }
     static get style() { return sdPaginationCss(); }
     static get cmpMeta() { return {
@@ -7036,11 +7345,11 @@ class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: 'fa06f3ff6641006a75c3ed0912f8f2dc6ca2da56' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-tooltip-portal", { key: 'f433e3bc5e325bf9d70fae10b6777fe77e52061f', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: '7fa463878475d3c2ce86d006912c35b585d7bed0', class: {
+        return (hAsync(Fragment, { key: '1300f5f84d96ef65840d8daec85dc53dba2c407c' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-tooltip-portal", { key: '73b7feb032125495c7df8bbcecee042b59c91886', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'b6209c9654fe11e148206ef49c8a304b1f72f068', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, hAsync("i", { key: '90a23aea2730ec9dbc2b9ca77ef0a4ef13777006', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '9246c25e04ea2dd6716e20ac01060ff7acc23fa9' })), hAsync("div", { key: 'dd6f350fbb5f5a49302593b3c24faf6bf59bb9ec', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: 'c9aae4e0eaa0e1ab4f1447907f2dbe0e6e988bbf', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '2ed497a7d543f4638756524b4062c9df57b20aa0', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '5ddf4ec18128bc58c77a3017fc1a621591adb67b', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'e7bbb527601bda49a4d4e5c28a555acb5714bd5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '0e0ec3542195f3eb6955ef68ab82d947460271d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, hAsync("i", { key: 'c788234f854fe0704ffffdc89dd297277916e7f1', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '5d5b4aa3815b815ebe4bebc81f307ba62f781af1' })), hAsync("div", { key: '6305c611f72e1e57ff90562a05568777ff3e5db0', class: "sd-popover-menu__content" }, this.menuTitle && hAsync("div", { key: 'da81708c8925e82c6b28b2d582f17d588f9fceae', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'd0d00ce577b6de6efd546fadafc5d487f5e9b0b9', class: "sd-popover-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: '3ce2714f038a72ffd1017e00521bf2c05fe8730c', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '4c551c170b13797cb725e3e0ae42623dc983286a', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '1c4620527b33feba50d06709ed0c9185be4094b4', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]
@@ -7191,7 +7500,7 @@ class SdPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: '5995c7edbf0a54b6efb9afa2b5f67f078282acd8' });
+        return hAsync("slot", { key: 'd93a68ecf1a281765225bf204cd479bb4b7bfdbf' });
     }
     static get cmpMeta() { return {
         "$flags$": 772,
@@ -7228,10 +7537,10 @@ class SdProgress {
         error: '#FB4444',
     };
     render() {
-        return (hAsync(Host, { key: 'ecd9801daf4fcb4a3a680286354c436b1423778a', style: {
+        return (hAsync(Host, { key: '351f3fda014f276d22b02b09f92ed7895a43ea85', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '167d080cefe222ac28d966bbcf0aca4a122c98ea', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '3b41b3fdb26fdf283792172de45fbcff37e1c90e', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
@@ -8026,11 +8335,11 @@ class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '24d4287067a9706099a20c46abee2d25a8271c1c', style: style }, hAsync("div", { key: '8b6f63ea974841ded9607c592d2c866a32bdccdf', class: {
+        return (hAsync(Host, { key: 'b80f1d57e87db4e921436b726cfeac4618a13d6b', style: style }, hAsync("div", { key: '43ae0ae2ec83cef2cad1ae59764b5463bb66eda0', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '2d35e79a95e5cd2ec8b055ca4d7a38e70ac13936', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '8802336bea4e78aa6ccf1a567d238005ff58c29b', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -8097,7 +8406,7 @@ class SdSelectMultiple extends BaseDropdownEvent {
     }; }
 }
 
-const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}sd-select-multiple-group{display:inline-block;height:fit-content}sd-select-multiple-group .sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white;color:#333333}sd-select-multiple-group .sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group__container{position:relative;width:100%;display:flex}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-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}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container sd-input{width:100%}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px}`;
+const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}sd-select-multiple-group{display:inline-block;height:fit-content}sd-select-multiple-group .sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white;color:#333333}sd-select-multiple-group .sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,sd-select-multiple-group .sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}sd-select-multiple-group .sd-select-multiple-group__container{position:relative;width:100%;display:flex}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-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;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container sd-input{width:100%}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px}`;
 
 class SdSelectMultipleGroup extends BaseDropdownEvent {
     constructor(hostRef) {
@@ -8136,6 +8445,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     searchText = null;
     itemIndex = -1;
     isScrolled = false;
+    isDropdownReady = false;
     // events
     sdChange;
     dropDownShow;
@@ -8164,8 +8474,10 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
                 searchInput?.blur();
             }
         }
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple-group__dropdown sd-select-option-group') || []);
-        const currentItem = optionElements?.[this.itemIndex];
+        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
+        // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
+        const actualIndex = this.useAll ? this.itemIndex + 1 : this.itemIndex;
+        const currentItem = optionElements?.[actualIndex];
         if (!currentItem || !this.isOpen)
             return;
         this.optionRef = currentItem;
@@ -8179,28 +8491,43 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     async isOpenChanged() {
         // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
         this.onDropdownToggle(this.isOpen);
-        const selectedOption = this.getSelectedOption();
-        if (!selectedOption) {
-            this.itemIndex = -1;
-        }
-        else {
-            this.itemIndex = this.options.indexOf(selectedOption[0]);
-        }
         this.dropDownShow?.emit({ isOpen: this.isOpen });
-        if (this.isOpen === false)
+        this.isDropdownReady = false;
+        if (this.isOpen === false) {
             return;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
-        const currentItem = optionElements?.[this.itemIndex];
-        // 드롭다운이 열릴 때 검색 입력에 포커스
-        if (this.searchable) {
-            const searchInput = await this.getNativeInputElement();
-            searchInput?.focus({ preventScroll: true });
         }
-        if (!currentItem)
-            return;
-        await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
-        this.scrollToOption(currentItem);
+        // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)
+        requestAnimationFrame(() => {
+            requestAnimationFrame(async () => {
+                const selectedOptions = this.getSelectedOption();
+                // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤
+                if (selectedOptions && selectedOptions.length > 0) {
+                    const selectedIndex = this.options.indexOf(selectedOptions[0]);
+                    const optionElements = Array.from(this.dropdownRef?.querySelectorAll('sd-select-option-group') || []);
+                    // useAll 사용시 "전체" 옵션 포함한 인덱스 사용
+                    const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;
+                    // 선택된 옵션이 화면 가운데에 오도록 index 조정
+                    const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);
+                    const currentItem = optionElements?.[targetIndex];
+                    if (currentItem) {
+                        this.scrollToOption(currentItem);
+                    }
+                }
+                this.isDropdownReady = true;
+                if (this.searchable) {
+                    const searchInput = await this.getNativeInputElement();
+                    if (searchInput) {
+                        requestAnimationFrame(() => {
+                            searchInput.focus({ preventScroll: true });
+                        });
+                    }
+                }
+            });
+        });
+    }
+    async open() {
+        await new Promise(resolve => setTimeout(resolve, 0));
+        this.isOpen = true;
     }
     componentWillLoad() {
         // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
@@ -8415,35 +8742,41 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     closeDropdown() {
         this.isOpen = false;
     }
-    scrollToOption(optionElement) {
+    async scrollToOption(optionElement) {
         if (!this.dropdownRef || !optionElement)
             return;
-        const dropdown = this.dropdownRef;
-        const optionTop = optionElement.offsetTop;
-        const optionHeight = optionElement.offsetHeight;
-        const dropdownScrollTop = dropdown.scrollTop;
-        const dropdownHeight = dropdown.clientHeight;
-        const searchContainer = dropdown.querySelector('.sd-select__search-container');
-        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
-        const visibleTop = dropdownScrollTop + searchOffset;
-        const visibleBottom = dropdownScrollTop + dropdownHeight;
-        if (optionTop < visibleTop) {
-            dropdown.scrollTop = optionTop - searchOffset;
-        }
-        else if (optionTop + optionHeight > visibleBottom) {
-            dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
-        }
+        requestAnimationFrame(() => {
+            const dropdown = this.dropdownRef;
+            const optionTop = optionElement.offsetTop;
+            const optionHeight = optionElement.offsetHeight;
+            const dropdownScrollTop = dropdown.scrollTop;
+            const dropdownHeight = dropdown.clientHeight;
+            const searchContainer = dropdown.querySelector('.sd-select-multiple-group__search-container');
+            const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
+            const visibleContentHeight = dropdownHeight - searchOffset;
+            const visibleTop = dropdownScrollTop + searchOffset;
+            const visibleBottom = dropdownScrollTop + dropdownHeight;
+            if (optionTop < visibleTop) {
+                dropdown.scrollTo({ top: optionTop - searchOffset, behavior: 'instant' });
+            }
+            else if (optionTop + optionHeight > visibleBottom) {
+                dropdown.scrollTo({
+                    top: optionTop + optionHeight - visibleContentHeight - searchOffset,
+                    behavior: 'instant',
+                });
+            }
+        });
     }
     render() {
         const style = {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: 'efc8661d6cd2e043b5e43e0872de3a9bff6d57a6', style: style }, hAsync("div", { key: 'e9f7615f75cb28974dececc8e847e868aef8210c', class: {
+        return (hAsync(Host, { key: '00e3f75c997fe76087ddfa2d9fef2ddb11a10a3e', style: style }, hAsync("div", { key: 'f7e5a9f0d3704e0cfb014c8b7a84e6c93d61d31b', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,
-            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: '37ea4df1408eebde9e9e6d6d42579a3c40da325a', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: '5b4d771e6ba76ce56974eeee2f01e6a267f557f5', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)
@@ -8467,7 +8800,10 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
         };
         if (this.isOpen === false)
             return null;
-        return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { class: "sd-select-multiple-group__dropdown", style: { ...style, ...this.dropdownStyle }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("div", { class: {
+        return (hAsync("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, hAsync("div", { style: { width: '0', height: '0', overflow: 'visible' } }, hAsync("div", { class: {
+                'sd-select-multiple-group__dropdown': true,
+                'sd-select-multiple-group__dropdown--ready': this.isDropdownReady,
+            }, style: { ...style, ...this.dropdownStyle }, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (hAsync("div", { class: {
                 'sd-select-multiple-group__search-container': true,
                 'sd-select-multiple-group__search-container--scrolled': this.isScrolled,
             }, onClick: event => event.stopPropagation() }, hAsync("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
@@ -8484,7 +8820,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
                     return;
                 }
                 this.handleOptionClick(detail);
-            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
+            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder)))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -8522,7 +8858,9 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             "isOpen": [32],
             "searchText": [32],
             "itemIndex": [32],
-            "isScrolled": [32]
+            "isScrolled": [32],
+            "isDropdownReady": [32],
+            "open": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8561,7 +8899,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync(Host, { key: 'd3235f4b0314c15a8d280377d88db6bf53f7eb79' }, hAsync("div", { key: '033fe384d67211a387d609a7b462330ee86c67a2', class: {
+        return (hAsync(Host, { key: 'd106374cd96d326e885b65ac94ecf1a397ea2ad9' }, hAsync("div", { key: 'e07601d9c735f7950102449342257a7e39d28a42', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -8647,7 +8985,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: 'db08c9cdb5179cccfa040fa03e06f286231bc83f', class: {
+        return (hAsync("div", { key: 'd00236bc84a194509b25efa21ef1c53a25923a60', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -8656,10 +8994,10 @@ class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'b723d71ef120c5d51f0ab859177d67814411ceaa', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '1630dfc22fb2ec65c186282f499ec4e6f93a228d', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'c635bb5ce073594dd05926529472db1665d5f86d', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '984289c89fe90f0cd40a3d022a29b9b974321db0', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: '97802250891eca095172dae897bb957e49f9b5e3', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '96fe449b31bce677693f2ad325a6529fc4b264e3', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: 'b01a4ad8c906d6990dcf5c8eb1affa17f3605452', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: '9103fa0bfe93caf8b5c3dea936334cd22727dff0', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss(); }
     static get cmpMeta() { return {
@@ -9808,7 +10146,7 @@ class SdTbody {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '96bedf612efa56d790df7070e2641f6769da81a9' }, hAsync("slot", { key: '9980c55cf76b1600034d8dcd60249b392c0c50f2' })));
+        return (hAsync(Host, { key: '7636f7ff23e8aa3c83ace885c5f2ad3fa1e57a45' }, hAsync("slot", { key: '9cdae57011b78e861dab1c16144642c534aaa9e4' })));
     }
     static get style() { return sdTbodyCss(); }
     static get cmpMeta() { return {
@@ -9832,11 +10170,11 @@ class SdTd {
     tdStyle;
     tdClass;
     render() {
-        return (hAsync(Host, { key: '182bd00cbbb22b4f3613e973d2999421a3f5f2cd', role: "cell", class: {
+        return (hAsync(Host, { key: '96933d25aa2342e56aaad5a447840bf51b0af078', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, hAsync("slot", { key: 'fff1a74106822c8092fa57ba785f6ab5be96edcd' })));
+            }, style: this.tdStyle }, hAsync("slot", { key: 'd6a500857bfc914b0443c5ced9607e15dc151c7c' })));
     }
     static get style() { return sdTdCss(); }
     static get cmpMeta() { return {
@@ -9861,7 +10199,7 @@ class SdTh {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'cbd2372809ca102893f62b3b4e2d51342cc4c52f', role: "columnheader" }, hAsync("slot", { key: 'c51c2635013c8d405bf3d95d46d2b99bc52c3326' })));
+        return (hAsync(Host, { key: '8b511af45184973c4daefe8bee11130934ef05be', role: "columnheader" }, hAsync("slot", { key: 'a72bff519a60499357ccce741fa0b90cdf9197b7' })));
     }
     static get style() { return sdThCss(); }
     static get cmpMeta() { return {
@@ -9981,7 +10319,7 @@ class SdToggle {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: 'b21fce826c30404ab3f30cc27a1866d9a7745402', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: '8bac810392c4aa1f0f04f13b37bc73210d70fe98', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: '2d2949701bb4bf24dbbce2e296d8cb82606f6a62', class: "sd-toggle__label" }, this.label), hAsync("div", { key: '42d39942bd284f3de320735a182bd53569782e1f', class: "sd-toggle__track" }, hAsync("div", { key: 'b2decb4e6c1a1e9459621ea409fec24cf8695f4b', class: "sd-toggle__thumb" }))));
+        return (hAsync("label", { key: 'dda95f842f686a3f595db6ecb651551f717cab18', "aria-checked": this.isChecked.toString(), "aria-disabled": this.disabled.toString(), role: "switch", "aria-label": this.label || 'toggle', class: this.toggleClasses }, hAsync("input", { key: 'a281a6572b7fca32242ba08ad45984445bd1a009', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onInput: this.handleChange }), this.label && hAsync("span", { key: 'dfae7796e9e421e7d6ebc6e6693e6266b2ff87cd', class: "sd-toggle__label" }, this.label), hAsync("div", { key: 'e4343307f2df5f5c68509a3e9576a811bd9192ff', class: "sd-toggle__track" }, hAsync("div", { key: 'be214081e5ccc21ad306e52ce186ba4dc56c6c3b', class: "sd-toggle__thumb" }))));
     }
     static get style() { return sdToggleCss(); }
     static get cmpMeta() { return {
@@ -10038,7 +10376,7 @@ class SdToggleButton {
         this.sdChange.emit(newValue);
     };
     render() {
-        return (hAsync("label", { key: 'ffa8699908132e9865ccd5b0dffafe6aa1265d8f', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: '772f24705287a4e7efac5f736b784dd3d9c0bf4d', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (hAsync("label", { key: '4ac2cac1d4b1da4d707f4ce84a03ffc7a8ec7cb8', class: this.buttonClasses, role: "button", "aria-pressed": this.isActive.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label || 'toggle button' }, this.label, hAsync("input", { key: 'e9a974d34d7b3803b5ed44dc1b2da1199daf5bef', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get style() { return sdToggleButtonCss(); }
     static get cmpMeta() { return {
@@ -10104,20 +10442,20 @@ class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (hAsync(Fragment, { key: 'a4cd9f882795ef5b39a877b004e7d51fccecbfcb' }, this.label ? (hAsync("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 })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: 'b9128e35e1f28869d0d163088f54b631c9104bf9', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '0a6db1e8478f25fd43735ac0cd8977ce2bce5ef6', class: {
+        return (hAsync(Fragment, { key: '55a62a0b80b8c10d8c0d8ced1a34178191b8a688' }, this.label ? (hAsync("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 })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: '21aaf4460591401ec5eb890d123e3cb381fb76f6', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: 'ee5d301a2fa72f95a0f89242b174f7e21a086a15', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, hAsync("i", { key: '176b79ce7db54479f2690aca9ae98252e1dfacd4', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'aa1f0d7da5135713d1d51ed2852210895d707931', class: {
+            } }, hAsync("i", { key: '4f7e09f6770fbde0f2e9df81d401ea7cd6739df2', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'd0856082e623129eb56aaab87e54d1b19f33555a', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), hAsync("div", { key: '147d42745d18180e92a81ed60404697afd6ea1e5', class: "sd-tooltip-menu__content", ref: el => {
+            } })), hAsync("div", { key: '40dc2a7d4254ed0e712f22cf19032e2f5ef846b4', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && hAsync("span", { key: '6204dc0ed996aa8c70cbb12a1388ed8ebce20552' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '7cb4aebb0077b2b17b78e2b2f82cfd90711cfc5f', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: 'f14b75687492169c4c24e7840c9e0907b2161ea2', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: 'fcf6ca6fa0c2a349ef0a6710399ab27e5ceffd3f', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && hAsync("span", { key: 'd897c210bb76de430a89243177f3a436cc684e09' }, this.el.textContent)), this.useClose && (hAsync("div", { key: 'ca41d884070a25443833162e2dc50fcb91a6bd2a', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '75c911fa76787dda3346b4f18d6169304966d49b', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '4d737bf6cc2952776016b9bc7f11cf90364cdcdb', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {
@@ -10293,7 +10631,7 @@ class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: 'e6c37c753808b41beeeefa5f04bdf543a48eaa05' });
+        return hAsync("slot", { key: 'c389b848b1dc63a0484f6000ac5443cce752e4ac' });
     }
     static get cmpMeta() { return {
         "$flags$": 777,
@@ -10319,7 +10657,7 @@ class SdTr {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '228bb6d6b5225bd035cce96cd817beb9e2734ab4', role: "row" }, hAsync("slot", { key: '8906dfdeb89afb1028a30a5b16b034f6c2ba67b9' })));
+        return (hAsync(Host, { key: '45ae0547de2437e9b815e0ed33226276787805f7', role: "row" }, hAsync("slot", { key: '98dabd2288d0db28bc9305f1b1b3298cb2a905d0' })));
     }
     static get style() { return sdTrCss(); }
     static get cmpMeta() { return {
@@ -10346,6 +10684,7 @@ registerComponents([
   SdInput,
   SdLoadingSpinner,
   SdModalCard,
+  SdNumberInput,
   SdPagination,
   SdPopover,
   SdPortal,