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

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration-vessel-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import '../../components/button/button.js';
+import '../../components/icon-button/icon-button.js';
+import '../../icons/icon-placeholder.js';
+import '../../building-blocks/alert-list/alert-list.js';
+/**
+ * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.
+ *
+ * @slot leading-icon - Icon shown in the header.
+ * @slot title - Header title text.
+ * @slot button-1-leading-icon - Leading icon for the first button.
+ * @slot button-1-label - Label for the first button.
+ * @slot button-2-leading-icon - Leading icon for the second button.
+ * @slot button-2-label - Label for the second button.
+ * @slot button-3-leading-icon - Leading icon for the third button.
+ * @slot button-3-label - Label for the third button.
+ * @slot content - Main content shown in the content area.
+ * @slot alarms - Alarm items rendered inside the alert list.
+ *
+ * @property {number} numberOfButtons - Number of buttons to render (up to 3).
+ *
+ * @fires button1-click - Fired when the first button is clicked.
+ * @fires button2-click - Fired when the second button is clicked.
+ * @fires button3-click - Fired when the third button is clicked.
+ */
+export declare class ObcIntegrationVesselMenu extends LitElement {
+    numberOfButtons: number;
+    private renderButtons;
+    protected render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-integration-vessel-menu': ObcIntegrationVesselMenu;
+    }
+}
+//# sourceMappingURL=integration-vessel-menu.d.ts.map

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration-vessel-menu.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,6CAA6C,CAAC;AACrD,OAAO,iCAAiC,CAAC;AACzC,OAAO,gDAAgD,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,qBACa,wBAAyB,SAAQ,UAAU;IAC5B,eAAe,SAAK;IAE9C,OAAO,CAAC,aAAa;cAmBF,MAAM;IAoBzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.js

