Overlay review updates.

packages/dialog/dialog-wrapper.md

@@ -38,16 +38,7 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
     >
         Content of the dialog
     </sp-dialog-wrapper>
-    <sp-button
-        slot="trigger"
-        variant="primary"
-        onClick="
-            const overlayTrigger = this.parentElement;
-            overlayTrigger.clickContent.open = true;
-        "
-    >
-        Toggle Dialog
-    </sp-button>
+    <sp-button slot="trigger" variant="primary">Toggle Dialog</sp-button>
 </overlay-trigger>
 ```
 
@@ -72,7 +63,6 @@ import { DialogWrapper } from '@spectrum-web-components/dialog';
         onClick="
             const overlayTrigger = this.parentElement;
             const dialogWrapper = overlayTrigger.clickContent;
-            dialogWrapper.open = true;
             function handleEvent({type}) {
                 spAlert(this, `<sp-dialog-wrapper> '${type}' event handled.`);
                 dialogWrapper.open = false;

packages/overlay/README.md

@@ -51,10 +51,8 @@ import {
     }
 </style>
 <overlay-trigger id="trigger" placement="bottom" offset="6">
-    <sp-button variant="primary" slot="trigger">
-        Button popover
-    </sp-button>
-    <sp-popover dialog slot="click-content" direction="bottom" tip open>
+    <sp-button variant="primary" slot="trigger">Button popover</sp-button>
+    <sp-popover dialog slot="click-content" direction="bottom" tip>
         <div class="options-popover-content">
             <sp-slider
                 value="5"
@@ -66,9 +64,7 @@ import {
             <sp-button>Press me</sp-button>
         </div>
     </sp-popover>
-    <sp-tooltip slot="hover-content" delayed open>
-        Tooltip
-    </sp-tooltip>
+    <sp-tooltip slot="hover-content" delayed>Tooltip</sp-tooltip>
 </overlay-trigger>
 ```
 

packages/overlay/src/ActiveOverlay.ts

@@ -159,7 +159,7 @@ export class ActiveOverlay extends SpectrumElement {
 
     public focus(): void {
         const firstFocusable = this.querySelector(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]'
         ) as HTMLElement;
         if (firstFocusable) {
             firstFocusable.focus();

packages/overlay/src/OverlayTrigger.ts

@@ -79,6 +79,8 @@ export class OverlayTrigger extends LitElement {
                 @click=${this.onTrigger}
                 @mouseenter=${this.onTrigger}
                 @mouseleave=${this.onTrigger}
+                @focusin=${this.onTrigger}
+                @focusout=${this.onTrigger}
             >
                 <slot
                     @slotchange=${this.onTargetSlotChange}
@@ -137,9 +139,11 @@ export class OverlayTrigger extends LitElement {
                 this.onTriggerClick();
                 return;
             case 'mouseenter':
+            case 'focusin':
                 this.onTriggerMouseEnter();
                 return;
             case 'mouseleave':
+            case 'focusout':
                 this.onTriggerMouseLeave();
                 return;
         }

packages/overlay/src/active-overlay.css

@@ -41,6 +41,14 @@ governing permissions and limitations under the License.
     pointer-events: none;
 }
 
+:host(:focus) {
+    outline: none;
+}
+
+:host([placement='none']) ::slotted(*) {
+    height: 100vh;
+}
+
 sp-theme,
 #contents {
     height: 100%;

packages/overlay/src/overlay-stack.ts

@@ -99,6 +99,7 @@ export class OverlayStack {
             return;
         }
         this.tabTrapper.tabIndex = -1;
+        this.tabTrapper.setAttribute('aria-hidden', 'true');
         this.overlayHolder.hidden = false;
     }
 
@@ -108,6 +109,7 @@ export class OverlayStack {
             return;
         }
         this.tabTrapper.removeAttribute('tabindex');
+        this.tabTrapper.removeAttribute('aria-hidden');
         this.overlayHolder.hidden = true;
     }
 
@@ -189,6 +191,12 @@ export class OverlayStack {
                 this.overlays.push(activeOverlay);
                 await activeOverlay.updateComplete;
                 this.addOverlayEventListeners(activeOverlay);
+                const contentWithOpen = (activeOverlay.overlayContent as unknown) as {
+                    open: boolean;
+                };
+                if (typeof contentWithOpen.open !== 'undefined') {
+                    contentWithOpen.open = true;
+                }
                 if (details.receivesFocus === 'auto') {
                     activeOverlay.focus();
                 }
@@ -198,7 +206,7 @@ export class OverlayStack {
                         composed: true,
                         cancelable: true,
                         detail: {
-                            interaction: details.interaction
+                            interaction: details.interaction,
                         },
                     })
                 );
@@ -316,6 +324,12 @@ export class OverlayStack {
     ): Promise<void> {
         if (overlay) {
             await overlay.hide(animated);
+            const contentWithOpen = (overlay.overlayContent as unknown) as {
+                open: boolean;
+            };
+            if (typeof contentWithOpen.open !== 'undefined') {
+                contentWithOpen.open = false;
+            }
             if (overlay.state != 'dispose') return;
 
             const index = this.overlays.indexOf(overlay);

packages/overlay/src/overlay-trigger.css

@@ -10,6 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+#trigger {
+    display: contents;
+}
+
 :host([disabled]) #trigger {
     pointer-events: none;
 }

packages/overlay/stories/overlay-story-components.ts

@@ -222,12 +222,10 @@ class RecursivePopover extends LitElement {
     }
 
     private handleFocusin(): void {
-        console.log('focusin');
         this.focus();
     }
 
     public focus(): void {
-        console.log('focus');
         if (this.shadowRoot.activeElement !== null) {
             return;
         }
@@ -267,18 +265,10 @@ class RecursivePopover extends LitElement {
                 selected="${this.placement}"
                 name="group-example"
             >
-                <sp-radio value="top">
-                    Top
-                </sp-radio>
-                <sp-radio value="right">
-                    Right
-                </sp-radio>
-                <sp-radio value="bottom">
-                    Bottom
-                </sp-radio>
-                <sp-radio value="left">
-                    Left
-                </sp-radio>
+                <sp-radio value="top">Top</sp-radio>
+                <sp-radio value="right">Right</sp-radio>
+                <sp-radio value="bottom">Bottom</sp-radio>
+                <sp-radio value="left">Left</sp-radio>
             </sp-radio-group>
             <overlay-trigger placement="${this.placement}" type="modal">
                 <sp-button

packages/popover/src/Popover.ts

@@ -35,6 +35,9 @@ export class Popover extends SpectrumElement {
         return [popoverStyles];
     }
 
+    @property({ type: Boolean, reflect: true })
+    public open = false;
+
     /**
      * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
      * @attr

packages/tooltip/src/Tooltip.ts

@@ -35,6 +35,9 @@ export class Tooltip extends SpectrumElement {
         return [tooltipStyles];
     }
 
+    @property({ type: Boolean, reflect: true })
+    public open = false;
+
     /**
      * @type {"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "none"}
      * @attr