@breadstone/mosaik-elements-svelte 0.0.62 → 0.0.64

package/index.mjs

@@ -20184,7 +20184,7 @@ class _F extends kF {
 const Ua = qi(_F);
 function jF(o) {
   return k`
-        <div ${Ua({ direction: "column" })}>
+        <div part="root" ${Ua({ direction: "column" })}>
             <slot @slotchange="${(e) => o.onSlotChange(e)}"></slot>
         </div>
     `;
@@ -20205,11 +20205,11 @@ function zF() {
   --menu-font-text-transform: var(--joy-typography-body1-text-transform);
   --menu-font-weight: var(--joy-typography-body1-font-weight);
   --menu-foreground-color: var(--joy-scheme-foreground);
-  --menu-gap: 8px;
-  --menu-padding-bottom: 8px;
-  --menu-padding-left: 16px;
-  --menu-padding-right: 16px;
-  --menu-padding-top: 8px;
+  --menu-gap: unset;
+  --menu-padding-bottom: var(--joy-layout-spacing);
+  --menu-padding-left: calc(var(--joy-layout-spacing) * 2);
+  --menu-padding-right: calc(var(--joy-layout-spacing) * 2);
+  --menu-padding-top: var(--joy-layout-spacing);
   --menu-shadow: var(--joy-elevation-none);
   --menu-transition-duration: .2s;
   --menu-transition-mode: ease;
@@ -20266,6 +20266,9 @@ function zF() {
   padding-left: var(--menu-padding-left);
   padding-bottom: var(--menu-padding-bottom);
   padding-right: var(--menu-padding-right);
+}
+
+:host [part="root"] {
   gap: var(--menu-gap);
 }
 
@@ -20355,6 +20358,9 @@ function SF() {
   padding-left: var(--menu-padding-left);
   padding-bottom: var(--menu-padding-bottom);
   padding-right: var(--menu-padding-right);
+}
+
+:host [part="root"] {
   gap: var(--menu-gap);
 }
 
@@ -20444,6 +20450,9 @@ function EF() {
   padding-left: var(--menu-padding-left);
   padding-bottom: var(--menu-padding-bottom);
   padding-right: var(--menu-padding-right);
+}
+
+:host [part="root"] {
   gap: var(--menu-gap);
 }
 
@@ -95061,7 +95070,7 @@ function fV() {
   display: none !important;
 }
 
-:host [part="root"] {
+:host {
   font-family: var(--menu-item-font-family);
   font-size: var(--menu-item-font-size);
   line-height: var(--menu-item-font-line-height);
@@ -95073,6 +95082,11 @@ function fV() {
   transition-duration: var(--menu-item-transition-duration);
   transition-timing-function: var(--menu-item-transition-mode);
   transition-property: var(--menu-item-transition-property);
+}
+
+:host [part="root"] {
+  transition-duration: inherit;
+  transition-timing-function: inherit;
   background-color: var(--menu-item-background-color);
   color: var(--menu-item-foreground-color);
   border: var(--menu-item-border-width) var(--menu-item-border-style) var(--menu-item-border-color);
@@ -95081,6 +95095,7 @@ function fV() {
   min-height: var(--menu-item-height);
   gap: var(--menu-item-gap);
   align-items: center;
+  transition-property: inherit;
   display: flex;
   position: relative;
   overflow: hidden;
@@ -95246,7 +95261,7 @@ function bV() {
   display: none !important;
 }
 
-:host [part="root"] {
+:host {
   font-family: var(--menu-item-font-family);
   font-size: var(--menu-item-font-size);
   line-height: var(--menu-item-font-line-height);
@@ -95258,6 +95273,11 @@ function bV() {
   transition-duration: var(--menu-item-transition-duration);
   transition-timing-function: var(--menu-item-transition-mode);
   transition-property: var(--menu-item-transition-property);
+}
+
+:host [part="root"] {
+  transition-duration: inherit;
+  transition-timing-function: inherit;
   background-color: var(--menu-item-background-color);
   color: var(--menu-item-foreground-color);
   border: var(--menu-item-border-width) var(--menu-item-border-style) var(--menu-item-border-color);
@@ -95266,6 +95286,7 @@ function bV() {
   min-height: var(--menu-item-height);
   gap: var(--menu-item-gap);
   align-items: center;
+  transition-property: inherit;
   display: flex;
   position: relative;
   overflow: hidden;
@@ -95386,7 +95407,7 @@ function mV() {
   display: none !important;
 }
 
-:host [part="root"] {
+:host {
   font-family: var(--menu-item-font-family);
   font-size: var(--menu-item-font-size);
   line-height: var(--menu-item-font-line-height);
@@ -95398,6 +95419,11 @@ function mV() {
   transition-duration: var(--menu-item-transition-duration);
   transition-timing-function: var(--menu-item-transition-mode);
   transition-property: var(--menu-item-transition-property);
+}
+
+:host [part="root"] {
+  transition-duration: inherit;
+  transition-timing-function: inherit;
   background-color: var(--menu-item-background-color);
   color: var(--menu-item-foreground-color);
   border: var(--menu-item-border-width) var(--menu-item-border-style) var(--menu-item-border-color);
@@ -95406,6 +95432,7 @@ function mV() {
   min-height: var(--menu-item-height);
   gap: var(--menu-item-gap);
   align-items: center;
+  transition-property: inherit;
   display: flex;
   position: relative;
   overflow: hidden;
@@ -156250,6 +156277,7 @@ function Ort(o) {
                                        .dir="${o.dir}">
                     ${O(o.hasHeader, () => k`
                     <mosaik-app-header part="header"
+                                       exportparts="toolbar:header-toolbar"
                                        .lang="${o.lang}"
                                        .dir="${o.dir}"
                                        .scrollTargetFn="${() => o.content}">
@@ -156517,13 +156545,17 @@ let Qx = zn;
 function $rt(o) {
   return k`
     <div part="root">
+        <!-- todo: add busy indicator here -->
         <mosaik-toolbar part="toolbar"
                         .appearance="${J.Plain}"
                         .dir="${o.dir}"
                         .lang="${o.lang}">
-            <slot slot="start" name="menu"></slot>
-            <slot slot="title" name="logo"></slot>
-            <slot slot="end" name="actions"></slot>
+            <slot slot="start"
+                  name="menu"></slot>
+            <slot slot="title"
+                  name="logo"></slot>
+            <slot slot="end"
+                  name="actions"></slot>
         </mosaik-toolbar>
     </div>
     `;
@@ -156616,6 +156648,36 @@ function Trt() {
   right: 0;
 }
 
+:host([data-shadow]) [part="toolbar"] {
+  box-shadow: var(--joy-elevation-regular);
+}
+
+:host([data-visible]) {
+  opacity: 1;
+  visibility: visible;
+  top: 0;
+}
+
+:host([data-fixed]) {
+  z-index: 1000;
+  position: sticky;
+  top: 24px;
+  left: 24px;
+  right: 0;
+}
+
+:host([data-animated]), :host([data-animated]) [part="toolbar"] {
+  transition-duration: var(--app-header-transition-duration);
+  transition-timing-function: var(--app-header-transition-mode);
+  transition-property: var(--app-header-transition-property);
+}
+
+:host(:not([data-visible])) {
+  top: calc((64px + env(safe-area-inset-top)) * -1);
+  opacity: 0;
+  visibility: hidden;
+}
+
     `;
 }
 function Prt() {
@@ -156861,6 +156923,10 @@ e0 = uE([
       joy: Trt,
       retro: Prt,
       cosmopolitan: Drt
+    },
+    host: {
+      part: "header",
+      exportparts: "toolbar:header-toolbar"
     }
   }),
   t0("design:paramtypes", [])
@@ -156942,10 +157008,10 @@ function Lrt() {
 }
 
 :host [part="nav"] {
+  height: 100%;
+  width: var(--drawer-width);
   flex-direction: column;
   flex: 1;
-  width: 320px;
-  height: 100%;
   display: flex;
   overflow: auto;
 }
@@ -157033,10 +157099,10 @@ function Irt() {
 }
 
 :host [part="nav"] {
+  height: 100%;
+  width: var(--drawer-width);
   flex-direction: column;
   flex: 1;
-  width: 320px;
-  height: 100%;
   display: flex;
   overflow: auto;
 }
@@ -157124,10 +157190,10 @@ function Hrt() {
 }
 
 :host [part="nav"] {
+  height: 100%;
+  width: var(--drawer-width);
   flex-direction: column;
   flex: 1;
-  width: 320px;
-  height: 100%;
   display: flex;
   overflow: auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-svelte",
-    "version": "0.0.62",
+    "version": "0.0.64",
     "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.62",
-        "@breadstone/mosaik-elements-foundation": "^0.0.62",
+        "@breadstone/mosaik-elements": "^0.0.64",
+        "@breadstone/mosaik-elements-foundation": "^0.0.64",
         "tslib": "^2.8.1"
     },
     "exports": {