@oicl/openbridge-webcomponents 2.0.0-next.50 → 2.0.0-next.52

package/dist/integration-systems/integration-button/integration-button.css.js.map

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

package/dist/integration-systems/integration-button/integration-button.d.ts

@@ -4,6 +4,15 @@ export interface IntegrationButtonReadout {
     value: string;
     unit: string;
 }
+export declare enum IntegrationButtonVariant {
+    normal = "normal",
+    flat = "flat"
+}
+export declare enum IntegrationButtonType {
+    hug = "hug",
+    regular = "regular",
+    rich = "rich"
+}
 /**
  * `<obc-integration-button>` – A button component for integration systems.
  *
@@ -11,20 +20,47 @@ export interface IntegrationButtonReadout {
  * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)
  * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)
  * @slot label - Label text
- * @slot status - Status text
+ * @slot status - Status/description text (shown when `hasStatus` is true)
  * @slot info-label - Info label text
  * @slot info-status - Info status text
+ * @slot integration-vessel-menu - Integration vessel menu to be shown when button is in activated state
+ *
+ * @fires click - Fired when the internal button is activated.
+ *
+ * @property {boolean} hasTrailingIcon - Shows the `trailing-icon` slot.
+ * @property {boolean} hasTrailingIcon2 - Shows the `trailing-icon2` slot.
+ * @property {boolean} hasLeadingIcon - Shows the `leading-icon` slot.
+ * @property {boolean} hasstatus - Shows the `status` slot.
+ * @property {IntegrationButtonReadout[]} readouts - List of readout items shown in the rich type.
+ * @property {boolean} disabled - Disables the internal button.
+ * @property {boolean} activated - Applies active state styling while a selection is pending.
+ * @property {boolean} selected - Applies selected state styling.
+ * @property {boolean} dividerBottom - Shows a bottom divider under the button.
+ * @property {boolean} dividerRight - Shows a right divider to separate from adjacent buttons.
+ * @property {IntegrationButtonVariant} variant - Visual variant (`normal` or `flat`).
+ * @property {IntegrationButtonType} type - Layout type (`hug`, `regular`, or `rich`).
  */
 export declare class ObcIntegrationButton extends LitElement {
     hasTrailingIcon: boolean;
     hasTrailingIcon2: boolean;
     hasLeadingIcon: boolean;
+    hasStatus: boolean;
     readouts: IntegrationButtonReadout[];
     disabled: boolean;
+    activated: boolean;
     selected: boolean;
     dividerBottom: boolean;
+    dividerRight: boolean;
+    variant: IntegrationButtonVariant;
+    type: IntegrationButtonType;
+    private getButtonClasses;
+    private onIntegrationVesselMenuClick;
+    renderRich(): import('lit-html').TemplateResult<1>;
+    renderRegular(): import('lit-html').TemplateResult<1>;
+    renderHug(): import('lit-html').TemplateResult<1>;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
+    updated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/integration-systems/integration-button/integration-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integration-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;GAUG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IACvB,eAAe,UAAS;IACxB,gBAAgB,UAAS;IACzB,cAAc,UAAS;IAElD,QAAQ,EAAE,wBAAwB,EAAE,CAAM;IACf,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,aAAa,UAAS;IAExC,MAAM;IAmDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}
+{"version":3,"file":"integration-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,oBAAY,wBAAwB;IAClC,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,qBAAqB;IAC/B,GAAG,QAAQ;IACX,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IACvB,eAAe,UAAS;IACxB,gBAAgB,UAAS;IACzB,cAAc,UAAS;IACvB,SAAS,UAAS;IAE7C,QAAQ,EAAE,wBAAwB,EAAE,CAAM;IACf,QAAQ,UAAS;IACjB,SAAS,UAAS;IAClB,QAAQ,UAAS;IACjB,aAAa,UAAS;IACtB,YAAY,UAAS;IACtB,OAAO,EAAE,wBAAwB,CACzB;IACR,IAAI,EAAE,qBAAqB,CACrB;IAEhC,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,4BAA4B;IAIpC,UAAU;IA2EV,aAAa;IAgDb,SAAS;IAgDA,MAAM;IAef,OAAgB,MAAM,0BAA2B;IAExC,OAAO;CAajB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}

package/dist/integration-systems/integration-button/integration-button.js

@@ -13,61 +13,210 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var IntegrationButtonVariant = /* @__PURE__ */ ((IntegrationButtonVariant2) => {
+  IntegrationButtonVariant2["normal"] = "normal";
+  IntegrationButtonVariant2["flat"] = "flat";
+  return IntegrationButtonVariant2;
+})(IntegrationButtonVariant || {});
+var IntegrationButtonType = /* @__PURE__ */ ((IntegrationButtonType2) => {
+  IntegrationButtonType2["hug"] = "hug";
+  IntegrationButtonType2["regular"] = "regular";
+  IntegrationButtonType2["rich"] = "rich";
+  return IntegrationButtonType2;
+})(IntegrationButtonType || {});
 let ObcIntegrationButton = class extends LitElement {
   constructor() {
     super(...arguments);
     this.hasTrailingIcon = false;
     this.hasTrailingIcon2 = false;
     this.hasLeadingIcon = false;
+    this.hasStatus = false;
     this.readouts = [];
     this.disabled = false;
+    this.activated = false;
     this.selected = false;
     this.dividerBottom = false;
+    this.dividerRight = false;
+    this.variant = "normal";
+    this.type = "regular";
   }
-  render() {
+  getButtonClasses() {
+    return {
+      "touch-target": true,
+      selected: this.selected,
+      activated: this.activated,
+      disabled: this.disabled,
+      "has-description": this.hasStatus,
+      ["variant-" + this.variant]: true,
+      ["type-" + this.type]: true
+    };
+  }
+  onIntegrationVesselMenuClick(event) {
+    event.stopPropagation();
+  }
+  renderRich() {
     return html`
-      <button
+      <div class="button-horizontal-divider-container">
+        <div class="button-vertical-divider-container">
+          <button
+            class=${classMap(this.getButtonClasses())}
+            ?disabled=${this.disabled}
+          >
+            <div class="content-container">
+              <div class="main-container">
+                ${this.hasLeadingIcon ? html`<div class="icon leading">
+                      <slot name="leading-icon"></slot>
+                    </div>` : nothing}
+                <div class="text-container">
+                  <div class="label"><slot name="label"></slot></div>
+                  ${this.hasStatus ? html`<div class="status">
+                        <slot name="status"></slot>
+                      </div>` : nothing}
+                </div>
+                ${this.hasTrailingIcon ? html`<div class="icon-container">
+                      ${this.hasTrailingIcon2 ? html`<slot
+                            name="trailing-icon2"
+                            class="icon trailing"
+                          ></slot>` : nothing}
+                      <slot name="trailing-icon" class="icon trailing"></slot>
+                    </div>` : nothing}
+              </div>
+              <div class="info-container">
+                <div class="info-item">
+                  <slot class="info-label" name="info-label"></slot>
+                  <slot class="info-status" name="info-status"></slot>
+                </div>
+                ${this.readouts.map(
+      (readout) => html`
+                    <div class="info-readout-item">
+                      <div class="info-item-label">${readout.label}</div>
+                      <div class="info-item-value">${readout.value}</div>
+                      <div class="info-item-unit">${readout.unit}</div>
+                    </div>
+                  `
+    )}
+              </div>
+            </div>
+          </button>
+          ${this.dividerRight ? html`<div class="divider-right"></div>` : html`<div
+                class="divider-right"
+                style="visibility: hidden;"
+              ></div>`}
+        </div>
+        ${this.dividerBottom ? html`<div class="divider-bottom"></div>` : nothing}
+      </div>
+      <div
         class=${classMap({
-      wrapper: true,
-      selected: this.selected
+      "integration-vessel-menu-container": true,
+      show: this.activated
     })}
-        ?disabled=${this.disabled}
+        @click=${this.onIntegrationVesselMenuClick}
       >
-        <div class="main-container">
-          ${this.hasLeadingIcon ? html`<div class="icon leading">
-                <slot name="leading-icon"></slot>
-              </div>` : nothing}
-          <div class="text-container">
-            <div class="label"><slot name="label"></slot></div>
-            <div class="status"><slot name="status"></slot></div>
+        <slot name="integration-vessel-menu"></slot>
+      </div>
+    `;
+  }
+  renderRegular() {
+    return html`
+      <div class="button-vertical-divider-container">
+        <button
+          class=${classMap(this.getButtonClasses())}
+          ?disabled=${this.disabled}
+        >
+          <div class="content-container">
+            ${this.hasLeadingIcon ? html`<div class="icon leading">
+                  <slot name="leading-icon"></slot>
+                </div>` : nothing}
+            <div class="text-container">
+              <div class="label"><slot name="label"></slot></div>
+              ${this.hasStatus ? html`<div class="status"><slot name="status"></slot></div>` : nothing}
+            </div>
+            ${this.hasTrailingIcon ? html`<div class="icon-container">
+                  ${this.hasTrailingIcon2 ? html`<slot
+                        name="trailing-icon2"
+                        class="icon trailing"
+                      ></slot>` : nothing}
+                  <slot name="trailing-icon" class="icon trailing"></slot>
+                </div>` : nothing}
           </div>
-          ${this.hasTrailingIcon ? html`<div class="icon-container">
-                ${this.hasTrailingIcon2 ? html`<slot
-                      name="trailing-icon2"
-                      class="icon trailing"
-                    ></slot>` : nothing}
-                <slot name="trailing-icon" class="icon trailing"></slot>
-              </div>` : nothing}
-        </div>
-        <div class="info-container">
-          <div class="info-item">
-            <slot class="info-label" name="info-label"></slot>
-            <slot class="info-status" name="info-status"></slot>
+        </button>
+        ${this.dividerRight ? html`<div class="divider-right"></div>` : html`<div class="divider-right" style="visibility: hidden;"></div>`}
+      </div>
+      <div
+        class=${classMap({
+      "integration-vessel-menu-container": true,
+      show: this.activated
+    })}
+        @click=${this.onIntegrationVesselMenuClick}
+      >
+        <slot name="integration-vessel-menu"></slot>
+      </div>
+    `;
+  }
+  renderHug() {
+    return html`
+      <div class="button-vertical-divider-container">
+        <button
+          class=${classMap(this.getButtonClasses())}
+          ?disabled=${this.disabled}
+        >
+          <div class="content-container">
+            ${this.hasLeadingIcon ? html`<div class="icon leading">
+                  <slot name="leading-icon"></slot>
+                </div>` : nothing}
+            <div class="text-container">
+              <div class="label"><slot name="label"></slot></div>
+              ${this.hasStatus ? html`<div class="status"><slot name="status"></slot></div>` : nothing}
+            </div>
+            ${this.hasTrailingIcon ? html`<div class="icon-container">
+                  ${this.hasTrailingIcon2 ? html`<slot
+                        name="trailing-icon2"
+                        class="icon trailing"
+                      ></slot>` : nothing}
+                  <slot name="trailing-icon" class="icon trailing"></slot>
+                </div>` : nothing}
           </div>
-          ${this.readouts.map(
-      (readout) => html`
-              <div class="info-readout-item">
-                <div class="info-item-label">${readout.label}</div>
-                <div class="info-item-value">${readout.value}</div>
-                <div class="info-item-unit">${readout.unit}</div>
-              </div>
-            `
-    )}
-        </div>
-      </button>
-      ${this.dividerBottom ? html`<div class="divider-bottom"></div>` : nothing}
+        </button>
+        ${this.dividerRight ? html`<div class="divider-right"></div>` : html`<div class="divider-right" style="visibility: hidden;"></div>`}
+      </div>
+      <div
+        class=${classMap({
+      "integration-vessel-menu-container": true,
+      show: this.activated
+    })}
+        @click=${this.onIntegrationVesselMenuClick}
+      >
+        <slot name="integration-vessel-menu"></slot>
+      </div>
     `;
   }
+  render() {
+    switch (this.type) {
+      case "hug": {
+        return this.renderHug();
+      }
+      case "rich": {
+        return this.renderRich();
+      }
+      case "regular":
+      default: {
+        return this.renderRegular();
+      }
+    }
+  }
+  updated() {
+    let dividerHeight = 40;
+    if (this.type === "hug") {
+      dividerHeight = 32;
+    }
+    if (this.type === "rich") {
+      dividerHeight = 64;
+    }
+    this.style.setProperty(
+      "--integration-button-divider-height",
+      `${dividerHeight}px`
+    );
+  }
 };
 ObcIntegrationButton.styles = unsafeCSS(compentStyle);
 __decorateClass([
@@ -79,22 +228,39 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationButton.prototype, "hasLeadingIcon", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationButton.prototype, "hasStatus", 2);
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcIntegrationButton.prototype, "readouts", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationButton.prototype, "activated", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationButton.prototype, "selected", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcIntegrationButton.prototype, "dividerBottom", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationButton.prototype, "dividerRight", 2);
+__decorateClass([
+  property({ type: String })
+], ObcIntegrationButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], ObcIntegrationButton.prototype, "type", 2);
 ObcIntegrationButton = __decorateClass([
   customElement("obc-integration-button")
 ], ObcIntegrationButton);
 export {
+  IntegrationButtonType,
+  IntegrationButtonVariant,
   ObcIntegrationButton
 };
 //# sourceMappingURL=integration-button.js.map

package/dist/integration-systems/integration-button/integration-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-button.js","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport interface IntegrationButtonReadout {\n  label: string;\n  value: string;\n  unit: string;\n}\n\n/**\n * `<obc-integration-button>` – A button component for integration systems.\n *\n * @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)\n * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)\n * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)\n * @slot label - Label text\n * @slot status - Status text\n * @slot info-label - Info label text\n * @slot info-status - Info status text\n */\n@customElement('obc-integration-button')\nexport class ObcIntegrationButton extends LitElement {\n  @property({type: Boolean}) hasTrailingIcon = false;\n  @property({type: Boolean}) hasTrailingIcon2 = false;\n  @property({type: Boolean}) hasLeadingIcon = false;\n  @property({type: Array, attribute: false})\n  readouts: IntegrationButtonReadout[] = [];\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) selected = false;\n  @property({type: Boolean}) dividerBottom = false;\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          selected: this.selected,\n        })}\n        ?disabled=${this.disabled}\n      >\n        <div class=\"main-container\">\n          ${this.hasLeadingIcon\n            ? html`<div class=\"icon leading\">\n                <slot name=\"leading-icon\"></slot>\n              </div>`\n            : nothing}\n          <div class=\"text-container\">\n            <div class=\"label\"><slot name=\"label\"></slot></div>\n            <div class=\"status\"><slot name=\"status\"></slot></div>\n          </div>\n          ${this.hasTrailingIcon\n            ? html`<div class=\"icon-container\">\n                ${this.hasTrailingIcon2\n                  ? html`<slot\n                      name=\"trailing-icon2\"\n                      class=\"icon trailing\"\n                    ></slot>`\n                  : nothing}\n                <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n              </div>`\n            : nothing}\n        </div>\n        <div class=\"info-container\">\n          <div class=\"info-item\">\n            <slot class=\"info-label\" name=\"info-label\"></slot>\n            <slot class=\"info-status\" name=\"info-status\"></slot>\n          </div>\n          ${this.readouts.map(\n            (readout) => html`\n              <div class=\"info-readout-item\">\n                <div class=\"info-item-label\">${readout.label}</div>\n                <div class=\"info-item-value\">${readout.value}</div>\n                <div class=\"info-item-unit\">${readout.unit}</div>\n              </div>\n            `\n          )}\n        </div>\n      </button>\n      ${this.dividerBottom ? html`<div class=\"divider-bottom\"></div>` : nothing}\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-button': ObcIntegrationButton;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,IAAM,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,kBAAkB;AAClB,SAAA,mBAAmB;AACnB,SAAA,iBAAiB;AAE5C,SAAA,WAAuC,CAAA;AACZ,SAAA,WAAW;AACX,SAAA,WAAW;AACX,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAElC,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,UAAU,KAAK;AAAA,IAAA,CAChB,CAAC;AAAA,oBACU,KAAK,QAAQ;AAAA;AAAA;AAAA,YAGrB,KAAK,iBACH;AAAA;AAAA,wBAGA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKT,KAAK,kBACH;AAAA,kBACI,KAAK,mBACH;AAAA;AAAA;AAAA,gCAIA,OAAO;AAAA;AAAA,wBAGb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOT,KAAK,SAAS;AAAA,MACd,CAAC,YAAY;AAAA;AAAA,+CAEsB,QAAQ,KAAK;AAAA,+CACb,QAAQ,KAAK;AAAA,8CACd,QAAQ,IAAI;AAAA;AAAA;AAAA,IAAA,CAG/C;AAAA;AAAA;AAAA,QAGH,KAAK,gBAAgB,2CAA2C,OAAO;AAAA;AAAA,EAE7E;AAGF;AA9Da,qBA6DK,SAAS,UAAU,YAAY;AA5DpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,qBACgB,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,qBAEgB,WAAA,oBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,qBAGgB,WAAA,kBAAA,CAAA;AAE3B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAJ9B,qBAKX,WAAA,YAAA,CAAA;AAC2B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GANd,qBAMgB,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAPd,qBAOgB,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GARd,qBAQgB,WAAA,iBAAA,CAAA;AARhB,uBAAN,gBAAA;AAAA,EADN,cAAc,wBAAwB;AAAA,GAC1B,oBAAA;"}
+{"version":3,"file":"integration-button.js","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport interface IntegrationButtonReadout {\n  label: string;\n  value: string;\n  unit: string;\n}\n\nexport enum IntegrationButtonVariant {\n  normal = 'normal',\n  flat = 'flat',\n}\n\nexport enum IntegrationButtonType {\n  hug = 'hug',\n  regular = 'regular',\n  rich = 'rich',\n}\n\n/**\n * `<obc-integration-button>` – A button component for integration systems.\n *\n * @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)\n * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)\n * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)\n * @slot label - Label text\n * @slot status - Status/description text (shown when `hasStatus` is true)\n * @slot info-label - Info label text\n * @slot info-status - Info status text\n * @slot integration-vessel-menu - Integration vessel menu to be shown when button is in activated state\n *\n * @fires click - Fired when the internal button is activated.\n *\n * @property {boolean} hasTrailingIcon - Shows the `trailing-icon` slot.\n * @property {boolean} hasTrailingIcon2 - Shows the `trailing-icon2` slot.\n * @property {boolean} hasLeadingIcon - Shows the `leading-icon` slot.\n * @property {boolean} hasstatus - Shows the `status` slot.\n * @property {IntegrationButtonReadout[]} readouts - List of readout items shown in the rich type.\n * @property {boolean} disabled - Disables the internal button.\n * @property {boolean} activated - Applies active state styling while a selection is pending.\n * @property {boolean} selected - Applies selected state styling.\n * @property {boolean} dividerBottom - Shows a bottom divider under the button.\n * @property {boolean} dividerRight - Shows a right divider to separate from adjacent buttons.\n * @property {IntegrationButtonVariant} variant - Visual variant (`normal` or `flat`).\n * @property {IntegrationButtonType} type - Layout type (`hug`, `regular`, or `rich`).\n */\n@customElement('obc-integration-button')\nexport class ObcIntegrationButton extends LitElement {\n  @property({type: Boolean}) hasTrailingIcon = false;\n  @property({type: Boolean}) hasTrailingIcon2 = false;\n  @property({type: Boolean}) hasLeadingIcon = false;\n  @property({type: Boolean}) hasStatus = false;\n  @property({type: Array, attribute: false})\n  readouts: IntegrationButtonReadout[] = [];\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) activated = false;\n  @property({type: Boolean}) selected = false;\n  @property({type: Boolean}) dividerBottom = false;\n  @property({type: Boolean}) dividerRight = false;\n  @property({type: String}) variant: IntegrationButtonVariant =\n    IntegrationButtonVariant.normal;\n  @property({type: String}) type: IntegrationButtonType =\n    IntegrationButtonType.regular;\n\n  private getButtonClasses() {\n    return {\n      'touch-target': true,\n      selected: this.selected,\n      activated: this.activated,\n      disabled: this.disabled,\n      'has-description': this.hasStatus,\n      ['variant-' + this.variant]: true,\n      ['type-' + this.type]: true,\n    };\n  }\n\n  private onIntegrationVesselMenuClick(event: Event) {\n    event.stopPropagation();\n  }\n\n  renderRich() {\n    return html`\n      <div class=\"button-horizontal-divider-container\">\n        <div class=\"button-vertical-divider-container\">\n          <button\n            class=${classMap(this.getButtonClasses())}\n            ?disabled=${this.disabled}\n          >\n            <div class=\"content-container\">\n              <div class=\"main-container\">\n                ${this.hasLeadingIcon\n                  ? html`<div class=\"icon leading\">\n                      <slot name=\"leading-icon\"></slot>\n                    </div>`\n                  : nothing}\n                <div class=\"text-container\">\n                  <div class=\"label\"><slot name=\"label\"></slot></div>\n                  ${this.hasStatus\n                    ? html`<div class=\"status\">\n                        <slot name=\"status\"></slot>\n                      </div>`\n                    : nothing}\n                </div>\n                ${this.hasTrailingIcon\n                  ? html`<div class=\"icon-container\">\n                      ${this.hasTrailingIcon2\n                        ? html`<slot\n                            name=\"trailing-icon2\"\n                            class=\"icon trailing\"\n                          ></slot>`\n                        : nothing}\n                      <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n                    </div>`\n                  : nothing}\n              </div>\n              <div class=\"info-container\">\n                <div class=\"info-item\">\n                  <slot class=\"info-label\" name=\"info-label\"></slot>\n                  <slot class=\"info-status\" name=\"info-status\"></slot>\n                </div>\n                ${this.readouts.map(\n                  (readout) => html`\n                    <div class=\"info-readout-item\">\n                      <div class=\"info-item-label\">${readout.label}</div>\n                      <div class=\"info-item-value\">${readout.value}</div>\n                      <div class=\"info-item-unit\">${readout.unit}</div>\n                    </div>\n                  `\n                )}\n              </div>\n            </div>\n          </button>\n          ${this.dividerRight\n            ? html`<div class=\"divider-right\"></div>`\n            : html`<div\n                class=\"divider-right\"\n                style=\"visibility: hidden;\"\n              ></div>`}\n        </div>\n        ${this.dividerBottom\n          ? html`<div class=\"divider-bottom\"></div>`\n          : nothing}\n      </div>\n      <div\n        class=${classMap({\n          'integration-vessel-menu-container': true,\n          show: this.activated,\n        })}\n        @click=${this.onIntegrationVesselMenuClick}\n      >\n        <slot name=\"integration-vessel-menu\"></slot>\n      </div>\n    `;\n  }\n\n  renderRegular() {\n    return html`\n      <div class=\"button-vertical-divider-container\">\n        <button\n          class=${classMap(this.getButtonClasses())}\n          ?disabled=${this.disabled}\n        >\n          <div class=\"content-container\">\n            ${this.hasLeadingIcon\n              ? html`<div class=\"icon leading\">\n                  <slot name=\"leading-icon\"></slot>\n                </div>`\n              : nothing}\n            <div class=\"text-container\">\n              <div class=\"label\"><slot name=\"label\"></slot></div>\n              ${this.hasStatus\n                ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n                : nothing}\n            </div>\n            ${this.hasTrailingIcon\n              ? html`<div class=\"icon-container\">\n                  ${this.hasTrailingIcon2\n                    ? html`<slot\n                        name=\"trailing-icon2\"\n                        class=\"icon trailing\"\n                      ></slot>`\n                    : nothing}\n                  <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n                </div>`\n              : nothing}\n          </div>\n        </button>\n        ${this.dividerRight\n          ? html`<div class=\"divider-right\"></div>`\n          : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n      </div>\n      <div\n        class=${classMap({\n          'integration-vessel-menu-container': true,\n          show: this.activated,\n        })}\n        @click=${this.onIntegrationVesselMenuClick}\n      >\n        <slot name=\"integration-vessel-menu\"></slot>\n      </div>\n    `;\n  }\n\n  renderHug() {\n    return html`\n      <div class=\"button-vertical-divider-container\">\n        <button\n          class=${classMap(this.getButtonClasses())}\n          ?disabled=${this.disabled}\n        >\n          <div class=\"content-container\">\n            ${this.hasLeadingIcon\n              ? html`<div class=\"icon leading\">\n                  <slot name=\"leading-icon\"></slot>\n                </div>`\n              : nothing}\n            <div class=\"text-container\">\n              <div class=\"label\"><slot name=\"label\"></slot></div>\n              ${this.hasStatus\n                ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n                : nothing}\n            </div>\n            ${this.hasTrailingIcon\n              ? html`<div class=\"icon-container\">\n                  ${this.hasTrailingIcon2\n                    ? html`<slot\n                        name=\"trailing-icon2\"\n                        class=\"icon trailing\"\n                      ></slot>`\n                    : nothing}\n                  <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n                </div>`\n              : nothing}\n          </div>\n        </button>\n        ${this.dividerRight\n          ? html`<div class=\"divider-right\"></div>`\n          : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n      </div>\n      <div\n        class=${classMap({\n          'integration-vessel-menu-container': true,\n          show: this.activated,\n        })}\n        @click=${this.onIntegrationVesselMenuClick}\n      >\n        <slot name=\"integration-vessel-menu\"></slot>\n      </div>\n    `;\n  }\n\n  override render() {\n    switch (this.type) {\n      case IntegrationButtonType.hug: {\n        return this.renderHug();\n      }\n      case IntegrationButtonType.rich: {\n        return this.renderRich();\n      }\n      case IntegrationButtonType.regular:\n      default: {\n        return this.renderRegular();\n      }\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n\n  override updated() {\n    let dividerHeight = 40;\n    if (this.type === IntegrationButtonType.hug) {\n      dividerHeight = 32;\n    }\n    if (this.type === IntegrationButtonType.rich) {\n      dividerHeight = 64;\n    }\n    this.style.setProperty(\n      '--integration-button-divider-height',\n      `${dividerHeight}px`\n    );\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-button': ObcIntegrationButton;\n  }\n}\n"],"names":["IntegrationButtonVariant","IntegrationButtonType"],"mappings":"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"}

