@oicl/openbridge-webcomponents 0.0.15-dev-20241113182547 → 0.0.15-dev-20241119201940

package/.storybook/main.ts

@@ -10,7 +10,8 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-storysource'),
-    '@chromatic-com/storybook',
+    getAbsolutePath('storybook-addon-tag-badges'),
+    getAbsolutePath('@chromatic-com/storybook'),
   ],
 
   framework: {

package/.storybook/manager.ts

@@ -3,4 +3,20 @@ import obTheme from './openbridgeTheme';
 
 addons.setConfig({
   theme: obTheme,
+  tagBadges: [
+    // Add an entry that matches 'frog' and displays a cool badge in the sidebar only
+    {
+      tags: '6.0',
+      badge: {
+        text: '6.0 Beta',
+        bgColor: '#0070d6',
+        fgColor: '#fff',
+        tooltip: 'OpenBridge 6.0 Beta',
+      },
+      display: {
+        sidebar: ['component'],
+        toolbar: true,
+      },
+    },
+  ],
 });

package/.storybook/preview.ts

@@ -1,5 +1,4 @@
 import type {Preview} from '@storybook/web-components';
-import {BadgesConfig} from '@geometricpanda/storybook-addon-badges';
 
 import '../src/palettes/variables.css';
 import {setCustomElementsManifest} from '@storybook/web-components';

package/custom-elements.json

@@ -88,23 +88,6 @@
               }
             }
           ]
-        },
-        {
-          "kind": "function",
-          "name": "beta6Decorator",
-          "return": {
-            "type": {
-              "text": "HTMLTemplateResult"
-            }
-          },
-          "parameters": [
-            {
-              "name": "story",
-              "type": {
-                "text": "() => unknown"
-              }
-            }
-          ]
         }
       ],
       "exports": [
@@ -139,14 +122,6 @@
             "name": "widthDecorator",
             "module": "src/storybook-util.ts"
           }
-        },
-        {
-          "kind": "js",
-          "name": "beta6Decorator",
-          "declaration": {
-            "name": "beta6Decorator",
-            "module": "src/storybook-util.ts"
-          }
         }
       ]
     },

package/dist/storybook-util.d.ts

@@ -15,5 +15,4 @@ export declare function widthDecorator(story: () => unknown, context: {
         height?: number;
     };
 }): HTMLTemplateResult;
-export declare function beta6Decorator(story: () => unknown): HTMLTemplateResult;
 //# sourceMappingURL=storybook-util.d.ts.map

