@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.72 → 2.0.0-next.73

package/custom-elements.json

@@ -70183,7 +70183,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.",
+          "description": "`<obc-integration-vessel-menu>` – A menu to be shown when selecting a obc-integration-button from a obc-integration-bar.\n\n## Sizing\n\nThe menu hugs its content and never reserves more space than its slotted\nsections need; it deliberately does not impose a height of its own. Sizing is\nowned by the consumer, since only the consumer knows how large the menu may\ngrow in a given layout.\n\nFrom a web components perspective, drive the size from the host element and\nthe slotted light-DOM nodes — not from component properties:\n\n- **Bound the whole menu** by giving the host element a definite `height`. The\n  menu fills that height and the alert list scrolls within the remaining space\n  while the footer and content keep their size. This is the recommended\n  approach. (A `max-height` alone will not bound the list — the internal\n  scroll needs a definite height to resolve against.)\n- **Size sections independently** (advanced) by sizing the slotted nodes\n  directly — e.g. a fixed-height `content` element, or a capped, scrollable\n  wrapper around the `alarms` items.\n- **Leave it unbounded** to let the menu grow with its content.",
           "name": "ObcIntegrationVesselMenu",
           "slots": [
             {
@@ -70202,24 +70202,27 @@
           "members": [
             {
               "kind": "field",
-              "name": "hideAlarmList",
+              "name": "hasActions",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Hide the alarm list, ensuring it doesn't take space (display: none).",
-              "attribute": "hideAlarmList"
-            }
-          ],
-          "attributes": [
+              "default": "true"
+            },
             {
-              "name": "hideAlarmList",
+              "kind": "field",
+              "name": "hasAlertList",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Hide the alarm list, ensuring it doesn't take space (display: none).",
-              "fieldName": "hideAlarmList"
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "hasContent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true"
             }
           ],
           "superclass": {

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

@@ -8,6 +8,10 @@ const componentStyle = css`
   box-sizing: border-box;
 }
 
+:host {
+  display: block;
+}
+
 .wrapper {
             border-color: var(--integration-normal-enabled-border-color);
             background-color: var(--integration-normal-enabled-background-color);
@@ -18,6 +22,7 @@ const componentStyle = css`
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100%;
   background: var(--container-global-color);
   border-radius: var(
     --app-components-integration-system-dropdown-menu-border-radius
@@ -44,6 +49,10 @@ const componentStyle = css`
   border-radius: 12px;
 }
 
+.footer-container.hidden {
+    display: none;
+  }
+
 .content-area {
   display: flex;
   flex-direction: column;
@@ -53,6 +62,10 @@ const componentStyle = css`
   border-radius: 8px;
 }
 
+.content-area.hidden {
+    display: none;
+  }
+
 .footer-container slot[name="buttons"]::slotted(*) {
   display: flex;
   flex: 1 1 0px;
@@ -67,7 +80,8 @@ const componentStyle = css`
   gap: var(--app-components-integration-system-menu-action-spacing);
 }
 
-.buttons-slot {
+.buttons-slot,
+.content-slot {
   display: contents;
 }
 
@@ -81,12 +95,13 @@ const componentStyle = css`
   border-radius: 8px;
 }
 
-.content-container.hidealarmlist {
+.content-container.hidden {
     display: none;
   }
 
 .alertlist {
   width: 100%;
+  height: 100%;
 }
 
 .leading-icon {

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

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

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

@@ -2,17 +2,39 @@ import { LitElement } from 'lit';
 import '../../components/button/button.js';
 import '../../components/icon-button/icon-button.js';
 import '../../icons/icon-placeholder.js';
+import '../../icons/icon-unacknowledged.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.
  *
+ * ## Sizing
+ *
+ * The menu hugs its content and never reserves more space than its slotted
+ * sections need; it deliberately does not impose a height of its own. Sizing is
+ * owned by the consumer, since only the consumer knows how large the menu may
+ * grow in a given layout.
+ *
+ * From a web components perspective, drive the size from the host element and
+ * the slotted light-DOM nodes — not from component properties:
+ *
+ * - **Bound the whole menu** by giving the host element a definite `height`. The
+ *   menu fills that height and the alert list scrolls within the remaining space
+ *   while the footer and content keep their size. This is the recommended
+ *   approach. (A `max-height` alone will not bound the list — the internal
+ *   scroll needs a definite height to resolve against.)
+ * - **Size sections independently** (advanced) by sizing the slotted nodes
+ *   directly — e.g. a fixed-height `content` element, or a capped, scrollable
+ *   wrapper around the `alarms` items.
+ * - **Leave it unbounded** to let the menu grow with its content.
+ *
  * @slot buttons - Buttons shown in the footer.
  * @slot content - Main content shown in the content area.
  * @slot alarms - Alarm items rendered inside the alert list.
  */
 export declare class ObcIntegrationVesselMenu extends LitElement {
-    /** Hide the alarm list, ensuring it doesn't take space (display: none). */
-    hideAlarmList: boolean;
+    hasActions: boolean;
+    hasAlertList: boolean;
+    hasContent: boolean;
     protected render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

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

@@ -1 +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;;;;;;GAMG;AAEH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,2EAA2E;IAChD,aAAa,UAAS;cAE9B,MAAM;IA2BzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}
+{"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,oCAAoC,CAAC;AAC5C,OAAO,gDAAgD,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,qBACa,wBAAyB,SAAQ,UAAU;IACT,UAAU,UAAQ;IAClB,YAAY,UAAQ;IACpB,UAAU,UAAQ;cAE5C,MAAM;IAuCzB,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

@@ -6,6 +6,7 @@ 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 "../../icons/icon-unacknowledged.js";
 import "../../building-blocks/alert-list/alert-list.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,29 +21,43 @@ var __decorateClass = (decorators, target, key, kind) => {
 let ObcIntegrationVesselMenu = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.hideAlarmList = false;
+    this.hasActions = true;
+    this.hasAlertList = true;
+    this.hasContent = true;
   }
   render() {
     return html`
-      <div
-        class=${classMap({
-      wrapper: true
+      <div class="wrapper">
+        <div
+          class=${classMap({
+      "footer-container": true,
+      hidden: !this.hasActions
     })}
-      >
-        <div class="footer-container">
+        >
           <slot name="buttons" class="buttons-slot"></slot>
         </div>
-        <div class="content-area">
-          <slot name="content"></slot>
+        <div
+          class=${classMap({
+      "content-area": true,
+      hidden: !this.hasContent
+    })}
+        >
+          <slot name="content" class="content-slot"></slot>
         </div>
         <div
           class=${classMap({
       "content-container": true,
-      hidealarmlist: this.hideAlarmList
+      hidden: !this.hasAlertList
     })}
         >
           <obc-alert-list class="alertlist"
             ><slot name="alarms"></slot>
+            <div slot="empty-icon">
+              <obi-unacknowledged></obi-unacknowledged>
+            </div>
+            <div slot="empty-title">
+              <span>No alerts</span>
+            </div>
           </obc-alert-list>
         </div>
       </div>
@@ -51,8 +66,14 @@ let ObcIntegrationVesselMenu = class extends LitElement {
 };
 ObcIntegrationVesselMenu.styles = unsafeCSS(componentStyle);
 __decorateClass([
-  property({ type: Boolean })
-], ObcIntegrationVesselMenu.prototype, "hideAlarmList", 2);
+  property({ type: Boolean, attribute: false })
+], ObcIntegrationVesselMenu.prototype, "hasActions", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcIntegrationVesselMenu.prototype, "hasAlertList", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcIntegrationVesselMenu.prototype, "hasContent", 2);
 ObcIntegrationVesselMenu = __decorateClass([
   customElement("obc-integration-vessel-menu")
 ], ObcIntegrationVesselMenu);

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

@@ -1 +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 buttons - Buttons shown in the footer.\n * @slot content - Main content shown in the content area.\n * @slot alarms - Alarm items rendered inside the alert list.\n */\n\n@customElement('obc-integration-vessel-menu')\nexport class ObcIntegrationVesselMenu extends LitElement {\n  /** Hide the alarm list, ensuring it doesn't take space (display: none). */\n  @property({type: Boolean}) hideAlarmList = false;\n\n  protected override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n        })}\n      >\n        <div class=\"footer-container\">\n          <slot name=\"buttons\" class=\"buttons-slot\"></slot>\n        </div>\n        <div class=\"content-area\">\n          <slot name=\"content\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-container': true,\n            hidealarmlist: this.hideAlarmList,\n          })}\n        >\n          <obc-alert-list class=\"alertlist\"\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":";;;;;;;;;;;;;;;;;;;AAoBO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEsB,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAExB,SAAS;AAC1B,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,IAAA,CACV,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBASQ,SAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,eAAe,KAAK;AAAA,IAAA,CACrB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQV;AAGF;AAhCa,yBA+BK,SAAS,UAAU,cAAc;AA7BtB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,yBAEgB,WAAA,iBAAA,CAAA;AAFhB,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}
+{"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 '../../icons/icon-unacknowledged.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 * ## Sizing\n *\n * The menu hugs its content and never reserves more space than its slotted\n * sections need; it deliberately does not impose a height of its own. Sizing is\n * owned by the consumer, since only the consumer knows how large the menu may\n * grow in a given layout.\n *\n * From a web components perspective, drive the size from the host element and\n * the slotted light-DOM nodes — not from component properties:\n *\n * - **Bound the whole menu** by giving the host element a definite `height`. The\n *   menu fills that height and the alert list scrolls within the remaining space\n *   while the footer and content keep their size. This is the recommended\n *   approach. (A `max-height` alone will not bound the list — the internal\n *   scroll needs a definite height to resolve against.)\n * - **Size sections independently** (advanced) by sizing the slotted nodes\n *   directly — e.g. a fixed-height `content` element, or a capped, scrollable\n *   wrapper around the `alarms` items.\n * - **Leave it unbounded** to let the menu grow with its content.\n *\n * @slot buttons - Buttons shown in the footer.\n * @slot content - Main content shown in the content area.\n * @slot alarms - Alarm items rendered inside the alert list.\n */\n\n@customElement('obc-integration-vessel-menu')\nexport class ObcIntegrationVesselMenu extends LitElement {\n  @property({type: Boolean, attribute: false}) hasActions = true;\n  @property({type: Boolean, attribute: false}) hasAlertList = true;\n  @property({type: Boolean, attribute: false}) hasContent = true;\n\n  protected override render() {\n    return html`\n      <div class=\"wrapper\">\n        <div\n          class=${classMap({\n            'footer-container': true,\n            hidden: !this.hasActions,\n          })}\n        >\n          <slot name=\"buttons\" class=\"buttons-slot\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-area': true,\n            hidden: !this.hasContent,\n          })}\n        >\n          <slot name=\"content\" class=\"content-slot\"></slot>\n        </div>\n        <div\n          class=${classMap({\n            'content-container': true,\n            hidden: !this.hasAlertList,\n          })}\n        >\n          <obc-alert-list class=\"alertlist\"\n            ><slot name=\"alarms\"></slot>\n            <div slot=\"empty-icon\">\n              <obi-unacknowledged></obi-unacknowledged>\n            </div>\n            <div slot=\"empty-title\">\n              <span>No alerts</span>\n            </div>\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":";;;;;;;;;;;;;;;;;;;;AAyCO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACwC,SAAA,aAAa;AACb,SAAA,eAAe;AACf,SAAA,aAAa;AAAA,EAAA;AAAA,EAEvC,SAAS;AAC1B,WAAO;AAAA;AAAA;AAAA,kBAGO,SAAS;AAAA,MACf,oBAAoB;AAAA,MACpB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKM,SAAS;AAAA,MACf,gBAAgB;AAAA,MAChB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKM,SAAS;AAAA,MACf,qBAAqB;AAAA,MACrB,QAAQ,CAAC,KAAK;AAAA,IAAA,CACf,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcV;AAGF;AA7Ca,yBA4CK,SAAS,UAAU,cAAc;AA3CJ,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GADhC,yBACkC,WAAA,cAAA,CAAA;AACA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAFhC,yBAEkC,WAAA,gBAAA,CAAA;AACA,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAHhC,yBAGkC,WAAA,cAAA,CAAA;AAHlC,2BAAN,gBAAA;AAAA,EADN,cAAc,6BAA6B;AAAA,GAC/B,wBAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.72",
+  "version": "2.0.0-next.73",
   "type": "module",
   "repository": {
     "type": "git",

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.css

@@ -2,11 +2,16 @@
   box-sizing: border-box;
 }
 
+:host {
+  display: block;
+}
+
 .wrapper {
   @mixin style style=integration-normal noClick=true;
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100%;
   background: var(--container-global-color);
   border-radius: var(
     --app-components-integration-system-dropdown-menu-border-radius
@@ -31,6 +36,9 @@
   border-top: 1px solid var(--border-divider-color);
   background: var(--container-global-color);
   border-radius: 12px;
+  &.hidden {
+    display: none;
+  }
 }
 
 .content-area {
@@ -40,6 +48,9 @@
   gap: 8px;
   align-self: stretch;
   border-radius: 8px;
+  &.hidden {
+    display: none;
+  }
 }
 
 .footer-container slot[name="buttons"]::slotted(*) {
@@ -56,7 +67,8 @@
   gap: var(--app-components-integration-system-menu-action-spacing);
 }
 
-.buttons-slot {
+.buttons-slot,
+.content-slot {
   display: contents;
 }
 
@@ -68,13 +80,14 @@
   min-height: 0;
   flex: 1;
   border-radius: 8px;
-  &.hidealarmlist {
+  &.hidden {
     display: none;
   }
 }
 
 .alertlist {
   width: 100%;
+  height: 100%;
 }
 
 .leading-icon {

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.stories.ts

@@ -102,31 +102,46 @@ const renderAlarms = () => html`
   </obc-alert-menu-item>
 `;
 
+const renderButtons = () => html`
+  <obc-button slot="buttons" ?fullWidth=${true}>Action 1</obc-button>
+  <obc-button slot="buttons" ?fullWidth=${true}>Ac. 2</obc-button>
+  <obc-button slot="buttons" ?fullWidth=${true}>Action number 3</obc-button>
+`;
+
+const renderContent = () => html`
+  <div slot="content" style="padding: 16px;">
+    <p style="margin: 0;">Content area</p>
+  </div>
+`;
+
 const meta: Meta<ObcIntegrationVesselMenu> = {
   title: 'Integration Systems/Integration Vessel Menu',
   component: 'obc-integration-vessel-menu',
   tags: ['alpha'],
-  args: {hideAlarmList: false},
+  args: {hasActions: true, hasAlertList: true, hasContent: true},
   argTypes: {
-    hideAlarmList: {
+    hasActions: {
+      control: 'boolean',
+    },
+    hasAlertList: {
+      control: 'boolean',
+    },
+    hasContent: {
       control: 'boolean',
     },
   },
   parameters: {
     layout: 'centered',
   },
-  decorators: [
-    (story) => html`
-      <div style="height: 400px; display: flex;">${story()}</div>
-    `,
-  ],
 };
 
 export default meta;
 type Story = StoryObj<ObcIntegrationVesselMenu>;
 
 interface IntegrationVesselMenuArgs {
-  hideAlarmList: boolean;
+  hasActions: boolean;
+  hasAlertList: boolean;
+  hasContent: boolean;
 }
 
 type IntegrationVesselMenuTemplate = (
@@ -134,69 +149,23 @@ type IntegrationVesselMenuTemplate = (
 ) => ReturnType<typeof html>;
 
 const template: IntegrationVesselMenuTemplate = (args) => html`
-  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
-    <div slot="content" style="padding: 24px;">
-      <div style="width: 496px; height: 256;">
-        <p>Content area</p>
-      </div>
-    </div>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 1 clicked')}
-      ?fullWidth=${true}
-    >
-      <div>Action 1</div>
-    </obc-button>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 2 clicked')}
-      ?fullWidth=${true}
-    >
-      Ac. 2
-    </obc-button>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 3 clicked')}
-      ?fullWidth=${true}
-    >
-      Action number 3
-    </obc-button>
-
-    ${renderAlarms()}
-  </obc-integration-vessel-menu>
-`;
-
-const templateWithoutAlarms: IntegrationVesselMenuTemplate = (args) => html`
-  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 1 clicked')}
-      ?fullWidth=${true}
-    >
-      Action 1
-    </obc-button>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 2 clicked')}
-      ?fullWidth=${true}
-    >
-      Ac. 2
-    </obc-button>
-    <obc-button
-      slot="buttons"
-      @click=${() => console.log('Button 3 clicked')}
-      ?fullWidth=${true}
-    >
-      Action number 3
-    </obc-button>
-    <div slot="content" style="padding: 24px;">
-      <p>Add content here</p>
-    </div>
+  <obc-integration-vessel-menu
+    style="width: 400px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
+    ${renderButtons()} ${renderContent()} ${renderAlarms()}
   </obc-integration-vessel-menu>
 `;
 
 const templateWrappedButtons: IntegrationVesselMenuTemplate = (args) => html`
-  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
+  <obc-integration-vessel-menu
+    style="width: 600px; height: 400px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
     <div slot="buttons">
       <div style="display: contents;">
         <obc-button ?fullWidth=${true}>Open</obc-button>
@@ -218,15 +187,76 @@ export const Default: Story = {
   render: template,
 };
 
-export const WithoutAlarms: Story = {
-  render: templateWithoutAlarms,
+export const NoActions: Story = {
+  render: template,
+  args: {hasActions: false},
+};
+
+export const NoContent: Story = {
+  render: template,
+  args: {hasContent: false},
+};
+
+export const NoAlertList: Story = {
+  render: template,
+  args: {hasAlertList: false},
 };
 
-export const WithoutAlarmsHideEmptyAlarmList: Story = {
-  render: templateWithoutAlarms,
-  args: {hideAlarmList: true},
+// Recommended bounded usage: the consumer caps the menu by setting a height on
+// the host element. The menu fills that height and the alert list scrolls within
+// the remaining space automatically — no per-slot sizing required.
+const templateConstrained: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu
+    style="width: 400px; height: 500px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
+    ${renderButtons()} ${renderContent()} ${renderAlarms()}
+  </obc-integration-vessel-menu>
+`;
+
+export const Constrained: Story = {
+  render: templateConstrained,
+};
+
+// Without consumer bounding, tall content grows the whole menu unbounded.
+const templateLongContent: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu
+    style="width: 400px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
+    ${renderButtons()}
+    <div slot="content" style="padding: 16px;">
+      <div style="height: 600px;">
+        <p style="margin: 0;">Tall content with no height cap</p>
+      </div>
+    </div>
+  </obc-integration-vessel-menu>
+`;
+
+export const LongContentOverflow: Story = {
+  render: templateLongContent,
+  args: {hasAlertList: false},
 };
 
 export const WithButtonsWrappedInDivWithoutStyling: Story = {
   render: templateWrappedButtons,
 };
+
+const templateNoAlerts: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu
+    style="width: 400px;"
+    .hasActions=${args.hasActions}
+    .hasAlertList=${args.hasAlertList}
+    .hasContent=${args.hasContent}
+  >
+    ${renderButtons()} ${renderContent()}
+  </obc-integration-vessel-menu>
+`;
+
+export const NoAlerts: Story = {
+  render: templateNoAlerts,
+};

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.ts

@@ -7,11 +7,32 @@ import componentStyle from './integration-vessel-menu.css?inline';
 import '../../components/button/button.js';
 import '../../components/icon-button/icon-button.js';
 import '../../icons/icon-placeholder.js';
+import '../../icons/icon-unacknowledged.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.
  *
+ * ## Sizing
+ *
+ * The menu hugs its content and never reserves more space than its slotted
+ * sections need; it deliberately does not impose a height of its own. Sizing is
+ * owned by the consumer, since only the consumer knows how large the menu may
+ * grow in a given layout.
+ *
+ * From a web components perspective, drive the size from the host element and
+ * the slotted light-DOM nodes — not from component properties:
+ *
+ * - **Bound the whole menu** by giving the host element a definite `height`. The
+ *   menu fills that height and the alert list scrolls within the remaining space
+ *   while the footer and content keep their size. This is the recommended
+ *   approach. (A `max-height` alone will not bound the list — the internal
+ *   scroll needs a definite height to resolve against.)
+ * - **Size sections independently** (advanced) by sizing the slotted nodes
+ *   directly — e.g. a fixed-height `content` element, or a capped, scrollable
+ *   wrapper around the `alarms` items.
+ * - **Leave it unbounded** to let the menu grow with its content.
+ *
  * @slot buttons - Buttons shown in the footer.
  * @slot content - Main content shown in the content area.
  * @slot alarms - Alarm items rendered inside the alert list.
@@ -19,30 +40,43 @@ import '../../building-blocks/alert-list/alert-list.js';
 
 @customElement('obc-integration-vessel-menu')
 export class ObcIntegrationVesselMenu extends LitElement {
-  /** Hide the alarm list, ensuring it doesn't take space (display: none). */
-  @property({type: Boolean}) hideAlarmList = false;
+  @property({type: Boolean, attribute: false}) hasActions = true;
+  @property({type: Boolean, attribute: false}) hasAlertList = true;
+  @property({type: Boolean, attribute: false}) hasContent = true;
 
   protected override render() {
     return html`
-      <div
-        class=${classMap({
-          wrapper: true,
-        })}
-      >
-        <div class="footer-container">
+      <div class="wrapper">
+        <div
+          class=${classMap({
+            'footer-container': true,
+            hidden: !this.hasActions,
+          })}
+        >
           <slot name="buttons" class="buttons-slot"></slot>
         </div>
-        <div class="content-area">
-          <slot name="content"></slot>
+        <div
+          class=${classMap({
+            'content-area': true,
+            hidden: !this.hasContent,
+          })}
+        >
+          <slot name="content" class="content-slot"></slot>
         </div>
         <div
           class=${classMap({
             'content-container': true,
-            hidealarmlist: this.hideAlarmList,
+            hidden: !this.hasAlertList,
           })}
         >
           <obc-alert-list class="alertlist"
             ><slot name="alarms"></slot>
+            <div slot="empty-icon">
+              <obi-unacknowledged></obi-unacknowledged>
+            </div>
+            <div slot="empty-title">
+              <span>No alerts</span>
+            </div>
           </obc-alert-list>
         </div>
       </div>