@redvars/peacock 3.8.2 → 3.8.4

package/src/list/list.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
+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';
@@ -20,6 +20,13 @@ import IndividualComponent from '@/IndividualComponent.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
@@ -34,11 +41,166 @@ export class List extends LitElement {
   @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,
@@ -47,7 +209,7 @@ export class List extends LitElement {
 
     return html`
       <div class=${classMap(cssClasses)}>
-        <slot></slot>
+        <slot @slotchange=${this._onSlotChange}></slot>
       </div>
     `;
   }

package/src/loader.ts

@@ -61,6 +61,7 @@ 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 { ColorPicker } from '@/color-picker/color-picker.js';
 import { Table } from '@/table/table.js';
 import { Pagination } from '@/pagination/pagination.js';
 import { SidebarMenu } from '@/sidebar-menu/sidebar-menu.js';
@@ -315,6 +316,9 @@ const loaderConfig: LoaderConfig = {
     'wc-slider': {
       CustomElementClass: Slider,
     },
+    'wc-color-picker': {
+      CustomElementClass: ColorPicker,
+    },
     'wc-table': {
       CustomElementClass: Table,
     },

package/src/menu/menu/menu.scss

@@ -9,7 +9,6 @@
   width: var(--menu-width, max-content);
   max-width: 100vw;
   min-width: 112px;
-  padding-block: var(--spacing-050);
   transform-origin: top center;
 
   --_menu-enter-duration: var(--duration-medium1);
@@ -51,7 +50,6 @@
   .menu-content {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-050);
     z-index: 1;
     width: 100%;
 
@@ -74,8 +72,8 @@
     display: block;
     position: absolute;
     inset: 0;
-    background-color: var(--_container-color);
-    opacity: var(--_container-opacity, 1);
+
+    border: 1px solid var(--color-red);
 
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
@@ -83,18 +81,6 @@
     border-end-end-radius: var(--_container-shape-end-end);
     pointer-events: none;
   }
-
-  .elevation {
-    --elevation-level: 2;
-    transition-duration: 280ms;
-    --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);
-    --elevation-container-shape-variant: var(--_container-corner-shape-variant);
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -111,10 +97,10 @@
   --_container-shape-end-end: var(--shape-corner-large);
 
   &.variant-standard {
-    --_container-color: var(--color-surface-container);
+    --menu-item-container-color: var(--color-surface-container);
   }
 
   &.variant-vibrant {
-    --_container-color: var(--color-tertiary-container);
+    --menu-item-container-color: var(--color-tertiary-container);
   }
 }

package/src/menu/menu/menu.ts

@@ -467,7 +467,6 @@ export class Menu extends LitElement {
       aria-hidden=${String(!this.open)}
     >
       <div class="background"></div>
-      <wc-elevation class="elevation"></wc-elevation>
 
       <div class="menu-content">
         <slot @slotchange=${this._onSlotChange}></slot>

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

@@ -4,6 +4,7 @@
 
 :host {
   outline: none;
+  position: relative;
 
   --menu-item-container-shape-start-start: var(--shape-corner-extra-small);
   --menu-item-container-shape-start-end: var(--shape-corner-extra-small);
@@ -11,58 +12,87 @@
   --menu-item-container-shape-end-end: var(--shape-corner-extra-small);
 }
 
+/*
+  * Reset native button/link styles
+  */
+.native-button {
+  @include mixin.reset-button-styles;
+}
+.native-link {
+  @include mixin.reset-link-styles;
+}
+
 .menu-item {
+  position: relative;
   width: 100%;
-  --item-padding-inline: 10px;
-  --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;
+  text-align: start;
+  padding-top: 2px;
+  padding-inline: var(--spacing-050);
 
-  --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);
+  .menu-item-background {
+    background-color: var(--menu-item-container-color);
+    position: absolute;
+    inset: 0px;
+  }
 
-  --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));
+  .menu-item-content {
+    --item-height: 1.5rem;
+    --item-multiline-height: 3rem;
+    --item-padding-inline: 10px;
+    --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;
 
-  .background {
-    background-color: var(--_container-color);
-    opacity: var(--_container-opacity, 1);
-    border-radius: var(--shape-corner-medium);
-  }
+    --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);
 
