@redvars/peacock 3.6.1 → 3.6.3

package/src/menu/menu/menu.ts

@@ -235,9 +235,7 @@ export class Menu extends LitElement {
   private _isEventFromThisMenu(event: Event) {
     const path = event.composedPath();
     const sourceMenu = path.find(
-      target =>
-        target instanceof HTMLElement &&
-        target.tagName.toLowerCase() === 'wc-menu',
+      target => target instanceof Menu,
     );
 
     return sourceMenu === this;
@@ -252,12 +250,10 @@ export class Menu extends LitElement {
     const ownedItems = this.items;
 
     for (const target of path) {
-      if (target instanceof HTMLElement) {
-        if (target.tagName.toLowerCase() === 'wc-menu-item') {
-          const ownedItem = ownedItems.find(item => item === target);
-          if (ownedItem) {
-            return ownedItem;
-          }
+      if (target instanceof MenuItem) {
+        const ownedItem = ownedItems.find(item => item === target);
+        if (ownedItem) {
+          return ownedItem;
         }
       }
     }
@@ -276,6 +272,16 @@ export class Menu extends LitElement {
     this._syncRovingTabIndex();
   }
 
+  private _dispatchItemActivate(item: MenuItem) {
+    this.dispatchEvent(
+      new CustomEvent('menu-item-activate', {
+        bubbles: true,
+        composed: true,
+        detail: { item },
+      }),
+    );
+  }
+
   private _onClick = (event: Event) => {
     if (!this.open) {
       return;
@@ -287,6 +293,7 @@ export class Menu extends LitElement {
     }
 
     this._setActiveItem(item);
+    this._dispatchItemActivate(item);
     if (item.keepOpen) {
       return;
     }

package/src/menu/menu-item/menu-item.scss

@@ -3,118 +3,40 @@
 @include mixin.base-styles;
 
 :host {
-  padding-inline: var(--spacing-050);
   outline: none;
-}
-
-.menu-item {
-  position: relative;
-  height: 3rem;
-  display: flex;
-  align-items: center;
-  padding-inline: 0.75rem;
-  outline: 0;
-  text-decoration: none;
-
-  @include mixin.get-typography(label-large);
-
-  .menu-item-content {
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    width: 100%;
-    gap: var(--spacing-100);
-
-    color: var(--_label-text-color);
-    opacity: var(--_label-text-opacity, 1);
-    --icon-size: var(--button-icon-size, var(--_button-icon-size));
-    --icon-color: var(--_label-text-color);
-
-    .slot-container {
-      flex: 1;
-    }
-  }
-
-
-  .background {
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--_container-color);
-    opacity: var(--_container-opacity, 1);
 
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    border-end-end-radius: var(--_container-shape-end-end);
-    corner-shape: var(--_container-corner-shape-variant);
-    pointer-events: none;
-  }
-
-   /*
-    Background layers
-   */
-  .focus-ring {
-    z-index: 2;
-    --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
-    --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
-    --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
-    --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
-    --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
-  }
-
-  .ripple {
-    --ripple-state-opacity: var(--_container-state-opacity, 0);
-    --ripple-pressed-color: var(--_container-state-color);
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    border-end-end-radius: var(--_container-shape-end-end);
-    corner-shape: var(--_container-corner-shape-variant);
-  }
+  --menu-item-container-shape-start-start: var(--shape-corner-extra-small);
+  --menu-item-container-shape-start-end: var(--shape-corner-extra-small);
+  --menu-item-container-shape-end-start: var(--shape-corner-extra-small);
+  --menu-item-container-shape-end-end: var(--shape-corner-extra-small);
 }
 
-
 .menu-item {
+  width: 100%;
+  --item-height: 3rem;
+  --item-container-shape-start-start: var(--menu-item-container-shape-start-start);
+  --item-container-shape-start-end: var(--menu-item-container-shape-start-end);
+  --item-container-shape-end-start: var(--menu-item-container-shape-end-start);
+  --item-container-shape-end-end: var(--menu-item-container-shape-end-end);
+  --item-container-shape-variant: none;
+
+  --item-label-font-family: var(--typography-label-large-font-family);
+  --item-label-font-size: var(--typography-label-large-font-size);
+  --item-label-font-weight: var(--typography-label-large-font-weight);
+  --item-label-line-height: var(--typography-label-large-line-height);
+  --item-label-letter-spacing: var(--typography-label-large-letter-spacing);
+
+  --item-label-text-color: var(--menu-item-label-color);
+  --item-leading-trailing-color: var(--menu-item-label-color);
+  --item-supporting-text-color: var(--menu-item-label-color);
+  --item-container-selected-color: var(--menu-item-container-selected-color);
+  --item-label-text-selected-color: var(--menu-item-label-selected-color);
+  --item-icon-size: var(--button-icon-size, var(--_button-icon-size));
+}
 
-  --_container-shape-start-start: var(--menu-item-container-shape-start-start, var(--shape-corner-extra-small));
-  --_container-shape-start-end: var(--menu-item-container-shape-start-end, var(--shape-corner-extra-small));
-  --_container-shape-end-start: var(--menu-item-container-shape-end-start, var(--shape-corner-extra-small));
-  --_container-shape-end-end: var(--menu-item-container-shape-end-end, var(--shape-corner-extra-small));
-  --_container-corner-shape-variant: none;
-  --_label-text-color: var(--menu-item-label-color);
-  --_container-state-color: var(--_label-text-color);
-
-  &:hover:not(:where(.disabled, .selected)) {
-    --_container-state-opacity: 0.08;
-  }
-
-   &.pressed:not(:where(.disabled)) {
-    --_container-state-opacity: 0.12;
-  }
-
-  &.selected {
-    --_container-color: var(--menu-item-container-selected-color);
-    --_label-text-color: var(--menu-item-label-selected-color);
-    --_container-shape-start-start: var(--shape-corner-large);
-    --_container-shape-start-end: var(--shape-corner-large);
-    --_container-shape-end-start: var(--shape-corner-large);
-    --_container-shape-end-end: var(--shape-corner-large);
-    --_container-corner-shape-variant: none;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    --_container-color: var(--color-on-surface);
-    --_container-opacity: 0.1;
-    --_label-text-color: var(--color-on-surface);
-    --_label-text-opacity: 0.38;
-
-    .ripple {
-      display: none;
-    }
-  }
+:host([selected]) {
+  --menu-item-container-shape-start-start: var(--shape-corner-large);
+  --menu-item-container-shape-start-end: var(--shape-corner-large);
+  --menu-item-container-shape-end-start: var(--shape-corner-large);
+  --menu-item-container-shape-end-end: var(--shape-corner-large);
 }

package/src/menu/menu-item/menu-item.ts

@@ -1,11 +1,11 @@
 import { html, LitElement, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './menu-item.scss';
 import colorStyles from './menu-item-colors.scss';
 import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
 import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
-import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
+import { Item } from '@/item/item.js';
 
 /**
  * @label Menu Item
@@ -21,7 +21,6 @@ import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-e
  * ```
  */
 export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
-  
   @property({ type: String }) value = '';
 
   @property({ type: Boolean, reflect: true }) selected = false;
@@ -37,31 +36,40 @@ export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
 
   static styles = [styles, colorStyles];
 
-  @query('#item') readonly itemElement!: HTMLElement | null;
+  @query('wc-item') readonly itemElement!: Item | null;
 
-  /**
-     * States
-     */
-    @state()
-    isPressed = false;
+  private readonly _contentObserver = new MutationObserver(() => {
+    this.requestUpdate();
+  });
+
+  private _rovingTabIndex = -1;
 
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'menuitem');
-    }
-
-    this.addEventListener('click', this.__dispatchClickWithThrottle);
-    window.addEventListener('mouseup', this.__handlePress);
+    this._contentObserver.observe(this, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ['slot'],
+    });
   }
 
   disconnectedCallback() {
-    window.removeEventListener('mouseup', this.__handlePress);
-    this.removeEventListener('click', this.__dispatchClickWithThrottle);
+    this._contentObserver.disconnect();
     super.disconnectedCallback();
   }
 
+  override get tabIndex() {
+    return this._rovingTabIndex;
+  }
+
+  override set tabIndex(value: number) {
+    this._rovingTabIndex = value;
+    this.requestUpdate();
+  }
+
   override focus() {
     this.itemElement?.focus();
   }
@@ -70,129 +78,81 @@ export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
     this.itemElement?.blur();
   }
 
-  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
-      event => {
-        this.__dispatchClick(event);
-      };
-  
-  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
-    // 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)) {
-      event.stopImmediatePropagation();
-      event.preventDefault();
-      return;
-    }
-
-    if (!isActivationClick(event) || !this.itemElement) {
-      return;
-    }
-
-    this.focus();
-    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' && !this.__isLink()) {
-      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;
-    }
-  };
-
-  render() {
-    const isLink = this.__isLink();
+  private _hasNamedSlot(...names: string[]) {
+    return names.some(name =>
+      Array.from(this.children).some(child => child.getAttribute('slot') === name),
+    );
+  }
 
-    const cssClasses = {
-      'menu-item': true,
-      disabled: this.disabled,
-      selected: this.selected,
-      pressed: this.isPressed,
-    };
+  private _hasDefaultSlot() {
+    return Array.from(this.childNodes).some(node => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        return Boolean(node.textContent?.trim());
+      }
+
+      return (
+        node.nodeType === Node.ELEMENT_NODE &&
+        !(node as Element).hasAttribute('slot')
+      );
+    });
+  }
 
