@sellmate/design-system 1.0.67 → 1.0.69

package/dist/collection/components/sd-modal-container/sd-modal-container.js

@@ -1,33 +1,24 @@
 import { h } from "@stencil/core";
+import { isTopInteractiveModal, registerModal, requestCloseForModal, setModalInteractive, unregisterModal, } from "../../utils/modal-stack";
 let modalIdCounter = 0;
 const ANIMATION_DURATION = 350;
 export class SdModalContainer {
     el;
-    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;
     }
@@ -35,8 +26,12 @@ export class SdModalContainer {
         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;
     }
@@ -45,70 +40,118 @@ export class SdModalContainer {
         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) {
@@ -131,12 +174,10 @@ export class SdModalContainer {
         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);
@@ -178,14 +219,9 @@ export class SdModalContainer {
             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';
@@ -195,73 +231,6 @@ export class SdModalContainer {
             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') {
@@ -282,12 +251,14 @@ export class SdModalContainer {
         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 }))));
     }
     static get is() { return "sd-modal-container"; }
     static get originalStyleUrls() {
@@ -300,11 +271,35 @@ export class SdModalContainer {
             "$": ["sd-modal-container.css"]
         };
     }
+    static get properties() {
+        return {
+            "autoRemove": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-remove",
+                "defaultValue": "false"
+            }
+        };
+    }
     static get states() {
         return {
-            "entries": {},
+            "entry": {},
             "isVisible": {},
-            "isBackdropVisible": {}
+            "backdropVisible": {}
         };
     }
     static get methods() {
@@ -497,13 +492,4 @@ export class SdModalContainer {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "handleKeydown",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

package/dist/collection/components/sd-number-input/sd-number-input.js

@@ -13,6 +13,7 @@ export class SdNumberInput {
     label;
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     placeholder = '입력해 주세요.';
     disabled = false;
     width;
@@ -271,12 +272,12 @@ export class SdNumberInput {
             '--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 }))))));
     }
@@ -499,6 +500,33 @@ export class SdNumberInput {
                 "attribute": "addon-label",
                 "defaultValue": "''"
             },
+            "addonAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
+            },
             "placeholder": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/sd-pagination/sd-pagination.config.js

@@ -0,0 +1,25 @@
+import paginationTokens from "../../tokens/generated/component.pagination.json";
+export 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),
+};
+export 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,
+};
+export 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',
+};

package/dist/collection/components/sd-pagination/sd-pagination.css

@@ -1,74 +1,90 @@
+sd-pagination {
+  display: inline-flex;
+}
+
 .sd-pagination {
-  display: flex;
-  flex-flow: row nowrap;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  gap: 8px;
-  color: #555555;
-  width: 100%;
-  font-size: 12px;
+  gap: var(--sd-pagination-gap);
+  font-family: var(--sd-pagination-font-family);
 }
-.sd-pagination .prepend-btns {
-  display: flex;
-  flex-flow: row nowrap;
+.sd-pagination__group {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  width: 60px;
+  gap: var(--sd-pagination-move-gap);
+  min-width: calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap));
 }
-.sd-pagination .prepend-btns button {
-  width: 26px;
-  height: 26px;
-  border: 0;
-  background: none;
+.sd-pagination__group--prev {
+  justify-content: flex-end;
 }
-.sd-pagination .prepend-btns button:hover {
-  border: 1px solid #006AC1;
-  border-radius: 14px;
+.sd-pagination__group--next {
+  justify-content: flex-start;
 }
-.sd-pagination .append-btns {
-  display: flex;
-  flex-flow: row nowrap;
+.sd-pagination__numbers {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  width: 60px;
+  gap: var(--sd-pagination-move-gap);
 }
-.sd-pagination .append-btns button {
-  width: 26px;
-  height: 26px;
+.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;
-  background: none;
+  border-radius: var(--sd-pagination-radius);
+  cursor: pointer;
+  outline: none;
 }
-.sd-pagination .append-btns button:hover {
-  border: 1px solid #006AC1;
-  border-radius: 14px;
+.sd-pagination__nav:hover {
+  background-color: var(--sd-pagination-bg-hover);
 }
-.sd-pagination .pagination-btn {
-  display: flex;
+.sd-pagination__item {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 14px;
-  outline: none;
-  border: none;
+  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;
-  height: 26px;
-  color: #555555;
-  width: var(--pagination-btn-width, 26px);
+  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 .pagination-btn--selected {
-  background-color: #006AC1;
-  color: white;
+.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 .pagination-btn:hover {
-  border: 1px solid #006AC1;
+.sd-pagination__item--selected:hover {
+  background-color: var(--sd-pagination-bg-selected);
+  color: var(--sd-pagination-content-selected);
 }
-.sd-pagination--simple .pagination-info {
-  line-height: 26px;
-  display: flex;
-  flex-flow: row nowrap;
+.sd-pagination__info {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
+  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--simple .pagination-info .current-page,
-.sd-pagination--simple .pagination-info .last-page {
-  padding: 0 2px;
+.sd-pagination__current {
+  color: var(--sd-pagination-content-selected);
+  font-weight: var(--sd-pagination-font-weight-selected);
 }