@breadstone/mosaik-elements-foundation 0.1.23 → 0.1.26

package/Controls/Components/Buttons/Button/Themes/ButtonElement.Joy.js

@@ -43,12 +43,12 @@ export function buttonElementJoyStyle() {
   --button-progress-ring-width: var(--joy-layout-thickness);
   --button-ripple-color: unset;
   --button-ripple-duration: .2s;
-  --button-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --button-shadow-blur: var(--joy-elevation-semilight-blur);
-  --button-shadow-color: var(--joy-elevation-semilight-color);
-  --button-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --button-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --button-shadow-spread: var(--joy-elevation-semilight-spread);
+  --button-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --button-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --button-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --button-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --button-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --button-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --button-transition-duration: var(--mosaik-duration-short);
   --button-transition-mode: ease;
   --button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Buttons/CompoundButton/Themes/CompoundButtonElement.Joy.js

@@ -43,12 +43,12 @@ export function compoundButtonElementJoyStyle() {
   --compound-button-progress-ring-width: var(--joy-layout-thickness);
   --compound-button-ripple-color: unset;
   --compound-button-ripple-duration: .2s;
-  --compound-button-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --compound-button-shadow-blur: var(--joy-elevation-semilight-blur);
-  --compound-button-shadow-color: var(--joy-elevation-semilight-color);
-  --compound-button-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --compound-button-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --compound-button-shadow-spread: var(--joy-elevation-semilight-spread);
+  --compound-button-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --compound-button-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --compound-button-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --compound-button-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --compound-button-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --compound-button-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --compound-button-transition-duration: var(--mosaik-duration-short);
   --compound-button-transition-mode: ease;
   --compound-button-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Buttons/FloatingActionButton/Themes/FloatingActionButtonElement.Joy.js

@@ -42,12 +42,12 @@ export function floatingActionButtonElementJoyStyle() {
   --fab-progress-ring-width: var(--joy-layout-thickness);
   --fab-ripple-color: unset;
   --fab-ripple-duration: .2s;
-  --fab-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --fab-shadow-blur: var(--joy-elevation-semilight-blur);
-  --fab-shadow-color: var(--joy-elevation-semilight-color);
-  --fab-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --fab-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --fab-shadow-spread: var(--joy-elevation-semilight-spread);
+  --fab-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --fab-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --fab-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --fab-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --fab-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --fab-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --fab-transition-duration: var(--mosaik-duration-short);
   --fab-transition-mode: ease;
   --fab-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Buttons/SplitButton/SplitButtonElement.d.ts

@@ -21,6 +21,7 @@ declare const SplitButtonElement_base: (abstract new (...args: Array<any>) => im
  * @slot label - The label slot.
  * @slot overlay - The overlay slot (useful for badge).
  *
+ * @csspart ${part} - The ${part} part.
  * @csspart button - The button part of the split button.
  * @csspart buttonSplit - The part of the button responsible for splitting the button from the dropdown.
  * @csspart focusRingMain - The focusRingMain part.

package/Controls/Components/Buttons/SplitButton/SplitButtonElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAoBnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;;AAQ3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GG;AACH,qBAwBa,kBACT,SAAQ,uBACR,YAAW,wBAAwB,EAAE,aAAa;IAIlD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAyB;IACjE,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAuB;IAM7D;;OAEG;;IAwBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAMD;;OAEG;IAEH,SAAS,CAAC,+BAA+B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAgBhF,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAOjE,OAAO,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAInC;;OAEG;IACH,OAAO,CAAC,gBAAgB;CAM3B;AAED;;GAEG;AACH,yBAAiB,kBAAkB,CAAC;IAChC,KAAY,KAAK,GAAG,wBAAwB,CAAC;CAChD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,kBAAkB,CAAC;KAC7C;CACJ"}
+{"version":3,"file":"SplitButtonElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAoBnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;;AAQ3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4GG;AACH,qBAwBa,kBACT,SAAQ,uBACR,YAAW,wBAAwB,EAAE,aAAa;IAIlD,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAyB;IACjE,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAuB;IAM7D;;OAEG;;IAwBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAMD;;OAEG;IAEH,SAAS,CAAC,+BAA+B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAgBhF,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;IAOjE,OAAO,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IASnC;;OAEG;IACH,OAAO,CAAC,gBAAgB;CAM3B;AAED;;GAEG;AACH,yBAAiB,kBAAkB,CAAC;IAChC,KAAY,KAAK,GAAG,wBAAwB,CAAC;CAChD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,kBAAkB,CAAC;KAC7C;CACJ"}

package/Controls/Components/Buttons/SplitButton/SplitButtonElement.js

@@ -56,6 +56,7 @@ import { splitButtonElementMemphisStyle } from './Themes/SplitButtonElement.Memp
  * @slot label - The label slot.
  * @slot overlay - The overlay slot (useful for badge).
  *
+ * @csspart ${part} - The ${part} part.
  * @csspart button - The button part of the split button.
  * @csspart buttonSplit - The part of the button responsible for splitting the button from the dropdown.
  * @csspart focusRingMain - The focusRingMain part.
@@ -209,6 +210,10 @@ let SplitButtonElement = SplitButtonElement_1 = class SplitButtonElement extends
         }
     }
     onSplit(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
         this.toggle();
     }
     /**

package/Controls/Components/Buttons/SplitButton/SplitButtonElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButtonElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;;AAElB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAsB,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8CAA8C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,mCAAmC,EAAE,MAAM,0CAA0C,CAAC;AAC/F,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GG;AAyBI,IAAM,kBAAkB,0BAAxB,MAAM,kBACT,SAAQ,SAAS,CAAC,UAAU,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAGpI,iBAAiB;IAEA,uBAAuB,CAAyB;IAChD,qBAAqB,CAAuB;IAE7D,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,uBAAuB,GAAG,IAAI,sBAAsB,CAAC,IAAI,EAAE;YAC5D,WAAW,EAAE,IAAI;YACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;SAC1C,CAAC,CAAC;QACH,IAAI,CAAC,qBAAqB,GAAG,IAAI,oBAAoB,CAAC,IAAI,EAAE;YACxD,QAAQ,EAAE,EAAE;YACZ,cAAc,EAAE,qBAAqB;YACrC,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE;gBACpB,OAAO,CAAC,YAAY,CAAC,GAAG,oBAAkB,CAAC,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC;YACpE,CAAC;SACJ,CAAC,CAAC;QAEH,uEAAuE;QACvE,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,CAAC;IACvD,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,qBAAqB,CAAC;IACjC,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;OAEG;IAEO,+BAA+B,CAAC,KAAe,EAAE,IAAc;QACrE,sCAAsC;QACtC,IAAI,IAAI,EAAE,CAAC;YACP,2BAA2B;YAC3B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,IAAI,CAAC,KAAK,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YAED,IAAI,CAAC,uBAAuB,CAAC,OAAO,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,uBAAuB,CAAC,SAAS,EAAE,CAAC;QAC7C,CAAC;IACL,CAAC;IAGS,uBAAuB,CAAC,KAAe,EAAE,IAAc;QAC7D,2BAA2B;QAC3B,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAChC,CAAC;IACL,CAAC;IAEM,OAAO,CAAC,CAAa;QACxB,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAED;;OAEG;IACK,gBAAgB;QACpB,IAAI,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC;CAIJ,CAAA;AApCa;IADT,KAAK,CAAC,gBAAgB,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;;;;yEAcvD;AAGS;IADT,KAAK,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;;;;iEAM/C;AAhFQ,kBAAkB;IAxB9B,SAAS,CAAC;QACP,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,0BAA0B;QACpC,MAAM,EAAE;YACJ,GAAG,EAAE,0BAA0B;YAC/B,OAAO,EAAE,8BAA8B;YACvC,YAAY,EAAE,mCAAmC;SACpD;QACD,OAAO,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,cAAc,EAAE,IAAI;SACvB;QACD,OAAO,EAAE;YACL,YAAY;YACZ,WAAW;YACX,aAAa;YACb,gBAAgB;YAChB,WAAW;YACX,mBAAmB;YACnB,eAAe;YACf,WAAW;YACX,aAAa;SAChB;KACJ,CAAC;;GACW,kBAAkB,CA+F9B"}
+{"version":3,"file":"SplitButtonElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButtonElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAOjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI/D;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,kBAAkB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CA+G7F"}
+{"version":3,"file":"SplitButtonElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAOjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAO/D;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,kBAAkB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAoH7F"}

package/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.js

@@ -1,4 +1,5 @@
 // #region Imports
+import { stop } from '@breadstone/mosaik-elements';
 import { html } from '../../../../Dom/Html';
 import { Icons } from '../../../../Resources/Icons';
 import { when } from '../../../Directives/Directives';
@@ -6,7 +7,6 @@ import { Appearance } from '../../../Types/Appearance';
 import { IconPosition } from '../../../Types/IconPosition';
 import { Placement } from '../../../Types/Placement';
 import { Size } from '../../../Types/Size';
-// #endregion
 /**
  * The template of the `SplitButtonElement`.
  *
@@ -14,18 +14,19 @@ import { Size } from '../../../Types/Size';
  */
 export function splitButtonElementTemplate(e) {
     return html `
-        ${when(!e.disabled, () => html `
-        <mosaik-focus-ring part="focusRingMain"
-                           .lang="${e.lang}"
-                           .dir="${e.dir}"
-                           .variant="${e.variant}"
-                           .visible="${e.isFocused}"
-                           .controlled="${'manual'}"
-                           .for="${'button'}"></mosaik-focus-ring>
-        `)}
         <button id="button"
                 part="button"
-                type="${e.type}">
+                type="${e.type}"
+                @focusin="${(x) => showFocusRing(x, 'focusRingMain', 'focusRingSplit')}"
+                @focusout="${(x) => hideFocusRing(x, 'focusRingMain')}">
+            ${when(!e.disabled, () => html `
+            <mosaik-focus-ring part="focusRingMain"
+                               .lang="${e.lang}"
+                               .dir="${e.dir}"
+                               .variant="${e.variant}"
+                               .controlled="${'manual'}"
+                               .for="${'button'}"></mosaik-focus-ring>
+            `)}
             ${when(!e.disabled && e.ripple, () => html `
             <mosaik-ripple part="rippleMain"
                            .lang="${e.lang}"
@@ -77,12 +78,16 @@ export function splitButtonElementTemplate(e) {
         <button part="buttonSplit"
                 id="button_split"
                 type="button"
-                @click="${(x) => e.onSplit(x)}">
+                ?disabled="${e.disabled}"
+                @focusin="${(x) => showFocusRing(x, 'focusRingSplit', 'focusRingMain')}"
+                @focusout="${(x) => hideFocusRing(x, 'focusRingSplit')}"
+                @click="${(x) => stop(x, () => e.onSplit(x))}">
             ${when(!e.disabled, () => html `
             <mosaik-focus-ring part="focusRingSplit"
                                .lang="${e.lang}"
                                .dir="${e.dir}"
                                .variant="${e.variant}"
+                               .controlled="${'manual'}"
                                .for="${'button_split'}"></mosaik-focus-ring>
             `)}
             ${when(!e.disabled && e.ripple, () => html `
@@ -124,4 +129,18 @@ export function splitButtonElementTemplate(e) {
         </mosaik-floating>
     `;
 }
+function showFocusRing(event, focusedPart, blurredPart) {
+    setFocusRingVisible(event, focusedPart, true);
+    setFocusRingVisible(event, blurredPart, false);
+}
+function hideFocusRing(event, part) {
+    setFocusRingVisible(event, part, false);
+}
+function setFocusRingVisible(event, part, visible) {
+    const root = event.currentTarget.getRootNode();
+    const focusRing = root.querySelector(`[part="${part}"]`);
+    if (focusRing) {
+        focusRing.visible = visible;
+    }
+}
 //# sourceMappingURL=SplitButtonElementTemplate.js.map

package/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButtonElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAG3C,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAA+B,CAAI;IACzE,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;oCAEF,CAAC,CAAC,IAAI;mCACP,CAAC,CAAC,GAAG;uCACD,CAAC,CAAC,OAAO;uCACT,CAAC,CAAC,SAAS;0CACR,QAAQ;mCACf,QAAQ;SAClC,CAAC;;;wBAGc,CAAC,CAAC,IAAI;cAChB,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;oCAElB,CAAC,CAAC,IAAI;mCACP,CAAC,CAAC,GAAG;uCACD,CAAC,CAAC,OAAO;mCACb,QAAQ;aAC9B,CAAC;;mCAEqB,CAAC,CAAC,IAAI;kCACP,CAAC,CAAC,GAAG;0CACG,CAAC,CAAC,WAAW;gDACP,CAAC,CAAC,wBAAwB;kDACxB,CAAC,CAAC,0BAA0B;sCACxC,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,KAAK;;kBAEzD,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAEC,CAAC,CAAC,IAAI;yCACP,CAAC,CAAC,GAAG;gDACE,UAAU,CAAC,KAAK;6CACnB,CAAC,CAAC,OAAO;0CACZ,CAAC,CAAC,IAAI;0CACN,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI;4CAClB,IAAI;8CACF,CAAC,CAAC,QAAQ;iBACvC,CAAC;;;kBAGA,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;0CAEA,CAAC,CAAC,IAAI;yCACP,CAAC,CAAC,GAAG;0CACJ,CAAC,CAAC,KAAK;6CACJ,CAAC,CAAC,OAAO;8CACR,CAAC,CAAC,QAAQ;iBACvC,CAAC;;;cAGJ,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;2CAEI,CAAC,CAAC,IAAI;0CACP,CAAC,CAAC,GAAG;6CACF,MAAM;8CACL,CAAC,CAAC,OAAO;sDACD,IAAI;+CACX,CAAC,CAAC,QAAQ;aAC5C,CAAC;;;;;0BAKY,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;cAC3C,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;wCAEF,CAAC,CAAC,IAAI;uCACP,CAAC,CAAC,GAAG;2CACD,CAAC,CAAC,OAAO;uCACb,cAAc;aACxC,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;oCAElB,CAAC,CAAC,IAAI;mCACP,CAAC,CAAC,GAAG;uCACD,CAAC,CAAC,OAAO;mCACb,cAAc;aACpC,CAAC;;kCAEoB,CAAC,CAAC,IAAI;iCACP,CAAC,CAAC,GAAG;oCACF,IAAI;kCACN,IAAI,CAAC,KAAK;kCACV,KAAK,CAAC,SAAS;wCACT,UAAU,CAAC,KAAK;qCACnB,CAAC,CAAC,OAAO;sCACR,CAAC,CAAC,QAAQ;;;;kCAId,CAAC,CAAC,IAAI;iCACP,CAAC,CAAC,GAAG;oCACF,cAAc;uCACX,CAAC,CAAC,iBAAiB;sCACpB,CAAC,CAAC,gBAAgB;sCAClB,CAAC,CAAC,gBAAgB;sCAClB,CAAC,CAAC,gBAAgB;uCACjB,CAAC,CAAC,iBAAiB;oCACtB,CAAC,CAAC,cAAc;sCACd,CAAC,CAAC,gBAAgB;mCACrB,CAAC,CAAC,aAAa;oDACE,CAAC,SAAS,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC;kCACnD,MAAM;kCACN,IAAI;mCACH,IAAI;oCACH,CAAC,CAAC,cAAc;;;KAG/C,CAAC;AACN,CAAC"}
+{"version":3,"file":"SplitButtonElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Buttons/SplitButton/SplitButtonElementTemplate.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Cosmopolitan.js

@@ -192,7 +192,7 @@ export function splitButtonElementCosmopolitanStyle() {
   text-decoration: none;
   display: flex;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 
 :host [part="button"] [part="icon"] {
@@ -266,7 +266,7 @@ export function splitButtonElementCosmopolitanStyle() {
   margin: 0;
   display: flex;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 
 :host [part="buttonSplit"] [part="iconCaret"] {

package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Joy.js

@@ -192,7 +192,7 @@ export function splitButtonElementJoyStyle() {
   text-decoration: none;
   display: flex;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 
 :host [part="button"] [part="icon"] {
@@ -266,7 +266,7 @@ export function splitButtonElementJoyStyle() {
   margin: 0;
   display: flex;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 
 :host [part="buttonSplit"] [part="iconCaret"] {

package/Controls/Components/Buttons/SplitButton/Themes/SplitButtonElement.Memphis.js

@@ -192,7 +192,7 @@ export function splitButtonElementMemphisStyle() {
   text-decoration: none;
   display: flex;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 
 :host [part="button"] [part="icon"] {
@@ -266,7 +266,7 @@ export function splitButtonElementMemphisStyle() {
   margin: 0;
   display: flex;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 
 :host [part="buttonSplit"] [part="iconCaret"] {

package/Controls/Components/Buttons/Tile/Themes/TileElement.Joy.js

@@ -37,12 +37,12 @@ export function tileElementJoyStyle() {
   --tile-padding-top: var(--joy-layout-space);
   --tile-ripple-color: var(--joy-scheme-highlight);
   --tile-ripple-duration: .2s;
-  --tile-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
-  --tile-shadow-blur: var(--joy-elevation-light-blur);
-  --tile-shadow-color: var(--joy-elevation-light-color);
-  --tile-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --tile-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --tile-shadow-spread: var(--joy-elevation-light-spread);
+  --tile-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
+  --tile-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --tile-shadow-color: var(--joy-elevation-light-light-color-0);
+  --tile-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --tile-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --tile-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --tile-transition-duration: var(--mosaik-duration-short);
   --tile-transition-mode: ease;
   --tile-transition-property: background-color, color, border-color, box-shadow;

package/Controls/Components/Cells/Themes/CellGroupElement.Joy.js

@@ -31,12 +31,12 @@ export function cellGroupElementJoyStyle() {
   --cell-group-padding-left: unset;
   --cell-group-padding-right: unset;
   --cell-group-padding-top: unset;
-  --cell-group-shadow: var(--joy-elevation-bold-offset-x) var(--joy-elevation-bold-offset-y) var(--joy-elevation-bold-blur) var(--joy-elevation-bold-spread) var(--joy-elevation-bold-color);
-  --cell-group-shadow-blur: var(--joy-elevation-bold-blur);
-  --cell-group-shadow-color: var(--joy-elevation-bold-color);
-  --cell-group-shadow-offset-x: var(--joy-elevation-bold-offset-x);
-  --cell-group-shadow-offset-y: var(--joy-elevation-bold-offset-y);
-  --cell-group-shadow-spread: var(--joy-elevation-bold-spread);
+  --cell-group-shadow: var(--joy-elevation-light-bold-offset-x-0) var(--joy-elevation-light-bold-offset-y-0) var(--joy-elevation-light-bold-blur-0) var(--joy-elevation-light-bold-spread-0) var(--joy-elevation-light-bold-color-0);
+  --cell-group-shadow-blur: var(--joy-elevation-light-bold-blur-0);
+  --cell-group-shadow-color: var(--joy-elevation-light-bold-color-0);
+  --cell-group-shadow-offset-x: var(--joy-elevation-light-bold-offset-x-0);
+  --cell-group-shadow-offset-y: var(--joy-elevation-light-bold-offset-y-0);
+  --cell-group-shadow-spread: var(--joy-elevation-light-bold-spread-0);
   --cell-group-transition-duration: unset;
   --cell-group-transition-mode: unset;
   --cell-group-transition-property: background-color, color, border-color, box-shadow;

package/Controls/Components/Grouping/Banner/Themes/BannerElement.Joy.js

@@ -31,12 +31,12 @@ export function bannerElementJoyStyle() {
   --banner-padding-left: calc(var(--joy-layout-space) * 2);
   --banner-padding-right: calc(var(--joy-layout-space) * 2);
   --banner-padding-top: var(--joy-layout-space);
-  --banner-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
-  --banner-shadow-blur: var(--joy-elevation-light-blur);
-  --banner-shadow-color: var(--joy-elevation-light-color);
-  --banner-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --banner-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --banner-shadow-spread: var(--joy-elevation-light-spread);
+  --banner-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
+  --banner-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --banner-shadow-color: var(--joy-elevation-light-light-color-0);
+  --banner-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --banner-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --banner-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --banner-transition-duration: var(--mosaik-duration-short);
   --banner-transition-mode: ease;
   --banner-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Grouping/Card/Themes/CardElement.Joy.js

@@ -32,12 +32,12 @@ export function cardElementJoyStyle() {
   --card-padding-left: unset;
   --card-padding-right: unset;
   --card-padding-top: unset;
-  --card-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
-  --card-shadow-blur: var(--joy-elevation-light-blur);
-  --card-shadow-color: var(--joy-elevation-light-color);
-  --card-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --card-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --card-shadow-spread: var(--joy-elevation-light-spread);
+  --card-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
+  --card-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --card-shadow-color: var(--joy-elevation-light-light-color-0);
+  --card-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --card-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --card-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --card-transition-duration: var(--mosaik-duration-short);
   --card-transition-mode: ease;
   --card-transition-property: background-color, color, border-color, box-shadow;

package/Controls/Components/Grouping/Expander/Themes/ExpanderElement.Joy.js

@@ -34,12 +34,12 @@ export function expanderElementJoyStyle() {
   --expander-padding-top: var(--joy-layout-space);
   --expander-ripple-color: unset;
   --expander-ripple-duration: .2s;
-  --expander-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
-  --expander-shadow-blur: var(--joy-elevation-light-blur);
-  --expander-shadow-color: var(--joy-elevation-light-color);
-  --expander-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --expander-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --expander-shadow-spread: var(--joy-elevation-light-spread);
+  --expander-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
+  --expander-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --expander-shadow-color: var(--joy-elevation-light-light-color-0);
+  --expander-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --expander-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --expander-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --expander-transition-duration: var(--mosaik-duration-short);
   --expander-transition-mode: ease;
   --expander-transition-property: background-color, color, border-color, box-shadow, opacity, box-shadow, transform, margin;

package/Controls/Components/Grouping/Message/Themes/MessageElement.Joy.js

@@ -31,12 +31,12 @@ export function messageElementJoyStyle() {
   --message-padding-left: calc(var(--joy-layout-space) * 2);
   --message-padding-right: calc(var(--joy-layout-space) * 2);
   --message-padding-top: var(--joy-layout-space);
-  --message-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --message-shadow-blur: var(--joy-elevation-semilight-blur);
-  --message-shadow-color: var(--joy-elevation-semilight-color);
-  --message-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --message-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --message-shadow-spread: var(--joy-elevation-semilight-spread);
+  --message-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --message-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --message-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --message-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --message-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --message-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --message-transition-duration: var(--mosaik-duration-short);
   --message-transition-mode: ease;
   --message-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Inputs/Calendar/Themes/CalendarElement.Joy.js

@@ -32,12 +32,12 @@ export function calendarElementJoyStyle() {
   --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-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
-  --calendar-shadow-blur: var(--joy-elevation-light-blur);
-  --calendar-shadow-color: var(--joy-elevation-light-color);
-  --calendar-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --calendar-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --calendar-shadow-spread: var(--joy-elevation-light-spread);
+  --calendar-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
+  --calendar-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --calendar-shadow-color: var(--joy-elevation-light-light-color-0);
+  --calendar-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --calendar-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --calendar-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --calendar-transition-duration: var(--mosaik-duration-short);
   --calendar-transition-mode: ease;
   --calendar-transition-property: background-color, color, border-color, opacity;

package/Controls/Components/Inputs/Calendar/Themes/CalendarItemElement.Joy.js

@@ -42,12 +42,12 @@ export function calendarItemElementJoyStyle() {
   --calendar-item-ripple-color: unset;
   --calendar-item-ripple-duration: .2s;
   --calendar-item-selection-background-color: var(--joy-scheme-selection);
-  --calendar-item-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
-  --calendar-item-shadow-blur: var(--joy-elevation-light-blur);
-  --calendar-item-shadow-color: var(--joy-elevation-light-color);
-  --calendar-item-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --calendar-item-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --calendar-item-shadow-spread: var(--joy-elevation-light-spread);
+  --calendar-item-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
+  --calendar-item-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --calendar-item-shadow-color: var(--joy-elevation-light-light-color-0);
+  --calendar-item-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --calendar-item-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --calendar-item-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --calendar-item-today-border-color: var(--joy-color-primary-500);
   --calendar-item-today-border-width: 2px;
   --calendar-item-transition-duration: var(--mosaik-duration-short);

package/Controls/Components/Inputs/ChipBox/Themes/ChipBoxElement.Joy.js

@@ -38,12 +38,12 @@ export function chipBoxElementJoyStyle() {
   --chipbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --chipbox-padding-top: var(--joy-layout-space);
   --chipbox-prefix-icon-size: 20px;
-  --chipbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --chipbox-shadow-blur: var(--joy-elevation-semilight-blur);
-  --chipbox-shadow-color: var(--joy-elevation-semilight-color);
-  --chipbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --chipbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --chipbox-shadow-spread: var(--joy-elevation-semilight-spread);
+  --chipbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --chipbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --chipbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --chipbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --chipbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --chipbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --chipbox-suffix-icon-size: 20px;
   --chipbox-transition-duration: var(--mosaik-duration-short);
   --chipbox-transition-mode: ease;

package/Controls/Components/Inputs/ColorBox/Themes/ColorBoxElement.Joy.js

@@ -37,12 +37,12 @@ export function colorBoxElementJoyStyle() {
   --colorbox-padding-left: calc(var(--joy-layout-space) * 1.5);
   --colorbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --colorbox-padding-top: var(--joy-layout-space);
-  --colorbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --colorbox-shadow-blur: var(--joy-elevation-semilight-blur);
-  --colorbox-shadow-color: var(--joy-elevation-semilight-color);
-  --colorbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --colorbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --colorbox-shadow-spread: var(--joy-elevation-semilight-spread);
+  --colorbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --colorbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --colorbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --colorbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --colorbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --colorbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --colorbox-transition-duration: var(--mosaik-duration-short);
   --colorbox-transition-mode: ease;
   --colorbox-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Inputs/DateBox/Themes/DateBoxElement.Joy.js

@@ -37,12 +37,12 @@ export function dateBoxElementJoyStyle() {
   --datebox-padding-left: calc(var(--joy-layout-space) * 1.5);
   --datebox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --datebox-padding-top: var(--joy-layout-space);
-  --datebox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --datebox-shadow-blur: var(--joy-elevation-semilight-blur);
-  --datebox-shadow-color: var(--joy-elevation-semilight-color);
-  --datebox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --datebox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --datebox-shadow-spread: var(--joy-elevation-semilight-spread);
+  --datebox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --datebox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --datebox-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --datebox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --datebox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --datebox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --datebox-transition-duration: var(--mosaik-duration-short);
   --datebox-transition-mode: ease;
   --datebox-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Inputs/FileBox/Themes/FileBoxElement.Joy.js

@@ -37,12 +37,12 @@ export function fileBoxElementJoyStyle() {
   --filebox-padding-left: calc(var(--joy-layout-space) * 1.5);
   --filebox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --filebox-padding-top: var(--joy-layout-space);
-  --filebox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --filebox-shadow-blur: var(--joy-elevation-semilight-blur);
-  --filebox-shadow-color: var(--joy-elevation-semilight-color);
-  --filebox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --filebox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --filebox-shadow-spread: var(--joy-elevation-semilight-spread);
+  --filebox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --filebox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --filebox-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --filebox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --filebox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --filebox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --filebox-transition-duration: var(--mosaik-duration-short);
   --filebox-transition-mode: ease;
   --filebox-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Inputs/PasswordBox/Themes/PasswordBoxElement.Joy.js

@@ -37,12 +37,12 @@ export function passwordBoxElementJoyStyle() {
   --passwordbox-padding-left: calc(var(--joy-layout-space) * 1.5);
   --passwordbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --passwordbox-padding-top: var(--joy-layout-space);
-  --passwordbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --passwordbox-shadow-blur: var(--joy-elevation-semilight-blur);
-  --passwordbox-shadow-color: var(--joy-elevation-semilight-color);
-  --passwordbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --passwordbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --passwordbox-shadow-spread: var(--joy-elevation-semilight-spread);
+  --passwordbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --passwordbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --passwordbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --passwordbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --passwordbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --passwordbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --passwordbox-transition-duration: var(--mosaik-duration-short);
   --passwordbox-transition-mode: ease;
   --passwordbox-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Inputs/PinBox/Themes/PinBoxElement.Joy.js

@@ -37,12 +37,12 @@ export function pinBoxElementJoyStyle() {
   --pinbox-padding-left: calc(var(--joy-layout-space) * 1.5);
   --pinbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --pinbox-padding-top: var(--joy-layout-space);
-  --pinbox-shadow: var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color);
-  --pinbox-shadow-blur: var(--joy-elevation-semilight-blur);
-  --pinbox-shadow-color: var(--joy-elevation-semilight-color);
-  --pinbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --pinbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --pinbox-shadow-spread: var(--joy-elevation-semilight-spread);
+  --pinbox-shadow: var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0);
+  --pinbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --pinbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --pinbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --pinbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --pinbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --pinbox-transition-duration: var(--mosaik-duration-short);
   --pinbox-transition-mode: ease;
   --pinbox-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Inputs/Scheduler/Themes/SchedulerEventElement.Joy.js

@@ -51,12 +51,12 @@ export function schedulerEventElementJoyStyle() {
   --scheduler-event-padding-top: unset;
   --scheduler-event-ripple-color: unset;
   --scheduler-event-ripple-duration: .2s;
-  --scheduler-event-shadow: var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color);
-  --scheduler-event-shadow-blur: var(--joy-elevation-light-blur);
-  --scheduler-event-shadow-color: var(--joy-elevation-light-color);
-  --scheduler-event-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --scheduler-event-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --scheduler-event-shadow-spread: var(--joy-elevation-light-spread);
+  --scheduler-event-shadow: var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0);
+  --scheduler-event-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --scheduler-event-shadow-color: var(--joy-elevation-light-light-color-0);
+  --scheduler-event-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --scheduler-event-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --scheduler-event-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --scheduler-event-transition-duration: var(--mosaik-duration-medium);
   --scheduler-event-transition-mode: ease;
   --scheduler-event-transition-property: background-color, box-shadow, transform;