@redvars/peacock 3.3.3 → 3.5.0

package/src/slider/slider.scss

@@ -15,6 +15,17 @@
   touch-action: none; // Prevent scrolling while dragging
 }
 
+.slider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-100, 0.5rem);
+  width: 100%;
+}
+
+.slider.with-value .slider-container {
+  flex: 1;
+}
+
 .slider-container {
   position: relative;
   display: flex;
@@ -29,6 +40,14 @@
   }
 }
 
+.value-display {
+  min-width: 2.25rem;
+  text-align: end;
+  color: var(--color-on-surface-variant);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
 .track {
   position: absolute;
   width: 100%;
@@ -42,7 +61,6 @@
     position: absolute;
     height: 100%;
     background-color: var(--_active-track-color);
-    transition: width 0.1s ease-out;
     will-change: width;
   }
 }

package/src/slider/slider.ts

@@ -51,9 +51,15 @@ export class Slider extends LitElement {
    */
   @property({ type: Boolean }) labeled = true;
 
+  /**
+   * Whether to show the current value beside the slider.
+   */
+  @property({ type: Boolean, attribute: 'show-value' }) showValue = false;
+
   @state() private isDragging = false;
 
   @query('.slider-container') private container!: HTMLElement;
+  
   @query('.thumb') private thumbElement!: HTMLElement;
 
   private handleInput(event: MouseEvent | TouchEvent) {
@@ -150,28 +156,33 @@ export class Slider extends LitElement {
     const percentage = ((this.value - this.min) / (this.max - this.min)) * 100;
 
     return html`
-      <div 
-        class="slider-container ${this.disabled ? 'disabled' : ''}"
-        @mousedown=${this.onMouseDown}
-        @touchstart=${this.onMouseDown}
-      >
-        <div class="track">
-          <div class="track-active" style=${styleMap({ width: `${percentage}%` })}></div>
-        </div>
-
+      <div class="slider ${this.showValue ? 'with-value' : ''}">
         <div 
-          class="thumb" 
-          role="slider"
-          tabindex="${this.disabled ? -1 : 0}"
-          aria-valuemin=${this.min}
-          aria-valuemax=${this.max}
-          aria-valuenow=${this.value}
-          aria-disabled=${this.disabled}
-          style=${styleMap({ left: `calc(${percentage}% - var(--thumb-half))` })}
-          @keydown=${this.handleKeyDown}
+          class="slider-container ${this.disabled ? 'disabled' : ''}"
+          @mousedown=${this.onMouseDown}
+          @touchstart=${this.onMouseDown}
         >
-          ${this.labeled ? html`<div class="value-label">${this.value}</div>` : ''}
+          <div class="track">
+            <div class="track-active" style=${styleMap({ width: `${percentage}%` })}></div>
+          </div>
+
+          <div 
+            class="thumb" 
+            role="slider"
+            aria-label="Slider"
+            tabindex="${this.disabled ? -1 : 0}"
+            aria-valuemin=${this.min}
+            aria-valuemax=${this.max}
+            aria-valuenow=${this.value}
+            aria-disabled=${this.disabled}
+            style=${styleMap({ left: `calc(${percentage}% - var(--thumb-half))` })}
+            @keydown=${this.handleKeyDown}
+          >
+            ${this.labeled ? html`<div class="value-label">${this.value}</div>` : ''}
+          </div>
         </div>
+
+        ${this.showValue ? html`<output class="value-display" aria-live="polite">${this.value}</output>` : ''}
       </div>
     `;
   }

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/demo/index.html

@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/dist/assets/styles.css' />
+  <style>
+    body {
+      background: #fafafa;
+      padding: 2rem;
+      display: grid;
+      gap: 1rem;
+    }
+  </style>
+</head>
+<body>
+
+  <wc-tabs variant="primary">
+    <wc-tab icon="home">Home</wc-tab>
+    <wc-tab active="true" badge="3">Updates</wc-tab>
+    <wc-tab>
+      Inbox
+      <wc-icon slot="icon" name="mail"></wc-icon>
+      <wc-badge slot="badge" value="99+"></wc-badge>
+    </wc-tab>
+    <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
+  </wc-tabs>
+
+  <wc-tabs variant="secondary">
+    <wc-tab active="true">Overview</wc-tab>
+    <wc-tab>
+      Activity
+      <wc-icon slot="icon" name="timeline"></wc-icon>
+    </wc-tab>
+    <wc-tab>Settings</wc-tab>
+  </wc-tabs>
+
+  <wc-tabs variant="filled">
+    <wc-tab active="true">Daily</wc-tab>
+    <wc-tab>Weekly</wc-tab>
+    <wc-tab>
+      Monthly
+      <wc-badge slot="badge" value="3"></wc-badge>
+    </wc-tab>
+    <wc-tab disabled="true">Archived</wc-tab>
+  </wc-tabs>
+
+  <wc-tabs variant="contained">
+    <wc-tab active="true">Summary</wc-tab>
+    <wc-tab>
+      Reports
+      <wc-icon slot="icon" name="bar_chart"></wc-icon>
+    </wc-tab>
+    <wc-tab>Exports</wc-tab>
+  </wc-tabs>
+
+
+  <wc-tab-group>
+  <wc-tabs>
+    <wc-tab icon="home">Home</wc-tab>
+    <wc-tab active="true" badge="3">Updates</wc-tab>
+    <wc-tab>
+      Inbox
+      <wc-icon slot="icon" name="mail"></wc-icon>
+      <wc-badge slot="badge" value="99+"></wc-badge>
+    </wc-tab>
+    <wc-tab disabled="true" icon="block" badge="!">Disabled</wc-tab>
+  </wc-tabs>
+
+  <wc-tab-panel>
+    <pc-text type="heading"> Home content </pc-text>
+  </wc-tab-panel>
+
+  <wc-tab-panel>
+    <pc-text type="heading"> Updates content </pc-text>
+  </wc-tab-panel>
+
+  <wc-tab-panel>
+    <pc-text type="heading"> Inbox content </pc-text>
+  </wc-tab-panel>
+
+  <wc-tab-panel>
+    <pc-text type="heading"> Disabled content </pc-text>
+  </wc-tab-panel>
+</wc-tab-group>
+
+
+  <script type='module' src='/dist/peacock-loader.js'></script>
+</body>
+</html>

package/src/tabs/tab-group.ts

@@ -35,9 +35,6 @@ export class TabGroup extends LitElement {
 
   static TabPanel = TabPanel;
 
-  @property({ reflect: true }) 
-  variant: 'line' | 'line-secondary' | 'contained' | 'pill' = 'line';
-
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('tab-click', this.onTabClick);