adobe · Westbrook · Dec 1, 2023 · Nov 6, 2023 · najikahalsema · Nov 30, 2023
diff --git a/packages/action-bar/src/ActionBar.ts b/packages/action-bar/src/ActionBar.ts
@@ -58,7 +58,7 @@ export class ActionBar extends SpectrumElement {
      *
      * @param {String} variant
      */
-    @property({ type: String, reflect: true })
+    @property({ type: String })
     public set variant(variant: string) {
         if (variant === this.variant) {
             return;

diff --git a/packages/button/src/Button.ts b/packages/button/src/Button.ts
@@ -128,6 +128,10 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
         this.treatment = quiet ? 'outline' : 'fill';
     }
 
+    public get quiet(): boolean {
+        return this.treatment === 'outline';
+    }
+
     protected override firstUpdated(changes: PropertyValues<this>): void {
         super.firstUpdated(changes);
         // There is no Spectrum design context for an `<sp-button>` without a variant

diff --git a/packages/overlay/test/index.ts b/packages/overlay/test/index.ts
@@ -628,7 +628,7 @@ export const runOverlayTriggerTests = (type: string): void => {
                 expect(await isOnTopLayer(this.hoverContent)).to.be.false;
 
                 const rect = this.outerTrigger.getBoundingClientRect();
-                const close = oneEvent(this.outerTrigger, 'sp-closed');
+                const open = oneEvent(this.outerTrigger, 'sp-opened');
                 await sendMouse({
                     steps: [
                         {
@@ -640,10 +640,12 @@ export const runOverlayTriggerTests = (type: string): void => {
                         },
                     ],
                 });
-                await nextFrame();
-                await nextFrame();
-                await nextFrame();
-                await nextFrame();
+                await open;
+                const close = oneEvent(this.outerTrigger, 'sp-closed');
+                expect(
+                    await isOnTopLayer(this.hoverContent),
+                    'hover content is available at point'
+                ).to.be.true;
                 await sendMouse({
                     steps: [
                         {

diff --git a/packages/overlay/test/overlay-update.test.ts b/packages/overlay/test/overlay-update.test.ts
@@ -23,6 +23,9 @@ describe('sp-update-overlays event', () => {
             '[label="Other things"]'
         ) as AccordionItem;
 
+        el.content = 'click';
+        await elementUpdated(el);
+
         const height0 = container.getBoundingClientRect().height;
 
         const opened = oneEvent(el, 'sp-opened');

diff --git a/packages/sidenav/test/sidenav.test.ts b/packages/sidenav/test/sidenav.test.ts
@@ -25,6 +25,7 @@ import {
     expect,
     fixture,
     html,
+    nextFrame,
     waitUntil,
 } from '@open-wc/testing';
 import { LitElement, TemplateResult } from '@spectrum-web-components/base';
@@ -393,6 +394,11 @@ describe('Sidenav', () => {
     it('focuses the child anchor not the root when [tabindex=-1]', async () => {
         const el = await fixture<SideNav>(manageTabIndex());
 
+        await nextFrame();
+        await nextFrame();
+        await nextFrame();
+        await nextFrame();
+
         await elementUpdated(el);
         const firstItem = el.querySelector(
             '[value="Section 0"]'
@@ -405,17 +411,21 @@ describe('Sidenav', () => {
         await sendMouse({
             steps: [
                 {
-                    type: 'move',
-                    position: [firstRect.x + 2, firstRect.y + 2],
-                },
-                {
-                    type: 'down',
+                    type: 'click',
+                    position: [
+                        firstRect.x + firstRect.width / 2,
+                        firstRect.y + firstRect.height / 2,
+                    ],
                 },
             ],
         });
         await elementUpdated(el);
 
-        expect(firstItem.focusElement.matches(':focus')).to.be.true;
+        expect(firstItem.matches(':focus'), 'root has focus').to.be.true;
+        expect(
+            firstItem.focusElement.matches(':focus'),
+            'child has more precise focus'
+        ).to.be.true;
     });
     it('manage tab index through shadow DOM', async () => {
         class SideNavTestEl extends LitElement {

diff --git a/packages/slider/src/HandleController.ts b/packages/slider/src/HandleController.ts
@@ -95,7 +95,7 @@ export class HandleController {
 
     public inputForHandle(handle: SliderHandle): HTMLInputElement | undefined {
         if (this.handles.has(handle.handleName)) {
-            const { input } = this.getHandleElements(handle);
+            const { input } = this.getHandleElements(handle) || {};
             return input;
         }
         /* c8 ignore next 2 */
@@ -161,8 +161,9 @@ export class HandleController {
     public get focusElement(): HTMLElement {
         const { input } = this.getActiveHandleElements();
         if (
-            this.host.editable &&
-            !(input as InputWithModel).model.handle.dragging
+            !input ||
+            (this.host.editable &&
+                !(input as InputWithModel).model.handle.dragging)
         ) {
             return this.host.numberField;
         }

diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts
@@ -14,6 +14,7 @@ import {
     CSSResultArray,
     html,
     LitElement,
+    nothing,
     PropertyValues,
     TemplateResult,
 } from '@spectrum-web-components/base';
@@ -45,7 +46,6 @@ import './code-example.js';
 import { copyText } from './copy-to-clipboard.js';
 
 import layoutStyles from './layout.css';
-import { nothing } from 'lit-html';
 import {
     DARK_MODE,
     IS_MOBILE,

diff --git a/projects/documentation/src/utils/templates.ts b/projects/documentation/src/utils/templates.ts
@@ -10,7 +10,12 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { css, CSSResultGroup, html, TemplateResult } from 'lit';
+import {
+    css,
+    type CSSResultGroup,
+    html,
+    type TemplateResult,
+} from '@spectrum-web-components/base';
 
 export function toHtmlTemplateString(code: string): TemplateResult {
     const stringArray = [`${code}`] as any;

diff --git a/tools/base/src/sizedMixin.ts b/tools/base/src/sizedMixin.ts
@@ -47,7 +47,7 @@ export function SizedMixin<T extends Constructor<ReactiveElement>>(
     } = {}
 ): T & Constructor<SizedElementInterface> {
     class SizedElement extends constructor {
-        @property({ type: String, reflect: true })
+        @property({ type: String })
         public get size(): ElementSize {
             return this._size || defaultSize;
         }

diff --git a/tools/base/test/define-element.test.ts b/tools/base/test/define-element.test.ts
@@ -206,7 +206,9 @@ describe('define-element', function () {
             const spyCall = this.warn.getCall(0);
             expect(
                 (spyCall.args.at(0) as string).includes('redefine'),
-                'message should warn about redefining an element'
+                `message should warn about redefining an element, instead got "${spyCall.args.at(
+                    0
+                )}"`
             ).to.be.true;
         })
     );

diff --git a/tools/shared/src/focusable.ts b/tools/shared/src/focusable.ts
@@ -127,8 +127,12 @@ export class Focusable extends FocusVisiblePolyfillMixin(SpectrumElement) {
 
     private onPointerdownManagementOfTabIndex(): void {
         if (this.tabIndex === -1) {
-            this.tabIndex = 0;
-            this.focus({ preventScroll: true });
+            setTimeout(() => {
+                // Ensure this happens _after_ WebKit attempts to focus the :host.
+                this.tabIndex = 0;
+                this.focus({ preventScroll: true });
+                this.tabIndex = -1;
+            });
         }
     }