@breadstone/mosaik-elements-svelte 0.0.63 → 0.0.65

package/index.mjs

@@ -5981,7 +5981,7 @@ function RB() {
   --text-padding-right: 0px;
   --text-padding-top: 0px;
   --text-shadow: var(--joy-elevation-none);
-  --text-transition-duration: .2s;
+  --text-transition-duration: var(--joy-duration-short);
   --text-transition-mode: ease;
   --text-transition-property: color, opacity, box-shadow;
   --text-translate: unset;
@@ -6711,7 +6711,7 @@ function TB() {
   --anchor-padding-left: unset;
   --anchor-padding-right: unset;
   --anchor-padding-top: unset;
-  --anchor-transition-duration: .2s;
+  --anchor-transition-duration: var(--joy-duration-short);
   --anchor-transition-mode: ease;
   --anchor-transition-property: background-color, color, border-color, opacity, box-shadow;
   --anchor-translate: unset;
@@ -7314,7 +7314,7 @@ function HB() {
   --indicator-padding-right: unset;
   --indicator-padding-top: unset;
   --indicator-shadow: var(--joy-elevation-none);
-  --indicator-transition-duration: .2s;
+  --indicator-transition-duration: var(--joy-duration-short);
   --indicator-transition-mode: ease;
   --indicator-transition-property: all;
   --indicator-translate: unset;
@@ -9786,7 +9786,7 @@ function t4() {
   --icon-padding-top: 4px;
   --icon-shadow: unset;
   --icon-size: unset;
-  --icon-transition-duration: .2s;
+  --icon-transition-duration: var(--joy-duration-short);
   --icon-transition-mode: ease;
   --icon-transition-property: all;
   --icon-translate: unset;
@@ -10630,7 +10630,7 @@ function n4() {
   --focus-ring-padding-top: unset;
   --focus-ring-shadow: var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--focus-ring-width) var(--focus-ring-color);
   --focus-ring-shape: 6px;
-  --focus-ring-transition-duration: .2s;
+  --focus-ring-transition-duration: var(--joy-duration-short);
   --focus-ring-transition-mode: ease;
   --focus-ring-transition-property: all;
   --focus-ring-translate: unset;
@@ -11366,7 +11366,7 @@ function l4() {
   --progress-ring-padding-right: 8px;
   --progress-ring-padding-top: 4px;
   --progress-ring-shadow: unset;
-  --progress-ring-transition-duration: .2s;
+  --progress-ring-transition-duration: var(--joy-duration-short);
   --progress-ring-transition-mode: ease;
   --progress-ring-transition-property: background-color, color, border-color, opacity, box-shadow;
   --progress-ring-translate: unset;
@@ -12817,7 +12817,7 @@ function m4() {
   --button-progress-thickness: var(--joy-layout-thickness);
   --button-ripple-color: unset;
   --button-ripple-duration: .2s;
-  --button-transition-duration: var(--joy-layout-transition);
+  --button-transition-duration: var(--joy-duration-short);
   --button-transition-mode: ease;
   --button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --button-translate: none;
@@ -14366,7 +14366,7 @@ function x4() {
   --button-group-padding-left: 0;
   --button-group-padding-right: 0;
   --button-group-padding-top: 0;
-  --button-group-transition-duration: .2s;
+  --button-group-transition-duration: var(--joy-duration-short);
   --button-group-transition-mode: ease;
   --button-group-transition-property: background-color, color, border-color, opacity;
   --button-group-translate: unset;
@@ -16174,7 +16174,7 @@ function E4() {
   --compound-button-ripple-color: unset;
   --compound-button-ripple-duration: .2s;
   --compound-button-shadow: var(--joy-elevation-none);
-  --compound-button-transition-duration: .2s;
+  --compound-button-transition-duration: var(--joy-duration-short);
   --compound-button-transition-mode: ease;
   --compound-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --compound-button-translate: none;
@@ -18901,7 +18901,7 @@ function yF() {
   --floating-padding-right: 0px;
   --floating-padding-top: 0px;
   --floating-shadow: var(--joy-elevation-light);
-  --floating-transition-duration: .2s;
+  --floating-transition-duration: var(--joy-duration-short);
   --floating-transition-mode: ease;
   --floating-transition-property: background-color, color, border-color, opacity, box-shadow;
   --floating-translate: unset;
@@ -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,13 +20205,13 @@ 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-duration: var(--joy-duration-short);
   --menu-transition-mode: ease;
   --menu-transition-property: background-color, color, border-color, box-shadow;
   --menu-translate: unset;
@@ -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);
 }
 
@@ -20946,7 +20955,7 @@ function AF() {
   --dropdown-button-ripple-duration: .2s;
   --dropdown-button-shadow: var(--joy-elevation-none);
   --dropdown-button-transform: none;
-  --dropdown-button-transition-duration: .2s;
+  --dropdown-button-transition-duration: var(--joy-duration-short);
   --dropdown-button-transition-mode: ease;
   --dropdown-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --dropdown-button-translate: unset;
@@ -22361,7 +22370,7 @@ function PF() {
   --fab-ripple-color: unset;
   --fab-ripple-duration: .2s;
   --fab-shadow: var(--joy-elevation-none);
-  --fab-transition-duration: var(--joy-layout-transition);
+  --fab-transition-duration: var(--joy-duration-short);
   --fab-transition-mode: ease;
   --fab-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --fab-translate: unset;
@@ -23373,7 +23382,7 @@ function MF() {
   --fab-group-padding-left: unset;
   --fab-group-padding-right: unset;
   --fab-group-padding-top: unset;
-  --fab-group-transition-duration: var(--joy-layout-transition);
+  --fab-group-transition-duration: var(--joy-duration-short);
   --fab-group-transition-mode: ease;
   --fab-group-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --fab-group-translate: unset;
@@ -23954,7 +23963,7 @@ function UF() {
   --repeat-button-ripple-color: unset;
   --repeat-button-ripple-duration: .2s;
   --repeat-button-shadow: var(--joy-elevation-none);
-  --repeat-button-transition-duration: .2s;
+  --repeat-button-transition-duration: var(--joy-duration-short);
   --repeat-button-transition-mode: ease;
   --repeat-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --repeat-button-translate: unset;
@@ -25435,7 +25444,7 @@ function VF() {
   --split-button-ripple-color: unset;
   --split-button-ripple-duration: .2s;
   --split-button-shadow: var(--joy-elevation-none);
-  --split-button-transition-duration: .2s;
+  --split-button-transition-duration: var(--joy-duration-short);
   --split-button-transition-mode: ease;
   --split-button-transition-property: background-color, color, border-color, opacity, box-shadow;
   --split-button-translate: unset;
@@ -26940,7 +26949,7 @@ function ZF() {
   --toggle-button-ripple-color: unset;
   --toggle-button-ripple-duration: .2s;
   --toggle-button-shadow: var(--joy-elevation-none);
-  --toggle-button-transition-duration: .2s;
+  --toggle-button-transition-duration: var(--joy-duration-short);
   --toggle-button-transition-mode: ease;
   --toggle-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --toggle-button-translate: none;
@@ -42437,7 +42446,7 @@ function F6() {
   --textbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --textbox-padding-top: var(--joy-layout-space);
   --textbox-shadow: var(--joy-elevation-none);
-  --textbox-transition-duration: .2s;
+  --textbox-transition-duration: var(--joy-duration-short);
   --textbox-transition-mode: ease;
   --textbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --textbox-translate: unset;
@@ -44352,7 +44361,7 @@ function X6() {
   --error-padding-right: unset;
   --error-padding-top: unset;
   --error-shadow: var(--joy-elevation-none);
-  --error-transition-duration: .2s;
+  --error-transition-duration: var(--joy-duration-short);
   --error-transition-mode: ease;
   --error-transition-property: all;
   --error-translate: unset;
@@ -44660,7 +44669,7 @@ function Q6() {
   --hint-padding-right: unset;
   --hint-padding-top: unset;
   --hint-shadow: var(--joy-elevation-none);
-  --hint-transition-duration: .2s;
+  --hint-transition-duration: var(--joy-duration-short);
   --hint-transition-mode: ease;
   --hint-transition-property: all;
   --hint-translate: unset;
@@ -45037,7 +45046,7 @@ function rU() {
   --tooltip-padding-right: var(--joy-layout-space);
   --tooltip-padding-top: var(--joy-layout-space);
   --tooltip-shadow: var(--joy-elevation-light);
-  --tooltip-transition-duration: .2s;
+  --tooltip-transition-duration: var(--joy-duration-short);
   --tooltip-transition-mode: ease;
   --tooltip-transition-property: background-color, color, border-color, opacity, box-shadow;
   --tooltip-translate: unset;
@@ -48487,7 +48496,7 @@ function DU() {
   --banner-padding-right: calc(var(--joy-layout-space) * 2);
   --banner-padding-top: calc(var(--joy-layout-space) * 2);
   --banner-shadow: var(--joy-elevation-none);
-  --banner-transition-duration: .2s;
+  --banner-transition-duration: var(--joy-duration-short);
   --banner-transition-mode: ease;
   --banner-transition-property: all;
   --banner-translate: unset;
@@ -52100,7 +52109,7 @@ function kq() {
   --card-shadow-offset-x: var(--joy-elevation-light-offset-x-0);
   --card-shadow-offset-y: var(--joy-elevation-light-offset-y-0);
   --card-shadow-spread: var(--joy-elevation-light-spread-0);
-  --card-transition-duration: .2s;
+  --card-transition-duration: var(--joy-duration-short);
   --card-transition-mode: ease;
   --card-transition-property: background-color, color, border-color, box-shadow;
   --card-translate: unset;
@@ -54081,7 +54090,7 @@ function Yq() {
   --expander-ripple-color: unset;
   --expander-ripple-duration: .2s;
   --expander-shadow: var(--joy-elevation-light);
-  --expander-transition-duration: .2s;
+  --expander-transition-duration: var(--joy-duration-short);
   --expander-transition-mode: ease;
   --expander-transition-property: background-color, color, border-color, opacity, box-shadow, transform, margin;
   --expander-translate: unset;
@@ -55088,7 +55097,7 @@ function Wq() {
   --expander-group-padding-right: 0;
   --expander-group-padding-top: 0;
   --expander-group-shadow: var(--joy-elevation-none);
-  --expander-group-transition-duration: .2s;
+  --expander-group-transition-duration: var(--joy-duration-short);
   --expander-group-transition-mode: ease-out;
   --expander-group-transition-property: margin;
   --expander-group-translate: unset;
@@ -55715,7 +55724,7 @@ function Zq() {
   --toolbar-shadow-offset-x: unset;
   --toolbar-shadow-offset-y: unset;
   --toolbar-shadow-spread: unset;
-  --toolbar-transition-duration: .2s;
+  --toolbar-transition-duration: var(--joy-duration-short);
   --toolbar-transition-mode: ease;
   --toolbar-transition-property: all;
   --toolbar-translate: unset;
@@ -58099,7 +58108,7 @@ function g8() {
   --dot-padding-top: 0px;
   --dot-shadow: unset;
   --dot-size: 16px;
-  --dot-transition-duration: .2s;
+  --dot-transition-duration: var(--joy-duration-short);
   --dot-transition-mode: ease;
   --dot-transition-property: all;
   --dot-translate: unset;
@@ -58537,7 +58546,7 @@ function x8() {
   --calendar-item-padding-top: var(--joy-layout-space);
   --calendar-item-ripple-color: unset;
   --calendar-item-ripple-duration: .2s;
-  --calendar-item-transition-duration: .2s;
+  --calendar-item-transition-duration: var(--joy-duration-short);
   --calendar-item-transition-mode: ease;
   --calendar-item-transition-property: background-color, color, border-color, opacity;
   --calendar-item-translate: unset;
@@ -61685,7 +61694,7 @@ function q8() {
   --calendar-padding-left: calc(var(--joy-layout-space) * 2);
   --calendar-padding-right: calc(var(--joy-layout-space) * 2);
   --calendar-padding-top: var(--joy-layout-space);
-  --calendar-transition-duration: .2s;
+  --calendar-transition-duration: var(--joy-duration-short);
   --calendar-transition-mode: ease;
   --calendar-transition-property: background-color, color, border-color, opacity;
   --calendar-translate: unset;
@@ -62901,7 +62910,7 @@ function X8() {
   --checkmark-padding-top: 4px;
   --checkmark-shadow: var(--joy-elevation-none);
   --checkmark-thickness: 2px;
-  --checkmark-transition-duration: .2s;
+  --checkmark-transition-duration: var(--joy-duration-short);
   --checkmark-transition-mode: ease;
   --checkmark-transition-property: background-color, color;
   --checkmark-translate: unset;
@@ -64179,7 +64188,7 @@ function Q8() {
   --checkbox-padding-right: 12px;
   --checkbox-padding-top: 8px;
   --checkbox-shadow: var(--joy-elevation-none);
-  --checkbox-transition-duration: .2s;
+  --checkbox-transition-duration: var(--joy-duration-short);
   --checkbox-transition-mode: ease;
   --checkbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --checkbox-translate: unset;
@@ -65716,7 +65725,7 @@ function hG() {
   --chip-ripple-color: unset;
   --chip-ripple-duration: .2s;
   --chip-shadow: var(--joy-elevation-none);
-  --chip-transition-duration: .2s;
+  --chip-transition-duration: var(--joy-duration-short);
   --chip-transition-mode: ease;
   --chip-transition-property: background-color, color, border-color, opacity, box-shadow;
   --chip-translate: unset;
@@ -68254,7 +68263,7 @@ function vG() {
   --choice-padding-right: calc(var(--joy-layout-space) * 2);
   --choice-padding-top: var(--joy-layout-space);
   --choice-shadow: var(--joy-elevation-none);
-  --choice-transition-duration: .2s;
+  --choice-transition-duration: var(--joy-duration-short);
   --choice-transition-mode: ease;
   --choice-transition-property: background-color, color, border-color, box-shadow;
   --choice-translate: unset;
@@ -69647,7 +69656,7 @@ function TG() {
   --color-picker-padding-right: unset;
   --color-picker-padding-top: unset;
   --color-picker-size: 24px;
-  --color-picker-transition-duration: .2s;
+  --color-picker-transition-duration: var(--joy-duration-short);
   --color-picker-transition-mode: ease;
   --color-picker-transition-property: all;
   --color-picker-translate: unset;
@@ -70025,7 +70034,7 @@ function IG() {
   --color-swatch-padding-right: unset;
   --color-swatch-padding-top: unset;
   --color-swatch-size: 24px;
-  --color-swatch-transition-duration: .2s;
+  --color-swatch-transition-duration: var(--joy-duration-short);
   --color-swatch-transition-mode: ease;
   --color-swatch-transition-property: all;
   --color-swatch-translate: unset;
@@ -70588,7 +70597,7 @@ function FG() {
   --colorbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --colorbox-padding-top: var(--joy-layout-space);
   --colorbox-shadow: var(--joy-elevation-none);
-  --colorbox-transition-duration: .2s;
+  --colorbox-transition-duration: var(--joy-duration-short);
   --colorbox-transition-mode: ease;
   --colorbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --colorbox-translate: unset;
@@ -72026,7 +72035,7 @@ function GG() {
   --popup-shadow-offset-x: unset;
   --popup-shadow-offset-y: unset;
   --popup-shadow-spread: unset;
-  --popup-transition-duration: .2s;
+  --popup-transition-duration: var(--joy-duration-short);
   --popup-transition-mode: ease;
   --popup-transition-property: background-color, border-color, box-shadow, color, transform;
   --popup-translate: unset;
@@ -72526,7 +72535,7 @@ function KG() {
   --datebox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --datebox-padding-top: var(--joy-layout-space);
   --datebox-shadow: unset;
-  --datebox-transition-duration: .2s;
+  --datebox-transition-duration: var(--joy-duration-short);
   --datebox-transition-mode: ease;
   --datebox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --datebox-translate: unset;
@@ -74304,7 +74313,7 @@ function tW() {
   --datetimebox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --datetimebox-padding-top: var(--joy-layout-space);
   --datetimebox-shadow: unset;
-  --datetimebox-transition-duration: .2s;
+  --datetimebox-transition-duration: var(--joy-duration-short);
   --datetimebox-transition-mode: ease;
   --datetimebox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --datetimebox-translate: unset;
@@ -77297,7 +77306,7 @@ function gW() {
   --list-item-ripple-color: unset;
   --list-item-ripple-duration: .2s;
   --list-item-shadow: var(--joy-elevation-none);
-  --list-item-transition-duration: .2s;
+  --list-item-transition-duration: var(--joy-duration-short);
   --list-item-transition-mode: ease;
   --list-item-transition-property: all;
   --list-item-translate: unset;
@@ -78163,7 +78172,7 @@ function jW() {
   --list-item-group-padding-right: 0px;
   --list-item-group-padding-top: 0px;
   --list-item-group-shadow: var(--joy-elevation-none);
-  --list-item-group-transition-duration: .2s;
+  --list-item-group-transition-duration: var(--joy-duration-short);
   --list-item-group-transition-mode: ease;
   --list-item-group-transition-property: all;
   --list-item-group-translate: unset;
@@ -78487,7 +78496,7 @@ function EW() {
   --list-padding-right: 16px;
   --list-padding-top: 8px;
   --list-shadow: var(--joy-elevation-none);
-  --list-transition-duration: .2s;
+  --list-transition-duration: var(--joy-duration-short);
   --list-transition-mode: ease;
   --list-transition-property: all;
   --list-translate: unset;
@@ -78900,7 +78909,7 @@ function OW() {
   --table-padding-right: calc(var(--joy-layout-space) * 2);
   --table-padding-top: var(--joy-layout-space);
   --table-shadow: var(--joy-elevation-none);
-  --table-transition-duration: .2s;
+  --table-transition-duration: var(--joy-duration-short);
   --table-transition-mode: ease;
   --table-transition-property: all;
   --table-translate: unset;
@@ -81641,7 +81650,7 @@ function KW() {
   --numberbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --numberbox-padding-top: var(--joy-layout-space);
   --numberbox-shadow: unset;
-  --numberbox-transition-duration: .2s;
+  --numberbox-transition-duration: var(--joy-duration-short);
   --numberbox-transition-mode: ease;
   --numberbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --numberbox-translate: unset;
@@ -83033,7 +83042,7 @@ function t7() {
   --passwordbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --passwordbox-padding-top: var(--joy-layout-space);
   --passwordbox-shadow: unset;
-  --passwordbox-transition-duration: .2s;
+  --passwordbox-transition-duration: var(--joy-duration-short);
   --passwordbox-transition-mode: ease;
   --passwordbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --passwordbox-translate: unset;
@@ -84311,7 +84320,7 @@ function n7() {
   --pinbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --pinbox-padding-top: var(--joy-layout-space);
   --pinbox-shadow: var(--joy-elevation-none);
-  --pinbox-transition-duration: .2s;
+  --pinbox-transition-duration: var(--joy-duration-short);
   --pinbox-transition-mode: ease;
   --pinbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --pinbox-translate: unset;
@@ -85191,7 +85200,7 @@ function l7() {
   --radio-padding-right: 12px;
   --radio-padding-top: 8px;
   --radio-shadow: unset;
-  --radio-transition-duration: .2s;
+  --radio-transition-duration: var(--joy-duration-short);
   --radio-transition-mode: ease;
   --radio-transition-property: all;
   --radio-translate: unset;
@@ -87327,7 +87336,7 @@ function w7() {
   --divider-padding-top: 4px;
   --divider-shadow: var(--joy-elevation-none);
   --divider-thickness: var(--joy-layout-thickness);
-  --divider-transition-duration: .2s;
+  --divider-transition-duration: var(--joy-duration-short);
   --divider-transition-mode: ease;
   --divider-transition-property: background-color, color;
   --divider-translate: unset;
@@ -88097,7 +88106,7 @@ function C7() {
   --richtextbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --richtextbox-padding-top: var(--joy-layout-space);
   --richtextbox-shadow: unset;
-  --richtextbox-transition-duration: .2s;
+  --richtextbox-transition-duration: var(--joy-duration-short);
   --richtextbox-transition-mode: ease;
   --richtextbox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --richtextbox-translate: unset;
@@ -89547,7 +89556,7 @@ function $7() {
   --searchbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --searchbox-padding-top: var(--joy-layout-space);
   --searchbox-shadow: var(--joy-elevation-none);
-  --searchbox-transition-duration: .2s;
+  --searchbox-transition-duration: var(--joy-duration-short);
   --searchbox-transition-mode: ease;
   --searchbox-transition-property: all;
   --searchbox-translate: unset;
@@ -90876,7 +90885,7 @@ function H7() {
   --select-item-ripple-color: unset;
   --select-item-ripple-duration: .2s;
   --select-item-shadow: var(--joy-elevation-none);
-  --select-item-transition-duration: .2s;
+  --select-item-transition-duration: var(--joy-duration-short);
   --select-item-transition-mode: ease;
   --select-item-transition-property: all;
   --select-item-translate: unset;
@@ -91345,7 +91354,7 @@ function F7() {
   --select-item-group-padding-right: 16px;
   --select-item-group-padding-top: 8px;
   --select-item-group-shadow: var(--joy-elevation-none);
-  --select-item-group-transition-duration: .2s;
+  --select-item-group-transition-duration: var(--joy-duration-short);
   --select-item-group-transition-mode: ease;
   --select-item-group-transition-property: all;
   --select-item-group-translate: unset;
@@ -91696,7 +91705,7 @@ function q7() {
   --select-padding-right: 12px;
   --select-padding-top: 8px;
   --select-shadow: unset;
-  --select-transition-duration: .2s;
+  --select-transition-duration: var(--joy-duration-short);
   --select-transition-mode: ease;
   --select-transition-property: all;
   --select-translate: unset;
@@ -93378,7 +93387,7 @@ function nV() {
   --signaturepad-padding-right: unset;
   --signaturepad-padding-top: unset;
   --signaturepad-shadow: unset;
-  --signaturepad-transition-duration: .2s;
+  --signaturepad-transition-duration: var(--joy-duration-short);
   --signaturepad-transition-mode: ease;
   --signaturepad-transition-property: all;
   --signaturepad-translate: unset;
@@ -95029,7 +95038,7 @@ function fV() {
   --menu-item-ripple-color: unset;
   --menu-item-ripple-duration: .2s;
   --menu-item-shadow: var(--joy-elevation-none);
-  --menu-item-transition-duration: .2s;
+  --menu-item-transition-duration: var(--joy-duration-short);
   --menu-item-transition-mode: ease;
   --menu-item-transition-property: background-color, color, border-color, opacity, box-shadow;
   --menu-item-translate: unset;
@@ -95837,7 +95846,7 @@ function vV() {
   --timebox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --timebox-padding-top: var(--joy-layout-space);
   --timebox-shadow: unset;
-  --timebox-transition-duration: .2s;
+  --timebox-transition-duration: var(--joy-duration-short);
   --timebox-transition-mode: ease;
   --timebox-transition-property: background-color, color, border-color, opacity, box-shadow;
   --timebox-translate: unset;
@@ -101207,7 +101216,7 @@ function d9() {
   --page-menu-padding-right: 12px;
   --page-menu-padding-top: 8px;
   --page-menu-shadow: var(--joy-elevation-none);
-  --page-menu-transition-duration: .2s;
+  --page-menu-transition-duration: var(--joy-duration-short);
   --page-menu-transition-mode: ease;
   --page-menu-transition-property: all;
   --page-menu-translate: unset;
@@ -105215,7 +105224,7 @@ function eX() {
   --image-padding-right: 16px;
   --image-padding-top: 16px;
   --image-shadow: unset;
-  --image-transition-duration: .2s;
+  --image-transition-duration: var(--joy-duration-short);
   --image-transition-mode: ease;
   --image-transition-property: color, background-color, border-color, opacity, box-shadow;
   --image-translate: unset;
@@ -106101,7 +106110,7 @@ function aX() {
   --avatar-shadow-offset-x: unset;
   --avatar-shadow-offset-y: unset;
   --avatar-shadow-spread: unset;
-  --avatar-transition-duration: .2s;
+  --avatar-transition-duration: var(--joy-duration-short);
   --avatar-transition-mode: ease;
   --avatar-transition-property: background-color, color, border-color, opacity, box-shadow;
   --avatar-translate: unset;
@@ -106949,7 +106958,7 @@ function dX() {
   --avatar-group-shadow-offset-x: unset;
   --avatar-group-shadow-offset-y: unset;
   --avatar-group-shadow-spread: unset;
-  --avatar-group-transition-duration: .2s;
+  --avatar-group-transition-duration: var(--joy-duration-short);
   --avatar-group-transition-mode: ease;
   --avatar-group-transition-property: margin-left;
   --avatar-group-translate: unset;
@@ -107399,7 +107408,7 @@ function uX() {
   --badge-padding-right: 8px;
   --badge-padding-top: 4px;
   --badge-size: unset;
-  --badge-transition-duration: .2s;
+  --badge-transition-duration: var(--joy-duration-short);
   --badge-transition-mode: ease;
   --badge-transition-property: background-color, color, border-color, opacity, box-shadow;
   --badge-translate: unset;
@@ -111318,7 +111327,7 @@ function JX() {
   --chat-message-padding-right: calc(var(--joy-layout-space) * 2);
   --chat-message-padding-top: var(--joy-layout-space);
   --chat-message-shadow: 0;
-  --chat-message-transition-duration: .2s;
+  --chat-message-transition-duration: var(--joy-duration-short);
   --chat-message-transition-mode: ease;
   --chat-message-transition-property: all;
   --chat-message-translate: unset;
@@ -111911,7 +111920,7 @@ function oK() {
   --chat-padding-right: calc(var(--joy-layout-space) * 2);
   --chat-padding-top: var(--joy-layout-space);
   --chat-shadow: 0;
-  --chat-transition-duration: .2s;
+  --chat-transition-duration: var(--joy-duration-short);
   --chat-transition-mode: ease;
   --chat-transition-property: all;
   --chat-translate: unset;
@@ -113147,7 +113156,7 @@ function cK() {
   --color-thumb-padding-right: unset;
   --color-thumb-padding-top: unset;
   --color-thumb-size: 24px;
-  --color-thumb-transition-duration: .2s;
+  --color-thumb-transition-duration: var(--joy-duration-short);
   --color-thumb-transition-mode: ease;
   --color-thumb-transition-property: all;
   --color-thumb-translate: unset;
@@ -114530,7 +114539,7 @@ function xK() {
   --color-swatch-group-padding-right: 8px;
   --color-swatch-group-padding-top: 4px;
   --color-swatch-group-shadow: unset;
-  --color-swatch-group-transition-duration: .2s;
+  --color-swatch-group-transition-duration: var(--joy-duration-short);
   --color-swatch-group-transition-mode: ease;
   --color-swatch-group-transition-property: margin-left;
   --color-swatch-group-translate: unset;
@@ -115280,7 +115289,7 @@ function CK() {
   --persona-padding-top: 4px;
   --persona-presence-color: unset;
   --persona-shadow: unset;
-  --persona-transition-duration: .2s;
+  --persona-transition-duration: var(--joy-duration-short);
   --persona-transition-mode: ease;
   --persona-transition-property: background-color, color, border-color, opacity, box-shadow;
   --persona-translate: unset;
@@ -116756,7 +116765,7 @@ function HK() {
   --video-padding-right: 16px;
   --video-padding-top: 16px;
   --video-shadow: unset;
-  --video-transition-duration: .2s;
+  --video-transition-duration: var(--joy-duration-short);
   --video-transition-mode: ease;
   --video-transition-property: color, background-color, border-color, opacity, box-shadow;
   --video-translate: unset;
@@ -118526,7 +118535,7 @@ function ZK() {
   --backdrop-padding-left: unset;
   --backdrop-padding-right: unset;
   --backdrop-padding-top: unset;
-  --backdrop-transition-duration: .2s;
+  --backdrop-transition-duration: var(--joy-duration-short);
   --backdrop-transition-mode: ease;
   --backdrop-transition-property: opacity, backdrop-filter;
   --backdrop-translate: unset;
@@ -122451,7 +122460,7 @@ function WZ() {
   --dialog-shadow-offset-x: var(--joy-elevation-light-offset-x-0);
   --dialog-shadow-offset-y: var(--joy-elevation-light-offset-y-0);
   --dialog-shadow-spread: var(--joy-elevation-light-spread-0);
-  --dialog-transition-duration: .2s;
+  --dialog-transition-duration: var(--joy-duration-short);
   --dialog-transition-mode: ease;
   --dialog-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
   --dialog-translate: unset;
@@ -123351,7 +123360,7 @@ function eJ() {
   --drawer-padding-right: 16px;
   --drawer-padding-top: 8px;
   --drawer-shadow: var(--joy-elevation-none);
-  --drawer-transition-duration: .2s;
+  --drawer-transition-duration: var(--joy-duration-short);
   --drawer-transition-mode: ease;
   --drawer-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
   --drawer-translate: unset;
@@ -126731,7 +126740,7 @@ function $J() {
   --tost-padding-right: 16px;
   --tost-padding-top: 8px;
   --tost-shadow: var(--joy-elevation-bold);
-  --tost-transition-duration: .2s;
+  --tost-transition-duration: var(--joy-duration-short);
   --tost-transition-mode: ease;
   --tost-transition-property: background-color, color, border-color, opacity, box-shadow, margin;
   --tost-translate: unset;
@@ -131245,7 +131254,7 @@ function xQ() {
   --jumbotron-padding-right: 32px;
   --jumbotron-padding-top: 32px;
   --jumbotron-shadow: unset;
-  --jumbotron-transition-duration: .2s;
+  --jumbotron-transition-duration: var(--joy-duration-short);
   --jumbotron-transition-mode: ease;
   --jumbotron-transition-property: all;
   --jumbotron-translate: unset;
@@ -133275,7 +133284,7 @@ function MQ() {
   --number-counter-padding-left: 0px;
   --number-counter-padding-right: 0px;
   --number-counter-padding-top: 0px;
-  --number-counter-transition-duration: .2s;
+  --number-counter-transition-duration: var(--joy-duration-short);
   --number-counter-transition-mode: ease;
   --number-counter-transition-property: color, opacity, box-shadow;
   --number-counter-translate: unset;
@@ -133841,7 +133850,7 @@ function UQ() {
   --number-padding-left: 0px;
   --number-padding-right: 0px;
   --number-padding-top: 0px;
-  --number-transition-duration: .2s;
+  --number-transition-duration: var(--joy-duration-short);
   --number-transition-mode: ease;
   --number-transition-property: color, opacity, box-shadow;
   --number-translate: unset;
@@ -134629,7 +134638,7 @@ function QQ() {
   --ribbon-padding-right: 8px;
   --ribbon-padding-top: 4px;
   --ribbon-shadow: unset;
-  --ribbon-transition-duration: .2s;
+  --ribbon-transition-duration: var(--joy-duration-short);
   --ribbon-transition-mode: ease;
   --ribbon-transition-property: background-color foreground-color border-color;
   --ribbon-translate: unset;
@@ -136821,7 +136830,7 @@ function xtt() {
   --tick-bar-tick-size: 2px;
   --tick-bar-tick-text-gap: 4px;
   --tick-bar-tick-width: var(--joy-layout-thickness);
-  --tick-bar-transition-duration: .2s;
+  --tick-bar-transition-duration: var(--joy-duration-short);
   --tick-bar-transition-mode: ease;
   --tick-bar-transition-property: background-color, color, border-color, opacity, transform;
   --tick-bar-translate: unset;
@@ -138922,11 +138931,11 @@ function Ltt() {
   --slider-tooltip-padding-right: var(--joy-layout-space);
   --slider-tooltip-padding-top: var(--joy-layout-space);
   --slider-tooltip-shadow: var(--joy-elevation-light);
-  --slider-tooltip-transition-duration: .2s;
+  --slider-tooltip-transition-duration: var(--joy-duration-short);
   --slider-tooltip-transition-mode: ease;
   --slider-tooltip-transition-property: background-color, color, border-color, opacity, transform;
   --slider-track-size: 4px;
-  --slider-transition-duration: .2s;
+  --slider-transition-duration: var(--joy-duration-short);
   --slider-transition-mode: ease;
   --slider-transition-property: background-color, color, border-color, opacity, transform;
   --slider-translate: unset;
@@ -143051,7 +143060,7 @@ function met() {
   --combo-item-ripple-color: unset;
   --combo-item-ripple-duration: .2s;
   --combo-item-shadow: var(--joy-elevation-none);
-  --combo-item-transition-duration: .2s;
+  --combo-item-transition-duration: var(--joy-duration-short);
   --combo-item-transition-mode: ease;
   --combo-item-transition-property: background-color, color, border-color, opacity, box-shadow;
   --combo-item-translate: unset;
@@ -144422,7 +144431,7 @@ function Oet() {
   --table-cell-padding-right: calc(var(--joy-layout-space) * 2);
   --table-cell-padding-top: 0px;
   --table-cell-shadow: var(--joy-elevation-none);
-  --table-cell-transition-duration: .2s;
+  --table-cell-transition-duration: var(--joy-duration-short);
   --table-cell-transition-mode: ease;
   --table-cell-transition-property: all;
   --table-cell-translate: unset;
@@ -145095,7 +145104,7 @@ function Bet() {
   --table-header-padding-right: var(--joy-layout-space);
   --table-header-padding-top: calc(var(--joy-layout-space) / 2);
   --table-header-shadow: var(--joy-elevation-none);
-  --table-header-transition-duration: .2s;
+  --table-header-transition-duration: var(--joy-duration-short);
   --table-header-transition-mode: ease;
   --table-header-transition-property: all;
   --table-header-translate: unset;
@@ -145392,7 +145401,7 @@ function Wet() {
   --table-row-padding-right: 0;
   --table-row-padding-top: var(--joy-layout-space);
   --table-row-shadow: var(--joy-elevation-none);
-  --table-row-transition-duration: .2s;
+  --table-row-transition-duration: var(--joy-duration-short);
   --table-row-transition-mode: ease;
   --table-row-transition-property: all;
   --table-row-translate: unset;
@@ -145886,7 +145895,7 @@ function Qet() {
   --menu-item-group-ripple-color: unset;
   --menu-item-group-ripple-duration: .2s;
   --menu-item-group-shadow: var(--joy-elevation-none);
-  --menu-item-group-transition-duration: .2s;
+  --menu-item-group-transition-duration: var(--joy-duration-short);
   --menu-item-group-transition-mode: ease;
   --menu-item-group-transition-property: background-color, color, border-color, opacity, box-shadow;
   --menu-item-group-translate: unset;
@@ -148339,7 +148348,7 @@ function bot() {
   --tab-strip-item-shadow: var(--joy-elevation-none);
   --tab-strip-item-size: 56px;
   --tab-strip-item-thickness: 4px;
-  --tab-strip-item-transition-duration: .2s;
+  --tab-strip-item-transition-duration: var(--joy-duration-short);
   --tab-strip-item-transition-mode: ease;
   --tab-strip-item-transition-property: background-color, color, border-color, opacity, box-shadow, transform;
   --tab-strip-item-translate: unset;
@@ -149074,7 +149083,7 @@ function vot() {
   --tab-strip-padding-left: var(--joy-layout-space);
   --tab-strip-padding-right: var(--joy-layout-space);
   --tab-strip-padding-top: var(--joy-layout-space);
-  --tab-strip-transition-duration: .2s;
+  --tab-strip-transition-duration: var(--joy-duration-short);
   --tab-strip-transition-mode: ease;
   --tab-strip-transition-property: background-color, color, border-color, opacity, box-shadow, transform;
   --tab-strip-translate: unset;
@@ -150210,7 +150219,7 @@ function Sot() {
   --tab-strip-padding-left: 0;
   --tab-strip-padding-right: 0;
   --tab-strip-padding-top: 0;
-  --tab-transition-duration: .2s;
+  --tab-transition-duration: var(--joy-duration-short);
   --tab-transition-mode: ease;
   --tab-transition-property: background-color, color, border-color, opacity, box-shadow, transform;
   --tab-translate: unset;
@@ -151425,7 +151434,7 @@ function Lot() {
   --table-body-padding-right: var(--joy-layout-space);
   --table-body-padding-top: calc(var(--joy-layout-space) / 2);
   --table-body-shadow: var(--joy-elevation-none);
-  --table-body-transition-duration: .2s;
+  --table-body-transition-duration: var(--joy-duration-short);
   --table-body-transition-mode: ease;
   --table-body-transition-property: all;
   --table-body-translate: unset;
@@ -151723,7 +151732,7 @@ function Fot() {
   --table-footer-padding-right: var(--joy-layout-space);
   --table-footer-padding-top: calc(var(--joy-layout-space) / 2);
   --table-footer-shadow: var(--joy-elevation-none);
-  --table-footer-transition-duration: .2s;
+  --table-footer-transition-duration: var(--joy-duration-short);
   --table-footer-transition-mode: ease;
   --table-footer-transition-property: all;
   --table-footer-translate: unset;
@@ -152058,7 +152067,7 @@ function Xot() {
   --tree-item-padding-right: 16px;
   --tree-item-padding-top: 8px;
   --tree-item-shadow: var(--joy-elevation-none);
-  --tree-item-transition-duration: .2s;
+  --tree-item-transition-duration: var(--joy-duration-short);
   --tree-item-transition-mode: ease;
   --tree-item-transition-property: background-color, color, border-color, box-shadow;
   --tree-item-translate: unset;
@@ -156268,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}">
@@ -156567,11 +156577,12 @@ function Trt() {
   --app-header-font-weight: var(--joy-typography-headline6-font-weight);
   --app-header-foreground-color: var(--joy-scheme-foreground);
   --app-header-gap: var(--joy-layout-space);
+  --app-header-line-thickness: var(--joy-layout-thickness);
   --app-header-padding-bottom: unset;
   --app-header-padding-left: unset;
   --app-header-padding-right: unset;
   --app-header-padding-top: unset;
-  --app-header-transition-duration: var(--joy-layout-transition);
+  --app-header-transition-duration: var(--joy-duration-short);
   --app-header-transition-mode: ease;
   --app-header-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-header-translate: unset;
@@ -156631,7 +156642,7 @@ function Trt() {
 :host [part="root"]:after {
   content: "";
   background-color: var(--app-header-border-color);
-  height: calc(var(--app-header-border-width) / 2);
+  height: var(--app-header-line-thickness);
   position: absolute;
   bottom: 0;
   left: 0;
@@ -156687,6 +156698,7 @@ function Prt() {
   --app-header-font-weight: var(--retro-typography-headline6-font-weight);
   --app-header-foreground-color: var(--retro-scheme-foreground);
   --app-header-gap: var(--retro-layout-space);
+  --app-header-line-thickness: var(--retro-layout-thickness);
   --app-header-padding-bottom: unset;
   --app-header-padding-left: unset;
   --app-header-padding-right: unset;
@@ -156777,6 +156789,7 @@ function Drt() {
   --app-header-font-weight: var(--cosmopolitan-typography-headline6-font-weight);
   --app-header-foreground-color: var(--cosmopolitan-scheme-foreground);
   --app-header-gap: var(--cosmopolitan-layout-space);
+  --app-header-line-thickness: var(--cosmopolitan-layout-thickness);
   --app-header-padding-bottom: unset;
   --app-header-padding-left: unset;
   --app-header-padding-right: unset;
@@ -156913,6 +156926,10 @@ e0 = uE([
       joy: Trt,
       retro: Prt,
       cosmopolitan: Drt
+    },
+    host: {
+      part: "header",
+      exportparts: "toolbar:header-toolbar"
     }
   }),
   t0("design:paramtypes", [])
@@ -156930,11 +156947,12 @@ function Lrt() {
   --app-font-weight: var(--joy-typography-body1-font-weight);
   --app-foreground-color: var(--joy-scheme-foreground);
   --app-gap: var(--joy-layout-space);
+  --app-line-thickness: var(--joy-layout-thickness);
   --app-padding-bottom: unset;
   --app-padding-left: unset;
   --app-padding-right: unset;
   --app-padding-top: unset;
-  --app-transition-duration: var(--joy-layout-transition);
+  --app-transition-duration: var(--joy-duration-short);
   --app-transition-mode: ease;
   --app-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-translate: unset;
@@ -157006,6 +157024,10 @@ function Lrt() {
   height: calc(100% - 64px);
 }
 
+:host [part="header"] {
+  --app-header-line-thickness: var(--app-line-thickness);
+}
+
     `;
 }
 function Irt() {
@@ -157021,6 +157043,7 @@ function Irt() {
   --app-font-weight: var(--retro-typography-body1-font-weight);
   --app-foreground-color: var(--retro-scheme-foreground);
   --app-gap: var(--retro-layout-space);
+  --app-line-thickness: var(--retro-layout-thickness);
   --app-padding-bottom: unset;
   --app-padding-left: unset;
   --app-padding-right: unset;
@@ -157112,6 +157135,7 @@ function Hrt() {
   --app-font-weight: var(--cosmopolitan-typography-body1-font-weight);
   --app-foreground-color: var(--cosmopolitan-scheme-foreground);
   --app-gap: var(--cosmopolitan-layout-space);
+  --app-line-thickness: var(--cosmopolitan-layout-thickness);
   --app-padding-bottom: unset;
   --app-padding-left: unset;
   --app-padding-right: unset;
@@ -158552,7 +158576,7 @@ function Qrt() {
   --router-anchor-padding-left: unset;
   --router-anchor-padding-right: unset;
   --router-anchor-padding-top: unset;
-  --router-anchor-transition-duration: var(--joy-layout-transition);
+  --router-anchor-transition-duration: var(--joy-duration-short);
   --router-anchor-transition-mode: ease;
   --router-anchor-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --router-anchor-translate: unset;

package/package.json

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