@redvars/peacock 3.4.0 → 3.5.0

package/src/snackbar/snackbar.scss

@@ -2,10 +2,38 @@
 
 @include mixin.base-styles;
 
+@keyframes snackbar-enter {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes snackbar-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+}
+
 :host {
-  display: inline-flex;
-  max-width: 42rem;
-  min-width: 21.5rem;
+  display: flex;
+  inset-block-end: calc(var(--snackbar-offset-bottom, 1rem) + env(safe-area-inset-bottom, 0px));
+  inset-inline: var(--snackbar-offset-inline, 1rem);
+  justify-content: center;
+  pointer-events: none;
+  position: fixed;
+  z-index: var(--snackbar-z-index, 1000);
 
   --snackbar-container-color: var(--color-inverse-surface);
   --snackbar-label-text-color: var(--color-inverse-on-surface);
@@ -20,54 +48,57 @@
   background-color: var(--snackbar-container-color);
   border-radius: var(--snackbar-border-radius);
   color: var(--snackbar-label-text-color);
-  display: inline-flex;
+  display: none;
   gap: var(--spacing-100);
+  max-width: min(42rem, 100%);
+  min-width: min(21.5rem, 100%);
   min-height: 3rem;
-  opacity: 0;
   padding: var(--spacing-100) var(--spacing-200);
   pointer-events: none;
-  transform: translateY(0.5rem);
-  transition: opacity var(--duration-short2) var(--easing-standard),
-    transform var(--duration-short2) var(--easing-standard);
 }
 
 .snackbar.open {
-  opacity: 1;
+  animation: snackbar-enter var(--duration-medium1, 300ms) var(--easing-standard, cubic-bezier(0.2, 0, 0, 1)) both;
+  display: inline-flex;
   pointer-events: auto;
-  transform: translateY(0);
+}
+
+.snackbar.open.dismissing {
+  animation: snackbar-exit var(--duration-short2, 150ms) var(--easing-standard, cubic-bezier(0.2, 0, 0, 1)) forwards;
+  pointer-events: none;
 }
 
 .label {
   flex: 1 1 auto;
   color: inherit;
-}
-
-.action,
-.close {
-  @include mixin.get-typography(label-large);
+  min-height: 32px;
   align-items: center;
-  background: transparent;
-  border: none;
-  color: var(--snackbar-action-text-color);
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  margin: 0;
-  min-height: 2rem;
-  min-width: 2rem;
-  padding: 0 var(--spacing-100);
+  display: flex;
 }
 
