@breadstone/mosaik-elements-foundation 0.1.23 → 0.1.26

package/Controls/Components/Inputs/SearchBox/Themes/SearchBoxElement.Joy.js

@@ -37,12 +37,12 @@ export function searchBoxElementJoyStyle() {
   --searchbox-padding-left: calc(var(--joy-layout-space) * 1.5);
   --searchbox-padding-right: calc(var(--joy-layout-space) * 1.5);
   --searchbox-padding-top: var(--joy-layout-space);
-  --searchbox-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);
-  --searchbox-shadow-blur: var(--joy-elevation-semilight-blur);
-  --searchbox-shadow-color: var(--joy-elevation-semilight-color);
-  --searchbox-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --searchbox-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --searchbox-shadow-spread: var(--joy-elevation-semilight-spread);
+  --searchbox-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);
+  --searchbox-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --searchbox-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --searchbox-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --searchbox-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --searchbox-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --searchbox-transition-duration: var(--mosaik-duration-short);
   --searchbox-transition-mode: ease;
   --searchbox-transition-property: all;

package/Controls/Components/Inputs/TextBox/Themes/TextBoxElement.Joy.js

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

package/Controls/Components/Layouts/FlowBoard/Themes/FlowBoardColumnItemElement.Joy.js

@@ -38,12 +38,12 @@ export function flowBoardColumnItemElementJoyStyle() {
   --flow-board-column-item-padding-right: unset;
   --flow-board-column-item-padding-top: unset;
   --flow-board-column-item-pinned-background-color: var(--joy-scheme-surface);
-  --flow-board-column-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);
-  --flow-board-column-item-shadow-blur: var(--joy-elevation-light-blur);
-  --flow-board-column-item-shadow-color: var(--joy-elevation-light-color);
-  --flow-board-column-item-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --flow-board-column-item-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --flow-board-column-item-shadow-spread: var(--joy-elevation-light-spread);
+  --flow-board-column-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);
+  --flow-board-column-item-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --flow-board-column-item-shadow-color: var(--joy-elevation-light-light-color-0);
+  --flow-board-column-item-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --flow-board-column-item-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --flow-board-column-item-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --flow-board-column-item-transition-duration: var(--mosaik-duration-medium);
   --flow-board-column-item-transition-mode: ease;
   --flow-board-column-item-transition-property: background-color, box-shadow, transform;

package/Controls/Components/Media/Badge/Themes/BadgeElement.Joy.js

@@ -32,12 +32,12 @@ export function badgeElementJoyStyle() {
   --badge-padding-left: var(--joy-layout-space);
   --badge-padding-right: var(--joy-layout-space);
   --badge-padding-top: calc(var(--joy-layout-space) / 2);
-  --badge-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);
-  --badge-shadow-blur: var(--joy-elevation-light-blur);
-  --badge-shadow-color: var(--joy-elevation-light-color);
-  --badge-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --badge-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --badge-shadow-spread: var(--joy-elevation-light-spread);
+  --badge-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);
+  --badge-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --badge-shadow-color: var(--joy-elevation-light-light-color-0);
+  --badge-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --badge-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --badge-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --badge-transition-duration: var(--mosaik-duration-short);
   --badge-transition-mode: ease;
   --badge-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Media/Chat/Themes/ChatInputAttachmentListElement.Joy.js

@@ -31,12 +31,12 @@ export function chatInputAttachmentListElementJoyStyle() {
   --chat-input-attachment-list-padding-left: calc(var(--joy-layout-space) * 1.5);
   --chat-input-attachment-list-padding-right: calc(var(--joy-layout-space) * 1.5);
   --chat-input-attachment-list-padding-top: var(--joy-layout-space);
-  --chat-input-attachment-list-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);
-  --chat-input-attachment-list-shadow-blur: var(--joy-elevation-semilight-blur);
-  --chat-input-attachment-list-shadow-color: var(--joy-elevation-semilight-color);
-  --chat-input-attachment-list-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --chat-input-attachment-list-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --chat-input-attachment-list-shadow-spread: var(--joy-elevation-semilight-spread);
+  --chat-input-attachment-list-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);
+  --chat-input-attachment-list-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --chat-input-attachment-list-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --chat-input-attachment-list-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --chat-input-attachment-list-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --chat-input-attachment-list-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --chat-input-attachment-list-transition-duration: var(--mosaik-duration-short);
   --chat-input-attachment-list-transition-mode: ease;
   --chat-input-attachment-list-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Media/Chat/Themes/ChatInputElement.Joy.js

