@sellmate/design-system 1.0.18 → 1.0.20

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

@@ -6,9 +6,18 @@ sd-button {
 }
 
 .sd-button {
+  --sd-button-height: 34px;
+  --sd-button-padding-x: 20px;
+  --sd-button-gap: 8px;
+  --sd-button-font-family: inherit;
+  --sd-button-font-size: 16px;
+  --sd-button-font-weight: 500;
+  --sd-button-text-decoration: none;
+  --sd-button-label-min-width: auto;
+  --sd-button-icon-only-size: var(--sd-button-height);
   text-decoration: none;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--sd-button-radius-default, 4px);
   transition: all 0.2s ease-in-out;
   position: relative;
   overflow: hidden;
@@ -20,34 +29,64 @@ sd-button {
   align-items: center;
   justify-content: center;
   border: none;
+  padding: 0 var(--sd-button-padding-x);
+  min-width: var(--sd-button-min-width, auto);
+  min-height: var(--sd-button-height);
+  font-family: var(--sd-button-font-family);
+  font-size: var(--sd-button-font-size);
+  font-weight: var(--sd-button-font-weight);
+  text-decoration: var(--sd-button-text-decoration);
 }
 .sd-button--xs {
-  padding: 0 8px;
-  font-size: 12px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-xs-height, 24px);
+  --sd-button-padding-x: var(--sd-button-xs-padding-x, 8px);
+  --sd-button-gap: var(--sd-button-xs-gap, 4px);
+  --sd-button-font-family: var(--sd-button-xs-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-xs-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-xs-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-xs-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-height));
   line-height: 20px;
-  min-height: 24px;
 }
 .sd-button--sm {
-  padding: 0 12px;
-  font-size: 12px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-sm-height, 28px);
+  --sd-button-padding-x: var(--sd-button-sm-padding-x, 12px);
+  --sd-button-gap: var(--sd-button-sm-gap, 6px);
+  --sd-button-font-family: var(--sd-button-sm-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-sm-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-sm-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-sm-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-height));
   line-height: 20px;
-  min-height: 28px;
 }
 .sd-button--md {
-  padding: 0 20px;
-  font-size: 16px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-md-height, 34px);
+  --sd-button-padding-x: var(--sd-button-md-padding-x, 20px);
+  --sd-button-gap: var(--sd-button-md-gap, 8px);
+  --sd-button-font-family: var(--sd-button-md-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-md-typography-font-size, 16px);
+  --sd-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-md-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-height));
   line-height: 26px;
-  min-height: 34px;
 }
 .sd-button--lg {
-  padding: 0 28px;
-  font-size: 18px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-lg-height, 62px);
+  --sd-button-padding-x: var(--sd-button-lg-padding-x, 28px);
+  --sd-button-gap: var(--sd-button-lg-gap, 12px);
+  --sd-button-font-family: var(--sd-button-lg-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-lg-typography-font-size, 18px);
+  --sd-button-font-weight: var(--sd-button-lg-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-lg-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-height));
   line-height: 30px;
