fix(overlay): reduce DOM and use of "display: contents" for simplicity and accessibility

Author: Westbrook

packages/overlay/src/OverlayTrigger.ts

@@ -96,7 +96,7 @@ export class OverlayTrigger extends LitElement {
         // Keyboard event availability documented in README.md
         /* eslint-disable lit-a11y/click-events-have-key-events */
         return html`
-            <div
+            <slot
                 id="trigger"
                 @click=${this.onTrigger}
                 @longpress=${this.onTrigger}
@@ -105,12 +105,9 @@ export class OverlayTrigger extends LitElement {
                 @focusin=${this.onTrigger}
                 @focusout=${this.onTrigger}
                 @sp-closed=${this.handleClose}
-            >
-                <slot
-                    @slotchange=${this.onTargetSlotChange}
-                    name="trigger"
-                ></slot>
-            </div>
+                @slotchange=${this.onTargetSlotChange}
+                name="trigger"
+            ></slot>
             <div id="overlay-content">
                 <slot
                     @slotchange=${this.onClickSlotChange}

packages/overlay/src/overlay-trigger.css

@@ -10,11 +10,7 @@ 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 {
+:host([disabled]) ::slotted([slot='trigger']) {
     pointer-events: none;
 }