@oicl/openbridge-webcomponents 0.0.15-dev-20240923191659 → 0.0.15-dev-20240923194534

package/src/navigation-instruments/thruster/advice.ts

@@ -1,109 +1,109 @@
-import {SVGTemplateResult, nothing, svg} from 'lit';
-import {AdviceState, AdviceType} from '../watch/advice';
-import {TickmarkStyle} from '../watch/tickmark';
-import {singleSidedTickmark} from './tickmark';
-
-export interface LinearAdviceRaw {
-  min: number;
-  max: number;
-  type: AdviceType;
-  state: AdviceState;
-}
-
-export interface LinearAdvice {
-  min: number;
-  max: number;
-  type: AdviceType;
-  hinted: boolean;
-}
-
-function adviceMask(
-  height: number,
-  min: number,
-  max: number,
-  fill: string,
-  stroke: string
-): SVGTemplateResult {
-  const width = 8;
-  const x1 = 12;
-  const x2 = x1 + width;
-  const r = width / 2;
-  const yL = (-min * height) / 100 - 2 * r - 2;
-  const yH = (-max * height) / 100 + 2 * r - 2;
-
-  const path = `M ${x1} ${yL} 
-                    A ${r} ${r} 0 0 0 ${x2} ${yL}
-                    V ${yH}
-                    A ${r} ${r} 0 0 0 ${x1} ${yH}
-                    Z`;
-  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width="1" vector-effect="non-scaling-stroke" />`;
-}
-
-export function renderAdvice(
-  height: number,
-  advice: LinearAdviceRaw,
-  flipDirection: boolean
-): SVGTemplateResult {
-  if (advice.type === AdviceType.caution) {
-    let mainColor;
-    let fillColor: string | null = null;
-    if (advice.state === AdviceState.hinted) {
-      mainColor = 'var(--instrument-frame-tertiary-color)';
-    } else if (advice.state === AdviceState.regular) {
-      mainColor = 'var(--instrument-tick-mark-tertiary-color)';
-    } else {
-      mainColor = 'var(--on-caution-active-color)';
-      fillColor = 'var(--alert-caution-color)';
-    }
-    const pattern = [];
-    const ypattern = flipDirection ? 50 : -50;
-    for (let i = -100; i < 300; i += 16) {
-      pattern.push(svg`<g transform="translate(0 ${-i}) ">
-            <path d="M 50 0 L 0 ${ypattern}" stroke=${mainColor} stroke-width="6"/>
-            </g>
-            `);
-    }
-    const maskId = `adviceMask-${advice.min}-${advice.max}`;
-    let tickmarkStyle = TickmarkStyle.hinted;
-    if (advice.state === AdviceState.regular) {
-      tickmarkStyle = TickmarkStyle.regular;
-    } else if (advice.state === AdviceState.triggered) {
-      tickmarkStyle = TickmarkStyle.enhanced;
-    }
-
-    return svg`
-            <mask id=${maskId}>
-                ${adviceMask(height, advice.min, advice.max, 'white', 'black')}
-            </mask>
-            <g mask="url(#${maskId})">
-                ${fillColor ? svg`<rect x="-256" y="-512" width="512" height="1024" fill="${fillColor}"/>` : nothing}
-                ${pattern}
-            </g>
-            ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}
-            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}
-            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
-        `;
-  } else {
-    let strokeColor;
-    let tickmarkStyle;
-    let fillColor: string;
-    if (advice.state === AdviceState.hinted) {
-      strokeColor = 'var(--instrument-frame-tertiary-color)';
-      fillColor = 'none';
-      tickmarkStyle = TickmarkStyle.hinted;
-    } else if (advice.state === AdviceState.regular) {
-      strokeColor = 'var(--instrument-regular-secondary-color)';
-      fillColor = 'none';
-      tickmarkStyle = TickmarkStyle.regular;
-    } else {
-      strokeColor = 'var(--instrument-enhanced-secondary-color)';
-      fillColor = strokeColor;
-      tickmarkStyle = TickmarkStyle.regular;
-    }
-    return svg`
-            ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}
-            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}
-            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
-        `;
-  }
-}
+import {SVGTemplateResult, nothing, svg} from 'lit';
+import {AdviceState, AdviceType} from '../watch/advice';
+import {TickmarkStyle} from '../watch/tickmark';
+import {singleSidedTickmark} from './tickmark';
+
+export interface LinearAdviceRaw {
+  min: number;
+  max: number;
+  type: AdviceType;
+  state: AdviceState;
+}
+
+export interface LinearAdvice {
+  min: number;
+  max: number;
+  type: AdviceType;
+  hinted: boolean;
+}
+
+function adviceMask(
+  height: number,
+  min: number,
+  max: number,
+  fill: string,
+  stroke: string
+): SVGTemplateResult {
+  const width = 8;
+  const x1 = 12;
+  const x2 = x1 + width;
+  const r = width / 2;
+  const yL = (-min * height) / 100 - 2 * r - 2;
+  const yH = (-max * height) / 100 + 2 * r - 2;
+
+  const path = `M ${x1} ${yL} 
+                    A ${r} ${r} 0 0 0 ${x2} ${yL}
+                    V ${yH}
+                    A ${r} ${r} 0 0 0 ${x1} ${yH}
+                    Z`;
+  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width="1" vector-effect="non-scaling-stroke" />`;
+}
+
+export function renderAdvice(
+  height: number,
+  advice: LinearAdviceRaw,
+  flipDirection: boolean
+): SVGTemplateResult {
+  if (advice.type === AdviceType.caution) {
+    let mainColor;
+    let fillColor: string | null = null;
+    if (advice.state === AdviceState.hinted) {
+      mainColor = 'var(--instrument-frame-tertiary-color)';
+    } else if (advice.state === AdviceState.regular) {
+      mainColor = 'var(--instrument-tick-mark-tertiary-color)';
+    } else {
+      mainColor = 'var(--on-caution-active-color)';
+      fillColor = 'var(--alert-caution-color)';
+    }
+    const pattern = [];
+    const ypattern = flipDirection ? 50 : -50;
+    for (let i = -100; i < 300; i += 16) {
+      pattern.push(svg`<g transform="translate(0 ${-i}) ">
+            <path d="M 50 0 L 0 ${ypattern}" stroke=${mainColor} stroke-width="6"/>
+            </g>
+            `);
+    }
+    const maskId = `adviceMask-${advice.min}-${advice.max}`;
+    let tickmarkStyle = TickmarkStyle.hinted;
+    if (advice.state === AdviceState.regular) {
+      tickmarkStyle = TickmarkStyle.regular;
+    } else if (advice.state === AdviceState.triggered) {
+      tickmarkStyle = TickmarkStyle.enhanced;
+    }
+
+    return svg`
+            <mask id=${maskId}>
+                ${adviceMask(height, advice.min, advice.max, 'white', 'black')}
+            </mask>
+            <g mask="url(#${maskId})">
+                ${fillColor ? svg`<rect x="-256" y="-512" width="512" height="1024" fill="${fillColor}"/>` : nothing}
+                ${pattern}
+            </g>
+            ${adviceMask(height, advice.min, advice.max, 'none', mainColor)}
+            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}
+            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
+        `;
+  } else {
+    let strokeColor;
+    let tickmarkStyle;
+    let fillColor: string;
+    if (advice.state === AdviceState.hinted) {
+      strokeColor = 'var(--instrument-frame-tertiary-color)';
+      fillColor = 'none';
+      tickmarkStyle = TickmarkStyle.hinted;
+    } else if (advice.state === AdviceState.regular) {
+      strokeColor = 'var(--instrument-regular-secondary-color)';
+      fillColor = 'none';
+      tickmarkStyle = TickmarkStyle.regular;
+    } else {
+      strokeColor = 'var(--instrument-enhanced-secondary-color)';
+      fillColor = strokeColor;
+      tickmarkStyle = TickmarkStyle.regular;
+    }
+    return svg`
+            ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}
+            ${singleSidedTickmark(height, advice.min, tickmarkStyle)}
+            ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
+        `;
+  }
+}

