@sellmate/design-system 1.0.47 → 1.0.49

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

@@ -1,7 +1,9 @@
 import { h, } from "@stencil/core";
 import { nanoid } from "nanoid/non-secure";
+import { NUMBER_INPUT_SIZE_MAP, NUMBER_INPUT_COLORS, NUMBER_INPUT_STEPPER, NUMBER_INPUT_HINT, NUMBER_INPUT_ERROR_MESSAGE, NUMBER_INPUT_CONTENTS_GAP, } from "./sd-number-input.config";
 export class SdNumberInput {
     el;
+    size = 'sm';
     min = Number.NEGATIVE_INFINITY;
     max = Number.POSITIVE_INFINITY;
     step = 1;
@@ -18,6 +20,8 @@ export class SdNumberInput {
     status;
     hint = '';
     errorMessage = '';
+    inputPrefix = '';
+    inputSuffix = '';
     inputClass = '';
     readonly = false;
     inputStyle = {};
@@ -32,8 +36,18 @@ export class SdNumberInput {
     update;
     focus;
     blur;
+    toNumber(val) {
+        if (val === null || val === undefined || val === '')
+            return null;
+        if (typeof val === 'number')
+            return isNaN(val) ? null : val;
+        if (typeof val === 'string')
+            return this.parseInput(val);
+        const num = Number(val);
+        return isNaN(num) ? null : num;
+    }
     formatWithCommas(value) {
-        if (value === null || value === undefined)
+        if (value === null || value === undefined || isNaN(value))
             return '';
         const isNegative = value < 0;
         const absValue = Math.abs(value);
@@ -46,20 +60,20 @@ export class SdNumberInput {
         if (!input || input.trim() === '')
             return null;
         const cleaned = input.replace(/,/g, '').trim();
-        // -로 시작을 할 수 있을 수 있고, 소수점 0.n | .n
         if (!/^-?(\d+\.?\d*|\d*\.\d+)$/.test(cleaned)) {
             return null;
         }
         const parsed = parseFloat(cleaned);
         if (isNaN(parsed))
             return null;
-        // 소수점 사용 하지 않는데 . 이 있는 경우
         if (!this.useDecimal && cleaned.includes('.')) {
             return null;
         }
         return parsed;
     }
     clampMinMax(value) {
+        if (isNaN(value))
+            return 0;
         return Math.min(Math.max(value, this.min), this.max);
     }
     updateDisplay() {
@@ -82,14 +96,12 @@ export class SdNumberInput {
         return false;
     }
     valueChanged(newValue) {
-        if (newValue === null || newValue === '') {
-            this.internalValue = null;
+        const parsed = this.toNumber(newValue);
+        if (parsed !== null) {
+            this.internalValue = this.clampMinMax(parsed);
         }
         else {
-            const parsed = typeof newValue === 'string' ? this.parseInput(newValue) : newValue;
-            if (parsed !== null) {
-                this.internalValue = this.clampMinMax(parsed);
-            }
+            this.internalValue = null;
         }
         this.updateDisplay();
     }
@@ -112,15 +124,21 @@ export class SdNumberInput {
     async sdFocus() {
         this.formField?.sdFocus();
     }
+    async sdGetNativeElement() {
+        return this.nativeEl || null;
+    }
     componentWillLoad() {
-        if (this.value !== null && this.value !== undefined) {
-            const parsed = typeof this.value === 'string' ? this.parseInput(this.value) : this.value;
-            if (parsed !== null) {
-                this.internalValue = this.clampMinMax(parsed);
-            }
+        const parsed = this.toNumber(this.value);
+        if (parsed !== null) {
+            this.internalValue = this.clampMinMax(parsed);
         }
         this.updateDisplay();
     }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
     // TODO: 현재 숫자를 크게 넣어서 숫자e+21등의 형식으로 변환되면 값이 바뀌지않음 수정 필요
     handleInput = (event) => {
         const target = event.target;
@@ -131,18 +149,15 @@ export class SdNumberInput {
             return;
         }
         const commasRemoved = inputValue.replace(/,/g, '');
-        // 만약에 소수점 (.) 이 여러개 일 경우
         const decimalCount = (commasRemoved.match(/\./g) || []).length;
         if (decimalCount > 1) {
             target.value = this.displayValue;
             return;
         }
-        // 가능: "-", ".", "-." (단순 기호만 있는 경우)
         if (commasRemoved === '-' || commasRemoved === '.' || commasRemoved === '-.') {
             target.value = commasRemoved;
             return;
         }
-        // 숫자 뒤에 . 이 있는 경우 (예: "1000.") -> 콤마 포맷 적용 + . 유지
         if (commasRemoved.endsWith('.') && decimalCount === 1) {
             const numberPart = commasRemoved.slice(0, -1);
             const parsed = this.parseInput(numberPart);
@@ -219,40 +234,51 @@ export class SdNumberInput {
             return;
         this.internalValue = nextVal;
     };
-    async sdGetNativeElement() {
-        return this.nativeEl || null;
-    }
-    getInputStatus() {
-        if (this.disabled)
-            return 'sd-number-input--disabled';
-        if (this.hovered)
-            return 'sd-number-input--hovered';
-        if (this.status)
-            return `sd-number-input--${this.status}`;
-        if (this.error)
-            return 'sd-number-input--error';
-        return '';
-    }
     render() {
-        const inputWidth = this.width
-            ? {
-                '--input-width': typeof this.width === 'number' ? `${this.width}px` : this.width,
-            }
-            : {};
-        const inputStyles = {
-            textAlign: this.useButton ? 'center' : 'right',
+        const sizeTokens = NUMBER_INPUT_SIZE_MAP[this.size] ?? NUMBER_INPUT_SIZE_MAP.sm;
+        const stepperSize = NUMBER_INPUT_STEPPER[this.size]?.size ?? NUMBER_INPUT_STEPPER.sm.size;
+        const iconSize = this.size === 'md' ? 14 : 12;
+        const cssVars = {
+            // 컴포넌트 로컬 토큰
+            '--sd-number-input-font-size': `${sizeTokens.fontSize}px`,
+            '--sd-number-input-line-height': `${sizeTokens.lineHeight}px`,
+            '--sd-number-input-font-weight': sizeTokens.fontWeight,
+            '--sd-number-input-padding-x': `${sizeTokens.paddingX}px`,
+            '--sd-number-input-gap': `${sizeTokens.gap}px`,
+            '--sd-number-input-text-color': NUMBER_INPUT_COLORS.text.default,
+            '--sd-number-input-placeholder-color': NUMBER_INPUT_COLORS.text.placeholder,
+            '--sd-number-input-disabled-color': NUMBER_INPUT_COLORS.text.disabled,
+            // 스테퍼 토큰
+            '--sd-number-input-stepper-size': `${stepperSize}px`,
+            '--sd-number-input-stepper-radius': `${NUMBER_INPUT_STEPPER.radius}px`,
+            '--sd-number-input-stepper-bg': NUMBER_INPUT_STEPPER.bg.default,
+            '--sd-number-input-stepper-bg-disabled': NUMBER_INPUT_STEPPER.bg.disabled,
+            '--sd-number-input-stepper-icon-color': NUMBER_INPUT_STEPPER.icon.default,
+            '--sd-number-input-stepper-icon-disabled': NUMBER_INPUT_STEPPER.icon.disabled,
+            // sd-field 시스템 변수 오버라이드
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-color-field-border-default': NUMBER_INPUT_COLORS.border.default,
+            '--sd-system-color-field-border-focus': NUMBER_INPUT_COLORS.border.focus,
+            '--sd-system-color-field-border-danger': NUMBER_INPUT_COLORS.border.danger,
+            '--sd-system-color-field-bg-default': NUMBER_INPUT_COLORS.bg.default,
+            // 힌트/에러 메시지 오버라이드
+            '--sd-textinput-input-text-error-message': NUMBER_INPUT_ERROR_MESSAGE.color,
+            '--sd-textinput-input-error-message-typography-font-size': `${NUMBER_INPUT_ERROR_MESSAGE.typography.fontSize}px`,
+            '--sd-textinput-input-error-message-typography-line-height': `${NUMBER_INPUT_ERROR_MESSAGE.typography.lineHeight}px`,
+            '--sd-textinput-input-text-hint': NUMBER_INPUT_HINT.color,
+            '--sd-textinput-input-hint-typography-font-size': `${NUMBER_INPUT_HINT.typography.fontSize}px`,
+            '--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: '6951d11c493d35757c7fae5f9b22314798aa049f', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, 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: 'adae8f831085b29df56a22fbe1d8420f5b6f3a68', 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: 'ab50a454f491b3c15161ea7a78a275bd840a3510', 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: '5f750d199e684fb077f6de49a07c6040eb3b7d44', class: "sd-number-input__buttons" }, h("button", { key: 'a07229ded6d8d7a08b2c0689b49e571b83d54324', 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: '7dc6cbe609c39deecbdbf639d820679f4a635acc', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '200e7811481d2cdbb598622626b0777cdb2d471a', 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: '3b94c87f4596e18b77cc31f54e779160b422562f', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+        return (h("sd-field", { key: '3c0c340cb1078a7f3763ee9f7339ef0cec63b020', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'd2be35e6a7e1201436ad625f4d9678b023187666', class: "sd-number-input__content" }, this.useButton && (h("button", { key: 'd048a5c576601ff6ac61eda9613d5981b415cd53', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'e618f41dda4f8afcb52ec4dc20828adf0ddc77c3', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+                ? NUMBER_INPUT_STEPPER.icon.disabled
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: 'd293f7530b94c340af5495feaa3323f5f6d7e6bc', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '21d97799b6222f8c5f2145660d4cf25bf5fdeabe', 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: '2008a9aa47389bcac4df03de3e357df6f684f379', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '5841af412ad228796debe31f7578fd332bf8883a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'ebc2f66dbb12664a976b36eb5b333ff7597d6d52', name: "add", size: iconSize, color: this.isIncrementDisabled()
+                ? NUMBER_INPUT_STEPPER.icon.disabled
+                : NUMBER_INPUT_STEPPER.icon.default }))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {
@@ -267,6 +293,33 @@ export class SdNumberInput {
     }
     static get properties() {
         return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NumberInputSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "NumberInputSize": {
+                            "location": "import",
+                            "path": "./sd-number-input.config",
+                            "id": "src/components/sd-number-input/sd-number-input.config.ts::NumberInputSize",
+                            "referenceLocation": "NumberInputSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
             "min": {
                 "type": "number",
                 "mutable": false,
@@ -589,6 +642,46 @@ export class SdNumberInput {
                 "attribute": "error-message",
                 "defaultValue": "''"
             },
+            "inputPrefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-prefix",
+                "defaultValue": "''"
+            },
+            "inputSuffix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-suffix",
+                "defaultValue": "''"
+            },
             "inputClass": {
                 "type": "string",
                 "mutable": false,

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

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: '8d96b1969ca9aa7ec1bd722f2996874a295ed91c', class: this.paginationClasses }, h("div", { key: '5dac4f45c9610e03fc8fcf0b63e0a00749981d43', 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: 'c689cc21909b50a709487a409ecbd2ba48d3db3a', class: this.paginationClasses }, h("div", { key: 'a38cee49c5d225beea8acd35cb7b370319886bee', 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: '93faf25a3b7938d1f21d418e27d123418f4fd885', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '40dcb43cd251c5cbdf18e502acd67962e87d4496', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -39,14 +39,14 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'fff237ce8170b96e2df5ee6a0ca41788faaf7a8d' }, 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: 'ebe20947b2b40bbc1f52830f4cd87a8c5caf560d', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: 'c4d3b775caf8f3894f9dfb01940415efee240a6f', class: {
+        return (h(Fragment, { key: '32543028f51799b838817a81d82c8fc4e16d34d9' }, 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: '146f7b10c48d0e43d9daad84f2b0d73a53c1f083', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: '020b1bc52cb001ef761aac5e88fdfe4a3cc1dbfc', 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: 'eec87654cb0106ae923d3066bebb7c8f2b45fc9d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '65e6ec07ad22a9af4cf8a55364dd150367e6014f' })), h("div", { key: '622d4cb7f8da1156282d7f4cfdbaedf252ad5ce5', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '57a0b7f7a59b33301f4f98a94bee93cf3417b1ca', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '51687eca637e52d3a3a0bc1b3ff3a8bc3ff4cedc', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'b523cb228acaff8f09169bffcaac48e6bd722336', 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: 'e40870c25bf20cd4f6e9d94fd3eb8bc1966a301f', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '149b7ef2e71c2dbb3d20e72c69db0131e657d811', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, h("i", { key: '819af7776ce65a25c996262105b05e37d4d04652', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '053b299c5a41acb16042adfa2aba7c35eedb0602' })), h("div", { key: '109f2b1044827112922e40b04671785209b9d816', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '99f49b0165ce502ba30ecac3369ba6086cbabb6f', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '5ecd1eea5a83c3fcf71719b308b75734ba42f96d', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '9a3a3a38dd3fac46e370f45e65dd22dbcf49bce7', 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: '6f231ddb997a45f23c258a092b45f3d6a5e49e60', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '738c152ec2435992ae21394bf2c164515cef7ed9', 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: 'c2151eaee443634267c305786ccdaf6416fe394d', style: {
+        return (h("div", { key: '483f8f0ec69bc7f4bd608332eb2f87b722bc947f', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'aa56564899ccecead394dc3387c34702d5500b34', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'b4d3f1f425cd4ae96ef02a6c56671a182ab7ca09', 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: '85941422969d2472f73acbfde70b9f4c84b19182', class: {
+        return (h("div", { key: '0e45aa22a4566ec4a1a4f8dbecd2f60a024b0a34', 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: 'a1e560a5e7540ceff7b6f318a912eea7f01e6133', 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: 'c8f63d17ec76fff2bbb36773baa2dc015396956a', 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: 'cf7d1713909ca6a3019108696db2ddd5c463a096', class: {
+        return (h("div", { key: '1312407dd54318273dd5be025d20c992a5e8bd97', 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: '7d93bb2cd789e2eb2a9c804a28dbc235141aebe7', class: {
+        return (h("div", { key: 'cfc997e9e3c418a2aa6eb33cb39a3928fba84f91', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '4689f5cda43be0fce12c14c5b5bf5db19cd3feb4', 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: '5d2528dfba7a392c31d47699f4afbcee41583754', 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: '6232030972be62a7629f081aedbdeec35a6df8c3', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: 'a9161175dfd27e86fa5ac036ab592c33d5820040', 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

@@ -270,7 +270,7 @@ export class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '9e061f322fd1d9b167799bee6d65492713eb362a', 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: '47c889231afc91990925e1c45756aae807488aec', class: {
+        return (h("sd-field", { key: '7dc16e6167d57ea23971ddc60f6414c1894f4163', 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: '470501b3bd905154bb090c11237feea3c3566fd5', 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

@@ -150,7 +150,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '12131e1b42264d0bbbbb532853d0c06b965b3bbf', 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: '160851723259f7a08c1ad04e4556a91f3e279692', class: {
+        return (h("sd-field", { key: '526a52f1fb3a8bd80a55d7094857901d7c933ca5', 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: '1084a5740aca5ea9d27485807e7edfc276d78ba3', 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: '698eebc16494ef9b8aa329ccf2549be1351b11c7', class: {
+        return (h("div", { key: 'a26c5527bd3ffcf56d9811f5bca91fd859a232ea', 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: 'e33a6e2db8bc391d7f21ac3d659afcb29eef058d', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '953c9d5b908a43258d81518796c2be42f6a56eca', 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: '30ac15175f13b9cffe740052dbf18ca14753ab6d', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '04a8a8a8bdc847c6c7cb757961f69e1e40161775', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '21bbbebce2462b7a20dd06402bbf16ff6e3c0e97', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '3a846467af0b14799c6686e9c391f1277c79d5f5', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'eca4b0955a7988a1a293b709bf29dc23f9443def', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '39e0a7a5444b9096da0d759cdb4cd0ee04bf2250', 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: 'f0d65a9105fa1c67d3221c4f74e3d09ef2f8e04f', class: {
+        return (h("div", { key: 'c84ff08d801e2775edfb55e30e11b3ec37c3e0e1', 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: '03a603a7df7cc2cff1053a892063914ea8779d1e', 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: 'bf97b1fe93f9473563bbf5545bc094240e3c52ac', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '3dfa34cb1d40eb253adcf468e5191c8dd6542c12', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '96423d573fd7cbd158196d114ae6c81a371c2fd7', 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: '4745f1f61994b31b2b84fb651eb47974e9cb5f0e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '311244150b27e9aa50d4ab790bacca3552af43ae', 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() {

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

@@ -41,12 +41,12 @@ export class SdSelectV2ListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: 'b8b4a1d9ad17e6e69f7dde67fdd33efd63037b93', class: {
+        return (h("div", { key: 'c09115eed7c6fc796f80aa965b64dec18caf6c49', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'adc75b18cc7fa1d5342a27b0c280dc30fe8a3096', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '4d5836bbc46dc3812643c6de3b6d9d8c5f464115', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '8578c547e402cba605e754923cbf5be3e70d0990', ref: el => {
+            } }, h("div", { key: 'd5d4132740768db4b1e9df4f7e4e7085f5fbe408', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '428d646550ed6d3488a493f1614ba4211611c945', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '5fb8aea3be8de6cf81cee48667d552b8a3bd47dd', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (h("button", { key: 'ca47bf60370a7789902b5a4b0f88d05d367ea203', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: '2a54de3c1def6ae013ed71556132aaf62244d515', name: "close", size: 12, color: "#888888" }))))));
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), this.searchText && (h("button", { key: '64178df4690ea5736c554f13d7613f172fb7ff9a', type: "button", class: "sd-select-v2-list-item-search__clear", onClick: this.handleClear }, h("sd-icon", { key: '4143f22fbfd890a39ee7149dfbc4c46e07ba259b', name: "close", size: 12, color: "#888888" }))))));
     }
     static get is() { return "sd-select-v2-list-item-search"; }
     static get originalStyleUrls() {

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

@@ -283,7 +283,7 @@ export class SdSelectV2Listbox {
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
             '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (h("div", { key: '3e4f1dc3dd46a518746784a6fd1e5d81dcb12018', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '625073cdb743d84349e2212ba3b487f5c8e2de46', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '12178f969858857281b1798a202230cf4936ed94', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: 'b6a2e5bdc338bceb6fff14fb4dd1dff7aa5ef8d4', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '70698ce176c33401a5846a078e56b1f20332881c', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'b8106d8003dde8476b119cdde89fe4ddcaab2611', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
             } }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-v2-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }

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

@@ -28,11 +28,11 @@ export class SdSelectV2Trigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '4db2c9bb26cb817f899f238063afd9855c2ae502', class: {
+        return (h("div", { key: 'bc824455fa516812712fe2c3f5858a7afe64340a', class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, h("div", { key: '227a745b7ba73901dbfe17945279387b758c0577', class: "sd-select-v2-trigger__content" }, h("span", { key: 'bc6756c4f7f72906d40edab3610bde366a5b107d', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: 'ac2b4b404820b05fea838ff9ddfa45f780fa08a8', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, h("div", { key: 'bf7bae47cc19b07d76dcadf118f8490a40a7b635', class: "sd-select-v2-trigger__content" }, h("span", { key: '89799c367a752c6a7403ed20801e5dc87c9f3426', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: 'dac0037a8c2f3d475795786b642f7cd725358fa4', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -206,13 +206,13 @@ export class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: '4fe1bd7befbfc60ad90192f3079cf54ce5d8bd09', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '94a50bd86ecb1fdaab2e5edd816f123f985bb5e1', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '99809365b96f08d6e3b2e9b1b780b5a4cf8a9870', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: '6986034ffd38602b111724ea998199d88bbed270', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: 'dc17ab21d65c3f522c6ba1212509135ecc147b17', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '33bc089499fd4b08c1593769062a7c4ee174ffbc', ...portalProps }, h("sd-select-v2-listbox", { key: '237dd065a3b82a4ac3be7a8553a196356d54ff02', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, h("sd-select-v2-trigger", { key: '3af08facaebc0ec5b99ced0bb93cf8daea3367cb', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '6fa4284cdd6d69d02a93e2e18423a7029122e58f', ...portalProps }, h("sd-select-v2-listbox", { key: '323f811ace6ee59c1d7b15ae7fa497a49b1d2f17', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select-v2"; }
     static get originalStyleUrls() {

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

@@ -12,14 +12,14 @@ export const TAG_COLORS = [
     'indigo',
 ];
 const TAG_COLOR_CONFIG = {
-    grey: { background: tagTokens.tag.grey.content, content: tagTokens.tag.grey.bg, icon: tagTokens.tag.grey.bg },
-    red: { background: tagTokens.tag.red.content, content: tagTokens.tag.red.bg, icon: tagTokens.tag.red.bg },
-    orange: { background: tagTokens.tag.orange.content, content: tagTokens.tag.orange.bg, icon: tagTokens.tag.orange.bg },
-    yellow: { background: tagTokens.tag.yellow.content, content: tagTokens.tag.yellow.bg, icon: tagTokens.tag.yellow.bg },
-    green: { background: tagTokens.tag.green.content, content: tagTokens.tag.green.bg, icon: tagTokens.tag.green.bg },
-    blue: { background: tagTokens.tag.blue.content, content: tagTokens.tag.blue.bg, icon: tagTokens.tag.blue.bg },
-    darkblue: { background: tagTokens.tag.darkblue.content, content: tagTokens.tag.darkblue.bg, icon: tagTokens.tag.darkblue.bg },
-    indigo: { background: tagTokens.tag.indigo.content, content: tagTokens.tag.indigo.bg, icon: tagTokens.tag.indigo.bg },
+    grey: { background: tagTokens.tag.grey.bg, content: tagTokens.tag.grey.content, icon: tagTokens.tag.grey.content },
+    red: { background: tagTokens.tag.red.bg, content: tagTokens.tag.red.content, icon: tagTokens.tag.red.content },
+    orange: { background: tagTokens.tag.orange.bg, content: tagTokens.tag.orange.content, icon: tagTokens.tag.orange.content },
+    yellow: { background: tagTokens.tag.yellow.bg, content: tagTokens.tag.yellow.content, icon: tagTokens.tag.yellow.content },
+    green: { background: tagTokens.tag.green.bg, content: tagTokens.tag.green.content, icon: tagTokens.tag.green.content },
+    blue: { background: tagTokens.tag.blue.bg, content: tagTokens.tag.blue.content, icon: tagTokens.tag.blue.content },
+    darkblue: { background: tagTokens.tag.darkblue.bg, content: tagTokens.tag.darkblue.content, icon: tagTokens.tag.darkblue.content },
+    indigo: { background: tagTokens.tag.indigo.bg, content: tagTokens.tag.indigo.content, icon: tagTokens.tag.indigo.content },
 };
 const SQUARE_SIZE_CONFIG = {
     xs: {

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

@@ -19,7 +19,7 @@ export class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'd54a1ff06a6012b9774184f7578cf2765322847c', class: "sd-tag", style: {
+        return (h("span", { key: 'e2ea10f2795e7cb481108903609785d490046539', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -29,7 +29,7 @@ export class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '1660447d9b14b42e1220bfc5c3c0f8918a0f29a0', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '129b9791f345e368de9d19afef62f740435dd07f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-text-link/sd-text-link.js

@@ -30,16 +30,16 @@ export class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             '--sd-text-link-color': contentColor,
         };
-        return (h("span", { key: '280bf34fb5caa781e9856daf40fb8060bc2c5ad1', class: {
+        return (h("span", { key: 'e93a2744e49a267f4b775793e0e18f0c223a03dd', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '360d18168152ef09d2e94c78682f962f66136b1b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'bb24813bd296ffbdbf9d46ee18382ebea1338a0a', class: "sd-text-link__label" }, this.label), this.useArrow && (h("span", { key: 'e5ee0dc6b5510b8b4e28e33f8a8c7515c1e9ec44', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '3f39510caef0cec81ba23340e25f920389886b69', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'ad0cac3fda5be82e5f0d2d9e7822b2bf82d2d4ee', class: "sd-text-link__label" }, this.label), this.useArrow && (h("span", { key: '2ecdfdb83f62468ff36f6da1b96caf53b2302bbf', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: '6989fe375a6f3fa02e57c13e0fbf8d1bfa4180ef', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: '92140c5c4fffc70af27894cd4f1a6bab80e6f64c', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {