@redvars/peacock 3.8.1 → 3.8.3

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

@@ -3,9 +3,11 @@ 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 NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';
-import NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';
-import { Item } from '@/item/item.js';
+import NativeButtonMixin from '@/__internal/mixins/NativeButtonMixin.js';
+import NativeHyperlinkMixin from '@/__internal/mixins/NativeHyperlinkMixin.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
@@ -19,30 +21,47 @@ import { Item } from '@/item/item.js';
  * <wc-menu-item>Menu Item</wc-menu-item>
  * ```
  */
+@IndividualComponent
 export class MenuItem extends NativeButtonMixin(
   NativeHyperlinkMixin(LitElement),
 ) {
+  // ── Static ───────────────────────────────────────────────────────────────
+
+  static styles = [styles, colorStyles];
+
+  // ── Properties ───────────────────────────────────────────────────────────
+
+  /** The value associated with this menu item, used to identify it on selection. */
   @property({ type: String }) value = '';
 
+  /** Whether this menu item is currently selected/highlighted. */
   @property({ type: Boolean, reflect: true }) selected = false;
 
+  /** When true, the menu stays open after this item is activated. */
   @property({ type: Boolean, attribute: 'keep-open' }) keepOpen = false;
 
+  /** When true, indicates this item has an associated submenu. */
   @property({ type: Boolean, attribute: 'has-submenu' }) hasSubmenu = false;
 
+  /** Whether the associated submenu is currently open. */
   @property({ type: Boolean, attribute: 'submenu-open' }) submenuOpen = false;
 
+  /** Visual variant of the menu item. */
   @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
     'standard';
 
-  static styles = [styles, colorStyles];
+  // ── Queries ───────────────────────────────────────────────────────────────
+
+  @query('#menu-item') readonly itemElement!: HTMLElement | null;
 
-  @query('wc-item') readonly itemElement!: Item | null;
+  // ── Private fields ────────────────────────────────────────────────────────
 
+  /** MutationObserver that triggers re-render when slotted content changes. */
   private readonly _contentObserver = new MutationObserver(() => {
     this.requestUpdate();
   });
 
+  /** Roving tabindex value managed by the parent Menu. */
   private _rovingTabIndex = -1;
 
   connectedCallback() {
@@ -101,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
-        id="item"
-        class="menu-item"
+      <button
+        id="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,
@@ -126,42 +174,33 @@ export class MenuItem extends NativeButtonMixin(
         )}
       >
         ${this.renderContent()}
-      </wc-item>
+      </button>
     `;
   }
 
   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`
-      ${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}
+      <div class="menu-item-background"></div>
+      <wc-item class="menu-item-content">
+        <wc-focus-ring
+          class="focus-ring"
+          for="menu-item"
+          slot="container"
+        ></wc-focus-ring>
+        <div class="background" slot="container"></div>
+        <wc-ripple class="ripple" for="menu-item" slot="container"></wc-ripple>
+
+        <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>
     `;
   }
 }

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/menu/sub-menu/sub-menu.ts

@@ -3,6 +3,7 @@ import { property, queryAssignedElements } from 'lit/decorators.js';
 import styles from './sub-menu.scss';
 import { MenuItem } from '../menu-item/menu-item.js';
 import { Menu } from '../menu/menu.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 let subMenuIdCounter = 0;
 
@@ -12,6 +13,7 @@ let subMenuIdCounter = 0;
  * @rawTag sub-menu
  * @summary Connects a menu item to a nested menu.
  */
