@breadstone/mosaik-elements-foundation 0.0.217 → 0.0.218

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

@@ -13,6 +13,16 @@ import { css } from '../../../../../Dom/Css';
 export function meterRingElementCosmopolitanStyle() {
     return css `
 :host {
+  --meter-ring-background-color: unset;
+  --meter-ring-border-color: unset;
+  --meter-ring-border-radius: unset;
+  --meter-ring-border-style: unset;
+  --meter-ring-border-width: unset;
+  --meter-ring-fill-color: unset;
+  --meter-ring-fill-color-high: unset;
+  --meter-ring-fill-color-low: unset;
+  --meter-ring-fill-color-normal: unset;
+  --meter-ring-fill-color-optimum: unset;
   --meter-ring-font-family: unset;
   --meter-ring-font-letter-spacing: unset;
   --meter-ring-font-line-height: unset;
@@ -20,11 +30,16 @@ export function meterRingElementCosmopolitanStyle() {
   --meter-ring-font-text-decoration: unset;
   --meter-ring-font-text-transform: unset;
   --meter-ring-font-weight: unset;
+  --meter-ring-foreground-color: unset;
   --meter-ring-gap: unset;
+  --meter-ring-marker-color: var(--cosmopolitan-scheme-foreground);
   --meter-ring-padding-bottom: unset;
   --meter-ring-padding-left: unset;
   --meter-ring-padding-right: unset;
   --meter-ring-padding-top: unset;
+  --meter-ring-radius: unset;
+  --meter-ring-shadow: unset;
+  --meter-ring-thickness: unset;
   --meter-ring-transition-duration: unset;
   --meter-ring-transition-mode: unset;
   --meter-ring-transition-property: unset;
@@ -58,6 +73,7 @@ export function meterRingElementCosmopolitanStyle() {
 }
 
 :host {
+  --_meter-ring-circumference: calc(2 * 3.1416 * var(--_meter-ring-radius));
   line-height: 0;
   display: block;
 }
@@ -73,10 +89,43 @@ export function meterRingElementCosmopolitanStyle() {
   stroke-linecap: round;
 }
 
+:host [part="bar"] {
+  stroke: var(--meter-ring-background-color);
+  stroke-width: var(--_meter-ring-thickness);
+  fill: none;
+  cx: var(--_meter-ring-radius);
+  cy: var(--_meter-ring-radius);
+  r: calc(var(--_meter-ring-radius)  - var(--_meter-ring-thickness) / 2);
+}
+
 :host [part="fill"] {
-  border-radius: 10px;
-  height: 100%;
-  transition: width .3s;
+  stroke-width: var(--_meter-ring-thickness);
+  stroke-linecap: round;
+  fill: none;
+  cx: var(--_meter-ring-radius);
+  cy: var(--_meter-ring-radius);
+  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;
+  transition-duration: var(--meter-ring-transition-duration);
+  transition-timing-function: var(--meter-ring-transition-mode);
+  stroke: var(--meter-ring-fill-color);
+}
+
+:host [part="segment"] {
+  stroke-linecap: butt;
+  transition-property: stroke;
+  transition-duration: var(--meter-ring-transition-duration);
+  transition-timing-function: var(--meter-ring-transition-mode);
+}
+
+:host [part="marker"] {
+  fill: var(--meter-ring-marker-color);
+  filter: drop-shadow(0 0 2px #0000004d);
+  transition-property: cx, cy;
+  transition-duration: var(--meter-ring-transition-duration);
+  transition-timing-function: var(--meter-ring-transition-mode);
 }
 
 :host [part="hint"] {
@@ -85,6 +134,41 @@ export function meterRingElementCosmopolitanStyle() {
   display: flex;
 }
 
+:host [part="segment"][data-range="low"] {
+  stroke: var(--meter-ring-fill-color-low);
+}
+
+:host [part="segment"][data-range="optimum"] {
+  stroke: var(--meter-ring-fill-color-optimum);
+}
+
+:host [part="segment"][data-range="high"] {
+  stroke: var(--meter-ring-fill-color-high);
+}
+
+:host([disabled]:not([disabled="false"])) {
+  --meter-ring-background-color: var(--cosmopolitan-scheme-background);
+  --meter-ring-border-color: var(--cosmopolitan-scheme-highlight);
+  --meter-ring-foreground-color: var(--cosmopolitan-scheme-disabled);
+  --meter-ring-fill-color: var(--cosmopolitan-scheme-disabled);
+}
+
+:host([range="normal"]) [part="fill"] {
+  --meter-ring-fill-color: var(--meter-ring-fill-color-normal);
+}
+
+:host([range="low"]) [part="fill"] {
+  --meter-ring-fill-color: var(--meter-ring-fill-color-low);
+}
+
+:host([range="high"]) [part="fill"] {
+  --meter-ring-fill-color: var(--meter-ring-fill-color-high);
+}
+
+:host([range="optimum"]) [part="fill"] {
+  --meter-ring-fill-color: var(--meter-ring-fill-color-optimum);
+}
+
     `;
 }
 //# sourceMappingURL=MeterRingElement.Cosmopolitan.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MeterRingElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Cosmopolitan.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,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;AACN,CAAC"}
