fix(tray): full width at portrait orientation

components/tray/index.css

@@ -28,12 +28,6 @@ governing permissions and limitations under the License.
   --spectrum-tray-background-color: var(--spectrum-background-layer-2-color);
 }
 
-@media (forced-colors: active) {
-  .spectrum-Tray {
-    --highcontrast-tray-background-color: Background;
-  }
-}
-
 .spectrum-Tray-wrapper {
   inset-inline-start: 0;
   /* Positioned at the bottom of the window */
@@ -45,20 +39,19 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Tray {
-  /* Default to full width when the viewport is in portrait orientation
-   * (height is greater than width)
-   */
+  /* Default to full width when the viewport is in portrait orientation */
   inline-size: 100%;
+  --mod-modal-max-width: 100%;
+  max-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;
-
-  /* Unset spectrum-Modal border-radius */
-  border-radius: unset;
+  border-radius: var(--mod-tray-corner-radius-portrait, 0) var(--mod-tray-corner-radius-portrait, 0) 0 0;
 
   /* Start offset by the animation distance */
   transform: translateY(100%);
@@ -91,14 +84,21 @@ governing permissions and limitations under the License.
   }
 }
 
-/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
- * Limit Tray width to 375px and round corners when the viewport is in landscape orientation
- * (width is greater than height)
- */
 @media screen and (orientation: landscape) {
   .spectrum-Tray {
     border-start-start-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius));
     border-start-end-radius: var(--mod-tray-corner-radius, var(--spectrum-tray-corner-radius));
     max-inline-size: var(--mod-tray-max-inline-size, var(--spectrum-tray-max-inline-size));
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Tray {
+    --highcontrast-tray-background-color: Canvas;
+
+    border: solid;
+    & .spectrum-Dialog {
+      border: none;
+    }
+  }
+}

components/tray/metadata/mods.md

@@ -3,6 +3,7 @@
 | `--mod-tray-background-color`               |
 | `--mod-tray-bottom-to-content-area`         |
 | `--mod-tray-corner-radius`                  |
+| `--mod-tray-corner-radius-portrait`         |
 | `--mod-tray-entry-animation-delay`          |
 | `--mod-tray-entry-animation-duration`       |
 | `--mod-tray-exit-animation-delay`           |

components/tray/metadata/tray.yml

@@ -1,15 +1,16 @@
 name: Tray
 description: |
-  Tray Dialogs are typically used to portray information on mobile device or
-  smaller screens.
+  The Tray component is typically used to portray information on mobile devices or smaller screens.
+
 sections:
   - name: Custom Properties API
     description: |
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/tray/metadata/mods.md">here</a>.
-SpectrumSiteSlug: https://spectrum.adobe.com/page/trays/
+SpectrumSiteSlug: https://spectrum.adobe.com/page/tray/
 examples:
   - id: tray
-    name: Tray
+    name: Standard
+    description: The following example displays differently depending on the orientation of the viewport, using the `orientation` CSS media feature. In portrait orientation, a Tray is displayed at the bottom of the screen and takes up the full width of the view. In landscape orientation, it keeps its portrait width, is centered horizontally, and has rounded upper corners.
     markup: |
       <div class="spectrum-Tray-wrapper spectrum-CSSExample-dialog" style="background: rgba(0,0,0,0.4);">
         <div class="spectrum-Modal spectrum-Tray is-open">

components/tray/stories/template.js

@@ -3,8 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
-import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
-
+import "@spectrum-css/modal/index.css";
 import "../index.css";
 
 export const Template = ({

components/tray/stories/tray.stories.js

@@ -29,6 +29,7 @@ export default {
 		rootClass: "spectrum-Tray",
 		customClasses: ["spectrum-Modal"],
 		isOpen: true,
+		heading: "New Messages",
 	},
 	parameters: {
 		actions: {
@@ -43,15 +44,16 @@ export default {
 };
 
 export const Default = ({
+	heading,
 	...args
 }) => {
 	return html`
 		<div>
 			${Template({
-				heading: "Tray Dialog",
+				...args,
 				content: [
 					() => Dialog({
-							heading: "New Messages",
+							heading,
 							content: ["You have 5 new messages!"],
 							isDismissable: false,
 						})
@@ -62,7 +64,6 @@ export const Default = ({
 				window.isChromatic() ?
 				Template({
 					...args,
-					heading: "Tray Dialog",
 					content: [
 						() => Dialog({
 								heading: "You have new messages waiting in your inbox",
@@ -79,4 +80,3 @@ export const Default = ({
 		</div>
 	`;
 };
-Default.args = {};