@redvars/peacock 3.2.10 → 3.3.1

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

@@ -1,27 +1,45 @@
-import { html, LitElement } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './menu-item.scss';
 import colorStyles from './menu-item-colors.scss';
 
+/**
+ * @label Menu Item
+ * @tag wc-menu-item
+ * @rawTag menu-item
+ * @parentRawTag menu-list
+ * @summary An item in a menu list.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-menu-item>Menu Item</wc-menu-item>
+ * ```
+ */
 export class MenuItem extends LitElement {
   @property({ type: Boolean, reflect: true }) disabled = false;
 
   @property({ type: String }) value = '';
 
-  @property({ type: Boolean }) selected = false;
+  @property({ type: Boolean, reflect: true }) selected = false;
+
+  @property({ type: Boolean, attribute: 'keep-open' }) keepOpen = false;
+
+  @property({ type: Boolean, attribute: 'has-submenu' }) hasSubmenu = false;
+
+  @property({ type: Boolean, attribute: 'submenu-open' }) submenuOpen = false;
 
   /*
    * Hyperlink to navigate to on click.
    */
   @property({ reflect: true }) href?: string;
 
-   /**
+  /**
    * Sets or retrieves the window or frame at which to target content.
    */
   @property() target: string = '_self';
 
-
   @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =
     'standard';
 
@@ -33,76 +51,149 @@ export class MenuItem extends LitElement {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'menuitem');
     }
+
+    if (!this.hasAttribute('tabindex')) {
+      this.tabIndex = -1;
+    }
+
+    this.addEventListener('click', this._handleClick);
+    this.addEventListener('keydown', this._handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this._handleClick);
+    this.removeEventListener('keydown', this._handleKeyDown);
+    super.disconnectedCallback();
+  }
+
+  private emitActivate(source: 'click' | 'keydown', key?: string) {
+    this.dispatchEvent(
+      new CustomEvent('menu-item-activate', {
+        bubbles: true,
+        composed: true,
+        detail: { item: this, source, key },
+      }),
+    );
+  }
+
+  private requestClose(source: 'click' | 'keydown', key?: string) {
+    this.dispatchEvent(
+      new CustomEvent('menu-item-request-close', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          item: this,
+          source,
+          key,
+          reason: source === 'click' ? 'click-selection' : 'keydown',
+        },
+      }),
+    );
+  }
+
+  private requestSubmenuKey(key: string) {
+    this.dispatchEvent(
+      new CustomEvent('menu-item-submenu-keydown', {
+        bubbles: true,
+        composed: true,
+        detail: { item: this, key },
+      }),
+    );
   }
 
-  // Handle keyboard activation (Enter/Space)
   private _handleKeyDown(e: KeyboardEvent) {
+    if (this.disabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+      this.requestSubmenuKey(e.key);
+      return;
+    }
+
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
-      this.click();
+      this.emitActivate('keydown', e.key);
+      if (!this.keepOpen) {
+        this.requestClose('keydown', e.key);
+      }
+    }
+  }
+
+  private _handleClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    this.emitActivate('click');
+    if (!this.keepOpen) {
+      this.requestClose('click');
     }
   }
 
