@breadstone/mosaik-elements-svelte 0.1.71 → 0.1.73

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.1.73 (2026-08-09)
+
+This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.
+
+## 0.1.72 (2026-08-09)
+
+### 🚀 Features
+
+- **combo:** enhance styles and functionality across themes ([de2162bd87](https://github.com/RueDeRennes/mosaik/commit/de2162bd87))
+
 ## 0.1.71 (2026-08-06)
 
 ### 🚀 Features

package/index.mjs

@@ -37192,7 +37192,7 @@ var GD = (e) => {
 		(this.host.shadowRoot?.querySelector("[part=\"label\"]"))?.classList.toggle("floating", this.shouldFloat());
 	}
 	hasValue() {
-		return this._valueProperties.some((e) => !this.isEmpty(Reflect.get(this.host, e)));
+		return this.host.hasSlotContent?.("value") === !0 || this._valueProperties.some((e) => !this.isEmpty(Reflect.get(this.host, e)));
 	}
 	isEmpty(e) {
 		return e == null || e === "" || Array.isArray(e) && e.length === 0;
@@ -40660,11 +40660,12 @@ var NO = function(e, t, n, r) {
 		return this._slottedControl ?? this.control;
 	}
 	get isFloatingActive() {
-		return this.isOpen && this._anchorReady && this.anchorElement !== null;
+		return !this.disabled && this.isOpen && this._anchorReady && this.anchorElement !== null;
 	}
 	async open() {
+		if (this.disabled) return;
 		let e = this._connectionRevision;
-		await super.open(), this.isCurrentConnection(e) && (this.isOpen = !0);
+		await super.open(), this.isCurrentConnection(e) && !this.disabled && (this.isOpen = !0);
 	}
 	async close() {
 		if (this._staysOpen) return Promise.resolve(!1);
@@ -40745,7 +40746,7 @@ var NO = function(e, t, n, r) {
 		});
 	}
 	onDisabledPropertyChange() {
-		this.disabled && this.isOpen && this.close();
+		this.disabled && (this.clearHoverTimeout(), this.isOpen &&= !1);
 	}
 	onForPropertyChange() {
 		this.scheduleControlRebinding(!0);
@@ -116121,9 +116122,9 @@ function zK(e) {
             <slot name="prefix" slot="prefix"></slot>
             ${R(e.hasCustomTrigger, () => I`
             <slot name="trigger" slot="value"></slot>
-            `, () => I`
+            `, () => R(e.hasSelectionPresentation, () => I`
             <span part="selection-visuals" slot="value"></span>
-            `)}
+            `))}
             <slot name="suffix" slot="suffix"></slot>
             <mosaik-button part="caret"
                            slot="suffix"
@@ -201263,13 +201264,14 @@ function bxe(e) {
                         .textAlign="${e.textAlign}"
                         ?disabled="${e.disabled}"
                         @click="${() => e.open()}"
-                        @input="${(t) => e.onEditorInput(t)}">
+                        @input="${(t) => e.onEditorInput(t)}"
+                        @cleared="${() => e.clear()}">
             <slot name="prefix" slot="prefix"></slot>
             ${R(e.hasCustomTrigger, () => I`
             <slot name="trigger" slot="value"></slot>
-            `, () => I`
+            `, () => R(e.hasSelectionPresentation, () => I`
             <span part="selection-visuals" slot="value"></span>
-            `)}
+            `))}
             <slot name="suffix" slot="suffix"></slot>
             <mosaik-button part="icon"
                            slot="suffix"
@@ -201341,22 +201343,14 @@ function xxe(e) {
         `)}
         </slot>
         <slot name="checkmark">
-            ${cb(e.parent.selectionMode, [
-		["none", () => I`
-            `],
-		["single", () => I`
-            `],
-		["multiple", () => I`
             ${R(e.isChecked, () => I`
-                <mosaik-checkmark part="checkmark"
+            <mosaik-checkmark part="checkmark"
                                 .appearance="${"plain"}"
                                 .variant="${e.variant}"
                                 .type="${"hook"}"
                                 ?checked="${e.isChecked}"
                                 ?disabled="${e.disabled}"></mosaik-checkmark>
             `)}
-            `]
-	])}
         </slot>
         <slot name="end"></slot>
     `;
@@ -201375,19 +201369,19 @@ function Sxe() {
   --combo-item-focus-ring-color: var(--cosmopolitan-color-light-secondary-400);
   --combo-item-focus-ring-inward-offset: 2px;
   --combo-item-focus-ring-outward-offset: 2px;
-  --combo-item-font-family: unset;
-  --combo-item-font-letter-spacing: unset;
-  --combo-item-font-line-height: unset;
-  --combo-item-font-size: unset;
-  --combo-item-font-text-decoration: unset;
-  --combo-item-font-text-transform: unset;
-  --combo-item-font-weight: unset;
+  --combo-item-font-family: var(--cosmopolitan-font-family);
+  --combo-item-font-letter-spacing: var(--cosmopolitan-typography-body2-letter-spacing);
+  --combo-item-font-line-height: var(--cosmopolitan-typography-body2-line-height);
+  --combo-item-font-size: 16px;
+  --combo-item-font-text-decoration: var(--cosmopolitan-typography-body2-text-decoration);
+  --combo-item-font-text-transform: var(--cosmopolitan-typography-body2-text-transform);
+  --combo-item-font-weight: normal;
   --combo-item-foreground-color: unset;
-  --combo-item-gap: unset;
-  --combo-item-padding-bottom: unset;
-  --combo-item-padding-left: unset;
-  --combo-item-padding-right: unset;
-  --combo-item-padding-top: unset;
+  --combo-item-gap: 8px;
+  --combo-item-padding-bottom: 8px;
+  --combo-item-padding-left: 16px;
+  --combo-item-padding-right: 16px;
+  --combo-item-padding-top: 8px;
   --combo-item-ripple-color: var(--cosmopolitan-color-light-secondary-200);
   --combo-item-ripple-duration: .2s;
   --combo-item-shadow: unset unset unset unset unset;
@@ -201396,9 +201390,9 @@ function Sxe() {
   --combo-item-shadow-offset-x: unset;
   --combo-item-shadow-offset-y: unset;
   --combo-item-shadow-spread: unset;
-  --combo-item-transition-duration: unset;
-  --combo-item-transition-mode: unset;
-  --combo-item-transition-property: unset;
+  --combo-item-transition-duration: var(--mosaik-duration-short);
+  --combo-item-transition-mode: ease;
+  --combo-item-transition-property: all;
   --combo-item-translate: none;
 }
 
@@ -201445,9 +201439,10 @@ function Sxe() {
   transition-duration: var(--combo-item-transition-duration);
   transition-timing-function: var(--combo-item-transition-mode);
   transition-property: var(--combo-item-transition-property);
-  background-color: var(--combo-item-background-color);
-  border-color: var(--combo-item-border-color);
+  translate: var(--combo-item-translate);
+  background: var(--combo-item-background-color);
   color: var(--combo-item-foreground-color);
+  border-color: var(--combo-item-border-color);
   border-width: var(--combo-item-border-width);
   border-radius: var(--combo-item-border-radius);
   border-style: var(--combo-item-border-style);
@@ -201458,7 +201453,21 @@ function Sxe() {
   display: flex;
 }
 
-:host(:not([disabled]:not([disabled="false"])):hover) {
+:host mosaik-text, :host mosaik-icon {
+  color: inherit;
+  font-size: inherit;
+}
+
+:host mosaik-icon {
+  flex-shrink: 0;
+}
+
+:host slot[name="label"] {
+  flex: 1;
+  display: block;
+}
+
+:host(:not([disabled]:not([disabled="false"])):hover:not(:active)) {
   cursor: pointer;
 }
 
@@ -201479,17 +201488,17 @@ function Cxe() {
   --combo-item-focus-ring-inward-offset: 2px;
   --combo-item-focus-ring-outward-offset: 2px;
   --combo-item-font-family: var(--joy-font-family);
-  --combo-item-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
-  --combo-item-font-line-height: var(--joy-typography-body1-line-height);
-  --combo-item-font-size: var(--joy-typography-body1-font-size);
-  --combo-item-font-text-decoration: var(--joy-typography-body1-text-decoration);
-  --combo-item-font-text-transform: var(--joy-typography-body1-text-transform);
-  --combo-item-font-weight: var(--joy-typography-body1-font-weight);
+  --combo-item-font-letter-spacing: var(--joy-typography-body2-letter-spacing);
+  --combo-item-font-line-height: var(--joy-typography-body2-line-height);
+  --combo-item-font-size: var(--joy-typography-body2-font-size);
+  --combo-item-font-text-decoration: var(--joy-typography-body2-text-decoration);
+  --combo-item-font-text-transform: var(--joy-typography-body2-text-transform);
+  --combo-item-font-weight: normal;
   --combo-item-foreground-color: var(--joy-scheme-foreground);
   --combo-item-gap: calc(var(--joy-layout-space) * 3);
   --combo-item-padding-bottom: var(--joy-layout-space);
-  --combo-item-padding-left: var(--joy-layout-space);
-  --combo-item-padding-right: var(--joy-layout-space);
+  --combo-item-padding-left: calc(var(--joy-layout-space) * 2);
+  --combo-item-padding-right: calc(var(--joy-layout-space) * 2);
   --combo-item-padding-top: var(--joy-layout-space);
   --combo-item-ripple-color: var(--joy-color-light-secondary-200);
   --combo-item-ripple-duration: .2s;
@@ -201501,7 +201510,7 @@ function Cxe() {
   --combo-item-shadow-spread: unset;
   --combo-item-transition-duration: var(--mosaik-duration-short);
   --combo-item-transition-mode: ease;
-  --combo-item-transition-property: background-color, color, border-color, opacity, box-shadow;
+  --combo-item-transition-property: all;
   --combo-item-translate: none;
 }
 
@@ -201548,9 +201557,10 @@ function Cxe() {
   transition-duration: var(--combo-item-transition-duration);
   transition-timing-function: var(--combo-item-transition-mode);
   transition-property: var(--combo-item-transition-property);
-  background-color: var(--combo-item-background-color);
-  border-color: var(--combo-item-border-color);
+  translate: var(--combo-item-translate);
+  background: var(--combo-item-background-color);
   color: var(--combo-item-foreground-color);
+  border-color: var(--combo-item-border-color);
   border-width: var(--combo-item-border-width);
   border-radius: var(--combo-item-border-radius);
   border-style: var(--combo-item-border-style);
@@ -201561,8 +201571,29 @@ function Cxe() {
   display: flex;
 }
 
-:host(:not([disabled]:not([disabled="false"])):hover) {
+:host mosaik-text, :host mosaik-icon {
+  color: inherit;
+  font-size: inherit;
+}
+
+:host mosaik-icon {
+  flex-shrink: 0;
+}
+
+:host slot[name="label"] {
+  flex: 1;
+  display: block;
+}
+
+:host(:not([disabled]:not([disabled="false"])):hover:not(:active)) {
   cursor: pointer;
+}
+
+:host([disabled]:not([disabled="false"])) {
+  --combo-item-foreground-color: var(--joy-scheme-disabled);
+}
+
+:host(:not([disabled]:not([disabled="false"])):hover) {
   --combo-item-background-color: var(--joy-scheme-highlight);
 }
 
@@ -201652,9 +201683,10 @@ function wxe() {
   transition-duration: var(--combo-item-transition-duration);
   transition-timing-function: var(--combo-item-transition-mode);
   transition-property: var(--combo-item-transition-property);
-  background-color: var(--combo-item-background-color);
-  border-color: var(--combo-item-border-color);
+  translate: var(--combo-item-translate);
+  background: var(--combo-item-background-color);
   color: var(--combo-item-foreground-color);
+  border-color: var(--combo-item-border-color);
   border-width: var(--combo-item-border-width);
   border-radius: var(--combo-item-border-radius);
   border-style: var(--combo-item-border-style);
@@ -201665,7 +201697,21 @@ function wxe() {
   display: flex;
 }
 
-:host(:not([disabled]:not([disabled="false"])):hover) {
+:host mosaik-text, :host mosaik-icon {
+  color: inherit;
+  font-size: inherit;
+}
+
+:host mosaik-icon {
+  flex-shrink: 0;
+}
+
+:host slot[name="label"] {
+  flex: 1;
+  display: block;
+}
+
+:host(:not([disabled]:not([disabled="false"])):hover:not(:active)) {
   cursor: pointer;
 }
 
@@ -202028,7 +202074,7 @@ function Axe() {
   --combo-background-color: unset;
   --combo-border-color: unset;
   --combo-border-radius: unset;
-  --combo-border-style: solid;
+  --combo-border-style: unset;
   --combo-border-width: unset;
   --combo-focus-ring-active-width: 8px;
   --combo-focus-ring-color: var(--cosmopolitan-color-light-secondary-400);
@@ -202037,12 +202083,12 @@ function Axe() {
   --combo-font-family: var(--cosmopolitan-font-family);
   --combo-font-letter-spacing: var(--cosmopolitan-typography-body2-letter-spacing);
   --combo-font-line-height: var(--cosmopolitan-typography-body2-line-height);
-  --combo-font-size: var(--cosmopolitan-typography-body2-font-size);
+  --combo-font-size: 16px;
   --combo-font-text-decoration: var(--cosmopolitan-typography-body2-text-decoration);
   --combo-font-text-transform: var(--cosmopolitan-typography-body2-text-transform);
-  --combo-font-weight: var(--cosmopolitan-typography-body2-font-weight);
-  --combo-foreground-color: var(--cosmopolitan-scheme-foreground);
-  --combo-gap: unset;
+  --combo-font-weight: normal;
+  --combo-foreground-color: unset;
+  --combo-gap: var(--cosmopolitan-layout-space);
   --combo-padding-bottom: calc(var(--cosmopolitan-layout-space) / 2);
   --combo-padding-left: calc(var(--cosmopolitan-layout-space) * 1.5);
   --combo-padding-right: calc(var(--cosmopolitan-layout-space) * 1.5);
@@ -202055,7 +202101,7 @@ function Axe() {
   --combo-shadow-spread: unset;
   --combo-transition-duration: var(--mosaik-duration-short);
   --combo-transition-mode: ease;
-  --combo-transition-property: transform;
+  --combo-transition-property: all;
   --combo-translate: none;
 }
 
@@ -202086,6 +202132,23 @@ function Axe() {
 }
 
 :host {
+  font-family: var(--combo-font-family);
+  font-size: var(--combo-font-size);
+  line-height: var(--combo-font-line-height);
+  font-weight: var(--combo-font-weight);
+  letter-spacing: var(--combo-font-letter-spacing);
+  -webkit-text-decoration: var(--combo-font-text-decoration);
+  text-decoration: var(--combo-font-text-decoration);
+  text-transform: var(--combo-font-text-transform);
+  transition-duration: var(--combo-transition-duration);
+  transition-timing-function: var(--combo-transition-mode);
+  transition-property: var(--combo-transition-property);
+  translate: var(--combo-translate);
+  background: var(--combo-background-color);
+  color: var(--combo-foreground-color);
+  box-shadow: var(--combo-shadow);
+  border-color: var(--combo-border-color);
+  border-radius: var(--combo-border-radius);
   cursor: pointer;
 }
 
@@ -202214,6 +202277,23 @@ function jxe() {
 }
 
 :host {
+  font-family: var(--combo-font-family);
+  font-size: var(--combo-font-size);
+  line-height: var(--combo-font-line-height);
+  font-weight: var(--combo-font-weight);
+  letter-spacing: var(--combo-font-letter-spacing);
+  -webkit-text-decoration: var(--combo-font-text-decoration);
+  text-decoration: var(--combo-font-text-decoration);
+  text-transform: var(--combo-font-text-transform);
+  transition-duration: var(--combo-transition-duration);
+  transition-timing-function: var(--combo-transition-mode);
+  transition-property: var(--combo-transition-property);
+  translate: var(--combo-translate);
+  background: var(--combo-background-color);
+  color: var(--combo-foreground-color);
+  box-shadow: var(--combo-shadow);
+  border-color: var(--combo-border-color);
+  border-radius: var(--combo-border-radius);
   cursor: pointer;
 }
 
@@ -202273,6 +202353,179 @@ function jxe() {
   transform: rotate(180deg);
 }
 
+:host([appearance="plain"]) {
+  --combo-border-width: 0;
+  --combo-background-color: var(--joy-scheme-transparent);
+  --combo-focus-ring-inward-offset: 0px;
+  --combo-focus-ring-outward-offset: 0px;
+}
+
+:host([appearance="plain"]) [part="focusRing"] {
+  --focus-ring-outward-offset: 0px;
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --combo-border-color: var(--joy-color-primary-500);
+  --combo-focus-ring-color: var(--joy-color-primary-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"] {
+  --combo-border-color: var(--joy-color-primary-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) {
+  --combo-border-color: var(--joy-color-primary-500);
+  --combo-focus-ring-color: var(--joy-color-primary-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --combo-border-color: var(--joy-color-primary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --combo-border-color: var(--joy-color-secondary-500);
+  --combo-focus-ring-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"] {
+  --combo-border-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) {
+  --combo-border-color: var(--joy-color-secondary-500);
+  --combo-focus-ring-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --combo-border-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --combo-border-color: var(--joy-color-tertiary-500);
+  --combo-focus-ring-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"] {
+  --combo-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) {
+  --combo-border-color: var(--joy-color-tertiary-500);
+  --combo-focus-ring-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --combo-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --combo-border-color: var(--joy-color-danger-500);
+  --combo-focus-ring-color: var(--joy-color-danger-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"] {
+  --combo-border-color: var(--joy-color-danger-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) {
+  --combo-border-color: var(--joy-color-danger-500);
+  --combo-focus-ring-color: var(--joy-color-danger-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --combo-border-color: var(--joy-color-danger-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --combo-border-color: var(--joy-color-warning-500);
+  --combo-focus-ring-color: var(--joy-color-warning-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"] {
+  --combo-border-color: var(--joy-color-warning-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) {
+  --combo-border-color: var(--joy-color-warning-500);
+  --combo-focus-ring-color: var(--joy-color-warning-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --combo-border-color: var(--joy-color-warning-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --combo-border-color: var(--joy-color-success-500);
+  --combo-focus-ring-color: var(--joy-color-success-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"] {
+  --combo-border-color: var(--joy-color-success-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) {
+  --combo-border-color: var(--joy-color-success-500);
+  --combo-focus-ring-color: var(--joy-color-success-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --combo-border-color: var(--joy-color-success-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --combo-border-color: var(--joy-color-info-500);
+  --combo-focus-ring-color: var(--joy-color-info-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"] {
+  --combo-border-color: var(--joy-color-info-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) {
+  --combo-border-color: var(--joy-color-info-500);
+  --combo-focus-ring-color: var(--joy-color-info-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --combo-border-color: var(--joy-color-info-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --combo-border-color: var(--joy-color-highlight-500);
+  --combo-focus-ring-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"] {
+  --combo-border-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) {
+  --combo-border-color: var(--joy-color-highlight-500);
+  --combo-focus-ring-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --combo-border-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --combo-border-color: var(--joy-color-neutral-500);
+  --combo-focus-ring-color: var(--joy-color-neutral-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="popup"] {
+  --combo-border-color: var(--joy-color-neutral-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) {
+  --combo-border-color: var(--joy-color-neutral-500);
+  --combo-focus-ring-color: var(--joy-color-neutral-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):hover) [part="popup"] {
+  --combo-border-color: var(--joy-color-neutral-500);
+}
+
     `;
 }
 //#endregion
@@ -202280,11 +202533,11 @@ function jxe() {
 function Mxe() {
 	return F`
 :host {
-  --combo-background-color: unset;
-  --combo-border-color: unset;
-  --combo-border-radius: unset;
+  --combo-background-color: var(--memphis-scheme-background);
+  --combo-border-color: var(--memphis-color-light-secondary-400);
+  --combo-border-radius: calc(var(--memphis-layout-radius) * 1.5);
   --combo-border-style: solid;
-  --combo-border-width: unset;
+  --combo-border-width: var(--memphis-layout-thickness);
   --combo-focus-ring-active-width: 8px;
   --combo-focus-ring-color: var(--memphis-color-light-secondary-400);
   --combo-focus-ring-inward-offset: 2px;
@@ -202297,7 +202550,7 @@ function Mxe() {
   --combo-font-text-transform: var(--memphis-typography-body2-text-transform);
   --combo-font-weight: var(--memphis-typography-body2-font-weight);
   --combo-foreground-color: var(--memphis-scheme-foreground);
-  --combo-gap: var(--memphis-layout-space);
+  --combo-gap: calc(var(--memphis-layout-space) / 2);
   --combo-padding-bottom: calc(var(--memphis-layout-space) / 2);
   --combo-padding-left: calc(var(--memphis-layout-space) * 1.5);
   --combo-padding-right: calc(var(--memphis-layout-space) * 1.5);
@@ -202310,7 +202563,7 @@ function Mxe() {
   --combo-shadow-spread: unset;
   --combo-transition-duration: var(--mosaik-duration-short);
   --combo-transition-mode: ease;
-  --combo-transition-property: transform;
+  --combo-transition-property: background-color, color, border-color, box-shadow, transform;
   --combo-translate: none;
 }
 
@@ -202341,6 +202594,23 @@ function Mxe() {
 }
 
 :host {
+  font-family: var(--combo-font-family);
+  font-size: var(--combo-font-size);
+  line-height: var(--combo-font-line-height);
+  font-weight: var(--combo-font-weight);
+  letter-spacing: var(--combo-font-letter-spacing);
+  -webkit-text-decoration: var(--combo-font-text-decoration);
+  text-decoration: var(--combo-font-text-decoration);
+  text-transform: var(--combo-font-text-transform);
+  transition-duration: var(--combo-transition-duration);
+  transition-timing-function: var(--combo-transition-mode);
+  transition-property: var(--combo-transition-property);
+  translate: var(--combo-translate);
+  background: var(--combo-background-color);
+  color: var(--combo-foreground-color);
+  box-shadow: var(--combo-shadow);
+  border-color: var(--combo-border-color);
+  border-radius: var(--combo-border-radius);
   cursor: pointer;
 }
 
@@ -202400,34 +202670,45 @@ function Mxe() {
   transform: rotate(180deg);
 }
 
-:host {
-  font-family: var(--combo-font-family);
-  font-size: var(--combo-font-size);
-  line-height: var(--combo-font-line-height);
-  font-weight: var(--combo-font-weight);
-  letter-spacing: var(--combo-font-letter-spacing);
-  -webkit-text-decoration: var(--combo-font-text-decoration);
-  text-decoration: var(--combo-font-text-decoration);
-  text-transform: var(--combo-font-text-transform);
-  padding-top: var(--combo-padding-top);
-  padding-right: var(--combo-padding-right);
-  padding-bottom: var(--combo-padding-bottom);
-  padding-left: var(--combo-padding-left);
-  color: var(--combo-foreground-color);
-  transition-duration: var(--combo-transition-duration);
-  transition-timing-function: var(--combo-transition-mode);
-  transition-property: var(--combo-transition-property);
-  translate: var(--combo-translate);
-}
-
 :host [part="focusRing"] {
   --focus-ring-inward-offset: var(--combo-focus-ring-inward-offset);
   --focus-ring-outward-offset: var(--combo-focus-ring-outward-offset);
   --focus-ring-border-color: var(--combo-focus-ring-color);
 }
 
+:host([appearance="plain"]) {
+  --combo-border-width: 0;
+  --combo-background-color: var(--memphis-scheme-transparent);
+}
+
+:host([appearance="plain"]) [part="focusRing"] {
+  --focus-ring-inward-offset: 0px;
+  --focus-ring-outward-offset: 0px;
+}
+
 :host(:not([disabled]:not([disabled="false"])):hover) {
-  --combo-translate: translateY(-1px);
+  --combo-border-color: var(--memphis-color-secondary-300);
+}
+
+:host(:not([disabled]:not([disabled="false"])):focus-within) {
+  --combo-border-color: var(--memphis-color-secondary-400);
+}
+
+:host([is-drop-down-open]) {
+  --combo-border-color: var(--memphis-color-secondary-500);
+}
+
+:host([invalid]:not([disabled]:not([disabled="false"]))) {
+  --combo-border-color: var(--memphis-color-danger-500);
+  --combo-foreground-color: var(--memphis-color-danger-500);
+}
+
+:host([invalid]:not([disabled]:not([disabled="false"]))) [part="focusRing"] {
+  --focus-ring-border-color: var(--memphis-color-danger-500);
+}
+
+:host([invalid]:not([disabled]:not([disabled="false"]))) [part="popup"] {
+  --combo-border-color: var(--memphis-color-danger-500);
 }
 
     `;
@@ -202526,6 +202807,9 @@ var F8 = function(e, t, n, r) {
 	get hasCustomTrigger() {
 		return this.hasSlotContent("trigger");
 	}
+	get hasSelectionPresentation() {
+		return this.hasCustomTrigger || this.selectedItems.length > 0;
+	}
 	get isEmpty() {
 		return this.items.length === 0 || !this.items.some((e) => !e.hidden);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.1.71",
+    "version": "0.1.73",
     "description": "Mosaik elements for Svelte.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -11,8 +11,8 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "0.1.71",
-        "@breadstone/mosaik-elements-foundation": "0.1.71",
+        "@breadstone/mosaik-elements": "0.1.73",
+        "@breadstone/mosaik-elements-foundation": "0.1.73",
         "tslib": "2.8.1"
     },
     "peerDependencies": {