@@ -31,12 +31,12 @@ export function chatInputElementJoyStyle() {
   --chat-input-padding-left: calc(var(--joy-layout-space) * 1.5);
   --chat-input-padding-right: calc(var(--joy-layout-space) * 1.5);
   --chat-input-padding-top: var(--joy-layout-space);
-  --chat-input-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);
-  --chat-input-shadow-blur: var(--joy-elevation-semilight-blur);
-  --chat-input-shadow-color: var(--joy-elevation-semilight-color);
-  --chat-input-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --chat-input-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --chat-input-shadow-spread: var(--joy-elevation-semilight-spread);
+  --chat-input-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);
+  --chat-input-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --chat-input-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --chat-input-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --chat-input-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --chat-input-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --chat-input-transition-duration: var(--mosaik-duration-short);
   --chat-input-transition-mode: ease;
   --chat-input-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Media/Chat/Themes/ChatMessageElement.Joy.js

@@ -31,12 +31,12 @@ export function chatMessageElementJoyStyle() {
   --chat-message-padding-left: calc(var(--joy-layout-space) * 2);
   --chat-message-padding-right: calc(var(--joy-layout-space) * 2);
   --chat-message-padding-top: var(--joy-layout-space);
-  --chat-message-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);
-  --chat-message-shadow-blur: var(--joy-elevation-light-blur);
-  --chat-message-shadow-color: var(--joy-elevation-light-color);
-  --chat-message-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --chat-message-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --chat-message-shadow-spread: var(--joy-elevation-light-spread);
+  --chat-message-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);
+  --chat-message-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --chat-message-shadow-color: var(--joy-elevation-light-light-color-0);
+  --chat-message-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --chat-message-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --chat-message-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --chat-message-transition-duration: var(--mosaik-duration-short);
   --chat-message-transition-mode: ease;
   --chat-message-transition-property: background-color, color, border-color, opacity, box-shadow, translate, transform;

package/Controls/Components/Media/Chip/Themes/ChipElement.Joy.js

@@ -38,12 +38,12 @@ export function chipElementJoyStyle() {
   --chip-padding-top: var(--joy-layout-space);
   --chip-ripple-color: unset;
   --chip-ripple-duration: .2s;
-  --chip-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);
-  --chip-shadow-blur: var(--joy-elevation-light-blur);
-  --chip-shadow-color: var(--joy-elevation-light-color);
-  --chip-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --chip-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --chip-shadow-spread: var(--joy-elevation-light-spread);
+  --chip-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);
+  --chip-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --chip-shadow-color: var(--joy-elevation-light-light-color-0);
+  --chip-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --chip-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --chip-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --chip-transition-duration: var(--mosaik-duration-short);
   --chip-transition-mode: ease;
   --chip-transition-property: background-color, color, border-color, box-shadow, opacity, box-shadow;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAlphaSliderElement.Joy.js

@@ -37,12 +37,12 @@ export function colorEditorAlphaSliderElementJoyStyle() {
   --color-editor-alpha-slider-padding-left: unset;
   --color-editor-alpha-slider-padding-right: unset;
   --color-editor-alpha-slider-padding-top: unset;
-  --color-editor-alpha-slider-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);
-  --color-editor-alpha-slider-shadow-blur: var(--joy-elevation-light-blur);
-  --color-editor-alpha-slider-shadow-color: var(--joy-elevation-light-color);
-  --color-editor-alpha-slider-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --color-editor-alpha-slider-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --color-editor-alpha-slider-shadow-spread: var(--joy-elevation-light-spread);
+  --color-editor-alpha-slider-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);
+  --color-editor-alpha-slider-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --color-editor-alpha-slider-shadow-color: var(--joy-elevation-light-light-color-0);
+  --color-editor-alpha-slider-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --color-editor-alpha-slider-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --color-editor-alpha-slider-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --color-editor-alpha-slider-thumb-background-color: var(--joy-scheme-highlight);
   --color-editor-alpha-slider-thumb-border-color: var(--joy-scheme-highlight);
   --color-editor-alpha-slider-thumb-border-radius: 50%;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorAreaElement.Joy.js