-   __isLink() {
+  __isLink() {
     return !!this.href;
   }
 
-   @query('.menu-item') private readonly menuItemElement!: HTMLElement | null;
-  
-    override focus() {
-      this.menuItemElement?.focus();
-    }
-  
-    override blur() {
-      this.menuItemElement?.blur();
-    }
+  get focusTarget() {
+    return this;
+  }
 
   render() {
-
     const isLink = this.__isLink();
 
     const cssClasses = {
-          'menu-item': true,
-          disabled: this.disabled,
-          selected: this.selected,
-        };
+      'menu-item': true,
+      disabled: this.disabled,
+      selected: this.selected,
+    };
+
+    const controls = this.getAttribute('aria-controls');
 
     if (isLink) {
       return html`<a
         class=${classMap(cssClasses)}
         href=${this.href}
         target=${this.target}
+        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()}
-      </a>
-    `;
+      </a> `;
     }
 
-
     return html`<div
-        class=${classMap(cssClasses)}
-        tabindex=${!this.disabled ? 0 : -1}
-        @keydown="${this._handleKeyDown}"
-      >
-        ${this.renderContent()}
-      </div>
-    `;
+      class=${classMap(cssClasses)}
+      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>`;
   }
 
   renderContent() {
     return html`
-      <focus-ring class="focus-ring" .control=${this}  element="menuItemElement"></focus-ring>
+      <wc-focus-ring
+        class="focus-ring"
+        .control=${this}
+        element="focusTarget"
+      ></wc-focus-ring>
       <div class="background"></div>
-      <base-ripple class="ripple"></base-ripple>
+      <wc-ripple class="ripple"></wc-ripple>
 
       <div class="menu-item-content">
         <slot name="leading-icon"></slot>
         <div class="slot-container">
           <slot></slot>
         </div>
-        <slot
-          name="trailing-supporting-text"
-        ></slot>
+        <slot name="trailing-supporting-text"></slot>
       </div>
     `;
   }

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

@@ -0,0 +1,7 @@
+@use "../../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: contents;
+}

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

