@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.94 → 2.0.0-next.96

package/src/charthelpers/x-value.ts

@@ -0,0 +1,134 @@
+/**
+ * X-value normalization and formatting for line/area charts.
+ *
+ * Charts accept x-values as epoch milliseconds, ISO-8601 strings, `Date`
+ * instances, or Temporal objects (`Instant`, `ZonedDateTime`,
+ * `PlainDateTime`, `PlainDate`). All are normalized to a single number
+ * (epoch milliseconds in `'time'` mode, the plain value in `'number'` mode)
+ * so the Chart.js linear scale positions points proportionally.
+ *
+ * Temporal support is structural (duck-typed): there is no dependency on the
+ * Temporal API or a polyfill, and cross-realm/polyfilled objects work.
+ * Plain* types (which carry no time zone) are interpreted in the system
+ * time zone.
+ *
+ * @example
+ * ```ts
+ * normalizeXValue('2026-07-06T10:00:00Z', XValueMode.time); // epoch ms
+ * normalizeXValue(new Date(0), XValueMode.time); // 0
+ * normalizeXValue({epochMilliseconds: 42}, XValueMode.time); // 42 (Temporal)
+ * normalizeXValue('2.5', XValueMode.number); // 2.5
+ *
+ * formatXValue(ms, XValueMode.time, referenceMs); // '5min' (relative)
+ * formatXValue(ms, XValueMode.time); // locale date string
+ * formatXValue(2.5, XValueMode.number); // '2.5'
+ * ```
+ */
+
+type TemporalEpochLike = {
+  epochMilliseconds: number;
+};
+
+type TemporalPlainLike = {
+  year: number;
+  month: number;
+  day: number;
+  hour?: number;
+  minute?: number;
+  second?: number;
+  millisecond?: number;
+};
+
+/** Structural type covering the supported Temporal object shapes. */
+export type TemporalLike = TemporalEpochLike | TemporalPlainLike;
+
+/** Every value accepted as a chart x-coordinate. */
+export type ChartXValue = number | string | Date | TemporalLike;
+
+/** X-axis interpretation used for normalization and formatting. */
+export enum XValueMode {
+  time = 'time',
+  number = 'number',
+}
+
+function isTemporalEpochLike(v: object): v is TemporalEpochLike {
+  return typeof (v as TemporalEpochLike).epochMilliseconds === 'number';
+}
+
+function isTemporalPlainLike(v: object): v is TemporalPlainLike {
+  const t = v as TemporalPlainLike;
+  return (
+    typeof t.year === 'number' &&
+    typeof t.month === 'number' &&
+    typeof t.day === 'number'
+  );
+}
+
+/**
+ * Normalize an x-value to a finite number, or NaN when unusable.
+ *
+ * Rules, in order:
+ * 1. `number` → as-is (epoch ms in time mode, plain value in number mode)
+ * 2. `Date` → `getTime()`
+ * 3. `{epochMilliseconds}` (Temporal Instant / ZonedDateTime) → epoch ms
+ * 4. `{year, month, day, …}` (Temporal PlainDateTime / PlainDate) →
+ *    epoch ms in the system time zone
+ * 5. `string` → time mode: `Date.parse()` first, `Number()` fallback;
+ *    number mode: `Number()` only
+ */
+export function normalizeXValue(v: ChartXValue, mode: XValueMode): number {
+  if (typeof v === 'number') {
+    return Number.isFinite(v) ? v : NaN;
+  }
+  if (v instanceof Date) {
+    return v.getTime();
+  }
+  if (typeof v === 'object' && v !== null) {
+    if (isTemporalEpochLike(v)) return v.epochMilliseconds;
+    if (isTemporalPlainLike(v)) {
+      return new Date(
+        v.year,
+        v.month - 1,
+        v.day,
+        v.hour ?? 0,
+        v.minute ?? 0,
+        v.second ?? 0,
+        v.millisecond ?? 0
+      ).getTime();
+    }
+    return NaN;
+  }
+  if (typeof v === 'string') {
+    if (v.trim() === '') return NaN;
+    if (mode === XValueMode.time) {
+      const parsed = Date.parse(v);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+    const numeric = Number(v);
+    return Number.isFinite(numeric) ? numeric : NaN;
+  }
+  return NaN;
+}
+
+/**
+ * Format a normalized x-value for axis tick labels and tooltips.
+ *
+ * Mirrors the historical chart-line tick formatting exactly: with a finite
+ * `relativeToMs` (time mode) renders `<n>min` relative to it; without one
+ * renders `toLocaleDateString()`. Number mode renders the plain value.
+ * Callers express the `TimeDisplay` choice by passing or omitting
+ * `relativeToMs`.
+ */
+export function formatXValue(
+  value: number,
+  mode: XValueMode,
+  relativeToMs?: number
+): string {
+  if (!Number.isFinite(value)) return '';
+  if (mode === XValueMode.number) return String(value);
+  if (relativeToMs !== undefined && Number.isFinite(relativeToMs)) {
+    const minutes = Math.round((value - relativeToMs) / 60000);
+    return `${minutes}min`;
+  }
+  return new Date(value).toLocaleDateString();
+}

package/src/components/alert-button/alert-button.ts

@@ -288,7 +288,7 @@ export class ObcAlertButton extends LitElement {
       this.blinking &&
       hasAlerts &&
       this.alertType !== undefined &&
-      supportsBlinking(this.alertType);
+      supportsBlinking(this.alertType, false);
     return html`
       <div
         class=${classMap({

package/src/components/alert-icon/alert-icon.stories.ts

@@ -31,7 +31,6 @@ const meta: Meta<typeof ObcAlertIcon> = {
         .type=${args.type}
         .acknowledged=${args.acknowledged}
         .active=${args.active}
-        .outline=${args.outline}
       ></obc-alert-icon>
     </div>`,
 } satisfies Meta<ObcAlertIcon>;
@@ -89,21 +88,11 @@ export const Caution: Story = {
   },
 };
 
