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

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

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

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    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;"}
+{"version":3,"file":"rectangular.js","sources":["../../src/svghelpers/rectangular.ts"],"sourcesContent":["import {svg} from 'lit';\r\n\r\nexport function rect(\r\n  id: string,\r\n  data: {\r\n    width: number;\r\n    height: number;\r\n    strokeWidth: number;\r\n    strokeColor: string;\r\n    fillColor: string;\r\n    borderRadius: number;\r\n    strokePosition: 'inside' | 'outside';\r\n    y?: number;\r\n  }\r\n) {\r\n  const yPosition = data.y !== undefined ? data.y : -data.height / 2;\r\n\r\n  if (data.strokePosition === 'inside') {\r\n    return svg`\r\n\t\t<defs>\r\n\t\t\t<clipPath id=\"clip${id}\">\r\n\t\t\t\t<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${\r\n          data.width\r\n        } height=${data.height} rx=${\r\n          data.borderRadius\r\n        } vector-effect=\"non-scaling-stroke\" />\r\n\t\t\t</clipPath>\r\n\t\t</defs>\r\n\t\t<rect id=${id} x=${-data.width / 2} y=${yPosition} width=${\r\n      data.width\r\n    } height=${data.height} rx=${\r\n      data.borderRadius\r\n    } vector-effect=\"non-scaling-stroke\" stroke=${\r\n      data.strokeColor\r\n    }  stroke-width=${data.strokeWidth * 2} fill=${\r\n      data.fillColor\r\n    } clip-path=\"url(#clip${id})\"/> \r\n\t\t  `;\r\n  } else {\r\n    return null;\r\n  }\r\n}\r\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,83 +1,83 @@
-{
-  "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.15-dev-20240923184809",
-  "type": "module",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git",
-    "directory": "packages/openbridge-webcomponents"
-  },
-  "license": "Apache-2.0",
-  "scripts": {
-    "build": "yarn run typecheck && yarn run build:ts && yarn run analyze && yarn run build:wrappers",
-    "build:ts": "vite build",
-    "build:ts:watch": "vite build --watch",
-    "build:wrappers": "lit labs gen --framework=vue --framework=react --out=.. && node fix-generated.cjs",
-    "typecheck": "tsc --noEmit",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "download:icons": "tsx ./script/download-icons.ts",
-    "new:component": "tsx ./new-component.ts",
-    "test-storybook": "test-storybook",
-    "prepack": "yarn build",
-    "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\"  --write",
-    "format:check": "prettier \"**/*.{cjs,html,js,json,md,ts}\"  --check",
-    "lint": "yarn run lint:lit-analyzer && yarn run lint:eslint",
-    "lint:eslint": "eslint 'src/**/*.ts'",
-    "lint:lit-analyzer": "lit-analyzer",
-    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\"",
-    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --watch",
-    "release": "release-it"
-  },
-  "dependencies": {
-    "@lit-labs/observers": "^2.0.2",
-    "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",
-    "@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/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",
-    "eslint-plugin-storybook": "^0.8.0",
-    "figma-api": "^1.11.0",
-    "jest-image-snapshot": "^6.2.0",
-    "lit-analyzer": "^2.0.3",
-    "nodemon": "^3.0.2",
-    "playwright": "^1.40.0",
-    "postcss": "^8.4.36",
-    "postcss-mixins": "^10.0.0",
-    "postcss-nesting": "^12.0.1",
-    "prettier": "^3.1.1",
-    "release-it": "^17.1.1",
-    "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^8.2.9",
-    "tsx": "^4.7.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.2.7",
-    "vite-plugin-dts": "^3.6.3"
-  },
-  "types": "./dist/index.d.ts",
-  "customElements": "custom-elements.json"
-}
+{
+  "name": "@oicl/openbridge-webcomponents",
+  "version": "0.0.15-dev-20240923191659",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents.git",
+    "directory": "packages/openbridge-webcomponents"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "yarn run typecheck && yarn run build:ts && yarn run analyze && yarn run build:wrappers",
+    "build:ts": "vite build",
+    "build:ts:watch": "vite build --watch",
+    "build:wrappers": "lit labs gen --framework=vue --framework=react --out=.. && node fix-generated.cjs",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "download:icons": "tsx ./script/download-icons.ts",
+    "new:component": "tsx ./new-component.ts",
+    "test-storybook": "test-storybook",
+    "prepack": "yarn build",
+    "format": "prettier \"**/*.{cjs,html,js,json,md,ts}\"  --write",
+    "format:check": "prettier \"**/*.{cjs,html,js,json,md,ts}\"  --check",
+    "lint": "yarn run lint:lit-analyzer && yarn run lint:eslint",
+    "lint:eslint": "eslint 'src/**/*.ts'",
+    "lint:lit-analyzer": "lit-analyzer",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\"",
+    "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.stories.ts\" --watch",
+    "release": "release-it"
+  },
+  "dependencies": {
+    "@lit-labs/observers": "^2.0.2",
+    "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",
+    "@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/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",
+    "eslint-plugin-storybook": "^0.8.0",
+    "figma-api": "^1.11.0",
+    "jest-image-snapshot": "^6.2.0",
+    "lit-analyzer": "^2.0.3",
+    "nodemon": "^3.0.2",
+    "playwright": "^1.40.0",
+    "postcss": "^8.4.36",
+    "postcss-mixins": "^10.0.0",
+    "postcss-nesting": "^12.0.1",
+    "prettier": "^3.1.1",
+    "release-it": "^17.1.1",
+    "rollup-plugin-postcss-lit": "^2.1.0",
+    "storybook": "^8.2.9",
+    "tsx": "^4.7.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.2.7",
+    "vite-plugin-dts": "^3.6.3"
+  },
+  "types": "./dist/index.d.ts",
+  "customElements": "custom-elements.json"
+}

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

@@ -1,61 +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];
-}
+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

@@ -1,37 +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: {},
-};
+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: {},
+};