@redvars/peacock 3.6.2 → 3.7.0

package/src/list/list-item.ts

@@ -3,8 +3,9 @@ import { property, query, state } 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 BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
-import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
+import { isLink } from '@/__utils/is-link.js';
 import {
   dispatchActivationClick,
   isActivationClick,
@@ -14,7 +15,6 @@ import {
  * @label List Item
  * @tag wc-list-item
  * @rawTag list-item
- * @parentRawTag list
  *
  * @summary A Material 3 list item with leading, trailing and content slots.
  *
@@ -28,7 +28,9 @@ import {
  * ```
  * @tags display
  */
-export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+export class ListItem extends NativeButtonMixin(
+  NativeHyperlinkMixin(LitElement),
+) {
   static styles = [styles];
 
   @property({ type: Boolean, reflect: true }) selected = false;
@@ -82,7 +84,7 @@ export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
       return;
     }
 
-    if (event.key === 'Enter' && !this.__isLink()) {
+    if (event.key === 'Enter' && !isLink(this)) {
       event.preventDefault();
       this.itemElement.click();
     }
@@ -105,8 +107,6 @@ export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
   };
 
   render() {
-    const isLink = this.__isLink();
-
     const cssClasses = {
       'list-item': true,
       'item-element': true,
@@ -115,7 +115,7 @@ export class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
       pressed: this.isPressed,
     };
 
-    if (!isLink) {
+    if (!isLink(this)) {
       return html`
         <button
           id="item"

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;
         }
       }
     }

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,17 +1,16 @@
 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 NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
+import { Item } from '@/item/item.js';
 
 /**
  * @label Menu Item
  * @tag wc-menu-item
  * @rawTag menu-item
- * @parentRawTag menu
  * @summary An item in a menu list.
  * @tags navigation
  *
@@ -20,8 +19,9 @@ import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-e
  * <wc-menu-item>Menu Item</wc-menu-item>
  * ```
  */
-export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
-  
+export class MenuItem extends NativeButtonMixin(
+  NativeHyperlinkMixin(LitElement),
+) {
   @property({ type: String }) value = '';
 
   @property({ type: Boolean, reflect: true }) selected = false;
@@ -37,31 +37,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 +79,89 @@ 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

@@ -10,7 +10,6 @@ let subMenuIdCounter = 0;
  * @label Sub Menu
  * @tag wc-sub-menu
  * @rawTag sub-menu
- * @parentRawTag menu
  * @summary Connects a menu item to a nested menu.
  */
 export class SubMenu extends LitElement {
@@ -38,6 +37,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 +94,7 @@ export class SubMenu extends LitElement {
       return;
     }
 
-    menu.anchorElement = item;
+    menu.anchorElement = this._resolveAnchorElement(item);
     menu.isSubmenu = true;
     menu.show();
 
@@ -152,7 +155,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/navigation-rail/navigation-rail-item.scss

@@ -99,6 +99,11 @@
       font-weight var(--duration-short4, 200ms) var(--easing-standard, ease);
   }
 
+  /* Hide label when collapsed via class */
+  .label.hidden {
+    display: none;
+  }
+
   /* Active icon slot: hidden by default */
   .active-icon-slot {
     display: none;

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

@@ -1,16 +1,19 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
+import {
+  dispatchActivationClick,
+  isActivationClick,
+} from '@/__utils/dispatch-event-utils.js';
 import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
 import { throttle } from '@/__utils/throttle.js';
+import { isLink } from '@/__utils/is-link.js';
 import styles from './navigation-rail-item.scss';
 
 /**
  * @label Navigation Rail Item
  * @tag wc-navigation-rail-item
  * @rawTag navigation-rail-item
- * @parentRawTag navigation-rail
  *
  * @summary An individual item within a navigation rail.
  * @overview
@@ -77,7 +80,7 @@ export class NavigationRailItem extends LitElement {
     );
 
     observerSlotChangesWithCallback(
-      this.renderRoot.querySelector('slot:not([name])'),
+      this.renderRoot.querySelector('slot.label'),
       hasContent => {
         this._hasLabel = hasContent;
         this.requestUpdate();
@@ -85,7 +88,7 @@ export class NavigationRailItem extends LitElement {
     );
 
     observerSlotChangesWithCallback(
-      this.renderRoot.querySelector('slot[name="active-icon"]'),
+      this.renderRoot.querySelector('slot.active-icon-slot'),
       hasContent => {
         this._hasActiveIcon = hasContent;
         this.requestUpdate();
@@ -128,10 +131,6 @@ export class NavigationRailItem extends LitElement {
     }
   };
 
-  __isLink() {
-    return !!this.href;
-  }
-
   __getDisabledReasonID() {
     return this.disabled && this.disabledReason
       ? `disabled-reason-${this.#id}`
@@ -154,7 +153,7 @@ export class NavigationRailItem extends LitElement {
 
   __renderItemContent() {
     return html`
-      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
 
       <div class="item-content">
         <div class="indicator">
@@ -164,9 +163,7 @@ export class NavigationRailItem extends LitElement {
             <slot name="icon" class="icon-slot"></slot>
           </div>
         </div>
-        ${this._hasLabel && !this.collapsed
-          ? html`<div class="label"><slot></slot></div>`
-          : html`<slot class="hidden-slot"></slot>`}
+        <div class="label ${this.collapsed ? 'hidden' : ''}"><slot></slot></div>
       </div>
 
       ${this.__renderDisabledReason()}
@@ -174,8 +171,6 @@ export class NavigationRailItem extends LitElement {
   }
 
   render() {
-    const isLink = this.__isLink();
-
     const cssClasses = {
       item: true,
       'item-element': true,
@@ -186,7 +181,7 @@ export class NavigationRailItem extends LitElement {
       'has-active-icon': this._hasActiveIcon,
     };
 
-    if (!isLink) {
+    if (!isLink(this)) {
       return html`<button
         id="item"
         class=${classMap(cssClasses)}

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