@@ -36,12 +36,12 @@ export function colorEditorAreaElementJoyStyle() {
   --color-editor-area-padding-left: unset;
   --color-editor-area-padding-right: unset;
   --color-editor-area-padding-top: unset;
-  --color-editor-area-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);
-  --color-editor-area-shadow-blur: var(--joy-elevation-light-blur);
-  --color-editor-area-shadow-color: var(--joy-elevation-light-color);
-  --color-editor-area-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --color-editor-area-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --color-editor-area-shadow-spread: var(--joy-elevation-light-spread);
+  --color-editor-area-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);
+  --color-editor-area-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --color-editor-area-shadow-color: var(--joy-elevation-light-light-color-0);
+  --color-editor-area-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --color-editor-area-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --color-editor-area-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --color-editor-area-thumb-border-color: var(--joy-scheme-surface);
   --color-editor-area-thumb-border-radius: 50%;
   --color-editor-area-thumb-border-width: var(--joy-layout-thickness);

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorHueSliderElement.Joy.js

@@ -36,12 +36,12 @@ export function colorEditorHueSliderElementJoyStyle() {
   --color-editor-hue-slider-padding-left: unset;
   --color-editor-hue-slider-padding-right: unset;
   --color-editor-hue-slider-padding-top: unset;
-  --color-editor-hue-slider-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);
-  --color-editor-hue-slider-shadow-blur: var(--joy-elevation-light-blur);
-  --color-editor-hue-slider-shadow-color: var(--joy-elevation-light-color);
-  --color-editor-hue-slider-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --color-editor-hue-slider-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --color-editor-hue-slider-shadow-spread: var(--joy-elevation-light-spread);
+  --color-editor-hue-slider-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);
+  --color-editor-hue-slider-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --color-editor-hue-slider-shadow-color: var(--joy-elevation-light-light-color-0);
+  --color-editor-hue-slider-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --color-editor-hue-slider-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --color-editor-hue-slider-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --color-editor-hue-slider-thumb-background-color: var(--joy-scheme-highlight);
   --color-editor-hue-slider-thumb-border-color: var(--joy-scheme-highlight);
   --color-editor-hue-slider-thumb-border-radius: 50%;

package/Controls/Components/Media/ColorEditor/Themes/ColorEditorShadeSliderElement.Joy.js

@@ -36,12 +36,12 @@ export function colorEditorShadeSliderElementJoyStyle() {
   --color-editor-shade-slider-padding-left: unset;
   --color-editor-shade-slider-padding-right: unset;
   --color-editor-shade-slider-padding-top: unset;
-  --color-editor-shade-slider-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);
-  --color-editor-shade-slider-shadow-blur: var(--joy-elevation-light-blur);
-  --color-editor-shade-slider-shadow-color: var(--joy-elevation-light-color);
-  --color-editor-shade-slider-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --color-editor-shade-slider-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --color-editor-shade-slider-shadow-spread: var(--joy-elevation-light-spread);
+  --color-editor-shade-slider-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);
+  --color-editor-shade-slider-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --color-editor-shade-slider-shadow-color: var(--joy-elevation-light-light-color-0);
+  --color-editor-shade-slider-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --color-editor-shade-slider-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --color-editor-shade-slider-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --color-editor-shade-slider-thumb-background-color: var(--joy-scheme-highlight);
   --color-editor-shade-slider-thumb-border-color: var(--joy-scheme-highlight);
   --color-editor-shade-slider-thumb-border-radius: 50%;

package/Controls/Components/Overlays/Dialog/Themes/DialogElement.Joy.js

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

package/Controls/Components/Overlays/MessageBox/Themes/MessageBoxElement.Joy.js

@@ -40,12 +40,12 @@ export function messageBoxElementJoyStyle() {
   --message-box-padding-left: calc(var(--joy-layout-space) * 2);
   --message-box-padding-right: calc(var(--joy-layout-space) * 2);
   --message-box-padding-top: var(--joy-layout-space);
-  --message-box-shadow: var(--joy-elevation-regular-offset-x) var(--joy-elevation-regular-offset-y) var(--joy-elevation-regular-blur) var(--joy-elevation-regular-spread) var(--joy-elevation-regular-color);
-  --message-box-shadow-blur: var(--joy-elevation-regular-blur);
-  --message-box-shadow-color: var(--joy-elevation-regular-color);
-  --message-box-shadow-offset-x: var(--joy-elevation-regular-offset-x);
-  --message-box-shadow-offset-y: var(--joy-elevation-regular-offset-y);
-  --message-box-shadow-spread: var(--joy-elevation-regular-spread);
+  --message-box-shadow: var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0);
+  --message-box-shadow-blur: var(--joy-elevation-light-regular-blur-0);
+  --message-box-shadow-color: var(--joy-elevation-light-regular-color-0);
+  --message-box-shadow-offset-x: var(--joy-elevation-light-regular-offset-x-0);
+  --message-box-shadow-offset-y: var(--joy-elevation-light-regular-offset-y-0);
+  --message-box-shadow-spread: var(--joy-elevation-light-regular-spread-0);
   --message-box-sub-header-font-family: var(--joy-font-family);
   --message-box-sub-header-font-letter-spacing: var(--joy-typography-subtitle2-letter-spacing);
   --message-box-sub-header-font-line-height: var(--joy-typography-subtitle2-line-height);

