@breadstone/mosaik-elements-foundation 0.0.216 → 0.0.218

package/Controls/Components/Ranges/MeterBar/MeterBarElement.js

@@ -16,6 +16,7 @@ import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
 import { Watch } from '../../../Decorators/WatchDecorator';
 import { MeterRange } from '../../../Types/MeterRange';
+import { MeterScale } from '../../../Types/MeterScale';
 import { TextElement } from '../../Primitives/Text/TextElement';
 import { RangeBaseElement } from '../Abstracts/RangeBaseElement';
 import { meterBarElementTemplate } from './MeterBarElementTemplate';
@@ -23,7 +24,6 @@ import { meterBarElementJoyStyle } from './Themes/MeterBarElement.Joy';
 import { meterBarElementMemphisStyle } from './Themes/MeterBarElement.Memphis';
 import { meterBarElementCosmopolitanStyle } from './Themes/MeterBarElement.Cosmopolitan';
 import { Themeable } from '../../../Behaviors/Themeable';
-// #endregion
 /**
  * Meter bar - a visual representation of a numeric value within a specified range.
  *
@@ -39,6 +39,7 @@ let MeterBarElement = class MeterBarElement extends Themeable(Variantable(Orient
     _low;
     _optimum;
     _range;
+    _scale;
     // #endregion
     // #region Ctor
     /**
@@ -51,6 +52,7 @@ let MeterBarElement = class MeterBarElement extends Themeable(Variantable(Orient
         this._low = 0;
         this._optimum = 0;
         this._range = MeterRange.Normal;
+        this._scale = MeterScale.Continuous;
     }
     // #endregion
     // #region Properties
@@ -141,6 +143,77 @@ let MeterBarElement = class MeterBarElement extends Themeable(Variantable(Orient
             this.requestUpdate('range');
         }
     }
+    /**
+     * Gets or sets the `scale` property.
+     * Determines how the meter scale is visually represented.
+     * - `continuous`: Single continuous bar with color based on current range (default).
+     * - `segmented`: Visible segments for low, optimum, and high zones with a marker for the current value.
+     *
+     * @public
+     * @attr
+     */
+    get scale() {
+        return this._scale;
+    }
+    set scale(value) {
+        if (this._scale !== value) {
+            this._scale = value;
+            this.requestUpdate('scale');
+        }
+    }
+    /**
+     * Gets the percentage of the current value within the range (0-100).
+     *
+     * @public
+     * @readonly
+     */
+    get percent() {
+        if (this.max <= this.min) {
+            return 0;
+        }
+        return ((this.value - this.min) / (this.max - this.min)) * 100;
+    }
+    /**
+     * Gets the segments for the segmented scale mode.
+     * Returns an array of segments representing low, optimum, and high zones.
+     *
+     * @public
+     * @readonly
+     */
+    get segments() {
+        const totalRange = this.max - this.min;
+        if (totalRange <= 0) {
+            return [];
+        }
+        const segments = [];
+        // Low segment: min to low
+        const lowWidth = ((this.low - this.min) / totalRange) * 100;
+        if (lowWidth > 0) {
+            segments.push({
+                range: MeterRange.Low,
+                width: lowWidth
+            });
+        }
+        // Optimum segment: low to high
+        const optimumWidth = ((this.high - this.low) / totalRange) * 100;
+        if (optimumWidth > 0) {
+            segments.push({
+                range: MeterRange.Optimum,
+                width: optimumWidth
+            });
+        }
+        // High segment: high to max
+        const highWidth = ((this.max - this.high) / totalRange) * 100;
+        if (highWidth > 0) {
+            segments.push({
+                range: MeterRange.High,
+                width: highWidth
+            });
+        }
+        return segments;
+    }
+    // #endregion
+    // #region Methods
     onPropertyChanged() {
         let range = MeterRange.Normal;
         if (this.value < this.low) {
@@ -180,10 +253,15 @@ __decorate([
     __metadata("design:type", String),
     __metadata("design:paramtypes", [String])
 ], MeterBarElement.prototype, "range", null);
+__decorate([
+    Attribute({ type: MeterScale }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], MeterBarElement.prototype, "scale", null);
 __decorate([
     Watch('value'),
-    Watch('minimum'),
-    Watch('maximum'),
+    Watch('min'),
+    Watch('max'),
     Watch('low'),
     Watch('high'),
     Watch('optimum'),

package/Controls/Components/Ranges/MeterBar/MeterBarElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeterBarElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Ranges/MeterBar/MeterBarElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MeterBarElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Ranges/MeterBar/MeterBarElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeterBarElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,eAAe,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAqBvF"}
+{"version":3,"file":"MeterBarElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIzD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,SAAS,eAAe,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAkCvF"}

package/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.js

@@ -1,7 +1,8 @@
 // #region Imports
 import { html } from '../../../../Dom/Html';
 import { RendererServiceLocator } from '../../../../Dom/Renderer';
-import { styleMap, when } from '../../../Directives/Directives';
+import { repeat, styleMap, when } from '../../../Directives/Directives';
+import { MeterScale } from '../../../Types/MeterScale';
 // #endregion
 /**
  * The template of the {@link MeterBarElement}.
@@ -9,7 +10,8 @@ import { styleMap, when } from '../../../Directives/Directives';
  * @public
  */
 export function meterBarElementTemplate(e) {
-    const percentage = ((e.value - e.min) / (e.max - e.min)) * 100;
+    const percentage = e.percent;
+    const isSegmented = e.scale === MeterScale.Segmented;
     return html `
         ${when(e.label.trim(), () => html `
         <slot name="label">
@@ -20,12 +22,24 @@ export function meterBarElementTemplate(e) {
         `)}
         <div part="bar"
              style="${styleMap({ height: `${e.thickness}px` })}">
-            <div part="fill"
-                 style="width: ${percentage}%"></div>
+            ${when(isSegmented, () => html `
+                <div part="segments">
+                    ${repeat(e.segments, (segment) => segment.range, (segment) => html `
+                    <div part="segment"
+                         data-range="${segment.range}"
+                         style="${styleMap({ width: `${segment.width}%` })}"></div>
+                    `)}
+                </div>
+                <div part="marker"
+                     style="${styleMap({ left: `${percentage}%` })}"></div>
+            `, () => html `
+                <div part="fill"
+                     style="width: ${percentage}%"></div>
+            `)}
         </div>
         <div part="hint">
             <slot name="hint"
-                  @slotchange="${(x) => x.target.assignedElements().map((x, i) => RendererServiceLocator.current.setStyle(x, 'order', i))}"></slot>
+                  @slotchange="${(x) => x.target.assignedElements().map((y, i) => RendererServiceLocator.current.setStyle(y, 'order', i))}"></slot>
         </div>
     `;
 }

package/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeterBarElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AAGhE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAA4B,CAAI;IACnE,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAE/D,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;sCAGH,IAAI;kCACR,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE;;SAEvC,CAAC;;sBAEY,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;;iCAE7B,UAAU;;;;iCAIV,CAAC,CAAQ,EAAE,EAAE,CAAG,CAAC,CAAC,MAA0B,CAAC,gBAAgB,EAAyB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;;KAExL,CAAC;AACN,CAAC"}
+{"version":3,"file":"MeterBarElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Ranges/MeterBar/MeterBarElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAGvD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAA4B,CAAI;IACnE,MAAM,UAAU,GAAG,CAAC,CAAC,OAAO,CAAC;IAC7B,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,SAAS,CAAC;IAErD,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;sCAGH,IAAI;kCACR,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE;;SAEvC,CAAC;;sBAEY,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;cAChD,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;sBAEpB,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,CAAA;;uCAE/C,OAAO,CAAC,KAAK;kCAClB,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;qBACrD,CAAC;;;8BAGQ,QAAQ,CAAC,EAAE,IAAI,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC;aACrD,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;qCAEY,UAAU;aAClC,CAAC;;;;iCAImB,CAAC,CAAQ,EAAE,EAAE,CAAG,CAAC,CAAC,MAA0B,CAAC,gBAAgB,EAAyB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,sBAAsB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;;KAExL,CAAC;AACN,CAAC"}

package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeterBarElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,SAAS,CA0E5D"}
+{"version":3,"file":"MeterBarElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,gCAAgC,IAAI,SAAS,CA4H5D"}

package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Cosmopolitan.js

@@ -13,6 +13,9 @@ import { css } from '../../../../../Dom/Css';
 export function meterBarElementCosmopolitanStyle() {
     return css `
 :host {
+  --meter-bar-fill-color-high: var(--cosmopolitan-color-semantic-warning);
+  --meter-bar-fill-color-low: var(--cosmopolitan-color-semantic-error);
+  --meter-bar-fill-color-optimum: var(--cosmopolitan-color-semantic-success);
   --meter-bar-font-family: unset;
   --meter-bar-font-letter-spacing: unset;
   --meter-bar-font-line-height: unset;
@@ -21,6 +24,7 @@ export function meterBarElementCosmopolitanStyle() {
   --meter-bar-font-text-transform: unset;
   --meter-bar-font-weight: unset;
   --meter-bar-gap: unset;
+  --meter-bar-marker-color: var(--cosmopolitan-scheme-foreground);
   --meter-bar-padding-bottom: unset;
   --meter-bar-padding-left: unset;
   --meter-bar-padding-right: unset;
@@ -68,6 +72,7 @@ export function meterBarElementCosmopolitanStyle() {
   border-radius: 10px;
   width: 100%;
   height: 4px;
+  position: relative;
   overflow: hidden;
 }
 
@@ -77,12 +82,57 @@ export function meterBarElementCosmopolitanStyle() {
   transition: width .3s;
 }
 
+:host [part="bar"] [part="segments"] {
+  flex-direction: row;
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+:host [part="bar"] [part="segment"] {
+  flex-shrink: 0;
+  height: 100%;
+}
+
+:host [part="bar"] [part="segment"]:first-child {
+  border-radius: 10px 0 0 10px;
+}
+
+:host [part="bar"] [part="segment"]:last-child {
+  border-radius: 0 10px 10px 0;
+}
+
+:host [part="bar"] [part="marker"] {
+  background-color: var(--meter-bar-marker-color);
+  border-radius: 2px;
+  width: 4px;
+  height: calc(100% + 8px);
+  transition: left .3s;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 4px #0000004d;
+}
+
 :host [part="hint"] {
   flex-direction: row;
   justify-content: space-between;
   display: flex;
 }
 
+:host [part="bar"] [part="segment"][data-range="low"] {
+  background-color: var(--meter-bar-fill-color-low);
+}
+
+:host [part="bar"] [part="segment"][data-range="optimum"] {
+  background-color: var(--meter-bar-fill-color-optimum);
+}
+
+:host [part="bar"] [part="segment"][data-range="high"] {
+  background-color: var(--meter-bar-fill-color-high);
+}
+
     `;
 }
 //# sourceMappingURL=MeterBarElement.Cosmopolitan.js.map

package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeterBarElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.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,gCAAgC;IAC5C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwET,CAAC;AACN,CAAC"}
+{"version":3,"file":"MeterBarElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.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,gCAAgC;IAC5C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0HT,CAAC;AACN,CAAC"}

package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Joy.d.ts.map

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

package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Joy.js

@@ -13,6 +13,9 @@ import { css } from '../../../../../Dom/Css';
 export function meterBarElementJoyStyle() {
     return css `
 :host {
+  --meter-bar-fill-color-high: var(--joy-color-semantic-warning);
+  --meter-bar-fill-color-low: var(--joy-color-semantic-error);
+  --meter-bar-fill-color-optimum: var(--joy-color-semantic-success);
   --meter-bar-font-family: unset;
   --meter-bar-font-letter-spacing: unset;
   --meter-bar-font-line-height: unset;
@@ -21,6 +24,7 @@ export function meterBarElementJoyStyle() {
   --meter-bar-font-text-transform: unset;
   --meter-bar-font-weight: unset;
   --meter-bar-gap: unset;
+  --meter-bar-marker-color: var(--joy-scheme-foreground);
   --meter-bar-padding-bottom: unset;
   --meter-bar-padding-left: unset;
   --meter-bar-padding-right: unset;
@@ -68,6 +72,7 @@ export function meterBarElementJoyStyle() {
   border-radius: 10px;
   width: 100%;
   height: 4px;
+  position: relative;
   overflow: hidden;
 }
 
@@ -77,6 +82,39 @@ export function meterBarElementJoyStyle() {
   transition: width .3s;
 }
 
+:host [part="bar"] [part="segments"] {
+  flex-direction: row;
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+:host [part="bar"] [part="segment"] {
+  flex-shrink: 0;
+  height: 100%;
+}
+
+:host [part="bar"] [part="segment"]:first-child {
+  border-radius: 10px 0 0 10px;
+}
+
+:host [part="bar"] [part="segment"]:last-child {
+  border-radius: 0 10px 10px 0;
+}
+
+:host [part="bar"] [part="marker"] {
+  background-color: var(--meter-bar-marker-color);
+  border-radius: 2px;
+  width: 4px;
+  height: calc(100% + 8px);
+  transition: left .3s;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 4px #0000004d;
+}
+
 :host [part="hint"] {
   flex-direction: row;
   justify-content: space-between;
@@ -87,7 +125,23 @@ export function meterBarElementJoyStyle() {
   background-color: var(--joy-scheme-highlight);
 }
 
-:host [part="bar"] [part="fill"], :host([range="normal"]) [part="fill"] {
+:host [part="bar"] [part="fill"] {
+  background-color: var(--joy-color-info-500);
+}
+
+:host [part="bar"] [part="segment"][data-range="low"] {
+  background-color: var(--joy-color-warning-500);
+}
+
+:host [part="bar"] [part="segment"][data-range="optimum"] {
+  background-color: var(--joy-color-success-500);
+}
+
+:host [part="bar"] [part="segment"][data-range="high"] {
+  background-color: var(--joy-color-danger-500);
+}
+
+:host([range="normal"]) [part="fill"] {
   background-color: var(--joy-color-info-500);
 }
 

package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeterBarElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.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,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FT,CAAC;AACN,CAAC"}
+{"version":3,"file":"MeterBarElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.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,uBAAuB;IACnC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkJT,CAAC;AACN,CAAC"}

package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeterBarElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CA0EvD"}
+{"version":3,"file":"MeterBarElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CA4HvD"}

package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Memphis.js

@@ -13,6 +13,9 @@ import { css } from '../../../../../Dom/Css';
 export function meterBarElementMemphisStyle() {
     return css `
 :host {
+  --meter-bar-fill-color-high: var(--memphis-color-semantic-warning);
+  --meter-bar-fill-color-low: var(--memphis-color-semantic-error);
+  --meter-bar-fill-color-optimum: var(--memphis-color-semantic-success);
   --meter-bar-font-family: unset;
   --meter-bar-font-letter-spacing: unset;
   --meter-bar-font-line-height: unset;
@@ -21,6 +24,7 @@ export function meterBarElementMemphisStyle() {
   --meter-bar-font-text-transform: unset;
   --meter-bar-font-weight: unset;
   --meter-bar-gap: unset;
+  --meter-bar-marker-color: var(--memphis-scheme-foreground);
   --meter-bar-padding-bottom: unset;
   --meter-bar-padding-left: unset;
   --meter-bar-padding-right: unset;
@@ -68,6 +72,7 @@ export function meterBarElementMemphisStyle() {
   border-radius: 10px;
   width: 100%;
   height: 4px;
+  position: relative;
   overflow: hidden;
 }
 
@@ -77,12 +82,57 @@ export function meterBarElementMemphisStyle() {
   transition: width .3s;
 }
 
+:host [part="bar"] [part="segments"] {
+  flex-direction: row;
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+:host [part="bar"] [part="segment"] {
+  flex-shrink: 0;
+  height: 100%;
+}
+
+:host [part="bar"] [part="segment"]:first-child {
+  border-radius: 10px 0 0 10px;
+}
+
+:host [part="bar"] [part="segment"]:last-child {
+  border-radius: 0 10px 10px 0;
+}
+
+:host [part="bar"] [part="marker"] {
+  background-color: var(--meter-bar-marker-color);
+  border-radius: 2px;
+  width: 4px;
+  height: calc(100% + 8px);
+  transition: left .3s;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 4px #0000004d;
+}
+
 :host [part="hint"] {
   flex-direction: row;
   justify-content: space-between;
   display: flex;
 }
 
+:host [part="bar"] [part="segment"][data-range="low"] {
+  background-color: var(--meter-bar-fill-color-low);
+}
+
+:host [part="bar"] [part="segment"][data-range="optimum"] {
+  background-color: var(--meter-bar-fill-color-optimum);
+}
+
+:host [part="bar"] [part="segment"][data-range="high"] {
+  background-color: var(--meter-bar-fill-color-high);
+}
+
     `;
 }
 //# sourceMappingURL=MeterBarElement.Memphis.js.map

package/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeterBarElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.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,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwET,CAAC;AACN,CAAC"}
+{"version":3,"file":"MeterBarElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Ranges/MeterBar/Themes/MeterBarElement.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,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0HT,CAAC;AACN,CAAC"}

package/Controls/Components/Ranges/MeterRing/IMeterRingElementProps.d.ts

@@ -3,6 +3,7 @@ import type { ILabelableProps } from '../../../Behaviors/Labelable';
 import type { IOrientableProps } from '../../../Behaviors/Orientable';
 import type { IVariantableProps } from '../../../Behaviors/Variantable';
 import type { MeterRange } from '../../../Types/MeterRange';
+import type { MeterScale } from '../../../Types/MeterScale';
 import type { IRangeBaseElementProps } from '../Abstracts/IRangeBaseElementProps';
 /**
  * Represents the `{@link IMeterRingElementProps}` interface.
@@ -16,5 +17,6 @@ export interface IMeterRingElementProps extends IVariantableProps, IOrientablePr
     low: number;
     optimum: number;
     range: MeterRange;
+    scale: MeterScale;
 }
 //# sourceMappingURL=IMeterRingElementProps.d.ts.map

package/Controls/Components/Ranges/MeterRing/IMeterRingElementProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IMeterRingElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Ranges/MeterRing/IMeterRingElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAIlF;;;;GAIG;AACH,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,sBAAsB;IAE3I,MAAM,EAAE,MAAM,CAAC;IAEf,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC;IAEb,GAAG,EAAE,MAAM,CAAC;IAEZ,OAAO,EAAE,MAAM,CAAC;IAEhB,KAAK,EAAE,UAAU,CAAC;CAErB"}
+{"version":3,"file":"IMeterRingElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Ranges/MeterRing/IMeterRingElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAIlF;;;;GAIG;AACH,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,sBAAsB;IAE3I,MAAM,EAAE,MAAM,CAAC;IAEf,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC;IAEb,GAAG,EAAE,MAAM,CAAC;IAEZ,OAAO,EAAE,MAAM,CAAC;IAEhB,KAAK,EAAE,UAAU,CAAC;IAElB,KAAK,EAAE,UAAU,CAAC;CAErB"}