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

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,EAAA;AAE9C;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,MAAO,CAAA;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,MAAO,CAAA;AAAA;AAEb;"}

package/dist/svghelpers/circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"circle.js","sources":["../../src/svghelpers/circle.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport function circle(\n  id: string,\n  data: {\n    radius: number;\n    strokeWidth: number;\n    strokeColor: string;\n    strokePosition: 'inside' | 'outside' | 'center';\n    fillColor: string;\n  }\n) {\n  if (data.strokePosition === 'center') {\n    return svg`<circle id=${id} cx=\"0\" cy=\"0\" \n      r=${data.radius} vector-effect=\"non-scaling-stroke\" \n      stroke=${data.strokeColor}  stroke-width=${data.strokeWidth} \n      fill=${data.fillColor}>`;\n  } else if (data.strokePosition === 'inside') {\n    return svg`\n\t\t<defs>\n\t\t\t<clipPath id=\"clip${id}\">\n\t\t\t\t<circle id=${id} cx=\"0\" cy=\"0\" r=${\n          data.radius\n        } vector-effect=\"non-scaling-stroke\" />\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<g>\n\t\t\t<circle id=${id} cx=\"0\" cy=\"0\" r=${\n        data.radius\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</g>\n  `;\n  } else {\n    return svg`\n\t\t<circle id=${id} cx=\"0\" cy=\"0\" r=${\n      data.radius\n    } vector-effect=\"non-scaling-stroke\" stroke=${\n      data.strokeColor\n    } stroke-width=${data.strokeWidth * 2} fill=${data.fillColor}/>\n\t\t  `;\n  }\n}\n\nexport function ringOutside(\n  id: string,\n  data: {radius: number; strokeWidth: number; strokeColor: string}\n) {\n  return svg`\n\t\t<defs>\n\t\t\t\t<mask id=\"${id}\">\n\t\t\t\t\t<rect x=\"-50%\" y=\"-50%\" width=\"100%\" height=\"100%\" fill=\"white\" />\n\t\t\t\t\t<circle cx=\"0\" cy=\"0\" r=${data.radius} fill=\"black\" />\n\t\t\t\t</mask>\n\t\t</defs>\n  \t\t<circle  cx=\"0\" cy=\"0\" r=${data.radius} stroke-width=${\n        data.strokeWidth * 2\n      } fill=\"none\" stroke=${\n        data.strokeColor\n      }  vector-effect=\"non-scaling-stroke\" mask=\"url(#${id})\" />\n\t`;\n}\n"],"names":[],"mappings":";AAEgB,SAAA,OACd,IACA,MAOA;AACI,MAAA,KAAK,mBAAmB,UAAU;AACpC,WAAO,iBAAiB,EAAE;AAAA,UACpB,KAAK,MAAM;AAAA,eACN,KAAK,WAAW,kBAAkB,KAAK,WAAW;AAAA,aACpD,KAAK,SAAS;AAAA,EAAA,WACd,KAAK,mBAAmB,UAAU;AACpC,WAAA;AAAA;AAAA,uBAEY,EAAE;AAAA,iBACR,EAAE,oBACT,KAAK,MACP;AAAA;AAAA;AAAA;AAAA,gBAIQ,EAAE,oBACV,KAAK,MACP,8CACE,KAAK,WACP,kBAAkB,KAAK,cAAc,CAAC,SACpC,KAAK,SACP,wBAAwB,EAAE;AAAA;AAAA;AAAA,EAAA,OAGvB;AACE,WAAA;AAAA,eACI,EAAE,oBACX,KAAK,MACP,8CACE,KAAK,WACP,iBAAiB,KAAK,cAAc,CAAC,SAAS,KAAK,SAAS;AAAA;AAAA,EAE9D;AACF;AAEgB,SAAA,YACd,IACA,MACA;AACO,SAAA;AAAA;AAAA,gBAEO,EAAE;AAAA;AAAA,+BAEa,KAAK,MAAM;AAAA;AAAA;AAAA,+BAGX,KAAK,MAAM,iBAClC,KAAK,cAAc,CACrB,uBACE,KAAK,WACP,mDAAmD,EAAE;AAAA;AAE3D;"}
+{"version":3,"file":"circle.js","sources":["../../src/svghelpers/circle.ts"],"sourcesContent":["import {svg} from 'lit';\n\nexport function circle(\n  id: string,\n  data: {\n    radius: number;\n    strokeWidth: number;\n    strokeColor: string;\n    strokePosition: 'inside' | 'outside' | 'center';\n    fillColor: string;\n  }\n) {\n  if (data.strokePosition === 'center') {\n    return svg`<circle id=${id} cx=\"0\" cy=\"0\" \n      r=${data.radius} vector-effect=\"non-scaling-stroke\" \n      stroke=${data.strokeColor}  stroke-width=${data.strokeWidth} \n      fill=${data.fillColor}>`;\n  } else if (data.strokePosition === 'inside') {\n    return svg`\n\t\t<defs>\n\t\t\t<clipPath id=\"clip${id}\">\n\t\t\t\t<circle id=${id} cx=\"0\" cy=\"0\" r=${\n          data.radius\n        } vector-effect=\"non-scaling-stroke\" />\n\t\t\t</clipPath>\n\t\t</defs>\n\t\t<g>\n\t\t\t<circle id=${id} cx=\"0\" cy=\"0\" r=${\n        data.radius\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</g>\n  `;\n  } else {\n    return svg`\n\t\t<circle id=${id} cx=\"0\" cy=\"0\" r=${\n      data.radius\n    } vector-effect=\"non-scaling-stroke\" stroke=${\n      data.strokeColor\n    } stroke-width=${data.strokeWidth * 2} fill=${data.fillColor}/>\n\t\t  `;\n  }\n}\n\nexport function ringOutside(\n  id: string,\n  data: {radius: number; strokeWidth: number; strokeColor: string}\n) {\n  return svg`\n\t\t<defs>\n\t\t\t\t<mask id=\"${id}\">\n\t\t\t\t\t<rect x=\"-50%\" y=\"-50%\" width=\"100%\" height=\"100%\" fill=\"white\" />\n\t\t\t\t\t<circle cx=\"0\" cy=\"0\" r=${data.radius} fill=\"black\" />\n\t\t\t\t</mask>\n\t\t</defs>\n  \t\t<circle  cx=\"0\" cy=\"0\" r=${data.radius} stroke-width=${\n        data.strokeWidth * 2\n      } fill=\"none\" stroke=${\n        data.strokeColor\n      }  vector-effect=\"non-scaling-stroke\" mask=\"url(#${id})\" />\n\t`;\n}\n"],"names":[],"mappings":";AAEgB,SAAA,OACd,IACA,MAOA;AACI,MAAA,KAAK,mBAAmB,UAAU;AACpC,WAAO,iBAAiB,EAAE;AAAA,UACpB,KAAK,MAAM;AAAA,eACN,KAAK,WAAW,kBAAkB,KAAK,WAAW;AAAA,aACpD,KAAK,SAAS;AAAA,EAAA,WACd,KAAK,mBAAmB,UAAU;AACpC,WAAA;AAAA;AAAA,uBAEY,EAAE;AAAA,iBACR,EAAE,oBACT,KAAK,MACP;AAAA;AAAA;AAAA;AAAA,gBAIQ,EAAE,oBACV,KAAK,MACP,8CACE,KAAK,WACP,kBAAkB,KAAK,cAAc,CAAC,SACpC,KAAK,SACP,wBAAwB,EAAE;AAAA;AAAA;AAAA,EAAA,OAGvB;AACE,WAAA;AAAA,eACI,EAAE,oBACX,KAAK,MACP,8CACE,KAAK,WACP,iBAAiB,KAAK,cAAc,CAAC,SAAS,KAAK,SAAS;AAAA;AAAA,EAAA;AAGhE;AAEgB,SAAA,YACd,IACA,MACA;AACO,SAAA;AAAA;AAAA,gBAEO,EAAE;AAAA;AAAA,+BAEa,KAAK,MAAM;AAAA;AAAA;AAAA,+BAGX,KAAK,MAAM,iBAClC,KAAK,cAAc,CACrB,uBACE,KAAK,WACP,mDAAmD,EAAE;AAAA;AAE3D;"}

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';\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,EAAA;AAEX;"}

