@sellmate/design-system 1.20.0 → 1.21.0

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

@@ -3,43 +3,77 @@ import { nanoid } from "nanoid/non-secure";
 import { NUMBER_INPUT_SIZE_MAP, NUMBER_INPUT_COLORS, NUMBER_INPUT_STEPPER, NUMBER_INPUT_HINT, NUMBER_INPUT_ERROR_MESSAGE, NUMBER_INPUT_CONTENTS_GAP, } from "./sd-number-input.config";
 export class SdNumberInput {
     el;
+    /** 입력 크기 */
     size = 'sm';
+    /** 최솟값 */
     min = Number.NEGATIVE_INFINITY;
+    /** 최댓값 */
     max = Number.POSITIVE_INFINITY;
+    /** 스텝 단위 */
     step = 1;
+    /** 증감 버튼 표시 여부 */
     useButton = false;
+    /** 소수점 입력 허용 여부 */
     useDecimal = false;
+    /** 입력 값 */
     value = null;
+    /** 레이블 텍스트 */
     label;
+    /** 레이블 너비 */
     labelWidth = '';
+    /** 레이블 영역 아이콘 */
     icon = undefined;
+    /** 레이블 툴팁 텍스트 */
     labelTooltip = '';
+    /** 레이블 툴팁 상세 옵션 */
     labelTooltipProps = null;
+    /** 필드 우측 어드온 레이블 */
     addonLabel = '';
+    /** 어드온 정렬 방향 */
     addonAlign = 'start';
+    /** 플레이스홀더 텍스트 */
     placeholder = '입력해 주세요.';
+    /** 비활성 상태 여부 */
     disabled = false;
+    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
     width;
+    /** 유효성 검사 규칙 목록 */
     rules = [];
+    /** 마운트 시 자동 포커스 여부 */
     autoFocus = false;
+    /** 필드 상태 (없으면 rules 결과로 자동 결정) */
     status;
+    /** 필드 하단 힌트 텍스트 */
     hint = '';
+    /** 에러 메시지 */
     errorMessage = '';
+    /** 입력 앞에 표시할 접두 텍스트 */
     inputPrefix = '';
+    /** 입력 뒤에 표시할 접미 텍스트 */
     inputSuffix = '';
+    /** 네이티브 input에 추가할 클래스 */
     inputClass = '';
+    /** 읽기 전용 여부 */
     readonly = false;
+    /** 네이티브 input에 적용할 인라인 스타일 */
     inputStyle = {};
+    /** 에러 상태 여부 */
     error = false;
+    /** 포커스 상태 여부 */
     focused = false;
+    /** 호버 상태 여부 */
     hovered = false;
     internalValue = null;
     displayValue = '';
     nativeEl = undefined;
     formField;
+    /** 폼 연동용 name 속성 */
     name = nanoid();
+    /** 값이 변경될 때 발생합니다. */
     update;
+    /** 포커스될 때 발생합니다. */
     focus;
+    /** 포커스를 잃을 때 발생합니다. */
     blur;
     toNumber(val) {
         if (val === null || val === undefined || val === '')
@@ -117,18 +151,23 @@ export class SdNumberInput {
             this.update?.emit(newValue);
         }
     }
+    /** 유효성 검사를 실행합니다. */
     async sdValidate() {
         this.formField?.sdValidate();
     }
+    /** 값과 유효성 상태를 초기화합니다. */
     async sdReset() {
         this.formField?.sdReset();
     }
+    /** 유효성 상태만 초기화합니다. */
     async sdResetValidate() {
         this.formField?.sdResetValidation();
     }
+    /** 입력 필드에 포커스를 이동합니다. */
     async sdFocus() {
         this.formField?.sdFocus();
     }
+    /** 네이티브 input 엘리먼트를 반환합니다. */
     async sdGetNativeElement() {
         return this.nativeEl || null;
     }
@@ -275,15 +314,15 @@ 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: 'f322e07238237b4b609fbc3cd819cf2856eb3e63', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '8e4e7561a8b42b4a8b2e1f9559f7409d17f32c14', class: {
+        return (h("sd-field", { key: 'f07710abbe74849369a3d0d6444750f71ed75e7b', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'ad70ff68bb24fe02c25a57dd3de0b5ef38ceef8a', class: {
                 'sd-number-input__content': true,
                 'sd-number-input__content--no-stepper': !this.useButton,
-            } }, this.useButton && (h("button", { key: '642a5ce069d0af6347ecdbbb32c67ce2d8967cf4', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'd321af0b38dc8771ca58b52d079fe440551b4efc', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+            } }, this.useButton && (h("button", { key: '90305a8863c6b6ba3d3afce695c5f61204424c46', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'e6440e5b63d4860d05f0573690a4064f7e6729ac', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && h("span", { key: '5b84c95d1e4e8e151c9c71b8ff6513185e97dbf4', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: '0580882231474e80471085e7d91748943caf2f73', 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: 'ae2e8d052471925a5c794dcf1041a7ddbfe66652', class: "sd-number-input__prefix" }, this.inputPrefix), h("input", { key: 'a19917bfbe10b6d121e61e374a134207c9eb7fd7', 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: 'd24110a5913272b0379f36823507c3c6ea4102be', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '2bcf9b96f875322b269630f14bbec6c64d55f042', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '809fb4ae2f33c4812bf329abc7dc1a9f78e9dd81', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && h("span", { key: '352e2a645c8db62c8d887b1a1f490ade187d05f0', class: "sd-number-input__suffix" }, this.inputSuffix), this.useButton && (h("button", { key: '5c4f1153f6488cb95502bfa7f2bcad073bccb593', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'c9e0924126fb39492e8a696fa2628f367b8e2058', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
@@ -319,7 +358,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uD06C\uAE30"
                 },
                 "getter": false,
                 "setter": false,
@@ -339,7 +378,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCD5C\uC19F\uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -359,7 +398,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uCD5C\uB313\uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -379,7 +418,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC2A4\uD15D \uB2E8\uC704"
                 },
                 "getter": false,
                 "setter": false,
@@ -399,7 +438,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC99D\uAC10 \uBC84\uD2BC \uD45C\uC2DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -419,7 +458,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC18C\uC218\uC810 \uC785\uB825 \uD5C8\uC6A9 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -439,7 +478,7 @@ export class SdNumberInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uAC12"
                 },
                 "getter": false,
                 "setter": false,
@@ -459,7 +498,7 @@ export class SdNumberInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -478,7 +517,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uB108\uBE44"
                 },
                 "getter": false,
                 "setter": false,
@@ -503,7 +542,7 @@ export class SdNumberInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uC601\uC5ED \uC544\uC774\uCF58"
                 },
                 "getter": false,
                 "setter": false,
@@ -521,7 +560,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -548,7 +587,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB808\uC774\uBE14 \uD234\uD301 \uC0C1\uC138 \uC635\uC158"
                 },
                 "getter": false,
                 "setter": false,
@@ -566,7 +605,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC6B0\uCE21 \uC5B4\uB4DC\uC628 \uB808\uC774\uBE14"
                 },
                 "getter": false,
                 "setter": false,
@@ -593,7 +632,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5B4\uB4DC\uC628 \uC815\uB82C \uBC29\uD5A5"
                 },
                 "getter": false,
                 "setter": false,
@@ -613,7 +652,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD50C\uB808\uC774\uC2A4\uD640\uB354 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -633,7 +672,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uBE44\uD65C\uC131 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -653,7 +692,7 @@ export class SdNumberInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uB108\uBE44 (\uC22B\uC790\uBA74 px, \uBB38\uC790\uC5F4\uC774\uBA74 \uADF8\uB300\uB85C \uC801\uC6A9)"
                 },
                 "getter": false,
                 "setter": false,
@@ -679,7 +718,7 @@ export class SdNumberInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC \uADDC\uCE59 \uBAA9\uB85D"
                 },
                 "getter": false,
                 "setter": false,
@@ -697,7 +736,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -717,7 +756,7 @@ export class SdNumberInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uC0C1\uD0DC (\uC5C6\uC73C\uBA74 rules \uACB0\uACFC\uB85C \uC790\uB3D9 \uACB0\uC815)"
                 },
                 "getter": false,
                 "setter": false,
@@ -736,7 +775,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD544\uB4DC \uD558\uB2E8 \uD78C\uD2B8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -756,7 +795,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uBA54\uC2DC\uC9C0"
                 },
                 "getter": false,
                 "setter": false,
@@ -776,7 +815,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uC55E\uC5D0 \uD45C\uC2DC\uD560 \uC811\uB450 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -796,7 +835,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC785\uB825 \uB4A4\uC5D0 \uD45C\uC2DC\uD560 \uC811\uBBF8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,
                 "setter": false,
@@ -816,7 +855,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB124\uC774\uD2F0\uBE0C input\uC5D0 \uCD94\uAC00\uD560 \uD074\uB798\uC2A4"
                 },
                 "getter": false,
                 "setter": false,