-  .focus-ring {
-    --focus-ring-container-shape-start-start: var(--shape-corner-medium);
-    --focus-ring-container-shape-start-end: var(--shape-corner-medium);
-    --focus-ring-container-shape-end-start: var(--shape-corner-medium);
-    --focus-ring-container-shape-end-end: var(--shape-corner-medium);
-    z-index: 2;
-    --focus-ring-inset: 0px;
-  }
+    --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));
 
-  .ripple {
-    --ripple-state-opacity: var(--_container-state-opacity, 0);
-    --ripple-pressed-color: var(--_container-state-color);
-    border-radius: var(--shape-corner-medium);
-  }
+    .background {
+      background-color: var(--menu-item-container-color);
+      opacity: var(--_container-opacity, 1);
+      border-radius: var(--shape-corner-medium);
+    }
+
+    .focus-ring {
+      --focus-ring-container-shape-start-start: var(--shape-corner-medium);
+      --focus-ring-container-shape-start-end: var(--shape-corner-medium);
+      --focus-ring-container-shape-end-start: var(--shape-corner-medium);
+      --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+      z-index: 2;
+      --focus-ring-inset: 0px;
+    }
+
+    .ripple {
+      --ripple-state-opacity: var(--_container-state-opacity, 0);
+      --ripple-pressed-color: var(--_container-state-color);
+      border-radius: var(--shape-corner-medium);
+    }
 
-  .skeleton {
-    z-index: 2;
+    .skeleton {
+      z-index: 2;
 
-    --skeleton-container-shape-start-start: var(--shape-corner-medium);
-    --skeleton-container-shape-start-end: var(--shape-corner-medium);
-    --skeleton-container-shape-end-start: var(--shape-corner-medium);
-    --skeleton-container-shape-end-end: var(--shape-corner-medium);
+      --skeleton-container-shape-start-start: var(--shape-corner-medium);
+      --skeleton-container-shape-start-end: var(--shape-corner-medium);
+      --skeleton-container-shape-end-start: var(--shape-corner-medium);
+      --skeleton-container-shape-end-end: var(--shape-corner-medium);
+    }
   }
 }
 

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

@@ -5,8 +5,9 @@ import styles from './menu-item.scss';
 import colorStyles from './menu-item-colors.scss';
 import NativeButtonMixin from '@/__internal/mixins/NativeButtonMixin.js';
 import NativeHyperlinkMixin from '@/__internal/mixins/NativeHyperlinkMixin.js';
-import { Item } from '@/item/item.js';
+import { isLink } from '@/__internal/utils/is-link.js';
 import IndividualComponent from '@/IndividualComponent.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 /**
  * @label Menu Item
@@ -51,7 +52,7 @@ export class MenuItem extends NativeButtonMixin(
 
   // ── Queries ───────────────────────────────────────────────────────────────
 
-  @query('wc-item') readonly itemElement!: Item | null;
+  @query('#menu-item') readonly itemElement!: HTMLElement | null;
 
   // ── Private fields ────────────────────────────────────────────────────────
 
@@ -119,22 +120,51 @@ export class MenuItem extends NativeButtonMixin(
   }
 
   render() {
+    const isElementLink = isLink(this);
     const controls = this.getAttribute('aria-controls');
 
+    const cssClasses = {
+      'menu-item': true,
+      'native-button': !isElementLink,
+      'native-link': isElementLink,
+    };
+
+    if (isElementLink) {
+      return html`
+        <a
+          id="menu-item"
+          class=${classMap(cssClasses)}
+          role="menuitem"
+          href=${ifDefined(this.href)}
+          target=${this.target}
+          ?rel=${this.rel}
+          ?download=${this.download}
+          tabindex=${this.disabled ? '-1' : String(this.tabIndex)}
+          ?selected=${this.selected}
+          aria-disabled=${this.disabled || this.softDisabled ? 'true' : nothing}
+          aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
+          aria-controls=${ifDefined(
+            this.hasSubmenu && controls ? controls : undefined,
+          )}
+          aria-expanded=${ifDefined(
+            this.hasSubmenu ? String(this.submenuOpen) : undefined,
+          )}
+        >
+          ${this.renderContent()}
+        </a>
+      `;
+    }
+
     return html`
-      <wc-item
+      <button
         id="menu-item"
-        class="menu-item"
+        class=${classMap(cssClasses)}
         role="menuitem"
+        type=${this.htmlType}
+        ?disabled=${this.disabled}
         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-disabled=${this.softDisabled ? 'true' : nothing}
         aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
         aria-controls=${ifDefined(
           this.hasSubmenu && controls ? controls : undefined,
@@ -143,6 +173,15 @@ export class MenuItem extends NativeButtonMixin(
           this.hasSubmenu ? String(this.submenuOpen) : undefined,
         )}
       >
+        ${this.renderContent()}
+      </button>
+    `;
+  }
+
+  renderContent() {
+    return html`
+      <div class="menu-item-background"></div>
+      <wc-item class="menu-item-content">
         <wc-focus-ring
           class="focus-ring"
           for="menu-item"
@@ -151,23 +190,17 @@ export class MenuItem extends NativeButtonMixin(
         <div class="background" slot="container"></div>
         <wc-ripple class="ripple" for="menu-item" slot="container"></wc-ripple>
 
-        ${this.renderContent()}
+        <slot name="start" slot="start"></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"
+        ></slot>
+        <slot name="end" slot="end"></slot>
       </wc-item>
     `;
   }
-
-  renderContent() {
-    return html`
-      <slot name="start" slot="start"></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"
-      ></slot>
-      <slot name="end" slot="end"></slot>
-    `;
-  }
 }

