@breadstone/mosaik-elements-svelte 0.0.62 → 0.0.63

package/index.mjs

@@ -95061,7 +95061,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 +95073,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 +95086,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 +95252,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 +95264,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 +95277,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 +95398,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 +95410,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 +95423,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;
@@ -156517,13 +156535,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 +156638,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() {
@@ -156942,10 +156994,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 +157085,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 +157176,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.63",
     "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.63",
+        "@breadstone/mosaik-elements-foundation": "^0.0.63",
         "tslib": "^2.8.1"
     },
     "exports": {