@redvars/peacock 3.5.1 → 3.6.0

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

@@ -1,8 +1,11 @@
 import { html, LitElement, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query, state } 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';
+import BaseButtonMixin from '@/__mixins/BaseButtonMixin.js';
+import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
+import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
 
 /**
  * @label Menu Item
@@ -17,9 +20,8 @@ import colorStyles from './menu-item-colors.scss';
  * <wc-menu-item>Menu Item</wc-menu-item>
  * ```
  */
-export class MenuItem extends LitElement {
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
+export class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(LitElement)) {
+  
   @property({ type: String }) value = '';
 
   @property({ type: Boolean, reflect: true }) selected = false;
@@ -30,21 +32,19 @@ export class MenuItem extends LitElement {
 
   @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';
 
   static styles = [styles, colorStyles];
 
+  @query('#item') readonly itemElement!: HTMLElement | null;
+
+  /**
+     * States
+     */
+    @state()
+    isPressed = false;
+
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
@@ -52,91 +52,80 @@ export class MenuItem extends LitElement {
       this.setAttribute('role', 'menuitem');
     }
 
-    if (!this.hasAttribute('tabindex')) {
-      this.tabIndex = -1;
-    }
-
-    this.addEventListener('click', this._handleClick);
-    this.addEventListener('keydown', this._handleKeyDown);
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+    window.addEventListener('mouseup', this.__handlePress);
   }
 
   disconnectedCallback() {
-    this.removeEventListener('click', this._handleClick);
-    this.removeEventListener('keydown', this._handleKeyDown);
+    window.removeEventListener('mouseup', this.__handlePress);
+    this.removeEventListener('click', this.__dispatchClickWithThrottle);
     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 },
-      }),
-    );
+  override focus() {
+    this.itemElement?.focus();
   }
 
-  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',
-        },
-      }),
-    );
+  override blur() {
+    this.itemElement?.blur();
   }
 
-  private requestSubmenuKey(key: string) {
-    this.dispatchEvent(
-      new CustomEvent('menu-item-submenu-keydown', {
-        bubbles: true,
-        composed: true,
-        detail: { item: this, key },
-      }),
-    );
-  }
-
-  private _handleKeyDown(e: KeyboardEvent) {
-    if (this.disabled) {
-      e.preventDefault();
+  __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 (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-      this.requestSubmenuKey(e.key);
+    if (!isActivationClick(event) || !this.itemElement) {
       return;
     }
 
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.emitActivate('keydown', e.key);
-      if (!this.keepOpen) {
-        this.requestClose('keydown', e.key);
-      }
-    }
-  }
+    this.focus();
+    dispatchActivationClick(this.itemElement);
+  };
+
+  __handleKeyDown = (event: KeyboardEvent) => {
+    this.__handlePress(event);
 
-  private _handleClick(e: MouseEvent) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
+    if (this.disabled || this.softDisabled || !this.itemElement) {
       return;
     }
 
-    this.emitActivate('click');
-    if (!this.keepOpen) {
-      this.requestClose('click');
+    if (event.key === ' ') {
+      event.preventDefault();
+      this.itemElement.click();
+      return;
     }
-  }
 
-  __isLink() {
-    return !!this.href;
-  }
+    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();
@@ -145,6 +134,7 @@ export class MenuItem extends LitElement {
       'menu-item': true,
       disabled: this.disabled,
       selected: this.selected,
+      pressed: this.isPressed,
     };
 
     const controls = this.getAttribute('aria-controls');
@@ -155,6 +145,13 @@ export class MenuItem extends LitElement {
         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)}
         aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}
         aria-controls=${this.hasSubmenu && controls ? controls : nothing}
@@ -167,6 +164,13 @@ export class MenuItem extends LitElement {
     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}
