@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.45 → 2.0.0-next.49

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

@@ -1,18 +1,131 @@
 import {svg, SVGTemplateResult} from 'lit';
 import {styleMap} from 'lit/directives/style-map.js';
+import '../../icons/icon-wind-true-1.js';
+import '../../icons/icon-wind-true-2.js';
+import '../../icons/icon-wind-true-3.js';
+import '../../icons/icon-wind-true-4.js';
+import '../../icons/icon-wind-true-5.js';
+import '../../icons/icon-wind-true-6.js';
+import '../../icons/icon-wind-true-7.js';
+import '../../icons/icon-wind-true-8.js';
+import '../../icons/icon-wind-true-9.js';
+import '../../icons/icon-wind-true-10.js';
+import '../../icons/icon-wind-true-11.js';
+import '../../icons/icon-wind-true-12.js';
+import '../../icons/icon-wind-true-13.js';
+import '../../icons/icon-wind-true-14.js';
+
+/**
+ * Number of wind barb icons available (`<obi-wind-true-1>` …
+ * `<obi-wind-true-14>`).
+ *
+ * The set follows the standard meteorological wind-barb convention:
+ * icon 1 is calm, icon 2 is shaft-only (1 kn bucket), icons 3–11 add
+ * one half-barb per 5 kn (5, 10, 15, …, 45 kn), icon 12 is one pennant
+ * (50 kn), icons 13–14 add full barbs above the pennant (60 / 70 kn).
+ */
+const WIND_ICON_COUNT = 14;
+
+/** Render scale applied to the 24×24 icon so it matches the historic 48×48 visual footprint on the watch dial. */
+const WIND_ICON_SCALE = 2;
+
+/**
+ * Tip coordinates of the `obi-wind-true-*` icons in their native 24×24 child
+ * space. The arrowhead tip is at approximately (12, 22.4453) — this is the
+ * anchor point that lands on the watch's periphery radius so the barb tail
+ * extends outward only (matching the legacy inline-glyph behavior).
+ */
+const WIND_ICON_TIP_X = 12;
+const WIND_ICON_TIP_Y = 22.4453;
+
+const windIconCache = new Map<string, SVGTemplateResult>();
+
+function getWindIconSvg(index: number): SVGTemplateResult | null {
+  const tagName = `obi-wind-true-${index}`;
+  const cached = windIconCache.get(tagName);
+  if (cached) {
+    return cached;
+  }
+  const ctor = customElements.get(tagName) as
+    | (new () => {icon?: SVGTemplateResult; iconCss?: SVGTemplateResult})
+    | undefined;
+  if (!ctor) {
+    return null;
+  }
+  const instance = new ctor();
+  const tpl: SVGTemplateResult | undefined = instance.icon ?? instance.iconCss;
+  if (!tpl) {
+    return null;
+  }
+  windIconCache.set(tagName, tpl);
+  return tpl;
+}
+
+/**
+ * Maps a wind speed in **knots** to a wind-barb icon index in `[1, 14]`.
+ *
+ * Implements the designer-confirmed "Option C" mapping: speeds round to
+ * the nearest 5-knot bucket (with two sub-pennant buckets for calm and
+ * near-calm conditions):
+ *
+ * | Knots range | Icon | Glyph                |
+ * | ----------- | ---- | -------------------- |
+ * | `[0, 0.5)`  | 1    | calm                 |
+ * | `[0.5, 2.5)`| 2    | shaft only           |
+ * | `[2.5, 7.5)`| 3    | shaft + ½ barb       |
+ * | `[7.5, 12.5)`| 4   | shaft + 1 full barb  |
+ * | …5-kn steps…| …    | …                    |
+ * | `[42.5, 47.5)`| 11 | shaft + 4 full + ½   |
+ * | `[47.5, 55)`| 12   | pennant (50 kn)      |
+ * | `[55, 65)`  | 13   | pennant + 1 full barb |
+ * | `[65, ∞)`   | 14   | pennant + 2 full barbs |
+ *
+ * The 55 / 65 / 100-knot buckets currently collapse to the nearest
+ * available icon; dedicated glyphs are tracked for a follow-up icon
+ * refresh. Non-finite / null / undefined inputs fall back to icon 1.
+ */
+export function windKnotsToIconIndex(knots: number | null | undefined): number {
+  if (knots == null || !Number.isFinite(knots) || knots < 0.5) {
+    return 1;
+  }
+  if (knots < 2.5) {
+    return 2;
+  }
+  if (knots < 47.5) {
+    return Math.round(knots / 5) + 2;
+  }
+  if (knots < 55) {
+    return 12;
+  }
+  if (knots < 65) {
+    return 13;
+  }
+  return WIND_ICON_COUNT;
+}
 
 export function renderWind(options: {
-  wind: number;
+  windKnots: number;
   fromDirectionDeg: number;
   radius: number;
   color?: string;
 }): SVGTemplateResult {
-  return renderEnvironment({
-    filename: `wind-${options.wind + 1}.svg`,
-    fromDirectionDeg: options.fromDirectionDeg,
-    radius: options.radius,
-    color: options.color,
-  });
+  const {windKnots, fromDirectionDeg, radius, color} = options;
+  const index = windKnotsToIconIndex(windKnots);
+  const icon = getWindIconSvg(index);
+  if (!icon) {
+    return svg``;
+  }
+  const dirRad = (fromDirectionDeg * Math.PI) / 180;
+  const x = Math.sin(dirRad) * radius;
+  const y = -Math.cos(dirRad) * radius;
+  const tipX = WIND_ICON_TIP_X * WIND_ICON_SCALE;
+  const tipY = WIND_ICON_TIP_Y * WIND_ICON_SCALE;
+  const styles = {
+    color: color ?? 'var(--instrument-regular-secondary-color)',
+  };
+  return svg`<g style=${styleMap(styles)} transform="translate(${x} ${y}) rotate(${fromDirectionDeg}) translate(${-tipX} ${-tipY}) scale(${WIND_ICON_SCALE})">
+    ${icon}
+  </g>`;
 }
 
 export function renderCurrent(options: {
@@ -73,84 +186,4 @@ export const environmentSvgs: Record<string, SVGTemplateResult> = {
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7 10.5858L12.2071 5.37866L17.4142 10.5858L16 12L12.2071 8.20709L8.41421 12L7 10.5858Z" fill="var(--instrument-regular-secondary-color)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7 16.5858L12.2071 11.3787L17.4142 16.5858L16 18L12.2071 14.2071L8.41421 18L7 16.5858Z" fill="var(--instrument-regular-secondary-color)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7 22.5858L12.2071 17.3787L17.4142 22.5858L16 24L12.2071 20.2071L8.41421 24L7 22.5858Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-1.svg': svg`<path d="M12 2C6.47715 2 2 6.47715 2 12H3.90476C3.90476 7.52912 7.52912 3.90476 12 3.90476V2Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M22 12C22 6.47715 17.5228 2 12 2V3.90476C16.4709 3.90476 20.0952 7.52912 20.0952 12H22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M12 22C17.5228 22 22 17.5228 22 12H20.0952C20.0952 16.4709 16.4709 20.0952 12 20.0952V22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M2 12C2 17.5228 6.47715 22 12 22V20.0952C7.52912 20.0952 3.90476 16.4709 3.90476 12H2Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M12 2C6.47715 2 2 6.47715 2 12H3.90476C3.90476 7.52912 7.52912 3.90476 12 3.90476V2Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M22 12C22 6.47715 17.5228 2 12 2V3.90476C16.4709 3.90476 20.0952 7.52912 20.0952 12H22Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M12 22C17.5228 22 22 17.5228 22 12H20.0952C20.0952 16.4709 16.4709 20.0952 12 20.0952V22Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M2 12C2 17.5228 6.47715 22 12 22V20.0952C7.52912 20.0952 3.90476 16.4709 3.90476 12H2Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-2.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-3.svg': svg`<path d="M11 24L13 24L13 7L15 7L12 -1.74846e-07L9 7L11 7L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 21L8 19L11 19L11 21L8 21Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24L13 24L13 7L15 7L12 -1.74846e-07L9 7L11 7L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 21L8 19L11 19L11 21L8 21Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-4.svg': svg`<path d="M11 24L13 24L13 7L15 7L12 -2.62268e-07L9 7L11 7L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M6 24L6 22L11 22L11 24L6 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24L13 24L13 7L15 7L12 -2.62268e-07L9 7L11 7L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M6 24L6 22L11 22L11 24L6 24Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-5.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 21L8 19H12V21H8Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 21L8 19H12V21H8Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-6.svg': svg`<path d="M11 24H13L13 7L15 7L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7L15 7L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-7.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 18L8 16H12V18H8Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 18L8 16H12V18H8Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-8.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-9.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 15L8 13H12V15H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 15L8 13H12V15H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-10.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 15L5 13H12V15H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 12L8 10H12V12H8Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 15L5 13H12V15H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 12L8 10H12V12H8Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-11.svg': svg`<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 20L5 22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 20L5 22Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-12.svg': svg`<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 19L5 22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 19L5 22Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-13.svg': svg`<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 19L5 22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 15L5 13H12V15H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 19L5 22Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 15L5 13H12V15H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
 };

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

@@ -71,7 +71,7 @@ Source of truth: \`packages/openbridge-webcomponents/src/navigation-instruments/
     areas: {control: {type: 'object'}},
     padding: {control: {type: 'range', min: 0, max: 100, step: 1}},
     vessels: {control: {type: 'object'}},
-    wind: {control: {type: 'range', min: 0, max: 12, step: 1}},
+    windKnots: {control: {type: 'range', min: 0, max: 70, step: 1}},
     windFromDirectionDeg: {control: {type: 'range', min: 0, max: 360, step: 1}},
     windSymbolRadius: {control: {type: 'range', min: 0, max: 360, step: 1}},
     current: {control: {type: 'range', min: 0, max: 4, step: 1}},
@@ -194,7 +194,7 @@ export const WithStarboardPortIndicator: Story = {
 
 export const WithWind: Story = {
   args: {
-    wind: 10,
+    windKnots: 50,
     windFromDirectionDeg: 116,
     padding: 70,
     windSymbolRadius: 190,

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

@@ -222,7 +222,7 @@ export class ObcWatch extends LitElement {
   @property({type: Boolean}) crosshairEnabled: boolean = false;
   @property({type: Boolean}) showLabels: boolean = false;
   @property({type: Array, attribute: false}) vessels: WatchVessel[] = [];
-  @property({type: Number}) wind: number | null = null;
+  @property({type: Number}) windKnots: number | null = null;
   @property({type: Number}) windFromDirectionDeg: number | null = null;
   @property({type: Number}) windSymbolRadius: number | null = null;
   @property({type: String}) windColor: string | undefined;
@@ -766,9 +766,9 @@ export class ObcWatch extends LitElement {
         })
       : nothing;
     const wind =
-      this.wind != null && this.windFromDirectionDeg != null
+      this.windKnots != null && this.windFromDirectionDeg != null
         ? svg`<g transform="scale(${this.scaleWindIcon})">${renderWind({
-            wind: this.wind,
+            windKnots: this.windKnots,
             fromDirectionDeg: this.windFromDirectionDeg,
             radius: this.windSymbolRadius ?? 192,
             color: this.windColor,

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

@@ -76,7 +76,7 @@ const meta: Meta<typeof ObcWind> = {
     width: 400,
     vesselHeadingDeg: 60,
     currentWindFromDirection: 100,
-    currentWindSpeedBeaufort: 5,
+    currentWindSpeedKnots: 25,
     windHistogramData: windHistogramData,
   },
   argTypes: {
@@ -85,8 +85,9 @@ const meta: Meta<typeof ObcWind> = {
     currentWindFromDirection: {
       control: {type: 'range', min: 0, max: 360, step: 1},
     },
-    currentWindSpeedBeaufort: {
-      control: {type: 'range', min: 0, max: 12, step: 1},
+    currentWindSpeedKnots: {
+      control: {type: 'range', min: 0, max: 75, step: 1},
+      description: 'Wind speed in knots.',
     },
     windHistogramData: {control: 'object'},
     vesselImage: {

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

@@ -33,7 +33,7 @@ const WIND_HISTOGRAM_MIN_RADIUS = 50;
 @customElement('obc-wind')
 export class ObcWind extends LitElement {
   @property({type: Number}) currentWindFromDirection: number = 0;
-  @property({type: Number}) currentWindSpeedBeaufort: number = 1;
+  @property({type: Number}) currentWindSpeedKnots: number = 25;
   @property({type: Array, attribute: false})
   windHistogramData: WindHistogramData[] = [];
   @property({type: String}) vesselImage: VesselImage = VesselImage.genericTop;
@@ -146,7 +146,7 @@ export class ObcWind extends LitElement {
         ${this.renderWindHistogram(variant)}
         <obc-watch
           .watchCircleType=${watchCircleType}
-          .wind=${this.currentWindSpeedBeaufort}
+          .windKnots=${this.currentWindSpeedKnots}
           .windFromDirectionDeg=${this.currentWindFromDirection}
           .windSymbolRadius=${windSymbolRadius}
           .scaleWindIcon=${scaleWindIcon}

package/src/navigation-instruments/wind-indicator/wind-indicator.stories.ts

@@ -11,15 +11,18 @@ type WindIndicatorArgs = {
   type: WindIndicatorType;
   direction: WindIndicatorDirection;
   priority: WindIndicatorPriority;
-  level: number;
+  currentWindSpeedKnots: number;
   rotationAngle: number;
-  windFromAngle: number;
+  currentWindFromDirection: number;
   angle?: number;
   'wind-from-angle'?: number;
+  'current-wind-from-direction'?: number;
   'rotation-angle'?: number;
-  clampedLevel?: number;
+  'current-wind-speed-knots'?: number;
+  iconIndex?: number;
   accentColor?: string;
   windIconCache?: unknown;
+  windFromAngle?: number;
 };
 
 const meta: Meta<WindIndicatorArgs> = {
@@ -37,14 +40,14 @@ const meta: Meta<WindIndicatorArgs> = {
       .type=${args.type}
       .direction=${args.direction}
       .priority=${args.priority}
-      .level=${args.level}
+      .currentWindSpeedKnots=${args.currentWindSpeedKnots}
       .rotationAngle=${args.rotationAngle}
-      .windFromAngle=${args.windFromAngle}
+      .currentWindFromDirection=${args.currentWindFromDirection}
     ></obc-wind-indicator>
   `,
   args: {
-    windFromAngle: 0,
-    level: 7,
+    currentWindFromDirection: 0,
+    currentWindSpeedKnots: 35,
     type: WindIndicatorType.arrow,
     direction: WindIndicatorDirection.true,
     priority: WindIndicatorPriority.regular,
@@ -59,8 +62,8 @@ const meta: Meta<WindIndicatorArgs> = {
       control: {type: 'select'},
       options: Object.values(WindIndicatorDirection),
     },
-    windFromAngle: {
-      name: 'Wind From Angle',
+    currentWindFromDirection: {
+      name: 'Current Wind From Direction',
       description: 'Wind-from angle in degrees. 0/360 = wind from north.',
       control: {type: 'range', min: 0, max: 360, step: 1},
     },
@@ -74,12 +77,19 @@ const meta: Meta<WindIndicatorArgs> = {
       control: {type: 'select'},
       options: Object.values(WindIndicatorPriority),
     },
-    level: {control: {type: 'range', min: 0, max: 12, step: 1}},
+    currentWindSpeedKnots: {
+      description:
+        'Wind speed in knots. Mapped to barb icons in 5-kn steps (standard meteorological wind-barb convention).',
+      control: {type: 'range', min: 0, max: 75, step: 1},
+    },
 
     angle: {table: {disable: true}, control: false},
+    windFromAngle: {table: {disable: true}, control: false},
     'wind-from-angle': {table: {disable: true}, control: false},
+    'current-wind-from-direction': {table: {disable: true}, control: false},
     'rotation-angle': {table: {disable: true}, control: false},
-    clampedLevel: {table: {disable: true}, control: false},
+    'current-wind-speed-knots': {table: {disable: true}, control: false},
+    iconIndex: {table: {disable: true}, control: false},
     accentColor: {table: {disable: true}, control: false},
     windIconCache: {table: {disable: true}, control: false},
   },
@@ -121,6 +131,6 @@ export const Labeled: Story = {
     type: WindIndicatorType.labeled,
     direction: WindIndicatorDirection.true,
     priority: WindIndicatorPriority.regular,
-    level: 12,
+    currentWindSpeedKnots: 60,
   },
 };

package/src/navigation-instruments/wind-indicator/wind-indicator.ts

@@ -2,7 +2,35 @@ import {LitElement, css, html, svg, type SVGTemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
 import {customElement} from '../../decorator.js';
 import {styleMap} from 'lit/directives/style-map.js';
-import '../../icons/index.js';
+import '../../icons/icon-wind-true-1.js';
+import '../../icons/icon-wind-true-2.js';
+import '../../icons/icon-wind-true-3.js';
+import '../../icons/icon-wind-true-4.js';
+import '../../icons/icon-wind-true-5.js';
+import '../../icons/icon-wind-true-6.js';
+import '../../icons/icon-wind-true-7.js';
+import '../../icons/icon-wind-true-8.js';
+import '../../icons/icon-wind-true-9.js';
+import '../../icons/icon-wind-true-10.js';
+import '../../icons/icon-wind-true-11.js';
+import '../../icons/icon-wind-true-12.js';
+import '../../icons/icon-wind-true-13.js';
+import '../../icons/icon-wind-true-14.js';
+import '../../icons/icon-wind-shaft-1.js';
+import '../../icons/icon-wind-shaft-2.js';
+import '../../icons/icon-wind-shaft-3.js';
+import '../../icons/icon-wind-shaft-4.js';
+import '../../icons/icon-wind-shaft-5.js';
+import '../../icons/icon-wind-shaft-6.js';
+import '../../icons/icon-wind-shaft-7.js';
+import '../../icons/icon-wind-shaft-8.js';
+import '../../icons/icon-wind-shaft-9.js';
+import '../../icons/icon-wind-shaft-10.js';
+import '../../icons/icon-wind-shaft-11.js';
+import '../../icons/icon-wind-shaft-12.js';
+import '../../icons/icon-wind-shaft-13.js';
+import '../../icons/icon-wind-shaft-14.js';
+import {windKnotsToIconIndex} from '../watch/environment.js';
 
 export enum WindIndicatorType {
   arrow = 'arrow',
@@ -43,13 +71,6 @@ const SHAFT_TRUE_CIRCLE_TPL = svg`
   />
 `;
 
-const SHAFT_TRUE_WIND_BARB_TPL = svg`
-  <path
-    d="M39.613 20.3747C39.7971 20.6935 39.6878 21.1013 39.3689 21.2853C39.0501 21.4694 38.6424 21.3602 38.4583 21.0413L36.4583 17.5772L35.3036 18.2439L37.3036 21.708C37.4876 22.0269 37.3784 22.4346 37.0595 22.6187C36.7407 22.8028 36.3329 22.6935 36.1489 22.3747L34.1489 18.9106L32.9942 19.5772L33.9942 21.3093C34.1782 21.6281 34.069 22.0359 33.7501 22.22C33.4313 22.4041 33.0235 22.2948 32.8395 21.9759L31.8395 20.2439L24.3339 24.5772L23.6672 23.4225L36.3114 16.1224C36.6621 15.9201 37.1103 16.0402 37.3128 16.3907L39.613 20.3747Z"
-    fill="currentColor"
-  />
-`;
-
 const SHAFT_TRUE_WIND_BARB_D_BY_LEVEL: string[] = [
   'M33.0954 23.7527C35.1680 22.5560 35.8782 19.9058 34.6816 17.8332C33.4850 15.7606 30.8347 15.0504 28.7621 16.2471C26.6895 17.4437 25.9794 20.0939 27.1760 22.1665L26.3099 22.6665C24.8372 20.1156 25.7112 16.8538 28.2621 15.3810C30.8130 13.9083 34.0748 14.7823 35.5476 17.3332C37.0204 19.8841 36.1463 23.1459 33.5954 24.6187C31.0445 26.0914 27.7827 25.2174 26.3099 22.6665L27.1760 22.1665C28.3726 24.2392 31.0228 24.9493 33.0954 23.7527L33.0954 23.7527',
   'M37.2797 16.3332C37.4638 16.6521 37.3545 17.0598 37.0356 17.2439L24.3339 24.5772L23.6672 23.4225L36.3690 16.0892C36.6878 15.9051 37.0956 16.0143 37.2797 16.3332L37.2797 16.3332',
@@ -64,6 +85,7 @@ const SHAFT_TRUE_WIND_BARB_D_BY_LEVEL: string[] = [
   'M39.6130 20.3747C39.7971 20.6936 39.6878 21.1013 39.3690 21.2854C39.0501 21.4695 38.6424 21.3602 38.4583 21.0413L36.4583 17.5772L35.3036 18.2439L37.3036 21.7080C37.4877 22.0269 37.3784 22.4346 37.0595 22.6187C36.7407 22.8028 36.3330 22.6935 36.1489 22.3747L34.1489 18.9106L32.9942 19.5772L34.9941 23.0413C35.1782 23.3602 35.0690 23.7679 34.7501 23.9520C34.4313 24.1361 34.0235 24.0269 33.8394 23.7080L31.8395 20.2439L30.6847 20.9105L32.6847 24.3747C32.8688 24.6935 32.7596 25.1012 32.4407 25.2853C32.1218 25.4694 31.7141 25.3602 31.5300 25.0413L29.5300 21.5772L28.3753 22.2439L29.3753 23.9759C29.5594 24.2948 29.4502 24.7025 29.1313 24.8866C28.8124 25.0707 28.4047 24.9615 28.2206 24.6426L27.2206 22.9105L24.3339 24.5772L23.6672 23.4225L36.3115 16.1224C36.6621 15.9201 37.1103 16.0402 37.3129 16.3907L39.6130 20.3747L39.6130 20.3747',
   'M37.3380 16.4822L37.3672 16.5654L38.7821 21.5122C38.9920 22.2462 38.0802 22.7726 37.5496 22.2238L34.2758 18.8373L24.3339 24.5772L23.6672 23.4224L36.2952 16.1318C36.6825 15.9082 37.1705 16.0816 37.3380 16.4822L37.3380 16.4822',
   'M37.3380 16.4822L37.3672 16.5654L38.7821 21.5122C38.9920 22.2462 38.0802 22.7726 37.5496 22.2238L34.2758 18.8373L32.9942 19.5772L34.9942 23.0413C35.1783 23.3602 35.0690 23.7679 34.7502 23.9520C34.4313 24.1361 34.0236 24.0268 33.8395 23.7080L31.8395 20.2438L24.3339 24.5772L23.6672 23.4224L36.2952 16.1318C36.6825 15.9082 37.1705 16.0816 37.3380 16.4822L37.3380 16.4822',
+  'M37.3380 16.4822L37.3672 16.5654L38.7821 21.5122C38.9920 22.2462 38.0802 22.7726 37.5496 22.2238L34.2758 18.8373L32.9942 19.5772L34.9942 23.0413C35.1783 23.3602 35.0690 23.7679 34.7502 23.9520C34.4313 24.1361 34.0236 24.0268 33.8395 23.7080L31.8395 20.2438L30.6847 20.9105L32.6847 24.3747C32.8688 24.6935 32.7596 25.1012 32.4407 25.2853C32.1218 25.4694 31.7141 25.3602 31.5300 25.0413L29.5300 21.5772L24.3339 24.5772L23.6672 23.4224L36.2952 16.1318C36.6825 15.9082 37.1705 16.0816 37.3380 16.4822L37.3380 16.4822',
 ];
 
 const SHAFT_RELATIVE_EXPORT_OFFSET_X = -9.9395;
@@ -169,16 +191,23 @@ const LABELED_ARROW_TPL = svg`
 /**
  * `<obc-wind-indicator>` – A compact wind indicator with a fixed frame and a rotating wind marker.
  *
- * Visualizes a discrete wind `level` using a compact icon plus optional mode layers.
+ * Visualizes a wind speed in knots using a compact wind-barb icon plus
+ * optional mode layers.
  *
  * ## Features
  *
  * - **Variants:** `type` (`arrow` | `shaft` | `labeled`), `direction` (`true` | `relative`), `priority` (`regular` | `enhanced`).
- * - **Discrete input:** `level` selects the icon state; mapping from real wind to `level` happens outside.
+ * - **Speed input:** `currentWindSpeedKnots` is the wind speed in knots.
+ *   The barb icon follows the standard meteorological convention (one
+ *   half-barb per 5 kn). 0–65 kn covers all 14 icons; higher values clamp
+ *   to the heaviest icon.
  *
  * ## Usage Guidelines
  *
  * Use when you need a small wind cue next to other compact indicators.
+ * Pass the wind speed in knots through `currentWindSpeedKnots`, matching
+ * the convention used by `<obc-wind>`, `<obc-wind-propulsion>` and
+ * `<obc-compass>`.
  */
 @customElement('obc-wind-indicator')
 export class ObcWindIndicator extends LitElement {
@@ -190,12 +219,24 @@ export class ObcWindIndicator extends LitElement {
   @property({type: String}) priority: WindIndicatorPriority =
     WindIndicatorPriority.regular;
 
-  @property({type: Number}) level = 0;
+  /**
+   * Wind speed in **knots**, used to pick the wind-barb icon.
+   *
+   * Maps to the icon set using the designer-confirmed "Option C"
+   * ranges: `[0, 0.5)` kn renders calm, `[0.5, 2.5)` kn renders a
+   * shaft only, then 5-kn nearest-neighbour buckets up to 45 kn
+   * (half-barb steps), `[47.5, 55)` kn renders the 50-kn pennant, and
+   * `[55, 65)` / `[65, ∞)` kn add one and two full barbs above the
+   * pennant respectively. Non-finite or negative values fall back to
+   * calm.
+   */
+  @property({type: Number, attribute: 'current-wind-speed-knots'})
+  currentWindSpeedKnots = 0;
 
   /**
    * Rotation of the reference frame (course/heading) in degrees.
    *
-   * Used in relative mode to compute the marker rotation as `windFromAngle - rotationAngle`.
+   * This could be the heading or the course of the vessel.
    * `0` means north-up.
    */
   @property({type: Number, attribute: 'rotation-angle'}) rotationAngle = 0;
@@ -207,17 +248,29 @@ export class ObcWindIndicator extends LitElement {
    * - `0` / `360`: wind from north → marker points south (down)
    * - `180`: wind from south → marker points north (up)
    */
-  @property({type: Number, attribute: 'wind-from-angle'}) windFromAngle = 0;
+  @property({type: Number, attribute: 'current-wind-from-direction'})
+  currentWindFromDirection = 0;
 
   /**
-   * @deprecated Use `windFromAngle` instead.
+   * @deprecated Use `currentWindFromDirection` instead.
+   */
+  @property({type: Number})
+  get windFromAngle() {
+    return this.currentWindFromDirection;
+  }
+  set windFromAngle(value: number) {
+    this.currentWindFromDirection = value;
+  }
+
+  /**
+   * @deprecated Use `currentWindFromDirection` instead.
    */
   @property({type: Number})
   get angle() {
-    return this.windFromAngle;
+    return this.currentWindFromDirection;
   }
   set angle(value: number) {
-    this.windFromAngle = value;
+    this.currentWindFromDirection = value;
   }
 
   static override styles = css`
@@ -252,15 +305,13 @@ export class ObcWindIndicator extends LitElement {
     }
   `;
 
-  private clampLevel(value: number): number {
-    if (!Number.isFinite(value)) {
-      return 0;
-    }
-    return Math.max(0, Math.min(12, Math.round(value)));
-  }
-
-  private get clampedLevel(): number {
-    return this.clampLevel(this.level);
+  /**
+   * Icon index in the range `1..14`, derived from `currentWindSpeedKnots`
+   * via the shared `windKnotsToIconIndex` helper (standard meteorological
+   * wind-barb convention; one half-barb per 5 kn).
+   */
+  private get iconIndex(): number {
+    return windKnotsToIconIndex(this.currentWindSpeedKnots);
   }
 
   private get accentColor(): string {
@@ -271,11 +322,11 @@ export class ObcWindIndicator extends LitElement {
 
   private getWindBaseAngle(): number {
     if (this.type === WindIndicatorType.labeled) {
-      return this.windFromAngle;
+      return this.currentWindFromDirection;
     }
     return this.direction === WindIndicatorDirection.relative
-      ? this.windFromAngle - this.rotationAngle
-      : this.windFromAngle;
+      ? this.currentWindFromDirection + this.rotationAngle
+      : this.currentWindFromDirection;
   }
 
   private getWindRotation(offsetDeg = 0): number {
@@ -309,12 +360,8 @@ export class ObcWindIndicator extends LitElement {
     return tpl;
   }
 
-  private getWindIconTagName(
-    type: string,
-    _direction: string,
-    level: number
-  ): string {
-    const index = Math.max(0, Math.min(12, Math.round(level))) + 1;
+  private getWindIconTagName(type: string, _direction: string): string {
+    const index = this.iconIndex;
 
     if (type === WindIndicatorType.shaft) {
       return `obi-wind-shaft-${index}`;
@@ -325,10 +372,9 @@ export class ObcWindIndicator extends LitElement {
 
   private getWindIcon(
     type: string,
-    direction: string,
-    level: number
+    direction: string
   ): SVGTemplateResult | null {
-    const tagName = this.getWindIconTagName(type, direction, level);
+    const tagName = this.getWindIconTagName(type, direction);
     return this.getWindIconSvg(tagName);
   }
 
@@ -412,8 +458,7 @@ export class ObcWindIndicator extends LitElement {
       const windStyles = {color: this.accentColor};
       const windIcon = this.getWindIcon(
         WindIndicatorType.shaft,
-        this.direction,
-        this.clampedLevel
+        this.direction
       );
 
       const windMarker = svg`
@@ -473,17 +518,13 @@ export class ObcWindIndicator extends LitElement {
           transform="rotate(${this.getWindRotation(SHAFT_TRUE_ARROW_OFFSET_DEG)} ${CX} ${CY})"
           data-name="hdg"
         >
-          ${
-            this.clampedLevel === 7
-              ? SHAFT_TRUE_WIND_BARB_TPL
-              : svg`<path d=${SHAFT_TRUE_WIND_BARB_D_BY_LEVEL[this.clampedLevel]} fill="currentColor" />`
-          }
+          ${svg`<path d=${SHAFT_TRUE_WIND_BARB_D_BY_LEVEL[this.iconIndex - 1]} fill="currentColor" />`}
           ${SHAFT_TRUE_CIRCLE_TPL}
         </g>
       `;
     }
 
-    const icon = this.getWindIcon(this.type, this.direction, this.clampedLevel);
+    const icon = this.getWindIcon(this.type, this.direction);
     if (!icon) {
       return null;
     }
@@ -505,6 +546,10 @@ export class ObcWindIndicator extends LitElement {
       return null;
     }
 
+    const value = Number.isFinite(this.currentWindSpeedKnots)
+      ? Math.max(0, Math.round(this.currentWindSpeedKnots))
+      : 0;
+
     return svg`
       <text
         x="${CX}"
@@ -516,7 +561,7 @@ export class ObcWindIndicator extends LitElement {
         font-weight="var(--global-typography-ui-label-active-font-weight)"
         line-height="var(--global-typography-ui-label-active-line-height)"
       >
-        ${this.clampedLevel}
+        ${value}
       </text>
     `;
   }