package/dist/svghelpers/roundedArch.js.map

@@ -1 +1 @@
-{"version":3,"file":"roundedArch.js","sources":["../../src/svghelpers/roundedArch.ts"],"sourcesContent":["export function roundedArch({\n  startAngle,\n  endAngle,\n  r,\n  R,\n  roundOutsideCut,\n  roundInsideCut,\n}: {\n  startAngle: number;\n  R: number;\n  r: number;\n  endAngle: number;\n  roundOutsideCut: boolean;\n  roundInsideCut: boolean;\n}) {\n  const a1 = (startAngle * Math.PI) / 180;\n  const a2 = (endAngle * Math.PI) / 180;\n\n  const X1 = Math.sin(a1) * R;\n  const Y1 = -Math.cos(a1) * R;\n  const x1 = Math.sin(a1) * r;\n  const y1 = -Math.cos(a1) * r;\n  const X2 = Math.sin(a2) * R;\n  const Y2 = -Math.cos(a2) * R;\n  const x2 = Math.sin(a2) * r;\n  const y2 = -Math.cos(a2) * r;\n  const roundRadius = 8;\n\n  let svgPath = '';\n  if (roundOutsideCut) {\n    const roundDeltaAngle = Math.asin(roundRadius / R);\n    const largeArcFlag =\n      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;\n    const x1i = Math.sin(a1) * (R - roundRadius);\n    const y1i = -Math.cos(a1) * (R - roundRadius);\n    const x1o = Math.sin(a1 + roundDeltaAngle) * R;\n    const y1o = -Math.cos(a1 + roundDeltaAngle) * R;\n    const x2i = Math.sin(a2) * (R - roundRadius);\n    const y2i = -Math.cos(a2) * (R - roundRadius);\n    const x2o = Math.sin(a2 - roundDeltaAngle) * R;\n    const y2o = -Math.cos(a2 - roundDeltaAngle) * R;\n    // Rounded start\n    svgPath += `M ${x1i} ${y1i} A ${roundRadius} ${roundRadius} 1 0 1 ${x1o} ${y1o}`;\n    // Arch\n    svgPath += `A ${R} ${R} 1 ${largeArcFlag} 1 ${x2o} ${y2o}`;\n    // Rounded end\n    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x2i} ${y2i}`;\n  } else {\n    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;\n    svgPath += `M ${X1} ${Y1} A ${R} ${R} 1 ${largeArcFlag} 1 ${X2} ${Y2}`;\n  }\n\n  if (roundInsideCut) {\n    const roundDeltaAngle = Math.asin(roundRadius / r);\n    const largeArcFlag =\n      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;\n    const x1i = Math.sin(a1) * (r + roundRadius);\n    const y1i = -Math.cos(a1) * (r + roundRadius);\n    const x1o = Math.sin(a1 + roundDeltaAngle) * r;\n    const y1o = -Math.cos(a1 + roundDeltaAngle) * r;\n    const x2i = Math.sin(a2) * (r + roundRadius);\n    const y2i = -Math.cos(a2) * (r + roundRadius);\n    const x2o = Math.sin(a2 - roundDeltaAngle) * r;\n    const y2o = -Math.cos(a2 - roundDeltaAngle) * r;\n    // Rounded start\n    svgPath += `L ${x2i} ${y2i} A ${roundRadius} ${roundRadius} 1 0 1 ${x2o} ${y2o}`;\n    // Arch\n    svgPath += `A ${r} ${r} 1 ${largeArcFlag} 0 ${x1o} ${y1o}`;\n    // Rounded end\n    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x1i} ${y1i}`;\n  } else {\n    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;\n    svgPath += `L ${x2} ${y2} A ${r} ${r} 1 ${largeArcFlag} 0 ${x1} ${y1}`;\n  }\n  svgPath += `Z`;\n  return svgPath;\n}\n"],"names":[],"mappings":"AAAO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACK,QAAA,KAAM,aAAa,KAAK,KAAM;AAC9B,QAAA,KAAM,WAAW,KAAK,KAAM;AAElC,QAAM,KAAK,KAAK,IAAI,EAAE,IAAI;AAC1B,QAAM,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI;AAC3B,QAAM,KAAK,KAAK,IAAI,EAAE,IAAI;AAC1B,QAAM,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI;AAC3B,QAAM,KAAK,KAAK,IAAI,EAAE,IAAI;AAC1B,QAAM,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI;AAC3B,QAAM,KAAK,KAAK,IAAI,EAAE,IAAI;AAC1B,QAAM,KAAK,CAAC,KAAK,IAAI,EAAE,IAAI;AAC3B,QAAM,cAAc;AAEpB,MAAI,UAAU;AACd,MAAI,iBAAiB;AACnB,UAAM,kBAAkB,KAAK,KAAK,cAAc,CAAC;AACjD,UAAM,eACJ,KAAK,mBAAmB,KAAK,oBAAoB,KAAK,KAAK,IAAI;AACjE,UAAM,MAAM,KAAK,IAAI,EAAE,KAAK,IAAI;AAChC,UAAM,MAAM,CAAC,KAAK,IAAI,EAAE,KAAK,IAAI;AACjC,UAAM,MAAM,KAAK,IAAI,KAAK,eAAe,IAAI;AAC7C,UAAM,MAAM,CAAC,KAAK,IAAI,KAAK,eAAe,IAAI;AAC9C,UAAM,MAAM,KAAK,IAAI,EAAE,KAAK,IAAI;AAChC,UAAM,MAAM,CAAC,KAAK,IAAI,EAAE,KAAK,IAAI;AACjC,UAAM,MAAM,KAAK,IAAI,KAAK,eAAe,IAAI;AAC7C,UAAM,MAAM,CAAC,KAAK,IAAI,KAAK,eAAe,IAAI;AAEnC,eAAA,KAAK,GAAG,IAAI,GAAG,MAAM,WAAW,IAAI,WAAW,UAAU,GAAG,IAAI,GAAG;AAEnE,eAAA,KAAK,CAAC,IAAI,CAAC,MAAM,YAAY,MAAM,GAAG,IAAI,GAAG;AAExD,eAAW,KAAK,WAAW,IAAI,WAAW,UAAU,GAAG,IAAI,GAAG;AAAA,EAAA,OACzD;AACL,UAAM,eAAe,KAAK,MAAM,KAAK,KAAK,IAAI;AAC9C,eAAW,KAAK,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,YAAY,MAAM,EAAE,IAAI,EAAE;AAAA,EACtE;AAEA,MAAI,gBAAgB;AAClB,UAAM,kBAAkB,KAAK,KAAK,cAAc,CAAC;AACjD,UAAM,eACJ,KAAK,mBAAmB,KAAK,oBAAoB,KAAK,KAAK,IAAI;AACjE,UAAM,MAAM,KAAK,IAAI,EAAE,KAAK,IAAI;AAChC,UAAM,MAAM,CAAC,KAAK,IAAI,EAAE,KAAK,IAAI;AACjC,UAAM,MAAM,KAAK,IAAI,KAAK,eAAe,IAAI;AAC7C,UAAM,MAAM,CAAC,KAAK,IAAI,KAAK,eAAe,IAAI;AAC9C,UAAM,MAAM,KAAK,IAAI,EAAE,KAAK,IAAI;AAChC,UAAM,MAAM,CAAC,KAAK,IAAI,EAAE,KAAK,IAAI;AACjC,UAAM,MAAM,KAAK,IAAI,KAAK,eAAe,IAAI;AAC7C,UAAM,MAAM,CAAC,KAAK,IAAI,KAAK,eAAe,IAAI;AAEnC,eAAA,KAAK,GAAG,IAAI,GAAG,MAAM,WAAW,IAAI,WAAW,UAAU,GAAG,IAAI,GAAG;AAEnE,eAAA,KAAK,CAAC,IAAI,CAAC,MAAM,YAAY,MAAM,GAAG,IAAI,GAAG;AAExD,eAAW,KAAK,WAAW,IAAI,WAAW,UAAU,GAAG,IAAI,GAAG;AAAA,EAAA,OACzD;AACL,UAAM,eAAe,KAAK,MAAM,KAAK,KAAK,IAAI;AAC9C,eAAW,KAAK,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,YAAY,MAAM,EAAE,IAAI,EAAE;AAAA,EACtE;AACW,aAAA;AACJ,SAAA;AACT;"}
+{"version":3,"file":"roundedArch.js","sources":["../../src/svghelpers/roundedArch.ts"],"sourcesContent":["export function roundedArch({\n  startAngle,\n  endAngle,\n  r,\n  R,\n  roundOutsideCut,\n  roundInsideCut,\n}: {\n  startAngle: number;\n  R: number;\n  r: number;\n  endAngle: number;\n  roundOutsideCut: boolean;\n  roundInsideCut: boolean;\n}) {\n  const a1 = (startAngle * Math.PI) / 180;\n  const a2 = (endAngle * Math.PI) / 180;\n\n  const X1 = Math.sin(a1) * R;\n  const Y1 = -Math.cos(a1) * R;\n  const x1 = Math.sin(a1) * r;\n  const y1 = -Math.cos(a1) * r;\n  const X2 = Math.sin(a2) * R;\n  const Y2 = -Math.cos(a2) * R;\n  const x2 = Math.sin(a2) * r;\n  const y2 = -Math.cos(a2) * r;\n  const roundRadius = 8;\n\n  let svgPath = '';\n  if (roundOutsideCut) {\n    const roundDeltaAngle = Math.asin(roundRadius / R);\n    const largeArcFlag =\n      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;\n    const x1i = Math.sin(a1) * (R - roundRadius);\n    const y1i = -Math.cos(a1) * (R - roundRadius);\n    const x1o = Math.sin(a1 + roundDeltaAngle) * R;\n    const y1o = -Math.cos(a1 + roundDeltaAngle) * R;\n    const x2i = Math.sin(a2) * (R - roundRadius);\n    const y2i = -Math.cos(a2) * (R - roundRadius);\n    const x2o = Math.sin(a2 - roundDeltaAngle) * R;\n    const y2o = -Math.cos(a2 - roundDeltaAngle) * R;\n    // Rounded start\n    svgPath += `M ${x1i} ${y1i} A ${roundRadius} ${roundRadius} 1 0 1 ${x1o} ${y1o}`;\n    // Arch\n    svgPath += `A ${R} ${R} 1 ${largeArcFlag} 1 ${x2o} ${y2o}`;\n    // Rounded end\n    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x2i} ${y2i}`;\n  } else {\n    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;\n    svgPath += `M ${X1} ${Y1} A ${R} ${R} 1 ${largeArcFlag} 1 ${X2} ${Y2}`;\n  }\n\n  if (roundInsideCut) {\n    const roundDeltaAngle = Math.asin(roundRadius / r);\n    const largeArcFlag =\n      a2 - roundDeltaAngle - (a1 + roundDeltaAngle) <= Math.PI ? 0 : 1;\n    const x1i = Math.sin(a1) * (r + roundRadius);\n    const y1i = -Math.cos(a1) * (r + roundRadius);\n    const x1o = Math.sin(a1 + roundDeltaAngle) * r;\n    const y1o = -Math.cos(a1 + roundDeltaAngle) * r;\n    const x2i = Math.sin(a2) * (r + roundRadius);\n    const y2i = -Math.cos(a2) * (r + roundRadius);\n    const x2o = Math.sin(a2 - roundDeltaAngle) * r;\n    const y2o = -Math.cos(a2 - roundDeltaAngle) * r;\n    // Rounded start\n    svgPath += `L ${x2i} ${y2i} A ${roundRadius} ${roundRadius} 1 0 1 ${x2o} ${y2o}`;\n    // Arch\n    svgPath += `A ${r} ${r} 1 ${largeArcFlag} 0 ${x1o} ${y1o}`;\n    // Rounded end\n    svgPath += `A ${roundRadius} ${roundRadius} 1 0 1 ${x1i} ${y1i}`;\n  } else {\n    const largeArcFlag = a2 - a1 <= Math.PI ? 0 : 1;\n    svgPath += `L ${x2} ${y2} A ${r} ${r} 1 ${largeArcFlag} 0 ${x1} ${y1}`;\n  }\n  svgPath += `Z`;\n  return svgPath;\n}\n"],"names":[],"mappings":"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"}

