@redvars/peacock 3.8.0 → 3.8.2

package/src/list/list-item.ts

@@ -1,22 +1,25 @@
-import { html, LitElement } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './list-item.scss';
-import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
-import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
-import { isLink } from '@/__utils/is-link.js';
+import { isLink } from '@/__internal/utils/is-link.js';
 import {
   dispatchActivationClick,
   isActivationClick,
-} from '@/__utils/dispatch-event-utils.js';
+} from '@/__internal/utils/dispatch-event-utils.js';
+import { ARIAMixinStrict } from '@/__internal/aria/aria.js';
+import { mixinBaseButton } from '@/button/base-button/base-button.js';
+import { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';
+import { mixinDelegatesAria } from '@/__internal/aria/delegate.js';
+import { mixinElementInternals } from '@/__internal/mixins/element-internals.js';
 
 /**
  * @label List Item
  * @tag wc-list-item
  * @rawTag list-item
  *
- * @summary A Material 3 list item with leading, trailing and content slots.
+ * @summary A list item with leading, trailing and content slots.
  *
  * @example
  * ```html
@@ -28,16 +31,30 @@ import {
  * ```
  * @tags display
  */
-export class ListItem extends NativeButtonMixin(
-  NativeHyperlinkMixin(LitElement),
+export class ListItem extends mixinBaseButton(
+  mixinHyperlink(mixinDelegatesAria(mixinElementInternals(LitElement))),
 ) {
+  // ── Static ───────────────────────────────────────────────────────────────
+
+  /** @nocollapse */ // eslint-disable-next-line
+  static override shadowRootOptions: ShadowRootInit = {
+    mode: 'open',
+    delegatesFocus: true,
+  };
+
   static styles = [styles];
 
   @property({ type: Boolean, reflect: true }) selected = false;
 
-  @query('#item') readonly itemElement!: HTMLElement | null;
+  /** When true, renders the list-item in a loading skeleton state. */
+  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
-  @state() isPressed = false;
+  @query('#list-item') readonly itemElement!: HTMLElement | null;
+
+  constructor() {
+    super();
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+  }
 
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
@@ -57,7 +74,10 @@ export class ListItem extends NativeButtonMixin(
   }
 
   __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
-    if (this.softDisabled || (this.disabled && this.href)) {
+    // If the button is soft-disabled or a disabled link, we need to explicitly
+    // prevent the click from propagating to other event listeners as well as
+    // prevent the default action.
+    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
       event.stopImmediatePropagation();
       event.preventDefault();
       return;
@@ -71,62 +91,35 @@ export class ListItem extends NativeButtonMixin(
     dispatchActivationClick(this.itemElement);
   };
 
-  __handleKeyDown = (event: KeyboardEvent) => {
-    this.__handlePress(event);
-
-    if (this.disabled || this.softDisabled || !this.itemElement) {
-      return;
-    }
-
-    if (event.key === ' ') {
-      event.preventDefault();
-      this.itemElement.click();
-      return;
-    }
-
-    if (event.key === 'Enter' && !isLink(this)) {
-      event.preventDefault();
-      this.itemElement.click();
-    }
-  };
-
-  __handlePress = (event: KeyboardEvent | MouseEvent) => {
-    if (this.disabled || this.softDisabled) return;
-
-    if (
-      event instanceof KeyboardEvent &&
-      event.type === 'keydown' &&
-      (event.key === 'Enter' || event.key === ' ')
-    ) {
-      this.isPressed = true;
-    } else if (event.type === 'mousedown') {
-      this.isPressed = true;
-    } else {
-      this.isPressed = false;
-    }
-  };
+  private __hasNamedSlot(...names: string[]) {
+    return names.some(name =>
+      Array.from(this.children).some(
+        child => child.getAttribute('slot') === name,
+      ),
+    );
+  }
 
   render() {
+    const isElementLink = isLink(this);
+
     const cssClasses = {
       'list-item': true,
-      'item-element': true,
-      selected: this.selected,
-      disabled: this.disabled || this.softDisabled,
-      pressed: this.isPressed,
+      'native-button': !isElementLink,
+      'native-link': isElementLink,
     };
 
-    if (!isLink(this)) {
+    // Needed for closure conformance
+    const { ariaLabel } = this as ARIAMixinStrict;
+
+    if (!isElementLink) {
       return html`
         <button
-          id="item"
+          id="list-item"
           class=${classMap(cssClasses)}
-          type=${this.htmlType}
           ?disabled=${this.disabled}
+          aria-label="${ariaLabel || nothing}"
           ?aria-disabled=${this.softDisabled}
           @click=${this.__dispatchClick}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handleKeyDown}
-          @keyup=${this.__handlePress}
         >
           ${this.renderContent()}
         </button>
@@ -135,7 +128,7 @@ export class ListItem extends NativeButtonMixin(
 
     return html`
       <a
-        id="item"
+        id="list-item"
         class=${classMap(cssClasses)}
         href=${this.href}
         target=${this.target}
@@ -144,9 +137,6 @@ export class ListItem extends NativeButtonMixin(
         tabindex=${this.disabled ? '-1' : '0'}
         aria-disabled=${String(this.disabled || this.softDisabled)}
         @click=${this.__dispatchClick}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handleKeyDown}
-        @keyup=${this.__handlePress}
       >
         ${this.renderContent()}
       </a>
@@ -154,22 +144,36 @@ export class ListItem extends NativeButtonMixin(
   }
 
   renderContent() {
+    const hasLeading = this.__hasNamedSlot('leading');
+    const hasTrailingSupportingText = this.__hasNamedSlot(
+      'trailing-supporting-text',
+    );
+    const hasTrailing = this.__hasNamedSlot('trailing');
+
     return html`
-      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
-      <div class="background"></div>
-      <wc-ripple class="ripple"></wc-ripple>
-
-      <div class="list-item-content">
-        <div class="leading">
-          <slot name="leading"></slot>
-        </div>
-        <div class="content">
-          <slot></slot>
-        </div>
-        <div class="trailing">
-          <slot name="trailing"></slot>
-        </div>
-      </div>
+      <wc-item class="list-item-content">
+        <wc-focus-ring
+          class="focus-ring"
+          for="list-item"
+          slot="container"
+        ></wc-focus-ring>
+        <div class="background" slot="container"></div>
+        <wc-ripple class="ripple" for="list-item" slot="container"></wc-ripple>
+        <wc-skeleton class="skeleton" slot="container"></wc-skeleton>
+
+        <slot name="leading" slot="start" ?hidden=${!hasLeading}></slot>
+        <slot name="overline" slot="overline"></slot>
+        <slot name="headline" slot="headline"></slot>
+        <slot></slot>
+        <slot name="supporting-text" slot="supporting-text"></slot>
+
+        <slot
+          name="trailing-supporting-text"
+          slot="trailing-supporting-text"
+          ?hidden=${!hasTrailingSupportingText}
+        ></slot>
+        <slot name="trailing" slot="end" ?hidden=${!hasTrailing}></slot>
+      </wc-item>
     `;
   }
 }

package/src/list/list.scss

@@ -1,4 +1,4 @@
-@use "../../scss/mixin";
+@use '../../scss/mixin';
 
 @include mixin.base-styles;
 
@@ -9,16 +9,4 @@
 .list {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-050);
-  padding-block: var(--spacing-050);
-  border-radius: var(--shape-corner-large);
-  background-color: var(--_container-color);
-}
-
-.list.variant-standard {
-  --_container-color: var(--color-surface-container);
-}
-
-.list.variant-vibrant {
-  --_container-color: var(--color-tertiary-container);
 }

package/src/list/list.ts

@@ -1,15 +1,16 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './list.scss';
 import { ListItem } from './list-item.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label List
  * @tag wc-list
  * @rawTag list
  *
- * @summary A Material 3 list container for one or more list items.
+ * @summary A list container for one or more list items.
  *
  * @example
  * ```html
@@ -23,12 +24,14 @@ import { ListItem } from './list-item.js';
  * ```
  * @tags display
  */
+@IndividualComponent
 export class List extends LitElement {
   static styles = [styles];
 
   static Item = ListItem;
 
-  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
+  /**  */
+  @property({ type: String, reflect: true }) variant: 'standard' | 'segmented' =
     'standard';
 
   connectedCallback() {

package/src/{peacock-loader.ts → loader.ts}

@@ -1,90 +1,99 @@
+import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
+import { loadCSS } from './CssLoader.js';
+
 // Eager loaded
+import { Elevation } from '@/elevation/elevation.js';
+import { FocusRing } from '@/focus-ring/focus-ring.js';
+import { Ripple } from '@/ripple/ripple.js';
+import { Icon } from '@/icon/icon.js';
+import { Avatar } from '@/avatar/avatar.js';
+import { Badge } from '@/badge/badge.js';
+import { Divider } from '@/divider/divider.js';
+import { Button } from '@/button/button/button.js';
+import ButtonGroup from '@/button/button-group/button-group.js';
+import { IconButton } from '@/button/icon-button/icon-button.js';
+import { Fab } from '@/button/fab/fab.js';
+import { SegmentedButton } from '@/segmented-button/segmented-button.js';
+import { SegmentedButtonGroup } from '@/segmented-button/segmented-button-group.js';
+import { SplitButton } from '@/split-button/split-button.js';
+import { DropdownButton } from '@/dropdown-button/dropdown-button.js';
+import { Input } from '@/input/input.js';
+import { UrlField } from '@/url-field/url-field.js';
+import { Field } from '@/field/field.js';
+import { NumberField } from '@/number-field/number-field.js';
+import { DatePicker } from '@/date-picker/date-picker.js';
+import { TimePicker } from '@/time-picker/time-picker.js';
+import { Textarea } from '@/textarea/textarea.js';
+import { Switch } from '@/switch/switch.js';
+import { Checkbox } from '@/checkbox/checkbox.js';
+import { Radio } from '@/radio/radio.js';
 
-import { Elevation } from './elevation/elevation.js';
-import { FocusRing } from './focus-ring/focus-ring.js';
-import { Ripple } from './ripple/ripple.js';
+import { Menu } from '@/menu/menu/menu.js';
+import { MenuItem } from '@/menu/menu-item/menu-item.js';
+import { SubMenu } from '@/menu/sub-menu/sub-menu.js';
+import { Item } from '@/item/item.js';
+import { List } from '@/list/list.js';
+import { ListItem } from '@/list/list-item.js';
 
-import { Icon } from './icon/icon.js';
-import { Avatar } from './avatar/avatar.js';
-import { Badge } from './badge/badge.js';
-import { Divider } from './divider/divider.js';
-import { Button } from './button/button/button.js';
-import ButtonGroup from './button/button-group/button-group.js';
-import { IconButton } from './button/icon-button/icon-button.js';
-import { Fab } from './fab/fab.js';
-import { SegmentedButton } from './segmented-button/segmented-button.js';
-import { SegmentedButtonGroup } from './segmented-button/segmented-button-group.js';
-import { SplitButton } from './split-button/split-button.js';
-import { DropdownButton } from './dropdown-button/dropdown-button.js';
-import { Input } from './input/input.js';
-import { UrlField } from './url-field/url-field.js';
-import { Field } from './field/field.js';
-import { NumberField } from './number-field/number-field.js';
-import { DatePicker } from './date-picker/date-picker.js';
-import { TimePicker } from './time-picker/time-picker.js';
-import { Textarea } from './textarea/textarea.js';
-import { Switch } from './switch/switch.js';
-import { Checkbox } from './checkbox/checkbox.js';
-import { Radio } from './radio/radio.js';
+import { Accordion } from '@/accordion/accordion.js';
+import { Link } from '@/link/link.js';
+import { Tag } from '@/chip/tag/tag.js';
+import { Chip } from '@/chip/chip/chip.js';
+import { ChipSet } from '@/chip/chip-set/chip-set.js';
+import { LinearProgress } from '@/progress/linear-progress/linear-progress.js';
+import { CircularProgress } from '@/progress/circular-progress/circular-progress.js';
 
-import { Menu } from './menu/menu/menu.js';
-import { MenuItem } from './menu/menu-item/menu-item.js';
-import { SubMenu } from './menu/sub-menu/sub-menu.js';
-import { Item } from './item/item.js';
-import { List } from './list/list.js';
-import { ListItem } from './list/list-item.js';
+import { Tooltip } from '@/tooltip/tooltip.js';
+import { Popover } from '@/popover/popover.js';
+import { PopoverContent } from '@/popover/popover-content.js';
+import { Breadcrumb, BreadcrumbItem } from '@/breadcrumb/index.js';
 
-import { Accordion } from './accordion/accordion.js';
-import { Link } from './link/link.js';
-import { Tag } from './chip/tag/tag.js';
-import { Chip } from './chip/chip/chip.js';
-import { ChipSet } from './chip/chip-set/chip-set.js';
-import { LinearProgress } from './progress/linear-progress/linear-progress.js';
-import { CircularProgress } from './progress/circular-progress/circular-progress.js';
+import { Skeleton } from '@/skeleton/skeleton.js';
+import { Spinner } from '@/spinner/spinner.js';
 
-import { Tooltip } from './tooltip/tooltip.js';
-import { Popover } from './popover/popover.js';
-import { PopoverContent } from './popover/popover-content.js';
-import { Breadcrumb, BreadcrumbItem } from './breadcrumb/index.js';
+import { EmptyState } from '@/empty-state/empty-state.js';
+import { Container } from '@/container/container.js';
+import { Image } from '@/image/image.js';
+import { Svg } from '@/svg/svg.js';
 
-import { Skeleton } from './skeleton/skeleton.js';
-import { Spinner } from './spinner/spinner.js';
+import { TabGroup } from '@/tabs/tab-group.js';
+import { Tabs } from '@/tabs/tabs.js';
+import { Tab } from '@/tabs/tab.js';
+import { TabPanel } from '@/tabs/tab-panel.js';
+import { Slider } from '@/slider/slider.js';
+import { Table } from '@/table/table.js';
+import { Pagination } from '@/pagination/pagination.js';
+import { SidebarMenu } from '@/sidebar-menu/sidebar-menu.js';
+import { SidebarMenuItem } from '@/sidebar-menu/sidebar-menu-item.js';
+import { SidebarSubMenu } from '@/sidebar-menu/sidebar-sub-menu.js';
+import { Card } from '@/card/card.js';
+import { CardContent } from '@/card/card-content.js';
+import { Alert } from '@/alert/alert.js';
+import { Notification } from '@/notification/notification.js';
+import { NotificationManager } from '@/notification-manager/notification-manager.js';
+import { Snackbar } from '@/snackbar/snackbar.js';
+import { BottomSheet } from '@/bottom-sheet/bottom-sheet.js';
+import { SideSheet } from '@/side-sheet/side-sheet.js';
+import { Modal } from '@/modal/modal.js';
+import { Select } from '@/select/select.js';
+import { SelectOptionElement } from '@/select/option.js';
+import { Search } from '@/search/search.js';
+import { Toolbar } from '@/toolbar/toolbar.js';
+import { AppBar } from '@/app-bar/app-bar.js';
+import { NavigationRail } from '@/navigation-rail/navigation-rail.js';
+import { NavigationRailItem } from '@/navigation-rail/navigation-rail-item.js';
 
-import { EmptyState } from './empty-state/empty-state.js';
-import { Container } from './container/container.js';
-import { Image } from './image/image.js';
-import { Svg } from './svg/svg.js';
+const distDirectory = `${import.meta.url}/..`;
 
-import { LoaderConfig, LoaderUtils } from './LoaderUtils.js';
-import { loadCSS } from './CssLoader.js';
-import { TabGroup } from './tabs/tab-group.js';
-import { Tabs } from './tabs/tabs.js';
-import { Tab } from './tabs/tab.js';
-import { TabPanel } from './tabs/tab-panel.js';
-import { Slider } from './slider/slider.js';
-import { Table } from './table/table.js';
-import { Pagination } from './pagination/pagination.js';
-import { SidebarMenu } from './sidebar-menu/sidebar-menu.js';
-import { SidebarMenuItem } from './sidebar-menu/sidebar-menu-item.js';
-import { SidebarSubMenu } from './sidebar-menu/sidebar-sub-menu.js';
-import { Card } from './card/card.js';
-import { CardContent } from './card/card-content.js';
-import { Banner } from './banner/banner.js';
-import { Notification } from './notification/notification.js';
-import { NotificationManager } from './notification-manager/notification-manager.js';
-import { Snackbar } from './snackbar/snackbar.js';
-import { BottomSheet } from './bottom-sheet/bottom-sheet.js';
-import { SideSheet } from './side-sheet/side-sheet.js';
-import { Modal } from './modal/modal.js';
-import { Select } from './select/select.js';
-import { SelectOptionElement } from './select/option.js';
-import { Search } from './search/search.js';
-import { Toolbar } from './toolbar/toolbar.js';
-import { NavigationRail } from './navigation-rail/navigation-rail.js';
-import { NavigationRailItem } from './navigation-rail/navigation-rail-item.js';
+const url = new URL(import.meta.url);
+const params = url.searchParams;
 
-const distDirectory = `${import.meta.url}/..`;
-await loadCSS(`${distDirectory}/assets/styles.css`);
+// Example: accessing app.js?theme=dark&user=123
+const includeStyles = params.has('styles');
+
+if (includeStyles) {
+  await loadCSS(`${distDirectory}/assets/styles.css`);
+}
 
 /*
 import tooltipStyles from './popover/tooltip.css-component.scss';
@@ -190,8 +199,8 @@ const loaderConfig: LoaderConfig = {
     'wc-card-content': {
       CustomElementClass: CardContent,
     },
-    'wc-banner': {
-      CustomElementClass: Banner,
+    'wc-alert': {
+      CustomElementClass: Alert,
     },
     'wc-notification': {
       CustomElementClass: Notification,
@@ -345,6 +354,9 @@ const loaderConfig: LoaderConfig = {
     'wc-toolbar': {
       CustomElementClass: Toolbar,
     },
+    'wc-app-bar': {
+      CustomElementClass: AppBar,
+    },
     'wc-navigation-rail': {
       CustomElementClass: NavigationRail,
     },

package/src/menu/menu/menu.scss

@@ -1,4 +1,4 @@
-@use "../../../scss/mixin";
+@use '../../../scss/mixin';
 
 @include mixin.base-styles;
 
@@ -18,9 +18,11 @@
   --_menu-exit-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
 
   transition-property: opacity, transform, visibility;
-  transition-duration: var(--_menu-exit-duration), var(--_menu-exit-duration), 0ms;
+  transition-duration:
+    var(--_menu-exit-duration), var(--_menu-exit-duration), 0ms;
   transition-delay: 0ms, 0ms, var(--_menu-exit-duration);
-  transition-timing-function: var(--_menu-exit-easing), var(--_menu-exit-easing), linear;
+  transition-timing-function:
+    var(--_menu-exit-easing), var(--_menu-exit-easing), linear;
 
   &.closed {
     opacity: 0;
@@ -34,9 +36,11 @@
     visibility: visible;
     pointer-events: auto;
     transform: translateY(0) scale(1);
-    transition-duration: var(--_menu-enter-duration), var(--_menu-enter-duration), 0ms;
+    transition-duration:
+      var(--_menu-enter-duration), var(--_menu-enter-duration), 0ms;
     transition-delay: 0ms, 0ms, 0ms;
-    transition-timing-function: var(--_menu-enter-easing), var(--_menu-enter-easing), linear;
+    transition-timing-function:
+      var(--_menu-enter-easing), var(--_menu-enter-easing), linear;
   }
 
   &.preview {
@@ -69,10 +73,7 @@
   .background {
     display: block;
     position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     background-color: var(--_container-color);
     opacity: var(--_container-opacity, 1);
 
@@ -86,7 +87,9 @@
   .elevation {
     --elevation-level: 2;
     transition-duration: 280ms;
-    --elevation-container-shape-start-start: var(--_container-shape-start-start);
+    --elevation-container-shape-start-start: var(
+      --_container-shape-start-start
+    );
     --elevation-container-shape-start-end: var(--_container-shape-start-end);
     --elevation-container-shape-end-start: var(--_container-shape-end-start);
     --elevation-container-shape-end-end: var(--_container-shape-end-end);
@@ -101,7 +104,7 @@
   }
 }
 
-.menu { 
+.menu {
   --_container-shape-start-start: var(--shape-corner-large);
   --_container-shape-start-end: var(--shape-corner-large);
   --_container-shape-end-start: var(--shape-corner-large);

package/src/menu/menu/menu.ts

@@ -3,8 +3,9 @@ import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import type { Placement } from '@floating-ui/dom';
 import styles from './menu.scss';
-import { FloatingController } from '../../__controllers/floating-controller.js';
+import { FloatingController } from '../../__internal/controllers/floating-controller.js';
 import { MenuItem } from '../menu-item/menu-item.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 type CloseReason =
   | { kind: 'click-selection' }
@@ -28,43 +29,56 @@ type CloseReason =
  * </wc-menu>
  * ```
  */
+@IndividualComponent
 export class Menu extends LitElement {
   static styles = [styles];
 
   static Item = MenuItem;
 
+  /** Whether the menu is currently visible. */
   @property({ type: Boolean, reflect: true }) open = false;
 
+  /** Visual variant of the menu. `"vibrant"` applies stronger color emphasis. */
   @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
     'standard';
 
+  /** ID of the anchor element the menu is positioned relative to. */
   @property({ type: String }) anchor = '';
 
+  /** When true, renders the menu in a static preview state (always visible, no animation). */
   @property({ type: Boolean, reflect: true }) preview = false;
 
+  /** When true, the menu will not close when a click occurs outside it. */
   @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })
   stayOpenOnOutsideClick = false;
 
+  /** When true, the menu will not close when focus leaves it. */
   @property({ type: Boolean, attribute: 'stay-open-on-focusout' })
   stayOpenOnFocusout = false;
 
+  /** Set to true when this menu is being used as a submenu inside another menu. */
   @property({ type: Boolean, attribute: 'is-submenu' }) isSubmenu = false;
 
+  /** Floating UI placement of the menu relative to its anchor. */
   @property({ type: String }) placement: Placement = 'bottom-start';
 
+  /** Distance in pixels between the menu and its anchor element. */
   @property({ type: Number }) offset = 6;
 
+  /** Index of the currently focused/active item within the enabled items list. */
   @state() private activeIndex = -1;
 
   @query('.menu') private readonly menuListElement!: HTMLElement;
 
+  /** Direct reference to the anchor element; takes precedence over the `anchor` ID property. */
   anchorElement: HTMLElement | null = null;
 
+  /** Controller managing floating-UI positioning. */
   private readonly _floatingController = new FloatingController(this, {
     trigger: 'manual',
     closeOnClickOutside: false,
     strategy: 'fixed',
-    onOpenChange: (isOpen) => {
+    onOpenChange: isOpen => {
       if (isOpen || !this.open) {
         return;
       }
@@ -73,8 +87,10 @@ export class Menu extends LitElement {
     },
   });
 
+  /** Element that had focus before the menu opened; restored on close. */
   private _lastFocusedElement: HTMLElement | null = null;
 
+  /** Reason that triggered the most recent close, included in the `closed` event detail. */
   private _closeReason: CloseReason = { kind: 'programmatic' };
 
   connectedCallback() {
@@ -234,9 +250,7 @@ export class Menu extends LitElement {
 
   private _isEventFromThisMenu(event: Event) {
     const path = event.composedPath();
-    const sourceMenu = path.find(
-      target => target instanceof Menu,
-    );
+    const sourceMenu = path.find(target => target instanceof Menu);
 
     return sourceMenu === this;
   }
@@ -358,8 +372,6 @@ export class Menu extends LitElement {
     }
   };
 
-
-
   private _onSlotChange = () => {
     this._syncRovingTabIndex();
   };
@@ -446,7 +458,7 @@ export class Menu extends LitElement {
   render() {
     return html`<div
       class=${classMap({
-        'menu': true,
+        menu: true,
         open: !this.preview && this.open,
         closed: !this.preview && !this.open,
         preview: this.preview,