@breadstone/mosaik-elements-foundation 0.0.221 → 0.0.222

package/Controls/Components/Inputs/Calendar/Themes/CalendarSubHeaderElement.Cosmopolitan.js

@@ -18,7 +18,7 @@ export function calendarSubHeaderElementCosmopolitanStyle() {
   --calendar-sub-header-border-radius: var(--cosmopolitan-layout-radius);
   --calendar-sub-header-border-style: none;
   --calendar-sub-header-border-width: var(--cosmopolitan-layout-thickness);
-  --calendar-sub-header-font: var(--calendar-sub-header-font-weight) var(--calendar-sub-header-font-size) / var(--calendar-sub-header-line-height) var(--calendar-sub-header-font-family);
+  --calendar-sub-header-font: var(--calendar-sub-header-font-weight) var(--calendar-sub-header-font-size)/var(--calendar-sub-header-line-height) var(--calendar-sub-header-font-family);
   --calendar-sub-header-font-family: unset;
   --calendar-sub-header-font-letter-spacing: unset;
   --calendar-sub-header-font-line-height: unset;

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

@@ -18,7 +18,7 @@ export function calendarSubHeaderElementJoyStyle() {
   --calendar-sub-header-border-radius: var(--joy-layout-radius);
   --calendar-sub-header-border-style: none;
   --calendar-sub-header-border-width: var(--joy-layout-thickness);
-  --calendar-sub-header-font: var(--calendar-sub-header-font-weight) var(--calendar-sub-header-font-size) / var(--calendar-sub-header-line-height) var(--calendar-sub-header-font-family);
+  --calendar-sub-header-font: var(--calendar-sub-header-font-weight) var(--calendar-sub-header-font-size)/var(--calendar-sub-header-line-height) var(--calendar-sub-header-font-family);
   --calendar-sub-header-font-family: unset;
   --calendar-sub-header-font-letter-spacing: unset;
   --calendar-sub-header-font-line-height: unset;

package/Controls/Components/Inputs/Calendar/Themes/CalendarSubHeaderElement.Memphis.js

@@ -18,7 +18,7 @@ export function calendarSubHeaderElementMemphisStyle() {
   --calendar-sub-header-border-radius: var(--memphis-layout-radius);
   --calendar-sub-header-border-style: none;
   --calendar-sub-header-border-width: var(--memphis-layout-thickness);
-  --calendar-sub-header-font: var(--calendar-sub-header-font-weight) var(--calendar-sub-header-font-size) / var(--calendar-sub-header-line-height) var(--calendar-sub-header-font-family);
+  --calendar-sub-header-font: var(--calendar-sub-header-font-weight) var(--calendar-sub-header-font-size)/var(--calendar-sub-header-line-height) var(--calendar-sub-header-font-family);
   --calendar-sub-header-font-family: unset;
   --calendar-sub-header-font-letter-spacing: unset;
   --calendar-sub-header-font-line-height: unset;

package/Controls/Components/Inputs/CheckBox/Themes/CheckBoxElement.Joy.js

@@ -138,7 +138,7 @@ export function checkBoxElementJoyStyle() {
 }
 
 :host [part="focusRing"] {
-  --focus-ring-border-radius: min(var(--checkbox-border-radius), var(--checkbox-border-radius)  + var(--joy-layout-thickness));
+  --focus-ring-border-radius: min(var(--checkbox-border-radius), var(--checkbox-border-radius) + var(--joy-layout-thickness));
 }
 
 :host([invalid]:not([disabled]:not([disabled="false"]))) {

package/Controls/Components/Inputs/Choice/Themes/ChoiceElement.Joy.js

@@ -121,7 +121,7 @@ export function choiceElementJoyStyle() {
 }
 
 :host [part="focusRing"] {
-  --focus-ring-border-radius: min(var(--choice-border-radius), var(--choice-border-radius)  + var(--joy-layout-thickness));
+  --focus-ring-border-radius: min(var(--choice-border-radius), var(--choice-border-radius) + var(--joy-layout-thickness));
 }
 
 :host slot[name="additional"] mosaik-text {

package/Controls/Components/Inputs/Radio/Themes/RadioElement.Joy.js

@@ -134,7 +134,7 @@ export function radioElementJoyStyle() {
 }
 
 :host [part="focusRing"] {
-  border-radius: min(var(--radio-border-radius), var(--radio-border-radius)  + var(--joy-layout-thickness));
+  border-radius: min(var(--radio-border-radius), var(--radio-border-radius) + var(--joy-layout-thickness));
 }
 
 :host([invalid]:not([disabled]:not([disabled="false"]))) {

package/Controls/Components/Inputs/Radio/Themes/RadioElement.Memphis.js

@@ -139,7 +139,7 @@ export function radioElementMemphisStyle() {
 }
 
 :host [part="focusRing"] {
-  border-radius: min(var(--radio-border-radius), var(--radio-border-radius)  + var(--memphis-layout-thickness));
+  border-radius: min(var(--radio-border-radius), var(--radio-border-radius) + var(--memphis-layout-thickness));
 }
 
 :host([invalid]:not([disabled]:not([disabled="false"]))) {

package/Controls/Components/Inputs/ToggleSwitch/Themes/ToggleSwitchElement.Joy.js

@@ -120,7 +120,7 @@ export function toggleSwitchElementJoyStyle() {
 }
 
 :host [part="focusRing"] {
-  border-radius: min(var(--toggle-switch-border-radius), var(--toggle-switch-border-radius)  + var(--joy-layout-thickness));
+  border-radius: min(var(--toggle-switch-border-radius), var(--toggle-switch-border-radius) + var(--joy-layout-thickness));
 }
 
 :host([invalid]:not([disabled]:not([disabled="false"]))) {

package/Controls/Components/Layouts/TileManager/Themes/TileManagerTileElement.Cosmopolitan.js

@@ -90,8 +90,8 @@ export function tileManagerTileElementCosmopolitanStyle() {
 
 :host {
   box-sizing: border-box;
-  grid-column: var(--tile-col-start, auto) / span var(--tile-col-span, 1);
-  grid-row: var(--tile-row-start, auto) / span var(--tile-row-span, 1);
+  grid-column: var(--tile-col-start, auto)/span var(--tile-col-span, 1);
+  grid-row: var(--tile-row-start, auto)/span var(--tile-row-span, 1);
   background: var(--tile-manager-tile-background);
   border: var(--tile-manager-tile-border-width) solid var(--tile-manager-tile-border-color);
   border-radius: var(--tile-manager-tile-border-radius);

package/Controls/Components/Layouts/TileManager/Themes/TileManagerTileElement.Joy.js

@@ -90,8 +90,8 @@ export function tileManagerTileElementJoyStyle() {
 
 :host {
   box-sizing: border-box;
-  grid-column: var(--tile-col-start, auto) / span var(--tile-col-span, 1);
-  grid-row: var(--tile-row-start, auto) / span var(--tile-row-span, 1);
+  grid-column: var(--tile-col-start, auto)/span var(--tile-col-span, 1);
+  grid-row: var(--tile-row-start, auto)/span var(--tile-row-span, 1);
   background: var(--tile-manager-tile-background);
   border: var(--tile-manager-tile-border-width) solid var(--tile-manager-tile-border-color);
   border-radius: var(--tile-manager-tile-border-radius);

package/Controls/Components/Layouts/TileManager/Themes/TileManagerTileElement.Memphis.js

@@ -90,8 +90,8 @@ export function tileManagerTileElementMemphisStyle() {
 
 :host {
   box-sizing: border-box;
-  grid-column: var(--tile-col-start, auto) / span var(--tile-col-span, 1);
-  grid-row: var(--tile-row-start, auto) / span var(--tile-row-span, 1);
+  grid-column: var(--tile-col-start, auto)/span var(--tile-col-span, 1);
+  grid-row: var(--tile-row-start, auto)/span var(--tile-row-span, 1);
   background: var(--tile-manager-tile-background);
   border: var(--tile-manager-tile-border-width) solid var(--tile-manager-tile-border-color);
   border-radius: var(--tile-manager-tile-border-radius);

package/Controls/Components/Media/Avatar/Themes/AvatarElement.Joy.js

@@ -25,7 +25,7 @@ export function avatarElementJoyStyle() {
   --avatar-diameter: 64px;
   --avatar-font-family: var(--joy-font-family);
   --avatar-font-letter-spacing: 0px;
-  --avatar-font-line-height: calc(var(--avatar-font-size)  + 4px);
+  --avatar-font-line-height: calc(var(--avatar-font-size) + 4px);
   --avatar-font-size: 32px;
   --avatar-font-text-decoration: unset;
   --avatar-font-text-transform: unset;
@@ -370,8 +370,8 @@ export function avatarElementJoyStyle() {
   --avatar-badge-horizontal-align: right;
   --avatar-badge-vertical-align: bottom;
   --avatar-badge-gap: 2px;
-  mask-image: radial-gradient(circle at var(--avatar-badge-vertical-align) var(--avatar-badge-radius) var(--avatar-badge-horizontal-align) var(--avatar-badge-radius), transparent calc(var(--avatar-badge-radius)  + var(--avatar-badge-gap)  - .25px), #fff calc(var(--avatar-badge-radius)  + var(--avatar-badge-gap)  + .25px));
-  -webkit-mask-image: radial-gradient(circle at var(--avatar-badge-vertical-align) var(--avatar-badge-radius) var(--avatar-badge-horizontal-align) var(--avatar-badge-radius), transparent calc(var(--avatar-badge-radius)  + var(--avatar-badge-gap)  - .25px), #fff calc(var(--avatar-badge-radius)  + var(--avatar-badge-gap)  + .25px));
+  mask-image: radial-gradient(circle at var(--avatar-badge-vertical-align) var(--avatar-badge-radius) var(--avatar-badge-horizontal-align) var(--avatar-badge-radius), transparent calc(var(--avatar-badge-radius) + var(--avatar-badge-gap) - .25px), #fff calc(var(--avatar-badge-radius) + var(--avatar-badge-gap) + .25px));
+  -webkit-mask-image: radial-gradient(circle at var(--avatar-badge-vertical-align) var(--avatar-badge-radius) var(--avatar-badge-horizontal-align) var(--avatar-badge-radius), transparent calc(var(--avatar-badge-radius) + var(--avatar-badge-gap) - .25px), #fff calc(var(--avatar-badge-radius) + var(--avatar-badge-gap) + .25px));
 }
 
     `;

package/Controls/Components/Media/Avatar/Themes/AvatarElement.Memphis.js

@@ -25,7 +25,7 @@ export function avatarElementMemphisStyle() {
   --avatar-diameter: 64px;
   --avatar-font-family: var(--memphis-font-family);
   --avatar-font-letter-spacing: 0px;
-  --avatar-font-line-height: calc(var(--avatar-font-size)  + 4px);
+  --avatar-font-line-height: calc(var(--avatar-font-size) + 4px);
   --avatar-font-size: 32px;
   --avatar-font-text-decoration: unset;
   --avatar-font-text-transform: unset;

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

@@ -431,11 +431,11 @@ export function badgeElementJoyStyle() {
 }
 
 :host([size="tiny"]) {
-  font-size: calc(var(--badge-font-size)  - 4px);
+  font-size: calc(var(--badge-font-size) - 4px);
 }
 
 :host([size="small"]) {
-  font-size: calc(var(--badge-font-size)  - 2px);
+  font-size: calc(var(--badge-font-size) - 2px);
 }
 
 :host([size="medium"]) {
@@ -443,11 +443,11 @@ export function badgeElementJoyStyle() {
 }
 
 :host([size="large"]) {
-  font-size: calc(var(--badge-font-size)  + 2px);
+  font-size: calc(var(--badge-font-size) + 2px);
 }
 
 :host([size="giant"]) {
-  font-size: calc(var(--badge-font-size)  + 4px);
+  font-size: calc(var(--badge-font-size) + 4px);
 }
 
     `;

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

@@ -25,7 +25,7 @@ export function chatMessageAvatarElementJoyStyle() {
   --chat-message-avatar-diameter: 64px;
   --chat-message-avatar-font-family: var(--joy-font-family);
   --chat-message-avatar-font-letter-spacing: 0px;
-  --chat-message-avatar-font-line-height: calc(var(--avatar-font-size)  + 4px);
+  --chat-message-avatar-font-line-height: calc(var(--avatar-font-size) + 4px);
   --chat-message-avatar-font-size: 32px;
   --chat-message-avatar-font-text-decoration: unset;
   --chat-message-avatar-font-text-transform: unset;

package/Controls/Components/Media/Chat/Themes/ChatMessageAvatarElement.Memphis.js

@@ -25,7 +25,7 @@ export function chatMessageAvatarElementMemphisStyle() {
   --chat-message-avatar-diameter: 64px;
   --chat-message-avatar-font-family: var(--memphis-font-family);
   --chat-message-avatar-font-letter-spacing: 0px;
-  --chat-message-avatar-font-line-height: calc(var(--avatar-font-size)  + 4px);
+  --chat-message-avatar-font-line-height: calc(var(--avatar-font-size) + 4px);
   --chat-message-avatar-font-size: 32px;
   --chat-message-avatar-font-text-decoration: unset;
   --chat-message-avatar-font-text-transform: unset;

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

@@ -631,11 +631,11 @@ export function chipElementJoyStyle() {
 }
 
 :host([size="tiny"]) {
-  font-size: calc(var(--chip-font-size)  - 4px);
+  font-size: calc(var(--chip-font-size) - 4px);
 }
 
 :host([size="small"]) {
-  font-size: calc(var(--chip-font-size)  - 2px);
+  font-size: calc(var(--chip-font-size) - 2px);
 }
 
 :host([size="medium"]) {
@@ -643,11 +643,11 @@ export function chipElementJoyStyle() {
 }
 
 :host([size="large"]) {
-  font-size: calc(var(--chip-font-size)  + 2px);
+  font-size: calc(var(--chip-font-size) + 2px);
 }
 
 :host([size="giant"]) {
-  font-size: calc(var(--chip-font-size)  + 4px);
+  font-size: calc(var(--chip-font-size) + 4px);
 }
 
     `;

package/Controls/Components/Media/ColorSwatch/Themes/ColorSwatchElement.Cosmopolitan.js

@@ -82,11 +82,11 @@ export function colorSwatchElementCosmopolitanStyle() {
 }
 
 :host [part="root"] [part="back"] {
-  width: calc(var(--color-swatch-size)  - var(--color-swatch-border-width) * 2);
-  height: calc(var(--color-swatch-size)  - var(--color-swatch-border-width) * 2);
+  width: calc(var(--color-swatch-size) - var(--color-swatch-border-width) * 2);
+  height: calc(var(--color-swatch-size) - var(--color-swatch-border-width) * 2);
   background-repeat: repeat;
   background-color: var(--color-swatch-background-color);
-  border-radius: calc(var(--color-swatch-border-radius)  - var(--color-swatch-border-width));
+  border-radius: calc(var(--color-swatch-border-radius) - var(--color-swatch-border-width));
   background-position: 0 0, 45px 45px;
   background-size: 10px 10px;
   flex: 1;
@@ -95,7 +95,7 @@ export function colorSwatchElementCosmopolitanStyle() {
 
 :host [part="root"] [part="front"] {
   z-index: 1;
-  border-radius: calc(var(--color-swatch-border-radius)  - var(--color-swatch-border-width));
+  border-radius: calc(var(--color-swatch-border-radius) - var(--color-swatch-border-width));
   flex: 1;
 }
 

package/Controls/Components/Media/ColorSwatch/Themes/ColorSwatchElement.Joy.js

@@ -82,11 +82,11 @@ export function colorSwatchElementJoyStyle() {
 }
 
 :host [part="root"] [part="back"] {
-  width: calc(var(--color-swatch-size)  - var(--color-swatch-border-width) * 2);
-  height: calc(var(--color-swatch-size)  - var(--color-swatch-border-width) * 2);
+  width: calc(var(--color-swatch-size) - var(--color-swatch-border-width) * 2);
+  height: calc(var(--color-swatch-size) - var(--color-swatch-border-width) * 2);
   background-repeat: repeat;
   background-color: var(--color-swatch-background-color);
-  border-radius: calc(var(--color-swatch-border-radius)  - var(--color-swatch-border-width));
+  border-radius: calc(var(--color-swatch-border-radius) - var(--color-swatch-border-width));
   background-position: 0 0, 45px 45px;
   background-size: 10px 10px;
   flex: 1;
@@ -95,7 +95,7 @@ export function colorSwatchElementJoyStyle() {
 
 :host [part="root"] [part="front"] {
   z-index: 1;
-  border-radius: calc(var(--color-swatch-border-radius)  - var(--color-swatch-border-width));
+  border-radius: calc(var(--color-swatch-border-radius) - var(--color-swatch-border-width));
   flex: 1;
 }
 

package/Controls/Components/Media/ColorSwatch/Themes/ColorSwatchElement.Memphis.js

@@ -82,11 +82,11 @@ export function colorSwatchElementMemphisStyle() {
 }
 
 :host [part="root"] [part="back"] {
-  width: calc(var(--color-swatch-size)  - var(--color-swatch-border-width) * 2);
-  height: calc(var(--color-swatch-size)  - var(--color-swatch-border-width) * 2);
+  width: calc(var(--color-swatch-size) - var(--color-swatch-border-width) * 2);
+  height: calc(var(--color-swatch-size) - var(--color-swatch-border-width) * 2);
   background-repeat: repeat;
   background-color: var(--color-swatch-background-color);
-  border-radius: calc(var(--color-swatch-border-radius)  - var(--color-swatch-border-width));
+  border-radius: calc(var(--color-swatch-border-radius) - var(--color-swatch-border-width));
   background-position: 0 0, 45px 45px;
   background-size: 10px 10px;
   flex: 1;
@@ -95,7 +95,7 @@ export function colorSwatchElementMemphisStyle() {
 
 :host [part="root"] [part="front"] {
   z-index: 1;
-  border-radius: calc(var(--color-swatch-border-radius)  - var(--color-swatch-border-width));
+  border-radius: calc(var(--color-swatch-border-radius) - var(--color-swatch-border-width));
   flex: 1;
 }
 

package/Controls/Components/Media/Persona/Themes/PersonaElement.Joy.js

@@ -20,7 +20,7 @@ export function personaElementJoyStyle() {
   --persona-border-width: 0px;
   --persona-font-family: var(--joy-font-family);
   --persona-font-letter-spacing: 0px;
-  --persona-font-line-height: calc(var(--persona-font-size)  + 4px);
+  --persona-font-line-height: calc(var(--persona-font-size) + 4px);
   --persona-font-size: 32px;
   --persona-font-text-decoration: unset;
   --persona-font-text-transform: unset;

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

@@ -16,7 +16,7 @@ export function toastElementMemphisStyle() {
   --tost-background-color: var(--memphis-scheme-background);
   --tost-border: var(--memphis-layout-thickness) solid var(--memphis-scheme-contrast);
   --tost-border-color: var(--memphis-scheme-contrast);
-  --tost-border-radius: calc(var(--memphis-layout-radius)  + 12px);
+  --tost-border-radius: calc(var(--memphis-layout-radius) + 12px);
   --tost-border-style: solid;
   --tost-border-width: var(--memphis-layout-thickness);
   --tost-font-family: var(--memphis-font-family);

package/Controls/Components/Primitives/Floating/Themes/FloatingElement.Joy.js

@@ -13,7 +13,7 @@ import { css } from '../../../../../Dom/Css';
 export function floatingElementJoyStyle() {
     return css `
 :host {
-  --floating-arrow-padding-offset: calc(var(--floating-arrow-size-diagonal)  - var(--floating-arrow-size));
+  --floating-arrow-padding-offset: calc(var(--floating-arrow-size-diagonal) - var(--floating-arrow-size));
   --floating-arrow-size: 6px;
   --floating-arrow-size-diagonal: calc(var(--floating-arrow-size) * .7071);
   --floating-background-color: var(--joy-scheme-surface);

package/Controls/Components/Primitives/Floating/Themes/FloatingElement.Memphis.js

@@ -13,7 +13,7 @@ import { css } from '../../../../../Dom/Css';
 export function floatingElementMemphisStyle() {
     return css `
 :host {
-  --floating-arrow-padding-offset: calc(var(--floating-arrow-size-diagonal)  - var(--floating-arrow-size));
+  --floating-arrow-padding-offset: calc(var(--floating-arrow-size-diagonal) - var(--floating-arrow-size));
   --floating-arrow-size: 6px;
   --floating-arrow-size-diagonal: calc(var(--floating-arrow-size) * .7071);
   --floating-background-color: var(--memphis-scheme-surface);

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

@@ -15,7 +15,7 @@ export function popupElementMemphisStyle() {
 :host {
   --popup-background-color: var(--memphis-scheme-background);
   --popup-border-color: var(--memphis-scheme-contrast);
-  --popup-border-radius: calc(var(--memphis-layout-radius)  + 8px);
+  --popup-border-radius: calc(var(--memphis-layout-radius) + 8px);
   --popup-border-style: solid;
   --popup-border-width: calc(var(--memphis-layout-thickness) / 3);
   --popup-font-family: var(--memphis-font-family);

package/Controls/Components/Primitives/TickBar/Themes/TickBarElement.Cosmopolitan.js

@@ -105,7 +105,7 @@ export function tickBarElementCosmopolitanStyle() {
   color: var(--tick-bar-foreground-color);
   justify-content: center;
   align-items: center;
-  margin-block-start: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
+  margin-block-start: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
   display: flex;
   position: absolute;
   transform: translateX(-50%);
@@ -116,8 +116,8 @@ export function tickBarElementCosmopolitanStyle() {
 }
 
 :host([label-position="before"]) [part="label"] {
-  bottom: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
-  margin-block-start: calc((var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap)) * -1);
+  bottom: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
+  margin-block-start: calc((var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap)) * -1);
 }
 
 :host(:not([label-position])) [part="tick"], :host([label-position="after"]) [part="tick"] {
@@ -125,7 +125,7 @@ export function tickBarElementCosmopolitanStyle() {
 }
 
 :host(:not([label-position])) [part="label"], :host([label-position="after"]) [part="label"] {
-  margin-block-start: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
+  margin-block-start: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
 }
 
 :host([orientation="vertical"]) {
@@ -140,7 +140,7 @@ export function tickBarElementCosmopolitanStyle() {
 
 :host([orientation="vertical"]) [part="label"] {
   margin-block-start: 0;
-  margin-inline-start: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
+  margin-inline-start: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
 }
 
 :host([orientation="vertical"][label-position="before"]) [part="label"] {

package/Controls/Components/Primitives/TickBar/Themes/TickBarElement.Joy.js

@@ -105,7 +105,7 @@ export function tickBarElementJoyStyle() {
   color: var(--tick-bar-foreground-color);
   justify-content: center;
   align-items: center;
-  margin-block-start: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
+  margin-block-start: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
   display: flex;
   position: absolute;
   transform: translateX(-50%);
@@ -116,8 +116,8 @@ export function tickBarElementJoyStyle() {
 }
 
 :host([label-position="before"]) [part="label"] {
-  bottom: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
-  margin-block-start: calc((var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap)) * -1);
+  bottom: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
+  margin-block-start: calc((var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap)) * -1);
 }
 
 :host(:not([label-position])) [part="tick"], :host([label-position="after"]) [part="tick"] {
@@ -125,7 +125,7 @@ export function tickBarElementJoyStyle() {
 }
 
 :host(:not([label-position])) [part="label"], :host([label-position="after"]) [part="label"] {
-  margin-block-start: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
+  margin-block-start: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
 }
 
 :host([orientation="vertical"]) {
@@ -140,7 +140,7 @@ export function tickBarElementJoyStyle() {
 
 :host([orientation="vertical"]) [part="label"] {
   margin-block-start: 0;
-  margin-inline-start: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
+  margin-inline-start: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
 }
 
 :host([orientation="vertical"][label-position="before"]) [part="label"] {

package/Controls/Components/Primitives/TickBar/Themes/TickBarElement.Memphis.js

@@ -105,7 +105,7 @@ export function tickBarElementMemphisStyle() {
   color: var(--tick-bar-foreground-color);
   justify-content: center;
   align-items: center;
-  margin-block-start: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
+  margin-block-start: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
   display: flex;
   position: absolute;
   transform: translateX(-50%);
@@ -116,8 +116,8 @@ export function tickBarElementMemphisStyle() {
 }
 
 :host([label-position="before"]) [part="label"] {
-  bottom: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
-  margin-block-start: calc((var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap)) * -1);
+  bottom: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
+  margin-block-start: calc((var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap)) * -1);
 }
 
 :host(:not([label-position])) [part="tick"], :host([label-position="after"]) [part="tick"] {
@@ -125,7 +125,7 @@ export function tickBarElementMemphisStyle() {
 }
 
 :host(:not([label-position])) [part="label"], :host([label-position="after"]) [part="label"] {
-  margin-block-start: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
+  margin-block-start: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
 }
 
 :host([orientation="vertical"]) {
@@ -140,7 +140,7 @@ export function tickBarElementMemphisStyle() {
 
 :host([orientation="vertical"]) [part="label"] {
   margin-block-start: 0;
-  margin-inline-start: calc(var(--tick-bar-tick-height)  + var(--tick-bar-tick-text-gap));
+  margin-inline-start: calc(var(--tick-bar-tick-height) + var(--tick-bar-tick-text-gap));
 }
 
 :host([orientation="vertical"][label-position="before"]) [part="label"] {

package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Cosmopolitan.js

@@ -95,7 +95,7 @@ export function meterRingElementCosmopolitanStyle() {
   fill: none;
   cx: var(--_meter-ring-radius);
   cy: var(--_meter-ring-radius);
-  r: calc(var(--_meter-ring-radius)  - var(--_meter-ring-thickness) / 2);
+  r: calc(var(--_meter-ring-radius) - var(--_meter-ring-thickness) / 2);
 }
 
 :host [part="fill"] {
@@ -104,7 +104,7 @@ export function meterRingElementCosmopolitanStyle() {
   fill: none;
   cx: var(--_meter-ring-radius);
   cy: var(--_meter-ring-radius);
-  r: calc(var(--_meter-ring-radius)  - var(--_meter-ring-thickness) / 2);
+  r: calc(var(--_meter-ring-radius) - var(--_meter-ring-thickness) / 2);
   stroke-dasharray: var(--_meter-ring-circumference) var(--_meter-ring-circumference);
   stroke-dashoffset: calc(var(--_meter-ring-circumference) * (1 - var(--_meter-ring-value) / 100));
   transition-property: stroke-dashoffset, stroke-dasharray, stroke;

package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Joy.js

@@ -95,7 +95,7 @@ export function meterRingElementJoyStyle() {
   fill: none;
   cx: var(--_meter-ring-radius);
   cy: var(--_meter-ring-radius);
-  r: calc(var(--_meter-ring-radius)  - var(--_meter-ring-thickness) / 2);
+  r: calc(var(--_meter-ring-radius) - var(--_meter-ring-thickness) / 2);
 }
 
 :host [part="fill"] {
@@ -104,7 +104,7 @@ export function meterRingElementJoyStyle() {
   fill: none;
   cx: var(--_meter-ring-radius);
   cy: var(--_meter-ring-radius);
-  r: calc(var(--_meter-ring-radius)  - var(--_meter-ring-thickness) / 2);
+  r: calc(var(--_meter-ring-radius) - var(--_meter-ring-thickness) / 2);
   stroke-dasharray: var(--_meter-ring-circumference) var(--_meter-ring-circumference);
   stroke-dashoffset: calc(var(--_meter-ring-circumference) * (1 - var(--_meter-ring-value) / 100));
   transition-property: stroke-dashoffset, stroke-dasharray, stroke;

package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.js

@@ -95,7 +95,7 @@ export function meterRingElementMemphisStyle() {
   fill: none;
   cx: var(--_meter-ring-radius);
   cy: var(--_meter-ring-radius);
-  r: calc(var(--_meter-ring-radius)  - var(--_meter-ring-thickness) / 2);
+  r: calc(var(--_meter-ring-radius) - var(--_meter-ring-thickness) / 2);
 }
 
 :host [part="fill"] {
@@ -104,7 +104,7 @@ export function meterRingElementMemphisStyle() {
   fill: none;
   cx: var(--_meter-ring-radius);
   cy: var(--_meter-ring-radius);
-  r: calc(var(--_meter-ring-radius)  - var(--_meter-ring-thickness) / 2);
+  r: calc(var(--_meter-ring-radius) - var(--_meter-ring-thickness) / 2);
   stroke-dasharray: var(--_meter-ring-circumference) var(--_meter-ring-circumference);
   stroke-dashoffset: calc(var(--_meter-ring-circumference) * (1 - var(--_meter-ring-value) / 100));
   transition-property: stroke-dashoffset, stroke-dasharray, stroke;

package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CA+OtD"}
+{"version":3,"file":"ProgressBarElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAkPtD"}

package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.js

@@ -237,15 +237,18 @@ export function progressBarElementJoyStyle() {
   --_mask-color: #999;
   --_jagged-edges-hack: var(--_mask-color) 0 99%, transparent calc(99% + .6px) 100%;
   --_left-circle: radial-gradient(circle closest-side at var(--joy-layout-radius) center, var(--_jagged-edges-hack));
-  --_right-circle: radial-gradient(circle closest-side at calc(100% - var(--joy-layout-radius)  - var(--segment-gap)) center, var(--_jagged-edges-hack));
-  --_rectangle: linear-gradient(to right, transparent 0 var(--joy-layout-radius), var(--_mask-color) var(--joy-layout-radius) calc(100% - var(--joy-layout-radius)  - var(--segment-gap)), transparent calc(100% - var(--joy-layout-radius)  - var(--segment-gap)));
+  --_right-circle: radial-gradient(circle closest-side at calc(100% - var(--joy-layout-radius) - var(--segment-gap)) center, var(--_jagged-edges-hack));
+  --_rectangle: linear-gradient(to right,
+      transparent 0 var(--joy-layout-radius),
+      var(--_mask-color) var(--joy-layout-radius) calc(100% - var(--joy-layout-radius) - var(--segment-gap)),
+      transparent calc(100% - var(--joy-layout-radius) - var(--segment-gap)));
 }
 
 :host([has-segments]) .progress-container {
   -webkit-mask-image: var(--_left-circle), var(--_right-circle), var(--_rectangle);
   mask-image: var(--_left-circle), var(--_right-circle), var(--_rectangle);
-  -webkit-mask-size: calc(100% * var(--_segment-width)  + var(--segment-gap) * var(--_segment-width));
-  mask-size: calc(100% * var(--_segment-width)  + var(--segment-gap) * var(--_segment-width));
+  -webkit-mask-size: calc(100% * var(--_segment-width) + var(--segment-gap) * var(--_segment-width));
+  mask-size: calc(100% * var(--_segment-width) + var(--segment-gap) * var(--_segment-width));
 }
 
     `;

package/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6OT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ProgressBarElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,0BAA0B;IACtC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgPT,CAAC;AACN,CAAC"}

package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Cosmopolitan.js

@@ -86,7 +86,7 @@ export function progressRingElementCosmopolitanStyle() {
   stroke-width: var(--_progress-ring-thickness);
   cx: var(--_progress-ring-radius);
   cy: var(--_progress-ring-radius);
-  r: calc(var(--_progress-ring-radius)  - var(--_progress-ring-thickness) / 2);
+  r: calc(var(--_progress-ring-radius) - var(--_progress-ring-thickness) / 2);
   fill: none;
 }
 
@@ -96,7 +96,7 @@ export function progressRingElementCosmopolitanStyle() {
   fill: none;
   cx: var(--_progress-ring-radius);
   cy: var(--_progress-ring-radius);
-  r: calc(var(--_progress-ring-radius)  - var(--_progress-ring-thickness) / 2);
+  r: calc(var(--_progress-ring-radius) - var(--_progress-ring-thickness) / 2);
 }
 
 :host [part="svg"] [part="fill"] {
@@ -105,7 +105,7 @@ export function progressRingElementCosmopolitanStyle() {
   fill: none;
   cx: var(--_progress-ring-radius);
   cy: var(--_progress-ring-radius);
-  r: calc(var(--_progress-ring-radius)  - var(--_progress-ring-thickness) / 2);
+  r: calc(var(--_progress-ring-radius) - var(--_progress-ring-thickness) / 2);
   stroke-dasharray: var(--_circumference) var(--_circumference);
   stroke-dashoffset: calc(var(--_circumference) * (1 - var(--_progress-ring-value) / 100));
   transition-property: stroke-dashoffset stroke-dasharray stroke;

package/Controls/Components/Ranges/ProgressRing/Themes/ProgressRingElement.Joy.js

@@ -86,7 +86,7 @@ export function progressRingElementJoyStyle() {
   stroke-width: var(--_progress-ring-thickness);
   cx: var(--_progress-ring-radius);
   cy: var(--_progress-ring-radius);
-  r: calc(var(--_progress-ring-radius)  - var(--_progress-ring-thickness) / 2);
+  r: calc(var(--_progress-ring-radius) - var(--_progress-ring-thickness) / 2);
   fill: none;
 }
 
@@ -96,7 +96,7 @@ export function progressRingElementJoyStyle() {
   fill: none;
   cx: var(--_progress-ring-radius);
   cy: var(--_progress-ring-radius);
-  r: calc(var(--_progress-ring-radius)  - var(--_progress-ring-thickness) / 2);
+  r: calc(var(--_progress-ring-radius) - var(--_progress-ring-thickness) / 2);
 }
 
 :host [part="svg"] [part="fill"] {
@@ -105,7 +105,7 @@ export function progressRingElementJoyStyle() {
   fill: none;
   cx: var(--_progress-ring-radius);
   cy: var(--_progress-ring-radius);
-  r: calc(var(--_progress-ring-radius)  - var(--_progress-ring-thickness) / 2);
+  r: calc(var(--_progress-ring-radius) - var(--_progress-ring-thickness) / 2);
   stroke-dasharray: var(--_circumference) var(--_circumference);
   stroke-dashoffset: calc(var(--_circumference) * (1 - var(--_progress-ring-value) / 100));
   transition-property: stroke-dashoffset stroke-dasharray stroke;