@breadstone/mosaik-elements-svelte 0.1.37 → 0.1.38

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.1.38 (2026-06-29)
+
+### 🚀 Features
+
+- **color-swatch:** enhance ColorSwatch component with new properties and events ([1ca631f146](https://github.com/RueDeRennes/mosaik/commit/1ca631f146))
+
 ## 0.1.37 (2026-06-29)
 
 This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.

package/index.mjs

@@ -95156,8 +95156,19 @@ function hV(e) {
             ${U(e.value, () => V`
             <div part="front"
                 style="background-color: ${e.value?.toString()}"></div>
-            </div>
             `)}
+            <span part="checkmark-container">
+                <slot name="checkmark">
+                    <mosaik-checkmark part="checkmark"
+                                      .lang="${e.lang}"
+                                      .dir="${e.dir}"
+                                      .variant="${e.variant}"
+                                      .appearance="${q.Plain}"
+                                      .type="${RR.Hook}"
+                                      ?checked="${e.isChecked}"
+                                      ?disabled="${e.disabled}"></mosaik-checkmark>
+                </slot>
+            </span>
         </div>
      `;
 }
@@ -95261,6 +95272,27 @@ function _V() {
   flex: 1;
 }
 
+:host [part="root"] [part="checkmark-container"] {
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  transition-duration: var(--color-swatch-transition-duration);
+  transition-timing-function: var(--color-swatch-transition-mode);
+  place-items: center;
+  transition-property: opacity;
+  display: grid;
+  position: absolute;
+  inset: 0;
+}
+
+:host [part="root"] [part="checkmark"] {
+  pointer-events: none;
+}
+
+:host([is-checked]) [part="root"] [part="checkmark-container"] {
+  opacity: 1;
+}
+
 :host([size="tiny"]) {
   --color-swatch-size: 8px;
 }
@@ -95380,6 +95412,27 @@ function vV() {
   flex: 1;
 }
 
+:host [part="root"] [part="checkmark-container"] {
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  transition-duration: var(--color-swatch-transition-duration);
+  transition-timing-function: var(--color-swatch-transition-mode);
+  place-items: center;
+  transition-property: opacity;
+  display: grid;
+  position: absolute;
+  inset: 0;
+}
+
+:host [part="root"] [part="checkmark"] {
+  pointer-events: none;
+}
+
+:host([is-checked]) [part="root"] [part="checkmark-container"] {
+  opacity: 1;
+}
+
 :host([size="tiny"]) {
   --color-swatch-size: 8px;
 }
@@ -95404,6 +95457,10 @@ function vV() {
   background-image: linear-gradient(45deg, var(--joy-scheme-highlight) 25%, var(--joy-scheme-transparent) 25%, var(--joy-scheme-transparent) 75%, var(--joy-scheme-highlight) 75%, var(--joy-scheme-highlight)), linear-gradient(45deg, var(--joy-scheme-highlight) 25%, var(--joy-scheme-transparent) 25%, var(--joy-scheme-transparent) 75%, var(--joy-scheme-highlight) 75%, var(--joy-scheme-highlight));
 }
 
+:host [part="root"] [part="checkmark"] {
+  color: var(--joy-scheme-surface);
+}
+
     `;
 }
 //#endregion
@@ -95503,6 +95560,27 @@ function yV() {
   flex: 1;
 }
 
+:host [part="root"] [part="checkmark-container"] {
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  transition-duration: var(--color-swatch-transition-duration);
+  transition-timing-function: var(--color-swatch-transition-mode);
+  place-items: center;
+  transition-property: opacity;
+  display: grid;
+  position: absolute;
+  inset: 0;
+}
+
+:host [part="root"] [part="checkmark"] {
+  pointer-events: none;
+}
+
+:host([is-checked]) [part="root"] [part="checkmark-container"] {
+  opacity: 1;
+}
+
 :host([size="tiny"]) {
   --color-swatch-size: 8px;
 }
@@ -95534,7 +95612,7 @@ var bV = function(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, xV = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
-}, SV = class extends F(dS(Zx(j))) {
+}, SV = class extends F(jT(R(z(J(dS(Zx(j))))))) {
 	_inheritance = wx(this, { context: gV });
 	_name;
 	_value;
@@ -95551,6 +95629,24 @@ var bV = function(e, t, n, r) {
 	set size(e) {
 		this._inheritance.markExplicit("size"), super.size = e;
 	}
+	get disabled() {
+		return this._inheritance.get("disabled", super.disabled);
+	}
+	set disabled(e) {
+		this._inheritance.markExplicit("disabled"), super.disabled = e;
+	}
+	get appearance() {
+		return this._inheritance.get("appearance", super.appearance);
+	}
+	set appearance(e) {
+		this._inheritance.markExplicit("appearance"), super.appearance = e;
+	}
+	get variant() {
+		return this._inheritance.get("variant", super.variant);
+	}
+	set variant(e) {
+		this._inheritance.markExplicit("variant"), super.variant = e;
+	}
 	get name() {
 		return this._name;
 	}
@@ -95593,7 +95689,7 @@ bV([
 		memphis: yV,
 		cosmopolitan: _V
 	},
-	imports: []
+	imports: [GR]
 }), xV("design:paramtypes", [])], SV);
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Media/ColorPicker/ColorPickerElementTemplate.js
@@ -163436,7 +163532,12 @@ var Dge = function(e, t, n, r) {
 	constructor() {
 		super(), FS(this, {
 			context: gV,
-			values: () => ({ size: this.size })
+			values: () => ({
+				disabled: this.disabled,
+				appearance: this.appearance,
+				variant: this.variant,
+				size: this.size
+			})
 		});
 	}
 	static get is() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.1.37",
+    "version": "0.1.38",
     "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.37",
-        "@breadstone/mosaik-elements-foundation": "0.1.37",
+        "@breadstone/mosaik-elements": "0.1.38",
+        "@breadstone/mosaik-elements-foundation": "0.1.38",
         "tslib": "2.8.1"
     },
     "peerDependencies": {