@sellmate/design-system 1.0.75 → 1.0.77

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const toast = {
 	icon: "16",
@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: 'd4b73e2503514143f5174bc8859baf0e59c2f8da', style: {
+        return (index.h("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: '7334daee691fb03a1005c2afac64033554489046', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '297ada835b0710bf43a936b02e53b0873b7f4af3', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'b5bc4716df28231dc7af15db63595ae9044189b5', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'd0239c8f8b495fbdaedad0f65a6d0a0edfaada60', class: "sd-toast__content" }, index.h("span", { key: 'dc70d403673bb8f99cfd91393054a86bf17e5ac2', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '1a76bcee482720693b501d3a13c54e720bbe44fc', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: 'a8dc3c15cabf5ca4e075e75c4fb2744dd5da4fa0', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '68362fac26744fc7e805a18c589f4aff5845edc1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '8ec7941b469b6d0242ab68b7928a9dbf6e75bb5f', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'c057a100de91cecc3435bfa6a95c928727eb1836', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '21e84dd6cdf7efa52611da532a0983268c7c2cb2', class: "sd-toast__content" }, index.h("span", { key: '99c370fe3d4a54103fbccef395afadf2923f3613', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '3ce7109c2d1f5cd03f4fcc6bb01ede14c6400734', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: '2cf982fd1fe538533ceff61bbdecdacd2d69e51c', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const toggle = {
 	height: "28",
@@ -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: 'fe56ffe876ccc859536ca74703e0870ad97e1668', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'f473fd71c03d0e4e3e8fb354753d769033f148f2', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{system-BbCUNhDJ.js → system-DRemSdU1.js}

@@ -9,7 +9,13 @@ const color = {
 		secondary: "#555555",
 		tertiary: "#888888",
 		inverse: "#FFFFFF"
-	}};
+	},
+	blue: {
+		strong: "#0075FF"},
+	darkblue: {
+		strong: "#006AC1"},
+	grey: {
+		strong: "#737373"}};
 var systemTokens = {
 	color: color
 };

package/dist/cjs/{tooltipArrow-DuANjCfc.js → tooltipArrow-BEff0q3z.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/collection/collection-manifest.json

@@ -11,28 +11,26 @@
     "components/sd-radio/sd-radio.js",
     "components/sd-radio-button/sd-radio-button.js",
     "components/sd-radio-group/sd-radio-group.js",
-    "components/sd-select/sd-select.js",
-    "components/sd-select-multiple-group/sd-select-multiple-group.js",
-    "components/table-test/table-test.js",
     "components/sd-action-modal/sd-action-modal.js",
+    "components/sd-ghost-button/sd-ghost-button.js",
+    "components/sd-button-v2/sd-button-v2.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
-    "components/sd-button-v2/sd-button-v2.js",
     "components/sd-card/sd-card.js",
     "components/sd-chip/sd-chip.js",
     "components/sd-circle-progress/sd-circle-progress.js",
     "components/sd-confirm-modal/sd-confirm-modal.js",
+    "components/sd-icon/sd-icon.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-picker/sd-date-picker-calendar/sd-date-picker-calendar.js",
-    "components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.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-dropdown-button/sd-dropdown-button.js",
     "components/sd-field/sd-field.js",
+    "components/sd-dropdown-button/sd-dropdown-button.js",
     "components/sd-file-picker/sd-file-picker.js",
     "components/sd-floating-portal/sd-floating-portal.js",
-    "components/sd-ghost-button/sd-ghost-button.js",
-    "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
     "components/sd-linear-progress/sd-linear-progress.js",
     "components/sd-loading-container/sd-loading-container.js",
@@ -40,18 +38,11 @@
     "components/sd-modal-container/sd-modal-container.js",
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
-    "components/sd-progress/sd-progress.js",
-    "components/sd-select/sd-select-dropdown/sd-select-dropdown.js",
-    "components/sd-select/sd-select-option/sd-select-option.js",
-    "components/sd-select/sd-select-search-input/sd-select-search-input.js",
-    "components/sd-select-group/sd-select-group.js",
-    "components/sd-select-multiple/sd-select-multiple.js",
-    "components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js",
-    "components/sd-select-v2/sd-select-v2.js",
-    "components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js",
-    "components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js",
-    "components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js",
-    "components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js",
+    "components/sd-select/sd-select.js",
+    "components/sd-select/sd-select-trigger/sd-select-trigger.js",
+    "components/sd-select/sd-select-list-item/sd-select-list-item.js",
+    "components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js",
+    "components/sd-select/sd-select-listbox/sd-select-listbox.js",
     "components/sd-switch/sd-switch.js",
     "components/sd-table/sd-table.js",
     "components/sd-table/sd-tbody/sd-tbody.js",
@@ -59,7 +50,6 @@
     "components/sd-table/sd-thead/sd-thead.js",
     "components/sd-table/sd-tr/sd-tr.js",
     "components/sd-tabs/sd-tabs.js",
-    "components/sd-tag/sd-tag.js",
     "components/sd-text-link/sd-text-link.js",
     "components/sd-textarea/sd-textarea.js",
     "components/sd-toast/sd-toast.js",

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -39,7 +39,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: 'c8fdd9cdb0ce6850b900744f087ace5739b13e1f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'a8ba3d0c496f7fbf0291818c5136e466dfbe3cab', class: "sd-action-modal__header" }, h("h2", { key: 'df021377c4368ecf2316a019dbf3126923912ea2', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '19f226d875e53f12192975165f6c0686120692c1', class: "sd-action-modal__header-sub" }, h("slot", { key: '859a677df07d6d869fbebcadfa59aab54da08cab', name: "header-sub-title" })), h("sd-ghost-button", { key: '3fab2e805587a3bfe450696a568c67ff08a7920a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '94911045fe85bd87a9c2ba84ae2e8ff57b1f91ad', class: "sd-action-modal__body" }, h("slot", { key: '12430e8a43dbe76fde667b2ac5b79fa5fae89248', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'd90243f5ce989e19e8f1f2b0d4dbab426908d706', class: "sd-action-modal__footer" }, h("div", { key: '512b80f97adbe1ba36805418476ff2e611855338', class: "sd-action-modal__footer-sub" }, h("slot", { key: '9ee6b21a2e004074f1e468893ae5831eb440501b', name: "bottom-sub-content" })), h("sd-button-v2", { key: '48bd4e35cc5ae630989d057f41df028824e9da78', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '8aa9962dd66af45cbb9f7a16e087b8e5553692b5', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'fe47461827e9ded9a055134869744b9ae57be7bd', class: "sd-action-modal__header" }, h("h2", { key: '911619c8669b1ea109bdc35aa8c6850eade4c49e', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'af2959f85fbedaa0f2f04d3c0bfb110338ab7c30', class: "sd-action-modal__header-sub" }, h("slot", { key: '21801f18cce8eb0fec750ed4dbbe7eb78b6bba89', name: "header-sub-title" })), h("sd-ghost-button", { key: '6b3cbb9f3bc8566bde5a3245384bab03b71ba41f', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '0fb3e066792e018282644123978bb395a56cdf66', class: "sd-action-modal__body" }, h("slot", { key: 'ba8436ff647e422602b92ba982145e4db9366b1e', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '72a21271d7f9301d3bb4e6beb8f66b33b85554e2', class: "sd-action-modal__footer" }, h("div", { key: 'b53076fddc6a11bd64ff27bdf63577cc6f22c4bf', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'bdea9bd98cd8e5a3f0fec66c7d1424b86c7995d5', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'c2a222662a5f06dfc18928059e68837ddb0b5e95', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '6050de370a7c9cbad2c4eb2d9e19180d54bcf64f', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '34c8fdf04e61f9fb16b651764e4cb13b2c6ec0c5', class: "sd-badge__dot" }), h("div", { key: '03ceee1c7d54589dfa61aef8e80be5799a816a66', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: '3737fa6c3023e7adaaf3ae4086efe6d9acadcb67', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'f13d60974520124abeb4fcd49fed638002674267', class: "sd-badge__dot" }), h("div", { key: '29c528444f3e4e4b41315586f7d31e2e828400df', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: 'c537aef39f971023f90d7d0d7ad6cb6819b06b48', 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, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '2ca7874dd2d9965f3246746a6f0311ce6cc6fe8e', class: "sd-barcode-input__content" }, h("slot", { key: 'dfed2f18620c5ee6902e1f2083b2e046190ad852', name: "prefix" }), h("input", { key: '80dbd54234b7a1b0db8ae8b3165653f63e8c9039', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'd0b0c22126506e16b23ce9cce1a280366d7d4f4c', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '41ae6b492877ca5c3aa1083372878c9c41f694e3', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '359bac03c40af3bfc067957220124c00d0f542a1', 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, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '0512c6c4ba9f778c65d6aaf9fd441e66d3e09cf7', class: "sd-barcode-input__content" }, h("slot", { key: '47f7ff7b11b0f10a6f6efce02473c63a02ab9129', name: "prefix" }), h("input", { key: '3f9150a1f188339a9d119475070eb53bca76b61a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'e193c4921de2cd71962841745e163620b3eac436', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '4ca22273d2ef5c79d439c9469bf8dbef5439e685', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -62,13 +62,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon) !== Boolean(this.rightIcon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: '19a9be4f92af097e104f64e890203aab3f897c61', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: 'e3e2074fbe2b48117d5834efac7ff3036757aab3', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.color,
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '813e88dce8e00e983caa70da63fe7766ee115b68', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '31b6980a27ddbeff51b1f28e13b197164ab3175f', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '85737212b55b6d48c9c17312f0ae7a419298da4c', class: "sd-button-v2__label" }, this.label), this.rightIcon && (h("sd-icon", { key: 'ef8b914dec71d6857c26a26be74e63d9440a46de', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
+            }, onClick: this.handleClick }, h("span", { key: '90ea3bf42c9e16c836c6fdfdf26a74c8a848c31b', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'b9f4a1c42ae866aac1f65f4bbedb282ae0c10c72', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '5e5dfbabdbec86c2da625c6a70fcda10303d0e50', class: "sd-button-v2__label" }, this.label), this.rightIcon && (h("sd-icon", { key: 'f1c3a74b6d7e83fa755c97f83c6d97dea8411537', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '299b67c4e5a95d03c67bfe7a7cc13cfda642e494' }, h("div", { key: '44630cec810c1ee0cc6526764adbae866f3d68f0', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'bbcb7e2332b1772cff4fd3b132e6378f6fbc0832' }))));
+        return (h(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, h("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -70,6 +70,9 @@ export class SdCheckbox {
             valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
             newValue = Array.from(valueSet);
         }
+        else if (this.value === null) {
+            newValue = false;
+        }
         else {
             newValue = !this.isChecked;
         }
@@ -97,13 +100,13 @@ export class SdCheckbox {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '1a1c4dac0a2ce24ae51ce0baba74a7add387aa2f', class: this.checkboxClasses, style: cssVars }, h("input", { key: '4a45bc9bbaaf6ddaebf3445045ab7b1f789f81d5', type: "checkbox", ref: el => {
+        return (h("label", { key: '0e4a142753f8ceda6356c184f1f227e9f11b8a43', class: this.checkboxClasses, style: cssVars }, h("input", { key: '53f7bac2fbc2c197ddcc2bb3cd0779598155af4c', type: "checkbox", ref: el => {
                 this.inputEl = el;
-            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '7d8ae7276470bf4543cdee1a0b25793f07d23c66', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '0725d9e2ed16bec52b6340c9633ffed021558560', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: 'd791d977073b0916917c7ce770cf73c1ff81f3bd', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: 'dcb8b972e88aa06d0a338ce8d2e2b86a0fbd8f3f', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

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

@@ -205,7 +205,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '7d84dd478510c7e144fd049028f2f0a70a909016', class: {
+        return (h("span", { key: 'a821268b6bc2d04bd311b238009b750424e04e72', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

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

@@ -27,7 +27,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, h("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-confirm-modal/sd-confirm-modal.js

@@ -67,9 +67,9 @@ export class SdConfirmModal {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: 'e4fa59bb7bfb335bc16f4e13e49a10c517e2520c', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'ada7366093d2453dc354b534433647a07cecd632', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'a3578b9366349289866e312929f53cefe3b9fcd7', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'c1880435ede221bfbfad4df31b222c486471d364', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '1f1edc065f2985c3ad9d3dd72db74a285474bc7a', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'a198f9d6d64f19919c11bb101a192e04043c7e6f', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '30b62d85ce7fe447643fbe19379cc39ccc44b9d0', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '4ef44b1b2a86914eae3fc59e3c383b12646d1d0c', class: "sd-confirm-modal" }, h("sd-ghost-button", { key: 'aa62624aaf76a23eb4f1d30b846e6054f3cf001c', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: 'd1329b8e71d455357790a4aa5f73547142830532', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '2c5e0f902327c5eb663e6ccc5057e22e2be11c03', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '1917ef85f9f06de3dd321d664d4022dd4a1524ff', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'afa7e6671f4849b7a90317664d07d3c04178c554', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'd4c06bfdd2222212b1cf8e3ec86ccaca4c394394', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '4d45291fafdd6dc5d70e69969cad5d3d7ea19bcc', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: 'f7ff30646b1bb772d8f41044fab5642408df25d5', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '1750bfe43e9d00ff8a46777000c4ed8728502bb5', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: 'ca0f57d4bdfe8f3a337de8dbe05b98e49e3f5a18', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '8af201f6b6b08991ba31db2f2e59ee44a7b10d50', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '733f478a57a68bd9d4cc6563558bc0fafbfa5b9a', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: 'a7be74a833fbd012d14e79b570a4d97e3a495a52', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), h("sd-button-v2", { key: 'e09be98a918aafd291a7b12c221b70e72ba14ab9', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-confirm-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js

@@ -133,7 +133,7 @@ export class SdDatePickerCalendar {
             '--calendar-day-font-weight': CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (h("div", { key: 'ac86be94b03ba15d7dfd885f96fb29a988468e30', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '64a116ef69725d8f51eed4b54ed0f73e1dc23f9d', class: "sd-date-picker-calendar__header" }, h("div", { key: 'f0372d3d91dc9d1917ada3677baa4841074d6e22', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: '133611ecd17975064fce932a6cc6c23478d93c3a', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: '4445d069e21ac31b46c62ee8d7c213b72c7f787c', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: '407f906335b31b5c70018f53a21d0e7d0cbc39ee', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: 'ddf5d7348d5833988b5a12ece9209624842e40ee', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: '19a362b93db20bfaf63b6f8552a60d9baf3d7c24', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '9618b3ebfadf65a7d8abfa8a7360b8fcccbf68b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: '2b989a40ad784a08f42a6571817431c028720564', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '60ab56cdfbd93e2cd0fa4453d44e540393ac5296', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: '337ad71a09089b1771e734aa591b243abe226d92', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: 'baf0ad26ee64044f0af3b8126efaafe94feba8a4', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+        return (h("div", { key: 'baeaf5925dd87084b4f22445cc2fa6fe879d8faf', class: "sd-date-picker-calendar", style: cssVars }, h("div", { key: '784e0bb6698dc097d8fa9b136ec8bc1d82cfe798', class: "sd-date-picker-calendar__header" }, h("div", { key: 'e42d77c2a1c5d7c23e058b111ed87d3d27c9b465', class: "sd-date-picker-calendar__nav-group" }, h("sd-ghost-button", { key: 'fd5573590ca5c7aaf5b07a594d65f4f168d526d7', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), h("span", { key: 'd8d2f3fcb2dca348c99f5a461260278ddf1ab16b', class: "sd-date-picker-calendar__label" }, this.currentYear), h("sd-ghost-button", { key: 'f134fdd299bcead5d9ce594355f1c58be057fbbe', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), h("span", { key: '14ab983354ded802bb715516872b0148acc3cd66', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), h("div", { key: 'f8b0754ff487c944cf95fcb2fd05c2ca596b3107', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, h("sd-ghost-button", { key: '47d95d368b04f1ff81c416d93ba3bb9a5481f3cb', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), h("span", { key: 'baf40a29a0aacd3c868c0ca63035c09080f412af', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), h("sd-ghost-button", { key: '4b8f189022d7c61072f07b23c5576410183bc801', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), h("div", { key: 'c6b4251396b957905e0462a62ca5b8475c375dd6', class: "sd-date-picker-calendar__week" }, WEEK_LABELS.map(label => (h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), h("div", { key: '76a1fe94ca8943f8cf0e7be30b8a9838a9cd22ef', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
             const isToday = cell.inCurrentMonth && today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);

package/dist/collection/components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js

@@ -31,10 +31,10 @@ export class SdDatePickerTrigger {
                 ? DATEPICKER_COLORS.icon.disabled
                 : DATEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '48f426459dfa50a5fab8e8e9c597b9a3c3f011c1', class: {
+        return (h("div", { key: 'f541c11d4e7385993628e10f0eeb7a339f80e1f6', class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: 'd5309ad89fe5232fea4a086784cfd28f920450c0', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '6885fdfce1384cc43cded08a40889edb15ba1108', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick }, h("sd-icon", { key: '19c51b2ae2dc354010f6727048fd7a64c17ed36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), h("span", { key: '73a6dd7cd398202edabecd348a4856315e077088', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
     static get is() { return "sd-date-picker-trigger"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-picker/sd-date-picker.js

@@ -92,9 +92,9 @@ export class SdDatePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '97dcd4d3065ba7c0fa587b3d533dcda82b87c188', 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, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '9c0a6874eb6fbf3e8a928048f189d3b139e385df', class: "sd-date-picker", ref: el => {
+        return (h("sd-field", { key: 'd55b2123cc862d5f12fdd429b02b622946b58cc4', 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, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '79e47e4e02e8b30dc2651a9c4aab3950a8662f52', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: 'e54065e86cb36c8abed1041a2d13edcbba861d8f', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '96c2aa277f54315ac2f6e29b861ebb94b3cc4f75', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: 'ea2513fb3d150a53895b6f657a7a6acc5541045f', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '7b09873b1e58aed36d4fb0dadb02d21ea6c2b309', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'fd60a9df30dfc459798a8e537acdf16ed9f94844', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-picker-calendar", { key: '0478f726cb51fe533b829f3eb0ce46d2fbf0ba94', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js

@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: 'b420e317ccefa8b143d781d916c0a60c8be15d2f' }, h("div", { key: 'ec537bf3ed58f6b18e80f885d78d8e5dcca7ecfe', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '70afdc7311c5707c6d639034fa14c6f5ca2aa3d2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: 'a400c8d9d3a0b1a4e13e7d4de004da550e91916f', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: 'acc32d9c349c4cee32bb923ce66d17122527b524' }, h("div", { key: 'bd579429ae609c3ff21a542bf69c1dc9a907846a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '8a46d922fcaa09bd7f778d00e77324d1710b92c7', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '8234838995f1e5d945f85169e702cb0b32018f36', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {

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

@@ -186,7 +186,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: '3a9e74c689c0345c89dbaeba5814164b72fe7108', class: "sd-dropdown-button" }, h("button", { key: '1633f3a0348082ec2433a6a1e7c41a64a797a725', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (h("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, h("button", { key: '4bd3e86eec90698188a834eb35ff922dee7d1855', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -196,10 +196,10 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: '7378e3aa3c4cf2991f3a92511f10ca1834af9563', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'd5b59ccaad1985e3a50bb9a53b0a156a1e2e28a9', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'a24ed74d95ac1866abf9f3ed7a1c4b7bfe2c56c8', class: {
+            } }, h("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '7cb8cf5665f3ee2e252f4c0471daee31f4af0c7b', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -2,14 +2,11 @@ import { h } from "@stencil/core";
 import fieldTokens from "../../tokens/generated/component.field.json";
 import { FIELD_ADDON_ALIGN_MAP, FIELD_LABEL_SIZE_MAP, } from "./sd-field.config";
 const FORM_PARENT_TAGS = [
-    'sd-select',
-    'sd-select-multiple',
-    'sd-select-multiple-group',
     'sd-input',
     'sd-barcode-input',
     'sd-textarea',
     'sd-number-input',
-    'sd-select-v2',
+    'sd-select',
     'sd-file-picker',
     'sd-date-picker',
     'sd-date-range-picker',
@@ -170,20 +167,20 @@ export class SdField {
                     : {}),
             }
             : {};
-        return (h("div", { key: '218df97b257b97f4801a31a11d4cf2072f981f07', class: {
+        return (h("div", { key: 'f7cec98818159adf5fd398bd15547ed1ec555092', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '66fb430b166850197649a46cd07068782636e932', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'f9dafcf19258a3253de84d35a7fd368d87232f95', class: "sd-field__main", style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '2d6ffefc9211137dc215686874060b1d5067031d', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '2163413b937af3c1874f41bc2581a0304b7d069a', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '1f4176fb04ba648fc2971904daa88974a4526868', class: {
+                : {} }, h("div", { key: '0dbb6cbe768bac1c64d72d37d270805e16936e24', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            } }, addon && h("div", { key: 'fd90999129ed8ab6b9870d73083048de8e8987f6', class: "sd-field__addon" }, addon), h("slot", { key: '9dbf3d99538016095c436619f9ad20f64fa20834' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && h("div", { key: '8b4bfbf6ad67084a0bc9c3ff6789936ad895e3c5', class: "sd-field__addon" }, addon), h("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -55,7 +55,7 @@ export class SdFilePicker {
         if (this.fileInputRef) {
             this.fileInputRef.value = '';
         }
-        await this.formField?.sdReset();
+        await this.formField?.sdResetValidation();
     }
     async sdResetValidate() {
         await this.formField?.sdResetValidation();

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

@@ -153,7 +153,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '2ee14400df156cb766c0f88b77bc232263b3c7e2' });
+        return h("slot", { key: '2383aafb9b01881f06e4fc97c5903c19453b8b4c' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -8,6 +8,11 @@ export class SdGhostButton {
     disabled = false;
     click;
     hasWarnedMissingAriaLabel = false;
+    componentWillLoad() {
+        this.size ??= 'sm';
+        this.intent ??= 'default';
+        this.ariaLabel ??= '';
+    }
     handleClick = (event) => {
         if (this.disabled) {
             event.preventDefault();
@@ -32,19 +37,19 @@ export class SdGhostButton {
     render() {
         const sizeConfig = GHOST_BUTTON_SIZES[this.size];
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
-            : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
+            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
+            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '34c5026b4819b624b19d1773bad413b689633c2a', class: {
+        return (h("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '063f7cfabfdbf0f4f2f4c1a2c811e6c3734d941f', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {

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

@@ -112,12 +112,12 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: 'ff73dfa4d23c7bf1a29f853d50e0d31bddb094ea', 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, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '0a986cccfbd55984a51676cbf5393634819e766d', class: "sd-input__content" }, h("slot", { key: '068bfd70601f3b191a51bb45ac02679acf99a069', name: "prefix" }), h("input", { key: '54dbd7b7e4bffcfa25b9d68800fb334c0dfa0da0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'c0e03839176c6612eb8b0532bce3341de3db90c3', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: '0019f58900c721c52216f7686b8b198f855c76ec', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'ff139feaafdaa57e012dc559ab1a0db26dfd97b0', 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, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '188f24de316b14315fa0bdf312c58140e757cfa3', class: "sd-input__content" }, h("slot", { key: '35d2213601e3c3508b7392096719d7841aebc6bb', name: "prefix" }), h("input", { key: '0148de670febb2bc02a95a3c6c4c1a6cee523626', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '4a8bd55a4cfd25f482b1fcabb84f8ffffbbc8072', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: '5c11a19971dceba378a4ea77f3f40d7b3d928214', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '63dbd526a1a9e67bd41483211bf9a005dc0dc93f', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: '92cb57b65e70a499c48e73f028e30715f1b1356c', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;

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

@@ -28,7 +28,7 @@ export class SdLinearProgress {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: '7a639f88907718e71692f08beaa4ff32a913990c', style: hostStyle }, h("div", { key: '0e9dc34a18d5497c67ce890e9976d98ff46a7cae', class: 'sd-linear-progress__track' }, h("div", { key: 'b06985fa70196b47046907bbf72f73518e731614', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'b7ca66daa73439d52243f21991131dd40704c018', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'c2a8886d6e8402c29607287ae3a1c489138b38ce', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '36024d7cfbe5c932821744fa30f6366bf7a75302', class: 'sd-linear-progress__label' }, this.label)));
+        return (h(Host, { key: 'c7f2324ff98e1ec6e0d1d6c7a3328dd383a1abab', style: hostStyle }, h("div", { key: 'cff100404519c4114c0dd1240715beafb91acf1f', class: 'sd-linear-progress__track' }, h("div", { key: '1c7fdff123778a40cd0c3f3310141ac369205352', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'ae0b515a9bb9d5561d603fa8e88c144603af8af5', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: '5d7cdf9daccd9729729bec7bc65456b5727d4738', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: 'd131eeb581e33f40878b47541f662aca269a6759', class: 'sd-linear-progress__label' }, this.label)));
     }
     static get is() { return "sd-linear-progress"; }
     static get originalStyleUrls() {

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

@@ -10,10 +10,10 @@ export class SdLoadingContainer {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: '14ae9c222f613129ac2819ee46b7dd0a248b93da', class: {
+        return (h("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'a84dca0f4d3582c041ee97965db92a1fff778bd4', class: "sd-loading-container__backdrop" }), h("div", { key: '9793e443e8371a30572ca9b185e0bcfb09d2d1e1', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '1ea2e88043ece1b7c6ff9fe210d7d765d738bbfa', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '20e8a1cd1205186ec419b164b9e4873eb37045ea', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '64631929afd47606df0d397747495d2a11d62932', class: "sd-loading-container__backdrop" }), h("div", { key: '4a304e0fb66f720b57da1e4de03fa9aa5468d5d4', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '3981cb8e994384279a812864037a8e9cec34cc35', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: '8adec0ef2424fa3ea30a58b27efa6344ada94070', class: "sd-loading-container__message" }, this.message)))));
     }
     static get is() { return "sd-loading-container"; }
     static get originalStyleUrls() {

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

@@ -42,7 +42,7 @@ export class SdLoadingModal {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (h(Host, { key: '3113deea33ae8f08ac631e53744c94dfc0ffe829', style: hostStyle }, h("div", { key: 'd6afa60fe2cf83bd1afd707e8aa218d2c66d761b', class: "sd-loading-modal" }, h("div", { key: 'be70c3adcbea4fca528f459ad7fbc33e82649073', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '9aa73a423423e093606e58796490be123e5fa52a', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: '59fd5cf61b53f1362974a7b92ad6e6319f141def', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '9bfe53124cd1f8a3008d8a2ccc6ea9d8af5d62c2', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (h(Host, { key: '4245588093d82ec791b4ba7260eb3a1314c0e7a8', style: hostStyle }, h("div", { key: '4ad4c57bf68a5e33b453ed5ebb19f590f2ff8a9d', class: "sd-loading-modal" }, h("div", { key: 'bd45817bad45b9cffc9917d5f6570cb7409e8703', class: "sd-loading-modal__content" }, this.state === 'loading' ? (h("sd-circle-progress", { indeterminate: true })) : (h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), h("div", { key: '16a09029e732058a4cdf0330e4afaf7322a88f76', class: "sd-loading-modal__message-wrapper" }, Array.isArray(this.resolvedMessage) ? (this.resolvedMessage.map(message => (h("p", { class: "sd-loading-modal__message" }, message)))) : (h("p", { class: "sd-loading-modal__message" }, this.resolvedMessage))), this.useButton && (h("div", { key: 'cdf9a51d233efcc86fa2405960f2ed304a07127b', class: "sd-loading-modal__button" }, h("sd-button-v2", { key: '36cd4b36d92fb725eb35a9d6bee7fd0c8fcf3395', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
     static get is() { return "sd-loading-modal"; }
     static get originalStyleUrls() {