@@ -182,7 +186,7 @@ export class MenuItem extends LitElement {
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
 
-      <div class="menu-item-content">
+      <div class="menu-item-content" data-variant=${this.variant}>
         <slot name="leading-icon"></slot>
         <div class="slot-container">
           <slot></slot>

package/src/modal/index.ts

@@ -0,0 +1 @@
+export { Modal } from './modal.js';

package/src/modal/modal.scss

@@ -0,0 +1,206 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: contents;
+
+  --modal-container-color: var(--color-surface-container-high, #ece6f0);
+  --modal-scrim-color: rgba(0, 0, 0, 0.32);
+  --modal-shape: var(--shape-corner-extra-large, 28px);
+  --modal-min-width: 280px;
+  --modal-max-width: 560px;
+  --modal-max-height: 90dvh;
+  --modal-transition-duration: var(--duration-medium2, 300ms);
+  --modal-transition-easing: var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+  --modal-heading-color: var(--color-on-surface, #1c1b1f);
+  --modal-subheading-color: var(--color-on-surface-variant, #49454f);
+  --modal-content-color: var(--color-on-surface-variant, #49454f);
+  --modal-divider-color: var(--color-outline-variant, #cac4d0);
+  --modal-elevation: var(--elevation-level3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3));
+}
+
+/* Scrim backdrop */
+.scrim {
+  background-color: var(--modal-scrim-color);
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  transition: opacity var(--modal-transition-duration) var(--modal-transition-easing);
+  z-index: 1000;
+}
+
+.scrim.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Dialog wrapper — centres the dialog on screen */
+.dialog-wrapper {
+  align-items: center;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  overflow-y: auto;
+  padding: var(--spacing-400, 2rem) var(--spacing-200, 1rem);
+  position: fixed;
+  z-index: 1001;
+}
+
+/* Dialog container */
+.dialog {
+  background-color: var(--modal-container-color);
+  border-radius: var(--modal-shape);
+  box-shadow: var(--modal-elevation);
+  display: flex;
+  flex-direction: column;
+  max-height: var(--modal-max-height);
+  max-width: var(--modal-max-width);
+  min-width: var(--modal-min-width);
+  opacity: 0;
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  transform: scale(0.9);
+  width: 100%;
+
+  &.open {
+    animation: modal-enter var(--modal-transition-duration) var(--modal-transition-easing) forwards;
+  }
+
+  &:not(.open) {
+    animation: modal-exit var(--modal-transition-duration) var(--modal-transition-easing) forwards;
+  }
+}
+
+/* Sizes */
+.dialog.size-xs {
+  --modal-max-width: 320px;
+}
+
+.dialog.size-sm {
+  --modal-max-width: 420px;
+}
+
+.dialog.size-md {
+  --modal-max-width: 560px;
+}
+
+.dialog.size-lg {
+  --modal-max-width: 800px;
+}
+
+.dialog.size-fullscreen {
+  --modal-max-width: 100%;
+  --modal-max-height: 100%;
+  border-radius: 0;
+  max-height: 100dvh;
+  max-width: 100vw;
+}
+
+.dialog-wrapper:has(.dialog.size-fullscreen) {
+  padding: 0;
+}
+
+/* Header */
+.dialog-header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--spacing-200, 1rem);
+  padding: var(--spacing-300, 1.5rem) var(--spacing-300, 1.5rem) var(--spacing-200, 1rem);
+}
+
+.dialog-heading-section {
+  flex: 1;
+  min-width: 0;
+}
+
+.dialog-subheading {
+  color: var(--modal-subheading-color);
+  font-family: var(--typography-label-medium-font-family, sans-serif);
+  font-size: var(--typography-label-medium-font-size, 0.75rem);
+  font-weight: var(--typography-label-medium-font-weight, 500);
+  letter-spacing: var(--typography-label-medium-letter-spacing, 0.05em);
+  line-height: var(--typography-label-medium-line-height, 1.25rem);
+  margin: 0 0 var(--spacing-050, 0.25rem);
+  text-transform: uppercase;
+}
+
+.dialog-heading {
+  color: var(--modal-heading-color);
+  font-family: var(--typography-headline-small-font-family, sans-serif);
+  font-size: var(--typography-headline-small-font-size, 1.5rem);
+  font-weight: var(--typography-headline-small-font-weight, 400);
+  letter-spacing: var(--typography-headline-small-letter-spacing, 0);
+  line-height: var(--typography-headline-small-line-height, 2rem);
+  margin: 0;
+}
+
+.dialog-close {
+  flex-shrink: 0;
+  margin-block-start: -0.25rem;
+  margin-inline-end: -0.25rem;
+}
+
+/* Body content */
+.dialog-content {
+  color: var(--modal-content-color);
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 0 var(--spacing-300, 1.5rem) var(--spacing-300, 1.5rem);
+}
+
+/* When there is no header */
+.dialog:not(:has(.dialog-header)) .dialog-content {
+  padding-top: var(--spacing-300, 1.5rem);
+}
+
+/* Footer */
+.dialog-footer {
+  border-top: 1px solid transparent;
+}
+
+.dialog-footer:has(slot:not(:empty)),
+.dialog-footer slot::slotted(*) {
+  border-top-color: var(--modal-divider-color);
+}
+
+/* Loading overlay */
+.dialog-loader {
+  align-items: center;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  position: absolute;
+}
+
+.dialog-loader-scrim {
+  background-color: var(--modal-container-color);
+  inset: 0;
+  opacity: 0.72;
+  position: absolute;
+}
+
+/* Animations */
+@keyframes modal-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes modal-exit {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}

package/src/modal/modal.ts

@@ -0,0 +1,201 @@
+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';
+import styles from './modal.scss';
+
+type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';
+
+/**
+ * @label Modal
+ * @tag wc-modal
+ * @rawTag modal-wc
+ * @summary A Material Design 3 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.
+ * @cssprop --modal-shape - Corner radius of the dialog container.
+ * @cssprop --modal-min-width - Minimum width of the dialog.
+ * @cssprop --modal-max-width - Maximum width of the dialog.
+ * @cssprop --modal-max-height - Maximum height of the dialog.
+ *
+ * @example
+ * ```html
+ * <wc-modal open heading="Confirm Action">
+ *   <p>Are you sure you want to continue?</p>
+ *   <div slot="footer">
+ *     <wc-button variant="text">Cancel</wc-button>
+ *     <wc-button>Confirm</wc-button>
+ *   </div>
+ * </wc-modal>
+ * ```
+ * @tags overlay, dialog, feedback
+ */
+@IndividualComponent
+export class Modal extends LitElement {
+  static styles = [styles];
+
+  /** Whether the modal is open. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /** Heading text shown in the modal header. */
+  @property({ type: String, reflect: true }) heading = '';
+
+  /** Optional subheading / label text shown above the heading. */
+  @property({ type: String, reflect: true }) subheading = '';
+
+  /**
+   * Size of the modal dialog.
+   * - `"xs"`: Extra-small.
+   * - `"sm"`: Small.
+   * - `"md"`: Medium (default).
+   * - `"lg"`: Large.
+   * - `"fullscreen"`: Full-screen dialog.
+   */
+  @property({ type: String, reflect: true }) size: ModalSize = 'md';
+
+  /** When true, hides the close button in the header. */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-close' })
+  hideClose = false;
+
+  /** When true, renders a loading overlay inside the modal. */
+  @property({ type: Boolean, reflect: true, attribute: 'show-loader' })
+  showLoader = false;
+
+  /** When true, clicking the scrim will not close the modal. */
+  @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;
+
+  @state() private _visible = false;
+
+  show() {
+    this.open = true;
+  }
+
+  hide() {
+    this._close('programmatic');
+  }
+
+  private _close(reason: string) {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent('modal-close', {
+        detail: { reason },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleScrimClick() {
+    if (!this.noScrimClose) {
+      this._close('scrim');
+    }
+  }
+
+  private _handleCloseClick() {
+    this._close('close-button');
+  }
+
+  private readonly _handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      this._close('escape');
+    }
+  };
+
+  protected updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this._visible = true;
+        document.body.style.overflow = 'hidden';
+        document.addEventListener('keydown', this._handleKeydown);
+      } else {
+        document.body.style.overflow = '';
+        document.removeEventListener('keydown', this._handleKeydown);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.body.style.overflow = '';
+    document.removeEventListener('keydown', this._handleKeydown);
+  }
+
+  private _handleAnimationEnd(e: AnimationEvent) {
+    if (e.animationName === 'modal-exit') {
+      this._visible = false;
+    }
+  }
+
+  render() {
+    if (!this.open && !this._visible) return nothing;
+
+    const hasHeader = this.heading || this.subheading || !this.hideClose;
+
+    return html`
+      <div
+        class=${classMap({ scrim: true, visible: this.open })}
+        @click=${this._handleScrimClick}
+        aria-hidden="true"
+      ></div>
+
+      <div class="dialog-wrapper" role="presentation">
+        <div
+          class=${classMap({
+            dialog: true,
+            open: this.open,
+            [`size-${this.size}`]: true,
+            'show-loader': this.showLoader,
+          })}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this.heading ? 'modal-heading' : nothing}
+          @animationend=${this._handleAnimationEnd}
+        >
+          ${hasHeader
+            ? html`
+                <div class="dialog-header">
+                  <div class="dialog-heading-section">
+                    ${this.subheading
+                      ? html`<p class="dialog-subheading">${this.subheading}</p>`
+                      : nothing}
+                    ${this.heading
+                      ? html`<h2 id="modal-heading" class="dialog-heading">
+                          ${this.heading}
+                        </h2>`
+                      : nothing}
+                  </div>
+                  ${!this.hideClose
+                    ? html`<wc-icon-button
+                        class="dialog-close"
+                        variant="text"
+                        aria-label="Close dialog"
+                        @click=${this._handleCloseClick}
+                      >
+                        <wc-icon name="close"></wc-icon>
+                      </wc-icon-button>`
+                    : nothing}
+                </div>
+              `
+            : nothing}
+
+          <div class="dialog-content">
+            <slot></slot>
+          </div>
+
+          <div class="dialog-footer">
+            <slot name="footer"></slot>
+          </div>
+
+          ${this.showLoader
+            ? html`<div class="dialog-loader" aria-hidden="true">
+                <div class="dialog-loader-scrim"></div>
+                <wc-spinner></wc-spinner>
+              </div>`
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/notification-manager/index.ts

@@ -0,0 +1 @@
+export { NotificationManager } from './notification-manager.js';