@sellmate/design-system 1.0.38 → 1.0.39

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

@@ -0,0 +1,34 @@
+import inputTokens from "../../tokens/generated/component.textinput.json";
+import systemTokens from "../../tokens/generated/system.json";
+const sm = inputTokens.input.sm;
+const md = inputTokens.input.md;
+export const INPUT_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+export const INPUT_COLORS = {
+    border: inputTokens.input.border,
+    bg: inputTokens.input.bg,
+    text: inputTokens.input.text,
+    icon: inputTokens.input.icon,
+};
+export const INPUT_ICON = {
+    frameSize: Number(inputTokens.input.size.icon),
+    iconSize: Number(systemTokens.size.field.icon),
+};

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

@@ -153,10 +153,12 @@ sd-input .sd-input__content {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  color: #333333;
-  font-size: 12px;
-  line-height: 20px;
-  padding: 0 8px;
+  color: var(--sd-input-text-color);
+  font-size: var(--sd-input-font-size);
+  line-height: var(--sd-input-line-height);
+  font-weight: var(--sd-input-font-weight);
+  padding: 0 var(--sd-input-padding-x);
+  gap: var(--sd-input-gap);
 }
 sd-input .sd-input__content .sd-input__native {
   width: 100%;
@@ -164,11 +166,19 @@ sd-input .sd-input__content .sd-input__native {
   border: none;
   outline: none;
   background: transparent;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+  color: inherit;
 }
 sd-input .sd-input__content .sd-input__native[disabled] {
   cursor: not-allowed;
-  color: #888888;
+  color: var(--sd-input-disabled-color);
 }
 sd-input .sd-input__content .sd-input__native::placeholder {
-  color: #AAAAAA;
+  color: var(--sd-input-placeholder-color);
+}
+sd-input .sd-input__content .sd-input__clear-icon {
+  flex-shrink: 0;
+  cursor: pointer;
 }

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

@@ -1,16 +1,16 @@
 import { h, } from "@stencil/core";
 import { nanoid } from "nanoid/non-secure";
+import { INPUT_SIZE_MAP, INPUT_COLORS, INPUT_ICON } from "./sd-input.config";
 export class SdInput {
     host;
     value = null;
-    //  @Prop() name?: string;
     type = 'text';
-    insideLabel = false;
+    size = 'sm';
+    addonLabel = '';
     placeholder = '입력해 주세요.';
     disabled = false;
     clearable = false;
-    width;
-    barcode = false;
+    width = '100%';
     rules = [];
     autoFocus = false;
     status;
@@ -85,7 +85,24 @@ export class SdInput {
         }
     };
     render() {
-        return (h("sd-field", { key: 'fbf0073f3033e982608dafb9fee821ea43f3cf69', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: 'a3c1b9093eee27ba88d63c581c26786688a6a13e', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '70378baf41017c9fd1b0bb1acea447202c65053b', name: "prefix" }), h("input", { key: '9222685e834d29c838b159ee3de28758c23293e0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'c2639dd5a34f3e2f5f951f9fb7957b789daecd01', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'ff152a3f33d3d21b4021afe88257928451534425', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        const sizeTokens = INPUT_SIZE_MAP[this.size] ?? INPUT_SIZE_MAP.sm;
+        const resolvedWidth = /^\d+$/.test(this.width) ? `${this.width}px` : this.width;
+        const cssVars = {
+            // sd-input 자체 토큰
+            '--sd-input-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-input-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-input-font-weight': sizeTokens.fontWeight,
+            '--sd-input-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-input-gap': `${sizeTokens.gap}px`,
+            '--sd-input-text-color': INPUT_COLORS.text.default,
+            '--sd-input-placeholder-color': INPUT_COLORS.text.placeholder,
+            '--sd-input-disabled-color': INPUT_COLORS.text.disabled,
+            '--sd-input-icon-color': INPUT_COLORS.icon.default,
+            // sd-field 시스템 변수 override (size별 높이/반경)
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+        };
+        return (h("sd-field", { key: '3b559e592e3bcc57072eda7b081f6dc42f34813c', name: this.name, label: this.label, addonLabel: this.addonLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: { width: resolvedWidth, ...cssVars } }, h("label", { key: '6da8d8636353f3287c45c85ac75ac0a6202296e9', class: "sd-input__content" }, h("slot", { key: '065e5cb193ba2e3e91380ffd32d9c84854540fe2', name: "prefix" }), h("input", { key: 'c549470eb09eee2605871495f53a271d9978811e', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'd3259163d6aa2eef4346afa5f26c4d4ba722bf40', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'eaec3486b16a2b19e98e1c0629d8ca8dd284e8e7', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));
@@ -143,13 +160,20 @@ export class SdInput {
                 "attribute": "type",
                 "defaultValue": "'text'"
             },
-            "insideLabel": {
-                "type": "boolean",
+            "size": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "InputSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "InputSize": {
+                            "location": "import",
+                            "path": "./sd-input.config",
+                            "id": "src/components/sd-input/sd-input.config.ts::InputSize",
+                            "referenceLocation": "InputSize"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -160,10 +184,10 @@ export class SdInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "inside-label",
-                "defaultValue": "false"
+                "attribute": "size",
+                "defaultValue": "'sm'"
             },
-            "placeholder": {
+            "addonLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -180,15 +204,15 @@ export class SdInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'\uC785\uB825\uD574 \uC8FC\uC138\uC694.'"
+                "attribute": "addon-label",
+                "defaultValue": "''"
             },
-            "disabled": {
-                "type": "boolean",
+            "placeholder": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -200,10 +224,10 @@ export class SdInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
+                "attribute": "placeholder",
+                "defaultValue": "'\uC785\uB825\uD574 \uC8FC\uC138\uC694.'"
             },
-            "clearable": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -220,19 +244,19 @@ export class SdInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "clearable",
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "width": {
-                "type": "any",
+            "clearable": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number | string",
-                    "resolved": "number | string | undefined",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -240,18 +264,19 @@ export class SdInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "width"
+                "attribute": "clearable",
+                "defaultValue": "false"
             },
-            "barcode": {
-                "type": "boolean",
+            "width": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -259,8 +284,8 @@ export class SdInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "barcode",
-                "defaultValue": "false"
+                "attribute": "width",
+                "defaultValue": "'100%'"
             },
             "rules": {
                 "type": "unknown",

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Fragment, { key: 'd7e23733c706b1c27cc9b56bde9cd198486fe19a' }, h("svg", { key: '45ca54e826b16a28c333e57880b46a16098fd4dc', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '2d0073df18bffcd7a602bf5f7caedf6658c1ff1e', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Fragment, { key: '463ab22264fafc013af7a602066eb8ebed10ac05' }, h("svg", { key: '6b90c0c3448c309813038fb8281b4ed73b1145d3', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'aa553d712b98c3316c98b7e52b955b7185eaee20', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

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

@@ -59,9 +59,9 @@ export class SdNoticeModal {
         }
     }
     render() {
-        return (h("div", { key: '522489e0b0c0706b25f5e99215d8bb75e94f1596', class: "sd-notice-modal" }, h("sd-icon", { key: 'e6ca52391427d0f1a429feeb97337e716aae5920', class: "sd-notice-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("h2", { key: '7c7f4c3ad01d421a7f75f14d93cc0ba58526bfd6', class: `sd-notice-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'afc982ef15da5884f181e189f78a9986a467ff40', class: "sd-notice-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '028b03030a7a1b29ec54910807878da39f8ea156', class: "sd-notice-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-notice-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'fa12a72c4ac271d6e57ec85415f6144f1b38b146', class: "sd-notice-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-notice-modal__custom-content", ref: el => {
+        return (h("div", { key: 'bdabd03353df6668e77ea29477e79586b9ee18ad', class: "sd-notice-modal" }, h("sd-icon", { key: '2369161b7a25a72da40235f32f6cc006c8b060bd', class: "sd-notice-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), h("h2", { key: '9a8b1c37f874b5299911ae5f081f692cd2bce470', class: `sd-notice-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'c44382d6484301d3ed4081cda456628bad387f53', class: "sd-notice-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '81ff93a305aeb3e1fac90362e0a5158355b96d88', class: "sd-notice-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-notice-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '5d3131ed1aba498fdadf4b035df9c1b178dd1b36', class: "sd-notice-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-notice-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && h("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '39008c0c41e84a92b02aa310e32dacf7b1b3ea83', class: "sd-notice-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-notice-modal__message-text", innerHTML: msg })))))), h("div", { key: '54062ddaf99170af5bcf8caa1f6d80ce3f24b4b2', class: "sd-notice-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'c0365120540bf5e7f9e43955a8099e019837e4d6', name: NOTICE_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: 'c51c93f72ebbe91e87aa0d0d561227f6b66b5e74', name: NOTICE_BUTTON_PRESET, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.hasTagContent && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && h("span", { class: "sd-notice-modal__slot-label" }, this.slotLabel))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '0c9e040dbcdb0873f6a4e1606ef0fa9729340860', class: "sd-notice-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-notice-modal__message-text", innerHTML: msg })))))), h("div", { key: '7fe0737620fd3583300a62eb5b55704147a7511e', class: "sd-notice-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '70f0d98a14eb0184ac08cd16aa0676e848fa035d', name: NOTICE_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: '54554ce5c26fa59924db03728628cca8538de081', name: NOTICE_BUTTON_PRESET, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
     }
     static get is() { return "sd-notice-modal"; }
     static get originalStyleUrls() {

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

@@ -9,7 +9,7 @@ export class SdNumberInput {
     useDecimal = false;
     value = null;
     label;
-    insideLabel = false;
+    addonLabel = '';
     placeholder = '입력해 주세요.';
     disabled = false;
     width;
@@ -240,17 +240,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("sd-field", { key: '0ec5a9e4ceaed777c964107654784edc749735ff', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'ea74323317baec7816553fd4cce5754f707d513a', class: {
+        return (h("sd-field", { key: '6e530f1a553adc3dfcf244f9d5119c4c3585105e', name: this.name, label: this.label, addonLabel: this.addonLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'b3c548af3db1c15ef53d4dd1e171a5ba39b638f6', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '1c702736fb99736d7a42478ba565f1ac2ec68353', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '7a6ddd6432e4b75eb4854df30551be4abeecc59b', class: "sd-number-input__buttons" }, h("button", { key: '1af466b78c9cde914b65369c9462e2ec60e65246', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: '0857278d2ef0c288bedd90adcea519bdc894417a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '5b58e8dcfb83db649aedb13faf556c9e6e5b5bb6', class: "sd-number-input__buttons" }, h("button", { key: '8cdd4eccb323e1e3974e5de0c99e5a622a36c41e', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '1d14fd79f63e5f0cf62be28b55dc23300c958d10', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: 'dc1e9a3aa010fd049aaa9ec00bb5223c2d435cf7', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '0d6d37ebbd7548484e6cf51a2dce962e52e74042', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '0da4636adfbd8918a5180d1f5abbc97d16664271', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '44297019634fbd47d054d2a4822222ef6eb36fac', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '16d62c22bcbfed3a7098780784b58376700f9a5b', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {
@@ -404,12 +404,12 @@ export class SdNumberInput {
                 "reflect": false,
                 "attribute": "label"
             },
-            "insideLabel": {
-                "type": "boolean",
+            "addonLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -421,8 +421,8 @@ export class SdNumberInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "inside-label",
-                "defaultValue": "false"
+                "attribute": "addon-label",
+                "defaultValue": "''"
             },
             "placeholder": {
                 "type": "string",

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

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: '9e0f4dff733cfc9a204fa3015e2db8063f9dd0b7', class: this.paginationClasses }, h("div", { key: '1e0801d8bdf19ac2d6351aeb9245635faf2fe1c5', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '403af836a1c920164401029eb1e52339ddd4b69e', class: this.paginationClasses }, h("div", { key: '5b899b37cabe16ccef734f45a3ca8752b7f37b08', 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: '4e53c048a9404e0a664ebec465b93405cf2bc6b5', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '58e0c871da394403b7504c9a8293b63703ca55f0', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -31,14 +31,14 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '583cb5e2f7cb123dc1a11edeff0e6f6075e95950' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'a0a4242a6cd1925a29b2e7be27f50b20377120de', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '251ddf3c159ae0f79c32643da7e1bef3d25caeeb', class: {
+        return (h(Fragment, { key: '205b8f574ce69afcb2abef1b0d0d6ec769230783' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'af82589e6ed773709c83a6855c37b1ac7092b9ec', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'dfee40fa54b436a43583ebdc71830e6d590e1793', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: '4ce84717389086099d17ac8c69519d4dfd707d64', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'da5b99c7236bd9e6199971121cafc2537b5d96ee' })), h("div", { key: 'cc5dc4fc0abb24b4e515eae7031c812bf1178633', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '818f93a2a9820422652df595e0fd027873f6a93d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '4f9cd0152c8f3697f419b63e73170a95def35a7b', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'd1fe902b212315eab787b73ac3f38b0bf67f7955', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'b043c92f872ef490715ee9735a413835d9350e32', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '19b5e26bec245315ff2d1187b7559bcf592a2490', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, h("i", { key: '388ac52f514ddd9247e79d20309a1de029fcd601', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '2502e1a63e3dca7e9c6d66805a9ec04e3106dd99' })), h("div", { key: 'e12b0df1dbdfe4b34de81ed231e1578bb5361afa', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '91f068beee3338f547157db06a0eee4f5e88355d', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '1283a6209c1c062d925ae1c32ba2a4f2aa98c8fa', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '130f5468eb8ac34bb02dce9a5a55c1fad17c8dcf', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '330fb79d032bac9da45afec3ccf0f2ec6e3dafba', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '7ba5d1e112ac776bb29253ac2cee510d36147ced', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

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

@@ -33,10 +33,10 @@ export class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: '6d111e7d5de2efd5565cc92fbef5f0d9ee8cb2ec', style: {
+        return (h("div", { key: '864f669831515b9c149ad579b6233e960eee79a9', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '8ff2f14809c2ae3107debd1f9bcee510e2d5594f', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '42920cc06b249371ec7d98c07d2185d71265a538', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js

@@ -144,10 +144,10 @@ export class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: 'b9e4867efa896b6435e8fa0fafa0d5c4ba1f36a4', class: {
+        return (h("div", { key: 'aca6d4044905863975c944afb44f92df0d6f1568', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: '8600234406b252a0d09252c4b9286870e77a6394', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (h("sd-select-search-input", { key: 'c87e4d9a391bf7b583bca1cda8930f977a1aec2c', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option", { option: option, index: index, isSelected: this.isOptionSelected(option.value), isFocused: index === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get is() { return "sd-select-dropdown"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.js

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: 'd3ab86ef3bb92c0e912a344e95de4be8e5ffed4d', class: {
+        return (h("div", { key: 'e28519019fa39af328fe7f5a25f18bb227e4d622', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

package/dist/collection/components/sd-select/sd-select-search-input/sd-select-search-input.js

@@ -16,17 +16,17 @@ export class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: 'e14663520ea13fd32617e0811406d64da0789fb1', class: {
+        return (h("div", { key: '2f4e9dfd95524f7d62f49f2cba50f14157d56fe3', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '0067dc90a975583ebd0676fcca059896f152592e', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '509714588ae43b950ea7abc8cd045aee9007e04c', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, h("sd-icon", { key: '60a0fa1fd2bcb1beb7954f2c13e322f142b5ca66', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '1f13b6f332a930d7ffe515ccd4a77cf4e7e1af7f', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get is() { return "sd-select-search-input"; }
     static get originalStyleUrls() {

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

@@ -23,7 +23,7 @@ export class SdSelect extends BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
-    insideLabel = false;
+    addonLabel = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -141,7 +141,7 @@ export class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (h("sd-field", { key: '2ac382aca68d636be323d87a6feb3eae63fd8d35', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '781a0950f3f18480e320ce25cf03fd1bc04b9349', class: {
+        return (h("sd-field", { key: 'f7cd0c34188712a30389d07bde7edc7875e9923b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '460a8a23247e24a02bd25470105598914029e205', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,
@@ -400,12 +400,12 @@ export class SdSelect extends BaseDropdownEvent {
                 "attribute": "label",
                 "defaultValue": "''"
             },
-            "insideLabel": {
-                "type": "boolean",
+            "addonLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -417,8 +417,8 @@ export class SdSelect extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "inside-label",
-                "defaultValue": "false"
+                "attribute": "addon-label",
+                "defaultValue": "''"
             },
             "icon": {
                 "type": "unknown",

package/dist/collection/components/sd-select-group/sd-select-group.js

@@ -23,7 +23,7 @@ export class SdSelectGroup extends BaseDropdownEvent {
     searchable = false;
     // props - label
     label = '';
-    insideLabel = false;
+    addonLabel = '';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -270,7 +270,7 @@ export class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '343870c96352644f1f32570296473d2f06a65750', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, insideLabel: this.insideLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '05d7ced4e332e5ab2f66b44b517f4e59b12ecf64', class: {
+        return (h("sd-field", { key: '2ff7d25f8fd9724fead7722757f174610d7c084d', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '57d0ff569579bb56810891a8e50a89e8b82096ac', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,
@@ -543,12 +543,12 @@ export class SdSelectGroup extends BaseDropdownEvent {
                 "attribute": "label",
                 "defaultValue": "''"
             },
-            "insideLabel": {
-                "type": "boolean",
+            "addonLabel": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -560,8 +560,8 @@ export class SdSelectGroup extends BaseDropdownEvent {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "inside-label",
-                "defaultValue": "false"
+                "attribute": "addon-label",
+                "defaultValue": "''"
             },
             "icon": {
                 "type": "unknown",

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js

@@ -150,7 +150,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '8de4ef57a8dd1c6f2fd6ab9ae22fe4df3e99ed16', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '8b57b5500a152853db07de205ab006f7a92f30a8', class: {
+        return (h("sd-field", { key: '022f39a42986c29f8cab7f6801a7d2e4bbd5aaa5', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '93e4dd74f1b0ad76429f37c5fe6a9cffb98697d5', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
+        return (h("div", { key: '70ab9a558faf068cfc4eb0a5f6a29453ceedc6ec', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -48,10 +48,10 @@ export class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'ca5dc0033231ab204a8688f98453742cdbde7d26', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'bba6cb9fe649f6eda82ba287f73d0142e02c53c2', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '7d03c080b7f5b92881389bfec787015a6ac55fa1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '7066453f92eac7549569db6854e3dc32515d80b9', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get is() { return "sd-select-option-group"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js

@@ -64,7 +64,7 @@ export class SdSelectV2ListItem {
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: '0abaaaf9e87dd7faa5ca7566d54367fc1a883d6e', class: {
+        return (h("div", { key: '1e828b28202b9d22cc02dff0550e37e506167f90', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -74,7 +74,7 @@ export class SdSelectV2ListItem {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'd2b00059ae0792d7d162e8ea7c8f35640ab6086f', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '588434f01076bc963ca733eabf62a74795788c07', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '6238cac7c3da53813eb8e65f98167874947625af', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '7f49b89aff1a269944551664bc8a51447b5b2f7e', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '51aad2d06ecdf11968f3f13c632081a663a3d200', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '1c1f5cd51460863ce41c8980dcc65cd2bb7bfee5', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-v2-list-item"; }
     static get originalStyleUrls() {