@sellmate/design-system 1.0.15 → 1.0.16

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

@@ -30,11 +30,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '2a61062e200ac3ca2704756d7d1f6f16977c48f7' }, 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", onClick: () => (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: '2d624846b0c7cef09f303437989653c7320a832c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'f71d28238094e82c43d00e1ab4933b6945f5df4d', 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", onClick: () => (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: '748b76d151dce05cffdd97d9803a96f14554ad3b', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '36bd2a265c89589b13e67107d57e8045a87d6b40', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '9173ac0cadb39409fee25809542420423e4a327c', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '137ffab11643f153b52bd4a068b597fd98fd7698' })), h("div", { key: '283f18867bd48ca58ca9621f46637f78aea108b7', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '58c8799e22cd93294d44f9320a07b4d9b51df001', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'b8ef358d0e952024e361e93cc56f315fd7fa37e5', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '53abc6fde61026b2e42cdd9aa3914b86047ac1c8', 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: 'a39ea568a1cb13be87c350f646b0a519fc3f94d7', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'a00c0ffe7b173471e4ecdb9b98116f4993745bba', name: "close", size: "12", color: "gery_55" }))))))));
+            } }, h("i", { key: 'cd9b298e666ce898c83576c869e60e1e5e0bb38f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '79012e2c547a71e2084958925445ac26a8bbf7fe' })), h("div", { key: '0664419fe24318ced7cbca2da1b9e0741c48f333', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'a3f9238db85a7ca245cb5f794e1a9249742c3b42', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '56696f99a5400276c099a8ca69f904b4a932802c', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'cbdf8231857ccb20156d25758dbe2d1809e28656', 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: 'a2f249d05c6cd40d24005307d78aea95a841b0b8', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '13ba057c4acf7ae65cfe8d722fe8bdb69ce506ac', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

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

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

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

@@ -33,10 +33,10 @@ export class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: '22105314465e3bc788e018884a68b4fe9050535b', 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: '2434c60a8412993b3637e48d2c34c8c1010f6358', 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-select/sd-select-dropdown/sd-select-dropdown.js

@@ -144,10 +144,10 @@ export class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: '91c0ce599b9f479404c9353bc976949d2e71f161', 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: '6ede4c281647a0282caf04db174d5b522969e897', 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() {

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: '59df3cd1bfc1195025ae829999ff882f369f40f4', class: {
+        return (h("div", { key: 'a4fcca24b0bdde4f4665585c6cede84bd3b64d59', 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: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
+        return (h("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', 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: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', 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: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', 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-multiple/sd-select-multiple.js

@@ -144,7 +144,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: '34ce2172ced7175b985b636bd5a65c98ed7b2765', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'f1ecb7cab58c82ddba3fde97e2a139d966927891', class: {
+        return (h("sd-field", { key: 'a70e7fefb98428e616d2f124923dfa7ee7a7c2e2', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'fda63e4e8dcc72aa0147b2981b49b7e28e377ee8', 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: '9ba2c1d9963ae5b20d8823ed4e1054f4b1ea1164', class: {
+        return (h("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', 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: '6576ff206863a28062566b816cd81955f1890ec2', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'ad1367ec16aff35a09bc1ca62d4981a29ad0c20e', 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: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'a51e3950353966056edd756259d3224bd588c78b', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'ed003ff2d7616096a4759b253718e5fc5a09c007', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', 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-textarea/sd-textarea.js

@@ -75,10 +75,10 @@ export class SdTextarea {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (h("div", { key: 'a5c69ab99ae634450f45211158ecc7aaf4ae7ed5', class: {
+        return (h("div", { key: '888d11be57629e83e1215daddab63351a323672f', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '805bcdc30afbc6d91ae1ece93935ef3b95458c4d', class: "sd-textarea__content" }, h("textarea", { key: '9bacae67219729f46c8e05e2d3c5a8b3dda05447', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: '394681f2a6b62747b29fd2d4561ffca93fc482d7', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: '2740dc673980d558d460e0caa100365ec0c10587', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'f7100c74718da4aa705d3213dbcbaf200bb0d6d5', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '1f91a1e435b2dba1817ce181f91bdf3829142682', class: "sd-textarea__content" }, h("textarea", { key: 'd883f4cdfd56220cf4382893f94a469f7afd7ff2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: 'e9350d8e49eb87b2caddfc24079ece0d59c79739', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'cda9e2b8b0c15fbc7356597d4363d438688c8e4e', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: '491e990142e07837169e84a3fcc3e80c00bc7153', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

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

@@ -28,7 +28,7 @@ export class SdToggle {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'ca85bc0493aff9ff17108696ddb8af29734b00f5', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'b99a4fa0d557968e50b302332778faaf1b46f8cc', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'e62ca806b95463c7807f82ace61b4aa0affec962', class: "sd-toggle__label" }, this.label), h("div", { key: '6923da9a043df0d0d7fc0ecf2fe175857279e9b3', class: "sd-toggle__track" }, h("div", { key: '090dfbcf308f26b8e200d0e2cd69d44b0f5cb8bf', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: 'c0fcd12c231fdb995b5edae756157c58b352fd0f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'e50042ae04830f4c276d8140725ab62cc2d0490d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '99f9506a2dcea8cfd85aabf6b71243c116a2bf11', class: "sd-toggle__label" }, this.label), h("div", { key: '424e1ae78d5684051bd7a2b3ba89f6760f773f1c', class: "sd-toggle__track" }, h("div", { key: '29aab89e58022ce22f026fb694bb9b1e4531d8cf', class: "sd-toggle__thumb" }))));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

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

@@ -32,7 +32,7 @@ export class SdToggleButton {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '9eb4abcfe8f3894198c8d8643150daa507e6f0e9', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'e3d952af461da0fac978b8ce6bd55a6990907fb3', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '6f8d9e738490ef344ff26a4026b9de17af68041e', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '6d9d45c451301c4635e610fd70280be1fe65b316', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle-button"; }
     static get originalStyleUrls() {

package/dist/components/{p-Bgf0RnXW.js → p-B-8YfRUg.js}

@@ -51,7 +51,7 @@ const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptio
         }
     };
     render() {
-        return (h("div", { key: '9ba2c1d9963ae5b20d8823ed4e1054f4b1ea1164', class: {
+        return (h("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -60,10 +60,10 @@ const SdSelectOptionGroup = /*@__PURE__*/ proxyCustomElement(class SdSelectOptio
                 '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: '6576ff206863a28062566b816cd81955f1890ec2', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'ad1367ec16aff35a09bc1ca62d4981a29ad0c20e', 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: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'a51e3950353966056edd756259d3224bd588c78b', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'ed003ff2d7616096a4759b253718e5fc5a09c007', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss(); }
 }, [768, "sd-select-option-group", {
@@ -104,6 +104,6 @@ function defineCustomElement() {
 }
 
 export { SdSelectOptionGroup as S, defineCustomElement as d };
-//# sourceMappingURL=p-Bgf0RnXW.js.map
+//# sourceMappingURL=p-B-8YfRUg.js.map
 
-//# sourceMappingURL=p-Bgf0RnXW.js.map
+//# sourceMappingURL=p-B-8YfRUg.js.map

package/dist/components/{p-Bgf0RnXW.js.map → p-B-8YfRUg.js.map}

@@ -1 +1 @@
-{"file":"p-Bgf0RnXW.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option-group {\n display: block;\n height: fit-content;\n .sd-select__option-group {\n  display: flex;\n  padding: 4px 12px;\n  padding-left: 12px;\n  font-size: 12px;\n  line-height: 20px;\n  cursor: pointer;\n\n  &.sd-select__option-group--group,\n  &.sd-select__option-group--subgroup {\n   &:not(.sd-select__option-group--use-checkbox) {\n    cursor: default !important;\n   }\n  }\n\n  &.sd-select__option-group--group {\n   background-color: $brilliantblue_05 !important;\n   color: $grey_90 !important;\n   font-weight: 700;\n  }\n\n  &.sd-select__option-group--subgroup {\n   padding-left: 20px;\n   background-color: $grey_05 !important;\n   color: $grey_90 !important;\n   font-weight: 500;\n  }\n\n  &.sd-select__option-group--item {\n   padding-left: 28px;\n  }\n\n  sd-checkbox {\n   &__bg {\n    border-color: $grey_65;\n   }\n  }\n\n  &__label-wrapper {\n   display: flex;\n   width: 100%;\n   column-gap: 8px;\n   align-items: center;\n   overflow: hidden;\n   white-space: nowrap;\n   text-overflow: ellipsis;\n\n   sd-checkbox {\n    flex-shrink: 0;\n   }\n\n   .sd-select__option-group-label {\n    flex: 0 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n   }\n\n   .sd-select__option-group__count-indicator {\n    width: fit-content;\n    flex-shrink: 0;\n    font-size: 12px;\n    font-weight: 500;\n    color: $grey_65;\n   }\n  }\n\n  &--focused {\n   background-color: $brilliantblue_20;\n  }\n\n  &--selected,\n  &--focused {\n   &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\n    color: $brilliantblue_75;\n    font-weight: 700;\n   }\n  }\n\n  &--disabled {\n   color: $grey_55;\n   cursor: not-allowed;\n  }\n\n  &:hover {\n   &:not(.sd-select__option-group--disabled) {\n    background-color: $brilliantblue_75;\n    color: white;\n   }\n\n   &.sd-select__option-group--selected {\n    &:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) {\n     sd-checkbox {\n      .sd-checkbox__bg {\n       border-color: white !important;\n      }\n     }\n    }\n   }\n  }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\n\n@Component({\n tag: 'sd-select-option-group',\n styleUrl: 'sd-select-option-group.scss',\n})\nexport class SdSelectOptionGroup {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOptionGroup;\n @Prop() index!: number;\n @Prop() isSelected: boolean | null = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n @Prop() useIndicator?: boolean = true;\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\n  selectedCount: 0,\n  totalCount: 0,\n };\n\n @State() isHovered: boolean = false;\n\n @Method()\n async isDisabled(): Promise<boolean> {\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\n }\n\n @Event() optionClick!: EventEmitter<{\n  option: SelectOptionGroup;\n  isSelected: boolean | null;\n  index: number;\n  event: MouseEvent;\n }>;\n\n private handleClick = (\n  option: SelectOptionGroup,\n  isSelected: boolean | null,\n  event: MouseEvent,\n ) => {\n  event.stopPropagation();\n\n  if (option.type === 'group' || option.type === 'subgroup') {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n   return;\n  }\n\n  if (!this.option.disabled && !this.disabled) {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n  }\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select__option-group': true,\n     'sd-select__option-group--selected': !!this.isSelected,\n     'sd-select__option-group--disabled': !!this.option.disabled,\n     'sd-select__option-group--focused': this.isFocused,\n     'sd-select__option-group--use-checkbox': this.useCheckbox,\n     'sd-select__option-group--group': this.option.type === 'group',\n     'sd-select__option-group--subgroup': this.option.type === 'subgroup',\n     'sd-select__option-group--item': this.option.type === 'item',\n    }}\n    onMouseEnter={() => (this.isHovered = true)}\n    onMouseLeave={() => (this.isHovered = false)}\n    style={this.optionStyle}\n    data-index={this.index}\n    onClick={event => this.handleClick(this.option, this.isSelected, event)}\n   >\n    <div class=\"sd-select__option-group__label-wrapper\">\n     {this.useCheckbox && (\n      <sd-checkbox\n       value={this.isSelected}\n       disabled={this.option.disabled}\n       onClick={e => {\n        e.preventDefault();\n        this.handleClick(this.option, this.isSelected, e);\n       }}\n      ></sd-checkbox>\n     )}\n     <span class=\"sd-select__option-group-label\">{this.option.label}</span>\n     {this.useIndicator && this.option.type !== 'item' && (\n      <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\n     )}\n    </div>\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"p-B-8YfRUg.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,i5EAAi5E,CAAC;;MCO36E,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGvB,IAAA,MAAM;AACN,IAAA,KAAK;IACL,UAAU,GAAmB,KAAK;IAClC,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;IACzB,WAAW,GAAY,KAAK;IAC5B,YAAY,GAAa,IAAI;AAC7B,IAAA,SAAS,GAAmD;AACnE,QAAA,aAAa,EAAE,CAAC;AAChB,QAAA,UAAU,EAAE,CAAC;KACb;IAEQ,SAAS,GAAY,KAAK;AAGnC,IAAA,MAAM,UAAU,GAAA;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;;AAGxF,IAAA,WAAW;IAOZ,WAAW,GAAG,CACrB,MAAyB,EACzB,UAA0B,EAC1B,KAAiB,KACd;QACH,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;AAC1D,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,UAAU;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;YACF;;AAGD,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC5C,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACrB,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,UAAU;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK;AACL,aAAA,CAAC;;AAEJ,KAAC;IAED,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,yBAAyB,EAAE,IAAI;AAC/B,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACtD,gBAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAC3D,kCAAkC,EAAE,IAAI,CAAC,SAAS;gBAClD,uCAAuC,EAAE,IAAI,CAAC,WAAW;AACzD,gBAAA,gCAAgC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,OAAO;AAC9D,gBAAA,mCAAmC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU;AACpE,gBAAA,+BAA+B,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM;aAC5D,EACD,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAC3C,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EAC5C,KAAK,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EACX,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,EAAA,EAEvE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wCAAwC,EAAA,EACjD,IAAI,CAAC,WAAW,KAChB,oEACC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAC9B,OAAO,EAAE,CAAC,IAAG;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;AAClD,aAAC,GACa,CACf,EACD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAQ,EACrE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,KAChD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0CAA0C,EAAA,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,aAAa,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,CAAQ,CAClI,CACI,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.scss?tag=sd-select-option-group","src/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-option-group {\n display: block;\n height: fit-content;\n .sd-select__option-group {\n  display: flex;\n  padding: 4px 12px;\n  padding-left: 12px;\n  font-size: 12px;\n  line-height: 20px;\n  cursor: pointer;\n\n  &.sd-select__option-group--group,\n  &.sd-select__option-group--subgroup {\n   &:not(.sd-select__option-group--use-checkbox) {\n    cursor: default !important;\n   }\n  }\n\n  &.sd-select__option-group--group {\n   background-color: $brilliantblue_05 !important;\n   color: $grey_90 !important;\n   font-weight: 700;\n  }\n\n  &.sd-select__option-group--subgroup {\n   padding-left: 20px;\n   background-color: $grey_05 !important;\n   color: $grey_90 !important;\n   font-weight: 500;\n  }\n\n  &.sd-select__option-group--item {\n   padding-left: 28px;\n  }\n\n  sd-checkbox {\n   &__bg {\n    border-color: $grey_65;\n   }\n  }\n\n  &__label-wrapper {\n   display: flex;\n   width: 100%;\n   column-gap: 8px;\n   align-items: center;\n   overflow: hidden;\n   white-space: nowrap;\n   text-overflow: ellipsis;\n\n   sd-checkbox {\n    flex-shrink: 0;\n   }\n\n   .sd-select__option-group-label {\n    flex: 0 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n   }\n\n   .sd-select__option-group__count-indicator {\n    width: fit-content;\n    flex-shrink: 0;\n    font-size: 12px;\n    font-weight: 500;\n    color: $grey_65;\n   }\n  }\n\n  &--focused {\n   background-color: $brilliantblue_20;\n  }\n\n  &--selected,\n  &--focused {\n   &.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {\n    color: $brilliantblue_75;\n    font-weight: 700;\n   }\n  }\n\n  &--disabled {\n   color: $grey_55;\n   cursor: not-allowed;\n  }\n\n  &:hover {\n   &:not(.sd-select__option-group--disabled) {\n    background-color: $brilliantblue_75;\n    color: white;\n   }\n\n   &.sd-select__option-group--selected {\n    &:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) {\n     sd-checkbox {\n      .sd-checkbox__bg {\n       border-color: white !important;\n      }\n     }\n    }\n   }\n  }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { SelectOptionGroup } from '../../sd-select/sd-select';\n\n@Component({\n tag: 'sd-select-option-group',\n styleUrl: 'sd-select-option-group.scss',\n})\nexport class SdSelectOptionGroup {\n @Element() el!: HTMLElement;\n\n @Prop() option!: SelectOptionGroup;\n @Prop() index!: number;\n @Prop() isSelected: boolean | null = false;\n @Prop() isFocused: boolean = false;\n @Prop() optionStyle?: { [key: string]: string };\n @Prop() disabled: boolean = false;\n @Prop() useCheckbox: boolean = false;\n @Prop() useIndicator?: boolean = true;\n @Prop() countInfo?: { selectedCount: number; totalCount: number } = {\n  selectedCount: 0,\n  totalCount: 0,\n };\n\n @State() isHovered: boolean = false;\n\n @Method()\n async isDisabled(): Promise<boolean> {\n  return !!this.option.disabled || this.option.type === 'group' || this.option.type === 'subgroup';\n }\n\n @Event() optionClick!: EventEmitter<{\n  option: SelectOptionGroup;\n  isSelected: boolean | null;\n  index: number;\n  event: MouseEvent;\n }>;\n\n private handleClick = (\n  option: SelectOptionGroup,\n  isSelected: boolean | null,\n  event: MouseEvent,\n ) => {\n  event.stopPropagation();\n\n  if (option.type === 'group' || option.type === 'subgroup') {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n   return;\n  }\n\n  if (!this.option.disabled && !this.disabled) {\n   this.optionClick.emit({\n    option: this.option,\n    isSelected,\n    index: this.index,\n    event,\n   });\n  }\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select__option-group': true,\n     'sd-select__option-group--selected': !!this.isSelected,\n     'sd-select__option-group--disabled': !!this.option.disabled,\n     'sd-select__option-group--focused': this.isFocused,\n     'sd-select__option-group--use-checkbox': this.useCheckbox,\n     'sd-select__option-group--group': this.option.type === 'group',\n     'sd-select__option-group--subgroup': this.option.type === 'subgroup',\n     'sd-select__option-group--item': this.option.type === 'item',\n    }}\n    onMouseEnter={() => (this.isHovered = true)}\n    onMouseLeave={() => (this.isHovered = false)}\n    style={this.optionStyle}\n    data-index={this.index}\n    onClick={event => this.handleClick(this.option, this.isSelected, event)}\n   >\n    <div class=\"sd-select__option-group__label-wrapper\">\n     {this.useCheckbox && (\n      <sd-checkbox\n       value={this.isSelected}\n       disabled={this.option.disabled}\n       onClick={e => {\n        e.preventDefault();\n        this.handleClick(this.option, this.isSelected, e);\n       }}\n      ></sd-checkbox>\n     )}\n     <span class=\"sd-select__option-group-label\">{this.option.label}</span>\n     {this.useIndicator && this.option.type !== 'item' && (\n      <span class=\"sd-select__option-group__count-indicator\">{`(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`}</span>\n     )}\n    </div>\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-SUihbngJ.js → p-C2pN-_wD.js}

@@ -12,6 +12,7 @@ const FORM_PARENT_TAGS = [
     'sd-select-multiple-group',
     'sd-input',
     'sd-textarea',
+    'sd-number-input',
 ];
 const SdField = /*@__PURE__*/ proxyCustomElement(class SdField extends H {
     constructor(registerHost) {
@@ -126,15 +127,15 @@ const SdField = /*@__PURE__*/ proxyCustomElement(class SdField extends H {
         }
     }
     render() {
-        return (h("div", { key: 'd37aff590a1721b0dfe06698566721534b81b9cb', class: {
+        return (h("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: 'e10b6410261ed2589c7c6a691debcdb7fda696af', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '398930ec704a709af85a30b9fe5c03acaf014959', class: {
+            } }, h("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: 'b4fc8cf7d8fefc437e6201ad1926c1583a96bdf1' }))), this.errorMsg && h("div", { key: '0fde078aeaa157f0d9e4760324cd4b89b12d5656', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && h("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)
@@ -196,6 +197,6 @@ function defineCustomElement() {
 }
 
 export { SdField as S, defineCustomElement as d };
-//# sourceMappingURL=p-SUihbngJ.js.map
+//# sourceMappingURL=p-C2pN-_wD.js.map
 
-//# sourceMappingURL=p-SUihbngJ.js.map
+//# sourceMappingURL=p-C2pN-_wD.js.map

package/dist/components/p-C2pN-_wD.js.map

@@ -0,0 +1 @@
+{"file":"p-C2pN-_wD.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-field/sd-field.scss?tag=sd-field","src/components/sd-field/sd-field.tsx"],"sourcesContent":["@import 'variables';\n\nsd-field {\n display: inline-flex;\n flex-flow: column nowrap;\n height: fit-content;\n width: 100%;\n .sd-field {\n  *:focus,\n  *:focus-visible,\n  *:focus-within {\n   outline: none !important;\n  }\n\n  &:not(.sd-field--disabled) {\n   &:hover {\n    .sd-field__control {\n     border: 1px solid $brilliantblue_75 !important;\n     box-shadow: 0px 0px 4px 0px #0071ff66;\n    }\n   }\n  }\n\n  &.sd-field--disabled {\n   cursor: not-allowed;\n\n   .sd-field__wrapper {\n    cursor: not-allowed !important;\n    .sd-field__label-inside {\n     border-color: $grey_45;\n     color: $grey_65;\n     cursor: not-allowed !important;\n    }\n\n    .sd-field__control {\n     background-color: $grey_20;\n     border-color: $grey_45;\n     color: $grey_65;\n     cursor: not-allowed !important;\n    }\n   }\n  }\n\n  &--has-label {\n   .sd-field__wrapper {\n    .sd-field__label {\n     display: flex;\n     align-items: center;\n     margin-right: 12px;\n\n     &__required-icon {\n      margin-right: 4px;\n     }\n\n     &__text {\n      font-size: 12px;\n      line-height: 20px;\n      // font-weight: 500;\n      color: $grey_90;\n      white-space: nowrap;\n     }\n\n     &__tooltip {\n      margin-left: 2px;\n     }\n    }\n   }\n  }\n\n  &--has-label-inside {\n   .sd-field__wrapper {\n    .sd-field__label {\n     margin-right: 0;\n     display: flex;\n     align-items: center;\n     justify-content: center;\n     padding: 3px 12px;\n     border: 1px solid $grey_45;\n     border-right: none;\n     border-radius: 4px 0 0 4px;\n     border-color: $grey_55;\n     background-color: $grey_10;\n    }\n   }\n  }\n\n  &__wrapper {\n   width: 100%;\n   height: 28px;\n   display: flex;\n   align-items: center;\n   flex-flow: row nowrap;\n   position: relative;\n   color: $grey_90;\n   cursor: pointer;\n   -webkit-user-select: none;\n   user-select: none;\n\n   .sd-field__control {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex: 1;\n    border: 1px solid $grey_55;\n    border-radius: 4px;\n    background: white;\n\n    &--label-inside {\n     border-top-left-radius: 0px;\n     border-bottom-left-radius: 0px;\n    }\n   }\n  }\n\n  &--error:not(:hover) {\n   .sd-field__wrapper .sd-field__control {\n    border: 1px solid $red_70 !important;\n   }\n  }\n\n  &.sd-field--focus,\n  &.sd-field--hover {\n   .sd-field__wrapper .sd-field__control {\n    border: 1px solid $brilliantblue_75 !important;\n    box-shadow: 0px 0px 4px 0px #0071ff66;\n   }\n  }\n\n  .sd-field__error-message {\n   color: $red_70;\n   font-size: 12px;\n   line-height: 20px;\n   margin-top: 4px;\n  }\n }\n}\n","import { h, Component, Element, Prop, State, Method } from '@stencil/core';\nimport { ValidatableField } from '../sd-form/sd-form';\nimport { Rule } from '../../types/form';\nimport { SdTooltipProps } from '../sd-tooltip/sd-tooltip';\n\nconst FORM_PARENT_TAGS = [\n 'sd-select',\n 'sd-select-multiple',\n 'sd-select-multiple-group',\n 'sd-input',\n 'sd-textarea',\n 'sd-number-input',\n];\n\ninterface FormHostElement extends HTMLElement {\n value: any;\n error?: boolean;\n errorMsg?: string;\n}\n\n@Component({ tag: 'sd-field', styleUrl: 'sd-field.scss' })\nexport class SdField implements ValidatableField {\n @Element() el!: HTMLElement;\n\n @Prop() name: string = '';\n @Prop() rules?: Rule[] = [];\n\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ mutable: true }) disabled?: boolean = false;\n @Prop({ mutable: true }) hovered?: boolean = false;\n @Prop({ mutable: true }) focused?: boolean = false;\n @Prop() status?: 'default' | 'pass' | 'error';\n\n // props - label\n @Prop() label: string = '';\n @Prop() insideLabel: boolean = false;\n @Prop() useLabelRequired: boolean = false;\n @Prop() labelTooltip: string = '';\n @Prop() labelTooltipProps: SdTooltipProps | null = null;\n\n @State() errorMsg: string = '';\n\n private hostElement: FormHostElement | null = null;\n\n get value() {\n  return this.hostElement?.value ?? null;\n }\n\n get fieldStatus() {\n  let status = '';\n\n  if (!!this.disabled) {\n   status = 'disabled';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.focused) {\n   status = 'focus';\n   return `sd-field--${status}`;\n  }\n\n  if (!!this.hovered) status = 'hover';\n  if (!!this.status) status = this.status;\n  if (!!this.error) status = 'error';\n  return status ? `sd-field--${status}` : '';\n }\n\n componentDidLoad() {\n  this.hostElement = this.findHostElement();\n  this.registerToForm();\n }\n\n disconnectedCallback() {\n  this.unregisterFromForm();\n }\n\n private findHostElement(): FormHostElement | null {\n  for (const tag of FORM_PARENT_TAGS) {\n   const parent = this.el.closest<FormHostElement>(tag);\n   if (parent && 'value' in parent) {\n    return parent;\n   }\n  }\n  return null;\n }\n\n private registerToForm() {\n  // if (!this.rules || this.rules.length === 0) {\n  //  console.warn('[sd-form-field] rules prop is required for sd-form integration');\n  //  return;\n  // }\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  if (!formEl) return;\n\n  formEl.componentOnReady().then(form => {\n   form.sdRegisterField(this);\n  });\n }\n\n private unregisterFromForm() {\n  if (!this.name) return;\n\n  const formEl = this.el.closest<HTMLSdFormElement>('sd-form');\n  formEl?.componentOnReady().then(form => {\n   form.sdUnregisterField(this.name);\n  });\n }\n\n @Method()\n async sdValidate(): Promise<boolean> {\n  if (!this.rules || this.rules.length === 0) return true;\n\n  for (const rule of this.rules) {\n   const result = rule(this.value ?? '');\n   if (result !== true) {\n    this.setError(true, result);\n    return false;\n   }\n  }\n  this.setError(false, '');\n  return true;\n }\n\n @Method()\n async sdReset() {\n  if (this.hostElement) {\n   this.hostElement.value = null;\n  }\n  this.setError(false, '');\n }\n\n @Method()\n async sdResetValidation() {\n  this.setError(false, '');\n }\n\n @Method()\n async sdFocus() {\n  this.hostElement?.focus?.();\n  this.hostElement?.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n\n private setError(error: boolean, errorMsg: string) {\n  this.errorMsg = errorMsg;\n\n  if (this.hostElement) {\n   this.hostElement.error = error;\n  }\n }\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-field': true,\n     'sd-field--has-label': !!this.label,\n     'sd-field--has-label-inside': !!this.label && this.insideLabel,\n     [this.fieldStatus]: !!this.fieldStatus,\n    }}\n   >\n    <div class=\"sd-field__wrapper\">\n     {this.renderLabel(this.label)}\n     <div\n      class={{\n       'sd-field__control': true,\n       'sd-field__control--label-inside ': !!this.label && this.insideLabel,\n      }}\n     >\n      <slot></slot>\n     </div>\n    </div>\n    {this.errorMsg && <div class=\"sd-field__error-message\">{this.errorMsg}</div>}\n   </div>\n  );\n }\n\n private renderLabel(label?: string) {\n  if (!label) return null;\n\n  return (\n   <label class={{ 'sd-field__label': true, 'sd-field__label-inside': this.insideLabel }}>\n    {this.useLabelRequired && (\n     <sd-icon\n      name=\"star\"\n      size=\"10\"\n      color=\"brilliantblue_75\"\n      class=\"sd-field__label__required-icon\"\n     ></sd-icon>\n    )}\n    <div class=\"sd-field__label__text\">{label}</div>\n    {this.labelTooltip && (\n     <sd-tooltip class=\"sd-field__label__tooltip\" {...this.labelTooltipProps}>\n      <div slot=\"content\">{this.labelTooltip}</div>\n     </sd-tooltip>\n    )}\n   </label>\n  );\n }\n}\n"],"version":3}

package/dist/components/p-CCwNgVmC.js

@@ -0,0 +1,16 @@
+/* @ts-self-types="./index.d.ts" */
+let urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+let nanoid = (size = 21) => {
+  let id = '';
+  let i = size | 0;
+  while (i--) {
+    id += urlAlphabet[(Math.random() * 64) | 0];
+  }
+  return id
+};
+
+export { nanoid as n };
+//# sourceMappingURL=p-CCwNgVmC.js.map
+
+//# sourceMappingURL=p-CCwNgVmC.js.map

package/dist/components/p-CCwNgVmC.js.map

@@ -0,0 +1 @@
+{"file":"p-CCwNgVmC.js","mappings":"AAAA;AACA,IAAI,WAAW;AACf,EAAE;AAWQ,IAAC,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,KAAK;AACnC,EAAE,IAAI,EAAE,GAAG;AACX,EAAE,IAAI,CAAC,GAAG,IAAI,GAAG;AACjB,EAAE,OAAO,CAAC,EAAE,EAAE;AACd,IAAI,EAAE,IAAI,WAAW,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC;AAC9C;AACA,EAAE,OAAO;AACT;;;;","names":[],"sources":["node_modules/nanoid/non-secure/index.js"],"sourcesContent":["/* @ts-self-types=\"./index.d.ts\" */\nlet urlAlphabet =\n  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\nexport let customAlphabet = (alphabet, defaultSize = 21) => {\n  return (size = defaultSize) => {\n    let id = ''\n    let i = size | 0\n    while (i--) {\n      id += alphabet[(Math.random() * alphabet.length) | 0]\n    }\n    return id\n  }\n}\nexport let nanoid = (size = 21) => {\n  let id = ''\n  let i = size | 0\n  while (i--) {\n    id += urlAlphabet[(Math.random() * 64) | 0]\n  }\n  return id\n}\n"],"version":3}

package/dist/components/{p-CYr3YYfa.js → p-CFHNnfIq.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
 import { d as defineCustomElement$6 } from './p-lbT0o9hE.js';
-import { d as defineCustomElement$5 } from './p-SUihbngJ.js';
+import { d as defineCustomElement$5 } from './p-C2pN-_wD.js';
 import { d as defineCustomElement$4 } from './p-BdgLMKjb.js';
 import { d as defineCustomElement$3 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$2 } from './p-DQE5-tOR.js';
+import { d as defineCustomElement$2 } from './p-xfqZA_70.js';
 import { d as defineCustomElement$1 } from './p-CiNjpVRK.js';
 
 const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
@@ -33,17 +33,17 @@ const SdSelectSearchInput = /*@__PURE__*/ proxyCustomElement(class SdSelectSearc
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '199b6bdb1da143241f5e2cf797cc0f484b38aac0', class: {
+        return (h("div", { key: 'b19a029ef82d876c984c1f827d7a0f29bb823f5d', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: 'c768d0a2324f3ea40cff3eb049ddfad3cddcb882', 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: '8e27f40e1b507f0c5cb2d4bde48750cd0089a9da', 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: '21062cf3032b5488487b61a08753de01a5de7b98', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '2b38a07cbc0bb0d7dd020ece45f18bdff4c262e5', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
     static get style() { return sdSelectSearchInputCss(); }
 }, [768, "sd-select-search-input", {
@@ -97,6 +97,6 @@ function defineCustomElement() {
 }
 
 export { SdSelectSearchInput as S, defineCustomElement as d };
-//# sourceMappingURL=p-CYr3YYfa.js.map
+//# sourceMappingURL=p-CFHNnfIq.js.map
 
-//# sourceMappingURL=p-CYr3YYfa.js.map
+//# sourceMappingURL=p-CFHNnfIq.js.map

package/dist/components/{p-CYr3YYfa.js.map → p-CFHNnfIq.js.map}

@@ -1 +1 @@
-{"file":"p-CYr3YYfa.js","mappings":";;;;;;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,gbAAgb,CAAC;;MCM1c,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACvB,UAAU,GAAa,KAAK;IAC5B,UAAU,GAAkB,EAAE;AAEC,IAAA,WAAW;AACX,IAAA,WAAW;AAE1C,IAAA,SAAS;AAGjB,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;;AAE3C,QAAA,OAAO,IAAI;;AAIZ,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE;QAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;IAGtC,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,wBAAwB,EAAE,IAAI;AAC9B,gBAAA,kCAAkC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACrD,aAAA,EACD,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAC,cAAI,EAChB,SAAS,QACT,UAAU,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EACrC,SAAS,EAAA,IAAA,EACT,UAAU,EAAE,KAAK,IAAG;AACnB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC7C,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACxB,aAAC,EACD,SAAS,EAAE,KAAK,IAAG;AAClB,gBAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;oBAAE,KAAK,CAAC,eAAe,EAAE;AACpD,aAAC,EAAA,EAED,CACC,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,EACH,CAAA,CACD,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-search-input/sd-select-search-input.scss?tag=sd-select-search-input","src/components/sd-select/sd-select-search-input/sd-select-search-input.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-search-input {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n .sd-select-search-input {\n  position: sticky;\n  top: 0;\n  display: flex;\n  width: 100%;\n  background-color: white;\n  align-items: center;\n  padding: 4px 8px;\n\n  sd-input {\n   width: 100%;\n  }\n\n  &--scrolled {\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n  }\n }\n}\n","import { h, Component, Prop, Method, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sd-select-search-input',\n styleUrl: 'sd-select-search-input.scss',\n})\nexport class SdSelectSearchInput {\n @Prop() isScrolled?: boolean = false;\n @Prop() searchText: string | null = '';\n\n @Event({ eventName: 'sdSearchInput' }) searchInput!: EventEmitter<string>;\n @Event({ eventName: 'sdSearchFocus' }) searchFocus!: EventEmitter<void>;\n\n private searchRef?: HTMLSdInputElement;\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.sdGetNativeElement();\n  }\n  return null;\n }\n\n @Method()\n async sdSearchInputFocus() {\n  const input = await this.sdGetNativeElement();\n  input?.focus({ preventScroll: true });\n }\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select-search-input': true,\n     'sd-select-search-input--scrolled': !!this.isScrolled,\n    }}\n    onClick={event => event.stopPropagation()}\n   >\n    <sd-input\n     ref={el => (this.searchRef = el)}\n     value={this.searchText}\n     placeholder=\"검색\"\n     clearable\n     inputStyle={{ 'padding-left': '8px' }}\n     autofocus\n     onSdUpdate={event => {\n      this.searchInput.emit(String(event?.detail));\n     }}\n     onSdFocus={() => {\n      this.searchFocus.emit();\n     }}\n     onKeyDown={event => {\n      if (event.code === 'Enter') event.stopPropagation();\n     }}\n    >\n     <sd-icon\n      name=\"search\"\n      size={16}\n      color=\"#737373\"\n      style={{ marginRight: '4px' }}\n      slot=\"prefix\"\n     ></sd-icon>\n    </sd-input>\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"p-CFHNnfIq.js","mappings":";;;;;;;;AAAA,MAAM,sBAAsB,GAAG,MAAM,CAAC,gbAAgb,CAAC;;MCM1c,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;IACvB,UAAU,GAAa,KAAK;IAC5B,UAAU,GAAkB,EAAE;AAEC,IAAA,WAAW;AACX,IAAA,WAAW;AAE1C,IAAA,SAAS;AAGjB,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACnB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;;AAE3C,QAAA,OAAO,IAAI;;AAIZ,IAAA,MAAM,kBAAkB,GAAA;AACvB,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE;QAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;;IAGtC,MAAM,GAAA;QACL,QACC,CACC,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACN,gBAAA,wBAAwB,EAAE,IAAI;AAC9B,gBAAA,kCAAkC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;AACrD,aAAA,EACD,OAAO,EAAE,KAAK,IAAI,KAAK,CAAC,eAAe,EAAE,EAAA,EAEzC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,WAAW,EAAC,cAAI,EAChB,SAAS,QACT,UAAU,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EACrC,SAAS,EAAA,IAAA,EACT,UAAU,EAAE,KAAK,IAAG;AACnB,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC7C,aAAC,EACD,SAAS,EAAE,MAAK;AACf,gBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACxB,aAAC,EACD,SAAS,EAAE,KAAK,IAAG;AAClB,gBAAA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;oBAAE,KAAK,CAAC,eAAe,EAAE;AACpD,aAAC,EAAA,EAED,CACC,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,EAC7B,IAAI,EAAC,QAAQ,EACH,CAAA,CACD,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-search-input/sd-select-search-input.scss?tag=sd-select-search-input","src/components/sd-select/sd-select-search-input/sd-select-search-input.tsx"],"sourcesContent":["@import 'variables';\n\nsd-select-search-input {\n position: sticky;\n top: 0;\n display: flex;\n width: 100%;\n background-color: white;\n align-items: center;\n .sd-select-search-input {\n  position: sticky;\n  top: 0;\n  display: flex;\n  width: 100%;\n  background-color: white;\n  align-items: center;\n  padding: 4px 8px;\n\n  sd-input {\n   width: 100%;\n  }\n\n  &--scrolled {\n   box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\n  }\n }\n}\n","import { h, Component, Prop, Method, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sd-select-search-input',\n styleUrl: 'sd-select-search-input.scss',\n})\nexport class SdSelectSearchInput {\n @Prop() isScrolled?: boolean = false;\n @Prop() searchText: string | null = '';\n\n @Event({ eventName: 'sdSearchInput' }) searchInput!: EventEmitter<string>;\n @Event({ eventName: 'sdSearchFocus' }) searchFocus!: EventEmitter<void>;\n\n private searchRef?: HTMLSdInputElement;\n\n @Method()\n async sdGetNativeElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.sdGetNativeElement();\n  }\n  return null;\n }\n\n @Method()\n async sdSearchInputFocus() {\n  const input = await this.sdGetNativeElement();\n  input?.focus({ preventScroll: true });\n }\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select-search-input': true,\n     'sd-select-search-input--scrolled': !!this.isScrolled,\n    }}\n    onClick={event => event.stopPropagation()}\n   >\n    <sd-input\n     ref={el => (this.searchRef = el)}\n     value={this.searchText}\n     placeholder=\"검색\"\n     clearable\n     inputStyle={{ 'padding-left': '8px' }}\n     autofocus\n     onSdUpdate={event => {\n      this.searchInput.emit(String(event?.detail));\n     }}\n     onSdFocus={() => {\n      this.searchFocus.emit();\n     }}\n     onKeyDown={event => {\n      if (event.code === 'Enter') event.stopPropagation();\n     }}\n    >\n     <sd-icon\n      name=\"search\"\n      size={16}\n      color=\"#737373\"\n      style={{ marginRight: '4px' }}\n      slot=\"prefix\"\n     ></sd-icon>\n    </sd-input>\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-CXyVUgP3.js → p-CkzAorp3.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, t as transformTag } from './p-CR2Jbl0B.js';
 import { d as defineCustomElement$9 } from './p-lbT0o9hE.js';
 import { d as defineCustomElement$8 } from './p-Cd145I-2.js';
-import { d as defineCustomElement$7 } from './p-SUihbngJ.js';
+import { d as defineCustomElement$7 } from './p-C2pN-_wD.js';
 import { d as defineCustomElement$6 } from './p-BdgLMKjb.js';
 import { d as defineCustomElement$5 } from './p-zvhzq4Sw.js';
-import { d as defineCustomElement$4 } from './p-DQE5-tOR.js';
-import { d as defineCustomElement$3 } from './p-CYYaSMIB.js';
-import { d as defineCustomElement$2 } from './p-CYr3YYfa.js';
+import { d as defineCustomElement$4 } from './p-xfqZA_70.js';
+import { d as defineCustomElement$3 } from './p-Dv4dN3Y5.js';
+import { d as defineCustomElement$2 } from './p-CFHNnfIq.js';
 import { d as defineCustomElement$1 } from './p-CiNjpVRK.js';
 
 const sdSelectDropdownCss = () => `.sd-select-dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-dropdown .sd-select-option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}.sd-select-dropdown{width:var(--select-dropdown-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;display:flex;flex-direction:column;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-dropdown--ready{opacity:1}`;
@@ -165,10 +165,10 @@ const SdSelectDropdown = /*@__PURE__*/ proxyCustomElement(class SdSelectDropdown
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: '91c0ce599b9f479404c9353bc976949d2e71f161', 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: '6ede4c281647a0282caf04db174d5b522969e897', 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 watchers() { return {
         "filteredOptions": ["filteredOptionsChanged"],
@@ -255,6 +255,6 @@ function defineCustomElement() {
 }
 
 export { SdSelectDropdown as S, defineCustomElement as d };
-//# sourceMappingURL=p-CXyVUgP3.js.map
+//# sourceMappingURL=p-CkzAorp3.js.map
 
-//# sourceMappingURL=p-CXyVUgP3.js.map
+//# sourceMappingURL=p-CkzAorp3.js.map

package/dist/components/{p-CXyVUgP3.js.map → p-CkzAorp3.js.map}

@@ -1 +1 @@
-{"file":"p-CXyVUgP3.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-dropdown/sd-select-dropdown.scss?tag=sd-select-dropdown","src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select-dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n opacity: 0.5;\n transition: opacity 0.15s ease-in;\n\n &--ready {\n  opacity: 1;\n }\n\n .sd-select-option-placeholder {\n  @extend %selectOptionPlaceholder;\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { SelectOption } from '../sd-select';\n\ntype SelectValue = SelectOption[] | string | number | null;\n\n@Component({\n tag: 'sd-select-dropdown',\n styleUrl: 'sd-select-dropdown.scss',\n})\nexport class SdSelectDropdown {\n @Prop({ mutable: true }) itemIndex!: number;\n @Prop() value: SelectValue = null;\n @Prop() options!: SelectOption[];\n @Prop() width!: string;\n @Prop() dropdownHeight!: string;\n @Prop() searchable!: boolean;\n @Prop() optionPlaceholder!: string;\n @Prop() useCheckbox: boolean = false;\n @Prop() useAll?: boolean = false;\n\n @State() filteredOptions = this.options;\n @State() searchText: string | null = null;\n @State() isScrolled: boolean = false;\n @State() isDropdownReady: boolean = false;\n\n @Event({ eventName: 'sdOptionClick' }) optionClick!: EventEmitter<{\n  option: SelectOption;\n  index: number;\n  event: MouseEvent;\n }>;\n @Event({ eventName: 'sdOptionFiltered' }) optionFiltered!: EventEmitter<SelectOption[]>;\n @Event({ eventName: 'sdScroll' }) scroll!: EventEmitter<Event>;\n\n @Watch('filteredOptions')\n filteredOptionsChanged(newValue: SelectOption[]) {\n  this.optionFiltered.emit(newValue);\n }\n\n @Watch('searchText')\n searchTextChanged() {\n  this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n  if (this.searchable) {\n   const searchInput = await this.getNativeInputElement();\n   if (this.itemIndex === -1) {\n    searchInput?.focus({ preventScroll: true });\n    return;\n   } else if (searchInput?.matches(':focus')) {\n    searchInput?.blur();\n   }\n  }\n\n  const optionElements =\n   this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];\n  const currentItem = optionElements?.[this.itemIndex];\n\n  if (!currentItem) return;\n\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\n  const isOptionDisabled = await this.optionRef.sdIsDisabled();\n\n  if (isOptionDisabled) {\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n   return;\n  }\n\n  this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n  this.filteredOptions = this.options;\n\n  // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)\n  requestAnimationFrame(() => {\n   requestAnimationFrame(async () => {\n    const selectedOptions = this.getSelectedOption();\n\n    // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤\n    if (selectedOptions) {\n     const selectedIndex = Array.isArray(selectedOptions)\n      ? this.options.indexOf(selectedOptions[0])\n      : this.options.indexOf(selectedOptions);\n     const optionElements = Array.from(\n      this.dropdownRef?.querySelectorAll('sd-select-option') || [],\n     );\n\n     // useAll 사용시 \"전체\" 옵션 포함한 인덱스 사용\n     const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;\n\n     // 선택된 옵션이 화면 가운데에 오도록 index 조정\n     const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);\n     const currentItem = optionElements?.[targetIndex];\n\n     if (currentItem) {\n      this.scrollToOption(currentItem as HTMLElement, 'instant');\n     }\n    }\n\n    this.isDropdownReady = true;\n\n    if (this.searchable) {\n     const searchInput = await this.getNativeInputElement();\n\n     if (searchInput) {\n      requestAnimationFrame(() => {\n       searchInput.focus({ preventScroll: true });\n      });\n     }\n    }\n   });\n  });\n }\n\n private dropdownRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n\n private get dropdownSize() {\n  return {\n   '--select-dropdown-width': this.width || '200px',\n   '--select-dropdown-height': this.dropdownHeight || '260px',\n  };\n }\n\n private filterOptions() {\n  if (!this.searchText || this.searchText.trim() === '') {\n   // 검색어가 없으면 전체 옵션 표시\n   this.filteredOptions = this.options;\n  } else {\n   // 검색어가 있으면 필터링\n   this.filteredOptions = this.options.filter(option =>\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n   );\n  }\n }\n\n private getSelectedOption(): SelectOption | SelectOption[] | undefined {\n  if (typeof this.value !== 'object') {\n   return this.options.find(option => option.value === this.value);\n  }\n\n  return this.options.filter(option => (this.value as SelectOption[])?.includes(option));\n }\n\n private isOptionSelected(value: SelectValue) {\n  if (Array.isArray(this.value)) {\n   return this.value.some(selected => selected.value === value);\n  }\n  return value === this.value;\n }\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.sdGetNativeElement();\n  }\n  return null;\n }\n\n private scrollToOption(optionElement: HTMLElement, scrollBehavior: ScrollBehavior = 'smooth') {\n  if (!this.dropdownRef || !optionElement) return;\n\n  const dropdown = this.dropdownRef;\n  const optionTop = optionElement.offsetTop;\n  const optionHeight = optionElement.offsetHeight;\n  const dropdownScrollTop = dropdown.scrollTop;\n  const dropdownHeight = dropdown.clientHeight;\n\n  const searchContainer = dropdown.querySelector('.sd-select-search-input');\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n  const visibleTop = dropdownScrollTop + searchOffset;\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n  if (optionTop < visibleTop) {\n   dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });\n  } else if (optionTop + optionHeight > visibleBottom) {\n   dropdown.scrollTo({\n    top: optionTop + optionHeight - dropdownHeight + searchOffset,\n    behavior: scrollBehavior,\n   });\n  }\n }\n\n private handleDropdownScroll = (event: Event) => {\n  const target = event.target as HTMLElement;\n  const scrollTop = target.scrollTop;\n\n  // 스크롤이 조금이라도 되면 그림자 표시\n  this.isScrolled = scrollTop > 0;\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select-dropdown': true,\n     'sd-select-dropdown--ready': this.isDropdownReady,\n    }}\n    style={this.dropdownSize}\n    onScroll={this.handleDropdownScroll}\n    ref={el => (this.dropdownRef = el)}\n   >\n    {this.searchable && (\n     <sd-select-search-input\n      ref={el => (this.searchRef = el)}\n      isScrolled={this.isScrolled}\n      searchText={this.searchText}\n      onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail || '')}\n      onSdSearchFocus={() => (this.itemIndex = -1)}\n     ></sd-select-search-input>\n    )}\n    {this.filteredOptions.length > 0 ? (\n     this.filteredOptions.map((option, index) => (\n      <slot name={`option-${option.value}`}>\n       <sd-select-option\n        option={option}\n        index={index}\n        isSelected={this.isOptionSelected(option.value)}\n        isFocused={index === this.itemIndex}\n        onOptionClick={({ detail }) => this.optionClick.emit(detail)}\n        useCheckbox={this.useCheckbox}\n       ></sd-select-option>\n      </slot>\n     ))\n    ) : (\n     <slot name=\"option-placeholder\">\n      <div class={'sd-select-option-placeholder'}>{this.optionPlaceholder}</div>\n     </slot>\n    )}\n   </div>\n  );\n }\n}\n"],"version":3}
+{"file":"p-CkzAorp3.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-select/sd-select-dropdown/sd-select-dropdown.scss?tag=sd-select-dropdown","src/components/sd-select/sd-select-dropdown/sd-select-dropdown.tsx"],"sourcesContent":["@import 'variables';\n@import 'extend';\n\n.sd-select-dropdown {\n @extend %scrollBar;\n width: var(--select-dropdown-width, 200px);\n max-height: var(--select-dropdown-height, 260px);\n padding-bottom: 2px;\n background-color: white;\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n overflow-y: auto;\n color: $grey_90;\n display: flex;\n flex-direction: column;\n opacity: 0.5;\n transition: opacity 0.15s ease-in;\n\n &--ready {\n  opacity: 1;\n }\n\n .sd-select-option-placeholder {\n  @extend %selectOptionPlaceholder;\n }\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { SelectOption } from '../sd-select';\n\ntype SelectValue = SelectOption[] | string | number | null;\n\n@Component({\n tag: 'sd-select-dropdown',\n styleUrl: 'sd-select-dropdown.scss',\n})\nexport class SdSelectDropdown {\n @Prop({ mutable: true }) itemIndex!: number;\n @Prop() value: SelectValue = null;\n @Prop() options!: SelectOption[];\n @Prop() width!: string;\n @Prop() dropdownHeight!: string;\n @Prop() searchable!: boolean;\n @Prop() optionPlaceholder!: string;\n @Prop() useCheckbox: boolean = false;\n @Prop() useAll?: boolean = false;\n\n @State() filteredOptions = this.options;\n @State() searchText: string | null = null;\n @State() isScrolled: boolean = false;\n @State() isDropdownReady: boolean = false;\n\n @Event({ eventName: 'sdOptionClick' }) optionClick!: EventEmitter<{\n  option: SelectOption;\n  index: number;\n  event: MouseEvent;\n }>;\n @Event({ eventName: 'sdOptionFiltered' }) optionFiltered!: EventEmitter<SelectOption[]>;\n @Event({ eventName: 'sdScroll' }) scroll!: EventEmitter<Event>;\n\n @Watch('filteredOptions')\n filteredOptionsChanged(newValue: SelectOption[]) {\n  this.optionFiltered.emit(newValue);\n }\n\n @Watch('searchText')\n searchTextChanged() {\n  this.filterOptions();\n }\n\n @Watch('itemIndex')\n async itemIndexChanged(newIndex: number, oldIndex: number) {\n  if (this.searchable) {\n   const searchInput = await this.getNativeInputElement();\n   if (this.itemIndex === -1) {\n    searchInput?.focus({ preventScroll: true });\n    return;\n   } else if (searchInput?.matches(':focus')) {\n    searchInput?.blur();\n   }\n  }\n\n  const optionElements =\n   this.dropdownRef?.querySelectorAll('.sd-select-dropdown sd-select-option') || [];\n  const currentItem = optionElements?.[this.itemIndex];\n\n  if (!currentItem) return;\n\n  this.optionRef = currentItem as HTMLSdSelectOptionElement;\n  const isOptionDisabled = await this.optionRef.sdIsDisabled();\n\n  if (isOptionDisabled) {\n   newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\n   return;\n  }\n\n  this.scrollToOption(currentItem as HTMLElement);\n }\n\n componentWillLoad() {\n  this.filteredOptions = this.options;\n\n  // DOM 렌더링을 기다리기 위해 이중 requestAnimationFrame 사용 - (레이아웃/스타일 계산 - 페인트 이후)\n  requestAnimationFrame(() => {\n   requestAnimationFrame(async () => {\n    const selectedOptions = this.getSelectedOption();\n\n    // 선택된 옵션이 있으면 첫 번째 선택된 항목으로 스크롤\n    if (selectedOptions) {\n     const selectedIndex = Array.isArray(selectedOptions)\n      ? this.options.indexOf(selectedOptions[0])\n      : this.options.indexOf(selectedOptions);\n     const optionElements = Array.from(\n      this.dropdownRef?.querySelectorAll('sd-select-option') || [],\n     );\n\n     // useAll 사용시 \"전체\" 옵션 포함한 인덱스 사용\n     const actualIndex = this.useAll ? selectedIndex + 1 : selectedIndex;\n\n     // 선택된 옵션이 화면 가운데에 오도록 index 조정\n     const targetIndex = Math.min(actualIndex + 4, optionElements.length - 1);\n     const currentItem = optionElements?.[targetIndex];\n\n     if (currentItem) {\n      this.scrollToOption(currentItem as HTMLElement, 'instant');\n     }\n    }\n\n    this.isDropdownReady = true;\n\n    if (this.searchable) {\n     const searchInput = await this.getNativeInputElement();\n\n     if (searchInput) {\n      requestAnimationFrame(() => {\n       searchInput.focus({ preventScroll: true });\n      });\n     }\n    }\n   });\n  });\n }\n\n private dropdownRef?: HTMLElement;\n private searchRef?: HTMLSdSelectSearchInputElement;\n private optionRef?: HTMLSdSelectOptionElement;\n\n private get dropdownSize() {\n  return {\n   '--select-dropdown-width': this.width || '200px',\n   '--select-dropdown-height': this.dropdownHeight || '260px',\n  };\n }\n\n private filterOptions() {\n  if (!this.searchText || this.searchText.trim() === '') {\n   // 검색어가 없으면 전체 옵션 표시\n   this.filteredOptions = this.options;\n  } else {\n   // 검색어가 있으면 필터링\n   this.filteredOptions = this.options.filter(option =>\n    option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\n   );\n  }\n }\n\n private getSelectedOption(): SelectOption | SelectOption[] | undefined {\n  if (typeof this.value !== 'object') {\n   return this.options.find(option => option.value === this.value);\n  }\n\n  return this.options.filter(option => (this.value as SelectOption[])?.includes(option));\n }\n\n private isOptionSelected(value: SelectValue) {\n  if (Array.isArray(this.value)) {\n   return this.value.some(selected => selected.value === value);\n  }\n  return value === this.value;\n }\n\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\n  if (this.searchRef) {\n   return this.searchRef.sdGetNativeElement();\n  }\n  return null;\n }\n\n private scrollToOption(optionElement: HTMLElement, scrollBehavior: ScrollBehavior = 'smooth') {\n  if (!this.dropdownRef || !optionElement) return;\n\n  const dropdown = this.dropdownRef;\n  const optionTop = optionElement.offsetTop;\n  const optionHeight = optionElement.offsetHeight;\n  const dropdownScrollTop = dropdown.scrollTop;\n  const dropdownHeight = dropdown.clientHeight;\n\n  const searchContainer = dropdown.querySelector('.sd-select-search-input');\n  const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\n\n  const visibleTop = dropdownScrollTop + searchOffset;\n  const visibleBottom = dropdownScrollTop + dropdownHeight;\n\n  if (optionTop < visibleTop) {\n   dropdown.scrollTo({ top: optionTop - searchOffset, behavior: scrollBehavior });\n  } else if (optionTop + optionHeight > visibleBottom) {\n   dropdown.scrollTo({\n    top: optionTop + optionHeight - dropdownHeight + searchOffset,\n    behavior: scrollBehavior,\n   });\n  }\n }\n\n private handleDropdownScroll = (event: Event) => {\n  const target = event.target as HTMLElement;\n  const scrollTop = target.scrollTop;\n\n  // 스크롤이 조금이라도 되면 그림자 표시\n  this.isScrolled = scrollTop > 0;\n };\n\n render() {\n  return (\n   <div\n    class={{\n     'sd-select-dropdown': true,\n     'sd-select-dropdown--ready': this.isDropdownReady,\n    }}\n    style={this.dropdownSize}\n    onScroll={this.handleDropdownScroll}\n    ref={el => (this.dropdownRef = el)}\n   >\n    {this.searchable && (\n     <sd-select-search-input\n      ref={el => (this.searchRef = el)}\n      isScrolled={this.isScrolled}\n      searchText={this.searchText}\n      onSdSearchInput={(event: CustomEvent<string>) => (this.searchText = event.detail || '')}\n      onSdSearchFocus={() => (this.itemIndex = -1)}\n     ></sd-select-search-input>\n    )}\n    {this.filteredOptions.length > 0 ? (\n     this.filteredOptions.map((option, index) => (\n      <slot name={`option-${option.value}`}>\n       <sd-select-option\n        option={option}\n        index={index}\n        isSelected={this.isOptionSelected(option.value)}\n        isFocused={index === this.itemIndex}\n        onOptionClick={({ detail }) => this.optionClick.emit(detail)}\n        useCheckbox={this.useCheckbox}\n       ></sd-select-option>\n      </slot>\n     ))\n    ) : (\n     <slot name=\"option-placeholder\">\n      <div class={'sd-select-option-placeholder'}>{this.optionPlaceholder}</div>\n     </slot>\n    )}\n   </div>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-CbEUJ3R6.js → p-D16-dM6f.js}

@@ -121,7 +121,7 @@ const SdPortal = /*@__PURE__*/ proxyCustomElement(class SdPortal extends H {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '5469d915f8a11d490a1839167b3ae771624d257b' });
+        return h("slot", { key: 'ba2bf5df16f9bef0acef1ac8a08b090a23d02bc7' });
     }
 }, [772, "sd-portal", {
         "to": [1],
@@ -145,6 +145,6 @@ function defineCustomElement() {
 }
 
 export { SdPortal as S, defineCustomElement as d };
-//# sourceMappingURL=p-CbEUJ3R6.js.map
+//# sourceMappingURL=p-D16-dM6f.js.map
 
-//# sourceMappingURL=p-CbEUJ3R6.js.map
+//# sourceMappingURL=p-D16-dM6f.js.map

package/dist/components/{p-CbEUJ3R6.js.map → p-D16-dM6f.js.map}

@@ -1 +1 @@
-{"file":"p-CbEUJ3R6.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-portal/sd-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-portal',\n shadow: false,\n})\nexport class SdPortal {\n @Element() hostEl!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 4];\n @Prop() zIndex: number = 9999;\n @Prop() open: boolean = false;\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n componentDidLoad() {\n  this.container = this.resolveContainer();\n  this.createWrapper();\n  this.moveSlotContent();\n  this.updatePosition();\n  this.observeParent();\n }\n\n componentDidRender() {\n  if (!this.wrapper) return;\n  this.wrapper.style.display = this.open ? 'block' : 'none';\n  if (this.open) this.updatePosition();\n }\n\n disconnectedCallback() {\n  this.unobserveParent();\n  this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n  return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n  this.wrapper = document.createElement('div');\n  Object.assign(this.wrapper.style, {\n   position: 'absolute',\n   zIndex: this.zIndex.toString(),\n   transition: 'opacity 0.4s',\n  });\n  this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n  if (!this.wrapper) return;\n  const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n  nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n  if (this.rafId) cancelAnimationFrame(this.rafId);\n  this.rafId = requestAnimationFrame(() => {\n   if (!this.parentRef || !this.wrapper) return;\n\n   const parentRect = this.parentRef.getBoundingClientRect();\n   const wrapperRect = this.wrapper.getBoundingClientRect();\n   const viewport = {\n    width: window.innerWidth,\n    height: window.innerHeight,\n   };\n\n   let top = parentRect.bottom + window.scrollY + this.offset[1];\n   let left = parentRect.left + window.scrollX + this.offset[0];\n\n   // 화면 상하단 넘어갈 시 반전\n   if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\n    top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\n   }\n   if (top < window.scrollY) {\n    top = parentRect.bottom + window.scrollY + this.offset[1];\n   }\n\n   // 화면 좌우측 넘어갈 시 반전\n   if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\n    left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\n   }\n   if (left < 0) {\n    left = this.offset[0];\n   }\n\n   this.wrapper.style.top = `${top}px`;\n   this.wrapper.style.left = `${left}px`;\n  });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n  if (!this.parentRef) return;\n\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n  this.resizeObserver.observe(this.parentRef);\n\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\n  this.mutationObserver.observe(document.body, {\n   childList: true,\n   subtree: true,\n  });\n }\n\n private unobserveParent() {\n  this.resizeObserver?.disconnect();\n  this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n  this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n  if (this.isInsideClick) {\n   this.isInsideClick = false;\n   return;\n  }\n  if (this.wrapper?.contains(e.target as Node)) return;\n  this.close.emit();\n }\n\n render() {\n  return <slot></slot>;\n }\n}\n"],"version":3}
+{"file":"p-D16-dM6f.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-portal/sd-portal.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-portal',\n shadow: false,\n})\nexport class SdPortal {\n @Element() hostEl!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 4];\n @Prop() zIndex: number = 9999;\n @Prop() open: boolean = false;\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n componentDidLoad() {\n  this.container = this.resolveContainer();\n  this.createWrapper();\n  this.moveSlotContent();\n  this.updatePosition();\n  this.observeParent();\n }\n\n componentDidRender() {\n  if (!this.wrapper) return;\n  this.wrapper.style.display = this.open ? 'block' : 'none';\n  if (this.open) this.updatePosition();\n }\n\n disconnectedCallback() {\n  this.unobserveParent();\n  this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n  return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n  this.wrapper = document.createElement('div');\n  Object.assign(this.wrapper.style, {\n   position: 'absolute',\n   zIndex: this.zIndex.toString(),\n   transition: 'opacity 0.4s',\n  });\n  this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n  if (!this.wrapper) return;\n  const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n  nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n  if (this.rafId) cancelAnimationFrame(this.rafId);\n  this.rafId = requestAnimationFrame(() => {\n   if (!this.parentRef || !this.wrapper) return;\n\n   const parentRect = this.parentRef.getBoundingClientRect();\n   const wrapperRect = this.wrapper.getBoundingClientRect();\n   const viewport = {\n    width: window.innerWidth,\n    height: window.innerHeight,\n   };\n\n   let top = parentRect.bottom + window.scrollY + this.offset[1];\n   let left = parentRect.left + window.scrollX + this.offset[0];\n\n   // 화면 상하단 넘어갈 시 반전\n   if (parentRect.bottom + wrapperRect.height + this.offset[1] > viewport.height) {\n    top = parentRect.top + window.scrollY - wrapperRect.height - this.offset[1];\n   }\n   if (top < window.scrollY) {\n    top = parentRect.bottom + window.scrollY + this.offset[1];\n   }\n\n   // 화면 좌우측 넘어갈 시 반전\n   if (parentRect.left + wrapperRect.width + this.offset[0] > viewport.width) {\n    left = parentRect.right + window.scrollX - wrapperRect.width - this.offset[0];\n   }\n   if (left < 0) {\n    left = this.offset[0];\n   }\n\n   this.wrapper.style.top = `${top}px`;\n   this.wrapper.style.left = `${left}px`;\n  });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n  if (!this.parentRef) return;\n\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n  this.resizeObserver.observe(this.parentRef);\n\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\n  this.mutationObserver.observe(document.body, {\n   childList: true,\n   subtree: true,\n  });\n }\n\n private unobserveParent() {\n  this.resizeObserver?.disconnect();\n  this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n  this.isInsideClick = !!(this.wrapper && this.wrapper.contains(e.target as Node));\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n  if (this.isInsideClick) {\n   this.isInsideClick = false;\n   return;\n  }\n  if (this.wrapper?.contains(e.target as Node)) return;\n  this.close.emit();\n }\n\n render() {\n  return <slot></slot>;\n }\n}\n"],"version":3}