@redvars/peacock 3.5.1 → 3.6.1

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,195 @@
+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
+ * 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/navigation-rail/navigation-rail-item.scss

@@ -64,6 +64,13 @@
     flex-shrink: 0;
     transition: background-color var(--duration-short4, 200ms) var(--easing-standard, ease);
 
+    .ripple {
+      inset: 0;
+      z-index: 0;
+      --ripple-pressed-color: var(--_state-color);
+      border-radius: inherit;
+    }
+
     .icon-container {
       display: flex;
       align-items: center;
@@ -81,29 +88,6 @@
     }
   }
 
-  /* State layer for hover/press */
-  .state-layer {
-    position: absolute;
-    top: 0.25rem;
-    left: 50%;
-    transform: translateX(-50%);
-    width: var(--_indicator-width);
-    height: var(--_indicator-height);
-    pointer-events: none;
-    background-color: var(--_state-color);
-    opacity: 0;
-    z-index: 0;
-    border-radius: var(--_indicator-shape);
-    transition: opacity var(--duration-short4, 200ms) var(--easing-standard, ease);
-  }
-
-  .ripple {
-    z-index: 1;
-    --ripple-pressed-color: var(--_state-color);
-    --ripple-state-opacity: 0;
-    border-radius: var(--shape-corner-small, 4px);
-  }
-
   /* Label */
   .label {
     @include mixin.get-typography('label-medium');
@@ -166,20 +150,6 @@
     }
   }
 
-  /* Hover state */
-  &:hover:not(.disabled) {
-    .state-layer {
-      opacity: 0.08;
-    }
-  }
-
-  /* Pressed state */
-  &.pressed:not(.disabled) {
-    .state-layer {
-      opacity: 0.12;
-    }
-  }
-
   /* Disabled state */
   &.disabled {
     cursor: not-allowed;
@@ -208,7 +178,6 @@
 @media (prefers-reduced-motion: reduce) {
   .item {
     .indicator,
-    .state-layer,
     .label {
       transition: none;
     }

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

@@ -155,11 +155,10 @@ export class NavigationRailItem extends LitElement {
   __renderItemContent() {
     return html`
       <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
-      <div class="state-layer"></div>
-      <wc-ripple class="ripple"></wc-ripple>
 
       <div class="item-content">
         <div class="indicator">
+          <wc-ripple class="ripple"></wc-ripple>
           <div class="icon-container">
             <slot name="active-icon" class="active-icon-slot"></slot>
             <slot name="icon" class="icon-slot"></slot>

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

@@ -26,6 +26,21 @@
     align-items: center;
     width: 100%;
     flex-shrink: 0;
+    padding-block-end: 2.5rem;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+    flex-shrink: 0;
+    margin-top: auto;
 
     &:empty {
       display: none;
@@ -34,7 +49,6 @@
 
   wc-divider {
     width: calc(100% - 1rem);
-    margin-block: 0.5rem;
     flex-shrink: 0;
   }
 
@@ -44,29 +58,11 @@
     align-items: center;
     width: 100%;
     gap: 0.75rem; /* 12dp between items */
-    flex: 1;
+    flex: 1 1 auto;
+    min-height: 0;
 
     ::slotted(wc-navigation-rail-item) {
       width: 100%;
     }
   }
-
-  /* Alignment variants */
-  &.align-top {
-    .items {
-      justify-content: flex-start;
-    }
-  }
-
-  &.align-center {
-    .items {
-      justify-content: center;
-    }
-  }
-
-  &.align-bottom {
-    .items {
-      justify-content: flex-end;
-    }
-  }
 }

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

@@ -14,6 +14,9 @@ import { NavigationRailItem } from './navigation-rail-item.js';
  * <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>
  *
+ * @slot header - Content displayed above the rail items.
+ * @slot footer - Content pinned to the bottom of the rail.
+ *
  * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).
  * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.
  * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.
@@ -49,14 +52,6 @@ export class NavigationRail extends LitElement {
 
   static Item = NavigationRailItem;
 
-  /**
-   * Vertical alignment of items within the rail.
-   * - `"top"`: Items align to the top.
-   * - `"center"`: Items are centered (default).
-   * - `"bottom"`: Items align to the bottom.
-   */
-  @property({ reflect: true }) alignment: 'top' | 'center' | 'bottom' = 'center';
-
   /**
    * Display mode of the navigation rail.
    * - `"expanded"`: shows labels.
@@ -130,7 +125,6 @@ export class NavigationRail extends LitElement {
   render() {
     const cssClasses = {
       rail: true,
-      [`align-${this.alignment}`]: true,
       [`mode-${this.mode}`]: true,
     };
 
@@ -143,6 +137,9 @@ export class NavigationRail extends LitElement {
         <nav class="items" role="presentation">
           <slot @slotchange=${this._syncItemMode}></slot>
         </nav>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
       </div>
     `;
   }

package/src/notification-manager/index.ts

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

package/src/notification-manager/notification-manager.scss

@@ -0,0 +1,113 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+@keyframes reveal-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-1rem);
+    max-height: 0;
+  }
+
+  100% {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes reveal-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(1rem);
+    max-height: 0;
+  }
+
+  100% {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+:host {
+  display: block;
+  position: var(--notification-manager-position, absolute);
+  width: 20rem;
+  z-index: var(--z-index-notification-manager, 9000);
+  pointer-events: none;
+}
+
+.notification-manager {
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+  margin: var(--spacing-150);
+}
+
+.notification {
+  pointer-events: auto;
+  max-height: 500px;
+  transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
+  overflow: hidden;
+}
+
+.notification.hidden {
+  max-height: 0;
+  opacity: 0;
+}
+
+/* Position variants */
+
+:host([position='bottom-right']) {
+  bottom: 0;
+  right: 0;
+
+  .notification-manager {
+    align-items: flex-end;
+  }
+
+  .notification {
+    animation: reveal-bottom 0.5s ease-in;
+  }
+}
+
+:host([position='bottom-left']) {
+  bottom: 0;
+  left: 0;
+
+  .notification-manager {
+    align-items: flex-start;
+  }
+
+  .notification {
+    animation: reveal-bottom 0.5s ease-in;
+  }
+}
+
+:host([position='top-right']) {
+  top: 0;
+  right: 0;
+
+  .notification-manager {
+    align-items: flex-end;
+  }
+
+  .notification {
+    animation: reveal-top 0.5s ease-in;
+  }
+}
+
+:host([position='top-left']) {
+  top: 0;
+  left: 0;
+
+  .notification-manager {
+    align-items: flex-start;
+  }
+
+  .notification {
+    animation: reveal-top 0.5s ease-in;
+  }
+}