package/Controls/Components/Overlays/Toast/Themes/ToastElement.Joy.js

@@ -35,12 +35,12 @@ export function toastElementJoyStyle() {
   --toast-padding-top: var(--joy-layout-space);
   --toast-progress-fill-color: currentColor;
   --toast-progress-ring-fill-color: var(--joy-scheme-foreground);
-  --toast-shadow: var(--joy-elevation-regular-offset-x) var(--joy-elevation-regular-offset-y) var(--joy-elevation-regular-blur) var(--joy-elevation-regular-spread) var(--joy-elevation-regular-color);
-  --toast-shadow-blur: var(--joy-elevation-regular-blur);
-  --toast-shadow-color: var(--joy-elevation-regular-color);
-  --toast-shadow-offset-x: var(--joy-elevation-regular-offset-x);
-  --toast-shadow-offset-y: var(--joy-elevation-regular-offset-y);
-  --toast-shadow-spread: var(--joy-elevation-regular-spread);
+  --toast-shadow: var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0);
+  --toast-shadow-blur: var(--joy-elevation-light-regular-blur-0);
+  --toast-shadow-color: var(--joy-elevation-light-regular-color-0);
+  --toast-shadow-offset-x: var(--joy-elevation-light-regular-offset-x-0);
+  --toast-shadow-offset-y: var(--joy-elevation-light-regular-offset-y-0);
+  --toast-shadow-spread: var(--joy-elevation-light-regular-spread-0);
   --toast-transition-duration: var(--mosaik-duration-short);
   --toast-transition-mode: ease;
   --toast-transition-property: background-color, color, border-color, opacity, box-shadow, margin;

package/Controls/Components/Primitives/Checkmark/Themes/CheckmarkElement.Joy.js

@@ -33,12 +33,12 @@ export function checkmarkElementJoyStyle() {
   --checkmark-padding-left: var(--joy-layout-space);
   --checkmark-padding-right: var(--joy-layout-space);
   --checkmark-padding-top: calc(var(--joy-layout-space) / 2);
-  --checkmark-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);
-  --checkmark-shadow-blur: var(--joy-elevation-light-blur);
-  --checkmark-shadow-color: var(--joy-elevation-light-color);
-  --checkmark-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --checkmark-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --checkmark-shadow-spread: var(--joy-elevation-light-spread);
+  --checkmark-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);
+  --checkmark-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --checkmark-shadow-color: var(--joy-elevation-light-light-color-0);
+  --checkmark-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --checkmark-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --checkmark-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --checkmark-thickness: 2px;
   --checkmark-transition-duration: var(--mosaik-duration-short);
   --checkmark-transition-mode: ease;

package/Controls/Components/Primitives/Kbd/Themes/KbdElement.Joy.js

@@ -31,12 +31,12 @@ export function kbdElementJoyStyle() {
   --kbd-padding-left: calc(var(--joy-layout-space) / 2);
   --kbd-padding-right: calc(var(--joy-layout-space) / 2);
   --kbd-padding-top: calc(var(--joy-layout-space) / 2);
-  --kbd-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);
-  --kbd-shadow-blur: var(--joy-elevation-light-blur);
-  --kbd-shadow-color: var(--joy-elevation-light-color);
-  --kbd-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --kbd-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --kbd-shadow-spread: var(--joy-elevation-light-spread);
+  --kbd-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);
+  --kbd-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --kbd-shadow-color: var(--joy-elevation-light-light-color-0);
+  --kbd-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --kbd-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --kbd-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --kbd-transition-duration: unset;
   --kbd-transition-mode: unset;
   --kbd-transition-property: unset;

