@breadstone/mosaik-elements-svelte 0.0.60 → 0.0.61

package/index.mjs

@@ -131166,39 +131166,43 @@ _1 = mQ([
 function vQ(o) {
   return k`
         <div part="header">
-            ${O(o.header.trim().length > 0, () => k`
-            <mosaik-jumbotron-header .text="${o.header}"
-                                     .alignment="${o.alignment}"
-                                     .formatter="${o.formatter}"
-                                     .lang="${o.lang}"
-                                     .dir="${o.dir}">
-                <slot name="header">${o.header}</slot>
-            </mosaik-jumbotron-header>
-            `)}
-            ${O(o.subHeader.trim().length > 0, () => k`
-            <mosaik-jumbotron-sub-header .text="${o.subHeader}"
+            <slot name="header">
+                ${O(o.header.trim(), () => k`
+                <mosaik-jumbotron-header .text="${o.header}"
                                          .alignment="${o.alignment}"
                                          .formatter="${o.formatter}"
                                          .lang="${o.lang}"
-                                         .dir="${o.dir}">
-                <slot name="subHeader">${o.subHeader}</slot>
-            </mosaik-jumbotron-sub-header>
-            `)}
+                                         .dir="${o.dir}"></mosaik-jumbotron-header>
+                `)}
+            </slot>
+            <slot name="subHeader">
+                ${O(o.subHeader.trim(), () => k`
+                <mosaik-jumbotron-sub-header .text="${o.subHeader}"
+                                             .alignment="${o.alignment}"
+                                             .formatter="${o.formatter}"
+                                             .lang="${o.lang}"
+                                             .dir="${o.dir}"></mosaik-jumbotron-sub-header>
+                `)}
+            </slot>
         </div>
-        ${O(o.hint.trim().length > 0, () => k`
+        ${O(o.hint.trim(), () => k`
         <mosaik-divider part="divider"
                         .orientation="${nt.Horizontal}"
                         .lang="${o.lang}"
                         .dir="${o.dir}"></mosaik-divider>
-        <mosaik-text part="hint"
-                     .text="${o.hint}"
-                     .alignment="${o.alignment}"
-                     .formatter="${o.formatter}"
-                     .wrap="${!0}"
-                     .lang="${o.lang}"
-                     .dir="${o.dir}"></mosaik-text>
-        <slot name="hint"></slot>
         `)}
+        <slot name="hint">
+            <mosaik-text part="hint"
+                        .text="${o.hint}"
+                        .alignment="${o.alignment}"
+                        .formatter="${o.formatter}"
+                        .wrap="${!0}"
+                        .lang="${o.lang}"
+                        .dir="${o.dir}"></mosaik-text>
+        </slot>
+        <div part="actions">
+            <slot name="actions"></slot>
+        </div>
     `;
 }
 function xQ() {
@@ -131261,15 +131265,20 @@ function xQ() {
   font-weight: var(--jumbotron-font-weight);
   background-color: var(--jumbotron-background-color);
   color: var(--jumbotron-foreground-color);
-  border: var(--jumbotron-border-width) var(--jumbotron-border-style) var(--jumbotron-border-color);
+  border-width: var(--jumbotron-border-width);
+  border-style: var(--jumbotron-border-style);
+  border-color: var(--jumbotron-border-color);
   border-radius: var(--jumbotron-border-radius);
   transition-duration: var(--jumbotron-transition-duration);
   transition-timing-function: var(--jumbotron-transition-mode);
   transition-property: var(--jumbotron-transition-property);
-  padding: var(--jumbotron-padding-top) var(--jumbotron-padding-right) var(--jumbotron-padding-bottom) var(--jumbotron-padding-left);
-  justify-content: center;
+  padding-top: var(--jumbotron-padding-top);
+  padding-bottom: var(--jumbotron-padding-bottom);
+  padding-left: var(--jumbotron-padding-left);
+  padding-right: var(--jumbotron-padding-right);
   gap: var(--jumbotron-gap);
   flex-direction: column;
+  justify-content: center;
   display: flex;
   overflow: hidden;
 }
@@ -131278,13 +131287,20 @@ function xQ() {
   background-color: currentColor;
 }
 
-:host [part="hint"], :host ::slotted(*) {
+:host [part="hint"] {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   color: inherit;
 }
 
+:host [part="actions"] {
+  align-items: center;
+  gap: inherit;
+  flex-direction: row;
+  display: flex;
+}
+
 :host([appearance="solid"]) {
   --jumbotron-background-color: var(--joy-color-neutral-900);
   --jumbotron-foreground-color: var(--joy-color-neutral-50);
@@ -131352,15 +131368,20 @@ function wQ() {
   font-weight: var(--jumbotron-font-weight);
   background-color: var(--jumbotron-background-color);
   color: var(--jumbotron-foreground-color);
-  border: var(--jumbotron-border-width) var(--jumbotron-border-style) var(--jumbotron-border-color);
+  border-width: var(--jumbotron-border-width);
+  border-style: var(--jumbotron-border-style);
+  border-color: var(--jumbotron-border-color);
   border-radius: var(--jumbotron-border-radius);
   transition-duration: var(--jumbotron-transition-duration);
   transition-timing-function: var(--jumbotron-transition-mode);
   transition-property: var(--jumbotron-transition-property);
-  padding: var(--jumbotron-padding-top) var(--jumbotron-padding-right) var(--jumbotron-padding-bottom) var(--jumbotron-padding-left);
-  justify-content: center;
+  padding-top: var(--jumbotron-padding-top);
+  padding-bottom: var(--jumbotron-padding-bottom);
+  padding-left: var(--jumbotron-padding-left);
+  padding-right: var(--jumbotron-padding-right);
   gap: var(--jumbotron-gap);
   flex-direction: column;
+  justify-content: center;
   display: flex;
   overflow: hidden;
 }
@@ -131369,13 +131390,20 @@ function wQ() {
   background-color: currentColor;
 }
 
-:host [part="hint"], :host ::slotted(*) {
+:host [part="hint"] {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   color: inherit;
 }
 
+:host [part="actions"] {
+  align-items: center;
+  gap: inherit;
+  flex-direction: row;
+  display: flex;
+}
+
     `;
 }
 function kQ() {
@@ -131438,15 +131466,20 @@ function kQ() {
   font-weight: var(--jumbotron-font-weight);
   background-color: var(--jumbotron-background-color);
   color: var(--jumbotron-foreground-color);
-  border: var(--jumbotron-border-width) var(--jumbotron-border-style) var(--jumbotron-border-color);
+  border-width: var(--jumbotron-border-width);
+  border-style: var(--jumbotron-border-style);
+  border-color: var(--jumbotron-border-color);
   border-radius: var(--jumbotron-border-radius);
   transition-duration: var(--jumbotron-transition-duration);
   transition-timing-function: var(--jumbotron-transition-mode);
   transition-property: var(--jumbotron-transition-property);
-  padding: var(--jumbotron-padding-top) var(--jumbotron-padding-right) var(--jumbotron-padding-bottom) var(--jumbotron-padding-left);
-  justify-content: center;
+  padding-top: var(--jumbotron-padding-top);
+  padding-bottom: var(--jumbotron-padding-bottom);
+  padding-left: var(--jumbotron-padding-left);
+  padding-right: var(--jumbotron-padding-right);
   gap: var(--jumbotron-gap);
   flex-direction: column;
+  justify-content: center;
   display: flex;
   overflow: hidden;
 }
@@ -131455,26 +131488,33 @@ function kQ() {
   background-color: currentColor;
 }
 
-:host [part="hint"], :host ::slotted(*) {
+:host [part="hint"] {
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
   color: inherit;
 }
 
+:host [part="actions"] {
+  align-items: center;
+  gap: inherit;
+  flex-direction: row;
+  display: flex;
+}
+
     `;
 }
 function _Q(o) {
   return k`
-        <mosaik-text part="text"
-                     .alignment="${o.alignment}"
-                     .text="${o.text}"
-                     .formatter="${o.formatter}"
-                     .lang="${o.lang}"
-                     .dir="${o.dir}"
-                     .wrap="${!0}">
-            <slot slot="text"></slot>
-        </mosaik-text>
+        <slot>
+            <mosaik-text part="text"
+                        .alignment="${o.alignment}"
+                        .text="${o.text}"
+                        .formatter="${o.formatter}"
+                        .lang="${o.lang}"
+                        .dir="${o.dir}"
+                        .wrap="${!0}"></mosaik-text>
+        </slot>
 
     `;
 }
@@ -131797,15 +131837,15 @@ Ub = $w([
 ], Ub);
 function EQ(o) {
   return k`
-        <mosaik-text part="text"
-                     .alignment="${o.alignment}"
-                     .text="${o.text}"
-                     .formatter="${o.formatter}"
-                     .lang="${o.lang}"
-                     .dir="${o.dir}"
-                     .wrap="${!0}">
-            <slot slot="text"></slot>
-        </mosaik-text>
+        <slot slot="text">
+            <mosaik-text part="text"
+                        .alignment="${o.alignment}"
+                        .text="${o.text}"
+                        .formatter="${o.formatter}"
+                        .lang="${o.lang}"
+                        .dir="${o.dir}"
+                        .wrap="${!0}"></mosaik-text>
+        </slot>
     `;
 }
 function CQ() {

package/package.json

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