npm - @sellmate/design-system - Versions diffs - 1.0.66 → 1.0.68 - Mend

@sellmate/design-system 1.0.66 → 1.0.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (408) hide show

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

@@ -1,24 +1,18 @@
 import { h, Fragment } from "@stencil/core";
+import { PAGINATION_LAYOUT, PAGINATION_TYPOGRAPHY, PAGINATION_COLORS, } from "./sd-pagination.config";
+const PER_PAGE = 10;
 const BUTTON_WIDTH = {
-    1: 26,
-    2: 36,
-    3: 42,
-    4: 50,
-    5: 58,
+    1: 24,
+    2: 34,
+    3: 40,
+    4: 48,
+    5: 56,
 };
-const PER_PAGE = 10;
 export class SdPagination {
     currentPage = 1;
     lastPage = 1;
     simple = false;
     pageChange;
-    get paginationClasses() {
-        const classes = ['sd-pagination'];
-        if (this.simple) {
-            classes.push('sd-pagination--simple');
-        }
-        return classes.join(' ');
-    }
     get pageNumbers() {
         const start = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
         const end = Math.min(start + PER_PAGE - 1, this.lastPage);
@@ -29,51 +23,73 @@ export class SdPagination {
         const maxPageLength = lastPageNum.toString().length;
         return BUTTON_WIDTH[maxPageLength] || BUTTON_WIDTH[1];
     }
-    handlePageChange(page) {
+    get isFirstGroup() {
+        return this.currentPage <= PER_PAGE;
+    }
+    get isLastGroup() {
+        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
+        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
+    }
+    handlePageChange = (page) => {
         if (page < 1 || page > this.lastPage)
             return;
         this.currentPage = page;
         this.pageChange.emit(page);
-    }
-    handleGroupChange(direction) {
+    };
+    handleGroupChange = (direction) => {
         const delta = direction === 'forward' ? PER_PAGE : -PER_PAGE;
         const newPage = Math.min(Math.max(this.currentPage + delta, 1), this.lastPage);
         this.handlePageChange(newPage);
-    }
-    get isFirstGroup() {
-        return this.currentPage <= PER_PAGE;
-    }
-    get isLastGroup() {
-        const startPageGroup = Math.floor((this.currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
-        return startPageGroup + PER_PAGE - 1 >= this.lastPage;
+    };
+    renderNavButton(iconName, ariaLabel, onClick) {
+        return (h("button", { type: "button", class: "sd-pagination__nav", "aria-label": ariaLabel, onClick: onClick }, h("sd-icon", { name: iconName, size: PAGINATION_LAYOUT.iconSize, color: PAGINATION_COLORS.iconDefault })));
     }
     renderPrevButtons() {
         if (this.simple) {
             if (this.currentPage <= 1)
                 return null;
-            return (h(Fragment, null, h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to previous page", onClick: () => this.handlePageChange(this.currentPage - 1) }, h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
-        }
-        if (!this.isFirstGroup) {
-            return (h(Fragment, null, h("button", { "aria-label": "Go to first page", onClick: () => this.handlePageChange(1) }, h("sd-icon", { name: "chevronLeftEnd", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to previous page group", onClick: () => this.handleGroupChange('backward') }, h("sd-icon", { name: "arrowLeft", size: "12", color: "#222222" }))));
+            return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page', () => this.handlePageChange(this.currentPage - 1))));
         }
+        if (this.isFirstGroup)
+            return null;
+        return (h(Fragment, null, this.renderNavButton('chevronLeftEnd', 'Go to first page', () => this.handlePageChange(1)), this.renderNavButton('chevronLeft', 'Go to previous page group', () => this.handleGroupChange('backward'))));
     }
     renderNextButtons() {
         if (this.simple) {
             if (this.currentPage >= this.lastPage)
                 return null;
-            return (h(Fragment, null, h("button", { "aria-label": "Go to next page", onClick: () => this.handlePageChange(this.currentPage + 1) }, h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
-        }
-        if (!this.isLastGroup) {
-            return (h(Fragment, null, h("button", { "aria-label": "Go to next page group", onClick: () => this.handleGroupChange('forward') }, h("sd-icon", { name: "arrowRight", size: "12", color: "#222222" })), h("button", { "aria-label": "Go to last page", onClick: () => this.handlePageChange(this.lastPage) }, h("sd-icon", { name: "chevronRightEnd", size: "12", color: "#222222" }))));
+            return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page', () => this.handlePageChange(this.currentPage + 1)), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
         }
+        if (this.isLastGroup)
+            return null;
+        return (h(Fragment, null, this.renderNavButton('chevronRight', 'Go to next page group', () => this.handleGroupChange('forward')), this.renderNavButton('chevronRightEnd', 'Go to last page', () => this.handlePageChange(this.lastPage))));
     }
     render() {
-        return (h("div", { key: '5136947eb1aa1539d240af359eec8763d708906b', class: this.paginationClasses }, h("div", { key: '3114f336a27b4f3bf6249fd82649b9d21831a57a', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
-                'pagination-btn': true,
-                'pagination-btn--selected': this.currentPage === n,
-            }, disabled: this.currentPage === n, style: {
-                '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'a85d2e89389d2638e797873e18717d1079a8b156', class: "append-btns" }, this.renderNextButtons())));
+        const cssVars = {
+            '--sd-pagination-height': PAGINATION_LAYOUT.height,
+            '--sd-pagination-padding-x': PAGINATION_LAYOUT.paddingX,
+            '--sd-pagination-radius': PAGINATION_LAYOUT.radius,
+            '--sd-pagination-gap': PAGINATION_LAYOUT.gap,
+            '--sd-pagination-move-gap': PAGINATION_LAYOUT.moveGap,
+            '--sd-pagination-font-family': PAGINATION_TYPOGRAPHY.fontFamily,
+            '--sd-pagination-font-size': PAGINATION_TYPOGRAPHY.fontSize,
+            '--sd-pagination-line-height': PAGINATION_TYPOGRAPHY.lineHeight,
+            '--sd-pagination-font-weight-default': PAGINATION_TYPOGRAPHY.fontWeightDefault,
+            '--sd-pagination-font-weight-selected': PAGINATION_TYPOGRAPHY.fontWeightSelected,
+            '--sd-pagination-content': PAGINATION_COLORS.contentDefault,
+            '--sd-pagination-content-hover': PAGINATION_COLORS.contentHover,
+            '--sd-pagination-content-selected': PAGINATION_COLORS.contentSelected,
+            '--sd-pagination-bg-hover': PAGINATION_COLORS.bgHover,
+            '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
+            '--sd-pagination-item-width': `${this.buttonWidth}px`,
+        };
+        return (h("div", { key: '1f6d3909c5c7f17701c405f058bf999020d9424e', class: {
+                'sd-pagination': true,
+                'sd-pagination--simple': this.simple,
+            }, style: cssVars }, h("div", { key: '9faaf4f1033e406ecaad7ed593a1610bb7002631', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+                'sd-pagination__item': true,
+                'sd-pagination__item--selected': this.currentPage === n,
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'c8d21679938032bee223f6dfefff3a87dc5badec', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -43,14 +43,14 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'e953f3dfbc34a7e6b4eee3b90bd9344d4ef7d8a2' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: '23128c3d7b03a236026a1557c441ff1ddaae7033', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: '620f97e29104979fd203f943bb516ea31696d737', class: {
+        return (h(Fragment, { key: '32e3a11baabd4f4fc8c570311b99b2113e4ce3b0' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: '8139e72f293319e4d5ed3fe67d4f47a03743b437', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: 'fdb76f4a9a54be08fdf0d352ff389453840c4789', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: '027cd73af66a6a5161361625502496f8c9183e9d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '0db7efc9eaaecd48af55f7b46fa1c90eb0027d86' })), h("div", { key: 'd007d9041093593b155df32d1f6420f401baf1fa', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '0746608da07343147896c59a9e8e27e15cd9fae2', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '76a1c19fe4871a7a0d5bd6fc2ee5228453aab5f2', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'ccfdc3a653b9a6fb0ea8ffb8dcb538638ae83e33', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("sd-ghost-button", { key: '6b53a200fdab5175b8346e1b916677a02a4ac0ad', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
+            } }, h("i", { key: '94cb19bdf7182cd311800ac4d3fdf49c61db75fb', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '67394b2b751c485fc7198a10d54df2659c6f222b' })), h("div", { key: '1d6e143a931c24f28ef68afbfe7b84e73d3288db', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '33d47a87e6cab23131f360f7ea07809cec942ec0', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '28006b8958d1921eefa42c6282b8e735ae3e9367', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '574604775790aa49591848eb5f86ca0c6735558f', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("sd-ghost-button", { key: '027260d65fc575f480ce23e081b8b80ac8a1daea', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SdPortal {
     parentRef = null;
     offset = [0, 4];
     viewportPadding = 0;
-    zIndex = 10000;
+    zIndex = 998;
     open = false;
     close;
     container;
@@ -51,7 +51,7 @@ export class SdPortal {
             position: 'absolute',
             top: '0',
             left: '0',
-            zIndex: (this.zIndex ?? 10000).toString(),
+            zIndex: (this.zIndex ?? 998).toString(),
             opacity: '0',
             transition: 'opacity 0.15s ease-out',
             boxSizing: 'border-box',
@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '7213237baa73430dbf3d01aeb6f7a3e5fe173ecb' });
+        return h("slot", { key: '394cce939280a171c13e875eaead3fbdd0163d5b' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {
@@ -329,7 +329,7 @@ export class SdPortal {
                 "setter": false,
                 "reflect": false,
                 "attribute": "z-index",
-                "defaultValue": "10000"
+                "defaultValue": "998"
             },
             "open": {
                 "type": "boolean",

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

@@ -33,10 +33,10 @@ export class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: '3afe47c0dd65ddb5a03c15591430febaa8947417', style: {
+        return (h("div", { key: 'b1c93dc549893b5a3ccef1ab9cea54ca8c9d8d44', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'd5bf1e43002f7b16f5b609e9b3cb7cc9d417a246', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '843cb8d0994831da375d26f0421d98dddb068128', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/collection/components/sd-radio/sd-radio.config.js CHANGED Viewed

@@ -4,6 +4,7 @@ export const RADIO_LAYOUT = {
     radius: radioTokens.radio.radius,
     borderWidth: radioTokens.radio.borderWidth,
     gap: radioTokens.radio.gap,
+    dotSize: radioTokens.radio.dot.size,
 };
 export const RADIO_TYPOGRAPHY = {
     fontSize: radioTokens.radio.typography.fontSize,
@@ -13,13 +14,13 @@ export const RADIO_TYPOGRAPHY = {
 export const RADIO_COLORS = {
     unchecked: {
         bg: radioTokens.radio.bg.default,
-        bgHover: radioTokens.radio.unchecked.bg.hover,
-        border: radioTokens.radio.unchecked.border.default,
-        borderHover: radioTokens.radio.unchecked.border.hover,
+        bgHover: radioTokens.radio.bg.hover,
+        border: radioTokens.radio.border.default,
+        borderHover: radioTokens.radio.border.hover,
     },
     checked: {
-        border: radioTokens.radio.checked.border.default,
-        dot: radioTokens.radio.checked.dot.default,
+        border: radioTokens.radio.border.active,
+        dot: radioTokens.radio.dot.default,
     },
     disabled: {
         bg: radioTokens.radio.bg.disabled,

package/dist/collection/components/sd-radio/sd-radio.css CHANGED Viewed

@@ -53,8 +53,8 @@ sd-radio .sd-radio--checked .sd-radio__circle::after {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 10px;
-  height: 10px;
+  width: var(--sd-radio-dot-size);
+  height: var(--sd-radio-dot-size);
   border-radius: 50%;
   background: var(--sd-radio-checked-dot);
 }

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

@@ -33,6 +33,7 @@ export class SdRadio {
             '--sd-radio-size': `${RADIO_LAYOUT.size}px`,
             '--sd-radio-border-width': `${RADIO_LAYOUT.borderWidth}px`,
             '--sd-radio-gap': `${RADIO_LAYOUT.gap}px`,
+            '--sd-radio-dot-size': `${RADIO_LAYOUT.dotSize}px`,
             '--sd-radio-font-size': `${RADIO_TYPOGRAPHY.fontSize}px`,
             '--sd-radio-line-height': `${RADIO_TYPOGRAPHY.lineHeight}px`,
             '--sd-radio-font-weight': RADIO_TYPOGRAPHY.fontWeight,
@@ -47,7 +48,7 @@ export class SdRadio {
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
             '--sd-radio-label-color': RADIO_COLORS.label,
         };
-        return (h("label", { key: '72b116f38c66acee8e68a839c3f062293d65129c', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: 'edcf50f09c198ae3fb993706dec757fd706fe0de', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: '49ce92b075290f8aca715466456f4b7cdf3017e2', class: "sd-radio__circle" }), this.label && h("span", { key: '99d2ce0d53daf5d8ef232f6984ef42e605a68541', class: "sd-radio__label" }, this.label)));
+        return (h("label", { key: '2b7819249e5070a22b626530011db4a8e56194f1', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '233699a7c3bc13708d43ca3719f61edf53836c83', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: 'eb665c5f8c6202b66b65b6b120f144970fba0a38', class: "sd-radio__circle" }), this.label && h("span", { key: '3d0db13e083bacb4cb7ace9129fcfcd61f18dfc7', class: "sd-radio__label" }, this.label)));
     }
     static get is() { return "sd-radio"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-radio-button/sd-radio-button.js CHANGED Viewed

@@ -67,7 +67,7 @@ export class SdRadioButton {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (h("div", { key: '05bda776e2747aca3d7fca0286e3fa4062d7669b', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: 'f4ac83797b2661b0c2a612674911cbb0e41350a6', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));

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

@@ -53,8 +53,8 @@ sd-radio .sd-radio--checked .sd-radio__circle::after {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 10px;
-  height: 10px;
+  width: var(--sd-radio-dot-size);
+  height: var(--sd-radio-dot-size);
   border-radius: 50%;
   background: var(--sd-radio-checked-dot);
 }

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

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

package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.js CHANGED Viewed

@@ -144,10 +144,10 @@ export class SdSelectDropdown {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (h("div", { key: 'fdfad8ab2f1f6a26da8ad0ca0dcd17bfed7dcf9d', class: {
+        return (h("div", { key: '4d593edbf6e4480e171963aad54ceb2f489f189b', 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: '74cfba89d85a980c6c8074150bdba91387b9c115', 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: 'ecea9b4ba816c6b0dcc8303f957f4b297251f65c', 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 CHANGED Viewed

@@ -24,7 +24,7 @@ export class SdSelectOption {
         }
     };
     render() {
-        return (h("div", { key: '1366665f3ca8c37b23e6b6e9cfc5293c48ed5ed3', class: {
+        return (h("div", { key: '02e314232067bfb8f9bd882c01ae1462fa492cbf', 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 CHANGED Viewed

@@ -16,17 +16,17 @@ export class SdSelectSearchInput {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (h("div", { key: '36003b7e0e7d8a3df224b18257d4d6b1712d47da', class: {
+        return (h("div", { key: '2629fd8c13f67bc89c3b66f5f8aa14f2fb2e5fcd', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, h("sd-input", { key: '3b6f80d033a7903cb8e3692a2eebe0ab991e8d68', 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: 'f49cccdb49d0b2b861b0836dd654b7ab353b48ce', 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: '7c453e87ba6b384c5be7bb142697ba43c0d1a20b', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, h("sd-icon", { key: '773f5638821c73c20435f747c3dea5b6684b89eb', 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/sd-select.js CHANGED Viewed

@@ -142,7 +142,7 @@ export class SdSelect extends BaseDropdownEvent {
         }
     };
     render() {
-        return (h("sd-field", { key: 'd96961fe4c425c3f0fcb1c2f438c8b70c510b632', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '0113ffb76ea79cbe3b77dff85d8186a5b994e7b6', class: {
+        return (h("sd-field", { key: '106b7af5473549884afba275dfa86f6b354e9983', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'a200ea9e7409ed3f63e6ffa967c3171712598521', class: {
                 'sd-select': true,
                 'sd-select--disabled': this.disabled,
                 'sd-select--error': !!this.error,

package/dist/collection/components/sd-select-group/sd-select-group.js CHANGED Viewed

@@ -271,7 +271,7 @@ export class SdSelectGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: '1e6a0f9947f5d137bb65844fe666c07b4eefb2f7', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '62dcd2f37c2eda0e51f2e77de36ece6ab592c4ce', class: {
+        return (h("sd-field", { key: 'c3d2a4365ba2594d3e0dca138ff63a335171125c', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: 'b527250fecc69b8f5d4c88aa3f6090c2b291efc9', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

package/dist/collection/components/sd-select-multiple/sd-select-multiple.js CHANGED Viewed

@@ -151,7 +151,7 @@ export class SdSelectMultiple extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: 'f5dda40563661955aa194d841ca89628afd496cb', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '81541d9adabfea7c3af1c22ed419036f56e1a353', class: {
+        return (h("sd-field", { key: '92f9f1efeb25431700b376300ba8f21120456a68', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '48adb7f279b77d1637e6a1790d1448d7d7306a7a', 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-multiple-group.js CHANGED Viewed

@@ -393,7 +393,7 @@ export class SdSelectMultipleGroup extends BaseDropdownEvent {
         });
     }
     render() {
-        return (h("sd-field", { key: 'e7d00571a19a83e8d243d0c4f7433d931d4a2304', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '8c7288d853fed5bb829f1ef90af5e96a512c11b3', class: {
+        return (h("sd-field", { key: '8e0cfc89b55809d3c5b556fc5c59077c2c952ad5', label: this.label, labelWidth: this.labelWidth, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, h("div", { key: '852a713b4c38c4845c407cb04801d9b0c33f0515', class: {
                 'sd-select-multiple-group': true,
                 'sd-select-multiple-group--open': this.isOpen,
                 'sd-select-multiple-group--disabled': this.disabled,

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

@@ -39,7 +39,7 @@ export class SdSelectOptionGroup {
         }
     };
     render() {
-        return (h("div", { key: 'c1dd7d0232fff281261792ecb2137a1f09bc364d', class: {
+        return (h("div", { key: '748c32883a0262612daf9bafc0617563c77254f8', 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: 'a8ce6f2c13ea558413e61426dfbaa75e616f5687', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '3c53ea6005aa1288a4eae148bd9d6ed4573f0404', 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: '5a8f15864a69887a7d2e2ec5b18b96b1f7bde809', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '202f92f4aac644802a58354d08b29451c9af863f', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: 'c28aea2bf78120a42d6884c322cc2cf77713a6cb', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '6a51641a8c9da9957f1428a721de9ce2a1a2a86b', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'f9dc667e7d251a5efcf7391ec4f533a5e21276c9', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '2cd863d5bbdb1a9b5312c6eb7aa3be08a2093460', 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-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.css CHANGED Viewed

@@ -29,8 +29,8 @@ sd-select-v2-list-item .sd-select-v2-list-item--focused.sd-select-v2-list-item--
   color: var(--list-item-color-hover);
 }
 sd-select-v2-list-item .sd-select-v2-list-item--selected:not(.sd-select-v2-list-item--group) {
-  font-weight: 700;
-  color: var(--list-item-bg-hover);
+  font-weight: var(--list-item-font-weight-selected);
+  color: var(--list-item-color-selected);
 }
 sd-select-v2-list-item .sd-select-v2-list-item--selected.sd-select-v2-list-item--focused {
   color: var(--list-item-color-hover);

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js CHANGED Viewed

@@ -60,11 +60,13 @@ export class SdSelectV2ListItem {
             '--list-item-color': LIST_ITEM_COLORS.content.default,
             '--list-item-color-hover': LIST_ITEM_COLORS.content.hover,
             '--list-item-color-disabled': LIST_ITEM_COLORS.content.disabled,
+            '--list-item-color-selected': LIST_ITEM_COLORS.content.selected,
+            '--list-item-font-weight-selected': LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
         };
         if (isDepth1Group) {
             cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: '2c6431785cccc79e4ce7eb0252877f18e799bb03', class: {
+        return (h("div", { key: 'ad8ea94f02d9e114915e4115237aed32d89e93d9', class: {
                 'sd-select-v2-list-item': true,
                 'sd-select-v2-list-item--group': isGroup,
                 'sd-select-v2-list-item--depth1-group': isDepth1Group,
@@ -74,7 +76,7 @@ export class SdSelectV2ListItem {
                 'sd-select-v2-list-item--focused': this.isFocused,
                 'sd-select-v2-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-v2-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '88751dff8393de63ff2762bf6a52f685b478cbe2', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '09d711dbd6181ac2da194813cd8d298061428c8e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '8d0e113be506cfefa1994ee8a43efa7b6f09c707', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'c3c5be89457efbd465ebcb89e304aaefaa85e245', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-v2-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: 'ce5b528ec88cd6c862fe0df36cf1b46f054bcc0e', class: "sd-select-v2-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: 'e0120384115bb93819675335a574aeb072d0232c', class: "sd-select-v2-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-v2-list-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js CHANGED Viewed

@@ -41,15 +41,15 @@ export class SdSelectV2ListItemSearch {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '10f081acd51cad3b6632b2afcd5017c02fe2ed57', class: {
+        return (h("div", { key: '77b7f0742212b03108d5da3a1384766bc58da3ce', class: {
                 'sd-select-v2-list-item-search': true,
                 'sd-select-v2-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: '585f29e2826841874e88ce01fa08306cffb39033', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: 'fe3d85e03b2e7302102babd3736e7aea0b08fcee', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: '62913d0721cf6171bc7dc52fb6548410fa87527e', ref: el => {
+            } }, h("div", { key: 'bf2086a00ca7924c3b13b28b056a1ee2351cce3d', class: "sd-select-v2-list-item-search__inner" }, h("sd-icon", { key: '471c08d7b293003958e1e0be9c4521b8663c860b', name: "search", size: 16, color: "grey_70", class: "sd-select-v2-list-item-search__icon" }), h("input", { key: 'b17d8610b73c3701711b5def9b34320156c5f554', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '986ea74f6b02e65f138665f2afd19fa10f7f430a', type: "button", class: {
+            }, type: "text", class: "sd-select-v2-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: '5b8c48df700862476b37b7c24741ee0f9b284c02', type: "button", class: {
                 'sd-select-v2-list-item-search__clear': true,
                 'sd-select-v2-list-item-search__clear--hidden': !this.searchText,
-            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, h("sd-icon", { key: '344bbbb25eab6a6a3f4cce5cde8d9a10e9b13f25', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText ? 0 : -1, "aria-hidden": this.searchText ? 'false' : 'true' }, h("sd-icon", { key: 'cbcec76b7eb4e400e7154cc652512a36c0660d45', name: "close", size: 12, color: "#888888" })))));
     }
     static get is() { return "sd-select-v2-list-item-search"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.css CHANGED Viewed

@@ -1,7 +1,7 @@
-sd-select-v2-listbox {
+:host {
   display: block;
 }
-sd-select-v2-listbox .sd-select-v2-listbox {
+:host .sd-select-v2-listbox {
   display: flex;
   flex-direction: column;
   width: var(--listbox-trigger-width);
@@ -13,13 +13,13 @@ sd-select-v2-listbox .sd-select-v2-listbox {
   overflow: hidden;
   outline: none;
 }
-sd-select-v2-listbox .sd-select-v2-listbox__list {
+:host .sd-select-v2-listbox__list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding-bottom: var(--listbox-padding-bottom);
+  padding-bottom: 0;
 }
-sd-select-v2-listbox .sd-select-v2-listbox__empty {
+:host .sd-select-v2-listbox__empty {
   padding: 12px;
   text-align: center;
   font-size: 12px;

package/dist/collection/components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js CHANGED Viewed

@@ -281,13 +281,13 @@ export class SdSelectV2Listbox {
             '--listbox-max-width': this.maxWidth,
             '--listbox-max-height': this.maxHeight,
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
-            '--listbox-padding-bottom': `${LIST_BOX_LAYOUT.paddingBottom}px`,
         };
-        return (h("div", { key: 'd3f41c72aa6d013efff695f2435e72482f25a28f', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: '6586d230d0eb3466cf30d644b3ebe94482e91847', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '9de0cfc6d458f48a3770fa61dfc019411cfd96bb', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: 'ca3d529a4a20f394de1358cc0627c730843a8cf9', class: "sd-select-v2-listbox", style: cssVars }, this.showSearch && (h("sd-select-v2-list-item-search", { key: 'e7c421d676c6a94cc31b0df69a489818b26563e3', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'f3f44e6df1fc8faf71c607cc0efb0d891dcbfb3d', class: "sd-select-v2-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
             } }, this.isEmpty ? (h("div", { class: "sd-select-v2-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-v2-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 is() { return "sd-select-v2-listbox"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["sd-select-v2-listbox.scss"]

package/dist/collection/components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js CHANGED Viewed

@@ -28,11 +28,11 @@ export class SdSelectV2Trigger {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '906bfdacc9ec8028d61335dd8a6eb9fa887ccd2d', class: {
+        return (h("div", { key: '4b3f60a4bd00423337ebd472a628bc67f0a5d55c', class: {
                 'sd-select-v2-trigger': true,
                 'sd-select-v2-trigger--open': this.isOpen,
                 'sd-select-v2-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, h("div", { key: '3688fb32fbc996ce423a92007d1208b950f7baba', class: "sd-select-v2-trigger__content" }, h("span", { key: '1c38cf28cb536aa93541e1bfd0b3736ba8b59782', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: '9bfc7681e142766eeaa42dd801c8ff88dec61861', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, style: cssVars, onClick: this.handleClick }, h("div", { key: '8a6f9aa132aa6db4ba9035b3b97f91b4f29fa475', class: "sd-select-v2-trigger__content" }, h("span", { key: '3fb8fa054682eefc604623da9ecb906581cf1661', class: "sd-select-v2-trigger__text" }, hasValue ? this.displayText : this.placeholder), h("sd-icon", { key: 'c6ae918c442452018513a144a6f14613a49dedd4', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-v2-trigger__icon': true,
                 'sd-select-v2-trigger__icon--open': this.isOpen,
             } }))));

package/dist/collection/components/sd-select-v2/sd-select-v2.config.js CHANGED Viewed

@@ -47,9 +47,10 @@ export const LIST_ITEM_LAYOUT = {
     gap: listItemTokens.listItem.gap,
 };
 export const LIST_ITEM_TYPOGRAPHY = {
-    fontSize: listItemTokens.listItem.typography.fontSize,
-    lineHeight: listItemTokens.listItem.typography.lineHeight,
-    fontWeight: listItemTokens.listItem.typography.fontWeight,
+    fontSize: listItemTokens.listItem.typography.default.fontSize,
+    lineHeight: listItemTokens.listItem.typography.default.lineHeight,
+    fontWeight: listItemTokens.listItem.typography.default.fontWeight,
+    selectedFontWeight: listItemTokens.listItem.typography.selected.fontWeight,
 };
 export const LIST_ITEM_COLORS = {
     bg: {
@@ -60,6 +61,7 @@ export const LIST_ITEM_COLORS = {
         default: listItemTokens.listItem.content.default,
         hover: listItemTokens.listItem.content.hover,
         disabled: listItemTokens.listItem.content.disabled,
+        selected: listItemTokens.listItem.content.selected,
     },
     depth1: {
         bg: listItemTokens.listItem.depth1.bg.default,
@@ -76,7 +78,6 @@ export const LIST_ITEM_COLORS = {
 // ── ListBox Tokens ──
 export const LIST_BOX_LAYOUT = {
     radius: listBoxTokens.listBox.radius,
-    paddingBottom: listBoxTokens.listBox.paddingBottom,
 };
 // ── Constants ──
 export const SEARCH_THRESHOLD = 11;

package/dist/collection/components/sd-select-v2/sd-select-v2.js CHANGED Viewed

@@ -207,13 +207,13 @@ export class SdSelectV2 {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: 'c9f08598c8f9852ab4000f056621dfef238e16de', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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 (h("sd-field", { key: 'ffca1287cefaeedf867a6b86a752942a1c8d1703', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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;
-            } }, h("div", { key: '302103a425963e5d577b01ad179d5af82e6f30b1', class: "sd-select-v2", ref: el => {
+            } }, h("div", { key: 'f53f38543b165040eb48236e2a25e43b78444350', class: "sd-select-v2", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-v2-trigger", { key: 'a22bca400e5d10ee29e569da04d36b9291a1dade', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '0df4ad35bb284298708a0c1e11ce0e3c28d16ed8', ...portalProps }, h("sd-select-v2-listbox", { key: '90c18612d553342be091a30e05194bab91407c76', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            } }, h("sd-select-v2-trigger", { key: 'afd60ef0b492d9179318a5187565b45a58ef1ed5', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'e482c1fffc24e893fe1c04f136a116bac6c1b2e9', ...portalProps }, h("sd-select-v2-listbox", { key: 'c864fdef604eee7cea7c946de970e78b59e8b0da', name: this.name, options: this.options, value: this.value, emitValue: this.emitValue, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select-v2"; }
     static get originalStyleUrls() {