@sellmate/design-system 1.16.0 → 1.18.0

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

@@ -2,8 +2,9 @@
 
 var index = require('./index-DXm0PH2A.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var sdSelect_config = require('./sd-select.config-DrJ4LNVz.js');
+var sdSelect_config = require('./sd-select.config-C9Ohe1QA.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
+require('./component.listItem-Bnh0r_CA.js');
 
 const sdSelectCss = () => `sd-select{display:inline-flex}sd-select sd-portal{display:none}sd-select .sd-select{position:relative;width:100%;height:100%}`;
 
@@ -266,15 +267,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: '29ea3526b5ef4a6f64bac810204cb7862a184503', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.h("sd-field", { key: 'fced3680a535c60d5750908acf1226426e12182b', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: 'e23ef16cf8af59d2e9dd6ee39a297c4338e0a056', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: '38d53e92c022affd40bfc7951bbcdf7e02071446', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: 'b6811644cb571bb738d604ce31b233ff76a32d16', ref: el => {
+            } }, index.h("sd-select-trigger", { key: '9cd9bdb89db37204f9a5c312d26277da772b1209', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'b9b191bd7eefcb4d69be21f51740dd1cd993a3e7', ...portalProps }, index.h("sd-select-listbox", { key: 'f04d988c8491eeea284dc4fdce91dadfd33965f8', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '8666dc885f3dcbae13011fd312eb72b7e6c906d9', ...portalProps }, index.h("sd-select-listbox", { key: '04e6dba3d2837cbef68ded80bd2f89c5bbe9dc01', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -352,14 +353,14 @@ const SdSelectListbox = class {
         return count >= sdSelect_config.SEARCH_THRESHOLD;
     }
     get filteredOptions() {
-        if (this.searchKeyword === '')
+        if (this.searchKeyword == null || this.searchKeyword === '')
             return this.options;
         if (this.isDepth)
             return sdSelect_config.filterTree(this.options, this.searchKeyword);
         const keyword = this.searchKeyword.toLowerCase();
         return this.options.filter(o => {
             const labelText = sdSelect_config.isHtmlLabel(o.label) ? sdSelect_config.extractText(o.label) : o.label;
-            return labelText.toLowerCase().includes(keyword);
+            return labelText != null && labelText.toLowerCase().includes(keyword);
         });
     }
     get isEmpty() {
@@ -641,9 +642,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${sdSelect_config.LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '6c2cbad13f8aaa8c0552068c7cbc35a147bee77d', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '052d783e27e2458aa397c77fe891dad4a440f09e', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'bba95f3c4475d01a65562ba079c8666e3325195d', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: 'fe30af2954ea5669f2071698e6ef9e2b26244d9b', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: 'aa7ce87d8c0c7163921445325121562603edd960', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: 'e8b5b3f73653ddc5096101f7109d427de1efa93a', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '2f55bbacbed71952903599db0739773176ac55fd', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '7fbde730eca0b8234475b714ea38a4393425410e', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, sdSelect_config.EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -703,7 +704,7 @@ const SdSelectTrigger = class {
                 ? sdSelect_config.SELECT_COLORS.icon.disabled
                 : sdSelect_config.SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: 'b5a4f750c00889d0d9b985211063fc6b20bc2e38', ref: el => {
+        return (index.h("div", { key: '0a929b8c0d68e25a64c352b5ea93b2e9c5f52611', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -714,7 +715,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'be0b61c0550618602ef016504fa1672f7520fa93', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '9d60c3eeae54ce6ed9609534e3530d0349d1a3ff', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: 'd8c91e392604c462aa9228147eb18c0b2ac13851', class: "sd-select-trigger__content" }, hasValue && sdSelect_config.isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '1afdcb944b30b675d4d2b31d6aeaa2ce41045d36', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -105,7 +105,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: '70b779b6d8fc42e94110d7fb9d88aba22290af3a', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '41281a03161608ce507dd14c8a2a5a47063556ca', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '0c712f35c9594380b666a03387f0563cfcb1257d', class: "sd-switch__track" }, index.h("div", { key: 'a96915c01e3a33017d9024e1aea9cd8f50fdd933', class: "sd-switch__knob" })), this.label && index.h("span", { key: '51d9d2f4a7072cb288ce4257df825ad2d9053f35', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: '8038810bfcf78ddea9ef73706689e19fdfe0b57f', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'ee4c60f379f20f56af01bafb0533e6b64bb3054a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '8ce56df6d631b742331466ded340298a888576c7', class: "sd-switch__track" }, index.h("div", { key: 'e02c48a7af9e005524b5d3ba8689e99dd42555f2', class: "sd-switch__knob" })), this.label && index.h("span", { key: 'c1533c489ef8d0a2b8374d2eaeeb0ac743a9c507', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -2,9 +2,9 @@
 
 var index = require('./index-DXm0PH2A.js');
 var constants = require('./constants-DJRV1upE.js');
-var sdTable_config = require('./sd-table.config-BjJW74Zx.js');
+var sdTable_config = require('./sd-table.config-B7MuRLoR.js');
 require('./component.table-DIxmbGBT.js');
-require('./system-CdAyz3ej.js');
+require('./system-MjrAugX-.js');
 
 let urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
@@ -845,24 +845,24 @@ const SdTable = class {
             '--table-selectable-width': `${sdTable_config.TABLE_SELECTABLE_COLUMN_WIDTH}px`,
             '--table-host-height': hostHeight,
         };
-        return (index.h(index.Host, { key: '164ba96033be0195fa50e3d4d684059b9c471479', style: hostStyle }, index.h("div", { key: '2f1a1be73f86c72e7caa46981ee691d29bb237c7', class: "sd-table__container", style: {
+        return (index.h(index.Host, { key: '337909d6279baf60effec188eb60422ce47c0585', style: hostStyle }, index.h("div", { key: '46d53ced85e1700da3c6ca082d5752c0bb4a155b', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--pagination-height': `${paginationHeight}px`,
-            } }, index.h("div", { key: '16976d24d4c21714183f9691b06c503b86388c54', class: {
+            } }, index.h("div", { key: '159fad6dec16b3328d0da4ce22ae6bca537046e9', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--use-top': this.useTop,
-            } }, index.h("div", { key: 'fdd0dcfbff4c3a5e441d720d2e1a39a69c51f9cf', class: {
+            } }, index.h("div", { key: '22acbc7de61e11807b1a8919090286bb04a98bed', class: {
                 'sd-table__scroll-container': true,
                 'sd-table__scroll-container--loading': this.isLoading,
                 'sd-table__scroll-container--no-data': isNoData,
-            } }, this.isLoading && (index.h("div", { key: 'facb26c0d1651d4a2a6e0dee5c1b8ca73586de89', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '844b92fc9fc38f95d51092b698b67b685bcba076', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: '458c8e24b85c0e7c99afe940c3d5856e63bc582a', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'bd29a77ac11da7e5d513955a4c4baa0dd89a623d', class: "sd-table__no-data" }, index.h("div", { key: '7db0e8e3888e97638f3c78d560e844cc0f8b2944', class: "sd-table__no-data-content", ref: el => {
+            } }, this.isLoading && (index.h("div", { key: '040736d35428396068d5237a17f23f8f70ba2541', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: 'eae076a71161e315951692f051522b8b5f094271', indeterminate: true }))), isNoData && (index.h(index.h.Fragment, null, index.h("div", { key: 'e8bdf5ae38a77988fce0a60ae9309f5d03b34928', class: "sd-table__no-data-header-overlay" }), index.h("div", { key: 'd6ce4d4479eb927137b1afd5494a91494568b274', class: "sd-table__no-data" }, index.h("div", { key: 'cfccc6382e7d0cc76d7f50515cd157ccd56cbac8', class: "sd-table__no-data-content", ref: el => {
                 this.noDataContentEl = el;
                 if (el)
                     this.syncNoDataContentObserver();
-            } }, index.h("slot", { key: 'fa175041907d4af7e5e0db7cad6e9a3e16e96901', name: "no-data" }, index.h("span", { key: '3fae3a23d86dc543502f74574a4b5c3f026b9992' }, this.resolvedNoDataLabel)))))), index.h("table", { key: '9ae98e0697e045b308f7e584fb496692acade8ba', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, index.h("slot", { key: '45a2df0c0fa234408ca5a5fb76b5a74729cad482', name: "no-data" }, index.h("span", { key: 'a126d8ce4149ac87e55f5a6acc67bbb3a650cdf4' }, this.resolvedNoDataLabel)))))), index.h("table", { key: 'aa4b94ed02700edd1846ca51235f47fe7de570be', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: 'a0da779351490332035ec784bc301ea2cb017afd', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '8c3bcd06e1644afaebabd3762cdb03900f727142', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '4bff157ac6e0fb5efe03663d4bbf58d67f8308b6', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: 'f4d357d62af40e3ea8f35c799b4409c7deb2606f', class: "sd-table__pagination" }, index.h("sd-pagination", { key: '6aad139f1f06d1851f30b5c8331899fe9d23ba37', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (index.h("sd-select", { key: '85aa19726fca6dce007d8ffcc5550de8115546cb', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/cjs/{sd-table.config-BjJW74Zx.js → sd-table.config-B7MuRLoR.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var component_table = require('./component.table-DIxmbGBT.js');
-var system = require('./system-CdAyz3ej.js');
+var system = require('./system-MjrAugX-.js');
 
 // ── Header Tokens ──
 const TABLE_HEADER_LAYOUT = {

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

@@ -201,7 +201,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: '1c670c50ff7f5489a77043bc030fe3a65eb894ab', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'fd65e555621e8b9f9c8e93578f41f1c24a8cbeda', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -158,7 +158,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '95f97474c4d00a35085c558bf43593322a9f69e7', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'f67d1e8b125c10446dac3abdfa0da01bfb83f470' })));
+        return (index.h(index.Host, { key: '02464050ab6179a4d19bc5885aff8c2690cc3dd6', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'a4cde26644aea2e1a99690c407b7020b20bd3981' })));
     }
     static get watchers() { return {
         "field": [{

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -133,7 +133,7 @@ const SdTextLink = class {
         this.click.emit();
     };
     render() {
-        const sizeConfig = TEXT_LINK_SIZE_CONFIG[this.size];
+        const sizeConfig = TEXT_LINK_SIZE_CONFIG[this.size] ?? TEXT_LINK_SIZE_CONFIG.sm;
         const typo = this.underline ? sizeConfig.typography.underline : sizeConfig.typography.default;
         const labelClassName = ['sd-text-link__label', this.labelClass].filter(Boolean).join(' ');
         const iconColor = this.disabled
@@ -147,7 +147,7 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '89b8117d19d149faf70d026ef560acdfa0096daa', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("span", { key: '74e9dd05f3efa3ecfec4edca1b74c29bb7207894', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -155,13 +155,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (index.h("sd-icon", { key: '684c7b31abc6cb806944c03a016c4520c4721a7c', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '272f5b4c889b099ede7b5146ea4828648d89ad69', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: '142d37f856df2e5858df5d976e4d8ac4ee2f2607', class: "sd-text-link__arrow", style: {
+            } }, this.icon && (index.h("sd-icon", { key: 'e60be0764adf889af988fd887582776d44239e07', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '17996ef0620948fe1660945e68c9bb55e62fc982', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: 'b9cfc03d4295beb9956f661032ea3fd1d9acfbe9', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 height: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '5da12b6077fb33912260b353cb6fe7d533eab937', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '6c2e4640a767acd5e66089e7e78f27c0fb8a0955', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '2b0bc86b7e2ea19a44f3c0b870ce5dec1de3a140', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '44b4f34b231186fd00ef9c1a65bd68a83fced6da', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -84,12 +84,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: '82c8063406a534e60c985d3c8321612077f75623', style: {
+        return (index.h("div", { key: '656bf6231262cc7d974adbe5f0ce0053d03aca84', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: 'e83c5b7ddc0edec3fb9e29325dcb52e3295fad4d', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'd249e5915f0c92a0a2cff43dee5c61d809ffc7f0', class: "sd-toast__icon" }, index.h("sd-icon", { key: '088da81d0083cc0ca72f2bf59392a72d3f2ed4de', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '5cad9a3a81b00d8926d92d9895c4cca1389dc63b', class: "sd-toast__content" }, index.h("span", { key: '1fbc72aac70fbb3bb630ad10343ea2c8f76f924c', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '769a85fa539bab8b478ef999cab615285a842085', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '77612614898b6abdade4b4599987cbb90bc09c4e', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '3bef6c0e7f3dec3f2b1f493f9c979a121bc897e9', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '1e15e50c926ce65cea86db069dd1e79a642da01c', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '692277c23c4530d9fa0c5e26ea9d3b9759024dea', class: "sd-toast__icon" }, index.h("sd-icon", { key: '0a15993313f3a9d1f27d6ae727c2c248c3390701', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '9c1af0c9cedbb772b9b59ae80a0ff861066aa0de', class: "sd-toast__content" }, index.h("span", { key: '2aacd89fe1cf31f271da027459a6cfaece3dbdbf', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '094a68e843d9ab50cea46a506d6ccdc1ebf375d7', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '7dabe182870a01cf285ee7441dfe39b07e943751', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '2a893c6ace888d8f21ce16c9dbf2a35b23bc9372', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -120,7 +120,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: 'f61e80701bc85205794aec0c960965d29b94a247', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '26a31febfdae6bebe55291d3454a177366dc3db0', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '5657698c379c71e770b18006b5f5c69c122a06a7', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '8f72307d4efd029df200243cf670377aea2cff02', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{system-CdAyz3ej.js → system-MjrAugX-.js}

@@ -1,5 +1,11 @@
 'use strict';
 
+const typography = {
+	feedback: {
+		sm: {
+			regular: {
+				fontSize: "12",
+				fontWeight: "400"}}}};
 const color = {
 	bg: {
 		frame: "#FFFFFF",
@@ -32,6 +38,7 @@ const shadow = {
 			color: "rgba(34,34,34,0.2)"}
 	}};
 var systemTokens = {
+	typography: typography,
 	color: color,
 	shadow: shadow
 };

package/dist/collection/collection-manifest.json

@@ -21,13 +21,13 @@
     "components/sd-card/sd-card.js",
     "components/sd-chip/sd-chip.js",
     "components/sd-chip-input/sd-chip-input.js",
+    "components/sd-portal/sd-portal.js",
     "components/sd-circle-progress/sd-circle-progress.js",
     "components/sd-confirm-modal/sd-confirm-modal.js",
     "components/sd-tag/sd-tag.js",
     "components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js",
     "components/sd-date-picker/sd-date-picker.js",
     "components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js",
-    "components/sd-portal/sd-portal.js",
     "components/sd-field/sd-field.js",
     "components/sd-divider/sd-divider.js",
     "components/sd-dropdown-button/sd-dropdown-button.js",

package/dist/collection/components/assets/Bill.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Bill = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.2891 8.7998C16.4208 8.40733 16.8457 8.19563 17.2383 8.32715C17.6309 8.45871 17.8423 8.88369 17.7109 9.27637L16.8818 11.75H18C18.4142 11.75 18.75 12.0858 18.75 12.5C18.75 12.9142 18.4142 13.25 18 13.25H16.3799L15.6035 15.5664C15.2492 16.6239 13.7487 16.6085 13.416 15.5439L12.6992 13.25H11.3008L10.584 15.5439C10.2513 16.6085 8.7508 16.6239 8.39648 15.5664L7.62012 13.25H6C5.58579 13.25 5.25 12.9142 5.25 12.5C5.25 12.0858 5.58579 11.75 6 11.75H7.11816L6.28906 9.27637C6.15765 8.88369 6.36905 8.45871 6.76172 8.32715C7.15433 8.19563 7.57919 8.40733 7.71094 8.7998L8.69922 11.75H10.1982L10.9023 9.49805L10.9375 9.40039C11.3201 8.45471 12.6799 8.45472 13.0625 9.40039L13.0977 9.49805L13.8018 11.75H15.3008L16.2891 8.7998ZM9.47461 14.0645L9.72949 13.25H9.20215L9.47461 14.0645ZM14.5244 14.0645L14.7979 13.25H14.2705L14.5244 14.0645ZM11.7695 11.75H12.2305L12 11.0137L11.7695 11.75Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.5 4.25C20.7426 4.25 21.75 5.25736 21.75 6.5V17.5C21.75 18.7426 20.7426 19.75 19.5 19.75H4.5C3.25736 19.75 2.25 18.7426 2.25 17.5L2.25 6.5C2.25 5.25736 3.25736 4.25 4.5 4.25H19.5ZM4.5 5.75C4.08579 5.75 3.75 6.08579 3.75 6.5V17.5C3.75 17.9142 4.08579 18.25 4.5 18.25H19.5C19.9142 18.25 20.25 17.9142 20.25 17.5V6.5C20.25 6.08579 19.9142 5.75 19.5 5.75H4.5Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Coupon.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Coupon = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M15 13.5C15.8284 13.5 16.5 14.1716 16.5 15C16.5 15.8284 15.8284 16.5 15 16.5C14.1716 16.5 13.5 15.8284 13.5 15C13.5 14.1716 14.1716 13.5 15 13.5Z", fill: "currentColor" }), h("path", { d: "M14.9092 7.96973C15.2021 7.67705 15.6769 7.67691 15.9697 7.96973C16.2625 8.26255 16.2624 8.73738 15.9697 9.03027L9.03027 15.9697C8.73739 16.2625 8.26261 16.2625 7.96973 15.9697C7.67685 15.6769 7.67689 15.2021 7.96973 14.9092L14.9092 7.96973Z", fill: "currentColor" }), h("path", { d: "M9 7.5C9.82843 7.5 10.5 8.17157 10.5 9C10.5 9.82843 9.82843 10.5 9 10.5C8.17157 10.5 7.5 9.82843 7.5 9C7.5 8.17157 8.17157 7.5 9 7.5Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.5 4.25C20.7426 4.25 21.75 5.25736 21.75 6.5V9C21.75 9.5042 21.5307 9.91547 21.2715 10.2178C21.0155 10.5162 20.6946 10.7418 20.4014 10.9023C20.0117 11.1156 19.75 11.5278 19.75 12C19.75 12.4722 20.0117 12.8844 20.4014 13.0977C20.6946 13.2582 21.0155 13.4838 21.2715 13.7822C21.5307 14.0845 21.75 14.4958 21.75 15V17.5C21.75 18.7426 20.7426 19.75 19.5 19.75H4.5C3.25736 19.75 2.25 18.7426 2.25 17.5V15C2.25 14.4958 2.46932 14.0845 2.72852 13.7822C2.98448 13.4838 3.30543 13.2582 3.59863 13.0977C3.98828 12.8844 4.25 12.4722 4.25 12C4.25 11.5278 3.98828 11.1156 3.59863 10.9023C3.30543 10.7418 2.98448 10.5162 2.72852 10.2178C2.46932 9.91547 2.25 9.5042 2.25 9L2.25 6.5C2.25 5.25736 3.25736 4.25 4.5 4.25H19.5ZM4.5 5.75C4.08579 5.75 3.75 6.08579 3.75 6.5V9C3.75 9.04794 3.76826 9.12579 3.86719 9.24121C3.96955 9.36057 4.12814 9.48225 4.31934 9.58691C5.17022 10.0528 5.75 10.9581 5.75 12C5.75 13.0419 5.17022 13.9472 4.31934 14.4131C4.12814 14.5178 3.96955 14.6394 3.86719 14.7588C3.76826 14.8742 3.75 14.9521 3.75 15V17.5C3.75 17.9142 4.08579 18.25 4.5 18.25H19.5C19.9142 18.25 20.25 17.9142 20.25 17.5V15C20.25 14.9521 20.2317 14.8742 20.1328 14.7588C20.0304 14.6394 19.8719 14.5178 19.6807 14.4131C18.8298 13.9472 18.25 13.0419 18.25 12C18.25 10.9581 18.8298 10.0528 19.6807 9.58691C19.8719 9.48225 20.0304 9.36057 20.1328 9.24121C20.2317 9.12579 20.25 9.04794 20.25 9V6.5C20.25 6.08579 19.9142 5.75 19.5 5.75H4.5Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Delete.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Delete = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M8.35254 10.7646C8.75858 10.6834 9.15395 10.9466 9.23535 11.3525L10.2354 16.3525C10.3166 16.7586 10.0534 17.1539 9.64746 17.2354C9.24142 17.3166 8.84605 17.0534 8.76465 16.6475L7.76465 11.6475C7.68344 11.2414 7.94658 10.8461 8.35254 10.7646Z", fill: "currentColor" }), h("path", { d: "M12 10.75C12.4142 10.75 12.75 11.0858 12.75 11.5V16.5C12.75 16.9142 12.4142 17.25 12 17.25C11.5858 17.25 11.25 16.9142 11.25 16.5V11.5C11.25 11.0858 11.5858 10.75 12 10.75Z", fill: "currentColor" }), h("path", { d: "M14.7646 11.3525C14.8461 10.9466 15.2414 10.6834 15.6475 10.7646C16.0534 10.8461 16.3166 11.2414 16.2354 11.6475L15.2354 16.6475C15.1539 17.0534 14.7586 17.3166 14.3525 17.2354C13.9466 17.1539 13.6834 16.7586 13.7646 16.3525L14.7646 11.3525Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13 2.0498C13.9664 2.0498 14.7499 2.8334 14.75 3.7998V4.25H20C20.4142 4.25 20.75 4.58579 20.75 5V8C20.75 8.41421 20.4142 8.75 20 8.75H19.6445L17.999 19.6123C17.7952 20.9565 16.6398 21.9502 15.2803 21.9502H8.71973C7.36018 21.9502 6.20481 20.9565 6.00098 19.6123L4.35547 8.75H4C3.58579 8.75 3.25 8.41421 3.25 8V5C3.25 4.58579 3.58579 4.25 4 4.25H8.75V3.7998C8.75011 2.8334 9.53357 2.0498 10.5 2.0498H13ZM7.48438 19.3877C7.57717 19.9985 8.10188 20.4502 8.71973 20.4502H15.2803C15.8981 20.4502 16.4228 19.9985 16.5156 19.3877L18.1279 8.75H5.87207L7.48438 19.3877ZM4.75 7.25H19.25V5.75H4.75V7.25ZM10.5 3.5498C10.362 3.5498 10.2501 3.66182 10.25 3.7998V4.25H13.25V3.7998C13.2499 3.66182 13.138 3.5498 13 3.5498H10.5Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Dot.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Dot = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Launcher.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Launcher = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M5 18C5.55228 18 6 18.4477 6 19V21C6 21.5523 5.55228 22 5 22H3C2.44772 22 2 21.5523 2 21V19C2 18.4477 2.44772 18 3 18H5Z", fill: "currentColor" }), h("path", { d: "M13 18C13.5523 18 14 18.4477 14 19V21C14 21.5523 13.5523 22 13 22H11C10.4477 22 10 21.5523 10 21V19C10 18.4477 10.4477 18 11 18H13Z", fill: "currentColor" }), h("path", { d: "M21 18C21.5523 18 22 18.4477 22 19V21C22 21.5523 21.5523 22 21 22H19C18.4477 22 18 21.5523 18 21V19C18 18.4477 18.4477 18 19 18H21Z", fill: "currentColor" }), h("path", { d: "M5 10C5.55228 10 6 10.4477 6 11V13C6 13.5523 5.55228 14 5 14H3C2.44772 14 2 13.5523 2 13V11C2 10.4477 2.44772 10 3 10H5Z", fill: "currentColor" }), h("path", { d: "M13 10C13.5523 10 14 10.4477 14 11V13C14 13.5523 13.5523 14 13 14H11C10.4477 14 10 13.5523 10 13V11C10 10.4477 10.4477 10 11 10H13Z", fill: "currentColor" }), h("path", { d: "M21 10C21.5523 10 22 10.4477 22 11V13C22 13.5523 21.5523 14 21 14H19C18.4477 14 18 13.5523 18 13V11C18 10.4477 18.4477 10 19 10H21Z", fill: "currentColor" }), h("path", { d: "M5 2C5.55228 2 6 2.44772 6 3V5C6 5.55228 5.55228 6 5 6H3C2.44772 6 2 5.55228 2 5V3C2 2.44772 2.44772 2 3 2H5Z", fill: "currentColor" }), h("path", { d: "M13 2C13.5523 2 14 2.44772 14 3V5C14 5.55228 13.5523 6 13 6H11C10.4477 6 10 5.55228 10 5V3C10 2.44772 10.4477 2 11 2H13Z", fill: "currentColor" }), h("path", { d: "M21 2C21.5523 2 22 2.44772 22 3V5C22 5.55228 21.5523 6 21 6H19C18.4477 6 18 5.55228 18 5V3C18 2.44772 18.4477 2 19 2H21Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Monitor.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Monitor = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21.9502 14.75C21.9502 15.9925 20.9426 16.9998 19.7002 17L12.75 17L12.75 19H15C15.4142 19 15.75 19.3358 15.75 19.75C15.75 20.1642 15.4142 20.5 15 20.5L8.99997 20.5C8.58576 20.5 8.24997 20.1642 8.24997 19.75C8.24997 19.3358 8.58576 19 8.99997 19H11.25L11.25 17H4.29977C3.05722 16.9999 2.04977 15.9926 2.04977 14.75L2.04977 5.75C2.04978 4.50742 3.05722 3.5001 4.29977 3.5L19.7002 3.5C20.9426 3.50021 21.9502 4.50749 21.9502 5.75L21.9502 14.75ZM20.4502 5.75C20.4502 5.33592 20.1142 5.00021 19.7002 5L4.29977 5C3.88565 5.0001 3.54978 5.33585 3.54977 5.75L3.54977 14.75C3.54977 15.1642 3.88565 15.4999 4.29977 15.5L19.7002 15.5C20.1142 15.4998 20.4502 15.1641 20.4502 14.75L20.4502 5.75Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Shield.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Shield = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M16.2549 9.3486C16.5477 9.05582 17.0225 9.05602 17.3154 9.3486C17.6083 9.64149 17.6083 10.1163 17.3154 10.4091L12.0859 15.6386C11.6954 16.0291 11.0624 16.0291 10.6719 15.6386L7.46973 12.4365C7.17728 12.1436 7.17703 11.6687 7.46973 11.3759C7.76264 11.0833 8.23844 11.0831 8.53125 11.3759L11.3789 14.2246L16.2549 9.3486Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.501 1.4404C11.8718 1.27889 12.3024 1.30624 12.6533 1.52145L20.1533 6.12204C20.5238 6.34931 20.7499 6.75284 20.75 7.18747V10.5302C20.75 11.8881 20.6005 13.3051 20.0645 14.6425C19.5554 15.9124 18.7155 17.6378 17.4502 19.1894C16.1835 20.7426 14.4592 22.1581 12.1816 22.7275L12 22.7734L11.8184 22.7275C9.54076 22.1581 7.81646 20.7426 6.5498 19.1894C5.2845 17.6378 4.4446 15.9124 3.93555 14.6425C3.39949 13.3051 3.25 11.8881 3.25 10.5302V7.18747C3.25007 6.75284 3.47619 6.34931 3.84668 6.12204L11.3467 1.52145L11.501 1.4404ZM4.75 7.32712V10.5302C4.75 11.7887 4.89082 12.9929 5.32812 14.084C5.80497 15.2735 6.57635 16.8486 7.71191 18.2412C8.80911 19.5866 10.2182 20.7255 12 21.2216C13.7818 20.7255 15.1909 19.5866 16.2881 18.2412C17.4236 16.8486 18.195 15.2735 18.6719 14.084C19.1092 12.9929 19.25 11.7887 19.25 10.5302V7.32712L12 2.87985L4.75 7.32712Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Sidebar.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Sidebar = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19 3C20.6569 3 22 4.34315 22 6V18L21.9961 18.1543C21.9184 19.6883 20.6883 20.9184 19.1543 20.9961L19 21H5L4.8457 20.9961C3.31166 20.9184 2.08163 19.6883 2.00391 18.1543L2 18V6C2 4.34315 3.34315 3 5 3H19ZM5 4.5C4.17157 4.5 3.5 5.17157 3.5 6V18C3.5 18.8284 4.17157 19.5 5 19.5H8V4.5H5ZM9.5 19.5H19C19.8284 19.5 20.5 18.8284 20.5 18V6C20.5 5.17157 19.8284 4.5 19 4.5H9.5V19.5Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Store.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Store = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M18.3817 6C19.0445 6 19.6507 6.37497 19.9472 6.96777L21.9472 10.9678C22.5286 12.1313 21.6825 13.5 20.3817 13.5H19.7499V19.75C19.7499 20.1642 19.4141 20.5 18.9999 20.5C18.5858 20.4998 18.2499 20.1641 18.2499 19.75V13.5H13.7499V18.75C13.7499 19.7165 12.9664 20.5 11.9999 20.5H5.99991C5.03355 20.4998 4.24991 19.7164 4.24991 18.75V13.5H3.61807C2.3175 13.4998 1.47136 12.1312 2.05264 10.9678L4.05264 6.96777C4.34903 6.375 4.95534 6.00012 5.61807 6H18.3817ZM5.74991 18.75C5.74991 18.888 5.86198 18.9998 5.99991 19H11.9999C12.138 19 12.2499 18.8881 12.2499 18.75V13.5H5.74991V18.75ZM5.61807 7.5C5.5235 7.50012 5.43674 7.55407 5.39444 7.63867L3.39444 11.6387C3.31183 11.8047 3.43258 11.9998 3.61807 12H20.3817C20.5675 12 20.6882 11.8048 20.6054 11.6387L18.6054 7.63867C18.563 7.55405 18.4764 7.5 18.3817 7.5H5.61807Z", fill: "currentColor" }), h("path", { d: "M17.9999 4C18.4141 4 18.7499 4.33579 18.7499 4.75C18.7499 5.16421 18.4141 5.5 17.9999 5.5H5.99991C5.58584 5.49983 5.24991 5.16411 5.24991 4.75C5.24991 4.33589 5.58584 4.00017 5.99991 4H17.9999Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/index.js

@@ -9,6 +9,7 @@ import { ArrowUp } from "./ArrowUp";
 import { AttachFile } from "./AttachFile";
 import { Barcode } from "./Barcode";
 import { Bell } from "./Bell";
+import { Bill } from "./Bill";
 import { Board } from "./Board";
 import { Box } from "./Box";
 import { Camera } from "./Camera";
@@ -33,8 +34,11 @@ import { ClockFill } from "./ClockFill";
 import { ClockOutline } from "./ClockOutline";
 import { Close } from "./Close";
 import { Copy } from "./Copy";
+import { Coupon } from "./Coupon";
 import { Dashboard } from "./Dashboard";
 import { DateIcon } from "./Date";
+import { Delete } from "./Delete";
+import { Dot } from "./Dot";
 import { Download } from "./Download";
 import { Drag } from "./Drag";
 import { Edit } from "./Edit";
@@ -47,10 +51,12 @@ import { History } from "./History";
 import { ImageFill } from "./ImageFill";
 import { ImageOutline } from "./ImageOutline";
 import { Inline } from "./Inline";
+import { Launcher } from "./Launcher";
 import { Line } from "./Line";
 import { Location } from "./Location";
 import { Logout } from "./Logout";
 import { Minus } from "./Minus";
+import { Monitor } from "./Monitor";
 import { New } from "./New";
 import { NotificationFill } from "./NotificationFill";
 import { NotificationOutline } from "./NotificationOutline";
@@ -67,7 +73,10 @@ import { Row } from "./Row";
 import { Save } from "./Save";
 import { Search } from "./Search";
 import { Setting } from "./Setting";
+import { Shield } from "./Shield";
+import { Sidebar } from "./Sidebar";
 import { Star } from "./Star";
+import { Store } from "./Store";
 import { Synchronize } from "./Synchronize";
 import { Updown } from "./Updown";
 import { User } from "./User";
@@ -90,6 +99,7 @@ export const Icons = {
     attachFile: AttachFile,
     barcode: Barcode,
     bell: Bell,
+    bill: Bill,
     board: Board,
     box: Box,
     camera: Camera,
@@ -114,8 +124,11 @@ export const Icons = {
     clockOutline: ClockOutline,
     close: Close,
     copy: Copy,
+    coupon: Coupon,
     dashboard: Dashboard,
     date: DateIcon,
+    delete: Delete,
+    dot: Dot,
     download: Download,
     drag: Drag,
     edit: Edit,
@@ -128,10 +141,12 @@ export const Icons = {
     imageFill: ImageFill,
     imageOutline: ImageOutline,
     inline: Inline,
+    launcher: Launcher,
     line: Line,
     location: Location,
     logout: Logout,
     minus: Minus,
+    monitor: Monitor,
     new: New,
     notificationFill: NotificationFill,
     notificationOutline: NotificationOutline,
@@ -148,7 +163,10 @@ export const Icons = {
     save: Save,
     search: Search,
     setting: Setting,
+    shield: Shield,
+    sidebar: Sidebar,
     star: Star,
+    store: Store,
     synchronize: Synchronize,
     updown: Updown,
     user: User,

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

@@ -143,7 +143,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -167,7 +167,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -1,4 +1,7 @@
 import chipInputTokens from "../../tokens/generated/component.chipInput.json";
+import systemTokens from "../../tokens/generated/system.json";
+import listBoxTokens from "../../tokens/generated/component.listBox.json";
+import listItemTokens from "../../tokens/generated/component.listItem.json";
 const sm = chipInputTokens.chipInput.sm;
 const md = chipInputTokens.chipInput.md;
 export const CHIP_INPUT_SIZE_MAP = {
@@ -46,3 +49,29 @@ export const CHIP_INPUT_RESET = {
     iconColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
     labelColor: '#555555', // TODO: 토큰 반영 후 교체 (grey_70)
 };
+const feedbackSm = systemTokens.typography.feedback.sm.regular;
+export const CHIP_INPUT_MAX_COUNT = {
+    fontSize: `${feedbackSm.fontSize}px`,
+    fontWeight: `${feedbackSm.fontWeight}`,
+    color: chipInputTokens.chipInput.text.placeholder,
+};
+const listItem = listItemTokens.listItem;
+export const CHIP_INPUT_SUGGESTIONS = {
+    radius: `${listBoxTokens.listBox.radius}px`,
+    maxHeight: '260px',
+    itemPaddingY: `${listItem.paddingY}px`,
+    itemPaddingX: `${listItem.paddingLeft.depth1}px`,
+    itemPaddingRight: `${listItem.paddingRight}px`,
+    itemGap: `${listItem.gap}px`,
+    itemFontSize: `${listItem.typography.default.fontSize}px`,
+    itemFontWeight: listItem.typography.default.fontWeight,
+    itemFontWeightSelected: listItem.typography.selected.fontWeight,
+    itemLineHeight: `${listItem.typography.default.lineHeight}px`,
+    itemFontFamily: listItem.typography.default.fontFamily,
+    itemColor: listItem.content.default,
+    itemColorHover: listItem.content.hover,
+    itemBgHover: listItem.bg.hover,
+    emptyColor: '#888888',
+    emptyFontSize: '12px',
+    emptyLineHeight: '20px',
+};

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

@@ -4,6 +4,7 @@ sd-chip-input {
 sd-chip-input .sd-chip-input {
   position: relative;
   width: 100%;
+  isolation: isolate;
   min-height: var(--sd-chip-input-min-height);
   display: flex;
   flex-flow: row wrap;
@@ -25,6 +26,13 @@ sd-chip-input .sd-chip-input__divider {
   background-color: var(--sd-chip-input-divider-color);
   flex-shrink: 0;
 }
+sd-chip-input .sd-chip-input__max-count {
+  font-size: var(--sd-chip-input-max-count-font-size);
+  font-weight: var(--sd-chip-input-max-count-font-weight);
+  color: var(--sd-chip-input-max-count-color);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
 sd-chip-input .sd-chip-input__field {
   flex: 0 0 auto;
   display: inline-grid;
@@ -89,4 +97,46 @@ sd-chip-input .sd-chip-input__input[disabled] {
 }
 sd-chip-input .sd-chip-input__input::placeholder {
   color: var(--sd-chip-input-placeholder-color);
+}
+sd-chip-input .sd-chip-input__suggestions {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: white;
+  border-radius: var(--sd-chip-input-suggestions-radius);
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
+  max-height: var(--sd-chip-input-suggestions-max-height);
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  outline: none;
+}
+sd-chip-input .sd-chip-input__suggestion-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sd-chip-input-suggestion-gap);
+  padding: var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);
+  font-size: var(--sd-chip-input-suggestion-font-size);
+  line-height: var(--sd-chip-input-suggestion-line-height);
+  font-weight: var(--sd-chip-input-suggestion-font-weight);
+  font-family: var(--sd-chip-input-suggestion-font-family);
+  color: var(--sd-chip-input-suggestion-color);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+sd-chip-input .sd-chip-input__suggestion-item--active {
+  background: var(--sd-chip-input-suggestion-bg-hover);
+  color: var(--sd-chip-input-suggestion-color-hover);
+  font-weight: var(--sd-chip-input-suggestion-font-weight-selected);
+}
+sd-chip-input .sd-chip-input__suggestions-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: var(--sd-chip-input-suggestions-empty-font-size);
+  line-height: var(--sd-chip-input-suggestions-empty-line-height);
+  font-family: var(--sd-chip-input-suggestion-font-family);
+  color: var(--sd-chip-input-suggestions-empty-color);
 }