@breadstone/mosaik-elements-svelte 0.1.15 → 0.1.16

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.16 (2026-06-15)
+
+This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.
+
 ## 0.1.15 (2026-06-14)
 
 This was a version bump only for mosaik-elements-svelte to align it with other projects, there were no code changes.

package/index.mjs

@@ -216684,6 +216684,7 @@ function eTe(e) {
 		"is-error": r.state === "error"
 	})}">
             <button part="step"
+                    id="step-${i}"
                     class="${Hb({
 		"is-active": r.isSelected,
 		"is-completed": r.state === "completed",
@@ -216696,11 +216697,20 @@ function eTe(e) {
                     aria-setsize="${e.items.length}"
                     ?disabled="${r.disabled || e.disabled}"
                     @click="${() => e.onStepInvoked(r)}">
+                ${U(!r.disabled, () => V`
+                <mosaik-focus-ring part="focusRing"
+                                   .variant="${n(r.state)}"
+                                   .controlled="${"auto"}"
+                                   .for="${`step-${i}`}"
+                                   .lang="${e.lang}"
+                                   .dir="${e.dir}"></mosaik-focus-ring>
+                `)}
                 <span part="step-icon"
                       aria-hidden="true">
                     <mosaik-pip part="step-state"
                                 .icon="${r.icon ? r.icon : t(r.state)}"
                                 .text="${String(i + 1)}"
+                                .size="${r.iconSize ?? "medium"}"
                                 .variant="${n(r.state)}"
                                 .appearance="${"plain"}"></mosaik-pip>
                 </span>
@@ -217098,10 +217108,11 @@ var q5 = function(e, t, n, r) {
 	_description;
 	_hint;
 	_icon;
+	_iconSize;
 	_state;
 	_isActive;
 	constructor() {
-		super(), this._header = "", this._description = "", this._hint = "", this._icon = "", this._state = "pending", this._isActive = !1, this.enter = _w, this.exit = vw;
+		super(), this._header = "", this._description = "", this._hint = "", this._icon = "", this._iconSize = null, this._state = "pending", this._isActive = !1, this.enter = _w, this.exit = vw;
 	}
 	static get is() {
 		return "mosaik-stepper-item";
@@ -217136,6 +217147,12 @@ var q5 = function(e, t, n, r) {
 	set icon(e) {
 		this._icon !== e && (this._icon = e, this.requestUpdate("icon"));
 	}
+	get iconSize() {
+		return this._iconSize;
+	}
+	set iconSize(e) {
+		this._iconSize !== e && (this._iconSize = e, this.requestUpdate("iconSize"));
+	}
 	get state() {
 		return this._state;
 	}
@@ -217181,6 +217198,10 @@ q5([
 	J5("design:type", String),
 	J5("design:paramtypes", [String])
 ], Y5.prototype, "icon", null), q5([
+	A({ type: G }),
+	J5("design:type", Object),
+	J5("design:paramtypes", [Object])
+], Y5.prototype, "iconSize", null), q5([
 	A({
 		type: String,
 		useDefault: !0
@@ -217370,14 +217391,13 @@ function aTe() {
   gap: var(--stepper-gap);
   background: none;
   border: none;
+  outline: none;
   width: 100%;
   display: inline-flex;
 }
 
-:host [part="step-container"] [part="step"]:focus-visible {
-  outline-width: var(--stepper-focus-outline-width);
-  outline-offset: var(--stepper-focus-outline-offset);
-  outline-style: solid;
+:host [part="step-container"] [part="step"][disabled]:not([disabled="false"]) {
+  cursor: default;
 }
 
 :host [part="step-container"] [part="step"] [part="step-icon"] {
@@ -217395,6 +217415,7 @@ function aTe() {
 :host [part="step-container"] [part="step"] [part="step-text"] {
   gap: calc(var(--stepper-gap) / 2);
   flex-direction: column;
+  flex: 1;
   min-width: 0;
   font-family: inherit;
   display: inline-flex;
@@ -217581,14 +217602,13 @@ function oTe() {
   gap: var(--stepper-gap);
   background: none;
   border: none;
+  outline: none;
   width: 100%;
   display: inline-flex;
 }
 
-:host [part="step-container"] [part="step"]:focus-visible {
-  outline-width: var(--stepper-focus-outline-width);
-  outline-offset: var(--stepper-focus-outline-offset);
-  outline-style: solid;
+:host [part="step-container"] [part="step"][disabled]:not([disabled="false"]) {
+  cursor: default;
 }
 
 :host [part="step-container"] [part="step"] [part="step-icon"] {
@@ -217606,6 +217626,7 @@ function oTe() {
 :host [part="step-container"] [part="step"] [part="step-text"] {
   gap: calc(var(--stepper-gap) / 2);
   flex-direction: column;
+  flex: 1;
   min-width: 0;
   font-family: inherit;
   display: inline-flex;
@@ -217637,12 +217658,8 @@ function oTe() {
   color: var(--joy-scheme-foreground);
 }
 
-:host [part="step-container"] [part="step"]:focus-visible {
-  outline-color: var(--joy-color-primary-500);
-}
-
 :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="step-icon"] [part="step-state"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-icon) {
-  background: var(--joy-color-primary-500);
+  background: var(--joy-scheme-middlelight);
 }
 
 :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="step-text"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-text) {
@@ -217650,24 +217667,39 @@ function oTe() {
   font-weight: 600;
 }
 
-:host [part="step-container"] [part="step"] [part="step-icon"] [part="step-state"] {
-  color: var(--joy-scheme-foreground);
-  background-color: var(--joy-scheme-highlight);
+:host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))).is-active [part="step-icon"] [part="step-state"] {
+  color: var(--joy-color-primary-0);
+  background: var(--joy-color-primary-500);
+}
+
+:host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))).is-completed [part="step-icon"] [part="step-state"] {
+  color: var(--joy-color-success-0);
+  background: var(--joy-color-success-500);
+}
+
+:host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))).is-error [part="step-icon"] [part="step-state"] {
+  color: var(--joy-color-danger-0);
+  background: var(--joy-color-danger-500);
 }
 
 :host [part="step-container"] [part="step"].is-active [part="step-icon"] [part="step-state"] {
   color: var(--joy-color-primary-0);
-  background-color: var(--joy-color-primary-500);
+  background: var(--joy-color-primary-500);
 }
 
 :host [part="step-container"] [part="step"].is-completed [part="step-icon"] [part="step-state"] {
   color: var(--joy-color-success-0);
-  background-color: var(--joy-color-success-500);
+  background: var(--joy-color-success-500);
 }
 
 :host [part="step-container"] [part="step"].is-error [part="step-icon"] [part="step-state"] {
   color: var(--joy-color-danger-0);
-  background-color: var(--joy-color-danger-500);
+  background: var(--joy-color-danger-500);
+}
+
+:host [part="step-container"] [part="step"] [part="step-icon"] [part="step-state"] {
+  color: var(--joy-scheme-foreground);
+  background: var(--joy-scheme-highlight);
 }
 
 :host [part="step-container"] [part="step"] [part="step-text"] {
@@ -217875,14 +217907,13 @@ function sTe() {
   gap: var(--stepper-gap);
   background: none;
   border: none;
+  outline: none;
   width: 100%;
   display: inline-flex;
 }
 
-:host [part="step-container"] [part="step"]:focus-visible {
-  outline-width: var(--stepper-focus-outline-width);
-  outline-offset: var(--stepper-focus-outline-offset);
-  outline-style: solid;
+:host [part="step-container"] [part="step"][disabled]:not([disabled="false"]) {
+  cursor: default;
 }
 
 :host [part="step-container"] [part="step"] [part="step-icon"] {
@@ -217900,6 +217931,7 @@ function sTe() {
 :host [part="step-container"] [part="step"] [part="step-text"] {
   gap: calc(var(--stepper-gap) / 2);
   flex-direction: column;
+  flex: 1;
   min-width: 0;
   font-family: inherit;
   display: inline-flex;
@@ -218047,7 +218079,8 @@ X5([
 		Y5,
 		_S,
 		W,
-		E0
+		E0,
+		bS
 	]
 }), Z5("design:paramtypes", [])], Q5);
 //#endregion

package/package.json

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