-export const AlarmOutline: Story = {
-  args: {
-    type: AlertType.Alarm,
-    acknowledged: false,
-    active: true,
-    outline: true,
-  },
-};
-
 export const LevelCritical: Story = {
   args: {
     type: AlertType.LevelCritical,
     acknowledged: false,
     active: true,
-    outline: true,
   },
 };
 
@@ -138,3 +127,72 @@ export const LevelDiagnostic: Story = {
     active: true,
   },
 };
+
+export const AlarmRectifiedNoAck: Story = {
+  args: {
+    type: AlertType.Alarm,
+    acknowledged: false,
+    active: false,
+  },
+};
+
+export const ApiMatrix: Story = {
+  render: (args) =>
+    html` <div
+      style="display:grid;grid-template-columns: auto repeat(8,32px);gap:16px"
+    >
+      <div></div>
+      ${Object.values(AlertType).map(
+        (type) =>
+          html`<div
+            style="display:flex;flex-direction:column;align-items:center"
+          >
+            ${type}
+          </div>`
+      )}
+      ${renderRow('Active', {
+        acknowledged: false,
+        active: true,
+        silenced: false,
+      })}
+      ${renderRow('Acknowledged', {
+        acknowledged: true,
+        active: true,
+        silenced: false,
+      })}
+      ${renderRow('Silenced', {
+        acknowledged: false,
+        active: true,
+        silenced: true,
+      })}
+      ${renderRow('Rectified', {
+        acknowledged: true,
+        active: false,
+        silenced: false,
+      })}
+      ${renderRow('Rectified unacknowledged', {
+        acknowledged: false,
+        active: false,
+        silenced: false,
+      })}
+    </div>`,
+};
+
+function renderRow(
+  label: string,
+  options: {acknowledged: boolean; active: boolean; silenced: boolean}
+) {
+  return html`
+    <div style="display:flex;flex-direction:column;align-items:center">${label}</div>
+    ${Object.values(AlertType).map(
+      (type) => html`
+        <obc-alert-icon
+          .type=${type}
+          .acknowledged=${options.acknowledged}
+          .active=${options.active}
+          .silenced=${options.silenced}
+        ></obc-alert-icon>
+      `
+    )}
+  </div>`;
+}

package/src/components/alert-icon/alert-icon.ts

@@ -1,21 +1,10 @@
 import {LitElement, html, css, TemplateResult, nothing} from 'lit';
 import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