package/src/navigation-instruments/watch/advice.ts

@@ -1,120 +1,120 @@
-import {SVGTemplateResult, nothing, svg} from 'lit';
-import {TickmarkStyle, TickmarkType, tickmark} from './tickmark';
-
-export enum AdviceType {
-  advice = 'advice',
-  caution = 'caution',
-}
-
-export enum AdviceState {
-  regular = 'regular',
-  hinted = 'hinted',
-  triggered = 'triggered',
-}
-
-export interface AngleAdviceRaw {
-  minAngle: number;
-  maxAngle: number;
-  type: AdviceType;
-  state: AdviceState;
-}
-
-export interface AngleAdvice {
-  minAngle: number;
-  maxAngle: number;
-  type: AdviceType;
-  hinted: boolean;
-}
-
-const margin = (344 - 328) / 2 + 8;
-const deltaAngle = Math.atan2(margin, (344 + 328) / 2);
-
-function adviceMask(
-  minAngle: number,
-  maxAngle: number,
-  fill: string,
-  stroke: string
-): SVGTemplateResult {
-  const radl = (minAngle * Math.PI) / 180 + deltaAngle;
-  const radh = (maxAngle * Math.PI) / 180 - deltaAngle;
-  const r1 = 328 / 2;
-  const r2 = 344 / 2;
-  const R = (r2 - r1) / 2;
-  const x1l = Math.sin(radl) * r1;
-  const y1l = -Math.cos(radl) * r1;
-  const x2l = Math.sin(radl) * r2;
-  const y2l = -Math.cos(radl) * r2;
-
-  const x1h = Math.sin(radh) * r1;
-  const y1h = -Math.cos(radh) * r1;
-  const x2h = Math.sin(radh) * r2;
-  const y2h = -Math.cos(radh) * r2;
-
-  const path = `M ${x1l} ${y1l} 
-                    A ${r1} ${r1} 0 0 1 ${x1h} ${y1h}
-                    A ${R} ${R} 0 0 0 ${x2h} ${y2h}
-                    A ${r2} ${r2} 0 0 0 ${x2l} ${y2l}
-                    A ${R} ${R} 0 0 0 ${x1l} ${y1l}
-                    Z`;
-  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width="1" vector-effect="non-scaling-stroke" />`;
-}
-
-export function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult {
-  if (advice.type === AdviceType.caution) {
-    let mainColor;
-    let fillColor: string | null = null;
-    if (advice.state === AdviceState.hinted) {
-      mainColor = 'var(--instrument-frame-tertiary-color)';
-    } else if (advice.state === AdviceState.regular) {
-      mainColor = 'var(--instrument-tick-mark-tertiary-color)';
-    } else {
-      mainColor = 'var(--on-caution-active-color)';
-      fillColor = 'var(--alert-caution-color)';
-    }
-    const radialPattern = [];
-    for (let i = 0; i < 180; i += 4) {
-      radialPattern.push(svg`<g transform="rotate(${i}) translate(-256 -256) ">
-            <path d="M369.167 64.7317L144 194.732L142 191.268L367.167 61.2676L369.167 64.7317ZM369.167 320.732L144 450.732L142 447.267L367.167 317.267L369.167 320.732Z" fill=${mainColor}/>
-            </g>
-            `);
-    }
-    const maskId = `adviceMask-${advice.minAngle}-${advice.maxAngle}`;
-    let tickmarkStyle = TickmarkStyle.hinted;
-    if (advice.state === AdviceState.regular) {
-      tickmarkStyle = TickmarkStyle.regular;
-    } else if (advice.state === AdviceState.triggered) {
-      tickmarkStyle = TickmarkStyle.enhanced;
-    }
-
-    return svg`
-            <mask id=${maskId}>
-                ${adviceMask(advice.minAngle, advice.maxAngle, 'white', 'black')}
-            </mask>
-            <g mask="url(#${maskId})">
-                ${fillColor ? svg`<rect x="-256" y="-256" width="512" height="512" fill="${fillColor}"/>` : nothing}
-                ${radialPattern}
-            </g>
-            ${adviceMask(advice.minAngle, advice.maxAngle, 'none', mainColor)}
-            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
-            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
-        `;
-  } else {
-    let mainColor;
-    let tickmarkStyle;
-    if (advice.state === AdviceState.hinted) {
-      mainColor = 'var(--instrument-frame-tertiary-color)';
-      tickmarkStyle = TickmarkStyle.hinted;
-    } else if (advice.state === AdviceState.regular) {
-      mainColor = 'var(--instrument-regular-secondary-color)';
-      tickmarkStyle = TickmarkStyle.regular;
-    } else {
-      mainColor = 'var(--instrument-enhanced-secondary-color)';
-      tickmarkStyle = TickmarkStyle.regular;
-    }
-    return svg`
-            ${adviceMask(advice.minAngle, advice.maxAngle, advice.state === AdviceState.triggered ? mainColor : 'none', mainColor)}
-            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
-            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
-        `;
-  }
-}
+import {SVGTemplateResult, nothing, svg} from 'lit';
+import {TickmarkStyle, TickmarkType, tickmark} from './tickmark';
+
+export enum AdviceType {
+  advice = 'advice',
+  caution = 'caution',
+}
+
+export enum AdviceState {
+  regular = 'regular',
+  hinted = 'hinted',
+  triggered = 'triggered',
+}
+
+export interface AngleAdviceRaw {
+  minAngle: number;
+  maxAngle: number;
+  type: AdviceType;
+  state: AdviceState;
+}
+
+export interface AngleAdvice {
+  minAngle: number;
+  maxAngle: number;
+  type: AdviceType;
+  hinted: boolean;
+}
+
+const margin = (344 - 328) / 2 + 8;
+const deltaAngle = Math.atan2(margin, (344 + 328) / 2);
+
+function adviceMask(
+  minAngle: number,
+  maxAngle: number,
+  fill: string,
+  stroke: string
+): SVGTemplateResult {
+  const radl = (minAngle * Math.PI) / 180 + deltaAngle;
+  const radh = (maxAngle * Math.PI) / 180 - deltaAngle;
+  const r1 = 328 / 2;
+  const r2 = 344 / 2;
+  const R = (r2 - r1) / 2;
+  const x1l = Math.sin(radl) * r1;
+  const y1l = -Math.cos(radl) * r1;
+  const x2l = Math.sin(radl) * r2;
+  const y2l = -Math.cos(radl) * r2;
+
+  const x1h = Math.sin(radh) * r1;
+  const y1h = -Math.cos(radh) * r1;
+  const x2h = Math.sin(radh) * r2;
+  const y2h = -Math.cos(radh) * r2;
+
+  const path = `M ${x1l} ${y1l} 
+                    A ${r1} ${r1} 0 0 1 ${x1h} ${y1h}
+                    A ${R} ${R} 0 0 0 ${x2h} ${y2h}
+                    A ${r2} ${r2} 0 0 0 ${x2l} ${y2l}
+                    A ${R} ${R} 0 0 0 ${x1l} ${y1l}
+                    Z`;
+  return svg`<path d=${path} fill=${fill} stroke=${stroke} stroke-width="1" vector-effect="non-scaling-stroke" />`;
+}
+
+export function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult {
+  if (advice.type === AdviceType.caution) {
+    let mainColor;
+    let fillColor: string | null = null;
+    if (advice.state === AdviceState.hinted) {
+      mainColor = 'var(--instrument-frame-tertiary-color)';
+    } else if (advice.state === AdviceState.regular) {
+      mainColor = 'var(--instrument-tick-mark-tertiary-color)';
+    } else {
+      mainColor = 'var(--on-caution-active-color)';
+      fillColor = 'var(--alert-caution-color)';
+    }
+    const radialPattern = [];
+    for (let i = 0; i < 180; i += 4) {
+      radialPattern.push(svg`<g transform="rotate(${i}) translate(-256 -256) ">
+            <path d="M369.167 64.7317L144 194.732L142 191.268L367.167 61.2676L369.167 64.7317ZM369.167 320.732L144 450.732L142 447.267L367.167 317.267L369.167 320.732Z" fill=${mainColor}/>
+            </g>
+            `);
+    }
+    const maskId = `adviceMask-${advice.minAngle}-${advice.maxAngle}`;
+    let tickmarkStyle = TickmarkStyle.hinted;
+    if (advice.state === AdviceState.regular) {
+      tickmarkStyle = TickmarkStyle.regular;
+    } else if (advice.state === AdviceState.triggered) {
+      tickmarkStyle = TickmarkStyle.enhanced;
+    }
+
+    return svg`
+            <mask id=${maskId}>
+                ${adviceMask(advice.minAngle, advice.maxAngle, 'white', 'black')}
+            </mask>
+            <g mask="url(#${maskId})">
+                ${fillColor ? svg`<rect x="-256" y="-256" width="512" height="512" fill="${fillColor}"/>` : nothing}
+                ${radialPattern}
+            </g>
+            ${adviceMask(advice.minAngle, advice.maxAngle, 'none', mainColor)}
+            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
+            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
+        `;
+  } else {
+    let mainColor;
+    let tickmarkStyle;
+    if (advice.state === AdviceState.hinted) {
+      mainColor = 'var(--instrument-frame-tertiary-color)';
+      tickmarkStyle = TickmarkStyle.hinted;
+    } else if (advice.state === AdviceState.regular) {
+      mainColor = 'var(--instrument-regular-secondary-color)';
+      tickmarkStyle = TickmarkStyle.regular;
+    } else {
+      mainColor = 'var(--instrument-enhanced-secondary-color)';
+      tickmarkStyle = TickmarkStyle.regular;
+    }
+    return svg`
+            ${adviceMask(advice.minAngle, advice.maxAngle, advice.state === AdviceState.triggered ? mainColor : 'none', mainColor)}
+            ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
+            ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
+        `;
+  }
+}

package/src/navigation-instruments/watch/label.ts

@@ -1,69 +1,69 @@
-import {svg, SVGTemplateResult} from 'lit-html';
-
-export function renderLabels(scale: number): SVGTemplateResult {
-  const labelWidth = 32;
-  const gap = 8;
-  const radius: number = 368 / 2;
-  const labels = [
-    {
-      label: 'E',
-      x: radius + gap / scale + labelWidth / 2,
-      y: 0,
-      class: 'label',
-    },
-    {
-      label: 'S',
-      x: 0,
-      y: radius + gap / scale + labelWidth / 2,
-      class: 'label',
-    },
-    {
-      label: 'W',
-      x: -(radius + gap / scale + labelWidth / 2),
-      y: 0,
-      class: 'label',
-    },
-  ];
-
-  let arrow = svg`<defs>
-        <mask id="circleMask">
-            <rect x="-${radius}" y="-${radius}" width="${radius * 2}" height="${radius * 2}" fill="black"/>
-            <circle cx="0" cy="0" r="${radius}" fill="white"/>
-        </mask>
-    </defs>
-    <g mask="url(#circleMask)" transform="translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z" 
-      fill="var(--instrument-tick-mark-secondary-color)"/>
-        <path d="M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z" fill="var(--element-active-inverted-color)"/>
-      </g>`;
-
-  if (scale < 0.58) {
-    arrow = svg`
-      <g mask="url(#circleMask)" transform="translate(0, ${-radius})">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z" fill="var(--instrument-frame-tertiary-color)"/>
-        </g>`;
-
-    labels.push({
-      label: 'N',
-      x: 0,
-      y: -(radius + gap / scale + labelWidth / 2),
-      class: 'label',
-    });
-  }
-
-  return svg`
-    ${arrow}
-
-    ${labels.map(
-      (l) => svg`
-        <text
-          x="${l.x}"
-          y="${l.y}"
-          class="${l.class}"
-        >
-          ${l.label}
-        </text>
-      `
-    )}
-  `;
-}
+import {svg, SVGTemplateResult} from 'lit-html';
+
+export function renderLabels(scale: number): SVGTemplateResult {
+  const labelWidth = 32;
+  const gap = 8;
+  const radius: number = 368 / 2;
+  const labels = [
+    {
+      label: 'E',
+      x: radius + gap / scale + labelWidth / 2,
+      y: 0,
+      class: 'label',
+    },
+    {
+      label: 'S',
+      x: 0,
+      y: radius + gap / scale + labelWidth / 2,
+      class: 'label',
+    },
+    {
+      label: 'W',
+      x: -(radius + gap / scale + labelWidth / 2),
+      y: 0,
+      class: 'label',
+    },
+  ];
+
+  let arrow = svg`<defs>
+        <mask id="circleMask">
+            <rect x="-${radius}" y="-${radius}" width="${radius * 2}" height="${radius * 2}" fill="black"/>
+            <circle cx="0" cy="0" r="${radius}" fill="white"/>
+        </mask>
+    </defs>
+    <g mask="url(#circleMask)" transform="translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z" 
+      fill="var(--instrument-tick-mark-secondary-color)"/>
+        <path d="M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z" fill="var(--element-active-inverted-color)"/>
+      </g>`;
+
+  if (scale < 0.58) {
+    arrow = svg`
+      <g mask="url(#circleMask)" transform="translate(0, ${-radius})">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z" fill="var(--instrument-frame-tertiary-color)"/>
+        </g>`;
+
+    labels.push({
+      label: 'N',
+      x: 0,
+      y: -(radius + gap / scale + labelWidth / 2),
+      class: 'label',
+    });
+  }
+
+  return svg`
+    ${arrow}
+
+    ${labels.map(
+      (l) => svg`
+        <text
+          x="${l.x}"
+          y="${l.y}"
+          class="${l.class}"
+        >
+          ${l.label}
+        </text>
+      `
+    )}
+  `;
+}

package/src/navigation-instruments/watch/watch.css

@@ -1,11 +1,11 @@
-* {
-  box-sizing: border-box;
-}
-
-.label {
-  @mixin font-body;
-  font-size: calc(16px / var(--scale));
-  fill: var(--element-neutral-color);
-  alignment-baseline: middle;
-  text-anchor: middle;
-}
+* {
+  box-sizing: border-box;
+}
+
+.label {
+  @mixin font-body;
+  font-size: calc(16px / var(--scale));
+  fill: var(--element-neutral-color);
+  alignment-baseline: middle;
+  text-anchor: middle;
+}