@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.61 → 2.0.0-next.63

package/src/icons/icon-vessel-type-tug-colour.ts

@@ -15,10 +15,10 @@ export class ObiVesselTypeTugColour extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V17C18 20.3137 15.3137 23 12 23C8.68629 23 6 20.3137 6 17V7ZM16.5 7V17C16.5 19.4853 14.4853 21.5 12 21.5C9.51472 21.5 7.5 19.4853 7.5 17V7C7.5 4.51472 9.51472 2.5 12 2.5C14.4853 2.5 16.5 4.51472 16.5 7Z" fill="#DDDDDD"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 17V7C16.5 4.51472 14.4853 2.5 12 2.5C9.51472 2.5 7.5 4.51472 7.5 7V17C7.5 19.4853 9.51472 21.5 12 21.5C14.4853 21.5 16.5 19.4853 16.5 17Z" fill="#DDDDDD"/>
-<path d="M12 5L9 8V11H11.25V13.3542C10.975 13.4322 10.7124 13.553 10.4722 13.7135C10.0199 14.0156 9.66747 14.4451 9.45933 14.9476C9.25119 15.4501 9.19673 16.0031 9.30284 16.5365C9.40895 17.0699 9.67086 17.5599 10.0555 17.9445C10.4401 18.3291 10.9301 18.591 11.4635 18.6972C11.997 18.8033 12.5499 18.7488 13.0524 18.5407C13.5549 18.3325 13.9844 17.9801 14.2865 17.5278C14.5887 17.0756 14.75 16.5439 14.75 16H13.25C13.25 16.2472 13.1767 16.4889 13.0393 16.6945C12.902 16.9 12.7068 17.0602 12.4784 17.1549C12.2499 17.2495 11.9986 17.2742 11.7561 17.226C11.5137 17.1777 11.2909 17.0587 11.1161 16.8839C10.9413 16.7091 10.8223 16.4863 10.774 16.2439C10.7258 16.0014 10.7505 15.7501 10.8452 15.5216C10.9398 15.2932 11.1 15.098 11.3055 14.9607C11.5111 14.8233 11.7528 14.75 12 14.75H12.75V11H15V8L12 5Z" fill="#3D3D3D"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V17C18 20.3137 15.3137 23 12 23C8.68629 23 6 20.3137 6 17V7ZM16.5 7V17C16.5 19.4853 14.4853 21.5 12 21.5C9.51472 21.5 7.5 19.4853 7.5 17V7C7.5 4.51472 9.51472 2.5 12 2.5C14.4853 2.5 16.5 4.51472 16.5 7Z" fill="#3D3D3D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V17C18 20.3137 15.3137 23 12 23C8.68629 23 6 20.3137 6 17V7ZM16.5 7V17C16.5 19.4853 14.4853 21.5 12 21.5C9.51472 21.5 7.5 19.4853 7.5 17V7C7.5 4.51472 9.51472 2.5 12 2.5C14.4853 2.5 16.5 4.51472 16.5 7Z" style="fill: var(--base-categorical-100)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 17V7C16.5 4.51472 14.4853 2.5 12 2.5C9.51472 2.5 7.5 4.51472 7.5 7V17C7.5 19.4853 9.51472 21.5 12 21.5C14.4853 21.5 16.5 19.4853 16.5 17Z" style="fill: var(--base-categorical-100)"/>
+<path d="M12 5L9 8V11H11.25V13.3542C10.975 13.4322 10.7124 13.553 10.4722 13.7135C10.0199 14.0156 9.66747 14.4451 9.45933 14.9476C9.25119 15.4501 9.19673 16.0031 9.30284 16.5365C9.40895 17.0699 9.67086 17.5599 10.0555 17.9445C10.4401 18.3291 10.9301 18.591 11.4635 18.6972C11.997 18.8033 12.5499 18.7488 13.0524 18.5407C13.5549 18.3325 13.9844 17.9801 14.2865 17.5278C14.5887 17.0756 14.75 16.5439 14.75 16H13.25C13.25 16.2472 13.1767 16.4889 13.0393 16.6945C12.902 16.9 12.7068 17.0602 12.4784 17.1549C12.2499 17.2495 11.9986 17.2742 11.7561 17.226C11.5137 17.1777 11.2909 17.0587 11.1161 16.8839C10.9413 16.7091 10.8223 16.4863 10.774 16.2439C10.7258 16.0014 10.7505 15.7501 10.8452 15.5216C10.9398 15.2932 11.1 15.098 11.3055 14.9607C11.5111 14.8233 11.7528 14.75 12 14.75H12.75V11H15V8L12 5Z" style="fill: var(--base-categorical-600)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7V17C18 20.3137 15.3137 23 12 23C8.68629 23 6 20.3137 6 17V7ZM16.5 7V17C16.5 19.4853 14.4853 21.5 12 21.5C9.51472 21.5 7.5 19.4853 7.5 17V7C7.5 4.51472 9.51472 2.5 12 2.5C14.4853 2.5 16.5 4.51472 16.5 7Z" style="fill: var(--base-categorical-600)"/>
 </svg>
 `;
 

package/src/icons/icon-vessel-type-unknown-colour.ts

@@ -14,9 +14,9 @@ export class ObiVesselTypeUnknownColour extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.376 1.35059C15.5589 3.19189 17.7124 6.62132 17.75 10.5576V22.7109H6.25V10.5576L6.25977 10.1904C6.42329 6.40859 8.54116 3.13428 11.625 1.35059L12 1.13379L12.376 1.35059Z" fill="#DDDDDD"/>
-<path d="M7.75 21.1465V22.7109H6.25V21.1465H7.75ZM11.0479 21.2109V22.7109H9.61914V21.2109H11.0479ZM14.3809 21.2109V22.7109H12.9521V21.2109H14.3809ZM17.75 21.1465V22.7109H16.25V21.1465H17.75ZM7.75 17.3486V18.9766H6.25V17.3486H7.75ZM17.75 17.3477V18.9756H16.25V17.3477H17.75ZM7.75 13.5498V15.1777H6.25V13.5498H7.75ZM17.75 13.5498V15.1777H16.25V13.5498H17.75ZM7.03418 9.82422L7.78125 9.88672C7.76249 10.1129 7.75221 10.3415 7.75 10.5723V11.3789H6.25V10.5576L6.26074 10.1582C6.26687 10.0257 6.27622 9.89392 6.28711 9.7627L7.03418 9.82422ZM17.7129 9.7627C17.7347 10.0252 17.7474 10.2903 17.75 10.5576V11.3789H16.25V10.5723L16.2402 10.2275C16.235 10.1133 16.2271 9.99974 16.2178 9.88672L16.9658 9.82422L17.7129 9.7627ZM7.90625 6.49512L8.58789 6.80859C8.39863 7.22094 8.23898 7.6496 8.11133 8.0918L6.66992 7.67578C6.81849 7.16115 7.00443 6.6623 7.22461 6.18262L7.90625 6.49512ZM16.7754 6.18262C16.9955 6.66225 17.1815 7.1612 17.3301 7.67578L15.8887 8.0918C15.761 7.64966 15.6013 7.2209 15.4121 6.80859L16.0938 6.49512L16.7754 6.18262ZM10.3945 4.18652C10.0748 4.51263 9.77873 4.86212 9.50977 5.23242L8.2959 4.35156C8.60847 3.92121 8.95275 3.51453 9.32422 3.13574L10.3945 4.18652ZM14.6758 3.13574C15.0472 3.51453 15.3916 3.92122 15.7041 4.35156L14.4902 5.23242C14.2213 4.86211 13.9252 4.51264 13.6055 4.18652L14.6758 3.13574ZM12.376 1.35059C12.6063 1.4838 12.8308 1.62603 13.0498 1.77539L12.627 2.39453L12.2051 3.01465L12 3L11.7949 3.01465L11.373 2.39453L10.9502 1.77539C11.1693 1.626 11.3946 1.48382 11.625 1.35059L12 1.13379L12.376 1.35059Z" fill="#3D3D3D"/>
-<path d="M10.9865 14.5685C10.9865 14.2999 11.0165 14.0597 11.0766 13.848C11.1441 13.6282 11.253 13.4247 11.4032 13.2374C11.5608 13.0502 11.7673 12.8548 12.0225 12.6513C12.2553 12.464 12.4392 12.3012 12.5743 12.1628C12.717 12.0163 12.8183 11.8738 12.8784 11.7354C12.9459 11.5889 12.9797 11.4261 12.9797 11.2469C12.9797 10.9701 12.8896 10.7626 12.7095 10.6242C12.5293 10.4776 12.274 10.4043 11.9437 10.4043C11.6209 10.4043 11.3056 10.4573 10.9977 10.5631C10.6974 10.6689 10.3896 10.8073 10.0743 10.9783L9.5 9.7327C9.86036 9.51289 10.2508 9.33786 10.6712 9.2076C11.0916 9.0692 11.5533 9 12.0563 9C12.8296 9 13.4302 9.20353 13.8581 9.61058C14.286 10.0095 14.5 10.5265 14.5 11.1615C14.5 11.4953 14.4512 11.7883 14.3536 12.0407C14.256 12.2849 14.1059 12.5129 13.9032 12.7246C13.708 12.9281 13.4677 13.1479 13.1824 13.384C12.9572 13.5631 12.7845 13.7178 12.6644 13.848C12.5443 13.9701 12.4617 14.0923 12.4167 14.2144C12.3791 14.3365 12.3604 14.483 12.3604 14.654V14.9959H10.9865V14.5685ZM10.795 17.0109C10.795 16.6445 10.8851 16.3881 11.0653 16.2415C11.2455 16.095 11.467 16.0217 11.7297 16.0217C11.985 16.0217 12.2027 16.095 12.3829 16.2415C12.5631 16.3881 12.6532 16.6445 12.6532 17.0109C12.6532 17.3609 12.5631 17.6133 12.3829 17.768C12.2027 17.9227 11.985 18 11.7297 18C11.467 18 11.2455 17.9227 11.0653 17.768C10.8851 17.6133 10.795 17.3609 10.795 17.0109Z" fill="#3D3D3D"/>
+<path d="M12.376 1.35059C15.5589 3.19189 17.7124 6.62132 17.75 10.5576V22.7109H6.25V10.5576L6.25977 10.1904C6.42329 6.40859 8.54116 3.13428 11.625 1.35059L12 1.13379L12.376 1.35059Z" style="fill: var(--base-categorical-100)"/>
+<path d="M7.75 21.1465V22.7109H6.25V21.1465H7.75ZM11.0479 21.2109V22.7109H9.61914V21.2109H11.0479ZM14.3809 21.2109V22.7109H12.9521V21.2109H14.3809ZM17.75 21.1465V22.7109H16.25V21.1465H17.75ZM7.75 17.3486V18.9766H6.25V17.3486H7.75ZM17.75 17.3477V18.9756H16.25V17.3477H17.75ZM7.75 13.5498V15.1777H6.25V13.5498H7.75ZM17.75 13.5498V15.1777H16.25V13.5498H17.75ZM7.03418 9.82422L7.78125 9.88672C7.76249 10.1129 7.75221 10.3415 7.75 10.5723V11.3789H6.25V10.5576L6.26074 10.1582C6.26687 10.0257 6.27622 9.89392 6.28711 9.7627L7.03418 9.82422ZM17.7129 9.7627C17.7347 10.0252 17.7474 10.2903 17.75 10.5576V11.3789H16.25V10.5723L16.2402 10.2275C16.235 10.1133 16.2271 9.99974 16.2178 9.88672L16.9658 9.82422L17.7129 9.7627ZM7.90625 6.49512L8.58789 6.80859C8.39863 7.22094 8.23898 7.6496 8.11133 8.0918L6.66992 7.67578C6.81849 7.16115 7.00443 6.6623 7.22461 6.18262L7.90625 6.49512ZM16.7754 6.18262C16.9955 6.66225 17.1815 7.1612 17.3301 7.67578L15.8887 8.0918C15.761 7.64966 15.6013 7.2209 15.4121 6.80859L16.0938 6.49512L16.7754 6.18262ZM10.3945 4.18652C10.0748 4.51263 9.77873 4.86212 9.50977 5.23242L8.2959 4.35156C8.60847 3.92121 8.95275 3.51453 9.32422 3.13574L10.3945 4.18652ZM14.6758 3.13574C15.0472 3.51453 15.3916 3.92122 15.7041 4.35156L14.4902 5.23242C14.2213 4.86211 13.9252 4.51264 13.6055 4.18652L14.6758 3.13574ZM12.376 1.35059C12.6063 1.4838 12.8308 1.62603 13.0498 1.77539L12.627 2.39453L12.2051 3.01465L12 3L11.7949 3.01465L11.373 2.39453L10.9502 1.77539C11.1693 1.626 11.3946 1.48382 11.625 1.35059L12 1.13379L12.376 1.35059Z" style="fill: var(--base-categorical-600)"/>
+<path d="M10.9865 14.5685C10.9865 14.2999 11.0165 14.0597 11.0766 13.848C11.1441 13.6282 11.253 13.4247 11.4032 13.2374C11.5608 13.0502 11.7673 12.8548 12.0225 12.6513C12.2553 12.464 12.4392 12.3012 12.5743 12.1628C12.717 12.0163 12.8183 11.8738 12.8784 11.7354C12.9459 11.5889 12.9797 11.4261 12.9797 11.2469C12.9797 10.9701 12.8896 10.7626 12.7095 10.6242C12.5293 10.4776 12.274 10.4043 11.9437 10.4043C11.6209 10.4043 11.3056 10.4573 10.9977 10.5631C10.6974 10.6689 10.3896 10.8073 10.0743 10.9783L9.5 9.7327C9.86036 9.51289 10.2508 9.33786 10.6712 9.2076C11.0916 9.0692 11.5533 9 12.0563 9C12.8296 9 13.4302 9.20353 13.8581 9.61058C14.286 10.0095 14.5 10.5265 14.5 11.1615C14.5 11.4953 14.4512 11.7883 14.3536 12.0407C14.256 12.2849 14.1059 12.5129 13.9032 12.7246C13.708 12.9281 13.4677 13.1479 13.1824 13.384C12.9572 13.5631 12.7845 13.7178 12.6644 13.848C12.5443 13.9701 12.4617 14.0923 12.4167 14.2144C12.3791 14.3365 12.3604 14.483 12.3604 14.654V14.9959H10.9865V14.5685ZM10.795 17.0109C10.795 16.6445 10.8851 16.3881 11.0653 16.2415C11.2455 16.095 11.467 16.0217 11.7297 16.0217C11.985 16.0217 12.2027 16.095 12.3829 16.2415C12.5631 16.3881 12.6532 16.6445 12.6532 17.0109C12.6532 17.3609 12.5631 17.6133 12.3829 17.768C12.2027 17.9227 11.985 18 11.7297 18C11.467 18 11.2455 17.9227 11.0653 17.768C10.8851 17.6133 10.795 17.3609 10.795 17.0109Z" style="fill: var(--base-categorical-600)"/>
 </svg>
 `;
 

