@redvars/peacock 3.8.1 → 3.8.3

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,33 @@ 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;
+  @property({ type: Boolean, reflect: true })
+  actionable: boolean = 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 +77,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,105 +94,112 @@ 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();
-    }
-  };
+  private __hasNamedSlot(...names: string[]) {
+    return names.some(name =>
+      Array.from(this.children).some(
+        child => child.getAttribute('slot') === name,
+      ),
+    );
+  }
 
-  __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;
-    }
-  };
+  isClickable() {
+    return this.actionable || isLink(this);
+  }
 
   render() {
+    const isElementLink = isLink(this);
+    const clickable = this.isClickable();
+
     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 (!clickable) {
+      return html`
+        <div
+          id="list-item"
+          class=${classMap(cssClasses)}
+          aria-label="${ariaLabel || nothing}"
+        >
+          ${this.renderContent(clickable)}
+        </div>
+      `;
+    }
+
+    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()}
+          ${this.renderContent(clickable)}
         </button>
       `;
     }
 
     return html`
       <a
-        id="item"
+        id="list-item"
         class=${classMap(cssClasses)}
         href=${this.href}
         target=${this.target}
-        rel=${ifDefined(this.rel)}
-        download=${ifDefined(this.download)}
+        ?rel=${this.rel}
+        ?download=${this.download}
         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()}
+        ${this.renderContent(clickable)}
       </a>
     `;
   }
 
-  renderContent() {
-    return html`
-      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
-      <div class="background"></div>
-      <wc-ripple class="ripple"></wc-ripple>
+  renderContent(clickable: boolean) {
+    const hasLeading = this.__hasNamedSlot('leading');
+    const hasTrailingSupportingText = this.__hasNamedSlot(
+      'trailing-supporting-text',
+    );
+    const hasTrailing = this.__hasNamedSlot('trailing');
 
-      <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>
+    return html`
+      <wc-item class="list-item-content" ?inert=${clickable}>
+        ${clickable
+          ? html`<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> `
+          : null}
+
+        <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 { property } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { property, state } 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
@@ -19,23 +20,187 @@ import { ListItem } from './list-item.js';
  *     Inbox
  *     <span slot="trailing">24</span>
  *   </wc-list-item>
+ *    <wc-list-item>
+ *       <wc-avatar slot="leading" name="Shivaji Varma"></wc-avatar>
+ *        Shivaji Varma
+ *       <span slot="supporting-text">Software Engineer</span>
+ *       <span slot="trailing-supporting-text">7</span>
+ *       <wc-icon slot="trailing" name="chevron_right"></wc-icon>
+ *     </wc-list-item>
  * </wc-list>
  * ```
  * @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';
 
+  /** Index of the currently active item within the clickable items list. */
+  @state() private activeIndex = -1;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'list');
+    this.addEventListener('keydown', this._onKeyDown);
+    this.addEventListener('click', this._onClick);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('keydown', this._onKeyDown);
+    this.removeEventListener('click', this._onClick);
+    super.disconnectedCallback();
+  }
+
+  override focus() {
+    const target = this._getActiveItem() ?? this._getFirstClickableItem();
+    target?.focus();
+  }
+
+  // ── Items ─────────────────────────────────────────────────────────────────
+
+  get items(): ListItem[] {
+    const slot = this.shadowRoot?.querySelector('slot');
+    const elements = slot?.assignedElements({ flatten: true }) ?? [];
+    return elements.filter(el => el instanceof ListItem) as ListItem[];
+  }
+
+  private _clickableItems() {
+    return this.items.filter(item => item.isClickable());
+  }
+
+  // ── Roving tabindex ───────────────────────────────────────────────────────
+
+  private _syncRovingTabIndex() {
+    const allItems = this.items;
+    const clickable = this._clickableItems();
+
+    for (const item of allItems) {
+      item.tabIndex = -1;
+    }
+
+    if (!clickable.length) {
+      this.activeIndex = -1;
+      return;
+    }
+
+    if (this.activeIndex < 0 || this.activeIndex >= clickable.length) {
+      this.activeIndex = 0;
+    }
+
+    clickable[this.activeIndex].tabIndex = 0;
+  }
+
+  private _setActiveByOffset(offset: 1 | -1) {
+    const clickable = this._clickableItems();
+    if (!clickable.length) return;
+
+    if (this.activeIndex < 0) {
+      this.activeIndex = 0;
+    } else {
+      const count = clickable.length;
+      this.activeIndex = (this.activeIndex + offset + count) % count;
+    }
+
+    this._syncRovingTabIndex();
+    clickable[this.activeIndex]?.focus();
   }
 
+  private _setBoundaryActive(index: number) {
+    const clickable = this._clickableItems();
+    if (!clickable.length) return;
+
+    this.activeIndex = index;
+    this._syncRovingTabIndex();
+    clickable[this.activeIndex]?.focus();
+  }
+
+  private _getActiveItem() {
+    const clickable = this._clickableItems();
+    if (!clickable.length || this.activeIndex < 0) return null;
+    return clickable[this.activeIndex] ?? null;
+  }
+
+  private _getFirstClickableItem() {
+    return this._clickableItems()[0] ?? null;
+  }
+
+  // ── Event helpers ─────────────────────────────────────────────────────────
+
+  private _isEventFromThisList(event: Event) {
+    const path = event.composedPath();
+    const sourceList = path.find(target => target instanceof List);
+    return sourceList === this;
+  }
+
+  private _clickableItemFromEvent(event: Event) {
+    if (!this._isEventFromThisList(event)) return null;
+    const path = event.composedPath();
+    const clickable = this._clickableItems();
+    for (const target of path) {
+      if (target instanceof ListItem) {
+        const owned = clickable.find(item => item === target);
+        if (owned) return owned;
+      }
+    }
+    return null;
+  }
+
+  private _setActiveItem(item: ListItem) {
+    const clickable = this._clickableItems();
+    const nextIndex = clickable.indexOf(item);
+    if (nextIndex < 0) return;
+    this.activeIndex = nextIndex;
+    this._syncRovingTabIndex();
+  }
+
+  // ── Handlers ──────────────────────────────────────────────────────────────
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    if (!this._isEventFromThisList(event)) return;
+
+    const eventItem = this._clickableItemFromEvent(event);
+    if (eventItem) {
+      this._setActiveItem(eventItem);
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this._setActiveByOffset(1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this._setActiveByOffset(-1);
+        break;
+      case 'Home':
+        event.preventDefault();
+        this._setBoundaryActive(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        this._setBoundaryActive(Math.max(this._clickableItems().length - 1, 0));
+        break;
+      default:
+        break;
+    }
+  };
+
+  private _onClick = (event: Event) => {
+    const item = this._clickableItemFromEvent(event);
+    if (!item) return;
+    this._setActiveItem(item);
+  };
+
+  private _onSlotChange = () => {
+    this._syncRovingTabIndex();
+  };
+
   render() {
     const cssClasses = {
       list: true,
@@ -44,7 +209,7 @@ export class List extends LitElement {
 
     return html`
       <div class=${classMap(cssClasses)}>
-        <slot></slot>
+        <slot @slotchange=${this._onSlotChange}></slot>
       </div>
     `;
   }