@sellmate/design-system 1.0.54 → 1.0.56

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

@@ -100,13 +100,13 @@ export class SdCalendar {
         // eventsRevision 참조로 events/eventColors 변경 시 re-render 보장
         void this.eventsRevision;
         const allEventNames = this.getAllEventNames();
-        return (h("div", { key: '149ca9ae588a7bd2d70ecf1bf13cc639c99f7da9', class: "sd-calendar" }, h("div", { key: '65f58d53fbaf35cee16007bad0b5e56dd208393e', class: "sd-calendar__header" }, h("div", { key: '76709fd094edaece5ede720a983d1103801ba76d', class: "year-nav" }, h("button", { key: '6d46cfa4cb1d12507ba7570cb6c0bb88bcba3402', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
+        return (h("div", { key: '9a286709cd9891c60f3a9e3f96bbb10febf7f69c', class: "sd-calendar" }, h("div", { key: 'cb52cef3371662e7fda7c4226c22aa1c01c7d4c1', class: "sd-calendar__header" }, h("div", { key: '7e1cf45b0a75c0cc44f0b1b126017049a8af2b1d', class: "year-nav" }, h("button", { key: '0edb0d7be512fdc36e5c3382c47e47cef04d75c8', type: "button", name: "prev-year", title: "Previous Year", onClick: () => {
                 this.currentYear = this.currentYear - 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, h("sd-icon", { key: '1319ec1fa0f2533a5d02853cb7638b1f1c10e050', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: '678b705cd95dc499975e071f1607f26bdd50c36d', class: "year-nav__current" }, this.currentYear), h("button", { key: '1f5c3a0cd6108da5ed1beb10bd6af4ea5f22cf4c', type: "button", name: "next-year", title: "Next Year", onClick: () => {
+            } }, h("sd-icon", { key: 'e336280d87d459615721cc03d75b2d02d1c87ee0', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: 'a9d9de8ef82508f0d6e998e434ecc5dcc6f84017', class: "year-nav__current" }, this.currentYear), h("button", { key: '4d0d76f89442baf209628ca1708d092776ed4606', type: "button", name: "next-year", title: "Next Year", onClick: () => {
                 this.currentYear = this.currentYear + 1;
                 this.viewChange.emit({ year: this.currentYear, month: this.currentMonth });
-            } }, h("sd-icon", { key: '9dff93aef0996c3679a6a8c93c0fce1ea390f4aa', name: "arrowRight", size: "12", color: "grey_45" }))), h("div", { key: '9a6840420da580096fbf24d2c4df656114e23e6e', class: "month-nav" }, h("button", { key: '94bf7598e5b80d6deb407f607034ed6e9f88151f', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '4ab19da5f6a12bf37b3c4d9aac4e2283762799e8', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: 'c207959595c107cae05a7cbe1d169357b063a29d', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'fe319c8b26d9259bcba2b1f251bb827977e6afdc', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: 'af5bb1c06058b6ce22c8d7ffacace2f558bdb013', name: "arrowRight", size: "12", color: "grey_45" })))), h("div", { key: 'ca66c0d7744970364f7d5e11e61014471df3325b', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '9d42c252b8b42754aedc64156ec1dbe45200cef0', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
+            } }, h("sd-icon", { key: '065c391f62e7ba33631b61c84f032224e594f476', name: "arrowRight", size: "12", color: "grey_45" }))), h("div", { key: '36de2a57b793f67a73d4125fb6574b4235d0cdf7', class: "month-nav" }, h("button", { key: '99d67577999e4304ec5c414af6ec35711570e7de', type: "button", name: "prev-month", title: "Previous Month", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '2c04f97d92580d3392d6ee94b239999d889ecdab', name: "arrowLeft", size: "12", color: "grey_45" })), h("span", { key: '4e2ad881df27eafa93544a1cd17e4ad0deb70cc6', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: 'fa365a20c253047bb51e02495b537d7404cbdda7', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '0aecbf5c466465dd5674d8e69972ba1b08360305', name: "arrowRight", size: "12", color: "grey_45" })))), h("div", { key: 'b60e5105e1a4ab2b44dda037645be75604d92df7', class: "sd-calendar__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: '4f60a19754da1a707569887d909a7b01163d07b8', class: { 'sd-calendar__body': true, 'sd-calendar__body--has-events': !!this.events } }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,
@@ -117,7 +117,7 @@ export class SdCalendar {
             return (h("div", { class: "sd-calendar__cell", key: `${day}_${idx}` }, h("sd-date-box", { date: !day ? '' : Number(day), selected: this.value === formattedDate, isToday: today === formattedDate, disabled: !day ? true : this.isDisabledDate(formattedDate), onClick: !this.isDisabledDate(formattedDate) && day
                     ? () => this.handleDateClick(Number(day))
                     : undefined }), this.events && (h("div", { class: "sd-calendar__dots" }, uniqueEvents.map(eventName => (h("span", { key: eventName, class: "sd-calendar__dot", style: { backgroundColor: this.getEventColor(eventName) } })))))));
-        })), allEventNames.length > 0 && (h("div", { key: 'dac97204484b1def1fd3d73939ef64ef6969bce2', class: "sd-calendar__legend" }, allEventNames.map(name => (h("div", { key: name, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), h("span", { class: "sd-calendar__legend-label" }, name))))))));
+        })), allEventNames.length > 0 && (h("div", { key: '97d41f2a28b76d97568d50cb029ff8a5eaa13f9e', class: "sd-calendar__legend" }, allEventNames.map(name => (h("div", { key: name, class: "sd-calendar__legend-item" }, h("span", { class: "sd-calendar__legend-dot", style: { backgroundColor: this.getEventColor(name) } }), h("span", { class: "sd-calendar__legend-label" }, name))))))));
     }
     static get is() { return "sd-calendar"; }
     static get encapsulation() { return "scoped"; }

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