package/src/icons/icon-warning-acknowledged-iec.ts

@@ -8,7 +8,7 @@ export class ObiWarningAcknowledgedIec extends LitElement {
 
   private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="currentColor"/>
-<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="#E96700"/>
+<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="currentColor"/>
 <path d="M13 13V7H11V13H13Z" fill="currentColor"/>
 <path d="M13 17V15H11V17H13Z" fill="currentColor"/>
 </svg>

package/src/icons/icon-warning-empty.ts

@@ -8,7 +8,7 @@ export class ObiWarningEmpty extends LitElement {
 
   private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" />
-<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="black" stroke-opacity="0.1"/>
+<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="currentColor" />
 </svg>
 `;
 

package/src/icons/icon-warning-noack-iec.ts

@@ -7,13 +7,13 @@ export class ObiWarningNoackIec extends LitElement {
   @property({type: Boolean}) useCssColor = false;
 
   private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" fill="currentColor" stroke="#E96700"/>
+<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" fill="currentColor" stroke="currentColor"/>
 <path d="M19.743 5.67138L13.4143 12.0001L19.743 18.3288C19.3198 18.8459 18.8459 19.3198 18.3288 19.743L12.0001 13.4143L5.67138 19.743C5.15426 19.3199 4.68032 18.8459 4.25715 18.3288L10.5859 12.0001L4.25708 5.67129C4.68024 5.15419 5.15419 4.68024 5.67129 4.25708L12.0001 10.5859L18.3288 4.25715C18.8459 4.68032 19.3199 5.15426 19.743 5.67138Z" fill="currentColor"/>
 </svg>
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" style="fill: var(--alert-warning-color)" style="stroke: var(--alert-warning-outline-color)"/>
+<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" style="fill: var(--alert-warning-color); stroke: var(--alert-warning-outline-color)"/>
 <path d="M19.743 5.67138L13.4143 12.0001L19.743 18.3288C19.3198 18.8459 18.8459 19.3198 18.3288 19.743L12.0001 13.4143L5.67138 19.743C5.15426 19.3199 4.68032 18.8459 4.25715 18.3288L10.5859 12.0001L4.25708 5.67129C4.68024 5.15419 5.15419 4.68024 5.67129 4.25708L12.0001 10.5859L18.3288 4.25715C18.8459 4.68032 19.3199 5.15426 19.743 5.67138Z" style="fill: var(--on-warning-active-color)"/>
 </svg>
 `;

package/src/icons/icon-warning-rectified-iec.ts

@@ -8,7 +8,7 @@ export class ObiWarningRectifiedIec extends LitElement {
 
   private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="currentColor"/>
-<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="#E96700"/>
+<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="currentColor"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M18.2071 9.20706L10.5 16.9142L5.79291 12.2071L7.20712 10.7928L10.5 14.0857L16.7929 7.79285L18.2071 9.20706Z" fill="currentColor"/>
 </svg>
 `;

package/src/icons/icon-warning-silenced-iec.ts

@@ -8,7 +8,7 @@ export class ObiWarningSilencedIec extends LitElement {
 
   private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="currentColor"/>
-<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="#E96700"/>
+<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="currentColor"/>
 <path d="M8.876 6.68796L7.81255 5.62451L6.75189 6.68517L10.0666 9.99993H8.29999C8.01997 9.99993 7.87995 9.99993 7.773 10.0544C7.67892 10.1024 7.60243 10.1789 7.55449 10.2729C7.49999 10.3799 7.49999 10.5199 7.49999 10.7999V13.1999C7.49999 13.48 7.49999 13.62 7.55449 13.7269C7.60243 13.821 7.67892 13.8975 7.773 13.9454C7.87995 13.9999 8.01997 13.9999 8.29999 13.9999H10.6686C10.7909 13.9999 10.8521 13.9999 10.9096 14.0137C10.9606 14.026 11.0094 14.0462 11.0541 14.0736C11.1046 14.1045 11.1478 14.1478 11.2343 14.2342L13.6343 16.6342C14.0627 17.0626 14.2769 17.2768 14.4608 17.2913C14.6203 17.3038 14.7762 17.2393 14.8802 17.1175C15 16.9773 15 16.6744 15 16.0686V14.9333L17.3585 17.2918L18.4192 16.2311L18.0684 15.8803L18.067 15.8817L8.87464 6.68932L8.876 6.68796Z" fill="currentColor"/>
 <path d="M15 10.6933V7.9313C15 7.32548 15 7.02257 14.8802 6.88231C14.7762 6.7606 14.6203 6.69602 14.4608 6.70858C14.2769 6.72305 14.0627 6.93724 13.6343 7.36561L12.6533 8.34664L15 10.6933Z" fill="currentColor"/>
 </svg>

package/src/icons/icon-warning-transferred-iec.ts

@@ -8,7 +8,7 @@ export class ObiWarningTransferredIec extends LitElement {
 
   private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="currentColor"/>
-<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="#E96700"/>
+<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="currentColor"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.2071 6.79297L18.4142 12.0001L13.2071 17.2072L11.7929 15.793L14.5858 13.0001H6V11.0001H14.5858L11.7929 8.20718L13.2071 6.79297Z" fill="currentColor"/>
 </svg>
 `;

package/src/icons/icon-warning-unacknowledged-iec.ts

@@ -8,7 +8,7 @@ export class ObiWarningUnacknowledgedIec extends LitElement {
 
   private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" fill="currentColor"/>
-<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="#E96700"/>
+<path d="M12 2.5C17.2467 2.5 21.5 6.75329 21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5Z" stroke="currentColor"/>
 <path d="M7.5 13.1999V10.7999C7.5 10.5199 7.5 10.3799 7.5545 10.2729C7.60243 10.1789 7.67892 10.1024 7.773 10.0544C7.87996 9.99993 8.01997 9.99993 8.3 9.99993H10.6686C10.7909 9.99993 10.8521 9.99993 10.9096 9.98611C10.9606 9.97386 11.0094 9.95366 11.0541 9.92625C11.1046 9.89533 11.1478 9.85209 11.2343 9.76561L13.6343 7.36561C14.0627 6.93724 14.2769 6.72305 14.4608 6.70858C14.6203 6.69602 14.7763 6.76061 14.8802 6.88231C15 7.02257 15 7.32548 15 7.9313V16.0686C15 16.6744 15 16.9773 14.8802 17.1175C14.7763 17.2392 14.6203 17.3038 14.4608 17.2913C14.2769 17.2768 14.0627 17.0626 13.6343 16.6342L11.2343 14.2342C11.1478 14.1478 11.1046 14.1045 11.0541 14.0736C11.0094 14.0462 10.9606 14.026 10.9096 14.0137C10.8521 13.9999 10.7909 13.9999 10.6686 13.9999H8.3C8.01997 13.9999 7.87996 13.9999 7.773 13.9454C7.67892 13.8975 7.60243 13.821 7.5545 13.7269C7.5 13.62 7.5 13.48 7.5 13.1999Z" fill="currentColor"/>
 </svg>
 `;

package/src/integration-systems/integration-bar/integration-bar.stories.ts

@@ -3,6 +3,7 @@ import {ObcIntegrationBar} from './integration-bar.js';
 import './integration-bar.js';
 import {html, nothing} from 'lit';
 import '../../components/dropdown-button/dropdown-button.js';
+import '../../components/button/button.js';
 import '../../components/clock/clock.js';
 import '../integration-vessel-menu/integration-vessel-menu.js';
 import {
@@ -104,16 +105,23 @@ function renderIntegrationButtons({
       <div slot="info-status">Info Status</div>
       <div slot="status">Status</div>
       ${showIntegrationMenu
-        ? html`<obc-integration-vessel-menu
-            slot="integration-vessel-menu"
-            numberOfButtons="2"
-            @button1-click=${() => console.log('Boat Button 1 clicked')}
-            @button2-click=${() => console.log('Boat Button 2 clicked')}
-            ><span slot="title">Boat</span
-            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-            <div slot="button-1-label">Select</div>
-            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-            <div slot="button-2-label">Dismiss</div>
+        ? html`<obc-integration-vessel-menu slot="integration-vessel-menu"
+            ><obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Boat Button 1 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Select</obc-button
+            >
+            <obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Boat Button 2 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Dismiss</obc-button
+            >
             <div slot="content" style="padding: 24px;">
               <p>Boat is working just fine.</p>
             </div></obc-integration-vessel-menu
@@ -141,16 +149,23 @@ function renderIntegrationButtons({
       <div slot="info-status">Info Status</div>
       <div slot="status">Status</div>
       ${showIntegrationMenu
-        ? html`<obc-integration-vessel-menu
-            slot="integration-vessel-menu"
-            numberOfButtons="2"
-            @button1-click=${() => console.log('Space Ship Button 1 clicked')}
-            @button2-click=${() => console.log('Space Ship Button 2 clicked')}
-            ><span slot="title">Space Ship</span
-            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-            <div slot="button-1-label">Select</div>
-            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-            <div slot="button-2-label">Dismiss</div>
+        ? html`<obc-integration-vessel-menu slot="integration-vessel-menu"
+            ><obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Space Ship Button 1 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Select</obc-button
+            >
+            <obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Space Ship Button 2 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Dismiss</obc-button
+            >
             <div slot="content" style="padding: 24px;">
               <p>Space Ship is working just fine.</p>
             </div></obc-integration-vessel-menu
@@ -178,16 +193,23 @@ function renderIntegrationButtons({
       <div slot="info-status">Info Status</div>
       <div slot="status">Status</div>
       ${showIntegrationMenu
-        ? html`<obc-integration-vessel-menu
-            slot="integration-vessel-menu"
-            numberOfButtons="2"
-            @button1-click=${() => console.log('Vessel Button 1 clicked')}
-            @button2-click=${() => console.log('Vessel Button 2 clicked')}
-            ><span slot="title">Vessel</span
-            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-            <div slot="button-1-label">Select</div>
-            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-            <div slot="button-2-label">Dismiss</div>
+        ? html`<obc-integration-vessel-menu slot="integration-vessel-menu"
+            ><obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Vessel Button 1 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Select</obc-button
+            >
+            <obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Vessel Button 2 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Dismiss</obc-button
+            >
             <div slot="content" style="padding: 24px;">
               <p>Vessel is working just fine.</p>
             </div></obc-integration-vessel-menu
@@ -215,16 +237,23 @@ function renderIntegrationButtons({
       <div slot="info-status">Info Status</div>
       <div slot="status">Status</div>
       ${showIntegrationMenu
-        ? html`<obc-integration-vessel-menu
-            slot="integration-vessel-menu"
-            numberOfButtons="2"
-            @button1-click=${() => console.log('Last Button 1 clicked')}
-            @button2-click=${() => console.log('Last Button 2 clicked')}
-            ><span slot="title">Last</span
-            ><obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-            <div slot="button-1-label">Select</div>
-            <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-            <div slot="button-2-label">Dismiss</div>
+        ? html`<obc-integration-vessel-menu slot="integration-vessel-menu"
+            ><obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Last Button 1 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Select</obc-button
+            >
+            <obc-button
+              slot="buttons"
+              ?fullWidth=${true}
+              ?showLeadingIcon=${true}
+              @click=${() => console.log('Last Button 2 clicked')}
+              ><obi-placeholder slot="leading-icon"></obi-placeholder
+              >Dismiss</obc-button
+            >
             <div slot="content" style="padding: 24px;">
               <p>Last is working just fine.</p>
             </div></obc-integration-vessel-menu

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

@@ -6,8 +6,6 @@
   @mixin style style=integration-normal noClick=true;
   display: flex;
   flex-direction: column;
-  height: 100%;
-  min-width: 788px;
   align-items: center;
   background: var(--container-global-color);
   border-radius: var(
@@ -22,31 +20,57 @@
 .footer-container {
   width: 100%;
   display: flex;
+  align-items: center;
+  align-self: stretch;
   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);
+  padding: var(--app-components-integration-system-menu-padding-vertical)
+    var(--app-components-integration-system-menu-padding-horizontal);
+  gap: var(--app-components-integration-system-menu-action-spacing);
   border-top: 1px solid var(--border-divider-color);
   background: var(--container-global-color);
+  border-radius: 12px;
+}
+
+.content-area {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 8px;
 }
 
-.footer-container obc-button {
-  flex-grow: 1;
+.footer-container slot[name="buttons"]::slotted(:not(obc-button)) {
+  display: contents;
+}
+
+.footer-container slot[name="buttons"]::slotted(*) {
+  display: flex;
+  flex: 1 1 0px;
+  width: 100%;
   white-space: nowrap;
 }
 
+.buttons-slot {
+  display: contents;
+}
+
 .content-container {
   display: flex;
   justify-content: center;
-  align-items: stretch;
+  align-items: flex-start;
   align-self: stretch;
   min-height: 0;
   flex: 1;
+  border-radius: 8px;
+  &.hidealarmlist {
+    display: none;
+  }
 }
 
-.alert-list {
+.alertlist {
   width: 100%;
 }
 

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

@@ -106,13 +106,10 @@ const meta: Meta<ObcIntegrationVesselMenu> = {
   title: 'Integration Systems/Integration Vessel Menu',
   component: 'obc-integration-vessel-menu',
   tags: ['alpha'],
-  args: {numberOfButtons: 3},
+  args: {hideAlarmList: false},
   argTypes: {
-    numberOfButtons: {
-      control: 'number',
-      min: 0,
-      max: 3,
-      step: 1,
+    hideAlarmList: {
+      control: 'boolean',
     },
   },
   parameters: {
@@ -129,7 +126,7 @@ export default meta;
 type Story = StoryObj<ObcIntegrationVesselMenu>;
 
 interface IntegrationVesselMenuArgs {
-  numberOfButtons: number;
+  hideAlarmList: boolean;
 }
 
 type IntegrationVesselMenuTemplate = (
@@ -137,34 +134,61 @@ type IntegrationVesselMenuTemplate = (
 ) => ReturnType<typeof html>;
 
 const template: IntegrationVesselMenuTemplate = (args) => html`
-  <obc-integration-vessel-menu
-    .numberOfButtons=${args.numberOfButtons}
-    @button-1-click=${() => console.log('Button 1 clicked')}
-    @button-2-click=${() => console.log('Button 2 clicked')}
-    @button-3-click=${() => console.log('Button 3 clicked')}
-  >
+  <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>
-    <obi-placeholder slot="button-1-leading-icon"></obi-placeholder>
-    <div slot="button-1-label">Action 1</div>
-    <obi-placeholder slot="button-2-leading-icon"></obi-placeholder>
-    <div slot="button-2-label">Ac. 2</div>
-    <obi-placeholder slot="button-3-leading-icon"></obi-placeholder>
-    <div slot="button-3-label">Action number 3</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
-    .numberOfButtons=${args.numberOfButtons}
-    @button-1-click=${() => console.log('Button 1 clicked')}
-    @button-2-click=${() => console.log('Button 2 clicked')}
-    @button-3-click=${() => console.log('Button 3 clicked')}
-  >
+  <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>
@@ -178,3 +202,8 @@ export const Default: Story = {
 export const WithoutAlarms: Story = {
   render: templateWithoutAlarms,
 };
+
+export const WithoutAlarmsHideEmptyAlarmList: Story = {
+  render: templateWithoutAlarms,
+  args: {hideAlarmList: true},
+};

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

@@ -12,46 +12,15 @@ 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 buttons - Buttons shown in the footer.
  * @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.
  */
 
 @customElement('obc-integration-vessel-menu')
 export class ObcIntegrationVesselMenu extends LitElement {
-  @property({type: Number}) numberOfButtons = 3;
-
-  private 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>`;
-    })}`;
-  }
+  /** Hide the alarm list, ensuring it doesn't take space (display: none). */
+  @property({type: Boolean}) hideAlarmList = false;
 
   protected override render() {
     return html`
@@ -60,13 +29,20 @@ export class ObcIntegrationVesselMenu extends LitElement {
           wrapper: true,
         })}
       >
-        <div class="footer-container">${this.renderButtons()}</div>
+        <div class="footer-container">
+          <slot name="buttons" class="buttons-slot"></slot>
+        </div>
         <div class="content-area">
           <slot name="content"></slot>
         </div>
-        <div class="content-container">
-          <obc-alert-list class="alert-list"
-            ><slot name="alarms"> </slot>
+        <div
+          class=${classMap({
+            'content-container': true,
+            hidealarmlist: this.hideAlarmList,
+          })}
+        >
+          <obc-alert-list class="alertlist"
+            ><slot name="alarms"></slot>
           </obc-alert-list>
         </div>
       </div>