-.close {
-  color: var(--snackbar-close-icon-color);
-  padding: 0;
+.action {
+  --text-button-label-text-color: var(--snackbar-action-text-color);
 }
 
-.close wc-icon {
-  --icon-size: 1.125rem;
-  color: inherit;
+.close {
+  --text-button-label-text-color: var(--snackbar-close-icon-color);
 }
 
 .snackbar.multiline {
   align-items: flex-start;
+
+  .label {
+    height: 100%;
+  }
 }
+
+:host([preview]) {
+  position: relative;
+  inset-inline: unset;
+  inset-block-end: unset;
+
+  .snackbar {
+    display: inline-flex;
+    pointer-events: auto;
+  }
+}

package/src/snackbar/snackbar.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './snackbar.scss';
 
@@ -16,16 +16,23 @@ type SnackbarCloseReason = 'timeout' | 'dismiss' | 'action' | 'programmatic';
  * @cssprop --snackbar-action-text-color - Action text color.
  * @cssprop --snackbar-close-icon-color - Close icon color.
  * @cssprop --snackbar-border-radius - Border radius of the snackbar surface.
+ * @cssprop --snackbar-offset-inline - Inline offset from viewport edges.
+ * @cssprop --snackbar-offset-bottom - Bottom offset from viewport edge.
+ * @cssprop --snackbar-z-index - Stacking order for the snackbar.
  *
  * @example
  * ```html
- * <wc-snackbar open message="Message archived" action-label="Undo"></wc-snackbar>
+ * <wc-snackbar preview message="Message archived" action-label="Undo"></wc-snackbar>
  * ```
  * @tags display, feedback
  */
 export class Snackbar extends LitElement {
   static styles = [styles];
 
+  private static readonly GLOBAL_OPEN_EVENT = 'wc-snackbar-will-open';
+
+  private static readonly EXIT_ANIMATION_MS = 180;
+
   @property({ type: Boolean, reflect: true }) open = false;
 
   @property({ type: String }) message = '';
@@ -39,10 +46,41 @@ export class Snackbar extends LitElement {
 
   @property({ type: Boolean, reflect: true }) multiline = false;
 
+  @property({ type: Boolean, reflect: true }) preview = false;
+
+  @state() private dismissing = false;
+  
+
   private hideTimer: ReturnType<typeof setTimeout> | null = null;
 
+  private exitTimer: ReturnType<typeof setTimeout> | null = null;
+
+  private readonly handleGlobalSnackbarOpen = (
+    event: Event,
+  ) => {
+    const { source } = (event as CustomEvent<{ source?: Snackbar }>).detail;
+    if (source && source !== this) {
+      this.hide();
+    }
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener(
+      Snackbar.GLOBAL_OPEN_EVENT,
+      this.handleGlobalSnackbarOpen,
+    );
+  }
+
   show() {
-    this.open = true;
+    this.dismissing = false;
+    this.clearExitTimer();
+    if (!this.open) {
+      this.open = true;
+      return;
+    }
+
+    this.scheduleAutoHide();
   }
 
   hide() {
@@ -50,11 +88,17 @@ export class Snackbar extends LitElement {
   }
 
   private close(reason: SnackbarCloseReason) {
-    if (!this.open) {
+    if (!this.open || this.dismissing) {
       return;
     }
 
-    this.open = false;
+    this.clearTimer();
+    this.dismissing = true;
+    this.clearExitTimer();
+    this.exitTimer = setTimeout(() => {
+      this.completeDismiss();
+    }, Snackbar.EXIT_ANIMATION_MS);
+
     this.dispatchEvent(
       new CustomEvent('snackbar-close', {
         detail: { reason },
@@ -64,6 +108,12 @@ export class Snackbar extends LitElement {
     );
   }
 
+  private completeDismiss() {
+    this.clearExitTimer();
+    this.dismissing = false;
+    this.open = false;
+  }
+
   private dispatchActionEvent() {
     this.dispatchEvent(
       new CustomEvent('snackbar-action', {
@@ -89,6 +139,19 @@ export class Snackbar extends LitElement {
     }
   }
 
+  private clearExitTimer() {
+    if (this.exitTimer !== null) {
+      clearTimeout(this.exitTimer);
+      this.exitTimer = null;
+    }
+  }
+
+  private handleAnimationEnd(event: AnimationEvent) {
+    if (event.animationName === 'snackbar-exit' && this.dismissing) {
+      this.completeDismiss();
+    }
+  }
+
   private scheduleAutoHide() {
     this.clearTimer();
     if (!this.open || this.duration <= 0) {
@@ -102,11 +165,24 @@ export class Snackbar extends LitElement {
 
   protected updated(changedProperties: Map<string, unknown>) {
     if (changedProperties.has('open')) {
+      if (this.open) {
+        document.dispatchEvent(
+          new CustomEvent(Snackbar.GLOBAL_OPEN_EVENT, {
+            detail: { source: this },
+          }),
+        );
+      }
+
       this.scheduleAutoHide();
     }
   }
 
   disconnectedCallback() {
+    document.removeEventListener(
+      Snackbar.GLOBAL_OPEN_EVENT,
+      this.handleGlobalSnackbarOpen,
+    );
+    this.clearExitTimer();
     this.clearTimer();
     super.disconnectedCallback();
   }
@@ -119,31 +195,35 @@ export class Snackbar extends LitElement {
       <div
         class=${classMap({
           snackbar: true,
-          open: this.open,
+          open: !this.preview && this.open,
+          preview: this.preview,
+          dismissing: this.dismissing,
           multiline: this.multiline,
         })}
         role=${liveRole}
         aria-live="polite"
+        @animationend=${this.handleAnimationEnd}
       >
         <div class="label">
           <slot>${this.message}</slot>
         </div>
 
         ${this.actionLabel
-          ? html`<button class="action" type="button" @click=${this.handleActionClick}>
+          ? html`<wc-button class="action" variant='text' size='small' @click=${this.handleActionClick}>
               ${this.actionLabel}
-            </button>`
+            </wc-button>`
           : nothing}
 
         ${this.showCloseIcon
-          ? html`<button
+          ? html`<wc-icon-button
               class="close"
-              type="button"
+              variant='text' 
+              size='small'
               aria-label="Dismiss notification"
               @click=${this.handleCloseClick}
+              name="close"
             >
-              <wc-icon name="close"></wc-icon>
-            </button>`
+            </wc-icon-button>`
           : nothing}
       </div>
     `;

package/src/switch/switch.ts

@@ -1,7 +1,9 @@
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { spread } from '../spread.js';
+
+import { spread } from '@/__directive/spread.js';
+
 import styles from './switch.scss';
 import BaseInput from '../input/BaseInput.js';
 

package/src/table/table.ts

@@ -2,7 +2,9 @@ import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { throttle } from '../utils.js';
+
+import { throttle } from '@/__utils/throttle.js';
+
 import styles from './table.scss';
 
 const DEFAULT_CELL_WIDTH = 16; // in rem

package/src/tabs/tab.ts

@@ -1,9 +1,12 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { dispatchActivationClick, isActivationClick } from 'src/utils/dispatch-event-utils.js';
-import { observerSlotChangesWithCallback, throttle } from 'src/utils.js';
-import { spread } from 'src/spread.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 { spread } from '@/__directive/spread.js';
+
 import styles from './tab.scss';
 import type { Tabs } from './tabs.js';
 

package/src/textarea/textarea.ts

@@ -1,9 +1,11 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
+
+import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
+import { spread } from '@/__directive/spread.js';
+
 import BaseInput from '../input/BaseInput.js';
 import styles from './textarea.scss';
-import { spread } from '../spread.js';
 
 /**
  * @label Textarea

package/src/time-picker/time-picker.ts

@@ -1,9 +1,11 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
+
+import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
+import { spread } from '@/__directive/spread.js';
+
 import BaseInput from '../input/BaseInput.js';
 import styles from './time-picker.scss';
-import { spread } from '../spread.js';
 
 /**
  * @label Time Picker

package/src/toolbar/index.ts

@@ -0,0 +1 @@
+export { Toolbar } from './toolbar.js';

package/src/toolbar/toolbar-colors.scss

@@ -0,0 +1,16 @@
+:host {
+  /* Docked toolbar */
+  --toolbar-container-color: var(--color-surface-container);
+  --toolbar-title-color: var(--color-on-surface);
+  --toolbar-icon-color: var(--color-on-surface-variant);
+
+  /* Internal aliases used by styles */
+  --_toolbar-container-color: var(--toolbar-container-color);
+  --_toolbar-title-color: var(--toolbar-title-color);
+  --_toolbar-icon-color: var(--toolbar-icon-color);
+}
+
+/* Floating variant uses surface-container-high for a visible pill */
+:host([variant='floating']) {
+  --toolbar-container-color: var(--color-surface-container-high);
+}

package/src/toolbar/toolbar.scss

@@ -0,0 +1,165 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  --toolbar-container-shape: var(--shape-corner-full);
+  --toolbar-docked-container-shape: var(--shape-corner-extra-large) var(--shape-corner-extra-large) var(--shape-corner-none) var(--shape-corner-none);
+  --toolbar-height: 5rem; /* 80dp - small/default docked */
+  --toolbar-padding-inline: 0.75rem;
+  --toolbar-gap: 0.5rem;
+  --toolbar-shadow: none;
+}
+
+/* ---- Shared toolbar base ---- */
+
+.toolbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap);
+  padding-inline: var(--toolbar-padding-inline);
+  min-height: var(--toolbar-height);
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--_toolbar-title-color);
+  --icon-color: var(--_toolbar-icon-color);
+  box-shadow: var(--toolbar-shadow);
+}
+
+.toolbar-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_toolbar-container-color);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ---- Docked variant ---- */
+
+.toolbar.variant-docked {
+  width: 100%;
+  padding-inline: var(--toolbar-padding-inline);
+  padding-block-start: 0.5rem;
+  padding-block-end: calc(0.5rem + env(safe-area-inset-bottom, 0px));
+
+  .background {
+    border-radius: var(--toolbar-docked-container-shape);
+  }
+
+  .toolbar-content {
+    width: 100%;
+    justify-content: space-between;
+    gap: var(--toolbar-gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  ::slotted(*) {
+    position: relative;
+    z-index: 1;
+    flex-shrink: 0;
+  }
+
+  ::slotted(wc-icon-button) {
+    --button-container-shape: var(--shape-corner-full);
+    --button-container-shape-variant: round;
+  }
+
+  /* Size variants */
+  &.size-small {
+    --toolbar-height: 5rem;
+  }
+
+  &.size-medium {
+    --toolbar-height: 6rem;
+  }
+
+  &.size-large {
+    --toolbar-height: 7rem;
+  }
+
+  &.elevated {
+    --toolbar-shadow: var(--elevation-shadow-level-3, 0 4px 8px rgba(0, 0, 0, 0.15));
+  }
+}
+
+/* ---- Floating variant ---- */
+
+.toolbar.variant-floating {
+  --toolbar-container-shape: var(--shape-corner-full);
+
+  border-radius: var(--toolbar-container-shape);
+  width: auto;
+  display: inline-flex;
+  padding: 0.75rem;
+  gap: 0.5rem;
+
+  .elevation {
+    --elevation-level: 3;
+    --elevation-container-shape: var(--toolbar-container-shape);
+    --elevation-container-shape-variant: round;
+  }
+
+  .background {
+    border-radius: var(--toolbar-container-shape);
+  }
+
+  .toolbar-content {
+    width: auto;
+    gap: 0.5rem;
+  }
+
+  ::slotted(*) {
+    position: relative;
+    z-index: 1;
+  }
+
+  ::slotted(wc-icon-button) {
+    --button-container-shape: var(--shape-corner-full);
+    --button-container-shape-variant: round;
+  }
+
+  &.orientation-horizontal {
+    min-height: auto;
+    padding-block: 0.5rem;
+    padding-inline: 0.75rem;
+
+    .toolbar-content {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+
+  &.orientation-vertical {
+    min-height: auto;
+    width: auto;
+    padding-block: 0.75rem;
+    padding-inline: 0.5rem;
+
+    .toolbar-content {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  &.elevated {
+    .elevation {
+      --elevation-level: 4;
+    }
+  }
+}