@redvars/peacock 3.3.3 → 3.5.0

package/src/banner/banner.ts

@@ -0,0 +1,107 @@
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './banner.scss';
+
+type BannerVariant = 'note' | 'info' | 'success' | 'warning' | 'error';
+
+const VARIANT_LABELS: Record<BannerVariant, string> = {
+  note: 'Note',
+  info: 'Info',
+  success: 'Success',
+  warning: 'Warning',
+  error: 'Error',
+};
+
+const VARIANT_ICONS: Record<BannerVariant, string> = {
+  note: 'star',
+  info: 'info',
+  success: 'check_circle',
+  warning: 'warning',
+  error: 'error',
+};
+
+/**
+ * @label Banner
+ * @tag wc-banner
+ * @rawTag banner
+ * @summary Banners show short, prominent contextual messages with optional icon and description.
+ *
+ * @cssprop --banner-container-color - Background color of the banner container.
+ * @cssprop --banner-label-text-color - Label text color.
+ * @cssprop --banner-description-text-color - Description text color.
+ * @cssprop --banner-icon-color - Icon color.
+ * @cssprop --banner-border-radius - Border radius of the banner surface.
+ *
+ * @example
+ * ```html
+ * <wc-banner variant="note" description="Use semantic roles that preserve a 3:1 contrast ratio."></wc-banner>
+ * ```
+ * @tags display, feedback
+ */
+@IndividualComponent
+export class Banner extends LitElement {
+  static styles = [styles];
+
+  /**
+   * Visual intent of the banner.
+   */
+  @property({ type: String, reflect: true })
+  variant: BannerVariant = 'note';
+
+  /**
+   * Optional explicit label text. Falls back to a variant-based label.
+   */
+  @property({ type: String })
+  label?: string;
+
+  /**
+   * Optional explicit icon name. Falls back to a variant-based icon.
+   */
+  @property({ type: String })
+  icon?: string;
+
+  /**
+   * Optional description text when a default slot is not provided.
+   */
+  @property({ type: String })
+  description = '';
+
+  /**
+   * When true, label and description are rendered on a single line.
+   */
+  @property({ type: Boolean, reflect: true })
+  inline = false;
+
+  private get resolvedLabel() {
+    return this.label || VARIANT_LABELS[this.variant];
+  }
+
+  private get resolvedIcon() {
+    return this.icon || VARIANT_ICONS[this.variant];
+  }
+
+  render() {
+    return html`
+      <div class=${classMap({ 'banner': true, [this.variant]: true })} role="status" aria-live="polite">
+        <div class="banner-icon" aria-hidden="true">
+          <slot name="icon">
+            <wc-icon name=${this.resolvedIcon}></wc-icon>
+          </slot>
+        </div>
+
+        <div class=${classMap({ 'banner-content': true, [this.variant]: true, inline: this.inline })}>
+          <div class="banner-label">
+            <slot name="label">${this.resolvedLabel}:</slot>
+          </div>
+
+          <div class="banner-description">
+            <slot>${this.description || nothing}</slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/banner/index.ts

@@ -0,0 +1 @@
+export { Banner } from './banner.js';

package/src/bottom-sheet/bottom-sheet.scss

@@ -0,0 +1,88 @@
+@use "../../scss/mixin";
+
+@include mixin.base-styles;
+
+:host {
+  display: contents;
+
+  --bottom-sheet-container-color: var(--color-surface-container-low, #f7f2fa);
+  --bottom-sheet-scrim-color: rgba(0, 0, 0, 0.32);
+  --bottom-sheet-shape: var(--shape-corner-extra-large, 28px);
+  --bottom-sheet-max-height: 90dvh;
+  --bottom-sheet-handle-color: var(--color-on-surface-variant, #49454f);
+  --bottom-sheet-transition-duration: var(--duration-medium2, 300ms);
+  --bottom-sheet-transition-easing: var(--easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.scrim {
+  inset: 0;
+  position: fixed;
+  background-color: var(--bottom-sheet-scrim-color);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--bottom-sheet-transition-duration) var(--bottom-sheet-transition-easing);
+  z-index: 1000;
+}
+
+.scrim.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sheet {
+  background-color: var(--bottom-sheet-container-color);
+  border-radius: var(--bottom-sheet-shape) var(--bottom-sheet-shape) 0 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  max-height: var(--bottom-sheet-max-height);
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  transform: translateY(100%);
+  transition:
+    transform var(--bottom-sheet-transition-duration) var(--bottom-sheet-transition-easing);
+  will-change: transform;
+  z-index: 1001;
+}
+
+.sheet.variant-standard {
+  position: relative;
+  z-index: 1;
+}
+
+.sheet.open {
+  transform: translateY(0);
+}
+
+.sheet.dragging {
+  transition: none;
+}
+
+.handle-area {
+  cursor: grab;
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-100, 0.5rem) var(--spacing-200, 1rem);
+  touch-action: none;
+}
+
+.handle-area:active {
+  cursor: grabbing;
+}
+
+.handle {
+  background-color: var(--bottom-sheet-handle-color);
+  border-radius: var(--shape-corner-full, 9999px);
+  height: 4px;
+  opacity: 0.4;
+  width: 2rem;
+}
+
+.content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--spacing-100, 0.5rem) var(--spacing-300, 1.5rem) var(--spacing-300, 1.5rem);
+}

package/src/bottom-sheet/bottom-sheet.ts

@@ -0,0 +1,135 @@
+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 './bottom-sheet.scss';
+
+/**
+ * @label Bottom Sheet
+ * @tag wc-bottom-sheet
+ * @rawTag bottom-sheet
+ * @summary Bottom sheets slide up from the bottom of the screen to reveal additional content. Supports standard and modal variants per Material Design 3.
+ *
+ * @cssprop --bottom-sheet-container-color - Background color of the sheet container.
+ * @cssprop --bottom-sheet-scrim-color - Color of the modal scrim overlay.
+ * @cssprop --bottom-sheet-shape - Corner radius of the top edge.
+ * @cssprop --bottom-sheet-max-height - Maximum height of the sheet.
+ *
+ * @example
+ * ```html
+ * Bottom Sheet
+ * ```
+ * @tags navigation, overlay
+ */
+@IndividualComponent
+export class BottomSheet extends LitElement {
+  static styles = [styles];
+
+  /** Whether the sheet is visible. */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * Sheet variant.
+   * - `"standard"`: Coexists with page content; no scrim.
+   * - `"modal"`: Overlays page content with a scrim backdrop.
+   */
+  @property({ type: String, reflect: true }) variant: 'standard' | 'modal' =
+    'modal';
+
+  /** Whether to show the drag handle. */
+  @property({ type: Boolean, attribute: 'show-handle' }) showHandle = true;
+
+  @state() private _dragging = false;
+  @state() private _dragStartY = 0;
+  @state() private _dragOffsetY = 0;
+
+  show() {
+    this.open = true;
+  }
+
+  hide() {
+    this._close('programmatic');
+  }
+
+  private _close(reason: string) {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent('bottom-sheet-close', {
+        detail: { reason },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleScrimClick() {
+    if (this.variant === 'modal') {
+      this._close('scrim');
+    }
+  }
+
+  private _handleDragStart(e: PointerEvent) {
+    this._dragging = true;
+    this._dragStartY = e.clientY;
+    this._dragOffsetY = 0;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  private _handleDragMove(e: PointerEvent) {
+    if (!this._dragging) return;
+    const delta = e.clientY - this._dragStartY;
+    this._dragOffsetY = Math.max(0, delta);
+  }
+
+  private _handleDragEnd() {
+    if (!this._dragging) return;
+    this._dragging = false;
+    if (this._dragOffsetY > 80) {
+      this._close('drag');
+    }
+    this._dragOffsetY = 0;
+  }
+
+  render() {
+    const translateY = this._dragging ? `${this._dragOffsetY}px` : undefined;
+
+    return html`
+      ${this.variant === 'modal'
+        ? html`<div
+            class=${classMap({ scrim: true, visible: this.open })}
+            @click=${this._handleScrimClick}
+          ></div>`
+        : nothing}
+
+      <div
+        class=${classMap({
+          sheet: true,
+          open: this.open,
+          dragging: this._dragging,
+          [`variant-${this.variant}`]: true,
+        })}
+        style=${translateY ? `transform: translateY(${translateY})` : ''}
+        role="dialog"
+        aria-modal=${this.variant === 'modal' ? 'true' : 'false'}
+        aria-hidden=${!this.open ? 'true' : 'false'}
+      >
+        ${this.showHandle
+          ? html`<div
+              class="handle-area"
+              @pointerdown=${this._handleDragStart}
+              @pointermove=${this._handleDragMove}
+              @pointerup=${this._handleDragEnd}
+              @pointercancel=${this._handleDragEnd}
+            >
+              <div class="handle"></div>
+            </div>`
+          : nothing}
+
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/bottom-sheet/index.ts

@@ -0,0 +1 @@
+export { BottomSheet } from './bottom-sheet.js';

package/src/button/BaseButton.ts

@@ -1,9 +1,10 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { dispatchActivationClick, isActivationClick } from '../utils/dispatch-event-utils.js';
+import { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';
+import BaseHyperlink from '@/__base_element/BaseHyperlink.js';
 
-export class BaseButton extends LitElement {
-  #id = crypto.randomUUID();
+export class BaseButton extends BaseHyperlink(LitElement) {
+  protected static readonly DISABLED_REASON_ID = 'disabled-reason';
 
   @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =
     'button';
@@ -40,14 +41,14 @@ export class BaseButton extends LitElement {
     | 'success'
     | 'danger'
     | 'warning'
-    | 'light'
-    | 'dark' = 'primary';
+    | 'surface'
+    | 'on-surface' = 'primary';
 
   /**
    * Button size.
    * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
    */
-  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
 
   /**
    * If true, the user cannot interact with the button. Defaults to `false`.
@@ -55,12 +56,12 @@ export class BaseButton extends LitElement {
   @property({ type: Boolean, reflect: true })
   disabled: boolean = false;
 
-  @property() skeleton: boolean = false;
+  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;
 
   /**
    * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
    */
-  @property({ reflect: true, attribute: 'soft-disabled' })
+  @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
   softDisabled: boolean = false;
 
   /**
@@ -68,21 +69,16 @@ export class BaseButton extends LitElement {
    */
   @property({ attribute: 'disabled-reason' })
   disabledReason: string = '';
-
-  /**
-   * Hyperlink to navigate to on click.
-   */
-  @property({ reflect: true }) href?: string;
+  
 
   @property({ reflect: true })
   configAria?: { [key: string]: any };
 
-  /**
-   * Sets or retrieves the window or frame at which to target content.
-   */
-  @property() target: string = '_self';
+  
+
+  @property({ type: Boolean, reflect: true }) toggle: boolean = false;
 
-  @property() selected: boolean = false;
+  @property({ type: Boolean, reflect: true }) selected: boolean = false;
 
   /**
    * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
@@ -134,10 +130,6 @@ export class BaseButton extends LitElement {
     }
   };
 
-  __isLink() {
-    return !!this.href;
-  }
-
   __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
     event => {
       this.__dispatchClick(event);
@@ -157,6 +149,10 @@ export class BaseButton extends LitElement {
       return;
     }
 
+    if (this.toggle) {
+      this.selected = !this.selected;
+    }
+
     this.focus();
     dispatchActivationClick(this.buttonElement);
   };
@@ -166,8 +162,8 @@ export class BaseButton extends LitElement {
       this.color = 'primary';
       this.variant = 'filled';
     } else if (this.type === 'secondary') {
-      this.color = 'dark';
-      this.variant = 'outlined';
+      this.color = 'surface';
+      this.variant = 'filled';
     } else if (this.type === 'tertiary') {
       this.color = 'primary';
       this.variant = 'text';
@@ -177,22 +173,22 @@ export class BaseButton extends LitElement {
     }
   }
 
-  __getDisabledReasonID() {
+  protected get __disabledReasonID(): string | undefined {
     return this.disabled && this.disabledReason
-      ? `disabled-reason-${this.#id}`
-      : nothing;
+      ? BaseButton.DISABLED_REASON_ID
+      : undefined;
   }
 
   __renderDisabledReason() {
-    const disabledReasonID = this.__getDisabledReasonID();
+    const disabledReasonID = this.__disabledReasonID;
     if (disabledReasonID)
       return html`<div
-        id="disabled-reason-${this.#id}"
+        id=${disabledReasonID}
         role="tooltip"
         aria-label=${this.disabledReason}
         class="screen-reader-only"
       >
-        {this.disabledReason}
+        ${this.disabledReason}
       </div>`;
     return nothing;
   }

package/src/button/button/button-colors.scss

@@ -18,36 +18,107 @@
   --neo-button-label-text-color: var(--color-on-#{$color});
 }
 
-:host([color=primary]) {
+@mixin _button-color-toggle-unselected($color) {
+
+  --filled-button-container-color: var(--color-surface-container);
+  --filled-button-label-text-color: var(--color-surface-container-variant);
+
+  --tonal-button-container-color: var(--color-#{$color}-container);
+  --tonal-button-label-text-color: var(--color-on-#{$color}-container);
+
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-#{$color});
+
+  --outlined-button-outline-color: var(--color-#{$color});
+  --outlined-button-label-text-color:  var(--color-#{$color});
+}
+
+@mixin _button-color-toggle-selected($color) {
+
+  --filled-button-container-color: var(--color-#{$color});
+  --filled-button-label-text-color: var(--color-on-#{$color});
+
+  --tonal-button-container-color: var(--color-#{$color});
+  --tonal-button-label-text-color: var(--color-on-#{$color});
+
+  --elevated-button-container-color: var(--color-#{$color});
+  --elevated-button-label-text-color: var(--color-on-#{$color});
+
+  --outlined-button-outline-color: var(--color-inverse-surface);
+  --outlined-button-label-text-color:  var(--color-inverse-on-surface);
+}
+
+:host([color=primary]:not([toggle])) {
   @include _button-color(primary);
 }
 
-:host([color=secondary]) {
+:host([color=primary][toggle][selected]) {
+  @include _button-color-toggle-selected(primary);
+}
+
+:host([color=primary][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(primary);
+}
+
+:host([color=secondary]:not([toggle])) {
   @include _button-color(secondary);
 }
 
-:host([color=tertiary]) {
+:host([color=secondary][toggle][selected]) {
+  @include _button-color-toggle-selected(secondary);
+}
+
+:host([color=secondary][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(secondary);
+}
+
+:host([color=tertiary]:not([toggle])) {
   @include _button-color(tertiary);
 }
 
-:host([color=success]) {
+:host([color=tertiary][toggle][selected]) {
+  @include _button-color-toggle-selected(tertiary);
+}
+
+:host([color=tertiary][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(tertiary);
+}
+
+:host([color=success]:not([toggle])) {
   @include _button-color(success);
 }
 
-:host([color=danger]) {
+:host([color=success][toggle][selected]) {
+  @include _button-color-toggle-selected(success);
+}
+
+:host([color=success][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(success);
+}
+
+
+:host([color=danger]:not([toggle])) {
   @include _button-color(error);
 }
 
+:host([color=danger][toggle][selected]) {
+  @include _button-color-toggle-selected(error);
+}
+
+:host([color=danger][toggle]:not([selected])) {
+  @include _button-color-toggle-unselected(error);
+}
+
 
-:host([color=dark]) {
+:host([color=on-surface]) {
   --filled-button-container-color: var(--color-on-surface);
   --filled-button-label-text-color: var(--color-surface);
 
-  --tonal-button-container-color: var(--color-surface-container);
-  --tonal-button-label-text-color: var(--color-on-surface-container);
+  --tonal-button-container-color: var(--color-on-surface-container);
+  --tonal-button-label-text-color: var(--color-surface-container-high);
 
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-on-surface);
+  --elevated-button-container-color: var(--color-on-surface);
+  --elevated-button-label-text-color: var(--color-surface);
 
   --outlined-button-outline-color: var(--color-on-surface);
   --outlined-button-label-text-color: var(--color-on-surface);
@@ -58,20 +129,20 @@
   --neo-button-label-text-color: var(--color-surface);
 }
 
-:host([color=light]) {
-  --filled-button-container-color: var(--color-surface);
+:host([color=surface]) {
+  --filled-button-container-color: var(--color-surface-container-high);
   --filled-button-label-text-color: var(--color-on-surface);
 
-  --tonal-button-container-color: var(--color-on-surface-container);
-  --tonal-button-label-text-color: var(--color-surface-container);
+  --tonal-button-container-color: var(--color-surface-container-high);
+  --tonal-button-label-text-color: var(--color-on-surface-container);
 
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-white);
+  --elevated-button-container-color: var(--color-surface);
+  --elevated-button-label-text-color: var(--color-on-surface);
 
-  --outlined-button-outline-color: var(--color-surface);
-  --outlined-button-label-text-color: var(--color-surface);
+  --outlined-button-outline-color: var(--color-on-surface);
+  --outlined-button-label-text-color: var(--color-on-surface);
 
-  --text-button-label-text-color: var(--color-surface);
+  --text-button-label-text-color: var(--color-on-surface);
 
   --neo-button-container-color: var(--color-surface);
   --neo-button-label-text-color: var(--color-on-surface);