@@ -836,7 +875,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC77D\uAE30 \uC804\uC6A9 \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -856,7 +895,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB124\uC774\uD2F0\uBE0C input\uC5D0 \uC801\uC6A9\uD560 \uC778\uB77C\uC778 \uC2A4\uD0C0\uC77C"
                 },
                 "getter": false,
                 "setter": false,
@@ -874,7 +913,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uC5D0\uB7EC \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -894,7 +933,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -914,7 +953,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD638\uBC84 \uC0C1\uD0DC \uC5EC\uBD80"
                 },
                 "getter": false,
                 "setter": false,
@@ -934,7 +973,7 @@ export class SdNumberInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3FC \uC5F0\uB3D9\uC6A9 name \uC18D\uC131"
                 },
                 "getter": false,
                 "setter": false,
@@ -959,7 +998,7 @@ export class SdNumberInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uAC12\uC774 \uBCC0\uACBD\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "number | null",
@@ -974,7 +1013,7 @@ export class SdNumberInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4\uB420 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "Event",
@@ -996,7 +1035,7 @@ export class SdNumberInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD3EC\uCEE4\uC2A4\uB97C \uC783\uC744 \uB54C \uBC1C\uC0DD\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "Event",
@@ -1027,7 +1066,7 @@ export class SdNumberInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uAC80\uC0AC\uB97C \uC2E4\uD589\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1044,7 +1083,7 @@ export class SdNumberInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uAC12\uACFC \uC720\uD6A8\uC131 \uC0C1\uD0DC\uB97C \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1061,7 +1100,7 @@ export class SdNumberInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC720\uD6A8\uC131 \uC0C1\uD0DC\uB9CC \uCD08\uAE30\uD654\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1078,7 +1117,7 @@ export class SdNumberInput {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uC785\uB825 \uD544\uB4DC\uC5D0 \uD3EC\uCEE4\uC2A4\uB97C \uC774\uB3D9\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             },
@@ -1099,7 +1138,7 @@ export class SdNumberInput {
                     "return": "Promise<HTMLInputElement | null>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "\uB124\uC774\uD2F0\uBE0C input \uC5D8\uB9AC\uBA3C\uD2B8\uB97C \uBC18\uD658\uD569\uB2C8\uB2E4.",
                     "tags": []
                 }
             }

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