@@ -89,7 +89,7 @@ export class SdCheckbox {
             '--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
             '--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
         };
-        return (h("label", { key: 'b343ac293abfb6a7834cccc597cd30e56e3a161c', class: this.checkboxClasses, style: cssVars }, h("input", { key: '89d3c5ec214af16680f2111e5e85fcb228ff2223', type: "checkbox", ref: el => { this.inputEl = el; }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '8eef48a269cbbf8c479d60a53996b09cc4aa8f20', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled ? CHECKBOX_COLORS.checked.iconDisabled : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: '43bf36ec3a3890f68ef699dbb73b48eb6a98451d', class: "sd-checkbox__label" }, this.label)));
+        return (h("label", { key: '4c92d46aab587f6e03f27d2a6356eca268141737', class: this.checkboxClasses, style: cssVars }, h("input", { key: '22934eecb45213964374042e999ee0102fe3ae07', type: "checkbox", ref: el => { this.inputEl = el; }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: 'fc18ccbcfe3403a1b8c1df6adc161d8b70ef7b5c', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled ? CHECKBOX_COLORS.checked.iconDisabled : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: 'eb0d41a18406991affce5ea81f303e1a64d5b9c1', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-box/sd-date-box.js

@@ -23,7 +23,7 @@ export class SdDateBox {
         this.mouseOver?.emit(this.date);
     }
     render() {
-        return (h("div", { key: 'b14dd7c9806828807cdfc232420a30c816ffbeb2', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("div", { key: '0c1e27245a3589ed493b26ad17cfe1b7c64c0be3', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-date-box': true,
                 'sd-hoverable': !this.disabled || !this.selected || this.type === '',
                 'sd-date-box--disabled': this.disabled,
@@ -34,7 +34,7 @@ export class SdDateBox {
                 'sd-date-box--in-range': this.inRange,
                 'sd-date-box--type-start': this.type === 'start',
                 'sd-date-box--type-end': this.type === 'end',
-            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: 'acb1a2d51d018913e39f8fd1fc54ab85c4ce6957', class: "sd-date-box__content" }, h("div", { key: '8c9445e4268cd254d76297ac1e775697d889f721', class: "sd-date-box__label" }, this.date))));
+            }, onClick: () => this.handleClickDate(), onMouseOver: () => this.handleHoverDate() }, h("div", { key: 'c40b8e120298ca356ce2016f9b9dc72df703c6fe', class: "sd-date-box__content" }, h("div", { key: '7edd94f83506397683620166322c1ab6095fedec', class: "sd-date-box__label" }, this.date))));
     }
     static get is() { return "sd-date-box"; }
     static get encapsulation() { return "scoped"; }

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

@@ -59,7 +59,7 @@ export class SdForm {
         this.submitSuccess.emit();
     }
     render() {
-        return (h("form", { key: '2a72e0fb172294913a22560311e8dfcc4b151968', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'd0bd0c7f915e10c7fd9aa36af68b2020035a43d4' })));
+        return (h("form", { key: '82112bf33b4b3090d45f2be051a4586ef81ce413', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '56ab994680c225eb8b09b16b1a6a2bb789f470c7' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {

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

@@ -326,7 +326,7 @@ export class SdModalContainer {
                             "docs": ""
                         }, {
                             "name": "props",
-                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; }",
+                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; }",
                             "docs": ""
                         }],
                     "references": {

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

@@ -21,7 +21,7 @@ export class SdRadio {
     }
     render() {
         const isSelected = String(this.val) === String(this.value);
-        return (h("div", { key: 'e9d7875b19c108505e7dfd455432102c8035097f', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: 'cc0aa88287000b77c2329bba2371e9e4404f8203', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (h("span", { key: 'b2a371ef8bc4ccc57ffbbc6acc22bf4b9c391fc1', class: "sd-radio-group__label" }, this.label || String(this.val))))));
+        return (h("div", { key: '7db77e527fe79fcc55c81c7d827d0cc8026214cd', "aria-label": String(this.val) || 'radio option', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: this.getRadioClasses() }, h("label", { key: `radio-${this.val}` }, h("input", { key: 'b8f3d5f83c2ee12d7e447d2b6cf8512fcde086ef', type: "radio", name: String(this.val), value: String(this.val), checked: isSelected, disabled: this.disabled, onInput: () => this.handleRadioChange() }), this.val != null && (h("span", { key: '43e56a21cab0dd9a5dbc57174dd7f309f8152660', class: "sd-radio-group__label" }, this.label || String(this.val))))));
     }
     static get is() { return "sd-radio"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.js

@@ -36,7 +36,7 @@ export class SdRadioButtonGroup {
     }
     groupName = this.name || `sd-radio-button-group-${crypto.randomUUID()}`;
     render() {
-        return (h("div", { key: '419d62e718ddcecb4a901f4c4bc98b560c8c4f01', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: '4a1f76b1f53f07f7a062d4a0ce8bf44a47c5366b', class: this.getGroupClasses(), role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button-group__label" }, option.label)));

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

@@ -22,7 +22,7 @@ export class SdRadioGroup {
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: '82979426bafc24b48858588ad186dfe069616883', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (h("div", { key: 'd2296269f2d47fd35c5ad2653bdb0048be14836d', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

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

@@ -141,7 +141,7 @@ export class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (h("sd-field", { key: 'f7cd0c34188712a30389d07bde7edc7875e9923b', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '460a8a23247e24a02bd25470105598914029e205', class: {
+        return (h("sd-field", { key: '94b1ba70718a366048ba4287b28f88bd42b12ee1', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'feaa2f25ebdf8aa919490bdf0cba88e30a9de33d', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,

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

@@ -392,7 +392,7 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '350c7b2df807166a1439a2151f0f168385adac4a', 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), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'cce989263e1c7dcb38216e734aabe6eea643676a', class: {
+        return (h("sd-field", { key: 'b0b3eeacc1dc3244a17c91c81adc8cd79df74bf3', 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), style: { '--field-width': this.width || '200px' } }, h("div", { key: '7738287fc12ce54623d20797e70b885ba643501e', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

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

@@ -759,16 +759,16 @@ export class SdTable {
         return (h("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: this.getSpacerCellStyle(spacerWidth), "aria-hidden": "true" }, h("div", { class: "sd-table__skeleton-cell" })));
     }
     render() {
-        return (h(Fragment, { key: 'f3e4930d36d080fd546dddc1e80190b831e93012' }, h("div", { key: 'ad2f798951631319190d93f83e25b87f871e58de', class: "sd-table__wrapper", style: {
+        return (h(Fragment, { key: '51c6e388c76a39b791e54e350d28a7ee7dd58b9e' }, h("div", { key: '8d43403b53e16173c559f6636bd5b74f3640b770', class: "sd-table__wrapper", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
-            } }, h("div", { key: 'c4b6d4080f1416d1c88ab1413c66848bdafe9019', class: "sd-table__container", style: {
+            } }, h("div", { key: '43d8dba10880816cb414b1df24493d5617e31bec', class: "sd-table__container", style: {
                 '--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
-            } }, h("div", { key: '3aacc27970b0c6d8b700063c0af7c57175e2cb22', class: {
+            } }, h("div", { key: 'a5c9e235a77dad5d3b061951e489ceafaee2d7a6', class: {
                 'sd-table__middle': true,
                 'sd-table__middle--scrollable': this.paginatedRows.length > 0,
                 'sd-table__middle--loading': this.isLoading,
-            } }, this.isLoading && (h("div", { key: '25fca304a4e8ebf43aeeff20de3e3446d25e1ffb', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '48b0adad60cf422b884557b53097c28a4f0b8879' }))), h("table", { key: 'ec4328a1f43c865de642cc5814fbdef6a374b7e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: 'ba362ecb9fb8134a15ff3d0a3b8e6a523e94166a', class: "sd-table__bottom" }, h("div", { key: 'ca5c2e0b19a1e301ac159588436ef24eecfb6365', class: "sd-table__no-data" }, h("slot", { key: '68564a60a05833ba87743212d7189eef6e179fb4', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '88c3c7362234c20a60f6437ecd79d4c75b2caa6e', class: "sd-table__pagination" }, h("sd-pagination", { key: 'c3c8c435fcb752f2b1139981bb764cf4dfb153ab', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '03801039397a31321e5af96c2bd2d2900151240e', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
+            } }, this.isLoading && (h("div", { key: 'b2fd19d29cb053e5747a1ff55ff109e5e154a8e0', class: "sd-table__middle--loading__spinner" }, h("sd-loading-spinner", { key: '2f16c480b25032a9547ecdca61ce1c3838eab7ba' }))), h("table", { key: 'ece092ed1ecb20a7ea7b131f8f6a4954b5bad1e3', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), !this.paginatedRows.length && (h("div", { key: '076839c1e278879a01bfae3c42b62565b30796f7', class: "sd-table__bottom" }, h("div", { key: 'e3dd7080da396abb350d31f7125f4a6f04c2f31b', class: "sd-table__no-data" }, h("slot", { key: '81181ee58a7cb9ec8c89fa0e6cf37ef50e22f019', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (h("div", { key: '14e4653021886d3d7241806429ff02430c5ff09f', class: "sd-table__pagination" }, h("sd-pagination", { key: 'e266a9bffeaf7ba012945e0866928cee7b8220d4', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: '5ef017820acdcca279c9e1b46b79b4ba44b7dfca', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdUpdate: (e) => this.changeRowsPerPage(e.detail.value) })))))));
     }
     static get is() { return "sd-table"; }
     static get originalStyleUrls() {

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

@@ -39,7 +39,7 @@ export class SdTabs {
         return `square_${this.size}_${color}`;
     }
     render() {
-        return (h("div", { key: '74a25ee4311c84e79f4918b884385f27d6af6313', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '826e7c3a694d1243506fe8361553d476e21e71fb', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
         })));

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

@@ -0,0 +1,16 @@
+import inputTokens from "../../tokens/generated/component.textinput.json";
+export const TEXTAREA_TOKENS = {
+    paddingX: inputTokens.input.sm.paddingX,
+    paddingY: inputTokens.input.sm.paddingY,
+    radius: inputTokens.input.sm.radius,
+    fontSize: inputTokens.input.sm.typography.fontSize,
+    lineHeight: inputTokens.input.sm.typography.lineHeight,
+    fontWeight: inputTokens.input.sm.typography.fontWeight,
+    borderWidth: inputTokens.input.borderWidth,
+};
+export const TEXTAREA_COLORS = {
+    text: inputTokens.input.text,
+    bg: inputTokens.input.bg,
+    border: inputTokens.input.border,
+    resizer: inputTokens.input.resizer,
+};

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

@@ -1,68 +1,28 @@
 sd-textarea {
-  display: block;
+  display: inline-flex;
 }
-sd-textarea .sd-textarea {
-  display: flex;
-  flex-direction: column;
-  color: #333333;
-  font-size: 12px;
-  line-height: 20px;
-}
-sd-textarea .sd-textarea .sd-textarea__content {
+sd-textarea .sd-textarea__content {
   width: 100%;
   display: flex;
-  border: 1px solid #AAAAAA;
-  border-radius: 4px;
-  background: white;
 }
-sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native {
+sd-textarea .sd-textarea__content .sd-textarea__native {
   width: 100%;
   min-height: 100px;
   border: none;
   outline: none;
   background: transparent;
-  padding: 4px 8px;
+  padding: var(--sd-textarea-padding-y) var(--sd-textarea-padding-x);
   font-family: inherit;
-  font-size: 12px;
-  line-height: 20px;
-  color: #333333;
+  font-size: var(--sd-textarea-font-size);
+  line-height: var(--sd-textarea-line-height);
+  font-weight: var(--sd-textarea-font-weight);
+  color: var(--sd-textarea-text-color);
   resize: vertical;
 }
-sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native::placeholder {
-  color: #AAAAAA;
-}
-sd-textarea .sd-textarea--hovered .sd-textarea__content, sd-textarea .sd-textarea--focused .sd-textarea__content {
-  border-color: #0075FF;
-  box-shadow: 0 0 4px 0 rgba(0, 113, 255, 0.4);
-}
-sd-textarea .sd-textarea--disabled {
-  cursor: not-allowed !important;
-  box-shadow: none !important;
-}
-sd-textarea .sd-textarea--disabled .sd-textarea__content {
-  background: #EEEEEE !important;
-  border: 1px solid #CCCCCC !important;
-  color: #888888 !important;
-}
-sd-textarea .sd-textarea--disabled .sd-textarea__content .sd-textarea__native {
-  cursor: not-allowed !important;
-  color: #888888 !important;
-}
-sd-textarea .sd-textarea .sd-textarea__footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 4px;
-  font-size: 12px;
-  line-height: 20px;
-}
-sd-textarea .sd-textarea .sd-textarea__help-text {
-  font-size: 12px;
-  line-height: 20px;
-  font-weight: 400;
-  color: #222222;
+sd-textarea .sd-textarea__content .sd-textarea__native::placeholder {
+  color: var(--sd-textarea-placeholder-color);
 }
-sd-textarea .sd-textarea .sd-textarea__counter {
-  color: #CCCCCC;
-  margin-left: auto;
+sd-textarea .sd-textarea__content .sd-textarea__native:disabled {
+  cursor: not-allowed;
+  color: var(--sd-textarea-disabled-color);
 }