@sellmate/design-system 1.0.67 → 1.0.69

package/dist/esm/sd-modal-container.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, a as getElement, h } from './index-Dcpqhs6V.js';
+import { r as registerInstance, a as getElement, h } from './index-BGyJgVXm.js';
+import { u as unregisterModal, r as registerModal, s as setModalInteractive, i as isTopInteractiveModal, a as requestCloseForModal } from './modal-stack-DRVnqiWc.js';
 
-const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 9999);display:flex;align-items:center;justify-content:center}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1}sd-modal-container .sd-modal-container__content{position:relative;z-index:1;display:grid;place-items:center}sd-modal-container .sd-modal-container__content>*{grid-row:1;grid-column:1}sd-modal-container .sd-modal-container__modal{opacity:0;transform:scale(0);transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
+const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
 
 let modalIdCounter = 0;
 const ANIMATION_DURATION = 350;
@@ -9,31 +10,21 @@ const SdModalContainer = class {
         registerInstance(this, hostRef);
     }
     get el() { return getElement(this); }
-    entries = [];
+    autoRemove = false;
+    entry;
     isVisible = false;
-    isBackdropVisible = false;
-    contentRef;
-    containerDismissTimerId;
-    previousBodyOverflow = null;
-    bodyScrollLocked = false;
-    handleKeydown(e) {
-        if (e.key === 'Escape') {
-            const top = this.getTopEntry();
-            if (!top)
-                return;
-            if (top.persistent) {
-                this.shakeModal(top.modalEl);
-                return;
-            }
-            this.dispatchClose(top.modalEl);
-        }
-    }
+    backdropVisible = false;
+    layerRef;
     async open(options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createConfirmModal(id, options);
         this.attachModalEventListeners(id, modalEl);
-        this.registerEntry(id, modalEl, modalRef, {
+        this.mountEntry({
+            id,
+            modalEl,
+            modalRef,
             persistent: !!options.persistent,
+            closing: false,
         });
         return id;
     }
@@ -41,8 +32,12 @@ const SdModalContainer = class {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createLoadingModal(id, options);
         this.attachLoadingModalEventListeners(id, modalEl);
-        this.registerEntry(id, modalEl, modalRef, {
+        this.mountEntry({
+            id,
+            modalEl,
+            modalRef,
             persistent: !!options.persistent,
+            closing: false,
         });
         return id;
     }
@@ -51,70 +46,118 @@ const SdModalContainer = class {
         element.setAttribute('data-modal-id', id);
         element.classList.add('sd-modal-container__modal');
         this.attachModalEventListeners(id, element);
-        this.registerEntry(id, element, modalRef, {
+        this.mountEntry({
+            id,
+            modalEl: element,
+            modalRef,
             persistent: !!options.persistent,
+            closing: false,
         });
         return id;
     }
-    attachModalEventListeners(id, modalEl) {
-        modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
-        modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
-        modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
-    }
-    attachLoadingModalEventListeners(id, modalEl) {
-        modalEl.addEventListener('sdClick', () => {
-            const entry = (this.entries ?? []).find(item => item.id === id);
-            entry?.modalRef._triggerClick?.();
-        });
-    }
-    dispatchClose(modalEl) {
-        modalEl.dispatchEvent(new CustomEvent('sdClose'));
-    }
-    registerEntry(id, modalEl, modalRef, meta) {
-        if (this.containerDismissTimerId) {
-            clearTimeout(this.containerDismissTimerId);
-            this.containerDismissTimerId = undefined;
-        }
-        this.entries = [
-            ...(this.entries ?? []),
-            {
-                id,
-                modalEl,
-                modalRef,
-                persistent: meta.persistent,
-                closing: false,
-            },
-        ];
-        this.isVisible = true;
-        this.setBodyScrollLock(true);
-        requestAnimationFrame(() => {
-            if (!this.contentRef)
-                return;
-            this.contentRef.appendChild(modalEl);
-            this.waitForModalReady(modalEl).then(() => {
-                requestAnimationFrame(() => {
-                    const currentEntry = (this.entries ?? []).find(item => item.id === id);
-                    if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
-                        return;
-                    this.isBackdropVisible = true;
-                    modalEl.classList.add('sd-modal-container__modal--visible');
-                });
+    componentDidRender() {
+        if (!this.entry || this.entry.closing || !this.layerRef)
+            return;
+        if (this.entry.modalEl.isConnected)
+            return;
+        const { id, modalEl } = this.entry;
+        this.layerRef.appendChild(modalEl);
+        this.waitForModalReady(modalEl).then(() => {
+            requestAnimationFrame(() => {
+                if (!this.entry || this.entry.id !== id || this.entry.closing || !modalEl.isConnected)
+                    return;
+                this.backdropVisible = true;
+                modalEl.classList.add('sd-modal-container__modal--visible');
             });
         });
     }
+    disconnectedCallback() {
+        if (this.entry?.dismissTimerId)
+            clearTimeout(this.entry.dismissTimerId);
+        if (this.entry)
+            unregisterModal(this.entry.id);
+    }
     async dismissById(id, reason) {
-        this.requestDismiss(id, reason);
+        if (this.entry?.id !== id)
+            return;
+        this.requestDismiss(reason);
     }
     async update(id, props) {
-        const entry = (this.entries ?? []).find(e => e.id === id);
-        if (!entry || entry.closing)
+        if (!this.entry || this.entry.id !== id || this.entry.closing)
             return;
-        const tag = entry.modalEl.tagName.toLowerCase();
+        const tag = this.entry.modalEl.tagName.toLowerCase();
         if (tag === 'sd-loading-modal') {
-            this.applyLoadingProps(entry.modalEl, props);
+            this.applyLoadingProps(this.entry.modalEl, props);
+            return;
         }
-        else {
-            this.applyProps(entry.modalEl, props);
+        this.applyProps(this.entry.modalEl, props);
+    }
+    mountEntry(entry) {
+        if (this.entry) {
+            throw new Error('[sd-modal-container] This instance already manages an active modal.');
+        }
+        this.entry = entry;
+        this.backdropVisible = false;
+        this.isVisible = true;
+        registerModal({
+            id: entry.id,
+            persistent: entry.persistent,
+            requestClose: () => this.dispatchClose(),
+            shake: () => this.shakeModal(entry.modalEl),
+            setZIndex: zIndex => {
+                this.el.style.setProperty('--sd-modal-container-z-index', String(zIndex));
+            },
+        });
+    }
+    attachModalEventListeners(_id, modalEl) {
+        modalEl.addEventListener('sdOk', () => this.requestDismiss('confirm'));
+        modalEl.addEventListener('sdCancel', () => this.requestDismiss('cancel'));
+        modalEl.addEventListener('sdClose', () => this.requestDismiss('close'));
+    }
+    attachLoadingModalEventListeners(_id, modalEl) {
+        modalEl.addEventListener('sdClick', () => {
+            this.entry?.modalRef._triggerClick?.();
+        });
+    }
+    dispatchClose() {
+        this.entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
+    }
+    requestDismiss(reason) {
+        const currentEntry = this.entry;
+        if (!currentEntry || currentEntry.closing)
+            return;
+        currentEntry.modalEl.classList.remove('sd-modal-container__modal--visible');
+        const dismissTimerId = setTimeout(() => {
+            this.finalizeDismiss(currentEntry.id);
+        }, ANIMATION_DURATION);
+        setModalInteractive(currentEntry.id, false);
+        this.entry = {
+            ...currentEntry,
+            closing: true,
+            dismissTimerId,
+        };
+        this.backdropVisible = false;
+        if (reason === 'confirm')
+            currentEntry.modalRef._triggerOk();
+        else if (reason === 'cancel')
+            currentEntry.modalRef._triggerCancel();
+        else if (reason === 'close')
+            currentEntry.modalRef._triggerClose();
+    }
+    finalizeDismiss(id) {
+        const currentEntry = this.entry;
+        if (!currentEntry || currentEntry.id !== id)
+            return;
+        if (currentEntry.dismissTimerId)
+            clearTimeout(currentEntry.dismissTimerId);
+        currentEntry.modalEl.remove();
+        unregisterModal(id);
+        currentEntry.modalRef._triggerDismissed();
+        this.entry = undefined;
+        this.backdropVisible = false;
+        this.isVisible = false;
+        if (this.autoRemove) {
+            this.el.remove();
         }
     }
     createConfirmModal(id, options) {
@@ -137,12 +180,10 @@ const SdModalContainer = class {
         if (this.hasOwnProp(options, 'message'))
             this.setAttr(el, 'message', options.message);
         if (this.hasOwnProp(options, 'useButton')) {
-            if (options.useButton) {
+            if (options.useButton)
                 el.setAttribute('use-button', '');
-            }
-            else {
+            else
                 el.removeAttribute('use-button');
-            }
         }
         if (this.hasOwnProp(options, 'buttonLabel')) {
             this.setAttr(el, 'button-label', options.buttonLabel);
@@ -184,14 +225,9 @@ const SdModalContainer = class {
             el.tagContents = options.tagContents;
     }
     handleBackdropClick = () => {
-        const top = this.getTopEntry();
-        if (!top)
-            return;
-        if (top.persistent) {
-            this.shakeModal(top.modalEl);
+        if (!this.entry || !isTopInteractiveModal(this.entry.id))
             return;
-        }
-        this.dispatchClose(top.modalEl);
+        requestCloseForModal(this.entry.id);
     };
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
@@ -201,73 +237,6 @@ const SdModalContainer = class {
             modalEl.classList.add(cls);
         });
     }
-    disconnectedCallback() {
-        (this.entries ?? []).forEach(entry => {
-            if (entry.dismissTimerId)
-                clearTimeout(entry.dismissTimerId);
-        });
-        if (this.containerDismissTimerId)
-            clearTimeout(this.containerDismissTimerId);
-        this.setBodyScrollLock(false);
-    }
-    setBodyScrollLock(lock) {
-        if (typeof document === 'undefined')
-            return;
-        if (lock === this.bodyScrollLocked)
-            return;
-        if (lock) {
-            this.previousBodyOverflow = document.body.style.overflow || '';
-            document.body.style.overflow = 'hidden';
-        }
-        else {
-            document.body.style.overflow = this.previousBodyOverflow ?? '';
-            this.previousBodyOverflow = null;
-        }
-        this.bodyScrollLocked = lock;
-    }
-    getTopEntry() {
-        return [...(this.entries ?? [])].reverse().find(entry => !entry.closing);
-    }
-    requestDismiss(id, reason) {
-        const entry = (this.entries ?? []).find(item => item.id === id);
-        if (!entry || entry.closing)
-            return;
-        entry.modalEl.classList.remove('sd-modal-container__modal--visible');
-        const remainingActive = (this.entries ?? []).filter(item => item.id !== id && !item.closing);
-        if (remainingActive.length === 0) {
-            this.isBackdropVisible = false;
-        }
-        const dismissTimerId = setTimeout(() => {
-            this.finalizeDismiss(id);
-        }, ANIMATION_DURATION);
-        this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
-        if (reason === 'confirm')
-            entry.modalRef._triggerOk();
-        else if (reason === 'cancel')
-            entry.modalRef._triggerCancel();
-        else if (reason === 'close')
-            entry.modalRef._triggerClose();
-    }
-    finalizeDismiss(id) {
-        const entry = (this.entries ?? []).find(item => item.id === id);
-        if (!entry)
-            return;
-        if (entry.dismissTimerId)
-            clearTimeout(entry.dismissTimerId);
-        entry.modalEl.remove();
-        const nextEntries = (this.entries ?? []).filter(item => item.id !== id);
-        this.entries = nextEntries;
-        if (nextEntries.length === 0) {
-            this.setBodyScrollLock(false);
-            this.containerDismissTimerId = setTimeout(() => {
-                if ((this.entries ?? []).length === 0) {
-                    this.isVisible = false;
-                }
-                this.containerDismissTimerId = undefined;
-            }, ANIMATION_DURATION);
-        }
-        entry.modalRef._triggerDismissed();
-    }
     waitForModalReady(modalEl) {
         const componentOnReady = modalEl.componentOnReady;
         if (typeof componentOnReady === 'function') {
@@ -288,12 +257,14 @@ const SdModalContainer = class {
         el.setAttribute(name, value);
     }
     render() {
-        if (!this.isVisible)
+        if (!this.isVisible || !this.entry)
             return null;
-        return (h("div", { class: "sd-modal-container" }, h("div", { class: {
+        return (h("div", { class: "sd-modal-container" }, h("div", { class: "sd-modal-container__layer", "data-modal-id": this.entry.id, ref: el => {
+                this.layerRef = el;
+            } }, h("div", { class: {
                 'sd-modal-container__backdrop': true,
-                'sd-modal-container__backdrop--visible': this.isBackdropVisible,
-            }, onClick: this.handleBackdropClick }), h("div", { class: "sd-modal-container__content", ref: el => { this.contentRef = el; } })));
+                'sd-modal-container__backdrop--visible': this.backdropVisible,
+            }, onClick: this.handleBackdropClick }))));
     }
 };
 SdModalContainer.style = sdModalContainerCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dcpqhs6V.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 
 const numberInput = {
@@ -124,6 +124,7 @@ const SdNumberInput = class {
     label;
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     placeholder = '입력해 주세요.';
     disabled = false;
     width;
@@ -382,12 +383,12 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: 'f81b01b27960130cbf6b37a29fc0ddc11750768e', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '0f9b5a0b966c7d51d5913c61a585ff789fa4973f', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'b037ee3062253bf229f9639dd04c7475657fabb6', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '39a9f73a15008a481e758e663e027cd4f6454146', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (h("sd-field", { key: 'a9512622774c930c8b70b3d739a405e2434f22a7', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'f068ab7a042a97dfac7aaf160508757306dddc14', class: "sd-number-input__content" }, this.useButton && (h("button", { key: '37341e813e7902f07c2731c708e1aadc53411653', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '740b2715518534b0ece5aa3b3f6dfd0dfafd6368', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '050334ce25bb767e7f11dca886d4aeecaa1ed3dc', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: 'a72697d136eeee52ef23fee6ee2017b6dd37e54c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '9b16f311a1408dfc84124ec938a98b13635f6dc6', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '572e2a8a1d7283e3568a85ba6c1bd506c3ec4453', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (h("span", { key: '845202622b3377add18782d96d0af0c49caf95ec', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '208c976c1b755bec0cd7efb5ceacb3e07dce3a7d', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'fe9848c8f044d01378dc183a80d3f81eb56a67f9', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (h("span", { key: '13a07217ee34c793669b061c240062805a40db60', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: 'c3557737be6cc5dc6c5ab171bcc078cf564fb2b0', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '530cf50331768df5be16639e46ce3f7f438ffe02', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -1,16 +1,75 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-Dcpqhs6V.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-BGyJgVXm.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 
-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 pagination = {
+	height: "24",
+	paddingX: "6",
+	radius: "6",
+	gap: "12",
+	move: {
+		gap: "4"
+	},
+	icon: "12",
+	typography: {
+		"default": {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			lineHeight: "20"},
+		selected: {
+			fontWeight: "700"}
+	},
+	item: {
+		bg: {
+			hover: "#EEEEEE",
+			selected: "#E6F1FF"
+		},
+		content: {
+			"default": "#555555",
+			hover: "#004290",
+			selected: "#004290"
+		}
+	}
+};
+var paginationTokens = {
+	pagination: pagination
+};
 
-const BUTTON_WIDTH = {
-    1: 26,
-    2: 36,
-    3: 42,
-    4: 50,
-    5: 58,
+const PAGINATION_LAYOUT = {
+    height: `${paginationTokens.pagination.height}px`,
+    paddingX: `${paginationTokens.pagination.paddingX}px`,
+    radius: `${paginationTokens.pagination.radius}px`,
+    gap: `${paginationTokens.pagination.gap}px`,
+    moveGap: `${paginationTokens.pagination.move.gap}px`,
+    iconSize: Number(paginationTokens.pagination.icon),
+};
+const PAGINATION_TYPOGRAPHY = {
+    fontFamily: paginationTokens.pagination.typography.default.fontFamily,
+    fontSize: `${paginationTokens.pagination.typography.default.fontSize}px`,
+    lineHeight: `${paginationTokens.pagination.typography.default.lineHeight}px`,
+    fontWeightDefault: paginationTokens.pagination.typography.default.fontWeight,
+    fontWeightSelected: paginationTokens.pagination.typography.selected.fontWeight,
 };
+const PAGINATION_COLORS = {
+    contentDefault: paginationTokens.pagination.item.content.default,
+    contentHover: paginationTokens.pagination.item.content.hover,
+    contentSelected: paginationTokens.pagination.item.content.selected,
+    bgHover: paginationTokens.pagination.item.bg.hover,
+    bgSelected: paginationTokens.pagination.item.bg.selected,
+    // TODO: 토큰 반영 후 교체 — nav 화살표 색상은 현재 토큰에 없음
+    iconDefault: '#888888',
+};
+
+const sdPaginationCss = () => `sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected);cursor:default}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}`;
+
 const PER_PAGE = 10;
+const BUTTON_WIDTH = {
+    1: 24,
+    2: 34,
+    3: 40,
+    4: 48,
+    5: 56,
+};
 const SdPagination = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -20,13 +79,6 @@ const SdPagination = class {
     lastPage = 1;
     simple = false;
     pageChange;
-    get paginationClasses() {
-        const classes = ['sd-pagination'];
-        if (this.simple) {
-            classes.push('sd-pagination--simple');
-        }
-        return classes.join(' ');
-    }
     get pageNumbers() {
         const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
         const end = Math.min(start + PER_PAGE - 1, this.lastPage);
@@ -37,51 +89,73 @@ const SdPagination = class {
         const maxPageLength = lastPageNum.toString().length;
         return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
     }
-    handlePageChange(page) {
+    get isFirstGroup() {
+        return this.currentPage <= PER_PAGE;
+    }
+    get isLastGroup() {
+        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
+    }
+    handlePageChange = (page) => {
         if (page < 1 || page > this.lastPage)
             return;
         this.currentPage = page;
         this.pageChange.emit(page);
-    }
-    handleGroupChange(direction) {
+    };
+    handleGroupChange = (direction) => {
         const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
         const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
         this.handlePageChange(newPage);
-    }
-    get isFirstGroup() {
-        return this.currentPage <= PER_PAGE;
-    }
-    get isLastGroup() {
-        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
-        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
+    };
+    renderNavButton(iconName, ariaLabel, onClick) {
+        return (h("button", { type: "button", class: "sd-pagination__nav", "aria-label": ariaLabel, onClick: onClick }, h("sd-icon", { name: iconName, size: PAGINATION_LAYOUT.iconSize, color: PAGINATION_COLORS.iconDefault })));
     }
     renderPrevButtons() {
         if (this.simple) {
             if (this.currentPage <= 1)
                 return null;
-            return (h(Fragment, null, h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to previous page", onClick: () => this.handlePageChange(this.currentPage - 1) }, h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
-        }
-        if (!this.isFirstGroup) {
-            return (h(Fragment, null, h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to previous page group", onClick: () => this.handleGroupChange('backward') }, h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
+            return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page', () => this.handlePageChange(this.currentPage - 1))));
         }
+        if (this.isFirstGroup)
+            return null;
+        return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page group', () => this.handleGroupChange('backward'))));
     }
     renderNextButtons() {
         if (this.simple) {
             if (this.currentPage >= this.lastPage)
                 return null;
-            return (h(Fragment, null, h("button", { "aria-label": "Go to next page", onClick: () => this.handlePageChange(this.currentPage + 1) }, h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
-        }
-        if (!this.isLastGroup) {
-            return (h(Fragment, null, h("button", { "aria-label": "Go to next page group", onClick: () => this.handleGroupChange('forward') }, h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
+            return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page', () => this.handlePageChange(this.currentPage + 1)), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
         }
+        if (this.isLastGroup)
+            return null;
+        return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page group', () => this.handleGroupChange('forward')), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
     }
     render() {
-        return (h("div", { key: '5136947eb1aa1539d240af359eec8763d708906b', class: this.paginationClasses }, h("div", { key: '3114f336a27b4f3bf6249fd82649b9d21831a57a', 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: 'a85d2e89389d2638e797873e18717d1079a8b156', class: "append-btns" }, this.renderNextButtons())));
+        const cssVars = {
+            '--sd-pagination-height': PAGINATION_LAYOUT.height,
+            '--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
+            '--sd-pagination-radius': PAGINATION_LAYOUT.radius,
+            '--sd-pagination-gap': PAGINATION_LAYOUT.gap,
+            '--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
+            '--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
+            '--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
+            '--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
+            '--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
+            '--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
+            '--sd-pagination-content': PAGINATION_COLORS.contentDefault,
+            '--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
+            '--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
+            '--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
+            '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
+            '--sd-pagination-item-width': `${this.buttonWidth}px`,
+        };
+        return (h("div", { key: '1f6d3909c5c7f17701c405f058bf999020d9424e', class: {
+                'sd-pagination': true,
+                'sd-pagination--simple': this.simple,
+            }, style: cssVars }, h("div", { key: '9faaf4f1033e406ecaad7ed593a1610bb7002631', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+                'sd-pagination__item': true,
+                'sd-pagination__item--selected': this.currentPage === n,
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'c8d21679938032bee223f6dfefff3a87dc5badec', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -108,6 +182,7 @@ const SdSelectV2 = class {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     error = false;
     hint = '';
     errorMessage = '';
@@ -300,13 +375,13 @@ const SdSelectV2 = class {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: 'c9f08598c8f9852ab4000f056621dfef238e16de', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '6074cfea700e1f3ea03aaedb0146d7dffdaa7101', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '302103a425963e5d577b01ad179d5af82e6f30b1', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: '4840cfcf19e262903110245f88b73f3f03713624', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: 'a22bca400e5d10ee29e569da04d36b9291a1dade', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '0df4ad35bb284298708a0c1e11ce0e3c28d16ed8', ...portalProps }, h("sd-select-v2-listbox", { key: '90c18612d553342be091a30e05194bab91407c76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, h("sd-select-v2-trigger", { key: '4b34dd8007864623d17c80b4e5cea02aa4db954a', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '7ec2c4ca8e32f877a894f9f766d3558c10d66596', ...portalProps }, h("sd-select-v2-listbox", { key: 'c804a19a142d2978d8fb4eaa33ad2a6a7028e7d3', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{