+@IndividualComponent
 export class SubMenu extends LitElement {
   static styles = [styles];
 
@@ -38,6 +40,7 @@ export class SubMenu extends LitElement {
   private _closeTimeout?: number;
 
   private _resolveAnchorElement(item: MenuItem) {
+    //@ts-ignore
     return item.itemElement?.itemElement ?? item.itemElement ?? item;
   }
 

package/src/modal/modal.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import IndividualComponent from '../IndividualComponent.js';
@@ -10,7 +10,7 @@ type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';
  * @label Modal
  * @tag wc-modal
  * @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.
+ * @summary A 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.
  * @cssprop --modal-scrim-color - Color of the scrim backdrop.

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

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

@@ -4,11 +4,12 @@ import { classMap } from 'lit/directives/class-map.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';
+} from '@/__internal/utils/dispatch-event-utils.js';
+import { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';
+import { throttle } from '@/__internal/utils/throttle.js';
+import { isLink } from '@/__internal/utils/is-link.js';
 import styles from './navigation-rail-item.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Navigation Rail Item
@@ -28,6 +29,7 @@ import styles from './navigation-rail-item.scss';
  * ```
  * @tags navigation
  */
+@IndividualComponent
 export class NavigationRailItem extends LitElement {
   #id = crypto.randomUUID();
 
@@ -54,17 +56,22 @@ export class NavigationRailItem extends LitElement {
   /** Reason the item is disabled (shown to screen readers). */
   @property({ attribute: 'disabled-reason' }) disabledReason: string = '';
 
-  /** Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds. */
-  @property({ type: Number }) throttleDelay = 200;
-
-  @state() private _isPressed = false;
+  /** Sets the delay for throttle in milliseconds. When null (default), no throttle is applied. */
+  @property({ type: Number }) throttleDelay: number | null = null;
 
+  /** True when the default slot contains label content. */
   @state() private _hasLabel = false;
 
+  /** True when the `active-icon` slot contains content. */
   @state() private _hasActiveIcon = false;
 
   @query('.item-element') readonly itemElement!: HTMLElement | null;
 
+  constructor() {
+    super();
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+  }
+
   override focus() {
     this.itemElement?.focus();
   }
@@ -74,10 +81,12 @@ export class NavigationRailItem extends LitElement {
   }
 
   override firstUpdated() {
-    this.__dispatchClickWithThrottle = throttle(
-      this.__dispatchClick,
-      this.throttleDelay,
-    );
+    if (typeof this.throttleDelay === 'number') {
+      this.__dispatchClickWithThrottle = throttle(
+        this.__dispatchClick,
+        this.throttleDelay,
+      );
+    }
 
     observerSlotChangesWithCallback(
       this.renderRoot.querySelector('slot.label'),
@@ -116,21 +125,6 @@ export class NavigationRailItem extends LitElement {
     dispatchActivationClick(this.itemElement);
   };
 
-  __handlePress = (event: KeyboardEvent | MouseEvent) => {
-    if (this.disabled) 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;
-    }
-  };
-
   __getDisabledReasonID() {
     return this.disabled && this.disabledReason
       ? `disabled-reason-${this.#id}`
@@ -176,7 +170,6 @@ export class NavigationRailItem extends LitElement {
       'item-element': true,
       active: this.active,
       disabled: this.disabled,
-      pressed: this._isPressed,
       'has-label': this._hasLabel,
       'has-active-icon': this._hasActiveIcon,
     };
@@ -189,10 +182,6 @@ export class NavigationRailItem extends LitElement {
         aria-disabled=${`${this.disabled}`}
         aria-current=${this.active ? 'page' : nothing}
         ?aria-describedby=${this.__getDisabledReasonID()}
-        @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
       >
         ${this.__renderItemContent()}
       </button>`;
@@ -206,10 +195,6 @@ export class NavigationRailItem extends LitElement {
       aria-current=${this.active ? 'page' : nothing}
       aria-disabled=${`${this.disabled}`}
       ?aria-describedby=${this.__getDisabledReasonID()}
-      @click=${this.__dispatchClickWithThrottle}
-      @mousedown=${this.__handlePress}
-      @keydown=${this.__handlePress}
-      @keyup=${this.__handlePress}
     >
       ${this.__renderItemContent()}
     </a>`;

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

@@ -5,19 +5,25 @@
 :host {
   display: block;
   height: 100%;
-  width: var(--nav-rail-width, 5rem); /* 80dp */
-  overflow: hidden;
+  width: var(--nav-rail-width, 6rem); /* 96dp */
+  overflow-y: auto;
+  overflow-x: hidden;
+  --nav-rail-padding-block: 1.5rem;
+
+  --nav-rail-container-color: var(--container-surface);
+  --nav-rail-label-text-color: var(--color-on-surface);
 }
 
 .rail {
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100%;
+  height: calc(100% - var(--nav-rail-padding-block) * 2);
   width: 100%;
   border-radius: inherit;
-  background-color: var(--nav-rail-container-color, var(--color-surface));
-  padding-block: var(--nav-rail-padding-block, 0.75rem); /* 12dp */
+  background-color: var(--nav-rail-container-color);
+  color: var(--nav-rail-label-text-color);
+  margin-block: var(--nav-rail-padding-block); /* 24dp */
   box-sizing: border-box;
 
   .header {
@@ -33,20 +39,6 @@
     }
   }
 
-  .footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    width: 100%;
-    flex-shrink: 0;
-    margin-top: auto;
-
-    &:empty {
-      display: none;
-    }
-  }
-
   wc-divider {
     width: calc(100% - 1rem);
     flex-shrink: 0;
@@ -58,11 +50,23 @@
     align-items: center;
     width: 100%;
     gap: 0.75rem; /* 12dp between items */
-    flex: 1 1 auto;
-    min-height: 0;
+    flex: 1;
 
     ::slotted(wc-navigation-rail-item) {
       width: 100%;
     }
   }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    margin-top: auto;
+    background-color: var(--nav-rail-container-color);
+
+    &:empty {
+      display: none;
+    }
+  }
 }

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

@@ -1,15 +1,16 @@
-import { html, LitElement, PropertyValues } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './navigation-rail.scss';
 import { NavigationRailItem } from './navigation-rail-item.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Navigation Rail
  * @tag wc-navigation-rail
  * @rawTag navigation-rail
  *
- * @summary A vertical side navigation for medium-sized screens, following Material Design 3 specs.
+ * @summary A vertical side navigation for medium-sized screens,.
  * @overview
  * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>
  * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>
@@ -43,6 +44,7 @@ import { NavigationRailItem } from './navigation-rail-item.js';
  * ```
  * @tags navigation
  */
+@IndividualComponent
 export class NavigationRail extends LitElement {
   static styles = [styles];
 

package/src/number-field/number-field.ts

@@ -2,8 +2,8 @@ import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
-import { spread } from '@/__directive/spread.js';
+import { redispatchEvent } from '@/__internal/utils/dispatch-event-utils.js';
+import { spread } from '@/__internal/directive/spread.js';
 
 import BaseInput from '../input/BaseInput.js';
 import styles from './number-field.scss';

package/src/pagination/pagination.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './pagination.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
 
@@ -21,6 +22,7 @@ const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
  * ```
  * @tags navigation, data
  */
+@IndividualComponent
 export class Pagination extends LitElement {
   static styles = [styles];
 

package/src/popover/popover.ts

@@ -2,7 +2,7 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import type { Placement } from '@floating-ui/dom';
 import IndividualComponent from '@/IndividualComponent.js';
-import { FloatingController } from '../__controllers/floating-controller.js';
+import { FloatingController } from '../__internal/controllers/floating-controller.js';
 import styles from './popover.scss';
 import type { PopoverContent } from './popover-content.js';
 
@@ -73,7 +73,7 @@ export class Popover extends LitElement {
     // Resolve the trigger element: first light-DOM child that is NOT wc-popover-content
     this._triggerEl =
       (Array.from(this.children).find(
-        (c) => c.tagName.toLowerCase() !== 'wc-popover-content',
+        c => c.tagName.toLowerCase() !== 'wc-popover-content',
       ) as HTMLElement) ?? null;
 
     if (!this._triggerEl || !this._contentEl) return;
@@ -89,7 +89,7 @@ export class Popover extends LitElement {
       offset: this.offset,
       trigger: triggerMode,
       closeOnClickOutside: true,
-      onOpenChange: (isOpen) => {
+      onOpenChange: isOpen => {
         this.open = isOpen;
         if (this._contentEl) {
           this._contentEl.open = isOpen;

package/src/radio/radio.ts

@@ -1,10 +1,11 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { spread } from '@/__directive/spread.js';
+import { spread } from '@/__internal/directive/spread.js';
 
 import styles from './radio.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Radio
@@ -12,7 +13,7 @@ import styles from './radio.scss';
  * @rawTag radio
  * @summary Allows selection of a single option from a set.
  * @overview
- * <p>Radio buttons follow the Material Design 3 specifications with clear focus, hover, and selected states.</p>
+ * <p>Radio buttons follow the specifications with clear focus, hover, and selected states.</p>
  *
  * @cssprop --radio-size: Size of the outer radio circle.
  * @cssprop --radio-dot-size: Size of the inner dot when selected.
@@ -33,6 +34,7 @@ import styles from './radio.scss';
  */
 type RadioDirection = 1 | -1;
 
+@IndividualComponent
 export class Radio extends LitElement {
   private static readonly DIRECTION_NEXT: RadioDirection = 1;
   private static readonly DIRECTION_PREVIOUS: RadioDirection = -1;
@@ -87,15 +89,19 @@ export class Radio extends LitElement {
   @property({ type: Object })
   configAria: Record<string, string> = {};
 
+  /** True while the radio container has keyboard focus. */
   @state()
   private hasFocus = false;
 
+  /** True while the user is actively pressing the radio (mouse/keyboard). */
   @state()
   private isActive = false;
 
+  /** True when slotted label content or `label` property is present. */
   @state()
   private slotHasContent = false;
 
+  /** True for the one radio in the group that should receive tab focus (roving tabindex). */
   @state()
   private isGroupFocusTarget = false;
 
@@ -105,6 +111,9 @@ export class Radio extends LitElement {
   @query('.input-native')
   private nativeElement?: HTMLInputElement;
 
+  // ── Private fields ────────────────────────────────────────────────────────
+
+  /** Captured `tabindex` attribute value forwarded to the inner container. */
   private tabindex?: number;
 
   connectedCallback() {
@@ -269,8 +278,7 @@ export class Radio extends LitElement {
       return;
     }
 
-    const target =
-      enabledGroup.find(radio => radio.checked) || enabledGroup[0];
+    const target = enabledGroup.find(radio => radio.checked) || enabledGroup[0];
 
     group.forEach(radio => {
       radio.isGroupFocusTarget = radio === target;