@breadstone/mosaik-elements-svelte 0.0.106 → 0.0.108

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 0.0.108 (2025-08-15)
+
+### 🚀 Features
+
+- **chat:** enhance styling and theming for chat components ([b8f5a8f6c6](https://github.com/RueDeRennes/mosaik/commit/b8f5a8f6c6))
+- **dialog): enhance DialogPortalComponent with dynamic properties and update button appearance feat(translator:** improve addTranslations method to merge existing translations chore: update release script version to 0.0.107 ([e6974a901b](https://github.com/RueDeRennes/mosaik/commit/e6974a901b))
+
+## 0.0.107 (2025-08-15)
+
+### 🚀 Features
+
+- **instructions:** add guideline for using "const object + derived union" pattern chore: update release version to 0.0.106 ([28ffdf76fb](https://github.com/RueDeRennes/mosaik/commit/28ffdf76fb))
+
 ## 0.0.106 (2025-08-15)
 
 ### 🚀 Features

package/index.mjs

@@ -11635,12 +11635,18 @@ let Ph = class extends P(Qi(tt(H))) {
   }
 };
 qg([
-  b({ type: Boolean, useDefault: !0 }),
+  b({
+    type: Boolean,
+    useDefault: !0
+  }),
   Ci("design:type", Boolean),
   Ci("design:paramtypes", [Boolean])
 ], Ph.prototype, "visible", null);
 qg([
-  b({ type: Boolean, useDefault: !0 }),
+  b({
+    type: Boolean,
+    useDefault: !0
+  }),
   Ci("design:type", Boolean),
   Ci("design:paramtypes", [Boolean])
 ], Ph.prototype, "inward", null);
@@ -58171,7 +58177,10 @@ class x7 {
    * @public
    */
   addTranslations(t, e) {
-    this._translations[t] = e;
+    this._translations[t] = {
+      ...this._translations[t],
+      ...e
+    };
   }
   /**
    * Translates the given key.
@@ -104451,13 +104460,13 @@ let In = class extends P(Ji(Zt(W(qo(At(H)))))) {
    * @protected
    */
   onPositionPropertyChanged(t, e) {
-    this._cachedPositionInPixels = this.percentageToPixels(this.position), this.positionInPixels = this.percentageToPixels(this.position), this.onSplitRepositioned({});
+    this._cachedPositionInPixels = e ? this.percentageToPixels(e) : 0, this._positionInPixels = e ? this.percentageToPixels(e) : 0, this.onSplitRepositioned({});
   }
   /**
    * @protected
    */
   onPositionInPixelsPropertyChanged(t, e) {
-    this.position = this.pixelsToPercentage(this.positionInPixels);
+    this._position = e ? this.pixelsToPercentage(e) : 0, this.onSplitRepositioned({});
   }
   /**
    * @protected
@@ -112045,6 +112054,12 @@ class zJ {
 }
 function SJ(o) {
   return w`
+        ${$(!o.disabled, () => w`
+        <mosaik-focus-ring part="focusRing"
+                           .variant="${o.variant}"
+                           .controlled="${"manual"}"
+                           @connected="${(t) => t.target.attach(o)}"></mosaik-focus-ring>
+        `)}
         <mosaik-expander part="expander"
                          id="expander"
                          .dir="${o.dir}"
@@ -112111,6 +112126,11 @@ function SJ(o) {
 function EJ() {
   return m`
 :host {
+  --chat-input-background-color: var(--joy-scheme-background);
+  --chat-input-border-color: var(--joy-scheme-highlight);
+  --chat-input-border-radius: var(--joy-layout-radius);
+  --chat-input-border-style: solid;
+  --chat-input-border-width: var(--joy-layout-thickness);
   --chat-input-emoji-background-color: unset;
   --chat-input-font-family: unset;
   --chat-input-font-letter-spacing: unset;
@@ -112119,14 +112139,16 @@ function EJ() {
   --chat-input-font-text-decoration: unset;
   --chat-input-font-text-transform: unset;
   --chat-input-font-weight: unset;
+  --chat-input-foreground-color: var(--joy-scheme-foreground);
   --chat-input-gap: unset;
   --chat-input-padding-bottom: unset;
   --chat-input-padding-left: unset;
   --chat-input-padding-right: unset;
   --chat-input-padding-top: unset;
-  --chat-input-transition-duration: unset;
-  --chat-input-transition-mode: unset;
-  --chat-input-transition-property: unset;
+  --chat-input-shadow: var(--joy-elevation-none);
+  --chat-input-transition-duration: var(--joy-duration-short);
+  --chat-input-transition-mode: ease;
+  --chat-input-transition-property: background-color, color, border-color, opacity, box-shadow;
   --chat-input-translate: unset;
 }
 
@@ -112157,9 +112179,22 @@ function EJ() {
 }
 
 :host {
+  background-color: var(--chat-input-background-color);
+  color: var(--chat-input-foreground-color);
+  border-color: var(--chat-input-border-color);
+  border-width: var(--chat-input-border-width);
+  border-radius: var(--chat-input-border-radius);
+  border-style: var(--chat-input-border-style);
+  transition-duration: var(--chat-input-transition-duration);
+  transition-timing-function: var(--chat-input-transition-mode);
+  transition-property: var(--chat-input-transition-property);
   padding-top: 1px;
 }
 
+:host [part="expander"] {
+  --expander-background-color: var(--chat-input-background-color);
+}
+
 :host [part="expander"]::part(heading) {
   display: none;
 }
@@ -112169,7 +112204,7 @@ function EJ() {
 }
 
 :host [part="expander"] [part="reaction"] [part="emoji"] {
-  --emoji-background-color: unset;
+  --emoji-background-color: var(--chat-input-background-color);
 }
 
 :host [part="textBox"] {
@@ -112194,11 +112229,173 @@ function EJ() {
   display: flex;
 }
 
+:host([appearance="plain"]) {
+  --chat-input-border-width: 0;
+  --chat-input-background-color: var(--joy-scheme-transparent);
+}
+
+:host([appearance="plain"]) [part="focusRing"] {
+  --focus-ring-outward-offset: 0px;
+}
+
+:host([appearance="soft"]), :host([appearance="solid"]) {
+  --chat-input-background-color: var(--joy-scheme-highlight);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --chat-input-border-color: var(--joy-color-primary-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-primary-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --chat-input-border-color: var(--joy-color-primary-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-primary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --chat-input-border-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-secondary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --chat-input-border-color: var(--joy-color-secondary-500);
+}
+
+:host([variant="secondary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-secondary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --chat-input-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --chat-input-border-color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="tertiary"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-tertiary-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --chat-input-border-color: var(--joy-color-danger-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-danger-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --chat-input-border-color: var(--joy-color-danger-500);
+}
+
+:host([variant="danger"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-danger-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --chat-input-border-color: var(--joy-color-warning-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-warning-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --chat-input-border-color: var(--joy-color-warning-500);
+}
+
+:host([variant="warning"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-warning-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --chat-input-border-color: var(--joy-color-success-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-success-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --chat-input-border-color: var(--joy-color-success-500);
+}
+
+:host([variant="success"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-success-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --chat-input-border-color: var(--joy-color-info-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-info-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --chat-input-border-color: var(--joy-color-info-500);
+}
+
+:host([variant="info"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-info-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --chat-input-border-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-highlight-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --chat-input-border-color: var(--joy-color-highlight-500);
+}
+
+:host([variant="highlight"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-highlight-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):hover), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):active), :host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) {
+  --chat-input-border-color: var(--joy-color-neutral-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus) [part="label"] {
+  color: var(--joy-color-neutral-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) {
+  --chat-input-border-color: var(--joy-color-neutral-500);
+}
+
+:host([variant="neutral"]:not([disabled]:not([disabled="false"])):not([invalid]):focus-within) [part="label"] {
+  color: var(--joy-color-neutral-500);
+}
+
     `;
 }
 function CJ() {
   return m`
 :host {
+  --chat-input-background-color: var(--retro-scheme-background);
+  --chat-input-border-color: var(--retro-scheme-highlight);
+  --chat-input-border-radius: var(--retro-layout-radius);
+  --chat-input-border-style: solid;
+  --chat-input-border-width: var(--retro-layout-thickness);
   --chat-input-emoji-background-color: unset;
   --chat-input-font-family: unset;
   --chat-input-font-letter-spacing: unset;
@@ -112207,14 +112404,20 @@ function CJ() {
   --chat-input-font-text-decoration: unset;
   --chat-input-font-text-transform: unset;
   --chat-input-font-weight: unset;
+  --chat-input-foreground-color: var(--retro-scheme-foreground);
   --chat-input-gap: unset;
   --chat-input-padding-bottom: unset;
   --chat-input-padding-left: unset;
   --chat-input-padding-right: unset;
   --chat-input-padding-top: unset;
-  --chat-input-transition-duration: unset;
-  --chat-input-transition-mode: unset;
-  --chat-input-transition-property: unset;
+  --chat-input-shadow-blur: var(--retro-elevation-semilight-blur-0);
+  --chat-input-shadow-color: var(--retro-elevation-semilight-color-0);
+  --chat-input-shadow-offset-x: var(--retro-elevation-semilight-offset-x-0);
+  --chat-input-shadow-offset-y: var(--retro-elevation-semilight-offset-y-0);
+  --chat-input-shadow-spread: var(--retro-elevation-semilight-spread-0);
+  --chat-input-transition-duration: var(--retro-duration-short);
+  --chat-input-transition-mode: ease;
+  --chat-input-transition-property: background-color, color, border-color, opacity, box-shadow;
   --chat-input-translate: unset;
 }
 
@@ -112245,9 +112448,22 @@ function CJ() {
 }
 
 :host {
+  background-color: var(--chat-input-background-color);
+  color: var(--chat-input-foreground-color);
+  border-color: var(--chat-input-border-color);
+  border-width: var(--chat-input-border-width);
+  border-radius: var(--chat-input-border-radius);
+  border-style: var(--chat-input-border-style);
+  transition-duration: var(--chat-input-transition-duration);
+  transition-timing-function: var(--chat-input-transition-mode);
+  transition-property: var(--chat-input-transition-property);
   padding-top: 1px;
 }
 
+:host [part="expander"] {
+  --expander-background-color: var(--chat-input-background-color);
+}
+
 :host [part="expander"]::part(heading) {
   display: none;
 }
@@ -112257,7 +112473,7 @@ function CJ() {
 }
 
 :host [part="expander"] [part="reaction"] [part="emoji"] {
-  --emoji-background-color: unset;
+  --emoji-background-color: var(--chat-input-background-color);
 }
 
 :host [part="textBox"] {
@@ -112287,6 +112503,11 @@ function CJ() {
 function AJ() {
   return m`
 :host {
+  --chat-input-background-color: unset;
+  --chat-input-border-color: unset;
+  --chat-input-border-radius: unset;
+  --chat-input-border-style: unset;
+  --chat-input-border-width: unset;
   --chat-input-emoji-background-color: unset;
   --chat-input-font-family: unset;
   --chat-input-font-letter-spacing: unset;
@@ -112295,14 +112516,16 @@ function AJ() {
   --chat-input-font-text-decoration: unset;
   --chat-input-font-text-transform: unset;
   --chat-input-font-weight: unset;
+  --chat-input-foreground-color: unset;
   --chat-input-gap: unset;
   --chat-input-padding-bottom: unset;
   --chat-input-padding-left: unset;
   --chat-input-padding-right: unset;
   --chat-input-padding-top: unset;
-  --chat-input-transition-duration: unset;
-  --chat-input-transition-mode: unset;
-  --chat-input-transition-property: unset;
+  --chat-input-shadow: unset;
+  --chat-input-transition-duration: var(--cosmopolitan-duration-short);
+  --chat-input-transition-mode: ease;
+  --chat-input-transition-property: background-color, color, border-color, opacity, box-shadow;
   --chat-input-translate: unset;
 }
 
@@ -112333,9 +112556,22 @@ function AJ() {
 }
 
 :host {
+  background-color: var(--chat-input-background-color);
+  color: var(--chat-input-foreground-color);
+  border-color: var(--chat-input-border-color);
+  border-width: var(--chat-input-border-width);
+  border-radius: var(--chat-input-border-radius);
+  border-style: var(--chat-input-border-style);
+  transition-duration: var(--chat-input-transition-duration);
+  transition-timing-function: var(--chat-input-transition-mode);
+  transition-property: var(--chat-input-transition-property);
   padding-top: 1px;
 }
 
+:host [part="expander"] {
+  --expander-background-color: var(--chat-input-background-color);
+}
+
 :host [part="expander"]::part(heading) {
   display: none;
 }
@@ -112345,7 +112581,7 @@ function AJ() {
 }
 
 :host [part="expander"] [part="reaction"] [part="emoji"] {
-  --emoji-background-color: unset;
+  --emoji-background-color: var(--chat-input-background-color);
 }
 
 :host [part="textBox"] {
@@ -112380,7 +112616,7 @@ var Ip = function(o, t, e, r) {
 }, oi = function(o, t) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, t);
 };
-let od = class extends P(tt(H)) {
+let od = class extends P(tt(gt(W(H)))) {
   // #region Fields
   _submitted;
   _transformer;
@@ -113781,6 +114017,7 @@ function YJ() {
   --chat-font-weight: var(--joy-typography-body1-font-weight);
   --chat-foreground-color: var(--joy-scheme-foreground);
   --chat-gap: var(--joy-layout-space);
+  --chat-line-thickness: var(--joy-layout-thickness);
   --chat-padding-bottom: var(--joy-layout-space);
   --chat-padding-left: calc(var(--joy-layout-space) * 2);
   --chat-padding-right: calc(var(--joy-layout-space) * 2);
@@ -113869,8 +114106,8 @@ function YJ() {
 
 :host [part="footer"]:before {
   content: "";
+  height: var(--chat-line-thickness);
   background-color: var(--chat-border-color);
-  height: 1px;
   position: absolute;
   top: 0;
   left: 0;
@@ -113887,6 +114124,7 @@ function YJ() {
 
 :host([appearance="plain"]) {
   --chat-border-width: 0px;
+  --chat-line-thickness: 0px;
   --chat-border-style: none;
 }
 
@@ -113914,6 +114152,7 @@ function UJ() {
   --chat-font-weight: unset;
   --chat-foreground-color: unset;
   --chat-gap: unset;
+  --chat-line-thickness: var(--retro-layout-thickness);
   --chat-padding-bottom: unset;
   --chat-padding-left: unset;
   --chat-padding-right: unset;
@@ -114002,8 +114241,8 @@ function UJ() {
 
 :host [part="footer"]:before {
   content: "";
+  height: var(--chat-line-thickness);
   background-color: var(--chat-border-color);
-  height: 1px;
   position: absolute;
   top: 0;
   left: 0;
@@ -114020,6 +114259,7 @@ function UJ() {
 
 :host([appearance="plain"]) {
   --chat-border-width: 0px;
+  --chat-line-thickness: 0px;
   --chat-border-style: none;
 }
 
@@ -114043,6 +114283,7 @@ function qJ() {
   --chat-font-weight: unset;
   --chat-foreground-color: unset;
   --chat-gap: unset;
+  --chat-line-thickness: var(--cosmopolitan-layout-thickness);
   --chat-padding-bottom: unset;
   --chat-padding-left: unset;
   --chat-padding-right: unset;
@@ -114131,8 +114372,8 @@ function qJ() {
 
 :host [part="footer"]:before {
   content: "";
+  height: var(--chat-line-thickness);
   background-color: var(--chat-border-color);
-  height: 1px;
   position: absolute;
   top: 0;
   left: 0;
@@ -114149,6 +114390,7 @@ function qJ() {
 
 :host([appearance="plain"]) {
   --chat-border-width: 0px;
+  --chat-line-thickness: 0px;
   --chat-border-style: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.0.106",
+    "version": "0.0.108",
     "description": "Mosaik elements for Svelte.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -15,8 +15,8 @@
         "vite": "*"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "^0.0.106",
-        "@breadstone/mosaik-elements-foundation": "^0.0.106",
+        "@breadstone/mosaik-elements": "^0.0.108",
+        "@breadstone/mosaik-elements-foundation": "^0.0.108",
         "tslib": "^2.8.1"
     },
     "exports": {