feat(tray): use token for top and bottom edge to content area

- Use new token tray-top-to-content-area that applies to both the top
  and the bottom; this adds padding-block to the tray. Tray is changed
  to box-sizing border-box so max-block-size and other size properties
  are not changed by the added padding.

components/tray/index.css

@@ -51,6 +51,9 @@ governing permissions and limitations under the License.
  inline-size: 100%;
  max-block-size: calc(100vh - var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone)));
  margin-block-start: var(--mod-tray-spacing-edge-to-tray-safe-zone, var(--spectrum-tray-spacing-edge-to-tray-safe-zone));
+ padding-block-start: var(--mod-tray-top-to-content-area, var(--spectrum-tray-top-to-content-area));
+ padding-block-end: var(--mod-tray-bottom-to-content-area, var(--spectrum-tray-top-to-content-area));
+ box-sizing: border-box;
  overflow: auto;
  outline: none;
 

components/tray/metadata/mods.md

@@ -1,10 +1,12 @@
 | Modifiable Custom Properties |
 | ------------------------------------------- |
 | `--mod-tray-background-color` |
+| `--mod-tray-bottom-to-content-area` |
 | `--mod-tray-corner-radius` |
 | `--mod-tray-entry-animation-delay` |
 | `--mod-tray-entry-animation-duration` |
 | `--mod-tray-exit-animation-delay` |
 | `--mod-tray-exit-animation-duration` |
 | `--mod-tray-max-inline-size` |
 | `--mod-tray-spacing-edge-to-tray-safe-zone` |
+| `--mod-tray-top-to-content-area` |