@redvars/peacock 3.5.0 → 3.6.0

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/navigation-rail/index.ts

@@ -0,0 +1,2 @@
+export { NavigationRail } from './navigation-rail.js';
+export { NavigationRailItem } from './navigation-rail-item.js';

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

@@ -0,0 +1,216 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+/* Reset native button/link styles */
+.item-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  text-align: unset;
+  color: inherit;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 3.5rem; /* 56dp */
+  padding-block: 0.25rem; /* 4dp vertical padding */
+  cursor: pointer;
+  gap: 0.25rem; /* 4dp gap between indicator and label */
+  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));
+  --_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 */
+  --_state-color: var(--_inactive-icon-color);
+
+  /* Focus ring */
+  .focus-ring {
+    z-index: 3;
+    --focus-ring-container-shape-start-start: var(--shape-corner-small);
+    --focus-ring-container-shape-start-end: var(--shape-corner-small);
+    --focus-ring-container-shape-end-start: var(--shape-corner-small);
+    --focus-ring-container-shape-end-end: var(--shape-corner-small);
+  }
+
+  /* Active indicator (pill behind icon) */
+  .indicator {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_indicator-width);
+    height: var(--_indicator-height);
+    border-radius: var(--_indicator-shape);
+    overflow: hidden;
+    flex-shrink: 0;
+    transition: background-color var(--duration-short4, 200ms) var(--easing-standard, ease);
+
+    .icon-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+      position: relative;
+      pointer-events: none;
+
+      ::slotted(*) {
+        --icon-size: 1.5rem; /* 24dp */
+        --icon-color: var(--_inactive-icon-color);
+        color: var(--_inactive-icon-color);
+        display: flex;
+      }
+    }
+  }
+
+  /* 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');
+    color: var(--_inactive-label-color);
+    text-align: center;
+    pointer-events: none;
+    z-index: 1;
+    transition: color var(--duration-short4, 200ms) var(--easing-standard, ease),
+      font-weight var(--duration-short4, 200ms) var(--easing-standard, ease);
+  }
+
+  /* Active icon slot: hidden by default */
+  .active-icon-slot {
+    display: none;
+  }
+
+  .hidden-slot {
+    display: none;
+  }
+
+  /* Item content layout */
+  .item-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    width: 100%;
+    z-index: 1;
+  }
+
+  /* Active state */
+  &.active {
+    --_state-color: var(--_active-icon-color);
+
+    .indicator {
+      background-color: var(--_indicator-color);
+
+      .icon-container {
+        ::slotted(*) {
+          --icon-color: var(--_active-icon-color);
+          color: var(--_active-icon-color);
+        }
+      }
+    }
+
+    .label {
+      color: var(--_active-label-color);
+      font-weight: var(--typography-label-medium-font-weight-bold, 700);
+    }
+  }
+
+  /* Active icon slot: show when active and slot has content */
+  &.active.has-active-icon {
+    .active-icon-slot {
+      display: flex;
+    }
+
+    .icon-slot {
+      display: none;
+    }
+  }
+
+  /* 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;
+
+    .indicator {
+      .icon-container {
+        ::slotted(*) {
+          --icon-color: var(--color-on-surface);
+          color: var(--color-on-surface);
+          opacity: 0.38;
+        }
+      }
+    }
+
+    .label {
+      color: var(--color-on-surface);
+      opacity: 0.38;
+    }
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    .indicator,
+    .state-layer,
+    .label {
+      transition: none;
+    }
+  }
+}