package/dist/storybook-util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storybook-util.d.ts","sourceRoot":"","sources":["../src/storybook-util.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,iCAAiC,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAC,kBAAkB,EAAE,cAAc,EAAO,MAAM,KAAK,CAAC;AAG7D,eAAO,MAAM,OAAO,UAQZ,CAAC;AAET,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACtC,cAAc,CAyBhB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,OAAO,GAAG,kBAAkB,CAsCvE;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,OAAO,EACpB,OAAO,EAAE;IAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAC,CAAA;CAAC,GAChD,kBAAkB,CASpB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,OAAO,GAAG,kBAAkB,CAyBvE"}
+{"version":3,"file":"storybook-util.d.ts","sourceRoot":"","sources":["../src/storybook-util.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gCAAgC,CAAC;AACxC,OAAO,iCAAiC,CAAC;AACzC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAC,kBAAkB,EAAE,cAAc,EAAO,MAAM,KAAK,CAAC;AAG7D,eAAO,MAAM,OAAO,UAQZ,CAAC;AAET,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,MAAM,EACV,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GACtC,cAAc,CAyBhB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,OAAO,GAAG,kBAAkB,CAsCvE;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,OAAO,EACpB,OAAO,EAAE;IAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAC,CAAA;CAAC,GAChD,kBAAkB,CASpB"}

package/dist/storybook-util.js

@@ -91,34 +91,7 @@ function widthDecorator(story, context) {
     ${story()}
   </div>`;
 }
-function beta6Decorator(story) {
-  return html`
-    <div
-      style="
-  border-radius: 100px; 
-  background-color: var(--instrument-enhanced-primary-color); 
-  color: var(--instrument-frame-primary-color); 
-  height: 32px; 
-  padding: 0 24px; 
-  box-sizing: border-box; 
-  width: fit-content; 
-  display: grid; 
-  place-content: center;
-  font-family: 'Noto Sans';
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 570;
-  line-height: 24px; /* 150% */
-  margin-bottom: 64px;
-"
-    >
-      Beta 6.0
-    </div>
-    ${story()}
-  `;
-}
 export {
-  beta6Decorator,
   crossDecorator,
   iconIdToIconHtml,
   iconIds,

package/dist/storybook-util.js.map

@@ -1 +1 @@
-{"version":3,"file":"storybook-util.js","sources":["../src/storybook-util.ts"],"sourcesContent":["import './icons/icon-01-placeholder';\nimport './icons/icon-01-search';\nimport './icons/icon-06-radar';\nimport './icons/icon-04-day';\nimport './icons/icon-04-brilliance-low';\nimport './icons/icon-04-brilliance-high';\nimport './icons/icon-06-ship';\nimport {HTMLTemplateResult, TemplateResult, html} from 'lit';\nimport {spread} from '@open-wc/lit-helpers';\n\nexport const iconIds = [\n  '01-placeholder',\n  '01-search',\n  '04-brilliance-low',\n  '04-brilliance-high',\n  '06-radar',\n  '04-day',\n  '06-ship',\n].sort();\n\nexport function iconIdToIconHtml(\n  id: string,\n  attributes: Record<string, string> = {}\n): TemplateResult {\n  switch (id) {\n    case '01-placeholder':\n      return html`<obi-01-placeholder\n        ${spread(attributes)}\n      ></obi-01-placeholder>`;\n    case '01-search':\n      return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;\n    case '04-day':\n      return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;\n    case '04-brilliance-low':\n      return html`<obi-04-brilliance-low\n        ${spread(attributes)}\n      ></obi-04-brilliance-low>`;\n    case '04-brilliance-high':\n      return html`<obi-04-brilliance-high\n        ${spread(attributes)}\n      ></obi-04-brilliance-high>`;\n    case '06-radar':\n      return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;\n    case '06-ship':\n      return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;\n    default:\n      throw new Error(`Unknown icon id: ${id}`);\n  }\n}\n\nexport function crossDecorator(story: () => unknown): HTMLTemplateResult {\n  return html` <style>\n      .wrapper {\n        width: 100%;\n        height: 100vh;\n        position: relative;\n      }\n\n      .wrapper > * {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n      }\n\n      .wrapper::before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 1px;\n        left: calc(50% - 0.5px);\n        background-color: rgb(0, 0, 0, 0.3);\n      }\n\n      .wrapper::after {\n        content: '';\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1px;\n        top: calc(50% - 0.5px);\n        background-color: rgb(0, 0, 0, 0.3);\n        z-index: -100;\n      }\n    </style>\n    <div class=\"wrapper\">${story()}</div>`;\n}\n\nexport function widthDecorator(\n  story: () => unknown,\n  context: {args: {width: number; height?: number}}\n): HTMLTemplateResult {\n  const width = context.args.width;\n  const height = context.args.height ?? width;\n  return html` <div\n    class=\"wrapper\"\n    style=\"width: ${width}px; height: ${height}px\"\n  >\n    ${story()}\n  </div>`;\n}\n\nexport function beta6Decorator(story: () => unknown): HTMLTemplateResult {\n  return html`\n    <div\n      style=\"\n  border-radius: 100px; \n  background-color: var(--instrument-enhanced-primary-color); \n  color: var(--instrument-frame-primary-color); \n  height: 32px; \n  padding: 0 24px; \n  box-sizing: border-box; \n  width: fit-content; \n  display: grid; \n  place-content: center;\n  font-family: 'Noto Sans';\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 570;\n  line-height: 24px; /* 150% */\n  margin-bottom: 64px;\n\"\n    >\n      Beta 6.0\n    </div>\n    ${story()}\n  `;\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK;AAEA,SAAS,iBACd,IACA,aAAqC,IACrB;AAChB,UAAQ,IAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,sBAAsB,OAAO,UAAU,CAAC;AAAA,IACjD,KAAK;AACI,aAAA,mBAAmB,OAAO,UAAU,CAAC;AAAA,IAC9C,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,qBAAqB,OAAO,UAAU,CAAC;AAAA,IAChD,KAAK;AACI,aAAA,oBAAoB,OAAO,UAAU,CAAC;AAAA,IAC/C;AACE,YAAM,IAAI,MAAM,oBAAoB,EAAE,EAAE;AAAA,EAC5C;AACF;AAEO,SAAS,eAAe,OAA0C;AAChE,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAoCkB,OAAO;AAClC;AAEgB,SAAA,eACd,OACA,SACoB;AACd,QAAA,QAAQ,QAAQ,KAAK;AACrB,QAAA,SAAS,QAAQ,KAAK,UAAU;AAC/B,SAAA;AAAA;AAAA,oBAEW,KAAK,eAAe,MAAM;AAAA;AAAA,MAExC,OAAO;AAAA;AAEb;AAEO,SAAS,eAAe,OAA0C;AAChE,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsBH,OAAO;AAAA;AAEb;"}
+{"version":3,"file":"storybook-util.js","sources":["../src/storybook-util.ts"],"sourcesContent":["import './icons/icon-01-placeholder';\nimport './icons/icon-01-search';\nimport './icons/icon-06-radar';\nimport './icons/icon-04-day';\nimport './icons/icon-04-brilliance-low';\nimport './icons/icon-04-brilliance-high';\nimport './icons/icon-06-ship';\nimport {HTMLTemplateResult, TemplateResult, html} from 'lit';\nimport {spread} from '@open-wc/lit-helpers';\n\nexport const iconIds = [\n  '01-placeholder',\n  '01-search',\n  '04-brilliance-low',\n  '04-brilliance-high',\n  '06-radar',\n  '04-day',\n  '06-ship',\n].sort();\n\nexport function iconIdToIconHtml(\n  id: string,\n  attributes: Record<string, string> = {}\n): TemplateResult {\n  switch (id) {\n    case '01-placeholder':\n      return html`<obi-01-placeholder\n        ${spread(attributes)}\n      ></obi-01-placeholder>`;\n    case '01-search':\n      return html`<obi-01-search ${spread(attributes)}></obi-01-search>`;\n    case '04-day':\n      return html`<obi-04-day ${spread(attributes)}></obi-04-day>`;\n    case '04-brilliance-low':\n      return html`<obi-04-brilliance-low\n        ${spread(attributes)}\n      ></obi-04-brilliance-low>`;\n    case '04-brilliance-high':\n      return html`<obi-04-brilliance-high\n        ${spread(attributes)}\n      ></obi-04-brilliance-high>`;\n    case '06-radar':\n      return html`<obi-06-radar ${spread(attributes)}></obi-06-radar>`;\n    case '06-ship':\n      return html`<obi-06-ship ${spread(attributes)}></obi-06-ship>`;\n    default:\n      throw new Error(`Unknown icon id: ${id}`);\n  }\n}\n\nexport function crossDecorator(story: () => unknown): HTMLTemplateResult {\n  return html` <style>\n      .wrapper {\n        width: 100%;\n        height: 100vh;\n        position: relative;\n      }\n\n      .wrapper > * {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n      }\n\n      .wrapper::before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 1px;\n        left: calc(50% - 0.5px);\n        background-color: rgb(0, 0, 0, 0.3);\n      }\n\n      .wrapper::after {\n        content: '';\n        display: block;\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1px;\n        top: calc(50% - 0.5px);\n        background-color: rgb(0, 0, 0, 0.3);\n        z-index: -100;\n      }\n    </style>\n    <div class=\"wrapper\">${story()}</div>`;\n}\n\nexport function widthDecorator(\n  story: () => unknown,\n  context: {args: {width: number; height?: number}}\n): HTMLTemplateResult {\n  const width = context.args.width;\n  const height = context.args.height ?? width;\n  return html` <div\n    class=\"wrapper\"\n    style=\"width: ${width}px; height: ${height}px\"\n  >\n    ${story()}\n  </div>`;\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK;AAEA,SAAS,iBACd,IACA,aAAqC,IACrB;AAChB,UAAQ,IAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,sBAAsB,OAAO,UAAU,CAAC;AAAA,IACjD,KAAK;AACI,aAAA,mBAAmB,OAAO,UAAU,CAAC;AAAA,IAC9C,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA;AAAA,UACH,OAAO,UAAU,CAAC;AAAA;AAAA,IAExB,KAAK;AACI,aAAA,qBAAqB,OAAO,UAAU,CAAC;AAAA,IAChD,KAAK;AACI,aAAA,oBAAoB,OAAO,UAAU,CAAC;AAAA,IAC/C;AACE,YAAM,IAAI,MAAM,oBAAoB,EAAE,EAAE;AAAA,EAC5C;AACF;AAEO,SAAS,eAAe,OAA0C;AAChE,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAoCkB,OAAO;AAClC;AAEgB,SAAA,eACd,OACA,SACoB;AACd,QAAA,QAAQ,QAAQ,KAAK;AACrB,QAAA,SAAS,QAAQ,KAAK,UAAU;AAC/B,SAAA;AAAA;AAAA,oBAEW,KAAK,eAAe,MAAM;AAAA;AAAA,MAExC,OAAO;AAAA;AAEb;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.15-dev-20241113182547",
+  "version": "0.0.15-dev-20241119201940",
   "type": "module",
   "repository": {
     "type": "git",
@@ -42,18 +42,18 @@
     "@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/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
+    "@storybook/addon-storysource": "^8.4.4",
+    "@storybook/addon-themes": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/manager-api": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@storybook/test-runner": "^0.17.0",
-    "@storybook/theming": "^8.2.9",
-    "@storybook/web-components": "^8.2.9",
-    "@storybook/web-components-vite": "^8.2.9",
+    "@storybook/theming": "^8.4.4",
+    "@storybook/web-components": "^8.4.4",
+    "@storybook/web-components-vite": "^8.4.4",
     "@topcli/prompts": "^1.8.0",
     "@types/jest-image-snapshot": "^6",
     "@types/node": "^22.4.1",
@@ -72,7 +72,8 @@
     "prettier": "^3.1.1",
     "release-it": "^17.1.1",
     "rollup-plugin-postcss-lit": "^2.1.0",
-    "storybook": "^8.2.9",
+    "storybook": "^8.4.4",
+    "storybook-addon-tag-badges": "^1.2.0",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
     "vite": "^5.2.7",

package/src/automation/automation-button/automation-button.stories.ts

@@ -70,6 +70,10 @@ const meta: Meta<typeof ObcAutomationButton> = {
     labelSize: 'regular',
     labelStyle: 'regular',
   },
+  parameters: {
+    // Overrides the default behavior and pauses the animation at the first frame at the component level for all stories.
+    chromatic: {pauseAnimationAtEnd: false},
+  },
 } satisfies Meta<ObcAutomationButton>;
 
 export default meta;

package/src/components/top-bar/top-bar.stories.ts

@@ -16,6 +16,7 @@ const meta: Meta<typeof ObcTopBar> = {
   component: 'obc-top-bar',
   parameters: {
     layout: 'fullscreen',
+    chromatic: {pauseAnimationAtEnd: false},
   },
   args: {
     showAppsButton: true,

package/src/icons.stories.ts

@@ -51,6 +51,9 @@ export const List: Story = {
       </div>
     `;
   },
+  parameters: {
+    chromatic: {disableSnapshot: true},
+  },
 };
 
 export const UseFontColor: Story = {

package/src/navigation-instruments/azimuth-thruster/azimuth-thruster.stories.ts

@@ -2,13 +2,13 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcAzimuthThruster} from './azimuth-thruster';
 import './azimuth-thruster';
 import {InstrumentState, Size} from '../types';
-import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {widthDecorator} from '../../storybook-util';
 import {AdviceType} from '../watch/advice';
 import {PropellerType} from '../thruster/propeller';
 
 const meta: Meta<typeof ObcAzimuthThruster> = {
   title: 'Navigation instruments/Azimuth thruster',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-azimuth-thruster',
   argTypes: {
     thrust: {control: {type: 'range', min: -100, max: 100, step: 1}},
@@ -32,7 +32,7 @@ const meta: Meta<typeof ObcAzimuthThruster> = {
     autoAtAngleSetpointDeadband: 2,
     thrustSetpointAtZeroDeadband: 0.1,
   },
-  decorators: [widthDecorator, beta6Decorator],
+  decorators: [widthDecorator],
 } satisfies Meta<ObcAzimuthThruster>;
 
 export default meta;

package/src/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.stories.ts

@@ -6,12 +6,12 @@ import {
 import './azimuth-thruster-labeled';
 import {CommandStatus} from '../badge-command/badge-command';
 import {AdviceType} from '../watch/advice';
-import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {widthDecorator} from '../../storybook-util';
 import {PropellerType} from '../thruster/propeller';
 
 const meta: Meta<typeof ObcAzimuthThrusterLabeled> = {
   title: 'Navigation instruments/Azimuth thruster labeled',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-azimuth-thruster-labeled',
   args: {
     angle: 30,
@@ -29,7 +29,7 @@ const meta: Meta<typeof ObcAzimuthThrusterLabeled> = {
       {min: -100, max: -75, type: AdviceType.caution, hinted: true},
     ],
   },
-  decorators: [widthDecorator, beta6Decorator],
+  decorators: [widthDecorator],
   argTypes: {
     commandStatus: {
       options: Object.values(CommandStatus),

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

@@ -1,12 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcCompass} from './compass';
 import './compass';
-import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {widthDecorator} from '../../storybook-util';
 import {AdviceType} from '../watch/advice';
 
 const meta: Meta<typeof ObcCompass> = {
   title: 'Navigation Instruments/Compass',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-compass',
   args: {
     width: 512,
@@ -26,7 +26,7 @@ const meta: Meta<typeof ObcCompass> = {
     heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
     courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
   },
-  decorators: [widthDecorator, beta6Decorator],
+  decorators: [widthDecorator],
 } satisfies Meta<ObcCompass>;
 
 export default meta;

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

@@ -1,11 +1,11 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcCompassFlat} from './compass-flat';
 import './compass-flat';
-import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {widthDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcCompassFlat> = {
   title: 'Navigation Instruments/Compass flat',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-compass-flat',
   args: {
     width: 512,
@@ -21,7 +21,7 @@ const meta: Meta<typeof ObcCompassFlat> = {
     heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
     courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
   },
-  decorators: [widthDecorator, beta6Decorator],
+  decorators: [widthDecorator],
 } satisfies Meta<ObcCompassFlat>;
 
 export default meta;

package/src/navigation-instruments/main-engine/main-engine.stories.ts

@@ -1,12 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcMainEngine} from './main-engine';
 import './main-engine';
-import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {widthDecorator} from '../../storybook-util';
 import {InstrumentState} from '../types';
 
 const meta: Meta<typeof ObcMainEngine> = {
   title: 'Navigation instruments/Main Engine',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-main-engine',
   args: {
     width: 352,
@@ -25,7 +25,7 @@ const meta: Meta<typeof ObcMainEngine> = {
       options: Object.values(InstrumentState),
     },
   },
-  decorators: [widthDecorator, beta6Decorator],
+  decorators: [widthDecorator],
 } satisfies Meta<ObcMainEngine>;
 
 export default meta;

package/src/navigation-instruments/poi-graphic-line/poi-graphic-line.stories.ts

@@ -2,11 +2,10 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcPoiGraphicLine} from './poi-graphic-line';
 import './poi-graphic-line';
 import {POIStyle} from './poi-config';
-import {beta6Decorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcPoiGraphicLine> = {
   title: 'Building blocks/POI Graphic Line',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-poi-graphic-line',
   argTypes: {
     lineStyle: {
@@ -22,7 +21,7 @@ const meta: Meta<typeof ObcPoiGraphicLine> = {
     height: 100,
     lineStyle: POIStyle.Enhanced,
   },
-  decorators: [beta6Decorator],
+  decorators: [],
 } satisfies Meta<ObcPoiGraphicLine>;
 
 export default meta;

package/src/navigation-instruments/poi-line/poi-line.stories.ts

@@ -2,11 +2,10 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcPoiLine} from './poi-line';
 import './poi-line';
 import {POIStyle} from '../poi-graphic-line/poi-config';
-import {beta6Decorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcPoiLine> = {
   title: 'Building blocks/POI Line',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-poi-line',
   argTypes: {
     lineStyle: {
@@ -19,8 +18,6 @@ const meta: Meta<typeof ObcPoiLine> = {
     lineStyle: POIStyle.Enhanced,
     height: 100,
   },
-
-  decorators: [beta6Decorator],
 } satisfies Meta<ObcPoiLine>;
 
 export default meta;

package/src/navigation-instruments/poi-target/poi-target.stories.ts

@@ -1,11 +1,10 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcPoiTarget, Pointer} from './poi-target';
 import './poi-target';
-import {beta6Decorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcPoiTarget> = {
   title: 'Navigation Instruments/POI Target',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-poi-target',
   args: {
     height: 188,
@@ -32,7 +31,6 @@ const meta: Meta<typeof ObcPoiTarget> = {
       control: {type: 'range', min: 0, max: 360},
     },
   },
-  decorators: [beta6Decorator],
 } satisfies Meta<ObcPoiTarget>;
 
 export default meta;

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

@@ -1,11 +1,11 @@
 import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcRudder} from './rudder';
 import './rudder';
-import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {widthDecorator} from '../../storybook-util';
 
 const meta: Meta<typeof ObcRudder> = {
   title: 'Navigation Instruments/Rudder',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-rudder',
   args: {
     width: 512,
@@ -19,7 +19,7 @@ const meta: Meta<typeof ObcRudder> = {
     maxAngle: {control: {type: 'range', min: 1, max: 90, step: 1}},
     setpoint: {control: {type: 'range', min: -90, max: 90, step: 1}},
   },
-  decorators: [widthDecorator, beta6Decorator],
+  decorators: [widthDecorator],
 } satisfies Meta<ObcRudder>;
 
 export default meta;

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

@@ -2,13 +2,13 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcThruster} from './thruster';
 import './thruster';
 import {InstrumentState} from '../types';
-import {beta6Decorator, widthDecorator} from '../../storybook-util';
+import {widthDecorator} from '../../storybook-util';
 import {AdviceType} from '../watch/advice';
 import {PropellerType} from './propeller';
 
 const meta: Meta<typeof ObcThruster> = {
   title: 'Navigation instruments/Thruster',
-  tags: ['autodocs'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-thruster',
   args: {width: 320},
   argTypes: {
@@ -25,7 +25,7 @@ const meta: Meta<typeof ObcThruster> = {
       options: Object.values(PropellerType),
     },
   },
-  decorators: [widthDecorator, beta6Decorator],
+  decorators: [widthDecorator],
 } satisfies Meta<ObcThruster>;
 
 export default meta;

package/src/storybook-util.ts

@@ -101,30 +101,3 @@ export function widthDecorator(
     ${story()}
   </div>`;
 }
-
-export function beta6Decorator(story: () => unknown): HTMLTemplateResult {
-  return html`
-    <div
-      style="
-  border-radius: 100px; 
-  background-color: var(--instrument-enhanced-primary-color); 
-  color: var(--instrument-frame-primary-color); 
-  height: 32px; 
-  padding: 0 24px; 
-  box-sizing: border-box; 
-  width: fit-content; 
-  display: grid; 
-  place-content: center;
-  font-family: 'Noto Sans';
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 570;
-  line-height: 24px; /* 150% */
-  margin-bottom: 64px;
-"
-    >
-      Beta 6.0
-    </div>
-    ${story()}
-  `;
-}