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

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

@@ -9,34 +9,36 @@ const compentStyle = css`
 }
 
 :host {
-  width: 100%;
-  display: block;
+  display: flex;
+  flex: 1;
 }
 
-.wrapper {
+.button-horizontal-divider-container {
   display: flex;
   flex-direction: column;
-  padding: 0;
-  margin: 0;
-  border: none;
-  background: none;
-  appearance: none;
-  width: 100%;
-  border-radius: var(
-      --app-components-integration-system-navigation-item-horizontal-border-radius-top-left
-    )
-    var(
-      --app-components-integration-system-navigation-item-horizontal-border-radius-top-right
-    )
-    var(
-      --app-components-integration-system-navigation-item-horizontal-border-radius-bottom-right
-    )
-    var(
-      --app-components-integration-system-navigation-item-horizontal-border-radius-bottom-left
-    );
+  align-items: stretch;
+  flex: 1;
+}
+
+.button-vertical-divider-container {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.button-vertical-divider-container:has(.touch-target.type-hug) {
+  flex: 0 1 0;
 }
 
-.wrapper {
+.touch-target {
+            cursor: pointer;
+}
+
+.touch-target:focus {
+            outline: none;
+}
+
+.touch-target .content-container {
             border-color: var(--integration-normal-enabled-border-color);
             background-color: var(--integration-normal-enabled-background-color);
             border-width: 1px;
@@ -46,11 +48,7 @@ const compentStyle = css`
             --base-background-color: var(--integration-normal-enabled-background-color);
 }
 
