@oicl/openbridge-webcomponents 0.0.15-dev-20240916185711 → 0.0.15-dev-20240923190011

package/dist/navigation-instruments/watch-flat/watch-flat.js

@@ -0,0 +1,184 @@
+import { unsafeCSS, LitElement, svg, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import compentStyle from "./watch-flat.css.js";
+import { tickmark, TickmarkStyle } from "./tickmark-flat.js";
+import { rect } from "../../svghelpers/rectangular.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let ObcWatchFlat = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.width = 352;
+    this.height = 72;
+    this.padding = 0;
+    this.rotation = 0;
+    this.tickmarkSpacing = 0;
+    this.tickmarks = [];
+    this.labels = [];
+    this.FOVIndicator = [];
+    this.trackHeight = 2 / 3 * this.height;
+    this.ticksHeight = this.height - this.trackHeight;
+    this.borderRadius = 8;
+  }
+  renderClipPath(offsetY = 0) {
+    return svg`
+      <clipPath id="frameClipPath${offsetY === 0 ? "" : "Tickmarks"}">
+        <rect x="${-this.width / 2}" y="${-this.height / 2 + offsetY}" 
+              width="${this.width}" height="${this.height}" 
+              rx="${this.borderRadius}" />
+      </clipPath>
+    `;
+  }
+  renderLabelMask() {
+    return svg`
+      <mask id="labelMask">
+        <rect x="${-this.width / 2}" y="${-70}" 
+              width="${this.width}" height="${32}"
+               />
+        <linearGradient id="fadeGradient" gradientUnits="userSpaceOnUse"
+                        x1="${-this.width / 2}" y1="0" x2="${this.width / 2}" y2="0">
+          <stop offset="0%" style="stop-color:black; stop-opacity:1;" />
+          <stop offset="10%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="50%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="90%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="100%" style="stop-color:black; stop-opacity:1;" />
+        </linearGradient>
+        <rect x="${-this.width / 2}" y="${-70}" 
+              width="${this.width}" height="${32}"
+              fill="url(#fadeGradient)" />
+      </mask>
+    `;
+  }
+  renderLabels(scale) {
+    const labels = [];
+    for (const l of this.labels) {
+      labels.push(
+        svg`<g transform="translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})">
+          <text x=${l.x} y=${l.y} class="label" fill=${"var(--instrument-tick-mark-secondary-color)"}>
+            ${l.text}
+          </text>
+          </g>`
+      );
+    }
+    return labels;
+  }
+  watchFace() {
+    const strokeWidth = 1;
+    return svg`
+      ${this.renderClipPath()}
+      ${this.renderClipPath(-40)}
+      <g clip-path="url(#frameClipPath)">
+        ${rect("frame-track", {
+      width: this.width,
+      height: this.trackHeight,
+      y: this.height / 2 - this.trackHeight,
+      strokeWidth,
+      strokeColor: "var(--instrument-frame-secondary-color)",
+      strokePosition: "inside",
+      fillColor: "var(--instrument-frame-secondary-color)",
+      borderRadius: 0
+    })}
+        ${rect("frame-ticks", {
+      width: this.width,
+      height: this.ticksHeight,
+      y: this.height / 2 - this.trackHeight - this.ticksHeight,
+      strokeWidth,
+      strokeColor: "var(--instrument-frame-primary-color)",
+      strokePosition: "inside",
+      fillColor: "var(--instrument-frame-primary-color)",
+      borderRadius: 0
+    })}
+      </g>
+      ${rect("frame-outline", {
+      width: this.width,
+      height: this.height,
+      strokeWidth,
+      strokeColor: "var(--instrument-frame-tertiary-color)",
+      strokePosition: "inside",
+      fillColor: "none",
+      borderRadius: this.borderRadius
+    })}
+    `;
+  }
+  render() {
+    const width = (this.width / 2 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${this.height / 2} ${width} ${this.height}`;
+    const scale = this.clientWidth / width;
+    return html`
+      <svg
+        width="100%"
+        height="100%"
+        viewBox=${viewBox}
+        style="--scale: ${scale}"
+      >
+        ${this.watchFace()} ${this.renderLabelMask()} ${this.FOVIndicator}
+
+        <g clip-path="url(#frameClipPath)">
+          ${this.tickmarks.map(
+      (t) => svg`
+            <g transform="translate(${-this.rotation * this.tickmarkSpacing}, 0)">
+              ${tickmark(t.angle, t.type, TickmarkStyle.hinted)}
+            </g>
+          `
+    )}
+        </g>
+
+        <g mask="url(#labelMask)">
+          ${this.renderLabels(scale)}
+      </svg>
+    `;
+  }
+};
+ObcWatchFlat.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "width", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "height", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "padding", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "rotation", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "tickmarkSpacing", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "angleSetpoint", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcWatchFlat.prototype, "tickmarks", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcWatchFlat.prototype, "labels", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcWatchFlat.prototype, "FOVIndicator", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "trackHeight", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "ticksHeight", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcWatchFlat.prototype, "borderRadius", 2);
+ObcWatchFlat = __decorateClass([
+  customElement("obc-watch-flat")
+], ObcWatchFlat);
+export {
+  ObcWatchFlat
+};
+//# sourceMappingURL=watch-flat.js.map

package/dist/navigation-instruments/watch-flat/watch-flat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watch-flat.js","sources":["../../../src/navigation-instruments/watch-flat/watch-flat.ts"],"sourcesContent":["import {LitElement, SVGTemplateResult, html, svg, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './watch-flat.css?inline';\nimport {Tickmark, TickmarkStyle, tickmark} from './tickmark-flat';\nimport {rect} from '../../svghelpers/rectangular';\nimport {Label} from '../compass-flat/compass-flat';\n\n@customElement('obc-watch-flat')\nexport class ObcWatchFlat extends LitElement {\n  @property({type: Number}) width = 352;\n  @property({type: Number}) height = 72;\n  @property({type: Number}) padding = 0;\n  @property({type: Number}) rotation = 0;\n  @property({type: Number}) tickmarkSpacing = 0;\n  @property({type: Number}) angleSetpoint: number | undefined;\n  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];\n  @property({type: Array, attribute: false}) labels: Label[] = [];\n  @property({type: Array, attribute: false}) FOVIndicator: SVGTemplateResult[] =\n    [];\n  @property({type: Number}) trackHeight = (2 / 3) * this.height;\n  @property({type: Number}) ticksHeight = this.height - this.trackHeight;\n  @property({type: Number}) borderRadius = 8;\n\n  private renderClipPath(offsetY: number = 0): SVGTemplateResult {\n    return svg`\n      <clipPath id=\"frameClipPath${offsetY === 0 ? '' : 'Tickmarks'}\">\n        <rect x=\"${-this.width / 2}\" y=\"${-this.height / 2 + offsetY}\" \n              width=\"${this.width}\" height=\"${this.height}\" \n              rx=\"${this.borderRadius}\" />\n      </clipPath>\n    `;\n  }\n\n  private renderLabelMask(): SVGTemplateResult {\n    return svg`\n      <mask id=\"labelMask\">\n        <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n              width=\"${this.width}\" height=\"${32}\"\n               />\n        <linearGradient id=\"fadeGradient\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"${-this.width / 2}\" y1=\"0\" x2=\"${this.width / 2}\" y2=\"0\">\n          <stop offset=\"0%\" style=\"stop-color:black; stop-opacity:1;\" />\n          <stop offset=\"10%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"50%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"90%\" style=\"stop-color:white; stop-opacity:1;\" />\n          <stop offset=\"100%\" style=\"stop-color:black; stop-opacity:1;\" />\n        </linearGradient>\n        <rect x=\"${-this.width / 2}\" y=\"${-70}\" \n              width=\"${this.width}\" height=\"${32}\"\n              fill=\"url(#fadeGradient)\" />\n      </mask>\n    `;\n  }\n\n  private renderLabels(scale: number): SVGTemplateResult[] {\n    const labels: SVGTemplateResult[] = [];\n\n    for (const l of this.labels) {\n      labels.push(\n        svg`<g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})\">\n          <text x=${l.x} y=${l.y} class=\"label\" fill=${'var(--instrument-tick-mark-secondary-color)'}>\n            ${l.text}\n          </text>\n          </g>`\n      );\n    }\n\n    return labels;\n  }\n\n  private watchFace(): SVGTemplateResult {\n    const strokeWidth = 1;\n\n    return svg`\n      ${this.renderClipPath()}\n      ${this.renderClipPath(-40)}\n      <g clip-path=\"url(#frameClipPath)\">\n        ${rect('frame-track', {\n          width: this.width,\n          height: this.trackHeight,\n          y: this.height / 2 - this.trackHeight,\n          strokeWidth: strokeWidth,\n          strokeColor: 'var(--instrument-frame-secondary-color)',\n          strokePosition: 'inside',\n          fillColor: 'var(--instrument-frame-secondary-color)',\n          borderRadius: 0,\n        })}\n        ${rect('frame-ticks', {\n          width: this.width,\n          height: this.ticksHeight,\n          y: this.height / 2 - this.trackHeight - this.ticksHeight,\n          strokeWidth: strokeWidth,\n          strokeColor: 'var(--instrument-frame-primary-color)',\n          strokePosition: 'inside',\n          fillColor: 'var(--instrument-frame-primary-color)',\n          borderRadius: 0,\n        })}\n      </g>\n      ${rect('frame-outline', {\n        width: this.width,\n        height: this.height,\n        strokeWidth: strokeWidth,\n        strokeColor: 'var(--instrument-frame-tertiary-color)',\n        strokePosition: 'inside',\n        fillColor: 'none',\n        borderRadius: this.borderRadius,\n      })}\n    `;\n  }\n\n  override render() {\n    const width = (this.width / 2 + this.padding) * 2;\n    const viewBox = `-${width / 2} -${this.height / 2} ${width} ${this.height}`;\n    const scale = this.clientWidth / width;\n\n    return html`\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=${viewBox}\n        style=\"--scale: ${scale}\"\n      >\n        ${this.watchFace()} ${this.renderLabelMask()} ${this.FOVIndicator}\n\n        <g clip-path=\"url(#frameClipPath)\">\n          ${this.tickmarks.map(\n            (t) => svg`\n            <g transform=\"translate(${-this.rotation * this.tickmarkSpacing}, 0)\">\n              ${tickmark(t.angle, t.type, TickmarkStyle.hinted)}\n            </g>\n          `\n          )}\n        </g>\n\n        <g mask=\"url(#labelMask)\">\n          ${this.renderLabels(scale)}\n      </svg>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-watch-flat': ObcWatchFlat;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/svghelpers/rectangular.d.ts

@@ -6,5 +6,6 @@ export declare function rect(id: string, data: {
     fillColor: string;
     borderRadius: number;
     strokePosition: 'inside' | 'outside';
+    y?: number;
 }): import("lit-html").TemplateResult<2> | null;
 //# sourceMappingURL=rectangular.d.ts.map

package/dist/svghelpers/rectangular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rectangular.d.ts","sourceRoot":"","sources":["../../src/svghelpers/rectangular.ts"],"names":[],"mappings":"AAEA,wBAAgB,IAAI,CAClB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,QAAQ,GAAG,SAAS,CAAC;CACtC,+CA0BF"}
+{"version":3,"file":"rectangular.d.ts","sourceRoot":"","sources":["../../src/svghelpers/rectangular.ts"],"names":[],"mappings":"AAEA,wBAAgB,IAAI,CAClB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,+CA4BF"}

package/dist/svghelpers/rectangular.js

@@ -1,13 +1,14 @@
 import { svg } from "lit";
 function rect(id, data) {
+  const yPosition = data.y !== void 0 ? data.y : -data.height / 2;
   if (data.strokePosition === "inside") {
     return svg`
 		<defs>
 			<clipPath id="clip${id}">
-				<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" />
+				<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" />
 			</clipPath>
 		</defs>
-		<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" stroke=${data.strokeColor}  stroke-width=${data.strokeWidth * 2} fill=${data.fillColor} clip-path="url(#clip${id})"/>
+		<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${data.width} height=${data.height} rx=${data.borderRadius} vector-effect="non-scaling-stroke" stroke=${data.strokeColor}  stroke-width=${data.strokeWidth * 2} fill=${data.fillColor} clip-path="url(#clip${id})"/> 
 		  `;
   } else {
     return null;

package/dist/svghelpers/rectangular.js.map

@@ -1 +1 @@
-{"version":3,"file":"rectangular.js","sources":["../../src/svghelpers/rectangular.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport function rect(\n  id: string,\n  data: {\n    width: number;\n    height: number;\n    strokeWidth: number;\n    strokeColor: string;\n    fillColor: string;\n    borderRadius: number;\n    strokePosition: 'inside' | 'outside';\n  }\n) {\n  if (data.strokePosition === 'inside') {\n    return svg`\n\t\t<defs>\n\t\t\t<clipPath id=\"clip${id}\">\n\t\t\t\t<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${\n          data.width\n        } height=${data.height} rx=${\n          data.borderRadius\n        } vector-effect=\"non-scaling-stroke\" />\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<rect id=${id} x=${-data.width / 2} y=${-data.height / 2} width=${\n      data.width\n    } height=${data.height} rx=${\n      data.borderRadius\n    } vector-effect=\"non-scaling-stroke\" stroke=${\n      data.strokeColor\n    }  stroke-width=${data.strokeWidth * 2} fill=${\n      data.fillColor\n    } clip-path=\"url(#clip${id})\"/>\n\t\t  `;\n  } else {\n    return null;\n  }\n}\n"],"names":[],"mappings":";AAEgB,SAAA,KACd,IACA,MASA;AACI,MAAA,KAAK,mBAAmB,UAAU;AAC7B,WAAA;AAAA;AAAA,uBAEY,EAAE;AAAA,eACV,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,UAClD,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP;AAAA;AAAA;AAAA,aAGK,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,UACpD,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP,8CACE,KAAK,WACP,kBAAkB,KAAK,cAAc,CAAC,SACpC,KAAK,SACP,wBAAwB,EAAE;AAAA;AAAA,EAAA,OAErB;AACE,WAAA;AAAA,EACT;AACF;"}
+{"version":3,"file":"rectangular.js","sources":["../../src/svghelpers/rectangular.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport function rect(\n  id: string,\n  data: {\n    width: number;\n    height: number;\n    strokeWidth: number;\n    strokeColor: string;\n    fillColor: string;\n    borderRadius: number;\n    strokePosition: 'inside' | 'outside';\n    y?: number;\n  }\n) {\n  const yPosition = data.y !== undefined ? data.y : -data.height / 2;\n\n  if (data.strokePosition === 'inside') {\n    return svg`\n\t\t<defs>\n\t\t\t<clipPath id=\"clip${id}\">\n\t\t\t\t<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${\n          data.width\n        } height=${data.height} rx=${\n          data.borderRadius\n        } vector-effect=\"non-scaling-stroke\" />\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${\n      data.width\n    } height=${data.height} rx=${\n      data.borderRadius\n    } vector-effect=\"non-scaling-stroke\" stroke=${\n      data.strokeColor\n    }  stroke-width=${data.strokeWidth * 2} fill=${\n      data.fillColor\n    } clip-path=\"url(#clip${id})\"/> \n\t\t  `;\n  } else {\n    return null;\n  }\n}\n"],"names":[],"mappings":";AAEgB,SAAA,KACd,IACA,MAUA;AACM,QAAA,YAAY,KAAK,MAAM,SAAY,KAAK,IAAI,CAAC,KAAK,SAAS;AAE7D,MAAA,KAAK,mBAAmB,UAAU;AAC7B,WAAA;AAAA;AAAA,uBAEY,EAAE;AAAA,eACV,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,SAAS,UAC3C,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP;AAAA;AAAA;AAAA,aAGK,EAAE,MAAM,CAAC,KAAK,QAAQ,CAAC,MAAM,SAAS,UAC7C,KAAK,KACP,WAAW,KAAK,MAAM,OACpB,KAAK,YACP,8CACE,KAAK,WACP,kBAAkB,KAAK,cAAc,CAAC,SACpC,KAAK,SACP,wBAAwB,EAAE;AAAA;AAAA,EAAA,OAErB;AACE,WAAA;AAAA,EACT;AACF;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.15-dev-20240916185711",
+  "version": "0.0.15-dev-20240923190011",
   "type": "module",
   "repository": {
     "type": "git",
@@ -35,23 +35,28 @@
     "lit": "^3.1.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.7.0",
     "@custom-elements-manifest/analyzer": "^0.9.0",
     "@lit-labs/cli": "^0.6.4",
     "@lit-labs/gen-wrapper-react": "^0.3.2",
     "@lit-labs/gen-wrapper-vue": "^0.3.3",
     "@open-wc/lit-helpers": "^0.7.0",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-storysource": "^8.1.11",
-    "@storybook/addon-themes": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/test": "^8.1.11",
+    "@playwright/test": "^1.46.1",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-storysource": "^8.2.9",
+    "@storybook/addon-themes": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.17.0",
-    "@storybook/web-components": "^8.1.11",
-    "@storybook/web-components-vite": "^8.1.11",
+    "@storybook/theming": "^8.2.9",
+    "@storybook/web-components": "^8.2.9",
+    "@storybook/web-components-vite": "^8.2.9",
     "@topcli/prompts": "^1.8.0",
     "@types/jest-image-snapshot": "^6",
+    "@types/node": "^22.4.1",
     "concurrently": "^8.2.2",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",
@@ -67,7 +72,7 @@
     "prettier": "^3.1.1",
     "release-it": "^17.1.1",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^8.1.11",
+    "storybook": "^8.2.9",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
     "vite": "^5.2.7",

package/src/navigation-instruments/compass/arrow.ts

@@ -0,0 +1,61 @@
+import {SVGTemplateResult, svg} from 'lit';
+
+export enum ArrowStyle {
+  HDG = 'HDG',
+  COG = 'COG',
+}
+
+export function arrow(
+  style: ArrowStyle,
+  angle: number
+): SVGTemplateResult | SVGTemplateResult[] {
+  const colorName = 'var(--instrument-enhanced-secondary-color)';
+
+  if (style === ArrowStyle.HDG) {
+    return svg`
+      <g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
+        <rect x="28" y="118" width="8" height="139" rx="4" fill="${colorName}" />
+        <rect x="30.0039" y="256" width="4" height="156" rx="2" fill="${colorName}" />
+        <circle cx="32" cy="256" r="8" fill="${colorName}" />
+        <mask
+          id="mask0_262_65165"
+          style="mask-type:luminance"
+          maskUnits="userSpaceOnUse"
+          x="8"
+          y="94"
+          width="48"
+          height="50"
+        >
+          <path
+            d="M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z"
+            fill="white"
+            stroke="black"
+          />
+        </mask>
+        <g mask="url(#mask0_262_65165)">
+          <path
+            d="M13.2833 140.564L32 96L50.7167 140.564C51.4569 142.326 49.54 144.023 47.8805 143.075L32 136L16.1195 143.075C14.46 144.023 12.5432 142.326 13.2833 140.564Z"
+            fill="${colorName}"
+          />
+        </g>
+      </g>
+    `;
+  } else if (style === ArrowStyle.COG) {
+    return svg`
+      <g transform="translate(-32, -${256}) rotate(${angle}, 32, 256)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M13.2833 140.564C12.5431 142.326 14.46 144.023 16.1195 143.075L32 136L47.8805 143.075C49.54 144.023 51.4568 142.326 50.7167 140.564L32 96L13.2833 140.564ZM32 106.33L19.2545 136.676L32 131.393L44.7455 136.676L32 106.33ZM49.865 139.602L49.8625 139.6L49.865 139.602Z"
+          fill="${colorName}"
+        />
+        <rect x="30" y="133" width="4" height="124" rx="2" fill="${colorName}" />
+        <circle cx="32" cy="256" r="4" fill="${colorName}" />
+      </g>
+    `;
+  } else {
+    return [];
+  }
+
+  // return [...shaft, circle, arrowTip];
+}

package/src/navigation-instruments/compass/compass.stories.ts

@@ -0,0 +1,37 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcCompass} from './compass';
+import './compass';
+import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {AdviceType} from '../watch/advice';
+
+const meta: Meta<typeof ObcCompass> = {
+  title: 'Navigation Instruments/Compass',
+  tags: ['autodocs'],
+  component: 'obc-compass',
+  args: {
+    width: 512,
+    heading: 311,
+    courseOverGround: 338,
+    headingAdvices: [
+      {
+        minAngle: 20,
+        maxAngle: 50,
+        type: AdviceType.advice,
+        hinted: false,
+      },
+    ],
+  },
+  argTypes: {
+    width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
+    heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
+    courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
+  },
+  decorators: [widthDecorator, beta6Decorator],
+} satisfies Meta<ObcCompass>;
+
+export default meta;
+type Story = StoryObj<ObcCompass>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/navigation-instruments/compass/compass.ts

@@ -0,0 +1,132 @@
+import {LitElement, css, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import '../watch/watch';
+import {Tickmark, TickmarkType} from '../watch/tickmark';
+import {arrow, ArrowStyle} from './arrow';
+import {
+  AdviceState,
+  AdviceType,
+  AngleAdvice,
+  AngleAdviceRaw,
+} from '../watch/advice';
+import {radialTickmarks} from './radial-tickmark';
+
+@customElement('obc-compass')
+export class ObcCompass extends LitElement {
+  @property({type: Number}) heading = 0;
+  @property({type: Number}) courseOverGround = 0;
+  @property({type: Number}) padding = 48;
+  @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];
+  @property({type: Number}) containerWidth = 0;
+
+  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      this.containerWidth = entry.contentRect.width;
+      this.adjustPadding();
+    }
+  });
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+
+  private adjustPadding() {
+    const deltaWidth = 512 - this.containerWidth;
+    const steps = deltaWidth / 128;
+    let deltaPadding = 0;
+    if (deltaWidth > 0) {
+      deltaPadding = steps * 48;
+    } else {
+      deltaPadding = steps * 6;
+    }
+
+    this.padding = 72 + deltaPadding;
+  }
+
+  private get angleAdviceRaw(): AngleAdviceRaw[] {
+    return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {
+      const state =
+        this.heading >= minAngle && this.heading <= maxAngle
+          ? AdviceState.triggered
+          : hinted
+            ? AdviceState.hinted
+            : AdviceState.regular;
+      return {minAngle, maxAngle, type, state};
+    });
+  }
+
+  override render() {
+    const tickmarks: Tickmark[] = [
+      {angle: 0, type: TickmarkType.main},
+      {angle: 90, type: TickmarkType.main},
+      {angle: 180, type: TickmarkType.main},
+      {angle: 270, type: TickmarkType.main},
+    ];
+
+    const rt = this.headingAdvices.map(({minAngle, maxAngle, type}) =>
+      radialTickmarks(
+        minAngle,
+        maxAngle,
+        type === AdviceType.caution ? TickmarkType.secondary : undefined
+      )
+    );
+
+    const width = (176 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+
+    return html`
+      <div class="container">
+        <obc-watch
+          .padding=${this.padding}
+          .advices=${this.angleAdviceRaw}
+          .tickmarks=${tickmarks}
+          .labelFrameEnabled=${true}
+          .crosshairEnabled=${true}
+        >
+        </obc-watch>
+        <svg viewBox="${viewBox}">
+          ${rt} ${arrow(ArrowStyle.HDG, this.heading)}
+          ${arrow(ArrowStyle.COG, this.courseOverGround)}
+        </svg>
+      </div>
+    `;
+  }
+
+  static override styles = css`
+    * {
+      box-sizing: border-box;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .container > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-compass': ObcCompass;
+  }
+}

package/src/navigation-instruments/compass/radial-tickmark.ts

@@ -0,0 +1,77 @@
+import {SVGTemplateResult, svg} from 'lit';
+import {TickmarkType, TickmarkStyle, tickmarkColor} from '../watch/tickmark';
+
+export function radialTickmarks(
+  minAngle: number,
+  maxAngle: number,
+  type: TickmarkType | undefined
+): SVGTemplateResult[] {
+  if (type === TickmarkType.main || type === TickmarkType.tertiary) {
+    throw new Error(
+      'Only secondary tickmarks or undefined tickmarks (dots) are supported'
+    );
+  }
+
+  const origin = {x: 0, y: 0};
+  const radius = 320 / 2;
+  const strokeWidth = '1.2';
+  const margin = 1.5;
+  const colorName = tickmarkColor(TickmarkStyle.hinted);
+  const tickWidth = type === TickmarkType.secondary ? 4 : 1;
+  const tickmarks: SVGTemplateResult[] = [];
+
+  const sinMin = Math.sin((minAngle * Math.PI) / 180);
+  const cosMin = Math.cos((minAngle * Math.PI) / 180);
+  const sinMax = Math.sin((maxAngle * Math.PI) / 180);
+  const cosMax = Math.cos((maxAngle * Math.PI) / 180);
+
+  const deltaIncrement = tickWidth * margin;
+
+  for (let deltaR = 0; deltaR <= radius; deltaR += deltaIncrement) {
+    const xMin = origin.x + sinMin * deltaR;
+    const yMin = origin.y - cosMin * deltaR;
+    const xMax = origin.x + sinMax * deltaR;
+    const yMax = origin.y - cosMax * deltaR;
+
+    if (type === undefined) {
+      const size = 1;
+      tickmarks.push(
+        svg`<rect 
+          x=${xMin - size / 2} 
+          y=${yMin - size / 2} 
+          width=${size} 
+          height=${size} 
+          fill=${colorName} 
+          transform="rotate(${minAngle} ${xMin} ${yMin})" 
+          vector-effect="non-scaling-stroke"/>`
+      );
+      tickmarks.push(
+        svg`<rect 
+          x=${xMax - size / 2} 
+          y=${yMax - size / 2} 
+          width=${size} 
+          height=${size} 
+          fill=${colorName} 
+          transform="rotate(${maxAngle} ${xMax} ${yMax})" 
+          vector-effect="non-scaling-stroke"/>`
+      );
+    } else {
+      const currentRadius = Math.min(deltaR + tickWidth, radius);
+      const x2Min = origin.x + sinMin * currentRadius;
+      const y2Min = origin.y - cosMin * currentRadius;
+      const x2Max = origin.x + sinMax * currentRadius;
+      const y2Max = origin.y - cosMax * currentRadius;
+
+      tickmarks.push(
+        svg`<line x1=${xMin} y1=${yMin} x2=${x2Min} y2=${y2Min} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`
+      );
+      tickmarks.push(
+        svg`<line x1=${xMax} y1=${yMax} x2=${x2Max} y2=${y2Max} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`
+      );
+
+      if (currentRadius >= radius) break;
+    }
+  }
+
+  return tickmarks;
+}

package/src/navigation-instruments/compass-flat/compass-flat.css

@@ -0,0 +1,23 @@
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.container > * {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/src/navigation-instruments/compass-flat/compass-flat.stories.ts

@@ -0,0 +1,35 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcCompassFlat} from './compass-flat';
+import './compass-flat';
+import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {LabelPosition} from './compass-flat';
+
+const meta: Meta<typeof ObcCompassFlat> = {
+  title: 'Navigation Instruments/Compass flat',
+  tags: ['autodocs'],
+  component: 'obc-compass-flat',
+  args: {
+    width: 512,
+    heading: 45,
+    courseOverGround: 50,
+    FOVIndicator: false,
+    minFOV: 90,
+  },
+  argTypes: {
+    width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
+    heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
+    courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
+  },
+  decorators: [widthDecorator, beta6Decorator],
+} satisfies Meta<ObcCompassFlat>;
+
+export default meta;
+type Story = StoryObj<ObcCompassFlat>;
+
+export const Primary: Story = {};
+
+export const WithFOVIndicator: Story = {
+  args: {
+    FOVIndicator: true,
+  },
+};