@sellmate/design-system 1.0.70 → 1.0.72

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

@@ -2,15 +2,22 @@ import { h } from "@stencil/core";
 export class SdForm {
     formClass = '';
     fields = [];
-    submitSuccess;
-    submitFail;
+    sdSubmit;
+    sdValidationError;
     sortFieldsByDomOrder() {
         this.fields.sort((a, b) => {
             const elA = a.el;
             const elB = b.el;
             if (!elA || !elB)
                 return 0;
-            return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+            if (elA === elB)
+                return 0;
+            const position = elA.compareDocumentPosition(elB);
+            if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+                return -1;
+            if (position & Node.DOCUMENT_POSITION_PRECEDING)
+                return 1;
+            return 0;
         });
     }
     async sdRegisterField(field) {
@@ -18,13 +25,20 @@ export class SdForm {
             console.warn('[sd-form] field.name is required');
             return;
         }
-        if (this.fields.find(f => f.name === field.name))
+        if (this.fields.includes(field))
             return;
         this.fields.push(field);
         this.sortFieldsByDomOrder();
     }
-    async sdUnregisterField(name) {
-        this.fields = this.fields.filter(f => f.name !== name);
+    async sdUnregisterField(fieldOrName) {
+        if (typeof fieldOrName === 'string') {
+            const index = this.fields.findIndex(field => field.name === fieldOrName);
+            if (index !== -1) {
+                this.fields.splice(index, 1);
+            }
+            return;
+        }
+        this.fields = this.fields.filter(field => field !== fieldOrName);
     }
     async sdValidate() {
         const fieldValidationResults = await Promise.all(this.fields.map(async (field) => {
@@ -53,13 +67,13 @@ export class SdForm {
         e.preventDefault();
         const valid = await this.sdValidate();
         if (!valid) {
-            this.submitFail.emit();
+            this.sdValidationError.emit();
             return;
         }
-        this.submitSuccess.emit();
+        this.sdSubmit.emit();
     }
     render() {
-        return (h("form", { key: 'd37e7f5291b9f340ed020aadbc7e111c6ac9d375', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'be3d12eb60e10a5b77dc9bd150ac2be23e08f3f0' })));
+        return (h("form", { key: 'f8276276d117709062f263c1ebbf814f398ed06d', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '24a4bd4c3140c89b49d6763113068ce1fb03cc6e' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {
@@ -88,7 +102,7 @@ export class SdForm {
     }
     static get events() {
         return [{
-                "method": "submitSuccess",
+                "method": "sdSubmit",
                 "name": "sdSubmit",
                 "bubbles": true,
                 "cancelable": true,
@@ -103,7 +117,7 @@ export class SdForm {
                     "references": {}
                 }
             }, {
-                "method": "submitFail",
+                "method": "sdValidationError",
                 "name": "sdValidationError",
                 "bubbles": true,
                 "cancelable": true,
@@ -149,16 +163,21 @@ export class SdForm {
             },
             "sdUnregisterField": {
                 "complexType": {
-                    "signature": "(name: string) => Promise<void>",
+                    "signature": "(fieldOrName: FieldIdentifier) => Promise<void>",
                     "parameters": [{
-                            "name": "name",
-                            "type": "string",
+                            "name": "fieldOrName",
+                            "type": "string | ValidatableField",
                             "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "FieldIdentifier": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-form/sd-form.tsx",
+                            "id": "src/components/sd-form/sd-form.tsx::FieldIdentifier"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -35,7 +35,7 @@ export class SdGhostButton {
             ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
             : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '4d5159cb897b6c468380f18eba1eca218d24920e', class: {
+        return (h("button", { key: '34c5026b4819b624b19d1773bad413b689633c2a', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -44,7 +44,7 @@ export class SdGhostButton {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '0461580c901aea244a3d0e693fb94fd6354873ab', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '063f7cfabfdbf0f4f2f4c1a2c811e6c3734d941f', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {

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

@@ -112,12 +112,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '6270fb99043a06aa9a4c2ead77007e6c03adafef', 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, 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("label", { key: 'aaef18c323710235b41d76b26a21380cadcc6e0f', class: "sd-input__content" }, h("slot", { key: 'fd5d5845acf9d5351dec5af84e09d91246de8a68', name: "prefix" }), h("input", { key: '8b4dd1eab6488a29daec6e6dde5238b319001d5b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '79918e68de3045b509a27d8567e095665040689b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'f5358346a20830c1fef955a2bb6783156b251178', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '89ec87626ee611a233cfd6673471bfb856bf9c7b', 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, 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("label", { key: '092ec9af34a505e2be74f35e3bf48002067b860f', class: "sd-input__content" }, h("slot", { key: 'cd3ae3cdda60df770ce690f7af7201e1e04515a1', name: "prefix" }), h("input", { key: 'bcce3bdab7fad50c38c3c1a7841dcaf6fbe2c735', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '6491b3ccdc5a9a993980d4a3668b0c62fc28e064', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'e24bfdd0706bb6cb05b3a6e6edce7e9bbf79df38', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '77108ea21a4b9afc9e9051c98d4d49bcb571cffb', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '561ec06be116aa1c083dd82414f43a284307053b', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;

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

@@ -0,0 +1,22 @@
+import progressTokens from "../../tokens/generated/component.progress.json";
+import systemTokens from "../../tokens/generated/system.json";
+export const LINEAR_PROGRESS_LAYOUT = {
+    height: Number(progressTokens.progress.linear.height),
+    radius: Number(progressTokens.progress.linear.radius),
+    gap: Number(progressTokens.progress.linear.gap),
+};
+export const LINEAR_PROGRESS_TYPOGRAPHY = {
+    bar: progressTokens.progress.linear.typography,
+    label: progressTokens.progress.label.typography,
+};
+export const LINEAR_PROGRESS_COLORS = {
+    track: progressTokens.progress.color.track,
+    label: progressTokens.progress.color.label,
+    valueOnFill: progressTokens.progress.bar.text,
+    valueZero: systemTokens.color.content.tertiary,
+};
+export const LINEAR_PROGRESS_FILL_COLOR_MAP = {
+    primary: progressTokens.progress.active.color,
+    error: progressTokens.progress.error.color,
+    complete: progressTokens.progress.success.color,
+};

package/dist/collection/components/sd-linear-progress/sd-linear-progress.css

@@ -0,0 +1,68 @@
+sd-linear-progress {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+sd-linear-progress .sd-linear-progress__track {
+  position: relative;
+  width: 100%;
+  height: 20px;
+  border-radius: 9999px;
+  background-color: var(--sd-linear-progress-track-color);
+  overflow: hidden;
+}
+sd-linear-progress .sd-linear-progress__fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  height: 100%;
+  background-color: var(--sd-linear-progress-fill-color);
+  border-radius: inherit;
+  transition: width 0.4s linear;
+}
+sd-linear-progress .sd-linear-progress__value {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  text-align: center;
+  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  pointer-events: none;
+  user-select: none;
+}
+sd-linear-progress .sd-linear-progress__value--on-track {
+  color: var(--sd-linear-progress-value-color);
+}
+sd-linear-progress .sd-linear-progress__value--on-fill {
+  color: var(--sd-linear-progress-value-on-fill);
+}
+sd-linear-progress .sd-linear-progress__label {
+  text-align: center;
+  color: var(--sd-linear-progress-label-color);
+  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+}
+sd-linear-progress[indeterminate] .sd-linear-progress__fill {
+  inset: 0;
+  width: auto;
+  transform-origin: left center;
+  transition: none;
+  animation: sd-linear-progress-indeterminate 1.2s linear infinite;
+}
+@keyframes sd-linear-progress-indeterminate {
+  0% {
+    transform: translateX(-100%) scaleX(0.2);
+  }
+  50% {
+    transform: translateX(20%) scaleX(0.6);
+  }
+  100% {
+    transform: translateX(120%) scaleX(0.2);
+  }
+}

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

@@ -0,0 +1,134 @@
+import { Host, h } from "@stencil/core";
+import { LINEAR_PROGRESS_COLORS, LINEAR_PROGRESS_FILL_COLOR_MAP, } from "./sd-linear-progress.config";
+export class SdLinearProgress {
+    indeterminate = false;
+    value = 0;
+    type = 'primary';
+    label;
+    get clampedValue() {
+        if (!Number.isFinite(this.value))
+            return 0;
+        return Math.max(0, Math.min(100, this.value));
+    }
+    render() {
+        const fillColor = LINEAR_PROGRESS_FILL_COLOR_MAP[this.type] ??
+            LINEAR_PROGRESS_FILL_COLOR_MAP.primary;
+        const valueColor = this.clampedValue === 0 ? LINEAR_PROGRESS_COLORS.valueZero : fillColor;
+        const hostStyle = {
+            '--sd-linear-progress-track-color': LINEAR_PROGRESS_COLORS.track,
+            '--sd-linear-progress-fill-color': fillColor,
+            '--sd-linear-progress-value-color': valueColor,
+            '--sd-linear-progress-value-on-fill': LINEAR_PROGRESS_COLORS.valueOnFill,
+            '--sd-linear-progress-label-color': LINEAR_PROGRESS_COLORS.label,
+        };
+        const fillStyle = this.indeterminate
+            ? {}
+            : { width: `${this.clampedValue}%` };
+        const valueOnFillStyle = {
+            clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
+        };
+        const valueText = `${Math.round(this.clampedValue)}%`;
+        return (h(Host, { key: '7a639f88907718e71692f08beaa4ff32a913990c', style: hostStyle }, h("div", { key: '0e9dc34a18d5497c67ce890e9976d98ff46a7cae', class: 'sd-linear-progress__track' }, h("div", { key: 'b06985fa70196b47046907bbf72f73518e731614', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'b7ca66daa73439d52243f21991131dd40704c018', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'c2a8886d6e8402c29607287ae3a1c489138b38ce', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '36024d7cfbe5c932821744fa30f6366bf7a75302', class: 'sd-linear-progress__label' }, this.label)));
+    }
+    static get is() { return "sd-linear-progress"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-linear-progress.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-linear-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinearProgressType",
+                    "resolved": "\"complete\" | \"error\" | \"primary\"",
+                    "references": {
+                        "LinearProgressType": {
+                            "location": "import",
+                            "path": "./sd-linear-progress.config",
+                            "id": "src/components/sd-linear-progress/sd-linear-progress.config.ts::LinearProgressType",
+                            "referenceLocation": "LinearProgressType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'primary'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}

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

@@ -10,10 +10,10 @@ export class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: '7887102a2b03f911fad57784b3b45b12d2265ae2', class: {
+        return (h("div", { key: '14ae9c222f613129ac2819ee46b7dd0a248b93da', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '0f815029574907643be52b50a6c8be8e66ced072', class: "sd-loading-container__backdrop" }), h("div", { key: '9ea0faf8ed4094b3fd93a6e29c55130d58b245fe', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '6e89faad35f282d91098c213879c0ecf8d05a5ed', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '05d3128ecf91a372a426a2508535c7789aff9bc1', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'a84dca0f4d3582c041ee97965db92a1fff778bd4', class: "sd-loading-container__backdrop" }), h("div", { key: '9793e443e8371a30572ca9b185e0bcfb09d2d1e1', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '1ea2e88043ece1b7c6ff9fe210d7d765d738bbfa', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '20e8a1cd1205186ec419b164b9e4873eb37045ea', class: "sd-loading-container__message" }, this.message)))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

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

@@ -42,7 +42,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: 'd7e6e7d81ad63a6ddba6c4db9f49695be96b83f6', style: hostStyle }, h("div", { key: '96a50aa04c7cab1c8797b7a187504107e383182b', class: "sd-loading-modal" }, h("div", { key: '6741f7d180be2a7ffa4588aa73bf0b3831e3c869', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: 'cd7d922fc8c8cd51de0a49e106d78a5254c9c35e', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (h("div", { key: '78a926af4940be80da984cf4e55e8dfee50d6c31', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: 'a2e4ddf9b4b82fb6cecd9d859e6b95f8dd540137', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '91fe223de0146ad3a631284728597d6dca312a7e', style: hostStyle }, h("div", { key: 'e3284b3e8fd775b0128ae2e7495141d04d07eaa8', class: "sd-loading-modal" }, h("div", { key: '4975a8e75f7cf983c54a015f25520c34aef855a5', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("p", { key: 'c3d09b0c957a0cf2097772499a91bb8f86f19e98', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (h("div", { key: 'c5c1fa02e3c7c3dd3747a1609dc1fa9aab70c61c', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '849bdd00035bfa602ec814e55b585588f15871c6', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {

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

@@ -272,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: '85941d001afd73a10defb7f0728579ce0b8457b1', 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: '565de4d4a79219bc8d6e9c8f4528ec93a655c376', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'fa27f209b09a03121eb89959164a4a349d525d9a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '7f4fe23f4b0eba4a06e0153338228710365ce57f', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (h("sd-field", { key: '04aea42c0e7ae2c81a50d0fbb106d5834d42f7c3', 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: '8089ebd24ce12922d73c5f7909d3ef1d944e99d3', class: "sd-number-input__content" }, this.useButton && (h("button", { key: '27b630b4e12ba8f107b8c1053ab89f39b5df966f', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'b916a9f5f4c2579b9d3c3365790b29eb98f55c84', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '55a96b32e383cdf8d5b253336130460275373f41', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: 'e25faa5af70d89ae0266bd9dbf35c72276885a9b', 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: '6e669bfdd4cf68d9ca6182748cd9e60db9ae36f2', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '0fe251f87da94d35d50986ec8381b8e9df85d70e', 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: '777730846e62dd03a9193cf582908a059789b329', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: 'ef8b471cb1d2cbd3a5b350ddbbf856e3bd104567', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'e2440c5a4571b69dc0e91ab0b10dffdd8242b1d8', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (h("span", { key: '0842beeb5d5834909909b5120af69cdbe3fac299', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: 'dd2706a9882164812d65fe35e05e5865bb4fc4c8', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '578b0030421db07da89717039ae9773d537db5e6', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -67,7 +67,6 @@ sd-pagination {
   background-color: var(--sd-pagination-bg-selected);
   color: var(--sd-pagination-content-selected);
   font-weight: var(--sd-pagination-font-weight-selected);
-  cursor: default;
 }
 .sd-pagination__item--selected:hover {
   background-color: var(--sd-pagination-bg-selected);

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

@@ -83,13 +83,13 @@ export class SdPagination {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: '2b9efc3a0340799a39e7bbfe6f3a270b7cc5f0c7', class: {
+        return (h("div", { key: '386fdd2d1c0b5a7284c299201f19fd3384670ab1', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: 'af585a4e9ad2fc25e47cb42fdcc66850d6210fd1', 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: 'cd73997ae59f87b70c31e88fd5b4246bd6044bd0', 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: '3128e19dee5f2d00fcc5603f96f323afaf2750d4', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '86389ea83d2965efdd938d2f9b2e2c3469f05fe8', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'fa3033a01d6c8f6878c91367b9670206ab5c71d7' });
+        return h("slot", { key: '6fa44238ddbc26c355ddde102d2639db7dd50b94' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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: 'b1c93dc549893b5a3ccef1ab9cea54ca8c9d8d44', style: {
+        return (h("div", { key: '34c1ecf23c120f53595529004ed3d6818896e816', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '843cb8d0994831da375d26f0421d98dddb068128', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '29461b9428416262c10b1917eaee4e0091d290dc', 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: '4d593edbf6e4480e171963aad54ceb2f489f189b', class: {
+        return (h("div", { key: 'a831a99130074fa072534d76f4b0db7169d906e2', 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: 'ecea9b4ba816c6b0dcc8303f957f4b297251f65c', 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: 'f09a5575454c30387aeac9996d15625d7581a367', 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: '02e314232067bfb8f9bd882c01ae1462fa492cbf', class: {
+        return (h("div", { key: '413176678e27ad80c3ba51f8e32681f017d210ac', 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: '2629fd8c13f67bc89c3b66f5f8aa14f2fb2e5fcd', class: {
+        return (h("div", { key: 'f056d50b2a0ca1e40efabaae5071d56259d2094b', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'f49cccdb49d0b2b861b0836dd654b7ab353b48ce', 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: '14a59374d1c7d661247ea506b4f5670893f16294', 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: '773f5638821c73c20435f747c3dea5b6684b89eb', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: 'd7e976a06b6a889a1be2b79252f1d57729953522', 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-group/sd-select-group.js

@@ -272,7 +272,7 @@ export class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '698b76ed0785f475a099fac99e3564b20c252c01', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'aa449fda5e32d0519792dc2e713d3c59658c86fa', class: {
+        return (h("sd-field", { key: 'd4d80ad428cc1eb5a1d6878354c213bd25ea944a', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, addonAlign: this.addonAlign, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '1f9a8c1c9e34635ce7c1f91fc8d456b84a668c63', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

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

@@ -151,7 +151,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '92f9f1efeb25431700b376300ba8f21120456a68', label: this.label, labelWidth: this.labelWidth, 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: '48adb7f279b77d1637e6a1790d1448d7d7306a7a', class: {
+        return (h("sd-field", { key: '6fc9d0059e91044ef8e40881276bbef857ef1225', label: this.label, labelWidth: this.labelWidth, 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: 'b2591c655dc27b1db16e8f40c0a33997acbee35b', 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: '748c32883a0262612daf9bafc0617563c77254f8', class: {
+        return (h("div", { key: '647a7be115df96fe30d3b69d3b09ee45d229d86c', 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: '5a8f15864a69887a7d2e2ec5b18b96b1f7bde809', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '202f92f4aac644802a58354d08b29451c9af863f', 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: 'b1b1697c34e57667203992f8e4e6e9438f204dea', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'b67bec9cfd93739348f7d6c3e93945c28171e752', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'f9dc667e7d251a5efcf7391ec4f533a5e21276c9', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '2cd863d5bbdb1a9b5312c6eb7aa3be08a2093460', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'a65090e487a45acec39155aa6df00a1500249e20', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '5024421742568127097655bcb39af70b61cc3403', 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

@@ -66,7 +66,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: 'ad8ea94f02d9e114915e4115237aed32d89e93d9', class: {
+        return (h("div", { key: '62974a8d1442730ca752b3fc11f151c4a5be4ad1', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -76,7 +76,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: 'c3c5be89457efbd465ebcb89e304aaefaa85e245', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: 'ce5b528ec88cd6c862fe0df36cf1b46f054bcc0e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: 'e0120384115bb93819675335a574aeb072d0232c', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'cf29df3617e45f3b9415b8da1beed7ba5918b8cd', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '478e566c74c0078ef72b90d836f67156e905bbac', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '0cde990cb1fff4898581c8c7d321c8669dfac226', 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() {