@@ -9,9 +9,13 @@ const BUTTON_WIDTH = {
     5: 56,
 };
 export class SdPagination {
+    /** 현재 페이지 번호 */
     currentPage = 1;
+    /** 마지막 페이지 번호 */
     lastPage = 1;
+    /** true이면 현재/마지막 페이지만 표시하는 단순 모드 */
     simple = false;
+    /** 페이지가 변경될 때 새 페이지 번호를 전달합니다. */
     pageChange;
     get pageNumbers() {
         const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
@@ -83,13 +87,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '8a2219bbc3a17951ed66501e7246f230f0495e74', class: {
+        return (h("div", { key: '733bf7952c4e38a65a1042c6a8784d6502c81667', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '7e9ddb98aff7506fc3b6053d84c1be211e3d1ff7', 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: {
+            }, style: cssVars }, h("div", { key: '4c23bdfb9a58950a04107fc4b4c921bbafa4e601', 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: '937554ea8d3ae71da85e2c1f49d82c99658141f0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'a0406c1f9cd13970d47f25ed88095ac1c684203c', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {
@@ -116,7 +120,7 @@ export class SdPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD604\uC7AC \uD398\uC774\uC9C0 \uBC88\uD638"
                 },
                 "getter": false,
                 "setter": false,
@@ -136,7 +140,7 @@ export class SdPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0 \uBC88\uD638"
                 },
                 "getter": false,
                 "setter": false,
@@ -156,7 +160,7 @@ export class SdPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "true\uC774\uBA74 \uD604\uC7AC/\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0\uB9CC \uD45C\uC2DC\uD558\uB294 \uB2E8\uC21C \uBAA8\uB4DC"
                 },
                 "getter": false,
                 "setter": false,
@@ -175,7 +179,7 @@ export class SdPagination {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "\uD398\uC774\uC9C0\uAC00 \uBCC0\uACBD\uB420 \uB54C \uC0C8 \uD398\uC774\uC9C0 \uBC88\uD638\uB97C \uC804\uB2EC\uD569\uB2C8\uB2E4."
                 },
                 "complexType": {
                     "original": "number",