@@ -0,0 +1,72 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement } from "../../decorator.js";
+import componentStyle from "./integration-vessel-menu.css.js";
+import "../../components/button/button.js";
+import "../../components/icon-button/icon-button.js";
+import "../../icons/icon-placeholder.js";
+import "../../building-blocks/alert-list/alert-list.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ObcIntegrationVesselMenu = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.numberOfButtons = 3;
+  }
+  renderButtons() {
+    return html`${Array.from({ length: this.numberOfButtons }, (_, i) => {
+      const buttonNum = i + 1;
+      return html`<obc-button
+        @click=${() => this.dispatchEvent(new CustomEvent(`button${buttonNum}-click`))}
+        ?showLeadingIcon=${true}
+        ?fullWidth=${true}
+        class="button"
+      >
+        <slot
+          name="button-${buttonNum}-leading-icon"
+          slot="leading-icon"
+        ></slot>
+        <slot name="button-${buttonNum}-label"></slot>
+      </obc-button>`;
+    })}`;
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      wrapper: true
+    })}
+      >
+        <div class="footer-container">${this.renderButtons()}</div>
+        <div class="content-area">
+          <slot name="content"></slot>
+        </div>
+        <div class="content-container">
+          <obc-alert-list class="alert-list"
+            ><slot name="alarms"> </slot>
+          </obc-alert-list>
+        </div>
+      </div>
+    `;
+  }
+};
+ObcIntegrationVesselMenu.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: Number })
+], ObcIntegrationVesselMenu.prototype, "numberOfButtons", 2);
+ObcIntegrationVesselMenu = __decorateClass([
+  customElement("obc-integration-vessel-menu")
+], ObcIntegrationVesselMenu);
+export {
+  ObcIntegrationVesselMenu
+};
+//# sourceMappingURL=integration-vessel-menu.js.map

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration-vessel-menu.js","sources":["../../../src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './integration-vessel-menu.css?inline';\n\nimport '../../components/button/button.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-placeholder.js';\nimport '../../building-blocks/alert-list/alert-list.js';\n\n/**\n * `<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.\n *\n * @slot leading-icon - Icon shown in the header.\n * @slot title - Header title text.\n * @slot button-1-leading-icon - Leading icon for the first button.\n * @slot button-1-label - Label for the first button.\n * @slot button-2-leading-icon - Leading icon for the second button.\n * @slot button-2-label - Label for the second button.\n * @slot button-3-leading-icon - Leading icon for the third button.\n * @slot button-3-label - Label for the third button.\n * @slot content - Main content shown in the content area.\n * @slot alarms - Alarm items rendered inside the alert list.\n *\n * @property {number} numberOfButtons - Number of buttons to render (up to 3).\n *\n * @fires button1-click - Fired when the first button is clicked.\n * @fires button2-click - Fired when the second button is clicked.\n * @fires button3-click - Fired when the third button is clicked.\n */\n\n@customElement('obc-integration-vessel-menu')\nexport class ObcIntegrationVesselMenu extends LitElement {\n  @property({type: Number}) numberOfButtons = 3;\n\n  private renderButtons() {\n    return html`${Array.from({length: this.numberOfButtons}, (_, i) => {\n      const buttonNum = i + 1;\n      return html`<obc-button\n        @click=${() =>\n          this.dispatchEvent(new CustomEvent(`button${buttonNum}-click`))}\n        ?showLeadingIcon=${true}\n        ?fullWidth=${true}\n        class=\"button\"\n      >\n        <slot\n          name=\"button-${buttonNum}-leading-icon\"\n          slot=\"leading-icon\"\n        ></slot>\n        <slot name=\"button-${buttonNum}-label\"></slot>\n      </obc-button>`;\n    })}`;\n  }\n\n  protected override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n        })}\n      >\n        <div class=\"footer-container\">${this.renderButtons()}</div>\n        <div class=\"content-area\">\n          <slot name=\"content\"></slot>\n        </div>\n        <div class=\"content-container\">\n          <obc-alert-list class=\"alert-list\"\n            ><slot name=\"alarms\"> </slot>\n          </obc-alert-list>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-vessel-menu': ObcIntegrationVesselMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAiCO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,kBAAkB;AAAA,EAAA;AAAA,EAEpC,gBAAgB;AACtB,WAAO,OAAO,MAAM,KAAK,EAAC,QAAQ,KAAK,gBAAA,GAAkB,CAAC,GAAG,MAAM;AACjE,YAAM,YAAY,IAAI;AACtB,aAAO;AAAA,iBACI,MACP,KAAK,cAAc,IAAI,YAAY,SAAS,SAAS,QAAQ,CAAC,CAAC;AAAA,2BAC9C,IAAI;AAAA,qBACV,IAAI;AAAA;AAAA;AAAA;AAAA,yBAIA,SAAS;AAAA;AAAA;AAAA,6BAGL,SAAS;AAAA;AAAA,IAElC,CAAC,CAAC;AAAA,EACJ;AAAA,EAEmB,SAAS;AAC1B,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,IAAA,CACV,CAAC;AAAA;AAAA,wCAE8B,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW1D;AAGF;AA3Ca,yBA0CK,SAAS,UAAU,cAAc;AAzCvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,yBACe,WAAA,mBAAA,CAAA;AADf,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}

package/dist/integration-systems/integration-vessel-selector/integration-vessel-selector.css.js

@@ -18,14 +18,27 @@ const compentStyle = css`
   width: 100%;
 }
 
-.wrapper .fleet-wrapper,.wrapper .vessel-wrapper {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: stretch;
-    padding: 4px;
-  }
+.wrapper .fleet-wrapper,
+.wrapper .vessel-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+.wrapper .fleet-wrapper {
+  padding: 4px 0;
+}
+
+.wrapper .vessel-wrapper {
+  padding: 0px 4px;
+}
+
+.wrapper .topbar-wrapper {
+  display: flex;
+  width: 100%;
+}
 `;
 export {
   compentStyle as default

package/dist/integration-systems/integration-vessel-selector/integration-vessel-selector.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-selector.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"integration-vessel-selector.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/integration-systems/integration-vessel-selector/integration-vessel-selector.d.ts

@@ -4,8 +4,10 @@ import { LitElement } from 'lit';
  *
  * @slot - The vessel to select.
  * @slot fleet - The fleet of vessels.
+ * @slot topbar - The top bar, displayed when `hasTopbar` is true.
  */
 export declare class ObcIntegrationVesselSelector extends LitElement {
+    hasTopbar: boolean;
     hasFleet: boolean;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;

package/dist/integration-systems/integration-vessel-selector/integration-vessel-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-selector.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-vessel-selector/integration-vessel-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD;;;;;GAKG;AACH,qBACa,4BAA6B,SAAQ,UAAU;IAC/B,QAAQ,UAAS;IAEnC,MAAM;IAaf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,4BAA4B,CAAC;KACjE;CACF"}
+{"version":3,"file":"integration-vessel-selector.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-vessel-selector/integration-vessel-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD;;;;;;GAMG;AACH,qBACa,4BAA6B,SAAQ,UAAU;IAC/B,SAAS,UAAS;IAClB,QAAQ,UAAS;IAEnC,MAAM;IAgBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,4BAA4B,CAAC;KACjE;CACF"}

package/dist/integration-systems/integration-vessel-selector/integration-vessel-selector.js

@@ -15,11 +15,13 @@ var __decorateClass = (decorators, target, key, kind) => {
 let ObcIntegrationVesselSelector = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.hasTopbar = false;
     this.hasFleet = false;
   }
   render() {
     return html`
       <div class="wrapper">
+        ${this.hasTopbar ? html`<div class="topbar-wrapper"><slot name="topbar"></slot></div>` : nothing}
         ${this.hasFleet ? html`<div class="fleet-wrapper">
               <slot name="fleet"></slot>
             </div>` : nothing}
@@ -29,6 +31,9 @@ let ObcIntegrationVesselSelector = class extends LitElement {
   }
 };
 ObcIntegrationVesselSelector.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationVesselSelector.prototype, "hasTopbar", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationVesselSelector.prototype, "hasFleet", 2);

package/dist/integration-systems/integration-vessel-selector/integration-vessel-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-selector.js","sources":["../../../src/integration-systems/integration-vessel-selector/integration-vessel-selector.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-vessel-selector.css?inline';\nimport {property} from 'lit/decorators.js';\n\n/**\n * `<obc-integration-vessel-selector>` – A component that allows the user to select a vessel from a fleet.\n *\n * @slot - The vessel to select.\n * @slot fleet - The fleet of vessels.\n */\n@customElement('obc-integration-vessel-selector')\nexport class ObcIntegrationVesselSelector extends LitElement {\n  @property({type: Boolean}) hasFleet = false;\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">\n        ${this.hasFleet\n          ? html`<div class=\"fleet-wrapper\">\n              <slot name=\"fleet\"></slot>\n            </div>`\n          : nothing}\n        <slot class=\"vessel-wrapper\"></slot>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-vessel-selector': ObcIntegrationVesselSelector;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,+BAAN,cAA2C,WAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,WAAW;AAAA,EAAA;AAAA,EAE7B,SAAS;AAChB,WAAO;AAAA;AAAA,UAED,KAAK,WACH;AAAA;AAAA,sBAGA,OAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AAGF;AAjBa,6BAgBK,SAAS,UAAU,YAAY;AAfpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,6BACgB,WAAA,YAAA,CAAA;AADhB,+BAAN,gBAAA;AAAA,EADN,cAAc,iCAAiC;AAAA,GACnC,4BAAA;"}
+{"version":3,"file":"integration-vessel-selector.js","sources":["../../../src/integration-systems/integration-vessel-selector/integration-vessel-selector.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-vessel-selector.css?inline';\nimport {property} from 'lit/decorators.js';\n\n/**\n * `<obc-integration-vessel-selector>` – A component that allows the user to select a vessel from a fleet.\n *\n * @slot - The vessel to select.\n * @slot fleet - The fleet of vessels.\n * @slot topbar - The top bar, displayed when `hasTopbar` is true.\n */\n@customElement('obc-integration-vessel-selector')\nexport class ObcIntegrationVesselSelector extends LitElement {\n  @property({type: Boolean}) hasTopbar = false;\n  @property({type: Boolean}) hasFleet = false;\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">\n        ${this.hasTopbar\n          ? html`<div class=\"topbar-wrapper\"><slot name=\"topbar\"></slot></div>`\n          : nothing}\n        ${this.hasFleet\n          ? html`<div class=\"fleet-wrapper\">\n              <slot name=\"fleet\"></slot>\n            </div>`\n          : nothing}\n        <slot class=\"vessel-wrapper\"></slot>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-vessel-selector': ObcIntegrationVesselSelector;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAaO,IAAM,+BAAN,cAA2C,WAAW;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,YAAY;AACZ,SAAA,WAAW;AAAA,EAAA;AAAA,EAE7B,SAAS;AAChB,WAAO;AAAA;AAAA,UAED,KAAK,YACH,sEACA,OAAO;AAAA,UACT,KAAK,WACH;AAAA;AAAA,sBAGA,OAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AAGF;AArBa,6BAoBK,SAAS,UAAU,YAAY;AAnBpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,6BACgB,WAAA,aAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,6BAEgB,WAAA,YAAA,CAAA;AAFhB,+BAAN,gBAAA;AAAA,EADN,cAAc,iCAAiC;AAAA,GACnC,4BAAA;"}

package/dist/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.css.js

@@ -31,7 +31,9 @@ const compentStyle = css`
   padding-top: 4px;
   padding-bottom: 4px;
 
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+
+  font-weight: var(--global-typography-ui-overline-font-weight);
 
   font-size: var(--global-typography-ui-overline-font-size);
 

package/dist/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"azimuth-thruster-labeled.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"azimuth-thruster-labeled.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/navigation-instruments/instrument-field/instrument-field.css.js

@@ -159,7 +159,8 @@ const compentStyle = css`
   }
 
 .wrapper.horizontal.enhanced .src {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
     font-size: var(--global-typography-ui-body-font-size);
     line-height: var(--global-typography-ui-body-line-height);
     font-feature-settings:
@@ -228,7 +229,8 @@ const compentStyle = css`
 
 .wrapper .src-picker::part(label) {
     padding: 0;
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
     font-size: var(--global-typography-ui-body-font-size);
     line-height: var(--global-typography-ui-body-line-height);
     font-feature-settings:

package/dist/navigation-instruments/instrument-field/instrument-field.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"instrument-field.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"instrument-field.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/navigation-instruments/readout/readout.css.js

@@ -665,7 +665,8 @@ const componentStyle = css`
 }
 
 .source-container.source-type-regular .source {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
     font-size: var(--global-typography-ui-body-font-size);
     line-height: var(--global-typography-ui-body-line-height);
     font-feature-settings:
@@ -739,7 +740,8 @@ const componentStyle = css`
     }
 
 .source-type-regular:is(.source-container .source-picker)::part(label) {
-        font-family: var(--font-family-main);
+        font-family: var(--global-typography-font-family);
+        font-weight: var(--global-typography-ui-body-font-weight);
         font-size: var(--global-typography-ui-body-font-size);
         line-height: var(--global-typography-ui-body-line-height);
         font-feature-settings:

package/dist/navigation-instruments/readout/readout.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"readout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"readout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -9,14 +9,15 @@ const compentStyle = css`
 }
 
 .label {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-font-weight);
   font-size: var(--global-typography-ui-body-font-size);
   line-height: var(--global-typography-ui-body-line-height);
   font-feature-settings:
     "liga" off,
     "clig" off,
     "ss04" on;
-  font-size: calc(12px / var(--scale));
+  font-size: calc(12px / var(--scale, 1));
   fill: var(--element-neutral-color);
   dominant-baseline: central;
   text-anchor: middle;

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

@@ -1 +1 @@
-{"version":3,"file":"watch.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"watch.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -9,14 +9,15 @@ const compentStyle = css`
 }
 
 .label {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-font-weight);
   font-size: var(--global-typography-ui-body-font-size);
   line-height: var(--global-typography-ui-body-line-height);
   font-feature-settings:
     "liga" off,
     "clig" off,
     "ss04" on;
-  font-size: calc(16px / var(--scale));
+  font-size: calc(16px / var(--scale, 1));
   fill: var(--element-neutral-color);
   alignment-baseline: middle;
   text-anchor: middle;

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

@@ -1 +1 @@
-{"version":3,"file":"watch-flat.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"watch-flat.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/openbridge.css

@@ -14791,7 +14791,8 @@ label.obc-radio-button.disabled {
             color: var(--on-flat-disabled-color) !important;
 }
 label.obc-radio-button {
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
     font-size: var(--global-typography-ui-body-font-size);
     line-height: var(--global-typography-ui-body-line-height);
     font-feature-settings:
@@ -14822,7 +14823,8 @@ label.obc-radio-button.disabled .label,label.obc-radio-button.disabled:hover .la
       color: var(--element-disabled-color);
     }
 label.obc-radio-button:has(input:checked) {
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-active-font-weight);
       font-size: var(--global-typography-ui-body-active-font-size);
       line-height: var(--global-typography-ui-body-active-line-height);
       font-feature-settings:

package/dist/pages/alert-detail-page/alert-detail-page.css.js

@@ -11,7 +11,7 @@ const compentStyle = css`
 .wrapper {
   display: flex;
   flex-direction: column;
-  background: var(--color-container-background-color);
+  background: var(--container-background-color);
   height: 100%;
 
   --padding-horizontal: var(--app-components-modal-margin-vertical);
@@ -62,7 +62,8 @@ const compentStyle = css`
 .header .title {
     padding: 0px var(--app-components-alert-info-label-spacing);
     color: var(--element-neutral-color);
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-overline-font-weight);
     font-size: var(--global-typography-ui-overline-font-size);
     line-height: var(--global-typography-ui-overline-line-height);
     letter-spacing: var(--global-typography-ui-overline-letter-spacing);
@@ -92,7 +93,8 @@ const compentStyle = css`
 
 .body .description {
     color: var(--element-active-color);
-    font-family: var(--font-family-main);
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-body-font-weight);
     font-size: var(--global-typography-ui-body-font-size);
     line-height: var(--global-typography-ui-body-line-height);
     font-feature-settings:
@@ -104,7 +106,8 @@ const compentStyle = css`
 
 :is(.body .description) .label {
       color: var(--element-neutral-color);
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-label-font-weight);
       font-size: var(--global-typography-ui-label-font-size);
       line-height: var(--global-typography-ui-label-line-height);
       font-feature-settings:
@@ -120,7 +123,8 @@ const compentStyle = css`
 
 :is(.body .detail) .detail-title {
       color: var(--element-neutral-color);
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-label-font-weight);
       font-size: var(--global-typography-ui-label-font-size);
       line-height: var(--global-typography-ui-label-line-height);
       font-feature-settings:
@@ -131,7 +135,8 @@ const compentStyle = css`
 
 :is(.body .detail) .detail-value {
       color: var(--element-active-color);
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-font-weight);
       font-size: var(--global-typography-ui-body-font-size);
       line-height: var(--global-typography-ui-body-line-height);
       font-feature-settings:
@@ -144,7 +149,8 @@ const compentStyle = css`
       color: var(--element-active-color);
       width: var(--app-components-alert-info-icon-size);
       height: var(--app-components-alert-info-icon-size);
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-font-weight);
       font-size: var(--global-typography-ui-body-font-size);
       line-height: var(--global-typography-ui-body-line-height);
       font-feature-settings:
@@ -165,7 +171,8 @@ const compentStyle = css`
 
 .readout-graph-title {
   color: var(--element-active-color);
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-font-weight);
   font-size: var(--global-typography-ui-label-font-size);
   line-height: var(--global-typography-ui-label-line-height);
   font-feature-settings:

package/dist/pages/alert-detail-page/alert-detail-page.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-detail-page.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert-detail-page.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.49",
+  "version": "2.0.0-next.52",
   "type": "module",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "@lit-labs/gen-wrapper-svelte": "file:lit-labs-gen-wrapper-svelte-397bf119.tgz",
     "@lit-labs/gen-wrapper-vue": "file:lit-labs-gen-wrapper-vue-0.4.1.tgz",
     "@open-wc/lit-helpers": "^0.7.0",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "1.60.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/exec": "^7.1.0",
@@ -63,7 +63,7 @@
     "lit-analyzer": "^2.0.3",
     "nodemon": "^3.1.14",
     "openai": "^6.27.0",
-    "playwright": "^1.58.2",
+    "playwright": "^1.60.0",
     "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",

package/postcss.config.mjs

@@ -50,7 +50,8 @@ function colors({
 }
 
 function parseParams(params) {
-  const paramsArray = params.split(' ');
+  const paramsNoNewLine = params.replaceAll('\n', '');
+  const paramsArray = paramsNoNewLine.split(' ');
   const paramsObject = {};
   paramsArray.forEach((param) => {
     const [key, value] = param.split('=');

package/script/check-css-variables.ts

@@ -44,43 +44,22 @@ import fs from 'fs';
 import path from 'path';
 import {globby} from 'globby';
 
+// Bucket B from issue #916 — undefined CSS variables that still need a design
+// decision (token value, rename target, or removal). Tracked for follow-up.
+// See https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents/issues/916
 const allowedUndefinedVariables = new Set([
-  '--alert-components-badge-label-spacing',
+  // B-1: notification icon size (alert-menu-item.css, message-menu-item.css)
   '--app-components-alert-components-general-notification-item-icon-size-large',
-  '--app-components-badge-border-radius',
-  '--app-components-badge-icon-size',
-  '--app-components-badge-icon-size-flat',
-  '--app-components-badge-icon-size-large',
-  '--app-components-badge-label-spacing',
-  '--app-components-badge-min-size-large',
-  '--app-components-badge-padding',
+  // B-2: alert counter spacing (alert-button.css)
   '--app-components-global-alert-item-counter-spacing',
-  '--color-container-background-color',
-  '--course',
-  '--critical-enabled-background-color',
-  '--critical-enabled-border-color',
-  '--critical-focused-background-color',
-  '--critical-focused-border-color',
-  '--critical-hover-background-color',
-  '--critical-hover-border-color',
-  '--critical-pressed-background-color',
-  '--critical-pressed-border-color',
-  '--custom-width',
+  // B-3: likely typo for --normal-enabled-background-color (sequence-toolbar.css)
   '--enabled-background-color',
-  '--global-size-spacing-list-item-menu-padding-horizonal-list-item',
-  '--grid-columns',
-  '--grid-columns-rest',
-  '--heading',
-  '--image-size',
+  // B-4: date-item vertical padding (date-item.css) — sibling tokens exist
   '--menu-navigation-components-date-item-padding-vertical',
-  '--menu-navigation-components-tab-item-divider-height',
+  // B-5/B-6: instrument-field internal widths — unusual --obc- prefix
   '--obc-instrument-field-source-width',
   '--obc-instrument-field-tag-width',
-  '--on-container-active-color',
-  '--percent',
-  '--scale',
-  '--spinner-progress-deg',
-  '--ui-components-icon-toggle-button-horizontal-item-touch-target-size',
+  // B-7: keyboard "nummeric" tokens missing from the (misspelled) family
   '--ui-components-keyboard-nummeric-component-height-min',
   '--ui-components-keyboard-nummeric-touch-target-size',
 ]);

package/src/ar/chart-object-vessel-button/chart-object-vessel-button.css

@@ -300,7 +300,7 @@
 .course-arrow {
   position: absolute;
   left: 50%;
-  transform: translate(-50%, -50%) rotate(calc(var(--course)));
+  transform: translate(-50%, -50%) rotate(calc(var(--course, 0deg)));
   transform-origin: center bottom;
 }
 
@@ -308,7 +308,7 @@
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%) rotate(calc(var(--heading)));
+  transform: translate(-50%, -50%) rotate(calc(var(--heading, 0deg)));
   transform-origin: center center;
 }
 
@@ -316,16 +316,16 @@
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%) rotate(calc(var(--heading)));
+  transform: translate(-50%, -50%) rotate(calc(var(--heading, 0deg)));
   transform-origin: center center;
 
   & > slot {
-    width: var(--image-size);
-    height: var(--image-size);
+    width: var(--image-size, 0px);
+    height: var(--image-size, 0px);
   }
 
   & > svg {
-    width: calc(var(--image-size) * 160 / 136.87);
-    height: calc(var(--image-size) * 160 / 136.87);
+    width: calc(var(--image-size, 0px) * 160 / 136.87);
+    height: calc(var(--image-size, 0px) * 160 / 136.87);
   }
 }

package/src/ar/poi-layer/poi-layer.stories.ts

@@ -71,6 +71,7 @@ export default meta;
 type Story = StoryObj<PoiLayerArgs>;
 
 export const AnimatedLayout: Story = {
+  tags: ['skip-test'],
   args: {
     label: 'Animated Layer',
     debug: true,
@@ -171,6 +172,7 @@ export const AnimatedLayout: Story = {
 };
 
 export const AnimatedLayoutWithValues: Story = {
+  tags: ['skip-test'],
   args: {
     label: 'Animated Layer (Values)',
     debug: true,
@@ -304,6 +306,7 @@ export const AnimatedLayoutWithValues: Story = {
 };
 
 export const Primary: Story = {
+  tags: ['skip-test'],
   play: async () => {
     await waitForStorySettle();
   },