@sellmate/design-system 0.0.53 → 0.0.54

package/dist/cjs/sd-popover.cjs.entry.js

@@ -38,11 +38,11 @@ const SdPopover = class {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: 'fa06f3ff6641006a75c3ed0912f8f2dc6ca2da56' }, this.label ? (index.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) })) : (index.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 && (index.h("sd-tooltip-portal", { key: 'f433e3bc5e325bf9d70fae10b6777fe77e52061f', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: '7fa463878475d3c2ce86d006912c35b585d7bed0', class: {
+        return (index.h(index.Fragment, { key: '1300f5f84d96ef65840d8daec85dc53dba2c407c' }, this.label ? (index.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) })) : (index.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 && (index.h("sd-tooltip-portal", { key: '73b7feb032125495c7df8bbcecee042b59c91886', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, index.h("div", { key: 'b6209c9654fe11e148206ef49c8a304b1f72f068', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, index.h("i", { key: '90a23aea2730ec9dbc2b9ca77ef0a4ef13777006', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '9246c25e04ea2dd6716e20ac01060ff7acc23fa9' })), index.h("div", { key: 'dd6f350fbb5f5a49302593b3c24faf6bf59bb9ec', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: 'c9aae4e0eaa0e1ab4f1447907f2dbe0e6e988bbf', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '2ed497a7d543f4638756524b4062c9df57b20aa0', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '5ddf4ec18128bc58c77a3017fc1a621591adb67b', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: 'e7bbb527601bda49a4d4e5c28a555acb5714bd5b', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '0e0ec3542195f3eb6955ef68ab82d947460271d3', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, index.h("i", { key: 'c788234f854fe0704ffffdc89dd297277916e7f1', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '5d5b4aa3815b815ebe4bebc81f307ba62f781af1' })), index.h("div", { key: '6305c611f72e1e57ff90562a05568777ff3e5db0', class: "sd-popover-menu__content" }, this.menuTitle && index.h("div", { key: 'da81708c8925e82c6b28b2d582f17d588f9fceae', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: 'd0d00ce577b6de6efd546fadafc5d487f5e9b0b9', class: "sd-popover-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '3ce2714f038a72ffd1017e00521bf2c05fe8730c', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '4c551c170b13797cb725e3e0ae42623dc983286a', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '1c4620527b33feba50d06709ed0c9185be4094b4', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

package/dist/cjs/sd-progress.cjs.entry.js

@@ -21,10 +21,10 @@ const SdProgress = class {
         error: '#FB4444',
     };
     render() {
-        return (index.h(index.Host, { key: 'ecd9801daf4fcb4a3a680286354c436b1423778a', style: {
+        return (index.h(index.Host, { key: '351f3fda014f276d22b02b09f92ed7895a43ea85', style: {
                 '--progress-color': this.statusColor[this.status],
                 '--progress-percentage': `${this.percentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '167d080cefe222ac28d966bbcf0aca4a122c98ea', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '3b41b3fdb26fdf283792172de45fbcff37e1c90e', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, index.h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));

package/dist/cjs/sd-select-multiple.cjs.entry.js

@@ -0,0 +1,266 @@
+'use strict';
+
+var index = require('./index-B7tkxTye.js');
+var selectKeyboardNavigation = require('./select-keyboard-navigation-6fO_V4En.js');
+
+const sdSelectMultipleCss = () => `.sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__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}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}`;
+
+const SdSelectMultiple = class extends selectKeyboardNavigation.BaseDropdownEvent {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.sdChange = index.createEvent(this, "sdChange");
+        this.dropDownShow = index.createEvent(this, "dropDownShow");
+    }
+    get el() { return index.getElement(this); }
+    // props
+    value = null;
+    label = '';
+    options = [];
+    placeholder = '선택';
+    optionPlaceholder = '옵션이 없습니다.';
+    width = '200px';
+    dropdownHeight = '260px';
+    disabled = false;
+    clearable = false;
+    searchable = false;
+    useCheckbox = false;
+    // props - custom slots
+    optionRenderer;
+    // states
+    filteredOptions = this.options;
+    isOpen = false;
+    searchText = null;
+    itemIndex = -1;
+    isScrolled = false;
+    // events
+    sdChange;
+    dropDownShow;
+    selectRef;
+    searchRef;
+    optionRef;
+    dropdownRef;
+    async open() {
+        this.isOpen = true;
+    }
+    valueChanged() {
+        this.sdChange?.emit(this.value);
+    }
+    optionsChanged() {
+        this.filteredOptions = this.options;
+        this.filterOptions();
+    }
+    searchTextChanged() {
+        this.filterOptions();
+    }
+    async itemIndexChanged(newIndex, oldIndex) {
+        if (this.searchable) {
+            const searchInput = await this.getNativeInputElement();
+            if (this.itemIndex === -1) {
+                searchInput?.focus();
+                return;
+            }
+            else if (searchInput?.matches(':focus')) {
+                searchInput?.blur();
+            }
+        }
+        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || []);
+        const currentItem = optionElements?.[this.itemIndex];
+        if (!currentItem || !this.isOpen)
+            return;
+        this.optionRef = currentItem;
+        const isOptionDisabled = await this.optionRef.isDisabled();
+        if (isOptionDisabled) {
+            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
+            return;
+        }
+        this.scrollToOption(currentItem);
+    }
+    async isOpenChanged() {
+        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
+        this.onDropdownToggle(this.isOpen);
+        const selectedOption = this.getSelectedOption();
+        if (!selectedOption) {
+            this.itemIndex = -1;
+        }
+        else {
+            this.itemIndex = this.options.indexOf(selectedOption[0]);
+        }
+        this.dropDownShow?.emit({ isOpen: this.isOpen });
+        if (this.isOpen === false)
+            return;
+        await new Promise(resolve => setTimeout(resolve, 10));
+        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
+        const currentItem = optionElements?.[this.itemIndex];
+        // 드롭다운이 열릴 때 검색 입력에 포커스
+        if (this.searchable) {
+            const searchInput = await this.getNativeInputElement();
+            searchInput?.focus();
+        }
+        if (!currentItem)
+            return;
+        await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
+        this.scrollToOption(currentItem);
+    }
+    connectedCallback() {
+        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
+        this.filteredOptions = this.options;
+        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
+    }
+    disconnectedCallback() {
+        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
+    }
+    handleDocumentClick(event) {
+        if (!this.selectRef?.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    handleDocumentKeydown(keyboardEvent) {
+        keyboardEvent.stopPropagation();
+        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+        if (!targetKey.includes(keyboardEvent.key))
+            return;
+        keyboardEvent.preventDefault();
+        switch (keyboardEvent.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                const keyboardNavigation = new selectKeyboardNavigation.SelectKeyboardNavigation(this.searchable, this.filteredOptions);
+                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
+                this.itemIndex = nextIndex;
+                break;
+            case 'Enter':
+                const selectedOption = this.filteredOptions[this.itemIndex];
+                if (selectedOption && !selectedOption.disabled) {
+                    this.handleOptionSelection(selectedOption);
+                }
+                break;
+            case 'Escape':
+                this.isOpen = false;
+                break;
+        }
+    }
+    // event handlers
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            this.dropDownShow?.emit({ isOpen: this.isOpen });
+        }
+    };
+    handleOptionClick = (detail) => {
+        const { option, event } = detail;
+        event.stopPropagation();
+        this.handleOptionSelection(option);
+    };
+    filterOptions() {
+        if (!this.searchText || this.searchText.trim() === '') {
+            // 검색어가 없으면 전체 옵션 표시
+            this.filteredOptions = this.options;
+        }
+        else {
+            // 검색어가 있으면 필터링
+            this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
+        }
+    }
+    getSelectedOption() {
+        return this.options.filter(option => this.value?.includes(option));
+    }
+    handleDropdownScroll = (event) => {
+        const target = event.target;
+        const scrollTop = target.scrollTop;
+        // 스크롤이 조금이라도 되면 그림자 표시
+        this.isScrolled = scrollTop > 0;
+    };
+    async getNativeInputElement() {
+        if (this.searchRef) {
+            return this.searchRef.getNativeElement();
+        }
+        return null;
+    }
+    handleOptionSelection = (option) => {
+        if (!option || option.disabled)
+            return;
+        const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
+        if (isAlreadySelected) {
+            // 이미 선택된 옵션인 경우, 선택 해제
+            this.value = this.value?.filter(opt => opt.value !== option.value) || null;
+        }
+        else {
+            // 새로운 옵션 선택
+            this.value = [...(this.value || []), option];
+        }
+    };
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    scrollToOption(optionElement) {
+        if (!this.dropdownRef || !optionElement)
+            return;
+        const dropdown = this.dropdownRef;
+        const optionTop = optionElement.offsetTop;
+        const optionHeight = optionElement.offsetHeight;
+        const dropdownScrollTop = dropdown.scrollTop;
+        const dropdownHeight = dropdown.clientHeight;
+        const searchContainer = dropdown.querySelector('.sd-select__search-container');
+        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
+        const visibleTop = dropdownScrollTop + searchOffset;
+        const visibleBottom = dropdownScrollTop + dropdownHeight;
+        if (optionTop < visibleTop) {
+            dropdown.scrollTop = optionTop - searchOffset;
+        }
+        else if (optionTop + optionHeight > visibleBottom) {
+            dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
+        }
+    }
+    // render method
+    render() {
+        const style = {
+            '--select-width': this.width || '200px',
+            '--select-dropdown-height': this.dropdownHeight || '260px',
+        };
+        return (index.h(index.Host, { key: 'b80f1d57e87db4e921436b726cfeac4618a13d6b', style: style }, index.h("div", { key: '43ae0ae2ec83cef2cad1ae59764b5463bb66eda0', class: {
+                'sd-select-multiple': true,
+                'sd-select-multiple--open': this.isOpen,
+                'sd-select-multiple--disabled': this.disabled,
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), index.h("div", { key: '8802336bea4e78aa6ccf1a567d238005ff58c29b', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+    }
+    renderLabel(label) {
+        if (!label)
+            return null;
+        return index.h("label", { class: "sd-select-multiple__label" }, label);
+    }
+    renderTrigger() {
+        const selectedOption = this.getSelectedOption();
+        return (index.h("div", { class: "sd-select-multiple__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick }, index.h("span", { class: "sd-select-multiple__value" }, !selectedOption
+            ? '선택'
+            : selectedOption.length
+                ? selectedOption.map(option => option.label).join(', ')
+                : this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (index.h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple__clear", onClick: event => {
+                event.stopPropagation();
+                this.value = null;
+            } })), index.h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: { 'sd-select-multiple__arrow': true, 'sd-select-multiple__arrow--open': this.isOpen } })));
+    }
+    renderDropdown() {
+        if (this.isOpen === false)
+            return null;
+        return (index.h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, index.h("div", { class: "sd-select-multiple__dropdown", onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("div", { class: {
+                'sd-select-multiple__search-container': true,
+                'sd-select-multiple__search-container--scrolled': this.isScrolled,
+            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
+                this.searchText = String(event?.detail);
+            }, onSdFocus: () => {
+                this.itemIndex = -1;
+            } }, index.h("sd-icon", { name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.value?.some(selected => selected.value === option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-multiple__option-placeholder' }, this.optionPlaceholder))))));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "options": ["optionsChanged"],
+        "searchText": ["searchTextChanged"],
+        "itemIndex": ["itemIndexChanged"],
+        "isOpen": ["isOpenChanged"]
+    }; }
+};
+SdSelectMultiple.style = sdSelectMultipleCss();
+
+exports.sd_select_multiple = SdSelectMultiple;
+//# sourceMappingURL=sd-select-multiple.entry.cjs.js.map

package/dist/cjs/sd-tbody_3.cjs.entry.js

@@ -9,7 +9,7 @@ const SdTbody = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '96bedf612efa56d790df7070e2641f6769da81a9' }, index.h("slot", { key: '9980c55cf76b1600034d8dcd60249b392c0c50f2' })));
+        return (index.h(index.Host, { key: '7636f7ff23e8aa3c83ace885c5f2ad3fa1e57a45' }, index.h("slot", { key: '9cdae57011b78e861dab1c16144642c534aaa9e4' })));
     }
 };
 SdTbody.style = sdTbodyCss();
@@ -21,7 +21,7 @@ const SdTh = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'cbd2372809ca102893f62b3b4e2d51342cc4c52f', role: "columnheader" }, index.h("slot", { key: 'c51c2635013c8d405bf3d95d46d2b99bc52c3326' })));
+        return (index.h(index.Host, { key: '8b511af45184973c4daefe8bee11130934ef05be', role: "columnheader" }, index.h("slot", { key: 'a72bff519a60499357ccce741fa0b90cdf9197b7' })));
     }
 };
 SdTh.style = sdThCss();
@@ -33,7 +33,7 @@ const SdTr = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '228bb6d6b5225bd035cce96cd817beb9e2734ab4', role: "row" }, index.h("slot", { key: '8906dfdeb89afb1028a30a5b16b034f6c2ba67b9' })));
+        return (index.h(index.Host, { key: '45ae0547de2437e9b815e0ed33226276787805f7', role: "row" }, index.h("slot", { key: '98dabd2288d0db28bc9305f1b1b3298cb2a905d0' })));
     }
 };
 SdTr.style = sdTrCss();

package/dist/cjs/sd-td.cjs.entry.js

@@ -13,11 +13,11 @@ const SdTd = class {
     tdStyle;
     tdClass;
     render() {
-        return (index.h(index.Host, { key: '182bd00cbbb22b4f3613e973d2999421a3f5f2cd', role: "cell", class: {
+        return (index.h(index.Host, { key: '96933d25aa2342e56aaad5a447840bf51b0af078', role: "cell", class: {
                 'sd-td': true,
                 [`sd-td--${this.align}`]: true,
                 [this.tdClass || '']: Boolean(this.tdClass),
-            }, style: this.tdStyle }, index.h("slot", { key: 'fff1a74106822c8092fa57ba785f6ab5be96edcd' })));
+            }, style: this.tdStyle }, index.h("slot", { key: 'd6a500857bfc914b0443c5ced9607e15dc151c7c' })));
     }
 };
 SdTd.style = sdTdCss();

package/dist/collection/collection-manifest.json

@@ -22,6 +22,7 @@
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
     "components/sd-loading-spinner/sd-loading-spinner.js",
+    "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
     "components/sd-popover/sd-popover.js",
     "components/sd-portal/sd-portal.js",

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

@@ -0,0 +1,128 @@
+sd-icon {
+  display: inline-block;
+  line-height: 0;
+}
+sd-icon .sd-icon--rotate-90 {
+  transform: rotate(90deg);
+}
+sd-icon .sd-icon--rotate-180 {
+  transform: rotate(180deg);
+}
+sd-icon .sd-icon--rotate-270 {
+  transform: rotate(270deg);
+}
+
+.sd-number-input {
+  box-sizing: border-box;
+  display: flex;
+  width: var(--input-width, 100%);
+  align-items: center;
+  height: 28px;
+  padding: 4px 8px;
+  border: 1px solid #aaaaaa;
+  border-radius: 4px;
+  color: #333333;
+  font-size: 12px;
+  line-height: 20px;
+  background: white;
+  position: relative;
+}
+.sd-number-input--hovered {
+  border-color: #0075ff;
+  box-shadow: 0 0 4px 0 rgba(0, 113, 255, 0.4);
+}
+.sd-number-input.sd-number-input--error {
+  border-color: #fb4444;
+}
+.sd-number-input.sd-number-input--pass {
+  border-color: #2bce6c;
+}
+.sd-number-input.sd-number-input--disabled {
+  background-color: #eeeeee !important;
+  border-color: #cccccc !important;
+  cursor: not-allowed !important;
+  box-shadow: none !important;
+}
+.sd-number-input.sd-number-input--disabled .sd-number-input__input {
+  color: #888888 !important;
+}
+.sd-number-input .sd-number-input__input {
+  display: block;
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: inherit;
+  color: #333333;
+  margin-left: 4px;
+  margin-right: 4px;
+  padding-block: 0;
+  padding-inline: 0;
+  text-align: right;
+}
+.sd-number-input .sd-number-input__input::placeholder {
+  font-size: 12px;
+  height: 20px;
+  line-height: 20px;
+  color: #aaaaaa;
+}
+.sd-number-input .sd-number-input__clear-icon {
+  cursor: pointer;
+  margin-left: 8px;
+}
+.sd-number-input .sd-number-input__buttons {
+  padding: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+.sd-number-input .sd-number-input__button {
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 2px;
+  background-color: #eff6ff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  transition: background-color 0.2s ease;
+}
+.sd-number-input .sd-number-input__button:hover:not(:disabled) {
+  background-color: #e6f1ff;
+}
+.sd-number-input .sd-number-input__button:disabled {
+  background-color: #eeeeee;
+  cursor: not-allowed;
+}
+.sd-number-input .sd-number-input__button--decrement {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.sd-number-input .sd-number-input__button--increment {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.sd-number-input .sd-number-input__label {
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #333333;
+}
+
+sd-number-input:focus-within .sd-number-input__buttons {
+  opacity: 1;
+  pointer-events: auto;
+}
+sd-number-input:focus-within .sd-number-input {
+  border-color: #0075ff;
+  box-shadow: 0 0 4px 0 rgba(0, 113, 255, 0.4);
+}