+  render() {
     const controls = this.getAttribute('aria-controls');
 
-    if (isLink) {
-      return html`<a
+    return html`
+      <wc-item
         id="item"
-        class=${classMap(cssClasses)}
-        href=${this.href}
-        target=${this.target}
-        tabindex=${this.disabled ? '-1' : '0'}
-
-        @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handleKeyDown}
-        @keyup=${this.__handlePress}
-
-        aria-disabled=${String(this.disabled)}
+        class="menu-item"
+        role="menuitem"
+        tabindex=${String(this.tabIndex)}
+        ?selected=${this.selected}
+        ?disabled=${this.disabled}
+        .softDisabled=${this.softDisabled}
+        .htmlType=${this.htmlType}
+        .href=${this.href}
+        .target=${this.target}
+        .rel=${this.rel}
+        .download=${this.download}
         aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
-        aria-controls=${this.hasSubmenu && controls ? controls : nothing}
-        aria-expanded=${this.hasSubmenu ? String(this.submenuOpen) : nothing}
+        aria-controls=${ifDefined(this.hasSubmenu && controls ? controls : undefined)}
+        aria-expanded=${ifDefined(this.hasSubmenu ? String(this.submenuOpen) : undefined)}
       >
         ${this.renderContent()}
-      </a> `;
-    }
-
-    return html`<div
-      id="item"
-      class=${classMap(cssClasses)}
-      tabindex=${this.disabled ? '-1' : '0'}
-
-      @click=${this.__dispatchClick}
-      @mousedown=${this.__handlePress}
-      @keydown=${this.__handleKeyDown}
-      @keyup=${this.__handlePress}
-
-      aria-disabled=${String(this.disabled)}
-      aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
-      aria-controls=${this.hasSubmenu && controls ? controls : nothing}
-      aria-expanded=${this.hasSubmenu ? String(this.submenuOpen) : nothing}
-    >
-      ${this.renderContent()}
-    </div>`;
+      </wc-item>
+    `;
   }
 
   renderContent() {
+    const hasStart = this._hasNamedSlot('start');
+    const hasOverline = this._hasNamedSlot('overline');
+    const hasHeadline = this._hasNamedSlot('headline');
+    const hasDefault = this._hasDefaultSlot();
+    const hasSupportingText = this._hasNamedSlot('supporting-text');
+    const hasTrailingSupportingText = this._hasNamedSlot(
+      'trailing-supporting-text',
+    );
+    const hasEnd = this._hasNamedSlot('end');
+
     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="menu-item-content" data-variant=${this.variant}>
-        <slot name="leading-icon"></slot>
-        <div class="slot-container">
-          <slot></slot>
-        </div>
-        <slot name="trailing-supporting-text"></slot>
-      </div>
+      ${hasStart ? html`<slot name="start" slot="start"></slot>` : nothing}
+      ${hasOverline
+        ? html`<slot name="overline" slot="overline"></slot>`
+        : nothing}
+      ${hasHeadline ? html`<slot name="headline" slot="headline"></slot>` : nothing}
+      ${hasDefault ? html`<slot></slot>` : nothing}
+      ${hasSupportingText
+        ? html`<slot name="supporting-text" slot="supporting-text"></slot>`
+        : nothing}
+      ${hasTrailingSupportingText
+        ? html`
+            <slot
+              name="trailing-supporting-text"
+              slot="trailing-supporting-text"
+            ></slot>
+          `
+        : nothing}
+      ${hasEnd ? html`<slot name="end" slot="end"></slot>` : nothing}
     `;
   }
 }

package/src/menu/sub-menu/sub-menu.ts

@@ -38,6 +38,10 @@ export class SubMenu extends LitElement {
 
   private _closeTimeout?: number;
 
+  private _resolveAnchorElement(item: MenuItem) {
+    return item.itemElement?.itemElement ?? item.itemElement ?? item;
+  }
+
   private readonly _onChildMenuOpened = () => {
     const { item } = this;
     if (!item) {
@@ -91,7 +95,7 @@ export class SubMenu extends LitElement {
       return;
     }
 
-    menu.anchorElement = item;
+    menu.anchorElement = this._resolveAnchorElement(item);
     menu.isSubmenu = true;
     menu.show();
 
@@ -152,7 +156,7 @@ export class SubMenu extends LitElement {
     menu.addEventListener('closed', this._onChildMenuClosed);
 
     menu.isSubmenu = true;
-    menu.anchorElement = item;
+    menu.anchorElement = this._resolveAnchorElement(item);
     menu.placement =
       getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';
     menu.offset = 4;

package/src/modal/modal.scss

@@ -5,19 +5,19 @@
 :host {
   display: contents;
 
-  --modal-container-color: var(--color-surface-container-high, #ece6f0);
-  --modal-scrim-color: rgba(0, 0, 0, 0.32);
-  --modal-shape: var(--shape-corner-extra-large, 28px);
+  --modal-container-color: var(--color-surface-container-high);
+  --modal-scrim-color: color-mix(in srgb, var(--color-scrim), transparent 32%);
+  --modal-shape: var(--shape-corner-extra-large);
   --modal-min-width: 280px;
   --modal-max-width: 560px;
   --modal-max-height: 90dvh;
-  --modal-transition-duration: var(--duration-medium2, 300ms);
-  --modal-transition-easing: var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
-  --modal-heading-color: var(--color-on-surface, #1c1b1f);
-  --modal-subheading-color: var(--color-on-surface-variant, #49454f);
-  --modal-content-color: var(--color-on-surface-variant, #49454f);
-  --modal-divider-color: var(--color-outline-variant, #cac4d0);
-  --modal-elevation: var(--elevation-level3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3));
+  --modal-transition-duration: var(--duration-medium2);
+  --modal-transition-easing: var(--easing-emphasized);
+  --modal-heading-color: var(--color-on-surface);
+  --modal-subheading-color: var(--color-on-surface-variant);
+  --modal-content-color: var(--color-on-surface-variant);
+  --modal-divider-color: var(--color-outline-variant);
+  --modal-elevation: var(--elevation-level3);
 }
 
 /* Scrim backdrop */

package/src/modal/modal.ts

@@ -9,7 +9,7 @@ type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';
 /**
  * @label Modal
  * @tag wc-modal
- * @rawTag modal-wc
+ * @rawTag modal
  * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
  *
  * @cssprop --modal-container-color - Background color of the dialog container.

package/src/navigation-rail/navigation-rail.ts

@@ -32,17 +32,13 @@ import { NavigationRailItem } from './navigation-rail-item.js';
  * ```html
  * <wc-navigation-rail>
  *   <wc-navigation-rail-item active>
- *     <wc-icon slot="icon">home</wc-icon>
+ *     <wc-icon slot="icon" name="home"></wc-icon>
  *     Home
  *   </wc-navigation-rail-item>
  *   <wc-navigation-rail-item>
- *     <wc-icon slot="icon">search</wc-icon>
+ *     <wc-icon slot="icon" name="search"></wc-icon>
  *     Search
  *   </wc-navigation-rail-item>
- *   <wc-navigation-rail-item>
- *     <wc-icon slot="icon">settings</wc-icon>
- *     Settings
- *   </wc-navigation-rail-item>
  * </wc-navigation-rail>
  * ```
  * @tags navigation