-import {alarmRectifiedA} from './icons/icon-alarm-rectified.js';
-import {warningRectifiedA} from './icons/icon-warning-rectified.js';
-import {alarmSilencedA, alarmSilencedB} from './icons/icon-alarm-silenced.js';
-import {
-  warningSilencedA,
-  warningSilencedB,
-} from './icons/icon-warning-silenced.js';
-import {alarmUnackA, alarmUnackB} from './icons/icon-alarm-unack.js';
-import {warningUnackA, warningUnackB} from './icons/icon-warning-unack.js';
 import '../../icons/icon-caution-color-iec.js';
 import {customElement} from '../../decorator.js';
 import {AlertType} from '../../types.js';
 import {
-  getAlertBadgeComponent,
-  AlertBadgeComponent,
   getAlertBlinkMode,
   getBamAlertTypeForBlinking,
   supportsBlinking,
@@ -23,9 +12,51 @@ import {
 import '../../icons/icon-alarm-badge-outline.js';
 import '../../icons/icon-warning-badge-outline.js';
 import '../../icons/icon-caution-badge-outline.js';
+import '../../icons/icon-alarm-acknowledged-iec.js';
+import '../../icons/icon-warning-acknowledged-iec.js';
+import '../../icons/icon-alarm-rectified-iec.js';
+import '../../icons/icon-warning-rectified-iec.js';
+import '../../icons/icon-alarm-rectified-outlined.js';
+import '../../icons/icon-warning-rectified-outlined.js';
+import '../../icons/icon-alarm-silenced-iec.js';
+import '../../icons/icon-alarm-silenced-outlined.js';
+import '../../icons/icon-warning-silenced-iec.js';
+import '../../icons/icon-warning-silenced-outlined.js';
+import '../../icons/icon-alarm-unacknowledged-iec.js';
+import '../../icons/icon-alarm-acknowledged-outlined.js';
+import '../../icons/icon-warning-unacknowledged-iec.js';
+import '../../icons/icon-warning-unacknowledged-outlined.js';
+
 import '../alert-frame/critical-badge.js';
 import '../alert-frame/diagnostic-badge.js';
 import {criticalA, criticalB} from './icons/icon-critical.js';
+import {
+  criticalUnacknowledgedA,
+  criticalUnacknowledgedB,
+} from './icons/icon-critical-unacknowledged.js';
+import {
+  criticalSilencedA,
+  criticalSilencedB,
+} from './icons/icon-critical-silenced.js';
+import {
+  criticalRectifiedA,
+  criticalRectifiedB,
+} from './icons/icon-critical-rectified.js';
+import {criticalAcknowledged} from './icons/icon-critical-acknowledged.js';
+import {
+  lowUnacknowledgedA,
+  lowUnacknowledgedB,
+} from './icons/icon-low-unacknowledged.js';
+import {lowSilencedA, lowSilencedB} from './icons/icon-low-silenced.js';
+import {lowRectifiedA, lowRectifiedB} from './icons/icon-low-rectified.js';
+import {lowAcknowledged} from './icons/icon-low-acknowledged.js';
+
+enum AlertIconState {
+  Silenced = 'silenced',
+  Unacknowledged = 'unacknowledged',
+  Acknowledged = 'acknowledged',
+  Rectified = 'rectified',
+}
 
 enum AlertIconName {
   AlarmSilenced = 'alarm-silenced',
@@ -35,37 +66,85 @@ enum AlertIconName {
   WarningRectified = 'warning-rectified',
   WarningSilenced = 'warning-silenced',
   Critical = 'critical',
+  CriticalUnack = 'critical-unack',
+  CriticalSilenced = 'critical-silenced',
+  CriticalRectified = 'critical-rectified',
+  LowUnack = 'low-unack',
+  LowSilenced = 'low-silenced',
+  LowRectified = 'low-rectified',
 }
 
 const mapping = {
   [AlertIconName.AlarmSilenced]: {
-    a: alarmSilencedA,
-    b: alarmSilencedB,
+    a: html`<obi-alarm-silenced-iec usecsscolor></obi-alarm-silenced-iec>`,
+    b: html`<obi-alarm-silenced-outlined
+      usecsscolor
+    ></obi-alarm-silenced-outlined>`,
   },
   [AlertIconName.AlarmUnack]: {
-    a: alarmUnackA,
-    b: alarmUnackB,
+    a: html`<obi-alarm-unacknowledged-iec
+      usecsscolor
+    ></obi-alarm-unacknowledged-iec>`,
+    b: html`<obi-alarm-acknowledged-outlined
+      usecsscolor
+    ></obi-alarm-acknowledged-outlined>`,
   },
   [AlertIconName.AlarmRectified]: {
-    a: alarmRectifiedA,
-    b: alarmRectifiedA,
+    a: html`<obi-alarm-rectified-iec usecsscolor></obi-alarm-rectified-iec>`,
+    b: html`<obi-alarm-rectified-outlined
+      usecsscolor
+    ></obi-alarm-rectified-outlined>`,
   },
   [AlertIconName.WarningUnack]: {
-    a: warningUnackA,
-    b: warningUnackB,
+    a: html`<obi-warning-unacknowledged-iec
+      usecsscolor
+    ></obi-warning-unacknowledged-iec>`,
+    b: html`<obi-warning-unacknowledged-outlined
+      usecsscolor
+    ></obi-warning-unacknowledged-outlined>`,
   },
   [AlertIconName.WarningRectified]: {
-    a: warningRectifiedA,
-    b: warningRectifiedA,
+    a: html`<obi-warning-rectified-iec
+      usecsscolor
+    ></obi-warning-rectified-iec>`,
+    b: html`<obi-warning-rectified-outlined
+      usecsscolor
+    ></obi-warning-rectified-outlined>`,
   },
   [AlertIconName.WarningSilenced]: {
-    a: warningSilencedA,
-    b: warningSilencedB,
+    a: html`<obi-warning-silenced-iec usecsscolor></obi-warning-silenced-iec>`,
+    b: html`<obi-warning-silenced-outlined
+      usecsscolor
+    ></obi-warning-silenced-outlined>`,
   },
   [AlertIconName.Critical]: {
     a: criticalA,
     b: criticalB,
   },
+  [AlertIconName.CriticalUnack]: {
+    a: criticalUnacknowledgedA,
+    b: criticalUnacknowledgedB,
+  },
+  [AlertIconName.CriticalSilenced]: {
+    a: criticalSilencedA,
+    b: criticalSilencedB,
+  },
+  [AlertIconName.CriticalRectified]: {
+    a: criticalRectifiedA,
+    b: criticalRectifiedB,
+  },
+  [AlertIconName.LowUnack]: {
+    a: lowUnacknowledgedA,
+    b: lowUnacknowledgedB,
+  },
+  [AlertIconName.LowSilenced]: {
+    a: lowSilencedA,
+    b: lowSilencedB,
+  },
+  [AlertIconName.LowRectified]: {
+    a: lowRectifiedA,
+    b: lowRectifiedB,
+  },
 };
 /**
  * `obc-alert-icon` – Animated alert icon for signaling alarm and warning states.
@@ -103,27 +182,76 @@ const mapping = {
  */
 @customElement('obc-alert-icon')
 export class ObcAlertIcon extends LitElement {
-  @property({type: String}) type!: AlertType;
-  /** @availableWhen outline==false && type in [Alarm, Warning, LevelHigh, LevelMedium] */
-  @property({type: Boolean}) acknowledged!: boolean;
-  /** @availableWhen outline==false && type in [Alarm, Warning, LevelHigh, LevelMedium] */
-  @property({type: Boolean}) active!: boolean;
-  @property({type: Boolean}) outline!: boolean;
+  @property({type: String}) alertType: AlertType = AlertType.Alarm;
+  /* @deprecated use `alertType` instead */
+  @property({type: String}) type?: AlertType;
+  /**
+   * @availableWhen type in [Alarm, Warning, LevelHigh, LevelMedium, LevelLow]
+   */
+  @property({type: Boolean}) acknowledged?: boolean;
+  /**
+   * @availableWhen type in [Alarm, Warning, LevelHigh, LevelMedium, LevelLow]
+   */
+  @property({type: Boolean}) active?: boolean;
+  @property({type: Boolean}) silenced?: boolean;
+
+  private get _effectiveType(): AlertType {
+    if (this.type) {
+      return this.type;
+    }
+    return this.alertType;
+  }
 
   private get bamType(): AlertType {
-    return getBamAlertTypeForBlinking(this.type);
+    return getBamAlertTypeForBlinking(this._effectiveType);
+  }
+
+  private get _effectiveState(): AlertIconState {
+    if (this.active === false) {
+      return AlertIconState.Rectified;
+    } else if (this.acknowledged) {
+      return AlertIconState.Acknowledged;
+    } else if (this.silenced) {
+      return AlertIconState.Silenced;
+    } else if (this.active === true) {
+      return AlertIconState.Unacknowledged;
+    }
+    return AlertIconState.Unacknowledged;
   }
 
   get icon() {
-    if (this.type === AlertType.LevelCritical) {
-      return mapping[AlertIconName.Critical];
+    if (this._effectiveType === AlertType.LevelCritical) {
+      switch (this._effectiveState) {
+        case AlertIconState.Rectified:
+          return mapping[AlertIconName.CriticalRectified];
+        case AlertIconState.Silenced:
+          return mapping[AlertIconName.CriticalSilenced];
+        case AlertIconState.Unacknowledged:
+          return mapping[AlertIconName.CriticalUnack];
+        default:
+          return mapping[AlertIconName.Critical];
+      }
+    } else if (this._effectiveType === AlertType.LevelLow) {
+      switch (this._effectiveState) {
+        case AlertIconState.Rectified:
+          return mapping[AlertIconName.LowRectified];
+        case AlertIconState.Silenced:
+          return mapping[AlertIconName.LowSilenced];
+        case AlertIconState.Unacknowledged:
+          return mapping[AlertIconName.LowUnack];
+        default:
+          return mapping[AlertIconName.LowUnack];
+      }
     } else if (this.bamType === AlertType.Alarm) {
-      if (this.active === false) {
-        return mapping[AlertIconName.AlarmRectified];
-      } else if (this.acknowledged) {
-        return mapping[AlertIconName.AlarmSilenced];
-      } else {
-        return mapping[AlertIconName.AlarmUnack];
+      switch (this._effectiveState) {
+        case AlertIconState.Rectified:
+          return mapping[AlertIconName.AlarmRectified];
+        case AlertIconState.Silenced:
+          return mapping[AlertIconName.AlarmSilenced];
+        case AlertIconState.Unacknowledged:
+          return mapping[AlertIconName.AlarmUnack];
+        default:
+          return null;
       }
     } else if (this.bamType === AlertType.Warning) {
       if (this.active === false) {
@@ -138,48 +266,68 @@ export class ObcAlertIcon extends LitElement {
     return null;
   }
 
-  private renderOutlineIcon(): TemplateResult {
-    switch (getAlertBadgeComponent(this.type)) {
-      case AlertBadgeComponent.Critical:
-        return html`<obi-critical-badge></obi-critical-badge>`;
-      case AlertBadgeComponent.Warning:
-        return html`<obi-warning-badge-outline></obi-warning-badge-outline>`;
-      case AlertBadgeComponent.Caution:
-        return html`<obi-caution-badge-outline></obi-caution-badge-outline>`;
-      case AlertBadgeComponent.Diagnostic:
-        return html`<obi-diagnostic-badge
-          style="color: var(--alert-diagnostic-color);"
-        ></obi-diagnostic-badge>`;
-      default:
-        return html`<obi-alarm-badge-outline></obi-alarm-badge-outline>`;
-    }
-  }
-
   private renderStaticIcon(): TemplateResult | typeof nothing {
-    if (this.type === AlertType.Caution || this.type === AlertType.LevelLow) {
+    // Caution and diagnostic always show a fixed symbol, regardless of state.
+    if (this._effectiveType === AlertType.Caution) {
       return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;
     }
-    if (this.type === AlertType.LevelDiagnostic) {
+    if (this._effectiveType === AlertType.LevelDiagnostic) {
       return html`<obi-diagnostic-badge
         style="color: var(--alert-diagnostic-color);"
       ></obi-diagnostic-badge>`;
     }
+    if (this._effectiveState === AlertIconState.Acknowledged) {
+      if (this._effectiveType === AlertType.LevelCritical) {
+        return html`${criticalAcknowledged}`;
+      }
+      if (this._effectiveType === AlertType.LevelLow) {
+        return html`${lowAcknowledged}`;
+      }
+      switch (this.bamType) {
+        case AlertType.Alarm:
+          return html`<obi-alarm-acknowledged-iec
+            usecsscolor
+          ></obi-alarm-acknowledged-iec>`;
+        case AlertType.Warning:
+          return html`<obi-warning-acknowledged-iec
+            usecsscolor
+          ></obi-warning-acknowledged-iec>`;
+        default:
+          return nothing;
+      }
+    } else if (this._effectiveState === AlertIconState.Rectified) {
+      if (this._effectiveType === AlertType.LevelCritical) {
+        return html`${criticalRectifiedB}`;
+      }
+      if (this._effectiveType === AlertType.LevelLow) {
+        return html`${lowRectifiedB}`;
+      }
+      switch (this.bamType) {
+        case AlertType.Alarm:
+          return html`<obi-alarm-rectified-outlined
+            usecsscolor
+          ></obi-alarm-rectified-outlined>`;
+        case AlertType.Warning:
+          return html`<obi-warning-rectified-outlined
+            usecsscolor
+          ></obi-warning-rectified-outlined>`;
+        default:
+          return nothing;
+      }
+    }
     return nothing;
   }
 
   override render() {
-    if (!this.type) {
+    if (!this._effectiveType) {
       return html`<div>No alarm</div>`;
     }
-    if (this.outline) {
-      return html`<div class="wrapper">${this.renderOutlineIcon()}</div>`;
-    }
-    if (supportsBlinking(this.type) && !(this.type === AlertType.LevelLow)) {
+    if (supportsBlinking(this._effectiveType, this.acknowledged ?? false)) {
       const icons = this.icon;
       if (!icons) {
         throw new Error('No icon found');
       }
-      const blinkMode = getAlertBlinkMode(this.type);
+      const blinkMode = getAlertBlinkMode(this._effectiveType);
       return html`
         <div
           class=${classMap({
@@ -211,7 +359,9 @@ export class ObcAlertIcon extends LitElement {
         left: 0;
       }
 
-      svg {
+      svg,
+      .a,
+      .b {
         height: 100%;
         width: 100%;
         position: absolute;

package/src/components/alert-icon/icons/icon-critical-acknowledged.ts

@@ -0,0 +1,14 @@
+import {svg} from 'lit';
+
+export const criticalAcknowledged = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M 22,12
+           L 17,20.66
+           L 7,20.66
+           L 2,12
+           L 7,3.34
+           L 17,3.34
+           Z"
+        fill="var(--alert-critical-color)" stroke="var(--alert-critical-outline-color)" />
+<path d="M13 13V7H11V13H13Z" fill="var(--on-critical-active-color)"/>
+<path d="M13 17V15H11V17H13Z" fill="var(--on-critical-active-color)"/>
+</svg>`;

package/src/components/alert-icon/icons/icon-critical-rectified.ts

@@ -0,0 +1,25 @@
+import {svg} from 'lit';
+
+export const criticalRectifiedA = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M 22,12
+           L 17,20.66
+           L 7,20.66
+           L 2,12
+           L 7,3.34
+           L 17,3.34
+           Z"
+        fill="var(--alert-critical-color)" stroke="var(--alert-critical-outline-color)" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2071 9.20706L10.5 16.9142L5.79291 12.2071L7.20712 10.7928L10.5 14.0857L16.7929 7.79285L18.2071 9.20706Z" fill="var(--on-critical-active-color)"/>
+</svg>`;
+
+export const criticalRectifiedB = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M 22,12
+           L 17,20.66
+           L 7,20.66
+           L 2,12
+           L 7,3.34
+           L 17,3.34
+           Z"
+        fill="none" stroke="var(--element-active-color)" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2071 9.20706L10.5 16.9142L5.79291 12.2071L7.20712 10.7928L10.5 14.0857L16.7929 7.79285L18.2071 9.20706Z" fill="var(--element-active-color)"/>
+</svg>`;