@@ -0,0 +1,243 @@
+import { html, LitElement } from 'lit';
+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';
+
+let subMenuIdCounter = 0;
+
+/**
+ * @label Sub Menu
+ * @tag wc-sub-menu
+ * @rawTag sub-menu
+ * @summary Connects a menu item to a nested menu.
+ */
+export class SubMenu extends LitElement {
+  static styles = [styles];
+
+  @property({ type: Number, attribute: 'hover-open-delay' })
+  hoverOpenDelay = 120;
+
+  @property({ type: Number, attribute: 'hover-close-delay' })
+  hoverCloseDelay = 180;
+
+  @property({ type: String, attribute: 'anchor-corner' })
+  anchorCorner = 'start-end';
+
+  @property({ type: String, attribute: 'menu-corner' })
+  menuCorner = 'start-start';
+
+  @queryAssignedElements({ slot: 'item' })
+  private readonly _items!: Element[];
+
+  @queryAssignedElements({ slot: 'menu' })
+  private readonly _menus!: Element[];
+
+  private _openTimeout?: number;
+
+  private _closeTimeout?: number;
+
+  private readonly _onChildMenuOpened = () => {
+    const { item } = this;
+    if (!item) {
+      return;
+    }
+
+    item.submenuOpen = true;
+    item.setAttribute('aria-expanded', 'true');
+  };
+
+  private readonly _onChildMenuClosed = () => {
+    const { item } = this;
+    if (!item) {
+      return;
+    }
+
+    item.submenuOpen = false;
+    item.setAttribute('aria-expanded', 'false');
+  };
+
+  get item(): MenuItem | null {
+    const [candidate] = this._items ?? [];
+    return candidate instanceof MenuItem ? candidate : null;
+  }
+
+  get menu(): Menu | null {
+    const [candidate] = this._menus ?? [];
+    return candidate instanceof Menu ? candidate : null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('mouseenter', this._onMouseEnter);
+    this.addEventListener('mouseleave', this._onMouseLeave);
+  }
+
+  disconnectedCallback() {
+    const { menu } = this;
+    menu?.removeEventListener('opened', this._onChildMenuOpened);
+    menu?.removeEventListener('closed', this._onChildMenuClosed);
+    this.removeEventListener('mouseenter', this._onMouseEnter);
+    this.removeEventListener('mouseleave', this._onMouseLeave);
+    window.clearTimeout(this._openTimeout);
+    window.clearTimeout(this._closeTimeout);
+    super.disconnectedCallback();
+  }
+
+  async show() {
+    const { item, menu } = this;
+    if (!item || !menu) {
+      return;
+    }
+
+    menu.anchorElement = item;
+    menu.isSubmenu = true;
+    menu.show();
+
+    item.hasSubmenu = true;
+    item.submenuOpen = true;
+    item.setAttribute('aria-expanded', 'true');
+  }
+
+  async close() {
+    const { item, menu } = this;
+    if (!item || !menu) {
+      return;
+    }
+
+    menu.close({ kind: 'programmatic' });
+    item.submenuOpen = false;
+    item.setAttribute('aria-expanded', 'false');
+  }
+
+  render() {
+    return html`
+      <slot
+        name="item"
+        @slotchange=${this._onSlotChange}
+        @click=${this._onItemClick}
+        @keydown=${this._onItemKeyDown}
+      ></slot>
+      <slot
+        name="menu"
+        @slotchange=${this._onSlotChange}
+        @close-menu=${this._onCloseMenu}
+        @keydown=${this._onMenuKeyDown}
+      ></slot>
+    `;
+  }
+
+  private _onSlotChange = () => {
+    const { item, menu } = this;
+    if (!item || !menu) {
+      return;
+    }
+
+    if (!menu.id) {
+      subMenuIdCounter += 1;
+      menu.id = `wc-sub-menu-${subMenuIdCounter}`;
+    }
+
+    item.keepOpen = true;
+    item.hasSubmenu = true;
+    item.submenuOpen = menu.open;
+    item.setAttribute('aria-haspopup', 'menu');
+    item.setAttribute('aria-expanded', String(menu.open));
+    item.setAttribute('aria-controls', menu.id);
+
+    menu.removeEventListener('opened', this._onChildMenuOpened);
+    menu.removeEventListener('closed', this._onChildMenuClosed);
+    menu.addEventListener('opened', this._onChildMenuOpened);
+    menu.addEventListener('closed', this._onChildMenuClosed);
+
+    menu.isSubmenu = true;
+    menu.anchorElement = item;
+    menu.placement =
+      getComputedStyle(this).direction === 'rtl' ? 'left-start' : 'right-start';
+    menu.offset = 4;
+  };
+
+  private _onItemClick = () => {
+    if (this.menu?.open) {
+      this.close();
+      return;
+    }
+
+    this.show();
+  };
+
+  private _onItemKeyDown = async (event: KeyboardEvent) => {
+    const isRtl = getComputedStyle(this).direction === 'rtl';
+    const arrowEnter = isRtl ? 'ArrowLeft' : 'ArrowRight';
+
+    const shouldOpen =
+      event.key === arrowEnter || event.key === 'Enter' || event.key === ' ';
+
+    if (!shouldOpen) {
+      return;
+    }
+
+    event.preventDefault();
+    if (event.key === arrowEnter) {
+      event.stopPropagation();
+    }
+
+    await this.show();
+    const firstItem = this.menu?.items.find(menuItem => !menuItem.disabled);
+    if (firstItem) {
+      firstItem.tabIndex = 0;
+      firstItem.focus();
+    }
+  };
+
+  private _onMenuKeyDown = async (event: KeyboardEvent) => {
+    const isRtl = getComputedStyle(this).direction === 'rtl';
+    const arrowExit = isRtl ? 'ArrowRight' : 'ArrowLeft';
+
+    if (event.key !== 'Escape' && event.key !== arrowExit) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    await this.close();
+
+    const { item } = this;
+    if (item) {
+      item.tabIndex = 0;
+      item.focus();
+    }
+  };
+
+  private _onCloseMenu = async (
+    event: CustomEvent<{ reason?: { kind?: string; key?: string } }>,
+  ) => {
+    const { reason } = event.detail ?? {};
+    const { key } = reason ?? {};
+    if (reason?.kind === 'keydown' && key === 'Escape') {
+      event.stopPropagation();
+      await this.close();
+      this.item?.focus();
+    }
+  };
+
+  private _onMouseEnter = () => {
+    window.clearTimeout(this._closeTimeout);
+    this._openTimeout = window.setTimeout(() => {
+      this.show();
+    }, this.hoverOpenDelay);
+  };
+
+  private _onMouseLeave = (event: MouseEvent) => {
+    const { relatedTarget: related } = event;
+    if (related instanceof Node && this.contains(related)) {
+      return;
+    }
+
+    window.clearTimeout(this._openTimeout);
+    this._closeTimeout = window.setTimeout(() => {
+      this.close();
+    }, this.hoverCloseDelay);
+  };
+}

package/src/number-counter/demo/index.html

@@ -20,7 +20,7 @@
 
 
 <p class='text-body'>