package/Controls/Components/Primitives/Pip/Themes/PipElement.Joy.js

@@ -32,12 +32,12 @@ export function pipElementJoyStyle() {
   --pip-padding-left: calc(var(--joy-layout-space) / 2);
   --pip-padding-right: calc(var(--joy-layout-space) / 2);
   --pip-padding-top: calc(var(--joy-layout-space) / 2);
-  --pip-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);
-  --pip-shadow-blur: var(--joy-elevation-light-blur);
-  --pip-shadow-color: var(--joy-elevation-light-color);
-  --pip-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --pip-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --pip-shadow-spread: var(--joy-elevation-light-spread);
+  --pip-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);
+  --pip-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --pip-shadow-color: var(--joy-elevation-light-light-color-0);
+  --pip-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --pip-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --pip-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --pip-transition-duration: var(--mosaik-duration-short);
   --pip-transition-mode: ease;
   --pip-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Primitives/Popup/Themes/PopupElement.Joy.js

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

package/Controls/Components/Primitives/listing/Themes/ListingItemMarkerElement.Joy.js

@@ -32,12 +32,12 @@ export function listingItemMarkerElementJoyStyle() {
   --listing-item-marker-padding-left: calc(var(--joy-layout-space) / 2);
   --listing-item-marker-padding-right: calc(var(--joy-layout-space) / 2);
   --listing-item-marker-padding-top: calc(var(--joy-layout-space) / 2);
-  --listing-item-marker-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);
-  --listing-item-marker-shadow-blur: var(--joy-elevation-light-blur);
-  --listing-item-marker-shadow-color: var(--joy-elevation-light-color);
-  --listing-item-marker-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --listing-item-marker-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --listing-item-marker-shadow-spread: var(--joy-elevation-light-spread);
+  --listing-item-marker-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);
+  --listing-item-marker-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --listing-item-marker-shadow-color: var(--joy-elevation-light-light-color-0);
+  --listing-item-marker-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --listing-item-marker-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --listing-item-marker-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --listing-item-marker-transition-duration: var(--mosaik-duration-short);
   --listing-item-marker-transition-mode: ease;
   --listing-item-marker-transition-property: background-color, color, border-color, opacity, box-shadow;

package/Controls/Components/Primitives/thumb/themes/ThumbElement.Joy.js

@@ -30,12 +30,12 @@ export function thumbElementJoyStyle() {
   --thumb-padding-left: unset;
   --thumb-padding-right: unset;
   --thumb-padding-top: unset;
-  --thumb-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);
-  --thumb-shadow-blur: var(--joy-elevation-light-blur);
-  --thumb-shadow-color: var(--joy-elevation-light-color);
-  --thumb-shadow-offset-x: var(--joy-elevation-light-offset-x);
-  --thumb-shadow-offset-y: var(--joy-elevation-light-offset-y);
-  --thumb-shadow-spread: var(--joy-elevation-light-spread);
+  --thumb-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);
+  --thumb-shadow-blur: var(--joy-elevation-light-light-blur-0);
+  --thumb-shadow-color: var(--joy-elevation-light-light-color-0);
+  --thumb-shadow-offset-x: var(--joy-elevation-light-light-offset-x-0);
+  --thumb-shadow-offset-y: var(--joy-elevation-light-light-offset-y-0);
+  --thumb-shadow-spread: var(--joy-elevation-light-light-spread-0);
   --thumb-transition-duration: var(--mosaik-duration-short);
   --thumb-transition-mode: ease;
   --thumb-transition-property: background-color, color, border-color, opacity, box-shadow, translate, transform;

package/Controls/Components/Ranges/ScrubSlider/Themes/ScrubSliderElement.Joy.js