package/dist/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","sources":["../src/time.ts"],"sourcesContent":["import {html} from 'lit';\n\nexport function renderTime(date: Date) {\n  const hours = date.getHours();\n  const minutes = date.getMinutes();\n  const seconds = date.getSeconds();\n  const hoursString = hours < 10 ? `0${hours}` : `${hours}`;\n  const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;\n  const secondsString = seconds < 10 ? `0${seconds}` : `${seconds}`;\n\n  return html`\n    ${hoursString}<span class=\"time-divider\">:</span> ${minutesString}<span\n      class=\"time-divider\"\n      >:</span\n    >\n    ${secondsString}\n  `;\n}\n"],"names":[],"mappings":";AAEO,SAAS,WAAW,MAAY;AAC/B,QAAA,QAAQ,KAAK;AACb,QAAA,UAAU,KAAK;AACf,QAAA,UAAU,KAAK;AACrB,QAAM,cAAc,QAAQ,KAAK,IAAI,KAAK,KAAK,GAAG,KAAK;AACvD,QAAM,gBAAgB,UAAU,KAAK,IAAI,OAAO,KAAK,GAAG,OAAO;AAC/D,QAAM,gBAAgB,UAAU,KAAK,IAAI,OAAO,KAAK,GAAG,OAAO;AAExD,SAAA;AAAA,MACH,WAAW,uCAAuC,aAAa;AAAA;AAAA;AAAA;AAAA,MAI/D,aAAa;AAAA;AAEnB;"}
+{"version":3,"file":"time.js","sources":["../src/time.ts"],"sourcesContent":["import {html} from 'lit';\n\nexport function renderTime(date: Date) {\n  const hours = date.getHours();\n  const minutes = date.getMinutes();\n  const seconds = date.getSeconds();\n  const hoursString = hours < 10 ? `0${hours}` : `${hours}`;\n  const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`;\n  const secondsString = seconds < 10 ? `0${seconds}` : `${seconds}`;\n\n  return html`\n    ${hoursString}<span class=\"time-divider\">:</span> ${minutesString}<span\n      class=\"time-divider\"\n      >:</span\n    >\n    ${secondsString}\n  `;\n}\n"],"names":[],"mappings":";AAEO,SAAS,WAAW,MAAY;AAC/B,QAAA,QAAQ,KAAK,SAAS;AACtB,QAAA,UAAU,KAAK,WAAW;AAC1B,QAAA,UAAU,KAAK,WAAW;AAChC,QAAM,cAAc,QAAQ,KAAK,IAAI,KAAK,KAAK,GAAG,KAAK;AACvD,QAAM,gBAAgB,UAAU,KAAK,IAAI,OAAO,KAAK,GAAG,OAAO;AAC/D,QAAM,gBAAgB,UAAU,KAAK,IAAI,OAAO,KAAK,GAAG,OAAO;AAExD,SAAA;AAAA,MACH,WAAW,uCAAuC,aAAa;AAAA;AAAA;AAAA;AAAA,MAI/D,aAAa;AAAA;AAEnB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "0.0.15-dev-20241113182547",
+  "version": "0.0.15-dev-20241122185953",
   "type": "module",
   "repository": {
     "type": "git",
@@ -31,29 +31,29 @@
     "release": "release-it"
   },
   "dependencies": {
-    "@lit-labs/observers": "^2.0.2",
-    "lit": "^3.1.0"
+    "@lit-labs/observers": "^2.0.4",
+    "lit": "^3.2.1"
   },
   "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",
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@lit-labs/cli": "^0.6.5",
+    "@lit-labs/gen-wrapper-react": "^0.3.3",
+    "@lit-labs/gen-wrapper-vue": "^0.4.0",
     "@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()}
-  `;
-}