-  min-height: 62px;
+}
+.sd-button--has-label {
+  --sd-button-min-width: var(--sd-button-label-min-width, auto);
 }
 .sd-button--primary {
   background-color: var(--button-color);
@@ -68,7 +107,7 @@ sd-button {
 }
 .sd-button--outline {
   background: white;
-  border: 1px solid var(--button-color);
+  border: var(--sd-button-border-width-default, 1px) solid var(--button-color);
   color: var(--button-color);
 }
 .sd-button--outline::before {
@@ -109,16 +148,16 @@ sd-button {
   z-index: 1;
 }
 .sd-button--disabled {
-  border: 1px solid #cccccc;
-  background: #e1e1e1;
-  color: #888888;
+  border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);
+  background: var(--sd-button-bg-disabled, #E1E1E1);
+  color: var(--sd-button-content-disabled, #888888);
   cursor: not-allowed !important;
 }
 .sd-button--icon-only {
   padding: 0;
-  width: fit-content;
-  height: fit-content;
-  aspect-ratio: 1/1;
+  width: var(--sd-button-icon-only-size, var(--sd-button-height));
+  min-width: var(--sd-button-icon-only-size, var(--sd-button-height));
+  height: var(--sd-button-icon-only-size, var(--sd-button-height));
 }
 .sd-button--no-hover:hover::before {
   opacity: 0 !important;
@@ -127,9 +166,9 @@ sd-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--sd-button-gap);
   z-index: 1;
-  font-weight: 500;
+  font-weight: inherit;
 }
 
 sd-guide {
@@ -160,7 +199,7 @@ sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label {
   margin-left: 4px;
 }
 sd-guide .sd-guide--active .sd-button {
-  border: 1px solid #00973c;
+  border: 1px solid #00973C;
 }
 sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
   color: white !important;

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

@@ -47,9 +47,9 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: '0b3cb2fd1bc331592f6f816aa729abce3fe7835e', class: "sd-guide", style: {
+        return (h("div", { key: '2a7d3d040d3fbe7d0c22afc62d67a848fbae67d9', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '42ef456f180a0ef5faef5524aca6707adfd0218b', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '3820cd8e59c0609c32606339d51eb31e7981f551', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '8c2be02160082b0c43b7b75edb3422135045b913', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '94d7de120549fa16952aacc08d6ba67b3542cbb9', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'e1c0ac8509fc47e1afad3d9d898d95281cdd70c9', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '864c8082c9fe43ca9d68f64530eab8b7b38fd6cc', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'db417ad8a23df1482d644f7fdee3ac60c86abf87', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '1baa8e7c8beb29c5cb8c9226ba948023ef57d799', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '6513c9fadbc0c9eeca432a16b28815aa2beb1004', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: 'e354fa7a48aacabbd7688f9546d71ec138b4a648', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '157583215cdba27ae493a07aaa3eb4a0e3923971', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '6aaa8f4ee6f44225ee63ef740d7398e87207c0c0', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '9184936963f96e2537b3713bd5ee38d0c058c72b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'a1f653f7e40f6ad4e97dca82e10d4f03843469fd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '561433ec3fcf6f9de4badd8e24ffaffbab4e62df', class: "sd-guide__popup__header" }, h("sd-icon", { key: '69aafb073fa680f8353deccb860320da083ff121', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '71f7fcb3068d572523c6bf53276e654feb1056f6', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '407db996ded71b9a5786b1e7967349517c7eb877', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '281baa39ffa7f3eaa1dad93658cb2c86fbfa8fb9', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '6759bd3374526b90ebffb60c3374385ca0f1b65a', color: this.resolvedColor })));
+        return (h("i", { key: '1d6a48769c99bbfe9576016e24766b8c82ab570e', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '3fdb4195ef13656e79b402a4eae2fb0210fb3a97', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {
@@ -45,7 +45,7 @@ export class SdIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"CheckFilled\" | \"CheckOutline\" | \"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFilled\" | \"checkOutline\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -178,7 +178,7 @@ sd-date-range-picker .sd-field .sd-input__native {
 }
 .sd-date-range-picker__menu .sd-date-range-picker__body .separator {
   width: 1px;
-  background-color: #d8d8d8;
+  background-color: #D8D8D8;
 }
 
 input:-webkit-autofill,
@@ -227,5 +227,5 @@ sd-input .sd-input__content .sd-input__native[disabled] {
   color: #888888;
 }
 sd-input .sd-input__content .sd-input__native::placeholder {
-  color: #aaaaaa;
+  color: #AAAAAA;
 }

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

@@ -85,7 +85,7 @@ export class SdInput {
         }
     };
     render() {
-        return (h("sd-field", { key: 'e3a668f4065ad4d7d4075607d20cf5e678c0a1eb', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '4d0a91447a6b0c162a4dfdee5603fc107182a205', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: 'c92e0603eee0f86ca0b1ed0ba48585ee75409475', name: "prefix" }), h("input", { key: '823608a07cca038c0360ada0f918c3b20dfb4028', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '17214d9e18cb25c4938fd184b9506ccee0b34f56', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '8cfdf4086544261be758df0ceaa822c6b313ec2e', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '87f02ba890fd952f89eb86d200318038137ba1a4', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '0bb5824067b33c178b1f60ececdccfe0a3d5f294', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '6f67712b4ca708ba511c57379a6b5118732f146a', name: "prefix" }), h("input", { key: 'b337a1161dedb41ed29a690fa963c0ac60dd0c79', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'bf45d9fd71551dc6a3bb96cdc44512796beee923', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'aed0a5d9115ba8b7601dc62423349bee1a9978c7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));

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

@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Fragment, { key: 'aea077417bbdc982ca01898a844a11aea1ea9f23' }, h("svg", { key: 'f44999f62621e50fdcec62f7daa5f2ec82a20c07', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '54fb28e1408597bf9882b5160eaa48c244b2535e', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Fragment, { key: 'c3b3448fcc65334af3246f80157b195ec5595afe' }, h("svg", { key: '24701b65d17e56434cf46b72dbd5acec208b5dc8', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'e19c68c082348d36eecd05fa561eee91182349f2', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

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

@@ -49,7 +49,7 @@ sd-number-input .sd-number-input .sd-number-input__input::placeholder {
   font-size: 12px;
   height: 20px;
   line-height: 20px;
-  color: #aaaaaa;
+  color: #AAAAAA;
 }
 sd-number-input .sd-number-input .sd-number-input__clear-icon {
   cursor: pointer;
@@ -71,7 +71,7 @@ sd-number-input .sd-number-input .sd-number-input__button {
   height: 20px;
   border: none;
   border-radius: 2px;
-  background-color: #eff6ff;
+  background-color: #EFF6FF;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -81,10 +81,10 @@ sd-number-input .sd-number-input .sd-number-input__button {
   transition: background-color 0.2s ease;
 }
 sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled) {
-  background-color: #e6f1ff;
+  background-color: #E6F1FF;
 }
 sd-number-input .sd-number-input .sd-number-input__button:disabled {
-  background-color: #eeeeee;
+  background-color: #EEEEEE;
   cursor: not-allowed;
 }
 sd-number-input .sd-number-input .sd-number-input__button--decrement {
@@ -105,6 +105,6 @@ sd-number-input:focus-within .sd-number-input__buttons {
   pointer-events: auto;
 }
 sd-number-input:focus-within .sd-number-input {
-  border-color: #0075ff;
+  border-color: #0075FF;
   box-shadow: 0 0 4px 0 rgba(0, 113, 255, 0.4);
 }

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

@@ -169,6 +169,7 @@ export class SdNumberInput {
         }
     };
     handleFocus = (event) => {
+        this.focused = true;
         this.focus?.emit(event);
     };
     handleBlur = async (event) => {
@@ -239,17 +240,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("sd-field", { key: '67a058098338d7caa85392f937f94ba3cb030de5', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: '2f49f1f6244814018c37c9b282d5b75bc3760fbe', class: {
+        return (h("sd-field", { key: '7aa387eeb5850052e121931b3f8183373b4319aa', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'f5bbb6c76e32de4aefe59c6958a38e1a560f05c9', 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: '3969b4b771db408e01278c8afe94f046c88933cb', 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: 'd9e5fe65e547d889e7de2b7101dddd24f9561ffb', class: "sd-number-input__buttons" }, h("button", { key: '4929c32d892adee3472ba01d811d1c9dc2b8a85d', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'fc26b7cf0d121025c9a748b158640e03188d72d3', 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: 'c9325ea7dd19c02fead55a0d63ac0b7b16143d08', class: "sd-number-input__buttons" }, h("button", { key: 'ec96811ce7046a3fe9506ca0635db97413d8283a', 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: '00f90c8f39b70efc832c1ba841275a55f4495dcf', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: '80f9c301c5a7c517f35d825610cfca0f37fbed31', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '70311a7723356ecc88125042d366bf567b0b5a2a', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: 'b7086218dc98fec4287e4becb0d834634fd52055', 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: '8173735e53fb25ba761ab8c316b7f9d245a161f6', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {

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

@@ -22,7 +22,7 @@
   background: none;
 }
 .sd-pagination .prepend-btns button:hover {
-  border: 1px solid #006ac1;
+  border: 1px solid #006AC1;
   border-radius: 14px;
 }
 .sd-pagination .append-btns {
@@ -39,7 +39,7 @@
   background: none;
 }
 .sd-pagination .append-btns button:hover {
-  border: 1px solid #006ac1;
+  border: 1px solid #006AC1;
   border-radius: 14px;
 }
 .sd-pagination .pagination-btn {
@@ -55,11 +55,11 @@
   width: var(--pagination-btn-width, 26px);
 }
 .sd-pagination .pagination-btn--selected {
-  background-color: #006ac1;
+  background-color: #006AC1;
   color: white;
 }
 .sd-pagination .pagination-btn:hover {
-  border: 1px solid #006ac1;
+  border: 1px solid #006AC1;
 }
 .sd-pagination--simple .pagination-info {
   line-height: 26px;

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

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'b6c73445ec3610f63c59592ebb7422ea7bc9709d', class: this.paginationClasses }, h("div", { key: '3392ad0991ea53bb9c85af8d647bd1c0ed22a29d', 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: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, h("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', 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: 'a5637dbbcf060aa0d36f26b0bbe6b2962995981a', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -30,11 +30,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '7ca71e038f87350238a508661be8b3b72005cd8f' }, 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: '8ec8e22abe86fc20b65ce27f666cfd673d546d52', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'fd3e4123530b1a13b0aafb2794429a64f77c6fce', class: {
+        return (h(Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, 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: 'f38658d537cd8cebb84e579b02c73209e8a81d3a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '472702d7d51c08051670012fc2e930f41ad7f1b5', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: 'd81bf70ae701d32fe0e524ff1758654037fbe8d7', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'a904112496703c5ef148537f383529621be36aff' })), h("div", { key: 'aeade92b18cb6a3a9927236665254323613cf4a1', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '86b541c1e643d62da77a3aad02b7a2de6b2c60f3', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '13ab0f5b79d9dc52e8fbf1464fca6bc7870f574c', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '3cbc63be9af31d97252a7ca4d9fed1bc667cdaaa', 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: '6f6631280aac9d7416921844a815e1473b7db419', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '11374066cc8479b80cf1f92b6f9ce910fc9850bf', name: "close", size: "12", color: "gery_55" }))))))));
+            } }, h("i", { key: '1895eba14b74f393c7221db83fdf97e9a8f3a1aa', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '4307eb8e750dc36cae5477b366a4ea08a59a5a45' })), h("div", { key: '840d94cf1d4e3c63346cd48a2d47c1c0b0633046', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'ede807dfdb2efc2a8bf8f89ef597965092c79211', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '613ea1b46810eec1958b735fc23811d66ff2ebf8', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '06712ed73687c0e99778d5fda6d75a4e07d815dd', 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: '20d628d8d31bd6464c26f3cf5ba894c5c3a2428f', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'cd1dcbe02ed55a25364e88621db5ab287eb7ed8e', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {
@@ -114,7 +114,7 @@ export class SdPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"CheckFilled\" | \"CheckOutline\" | \"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrow2Down\" | \"arrow2Left\" | \"arrow2Right\" | \"arrow2Up\" | \"arrow2UpDown\" | \"arrowDown\" | \"arrowLeft\" | \"arrowLeftEnd\" | \"arrowRight\" | \"arrowRightEnd\" | \"arrowUp\" | \"attachFile\" | \"badgeNew\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"cancelFilled\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFilled\" | \"checkOutline\" | \"clockFilled\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"etc\" | \"event\" | \"global\" | \"helpFilled\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageLine\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"notificationFilled\" | \"notificationOutline\" | \"notion\" | \"outLine\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseLine\" | \"warehouseSolid\" | \"warningFilled\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -113,7 +113,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '94c0e115318d8f16bab2e2cb8c5be85d8f77279f' });
+        return h("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -7,14 +7,14 @@ sd-progress .sd-progress__bar {
   height: 20px;
   overflow: hidden;
   border-radius: 4px;
-  background-color: #eeeeee;
+  background-color: #EEEEEE;
   text-align: center;
 }
 sd-progress .sd-progress__bar__percent {
   width: var(--progress-percentage);
   height: 100%;
   border-radius: 4px;
-  background-color: var(--progress-color, #0075ff);
+  background-color: var(--progress-color, #0075FF);
   transition: all 0.5s;
 }
 sd-progress .sd-progress__bar__percent.proceed {
@@ -26,19 +26,19 @@ sd-progress .sd-progress__bar__indicator {
   top: 0;
   height: 20px;
   width: 100%;
-  background-color: #eeeeee;
+  background-color: #EEEEEE;
   font-size: 12px;
   font-weight: 700;
   line-height: 20px;
   z-index: 1;
 }
 sd-progress .sd-progress__bar__indicator--left {
-  color: var(--progress-color, #0075ff);
+  color: var(--progress-color, #0075FF);
   clip-path: inset(0 0 0 var(--progress-percentage));
 }
 sd-progress .sd-progress__bar__indicator--right {
   color: white;
-  background-color: var(--progress-color, #0075ff);
+  background-color: var(--progress-color, #0075FF);
   clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);
 }
 sd-progress .sd-progress__spinner {
@@ -53,7 +53,7 @@ sd-progress .sd-progress__spinner svg {
 sd-progress .sd-progress__spinner__label {
   margin-top: 8px;
   font-size: 16px;
-  color: var(--progress-color, #0075ff);
+  color: var(--progress-color, #0075FF);
 }
 sd-progress .sd-progress__label {
   margin-top: 4px;

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: '8921667b793f16a9a163d81b685231bc78d555a8', style: {
+        return (h("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'd87505bd6de6e791ea73ec4fdecf60ece8e83a3a', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', 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-radio/sd-radio.css

@@ -22,12 +22,12 @@ sd-radio .sd-radio label input {
   height: 16px;
   border: 1px solid #888888;
   border-radius: 50%;
-  accent-color: #0075ff;
+  accent-color: #0075FF;
   background-color: white;
   cursor: pointer;
 }
 sd-radio .sd-radio label input:checked {
-  border-color: #0075ff;
+  border-color: #0075FF;
   background-color: white;
 }
 sd-radio .sd-radio label input:checked::before {
@@ -39,18 +39,18 @@ sd-radio .sd-radio label input:checked::before {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: #0075ff;
+  background-color: #0075FF;
 }
 sd-radio .sd-radio label input:disabled {
-  border-color: #cccccc;
-  background-color: #eeeeee;
+  border-color: #CCCCCC;
+  background-color: #EEEEEE;
 }
 sd-radio .sd-radio label input:disabled:checked::before {
-  background-color: #cccccc;
+  background-color: #CCCCCC;
 }
 sd-radio .sd-radio label input:not(:disabled):hover {
-  border-color: #0075ff;
-  background-color: #d9eaff;
+  border-color: #0075FF;
+  background-color: #D9EAFF;
 }
 sd-radio .sd-radio--disabled {
   cursor: not-allowed !important;

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

@@ -13,7 +13,7 @@ sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: 1px solid #cccccc;
+  border: 1px solid #CCCCCC;
   background-color: white;
   color: #333333;
   font-weight: 400;
@@ -44,23 +44,23 @@ sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option::aft
   transition: font-weight 0.2s ease;
 }
 sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--selected):hover {
-  background-color: #0075ff;
+  background-color: #0075FF;
   color: white;
-  border-color: #0075ff;
+  border-color: #0075FF;
   z-index: 2;
 }
 sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--selected):hover::after {
   font-weight: 500;
 }
 sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--selected {
-  border-color: #0075ff;
-  color: #0075ff;
+  border-color: #0075FF;
+  color: #0075FF;
   background-color: white;
   z-index: 1;
 }
 sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--disabled {
-  background-color: #e1e1e1;
-  border-color: #cccccc;
+  background-color: #E1E1E1;
+  border-color: #CCCCCC;
   color: #888888;
   cursor: not-allowed;
 }

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

@@ -22,12 +22,12 @@ sd-radio .sd-radio label input {
   height: 16px;
   border: 1px solid #888888;
   border-radius: 50%;
-  accent-color: #0075ff;
+  accent-color: #0075FF;
   background-color: white;
   cursor: pointer;
 }
 sd-radio .sd-radio label input:checked {
-  border-color: #0075ff;
+  border-color: #0075FF;
   background-color: white;
 }
 sd-radio .sd-radio label input:checked::before {
@@ -39,18 +39,18 @@ sd-radio .sd-radio label input:checked::before {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: #0075ff;
+  background-color: #0075FF;
 }
 sd-radio .sd-radio label input:disabled {
-  border-color: #cccccc;
-  background-color: #eeeeee;
+  border-color: #CCCCCC;
+  background-color: #EEEEEE;
 }
 sd-radio .sd-radio label input:disabled:checked::before {
-  background-color: #cccccc;
+  background-color: #CCCCCC;
 }
 sd-radio .sd-radio label input:not(:disabled):hover {
-  border-color: #0075ff;
-  background-color: #d9eaff;
+  border-color: #0075FF;
+  background-color: #D9EAFF;
 }
 sd-radio .sd-radio--disabled {
   cursor: not-allowed !important;

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

@@ -5,7 +5,7 @@
 }
 .sd-select-dropdown::-webkit-scrollbar {
   opacity: 0;
-  background: #e5e5e5;
+  background: #E5E5E5;
 }
 .sd-select-dropdown::-webkit-scrollbar:horizontal {
   height: 8px;
@@ -15,7 +15,7 @@
 }
 .sd-select-dropdown::-webkit-scrollbar-thumb {
   height: 80px;
-  background-color: #cccccc;
+  background-color: #CCCCCC;
   border-radius: 4px;
 }
 .sd-select-dropdown::-webkit-scrollbar-track {

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: 'd52efe378d022f7bb7a50b078676ed48b6911e04', class: {
+        return (h("div", { key: 'ff55e2e133114accc2641a0025bdcf551eda3511', 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: '9c3db780e779ee0829ca41c2d85298e78f4e1da8', 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: 'bfcee14aa06a9a259dd8e67013ed1074c1f9c318', 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() {