package/src/menu/sub-menu/sub-menu.scss

@@ -1,7 +1,11 @@
-@use "../../../scss/mixin";
+@use '../../../scss/mixin';
 
 @include mixin.base-styles;
 
 :host {
   display: contents;
 }
+
+slot::slotted(wc-menu) {
+  display: contents;
+}

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

@@ -32,11 +32,26 @@
   box-sizing: border-box;
 
   /* Color tokens */
-  --_inactive-icon-color: var(--nav-rail-inactive-icon-color, var(--color-on-surface-variant));
-  --_active-icon-color: var(--nav-rail-active-icon-color, var(--color-on-secondary-container));
-  --_inactive-label-color: var(--nav-rail-inactive-label-color, var(--color-on-surface-variant));
-  --_active-label-color: var(--nav-rail-active-label-color, var(--color-on-surface));
-  --_indicator-color: var(--nav-rail-indicator-color, var(--color-secondary-container));
+  --_inactive-icon-color: var(
+    --nav-rail-inactive-icon-color,
+    var(--color-on-surface-variant)
+  );
+  --_active-icon-color: var(
+    --nav-rail-active-icon-color,
+    var(--color-on-secondary-container)
+  );
+  --_inactive-label-color: var(
+    --nav-rail-inactive-label-color,
+    var(--color-on-surface-variant)
+  );
+  --_active-label-color: var(
+    --nav-rail-active-label-color,
+    var(--color-on-surface)
+  );
+  --_indicator-color: var(
+    --nav-rail-indicator-color,
+    var(--color-secondary-container)
+  );
   --_indicator-shape: var(--nav-rail-indicator-shape, var(--shape-corner-full));
   --_indicator-width: var(--nav-rail-indicator-width, 3.5rem); /* 56dp */
   --_indicator-height: var(--nav-rail-indicator-height, 2rem); /* 32dp */
@@ -62,7 +77,8 @@
     border-radius: var(--_indicator-shape);
     overflow: hidden;
     flex-shrink: 0;
-    transition: background-color var(--duration-short4, 200ms) var(--easing-standard, ease);
+    transition: background-color var(--duration-short4, 200ms)
+      var(--easing-standard, ease);
 
     .ripple {
       inset: 0;
@@ -95,7 +111,8 @@
     text-align: center;
     pointer-events: none;
     z-index: 1;
-    transition: color var(--duration-short4, 200ms) var(--easing-standard, ease),
+    transition:
+      color var(--duration-short4, 200ms) var(--easing-standard, ease),
       font-weight var(--duration-short4, 200ms) var(--easing-standard, ease);
   }
 
@@ -140,7 +157,7 @@
 
     .label {
       color: var(--_active-label-color);
-      font-weight: var(--typography-label-medium-font-weight-bold, 700);
+      font-weight: var(--font-weight-bold) !important;
     }
   }