@redvars/peacock 3.4.0 → 3.5.1

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%;

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}
             >
               <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';
 
@@ -190,6 +193,7 @@ export class Tab extends LitElement {
 
     if (!isLink) {
           return html`<button
+          id="button"
               class=${classMap(cssClasses)}
               tabindex="0"
               @mousedown=${this.__handlePress}
@@ -238,7 +242,7 @@ export class Tab extends LitElement {
 
   renderPrimaryTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -264,7 +268,7 @@ export class Tab extends LitElement {
 
   renderSecondaryTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -297,7 +301,7 @@ export class Tab extends LitElement {
 
   renderSegmentedTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>

package/src/text/text.css-component.scss

@@ -49,11 +49,17 @@ $sizes: "large", "medium", 'small';
 }
 
 .text-code-block {
-  display: inline-flex;
   background-color: var(--color-surface-variant);
   text-shadow: 0 1px 1px var(--color-surface-variant);
   color: var(--color-on-surface);
   border-radius: var(--shape-corner-extra-small);
   padding: var(--spacing-050);
   font-family: var(--font-family-monospace);
+
+  display: inline-block;
+  max-width: 100%;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  vertical-align: middle;
 }

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
@@ -165,7 +167,6 @@ export class TimePicker extends BaseInput {
           slot="field-end"
           color="secondary"
           variant="text"
-          name="calendar_today"
           ?disabled=${this.disabled}
           @click=${() => {
             setTimeout(() => {
@@ -174,6 +175,7 @@ export class TimePicker extends BaseInput {
             });
           }}
         >
+          <wc-icon name="calendar_today"></wc-icon>
         </wc-icon-button>
       </wc-field>
     `;

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);
+}