-  <number-counter value='400'></number-counter>
+  <wc-number-counter value='400'></wc-number-counter>
 </p>
 
 

package/src/number-counter/number-counter.ts

@@ -1,29 +1,31 @@
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import PeacockComponent from 'src/PeacockComponent.js';
+import IndividualComponent from 'src/IndividualComponent.js';
 import styles from './number-counter.scss';
 
 /**
  * @label Number Counter
- * @tag number-counter
+ * @tag wc-number-counter
  * @rawTag number-counter
  * @summary Displays a number with commas for thousands.
  *
  * @example
  * ```html
- * <number-counter value="123456789"></number-counter>
+ * <wc-number-counter id="number-counter" value="123456789"></wc-number-counter>
  * <script>
- *     const $counter = document.querySelector('number-counter');
- *
- *     setInterval(() => {
- *         $counter.value = $counter.value + parseInt(Math.floor(Math.random() * 1000));
- *     }, 1000);
+ *   customElements.whenDefined('wc-number-counter').then(() => {
+      const $counter = document.querySelector('#number-counter');
+
+      setInterval(() => {
+        $counter.value = $counter.value + Math.floor(Math.random() * 1000);
+      }, 1000);
+    });
  * </script>
  * ```
  * @tags display
  */
-@PeacockComponent
+@IndividualComponent
 export class NumberCounter extends LitElement {
   static styles = [styles];
 

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

@@ -15,7 +15,7 @@ import { spread } from '../spread.js';
  *
  * @example
  * ```html
- * <number-field label="Age" placeholder="Enter your age"></number-field>
+ * <wc-number-field label="Age" placeholder="Enter your age"></wc-number-field>
  * ```
  */
 export class NumberField extends BaseInput {
@@ -150,7 +150,7 @@ export class NumberField extends BaseInput {
     };
 
     return html`
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -166,13 +166,13 @@ export class NumberField extends BaseInput {
         class=${classMap(classes)}
       >
         ${this.stepper && !this.disabled
-          ? html`<icon-button
+          ? html`<wc-icon-button
               class="stepper"
               name="remove"
               variant="text"
               slot="field-start"
               @click=${this.stepDown}
-            ></icon-button>`
+            ></wc-icon-button>`
           : nothing}
 
         <slot name="start" slot="field-start"></slot>
@@ -201,15 +201,15 @@ export class NumberField extends BaseInput {
         <slot name="end" slot="field-end"></slot>
 
         ${this.stepper && !this.disabled
-          ? html`<icon-button
+          ? html`<wc-icon-button
               class="stepper"
               variant="text"
               name="add"
               slot="field-end"
               @click=${this.stepUp}
-            ></icon-button>`
+            ></wc-icon-button>`
           : nothing}
-      </base-field>
+      </wc-field>
     `;
   }
 }

package/src/pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination } from './pagination.js';

package/src/pagination/pagination.scss

@@ -0,0 +1,59 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.pagination {
+  background: var(--color-surface, #fff);
+  display: flex;
+  align-items: center;
+
+  .page-sizes-select {
+    margin-inline-start: var(--spacing-100, 0.5rem);
+  }
+
+  .page-size-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-100, 0.5rem);
+    @include mixin.get-typography-not-important('body-medium');
+    color: var(--color-on-surface-variant);
+    white-space: nowrap;
+  }
+
+  .page-size-select {
+    border: 1px solid var(--color-outline-variant);
+    background: var(--color-surface, #fff);
+    color: var(--color-on-surface);
+    padding: var(--spacing-050, 0.25rem) var(--spacing-100, 0.5rem);
+    cursor: pointer;
+    outline: none;
+    height: 2.5rem;
+
+    @include mixin.get-typography-not-important('body-medium');
+
+    &:focus {
+      outline: 2px solid var(--color-primary);
+    }
+  }
+
+  .pagination-item-count {
+    margin-inline-start: var(--spacing-150, 0.75rem);
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  .pagination-text {
+    @include mixin.get-typography-not-important('body-medium');
+    color: var(--color-on-surface-variant);
+  }
+
+  .arrows {
+    --border-radius: 0;
+    --button-height: calc(2.5rem - 2px);
+  }
+}