-.wrapper:focus {
-            outline: none;
-}
-
-.wrapper.activated {
+.touch-target.activated .content-container {
             border-color: var(--integration-normal-activated-border-color);
             background-color: var(--integration-normal-activated-background-color);
             --base-border-color: var(--integration-normal-activated-border-color);
@@ -59,18 +57,18 @@ const compentStyle = css`
 
 @media (hover:hover) {
 
-.wrapper:hover {
+.touch-target:hover .content-container {
                         border-color: color-mix(in srgb, var(--integration-normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                         background-color: color-mix(in srgb, var(--integration-normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
             }
 }
 
-.wrapper:active {
+.touch-target:active .content-container {
             border-color: var(--integration-normal-pressed-border-color);
             background-color: var(--integration-normal-pressed-background-color);
 }
 
-.wrapper:focus-visible {
+.touch-target:focus-visible .content-container {
             outline-color: var(--border-focus-color);
             outline-width: var(--global-size-spacing-border-weight-focusframe);
             outline-style: solid;
@@ -78,134 +76,156 @@ const compentStyle = css`
             z-index: 1;
 }
 
-.wrapper:disabled {
+.touch-target:disabled .content-container {
             border-color: var(--integration-normal-disabled-border-color);
             background-color: var(--integration-normal-disabled-background-color);
             cursor: not-allowed;
             color: var(--integration-on-normal-disabled-color) !important;
 }
 
-.wrapper.disabled {
+.touch-target.disabled .content-container {
             border-color: var(--integration-normal-disabled-border-color);
             background-color: var(--integration-normal-disabled-background-color);
             cursor: not-allowed;
             color: var(--integration-on-normal-disabled-color) !important;
 }
 
-.wrapper.selected {
-    margin-bottom: 2px;
-    margin-top: 2px;
-  }
-
-.wrapper.selected {
-            border-color: var(--integration-selected-enabled-border-color);
-            background-color: var(--integration-selected-enabled-background-color);
-            border-width: 1px;
-            border-style: solid;
-            cursor: pointer;
-            --base-border-color: var(--integration-selected-enabled-border-color);
-            --base-background-color: var(--integration-selected-enabled-background-color);
-}
-
-.wrapper.selected:focus {
-            outline: none;
-}
-
-.wrapper.selected.activated {
-            border-color: var(--integration-selected-activated-border-color);
-            background-color: var(--integration-selected-activated-background-color);
-            --base-border-color: var(--integration-selected-activated-border-color);
-            --base-background-color: var(--integration-selected-activated-background-color);
-}
-
-@media (hover:hover) {
-
-.wrapper.selected:hover {
-                        border-color: color-mix(in srgb, var(--integration-selected-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-                        background-color: color-mix(in srgb, var(--integration-selected-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-            }
-}
-
-.wrapper.selected:active {
-            border-color: var(--integration-selected-pressed-border-color);
-            background-color: var(--integration-selected-pressed-background-color);
-}
-
-.wrapper.selected:focus-visible {
-            outline-color: var(--border-focus-color);
-            outline-width: var(--global-size-spacing-border-weight-focusframe);
-            outline-style: solid;
-            border-color: var(--container-global-color);
-            z-index: 1;
-}
-
-.wrapper.selected:disabled {
-            border-color: var(--integration-selected-disabled-border-color);
-            background-color: var(--integration-selected-disabled-background-color);
+.touch-target:disabled {
             cursor: not-allowed;
-            color: var(--integration-on-selected-disabled-color) !important;
 }
 
-.wrapper.selected.disabled {
-            border-color: var(--integration-selected-disabled-border-color);
-            background-color: var(--integration-selected-disabled-background-color);
+.touch-target.disabled {
             cursor: not-allowed;
-            color: var(--integration-on-selected-disabled-color) !important;
 }
 
-.wrapper.selected .icon {
-      color: var(--integration-on-selected-active-color);
-    }
-
-.wrapper.selected .label {
-      color: var(--integration-on-selected-active-color) !important;
-    }
-
-.wrapper.selected .status {
-      color: var(--integration-on-selected-neutral-color) !important;
-    }
-
-:is(.wrapper.selected .info-item) .info-label {
-        color: var(--integration-on-selected-neutral-color) !important;
-      }
+.touch-target {
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-font-weight);
+  font-size: var(--global-typography-ui-body-font-size);
+  line-height: var(--global-typography-ui-body-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  anchor-name: --touch-target;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-height: var(
+    --app-components-integration-system-navigation-item-horizontal-touch-target
+  );
+
+  padding: 4px
+    var(
+      --app-components-integration-system-navigation-item-horizontal-margin-horizontal
+    );
+  border: none;
+  background: transparent;
+  appearance: none;
+  color: var(--integration-on-normal-active-color);
+  width: 100%;
+  border-radius: var(
+      --app-components-integration-system-navigation-item-horizontal-border-radius-top-left
+    )
+    var(
+      --app-components-integration-system-navigation-item-horizontal-border-radius-top-right
+    )
+    var(
+      --app-components-integration-system-navigation-item-horizontal-border-radius-bottom-right
+    )
+    var(
+      --app-components-integration-system-navigation-item-horizontal-border-radius-bottom-left
+    );
+}
 
-:is(.wrapper.selected .info-item) .info-status {
-        color: var(--integration-on-selected-active-color) !important;
-      }
+.touch-target .content-container {
+    display: flex;
+    flex: 1 0 0;
+    align-items: center;
+    min-width: 0;
+    min-height: var(
+      --app-components-integration-system-navigation-item-horizontal-visual-target
+    );
+    padding: 4px
+      var(
+        --app-components-integration-system-navigation-item-horizontal-padding-horizontal
+      );
+    gap: var(
+      --app-components-integration-system-navigation-item-horizontal-label-spacing
+    );
 
-:is(.wrapper.selected .info-readout-item) .info-item-label {
-        color: var(--integration-on-selected-neutral-color);
-      }
+    border-radius: var(
+        --app-components-integration-system-navigation-item-horizontal-border-radius-top-left
+      )
+      var(
+        --app-components-integration-system-navigation-item-horizontal-border-radius-top-right
+      )
+      var(
+        --app-components-integration-system-navigation-item-horizontal-border-radius-bottom-right
+      )
+      var(
+        --app-components-integration-system-navigation-item-horizontal-border-radius-bottom-left
+      );
+    border-top: var(
+        --app-components-integration-system-navigation-item-horizontal-stroke-weight-top
+      )
+      solid var(--integration-normal-enabled-border-color);
+    border-right: var(
+        --app-components-integration-system-navigation-item-horizontal-stroke-weight-right
+      )
+      solid var(--integration-normal-enabled-border-color);
+    border-bottom: var(
+        --app-components-integration-system-navigation-item-horizontal-stroke-weight-bottom
+      )
+      solid var(--integration-normal-enabled-border-color);
+    border-left: var(
+        --app-components-integration-system-navigation-item-horizontal-stroke-weight-left
+      )
+      solid var(--integration-normal-enabled-border-color);
+    background: var(--integration-normal-enabled-background-color);
+  }
 
-:is(.wrapper.selected .info-readout-item) .info-item-value {
-        color: var(--integration-on-selected-active-color);
-      }
+.touch-target.type-hug .content-container {
+    flex: 0 1 auto;
+  }
 
-:is(.wrapper.selected .info-readout-item) .info-item-unit {
-        color: var(--integration-on-selected-neutral-color);
-      }
+.touch-target.type-rich .content-container {
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    padding: 0;
+  }
 
-.wrapper .main-container {
+.touch-target .main-container {
     display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
     padding: var(
         --app-components-integration-system-navigation-item-horizontal-padding-vertical
       )
       var(
         --app-components-integration-system-navigation-item-horizontal-padding-horizontal
+      )
+      var(
+        --app-components-integration-system-navigation-item-horizontal-padding-vertical
+      )
+      var(
+        --app-components-integration-system-navigation-item-horizontal-padding-horizontal-large
       );
+    align-items: center;
+    gap: var(
+      --app-components-integration-system-navigation-item-horizontal-label-spacing
+    );
+    align-self: stretch;
   }
 
-.wrapper .icon-container {
+.touch-target .icon-container {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
   }
 
-.wrapper .text-container {
+.touch-target .text-container {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -216,71 +236,76 @@ const compentStyle = css`
       );
   }
 
-:is(.wrapper .text-container) .label {
-      font-family: var(--font-family-main);
+:is(.touch-target .text-container) .label {
+      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:
     "liga" off,
     "clig" off,
     "ss04" on;
-      color: var(--integration-on-normal-active-color);
+      white-space: nowrap;
+      height: 24px;
     }
 
-:is(.wrapper .text-container) .status {
-      font-family: var(--font-family-main);
+:is(.touch-target .text-container) .status {
+      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:
     "liga" off,
     "clig" off,
     "ss04" on;
-      color: var(--integration-on-normal-neutral-color);
     }
 
-:is(.wrapper .text-container):first-child {
-      padding-left: 0;
-    }
-
-.wrapper .icon {
+.touch-target .icon {
     color: var(--integration-on-normal-neutral-color);
   }
 
-.wrapper .icon.leading {
+.touch-target .icon.leading {
     width: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size-large
+      --app-components-integration-system-navigation-item-horizontal-icon-size
     );
     height: var(
-      --app-components-integration-system-navigation-item-horizontal-icon-size-large
+      --app-components-integration-system-navigation-item-horizontal-icon-size
+    );
+    min-width: var(
+      --app-components-integration-system-navigation-item-horizontal-icon-size
     );
+    flex: 0 0
+      var(
+        --app-components-integration-system-navigation-item-horizontal-icon-size
+      );
   }
 
-.wrapper .icon.trailing {
+.touch-target .icon.trailing {
     width: 28px;
     height: 24px;
   }
 
-.wrapper .info-container {
+.touch-target .info-container {
     display: flex;
     padding: 0
       var(
-        --app-components-integration-system-navigation-item-horizontal-padding-horizontal
+        --app-components-integration-system-navigation-item-horizontal-padding-horizontal-large
       )
       var(
         --app-components-integration-system-navigation-item-horizontal-padding-vertical
       )
       var(
-        --app-components-integration-system-navigation-item-horizontal-padding-horizontal
+        --app-components-integration-system-navigation-item-horizontal-padding-horizontal-large
       );
     align-items: center;
-    justify-content: flex-start;
     gap: var(
       --app-components-integration-system-navigation-item-horizontal-label-spacing
     );
     align-self: stretch;
+    font-weight: var(--font-weight-regular);
   }
 
-:is(.wrapper .info-container) .info-item {
+:is(.touch-target .info-container) .info-item {
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -288,29 +313,30 @@ const compentStyle = css`
       flex-grow: 1;
     }
 
-:is(:is(.wrapper .info-container) .info-item) .info-label {
-        font-family: var(--font-family-main);
+:is(:is(.touch-target .info-container) .info-item) .info-label {
+        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:
     "liga" off,
     "clig" off,
     "ss04" on;
-        color: var(--integration-on-normal-neutral-color);
       }
 
-:is(:is(.wrapper .info-container) .info-item) .info-status {
-        font-family: var(--font-family-main);
+:is(:is(.touch-target .info-container) .info-item) .info-status {
+        font-family: var(--global-typography-font-family);
+        font-weight: var(--global-typography-ui-label-active-font-weight);
         font-size: var(--global-typography-ui-label-active-font-size);
         line-height: var(--global-typography-ui-label-active-line-height);
         font-feature-settings:
     "liga" off,
     "clig" off,
     "ss04" on;
-        color: var(--integration-on-normal-active-color);
+        font-weight: var(--global-typography-ui-label-active-font-weight);
       }
 
-.wrapper .info-readout-item {
+.touch-target .info-readout-item {
     display: grid;
     grid-template-columns: 1fr auto;
     grid-template-areas: "label label" "value unit";
@@ -321,43 +347,284 @@ const compentStyle = css`
     );
   }
 
-:is(.wrapper .info-readout-item) .info-item-label {
+:is(.touch-target .info-readout-item) .info-item-label {
       justify-self: flex-start;
       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:
     "liga" off,
     "clig" off,
     "ss04" on;
-      color: var(--integration-on-normal-neutral-color);
     }
 
-:is(.wrapper .info-readout-item) .info-item-value {
+:is(.touch-target .info-readout-item) .info-item-value {
       grid-area: value;
-      font-family: var(--font-family-main);
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-label-active-font-weight);
       font-size: var(--global-typography-ui-label-active-font-size);
       line-height: var(--global-typography-ui-label-active-line-height);
       font-feature-settings:
     "liga" off,
     "clig" off,
     "ss04" on;
-      color: var(--integration-on-normal-active-color);
+      font-weight: var(--global-typography-ui-label-active-font-weight);
     }
 
-:is(.wrapper .info-readout-item) .info-item-unit {
+:is(.touch-target .info-readout-item) .info-item-unit {
       grid-area: unit;
-      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:
     "liga" off,
     "clig" off,
     "ss04" on;
-      color: var(--integration-on-normal-neutral-color);
     }
 
+.touch-target.variant-normal {
+            cursor: pointer;
+}
+
+.touch-target.variant-normal:focus {
+            outline: none;
+}
+
+.touch-target.variant-normal .content-container {
+            border-color: var(--integration-normal-enabled-border-color);
+            background-color: var(--integration-normal-enabled-background-color);
+            border-width: 1px;
+            border-style: solid;
+            cursor: pointer;
+            --base-border-color: var(--integration-normal-enabled-border-color);
+            --base-background-color: var(--integration-normal-enabled-background-color);
+}
+
+.touch-target.variant-normal.activated .content-container {
+            border-color: var(--integration-normal-activated-border-color);
+            background-color: var(--integration-normal-activated-background-color);
+            --base-border-color: var(--integration-normal-activated-border-color);
+            --base-background-color: var(--integration-normal-activated-background-color);
+}
+
+@media (hover:hover) {
+
+.touch-target.variant-normal:hover .content-container {
+                        border-color: color-mix(in srgb, var(--integration-normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+                        background-color: color-mix(in srgb, var(--integration-normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+            }
+}
+
+.touch-target.variant-normal:active .content-container {
+            border-color: var(--integration-normal-pressed-border-color);
+            background-color: var(--integration-normal-pressed-background-color);
+}
+
+.touch-target.variant-normal:focus-visible .content-container {
+            outline-color: var(--border-focus-color);
+            outline-width: var(--global-size-spacing-border-weight-focusframe);
+            outline-style: solid;
+            border-color: var(--container-global-color);
+            z-index: 1;
+}
+
+.touch-target.variant-normal:disabled .content-container {
+            border-color: var(--integration-normal-disabled-border-color);
+            background-color: var(--integration-normal-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--integration-on-normal-disabled-color) !important;
+}
+
+.touch-target.variant-normal.disabled .content-container {
+            border-color: var(--integration-normal-disabled-border-color);
+            background-color: var(--integration-normal-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--integration-on-normal-disabled-color) !important;
+}
+
+.touch-target.variant-normal:disabled {
+            cursor: not-allowed;
+}
+
+.touch-target.variant-normal.disabled {
+            cursor: not-allowed;
+}
+
+.touch-target.variant-normal:disabled {
+      color: var(--integration-on-normal-disabled-color);
+    }
+
+.touch-target.variant-normal:disabled .icon {
+      color: var(--integration-on-normal-disabled-color);
+    }
+
+.touch-target.variant-flat {
+            cursor: pointer;
+}
+
+.touch-target.variant-flat:focus {
+            outline: none;
+}
+
+.touch-target.variant-flat .content-container {
+            border-color: var(--integration-flat-enabled-border-color);
+            background-color: var(--integration-flat-enabled-background-color);
+            border-width: 1px;
+            border-style: solid;
+            cursor: pointer;
+            --base-border-color: var(--integration-flat-enabled-border-color);
+            --base-background-color: var(--integration-flat-enabled-background-color);
+}
+
+.touch-target.variant-flat.activated .content-container {
+            border-color: var(--integration-flat-activated-border-color);
+            background-color: var(--integration-flat-activated-background-color);
+            --base-border-color: var(--integration-flat-activated-border-color);
+            --base-background-color: var(--integration-flat-activated-background-color);
+}
+
+@media (hover:hover) {
+
+.touch-target.variant-flat:hover .content-container {
+                        border-color: color-mix(in srgb, var(--integration-flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+                        background-color: color-mix(in srgb, var(--integration-flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+            }
+}
+
+.touch-target.variant-flat:active .content-container {
+            border-color: var(--integration-flat-pressed-border-color);
+            background-color: var(--integration-flat-pressed-background-color);
+}
+
+.touch-target.variant-flat:focus-visible .content-container {
+            outline-color: var(--border-focus-color);
+            outline-width: var(--global-size-spacing-border-weight-focusframe);
+            outline-style: solid;
+            border-color: var(--container-global-color);
+            z-index: 1;
+}
+
+.touch-target.variant-flat:disabled .content-container {
+            border-color: var(--integration-flat-disabled-border-color);
+            background-color: var(--integration-flat-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--integration-on-flat-disabled-color) !important;
+}
+
+.touch-target.variant-flat.disabled .content-container {
+            border-color: var(--integration-flat-disabled-border-color);
+            background-color: var(--integration-flat-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--integration-on-flat-disabled-color) !important;
+}
+
+.touch-target.variant-flat:disabled {
+            cursor: not-allowed;
+}
+
+.touch-target.variant-flat.disabled {
+            cursor: not-allowed;
+}
+
+.touch-target.variant-flat:disabled {
+      color: var(--integration-on-flat-disabled-color);
+    }
+
+.touch-target.variant-flat:disabled .icon {
+      color: var(--integration-on-flat-disabled-color);
+    }
+
+.touch-target.selected {
+            cursor: pointer;
+}
+
+.touch-target.selected:focus {
+            outline: none;
+}
+
+.touch-target.selected .content-container {
+            border-color: var(--integration-selected-enabled-border-color);
+            background-color: var(--integration-selected-enabled-background-color);
+            border-width: 1px;
+            border-style: solid;
+            cursor: pointer;
+            --base-border-color: var(--integration-selected-enabled-border-color);
+            --base-background-color: var(--integration-selected-enabled-background-color);
+}
+
+.touch-target.selected.activated .content-container {
+            border-color: var(--integration-selected-activated-border-color);
+            background-color: var(--integration-selected-activated-background-color);
+            --base-border-color: var(--integration-selected-activated-border-color);
+            --base-background-color: var(--integration-selected-activated-background-color);
+}
+
+@media (hover:hover) {
+
+.touch-target.selected:hover .content-container {
+                        border-color: color-mix(in srgb, var(--integration-selected-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+                        background-color: color-mix(in srgb, var(--integration-selected-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+            }
+}
+
+.touch-target.selected:active .content-container {
+            border-color: var(--integration-selected-pressed-border-color);
+            background-color: var(--integration-selected-pressed-background-color);
+}
+
+.touch-target.selected:focus-visible .content-container {
+            outline-color: var(--border-focus-color);
+            outline-width: var(--global-size-spacing-border-weight-focusframe);
+            outline-style: solid;
+            border-color: var(--container-global-color);
+            z-index: 1;
+}
+
+.touch-target.selected:disabled .content-container {
+            border-color: var(--integration-selected-disabled-border-color);
+            background-color: var(--integration-selected-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--integration-on-selected-disabled-color) !important;
+}
+
+.touch-target.selected.disabled .content-container {
+            border-color: var(--integration-selected-disabled-border-color);
+            background-color: var(--integration-selected-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--integration-on-selected-disabled-color) !important;
+}
+
+.touch-target.selected:disabled {
+            cursor: not-allowed;
+}
+
+.touch-target.selected.disabled {
+            cursor: not-allowed;
+}
+
+.touch-target.selected {
+    color: var(--integration-on-selected-active-color);
+}
+
+.touch-target.selected .icon {
+      color: var(--integration-on-selected-neutral-color);
+    }
+
+.type-hug.touch-target {
+  flex: 0 0 auto;
+}
+
+.type-rich.touch-target {
+  align-items: flex-start;
+  padding: 0
+    var(
+      --app-components-integration-system-navigation-item-horizontal-margin-horizontal
+    );
+}
+
 .divider-bottom {
   position: relative;
   left: 4px;
@@ -368,6 +635,55 @@ const compentStyle = css`
   height: 1px;
   background: var(--integration-border-outline);
 }
+
+.divider-right {
+  width: 1px;
+  height: calc(100% - 16px);
+  background-color: var(--integration-border-divider);
+}
+
+.integration-vessel-menu-container {
+  visibility: hidden;
+  position: absolute;
+  position-anchor: --touch-target;
+  top: anchor(bottom);
+}
+
+.integration-vessel-menu-container.show {
+  visibility: visible;
+}
+
+.touch-target:not(.selected):not(.disabled) .info-item-label {
+    color: var(--integration-on-flat-neutral-color);
+  }
+
+.touch-target:not(.selected):not(.disabled) .info-item-value {
+    color: var(--integration-on-flat-active-color);
+  }
+
+.touch-target:not(.selected):not(.disabled) .info-item-unit {
+    color: var(--integration-on-flat-neutral-color);
+  }
+
+.touch-target:not(.selected):not(.disabled) .info-status {
+    color: var(--integration-on-flat-active-color);
+  }
+
+.touch-target:not(.selected):not(.disabled) .info-label {
+    color: var(--integration-on-flat-neutral-color);
+  }
+
+.touch-target:not(.selected):not(.disabled) .label {
+    color: var(--integration-on-normal-active-color);
+  }
+
+.touch-target:not(.selected):not(.disabled) .icon {
+    color: var(--integration-on-normal-neutral-color);
+  }
+
+.touch-target:not(.selected):not(.disabled) .status {
+    color: var(--integration-on-flat-neutral-color);
+  }
 `;
 export {
   compentStyle as default