+{"version":3,"file":"MeterRingElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Cosmopolitan.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,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8JT,CAAC;AACN,CAAC"}

package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeterRingElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAoGpD"}
+{"version":3,"file":"MeterRingElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAgKpD"}

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

@@ -13,21 +13,36 @@ import { css } from '../../../../../Dom/Css';
 export function meterRingElementJoyStyle() {
     return css `
 :host {
-  --meter-ring-font-family: unset;
+  --meter-ring-background-color: var(--joy-scheme-highlight);
+  --meter-ring-border-color: var(--joy-scheme-highlight);
+  --meter-ring-border-radius: 16px;
+  --meter-ring-border-style: solid;
+  --meter-ring-border-width: 0px;
+  --meter-ring-fill-color: var(--joy-color-light-info-500);
+  --meter-ring-fill-color-high: var(--joy-color-light-danger-500);
+  --meter-ring-fill-color-low: var(--joy-color-light-warning-500);
+  --meter-ring-fill-color-normal: var(--joy-color-light-info-500);
+  --meter-ring-fill-color-optimum: var(--joy-color-light-success-500);
+  --meter-ring-font-family: var(--joy-font-family);
   --meter-ring-font-letter-spacing: unset;
   --meter-ring-font-line-height: unset;
-  --meter-ring-font-size: unset;
+  --meter-ring-font-size: 12px;
   --meter-ring-font-text-decoration: unset;
   --meter-ring-font-text-transform: unset;
-  --meter-ring-font-weight: unset;
-  --meter-ring-gap: unset;
-  --meter-ring-padding-bottom: unset;
-  --meter-ring-padding-left: unset;
-  --meter-ring-padding-right: unset;
-  --meter-ring-padding-top: unset;
-  --meter-ring-transition-duration: unset;
-  --meter-ring-transition-mode: unset;
-  --meter-ring-transition-property: unset;
+  --meter-ring-font-weight: normal;
+  --meter-ring-foreground-color: var(--joy-color-neutral-900);
+  --meter-ring-gap: 8px;
+  --meter-ring-marker-color: var(--joy-scheme-foreground);
+  --meter-ring-padding-bottom: 4px;
+  --meter-ring-padding-left: 8px;
+  --meter-ring-padding-right: 8px;
+  --meter-ring-padding-top: 4px;
+  --meter-ring-radius: 60px;
+  --meter-ring-shadow: unset;
+  --meter-ring-thickness: 6px;
+  --meter-ring-transition-duration: var(--joy-duration-short);
+  --meter-ring-transition-mode: ease;
+  --meter-ring-transition-property: background-color, color, border-color, opacity, box-shadow, stroke-dashoffset;
   --meter-ring-translate: unset;
 }
 
@@ -58,6 +73,7 @@ export function meterRingElementJoyStyle() {
 }
 
 :host {
+  --_meter-ring-circumference: calc(2 * 3.1416 * var(--_meter-ring-radius));
   line-height: 0;
   display: block;
 }
@@ -73,10 +89,43 @@ export function meterRingElementJoyStyle() {
   stroke-linecap: round;
 }
 
+:host [part="bar"] {
+  stroke: var(--meter-ring-background-color);
+  stroke-width: var(--_meter-ring-thickness);
+  fill: none;
+  cx: var(--_meter-ring-radius);
+  cy: var(--_meter-ring-radius);
+  r: calc(var(--_meter-ring-radius)  - var(--_meter-ring-thickness) / 2);
+}
+
 :host [part="fill"] {
-  border-radius: 10px;
-  height: 100%;
-  transition: width .3s;
+  stroke-width: var(--_meter-ring-thickness);
+  stroke-linecap: round;
+  fill: none;
+  cx: var(--_meter-ring-radius);
+  cy: var(--_meter-ring-radius);
+  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;
+  transition-duration: var(--meter-ring-transition-duration);
+  transition-timing-function: var(--meter-ring-transition-mode);
+  stroke: var(--meter-ring-fill-color);
+}
+
+:host [part="segment"] {
+  stroke-linecap: butt;
+  transition-property: stroke;
+  transition-duration: var(--meter-ring-transition-duration);
+  transition-timing-function: var(--meter-ring-transition-mode);
+}
+
+:host [part="marker"] {
+  fill: var(--meter-ring-marker-color);
+  filter: drop-shadow(0 0 2px #0000004d);
+  transition-property: cx, cy;
+  transition-duration: var(--meter-ring-transition-duration);
+  transition-timing-function: var(--meter-ring-transition-mode);
 }
 
 :host [part="hint"] {
@@ -85,28 +134,39 @@ export function meterRingElementJoyStyle() {
   display: flex;
 }
 
-:host [part="bar"] {
-  stroke: var(--joy-scheme-highlight);
+:host [part="segment"][data-range="low"] {
+  stroke: var(--meter-ring-fill-color-low);
 }
 
-:host [part="fill"] {
-  background-color: var(--joy-color-info-500);
+:host [part="segment"][data-range="optimum"] {
+  stroke: var(--meter-ring-fill-color-optimum);
+}
+
+:host [part="segment"][data-range="high"] {
+  stroke: var(--meter-ring-fill-color-high);
+}
+
+:host([disabled]:not([disabled="false"])) {
+  --meter-ring-background-color: var(--joy-scheme-background);
+  --meter-ring-border-color: var(--joy-scheme-highlight);
+  --meter-ring-foreground-color: var(--joy-scheme-disabled);
+  --meter-ring-fill-color: var(--joy-scheme-disabled);
 }
 
 :host([range="normal"]) [part="fill"] {
-  stroke: var(--joy-color-info-500);
+  --meter-ring-fill-color: var(--meter-ring-fill-color-normal);
 }
 
 :host([range="low"]) [part="fill"] {
-  stroke: var(--joy-color-warning-500);
+  --meter-ring-fill-color: var(--meter-ring-fill-color-low);
 }
 
 :host([range="high"]) [part="fill"] {
-  stroke: var(--joy-color-danger-500);
+  --meter-ring-fill-color: var(--meter-ring-fill-color-high);
 }
 
 :host([range="optimum"]) [part="fill"] {
-  stroke: var(--joy-color-success-500);
+  --meter-ring-fill-color: var(--meter-ring-fill-color-optimum);
 }
 
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"MeterRingElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.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,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkGT,CAAC;AACN,CAAC"}
+{"version":3,"file":"MeterRingElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.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,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8JT,CAAC;AACN,CAAC"}

package/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeterRingElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CA4ExD"}
+{"version":3,"file":"MeterRingElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CAgKxD"}

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

@@ -13,21 +13,36 @@ import { css } from '../../../../../Dom/Css';
 export function meterRingElementMemphisStyle() {
     return css `
 :host {
-  --meter-ring-font-family: unset;
-  --meter-ring-font-letter-spacing: unset;
-  --meter-ring-font-line-height: unset;
-  --meter-ring-font-size: unset;
-  --meter-ring-font-text-decoration: unset;
-  --meter-ring-font-text-transform: unset;
-  --meter-ring-font-weight: unset;
-  --meter-ring-gap: unset;
-  --meter-ring-padding-bottom: unset;
-  --meter-ring-padding-left: unset;
-  --meter-ring-padding-right: unset;
-  --meter-ring-padding-top: unset;
-  --meter-ring-transition-duration: unset;
-  --meter-ring-transition-mode: unset;
-  --meter-ring-transition-property: unset;
+  --meter-ring-background-color: var(--memphis-color-light-neutral-200);
+  --meter-ring-border-color: var(--memphis-scheme-transparent);
+  --meter-ring-border-radius: 50%;
+  --meter-ring-border-style: solid;
+  --meter-ring-border-width: 0px;
+  --meter-ring-fill-color: var(--memphis-color-light-info-500);
+  --meter-ring-fill-color-high: var(--memphis-color-light-danger-500);
+  --meter-ring-fill-color-low: var(--memphis-color-light-warning-500);
+  --meter-ring-fill-color-normal: var(--memphis-color-light-info-500);
+  --meter-ring-fill-color-optimum: var(--memphis-color-light-success-500);
+  --meter-ring-font-family: var(--memphis-font-family);
+  --meter-ring-font-letter-spacing: var(--memphis-typography-body2-letter-spacing);
+  --meter-ring-font-line-height: var(--memphis-typography-body2-line-height);
+  --meter-ring-font-size: var(--memphis-typography-body2-font-size);
+  --meter-ring-font-text-decoration: var(--memphis-typography-body2-text-decoration);
+  --meter-ring-font-text-transform: var(--memphis-typography-body2-text-transform);
+  --meter-ring-font-weight: var(--memphis-typography-body2-font-weight);
+  --meter-ring-foreground-color: var(--memphis-scheme-foreground);
+  --meter-ring-gap: var(--memphis-layout-space);
+  --meter-ring-marker-color: var(--memphis-scheme-foreground);
+  --meter-ring-padding-bottom: 0px;
+  --meter-ring-padding-left: 0px;
+  --meter-ring-padding-right: 0px;
+  --meter-ring-padding-top: 0px;
+  --meter-ring-radius: 60px;
+  --meter-ring-shadow: unset;
+  --meter-ring-thickness: 6px;
+  --meter-ring-transition-duration: var(--memphis-duration-short);
+  --meter-ring-transition-mode: ease;
+  --meter-ring-transition-property: background-color, color, border-color, opacity, box-shadow, stroke-dashoffset;
   --meter-ring-translate: unset;
 }
 
@@ -58,6 +73,7 @@ export function meterRingElementMemphisStyle() {
 }
 
 :host {
+  --_meter-ring-circumference: calc(2 * 3.1416 * var(--_meter-ring-radius));
   line-height: 0;
   display: block;
 }
@@ -73,10 +89,43 @@ export function meterRingElementMemphisStyle() {
   stroke-linecap: round;
 }
 
+:host [part="bar"] {
+  stroke: var(--meter-ring-background-color);
+  stroke-width: var(--_meter-ring-thickness);
+  fill: none;
+  cx: var(--_meter-ring-radius);
+  cy: var(--_meter-ring-radius);
+  r: calc(var(--_meter-ring-radius)  - var(--_meter-ring-thickness) / 2);
+}
+
 :host [part="fill"] {
-  border-radius: 10px;
-  height: 100%;
-  transition: width .3s;
+  stroke-width: var(--_meter-ring-thickness);
+  stroke-linecap: round;
+  fill: none;
+  cx: var(--_meter-ring-radius);
+  cy: var(--_meter-ring-radius);
+  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;
+  transition-duration: var(--meter-ring-transition-duration);
+  transition-timing-function: var(--meter-ring-transition-mode);
+  stroke: var(--meter-ring-fill-color);
+}
+
+:host [part="segment"] {
+  stroke-linecap: butt;
+  transition-property: stroke;
+  transition-duration: var(--meter-ring-transition-duration);
+  transition-timing-function: var(--meter-ring-transition-mode);
+}
+
+:host [part="marker"] {
+  fill: var(--meter-ring-marker-color);
+  filter: drop-shadow(0 0 2px #0000004d);
+  transition-property: cx, cy;
+  transition-duration: var(--meter-ring-transition-duration);
+  transition-timing-function: var(--meter-ring-transition-mode);
 }
 
 :host [part="hint"] {
@@ -85,6 +134,41 @@ export function meterRingElementMemphisStyle() {
   display: flex;
 }
 
+:host [part="segment"][data-range="low"] {
+  stroke: var(--meter-ring-fill-color-low);
+}
+
+:host [part="segment"][data-range="optimum"] {
+  stroke: var(--meter-ring-fill-color-optimum);
+}
+
+:host [part="segment"][data-range="high"] {
+  stroke: var(--meter-ring-fill-color-high);
+}
+
+:host([disabled]:not([disabled="false"])) {
+  --meter-ring-background-color: var(--memphis-scheme-background);
+  --meter-ring-border-color: var(--memphis-scheme-highlight);
+  --meter-ring-foreground-color: var(--memphis-scheme-disabled);
+  --meter-ring-fill-color: var(--memphis-scheme-disabled);
+}
+
+:host([range="normal"]) [part="fill"] {
+  --meter-ring-fill-color: var(--meter-ring-fill-color-normal);
+}
+
+:host([range="low"]) [part="fill"] {
+  --meter-ring-fill-color: var(--meter-ring-fill-color-low);
+}
+
+:host([range="high"]) [part="fill"] {
+  --meter-ring-fill-color: var(--meter-ring-fill-color-high);
+}
+
+:host([range="optimum"]) [part="fill"] {
+  --meter-ring-fill-color: var(--meter-ring-fill-color-optimum);
+}
+
     `;
 }
 //# sourceMappingURL=MeterRingElement.Memphis.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MeterRingElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.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,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;AACN,CAAC"}
+{"version":3,"file":"MeterRingElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterRing/Themes/MeterRingElement.Memphis.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,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8JT,CAAC;AACN,CAAC"}

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

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

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

@@ -86,14 +86,14 @@ export function progressBarElementCosmopolitanStyle() {
 }
 
 :host .progress-container .outer .inner .bg.indeterminate {
-  position: initial;
+  background-color: #0000 !important;
 }
 
 :host .progress-container .outer .inner .bg.indeterminate:before {
   content: "";
-  will-change: left, right;
-  animation-name: indeterminate;
-  animation-fill-mode: "forwards";
+  will-change: transform;
+  transform-origin: 0;
+  width: 100%;
   animation: 2.1s cubic-bezier(.65, .815, .735, .395) infinite indeterminate;
   position: absolute;
   top: 0;
@@ -103,9 +103,9 @@ export function progressBarElementCosmopolitanStyle() {
 
 :host .progress-container .outer .inner .bg.indeterminate:after {
   content: "";
-  will-change: left, right;
-  animation-name: indeterminate-short;
-  animation-fill-mode: "forwards";
+  will-change: transform;
+  transform-origin: 0;
+  width: 100%;
   animation: 2.1s cubic-bezier(.165, .84, .44, 1) 1.15s infinite indeterminate-short;
   position: absolute;
   top: 0;
@@ -143,38 +143,62 @@ export function progressBarElementCosmopolitanStyle() {
 
 @keyframes indeterminate {
   0% {
-    left: -35%;
-    right: 100%;
+    transform: translateX(-100%)scaleX(0);
+  }
+
+  30% {
+    transform: translateX(-30%)scaleX(.5);
   }
 
   60% {
-    left: 100%;
-    right: -90%;
+    transform: translateX(100%)scaleX(.5);
   }
 
   100% {
-    left: 100%;
-    right: -90%;
+    transform: translateX(100%)scaleX(0);
   }
 }
 
 @keyframes indeterminate-short {
   0% {
-    left: -200%;
-    right: 100%;
+    transform: translateX(-100%)scaleX(0);
   }
 
-  60% {
-    left: 107%;
-    right: -8%;
+  40% {
+    transform: translateX(-50%)scaleX(.3);
+  }
+
+  70% {
+    transform: translateX(100%)scaleX(.3);
   }
 
   100% {
-    left: 107%;
-    right: -8%;
+    transform: translateX(100%)scaleX(0);
   }
 }
 
+:host .progress-container .outer .inner {
+  background-color: var(--cosmopolitan-scheme-highlight);
+  border-radius: var(--cosmopolitan-layout-radius);
+}
+
+:host .progress-container .outer .inner .bg {
+  background-color: var(--cosmopolitan-color-primary-500);
+}
+
+:host .progress-container .outer .inner .bg.indeterminate:before, :host .progress-container .outer .inner .bg.indeterminate:after {
+  background-color: var(--cosmopolitan-color-primary-500);
+  border-radius: inherit;
+}
+
+:host([disabled]:not([disabled="false"])) .progress-container .outer .inner .bg {
+  background-color: var(--cosmopolitan-color-neutral-500);
+}
+
+:host([variant="primary"]:not([disabled]:not([disabled="false"]))) .progress-container .outer .inner .bg, :host([variant="primary"]:not([disabled]:not([disabled="false"]))) .progress-container .outer .inner .bg.indeterminate:before, :host([variant="primary"]:not([disabled]:not([disabled="false"]))) .progress-container .outer .inner .bg.indeterminate:after {
+  background-color: var(--cosmopolitan-color-primary-500);
+}
+
     `;
 }
 //# sourceMappingURL=ProgressBarElement.Cosmopolitan.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Cosmopolitan.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,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoKT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ProgressBarElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/ProgressBar/Themes/ProgressBarElement.Cosmopolitan.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,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4LT,CAAC;AACN,CAAC"}

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,CA6OtD"}
+{"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"}