package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js

@@ -16,7 +16,8 @@ const compentStyle = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  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:
@@ -177,7 +178,7 @@ const compentStyle = css`
   border-radius: 12px;
   background: var(--integration-container-global-color);
   box-shadow: var(--shadow-floating);
-  padding: 4px;
+  padding: 4px 0;
 
   overflow-y: auto;
 }
@@ -190,6 +191,7 @@ const compentStyle = css`
   min-height: var(
     --menu-navigation-components-navigation-item-touch-target-size
   );
+  margin: 0 4px;
   padding: 0px
     var(--menu-navigation-components-navigation-item-padding-horizontal);
   border-radius: var(
@@ -254,7 +256,8 @@ const compentStyle = css`
 }
 
 .wrapper option:not(.fleet-option) {
-  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:
@@ -285,7 +288,8 @@ const compentStyle = css`
   }
 
 :is(.wrapper option:not(.fleet-option)) .status {
-    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:
@@ -365,7 +369,8 @@ const compentStyle = css`
 
 :is(.wrapper option:not(.fleet-option)):checked {
     color: var(--integration-on-selected-active-color);
-    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:
@@ -384,7 +389,8 @@ const compentStyle = css`
 
 :is(.wrapper option:not(.fleet-option)):checked .status {
       /* Keep status typography, but swap to the selected 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:
@@ -410,6 +416,11 @@ const compentStyle = css`
     display: none;
   }
 
+slot[name="fleet"] {
+  display: flex;
+  flex: 1;
+}
+
 .wrapper option.fleet-option {
   display: flex;
   align-items: center;

package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js.map

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

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.css.js

@@ -156,7 +156,8 @@ const compentStyle = css`
   }
 
 :is(.wrapper .header) .fleet-name {
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-button-font-weight);
       font-size: var(--global-typography-ui-button-font-size);
       line-height: var(--global-typography-ui-button-line-height);
       font-feature-settings:
@@ -166,7 +167,8 @@ const compentStyle = css`
     }
 
 :is(.wrapper .header) .status {
-      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:
@@ -249,7 +251,8 @@ const compentStyle = css`
 
 :is(:is(:is(.wrapper .content) .readouts) .readout) .readout-label {
           grid-area: label;
-          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:
@@ -291,7 +294,8 @@ const compentStyle = css`
       }
 
 :is(:is(.wrapper .content) .alerts) .alert-topic {
-        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:
@@ -304,7 +308,8 @@ const compentStyle = css`
       }
 
 .no-alert:is(:is(.wrapper .content) .alerts) .alert-counts {
-        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:
@@ -320,7 +325,8 @@ const compentStyle = css`
         }
 
 .has-alert:is(:is(.wrapper .content) .alerts) .alert-topic {
-          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/integration-systems/integration-fleet-button/integration-fleet-button.css.js.map

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

package/dist/integration-systems/integration-tabs/integration-tabs.css.js

@@ -19,7 +19,9 @@ const compentStyle = css`
   align-items: center;
   justify-content: center;
 
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+
+  font-weight: var(--global-typography-ui-button-font-weight);
 
   font-size: var(--global-typography-ui-button-font-size);
 

package/dist/integration-systems/integration-tabs/integration-tabs.css.js.map

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

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

@@ -0,0 +1,75 @@
+import { css } from "lit";
+const componentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+
+* {
+  box-sizing: border-box;
+}
+
+.wrapper {
+            border-color: var(--integration-normal-enabled-border-color);
+            background-color: var(--integration-normal-enabled-background-color);
+            border-width: 1px;
+            border-style: solid;
+            --base-border-color: var(--integration-normal-enabled-border-color);
+            --base-background-color: var(--integration-normal-enabled-background-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 788px;
+  align-items: center;
+  background: var(--container-global-color);
+  border-radius: var(
+    --app-components-integration-system-dropdown-menu-border-radius
+  );
+  border: 2px solid var(--integration-border-menu-outline-color);
+  box-shadow: var(--shadow-floating-x) var(--shadow-floating-y)
+    var(--shadow-floating-blur) var(--shadow-raised-spread)
+    var(--shadow-floating-color);
+}
+
+.footer-container {
+  width: 100%;
+  display: flex;
+  height: var(
+    --app-components-integration-system-dropdown-menu-action-container-height
+  );
+  padding: 0
+    var(--app-components-integration-system-dropdown-menu-padding-horizontal);
+  gap: var(--app-components-alert-menu-button-spacing);
+  border-top: 1px solid var(--border-divider-color);
+  background: var(--container-global-color);
+}
+
+.footer-container obc-button {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+
+.content-container {
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  align-self: stretch;
+  min-height: 0;
+  flex: 1;
+}
+
+.alert-list {
+  width: 100%;
+}
+
+.leading-icon {
+  color: var(--integration-on-normal-neutral-color);
+}
+
+.container-title {
+  color: var(--integration-on-normal-neutral-color);
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=integration-vessel-menu.css.js.map