@@ -63,7 +63,7 @@ export function scrubSliderElementJoyStyle() {
   --scrub-slider-tooltip-padding-left: var(--joy-layout-space);
   --scrub-slider-tooltip-padding-right: var(--joy-layout-space);
   --scrub-slider-tooltip-padding-top: var(--joy-layout-space);
-  --scrub-slider-tooltip-shadow: var(--joy-elevation-light);
+  --scrub-slider-tooltip-shadow: var(--joy-elevation-light-light);
   --scrub-slider-tooltip-transition-duration: var(--mosaik-duration-short);
   --scrub-slider-tooltip-transition-mode: ease;
   --scrub-slider-tooltip-transition-property: background-color, color, border-color, opacity, transform;

package/Controls/Components/Ranges/Slider/Themes/SliderElement.Joy.js

@@ -68,7 +68,7 @@ export function sliderElementJoyStyle() {
   --slider-tooltip-padding-left: var(--joy-layout-space);
   --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-shadow: var(--joy-elevation-light-light);
   --slider-tooltip-transition-duration: var(--mosaik-duration-short);
   --slider-tooltip-transition-mode: ease;
   --slider-tooltip-transition-property: background-color, color, border-color, opacity, transform;

package/Controls/Components/Selectors/Segment/Themes/SegmentElement.Joy.js

@@ -32,12 +32,12 @@ export function segmentElementJoyStyle() {
   --segment-padding-left: var(--joy-layout-space);
   --segment-padding-right: var(--joy-layout-space);
   --segment-padding-top: var(--joy-layout-space);
-  --segment-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);
-  --segment-shadow-blur: var(--joy-elevation-semilight-blur);
-  --segment-shadow-color: var(--joy-elevation-semilight-color);
-  --segment-shadow-offset-x: var(--joy-elevation-semilight-offset-x);
-  --segment-shadow-offset-y: var(--joy-elevation-semilight-offset-y);
-  --segment-shadow-spread: var(--joy-elevation-semilight-spread);
+  --segment-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);
+  --segment-shadow-blur: var(--joy-elevation-light-semilight-blur-0);
+  --segment-shadow-color: var(--joy-elevation-light-semilight-color-0);
+  --segment-shadow-offset-x: var(--joy-elevation-light-semilight-offset-x-0);
+  --segment-shadow-offset-y: var(--joy-elevation-light-semilight-offset-y-0);
+  --segment-shadow-spread: var(--joy-elevation-light-semilight-spread-0);
   --segment-transition-duration: var(--joy-layout-transition);
   --segment-transition-mode: ease;
   --segment-transition-property: background-color, color, border-color, opacity, box-shadow, translate;

package/Controls/Components/Selectors/Tab/Themes/TabElement.Joy.js

@@ -34,12 +34,12 @@ export function tabElementJoyStyle() {
   --tab-padding-right: calc(var(--joy-layout-space) * 2);
   --tab-padding-top: var(--joy-layout-space);
   --tab-panel-background-color: var(--tab-background-color);
-  --tab-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);
-  --tab-shadow-blur: var(--joy-elevation-bold-blur);
-  --tab-shadow-color: var(--joy-elevation-bold-color);
-  --tab-shadow-offset-x: var(--joy-elevation-bold-offset-x);
-  --tab-shadow-offset-y: var(--joy-elevation-bold-offset-y);
-  --tab-shadow-spread: var(--joy-elevation-bold-spread);
+  --tab-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);
+  --tab-shadow-blur: var(--joy-elevation-light-bold-blur-0);
+  --tab-shadow-color: var(--joy-elevation-light-bold-color-0);
+  --tab-shadow-offset-x: var(--joy-elevation-light-bold-offset-x-0);
+  --tab-shadow-offset-y: var(--joy-elevation-light-bold-offset-y-0);
+  --tab-shadow-spread: var(--joy-elevation-light-bold-spread-0);
   --tab-strip-background-color: var(--joy-scheme-transparent);
   --tab-strip-padding-bottom: 0;
   --tab-strip-padding-left: 0;

package/Routing/PathToRegexp.d.ts

@@ -91,7 +91,7 @@ export interface Options {
      */
     encode?: (value: string) => string;
 }
-export declare function modifierToString(modifier: Modifier): "" | "*" | "+" | "?";
+export declare function modifierToString(modifier: Modifier): "" | "*" | "?" | "+";
 /**
  * Expose a function for taking tokens and returning a RegExp.
  */

package/custom-elements.json

@@ -9964,6 +9964,10 @@
             }
           ],
           "cssParts": [
+            {
+              "name": "${part}",
+              "description": "The ${part} part."
+            },
             {
               "name": "button",
               "description": "The button part of the split button."

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-elements-foundation",
-    "version": "0.1.23",
+    "version": "0.1.26",
     "description": "Mosaik elements components package.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -14,8 +14,8 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "0.1.23",
-        "@breadstone/mosaik-themes": "0.1.23",
+        "@breadstone/mosaik-elements": "0.1.26",
+        "@breadstone/mosaik-themes": "0.1.26",
         "tslib": "2.8.1"
     },
     "peerDependencies": {