@redvars/peacock 3.8.1 → 3.8.2

package/src/app-bar/app-bar.scss

@@ -0,0 +1,165 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  width: 100%;
+
+  /* ---- Public custom properties ---- */
+  --app-bar-container-height: 4rem; /* 64dp */
+  --app-bar-padding-inline: 0.25rem;
+  --app-bar-shadow: none;
+}
+
+/* ---- Base ---- */
+
+.app-bar {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: var(--app-bar-shadow);
+  color: var(--_app-bar-headline-color);
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_app-bar-container-color);
+  pointer-events: none;
+  z-index: 0;
+  transition: background-color 200ms ease;
+}
+
+/* ---- Row layout ---- */
+
+.row {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  padding-inline: var(--app-bar-padding-inline);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.row-top {
+  height: var(--app-bar-container-height);
+  gap: 0.25rem;
+}
+
+/* ---- Slots ---- */
+
+.leading,
+.trailing {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.25rem;
+}
+
+.leading {
+  --icon-color: var(--_app-bar-leading-icon-color);
+}
+
+.trailing {
+  --icon-color: var(--_app-bar-trailing-icon-color);
+}
+
+.headline {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--typescale-title-large-font);
+  font-size: var(--typescale-title-large-size);
+  font-weight: var(--typescale-title-large-weight);
+  line-height: var(--typescale-title-large-line-height);
+  letter-spacing: var(--typescale-title-large-tracking);
+  color: var(--_app-bar-headline-color);
+  padding-inline: 0.75rem;
+}
+
+/* ---- Small variant (default) ---- */
+
+:host([variant='small']),
+:host(:not([variant])) {
+  .headline {
+    text-align: start;
+  }
+}
+
+/* ---- Center-aligned variant ---- */
+
+:host([variant='center-aligned']) {
+  .headline {
+    text-align: center;
+  }
+}
+
+/* ---- Medium variant ---- */
+
+:host([variant='medium']) {
+  .row-top {
+    .headline {
+      display: none;
+    }
+  }
+
+  .row-bottom {
+    height: 3rem; /* 48dp */
+    padding-inline: calc(var(--app-bar-padding-inline) + 1rem);
+    padding-block-end: 0.5rem;
+    align-items: flex-end;
+
+    .headline {
+      font: var(--typescale-headline-small-font, inherit);
+      font-size: var(--typescale-headline-small-size, 1.5rem);
+      font-weight: var(--typescale-headline-small-weight, 400);
+      line-height: var(--typescale-headline-small-line-height, 2rem);
+      letter-spacing: var(--typescale-headline-small-tracking, 0);
+      padding-inline: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+  }
+}
+
+/* ---- Large variant ---- */
+
+:host([variant='large']) {
+  .row-top {
+    .headline {
+      display: none;
+    }
+  }
+
+  .row-bottom {
+    height: 5.5rem; /* 88dp */
+    padding-inline: calc(var(--app-bar-padding-inline) + 1rem);
+    padding-block-end: 1.75rem;
+    align-items: flex-end;
+
+    .headline {
+      font: var(--typescale-headline-medium-font, inherit);
+      font-size: var(--typescale-headline-medium-size, 1.75rem);
+      font-weight: var(--typescale-headline-medium-weight, 400);
+      line-height: var(--typescale-headline-medium-line-height, 2.25rem);
+      letter-spacing: var(--typescale-headline-medium-tracking, 0);
+      padding-inline: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+  }
+}
+
+/* ---- Scrolled state ---- */
+
+:host([scrolled]) {
+  --app-bar-shadow: var(--elevation-shadow-level-2, 0 2px 4px rgba(0, 0, 0, 0.12));
+}

package/src/app-bar/app-bar.ts

@@ -0,0 +1,155 @@
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './app-bar.scss';
+import colorStyles from './app-bar-colors.scss';
+
+/**
+ * @label App Bar
+ * @tag wc-app-bar
+ * @rawTag app-bar
+ *
+ * @summary A top app bar for page-level navigation and actions.
+ * @overview
+ * <p>The app bar component implements the top app bar pattern. It provides a
+ * consistent header for screens, housing a navigation icon, a page title/headline, and
+ * optional trailing action icons.</p>
+ *
+ * <p>Four size variants are available: <strong>small</strong> (64dp, single-row),
+ * <strong>center-aligned</strong> (64dp, centred headline), <strong>medium</strong>
+ * (112dp, headline below the row), and <strong>large</strong> (152dp, large headline).</p>
+ *
+ * <p>Use the <code>leading</code> slot for a navigation icon (e.g. a hamburger or back
+ * button), the default slot for the headline text, and the <code>trailing</code> slot for
+ * action icon buttons.</p>
+ *
+ * @slot leading - Navigation icon placed at the start of the bar.
+ * @slot - Headline / title text.
+ * @slot trailing - Trailing action icon buttons placed at the end of the bar.
+ *
+ * @cssprop --app-bar-container-color - Background color of the app bar.
+ * @cssprop --app-bar-container-height - Height of the bar in small / center-aligned variants.
+ * @cssprop --app-bar-headline-color - Color of the headline text.
+ * @cssprop --app-bar-leading-icon-color - Color of the leading slot icons.
+ * @cssprop --app-bar-trailing-icon-color - Color of the trailing slot icons.
+ * @cssprop --app-bar-shadow - Box-shadow applied when the bar is scrolled / elevated.
+ *
+ * @example
+ * ```html
+ * <!-- Small app bar (default) -->
+ * <wc-app-bar>
+ *   <wc-icon-button slot="leading" variant="text"><wc-icon name="menu"></wc-icon></wc-icon-button>
+ *   Page Title
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="more_vert"></wc-icon></wc-icon-button>
+ * </wc-app-bar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Center-aligned app bar -->
+ * <wc-app-bar variant="center-aligned">
+ *   <wc-icon-button slot="leading" variant="text"><wc-icon name="arrow_back"></wc-icon></wc-icon-button>
+ *   Details
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="more_vert"></wc-icon></wc-icon-button>
+ * </wc-app-bar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Medium app bar -->
+ * <wc-app-bar variant="medium">
+ *   <wc-icon-button slot="leading" variant="text"><wc-icon name="menu"></wc-icon></wc-icon-button>
+ *   Medium Headline
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ * </wc-app-bar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Large app bar -->
+ * <wc-app-bar variant="large">
+ *   <wc-icon-button slot="leading" variant="text"><wc-icon name="arrow_back"></wc-icon></wc-icon-button>
+ *   Large Headline
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="more_vert"></wc-icon></wc-icon-button>
+ * </wc-app-bar>
+ * ```
+ * @tags navigation display
+ */
+@IndividualComponent
+export class AppBar extends LitElement {
+  static styles = [styles, colorStyles];
+
+  /**
+   * Visual variant of the app bar.
+   * - `"small"`: 64dp single-row bar with leading, title, and trailing (default).
+   * - `"center-aligned"`: 64dp single-row bar with a centred headline.
+   * - `"medium"`: Two-row bar (64dp top row + 48dp headline row).
+   * - `"large"`: Two-row bar with a larger headline (64dp top row + 88dp headline row).
+   */
+  @property({ type: String, reflect: true })
+  variant: 'small' | 'center-aligned' | 'medium' | 'large' = 'small';
+
+  /**
+   * Whether the bar is in its scrolled state, which adds a shadow and optionally
+   * changes the container color to indicate elevation above page content.
+   */
+  @property({ type: Boolean, reflect: true })
+  scrolled: boolean = false;
+
+  override render() {
+    const isTwoRow = this.variant === 'medium' || this.variant === 'large';
+
+    const cssClasses = {
+      'app-bar': true,
+      [`variant-${this.variant}`]: true,
+      scrolled: this.scrolled,
+    };
+
+    if (isTwoRow) {
+      return this.__renderTwoRow(cssClasses);
+    }
+    return this.__renderSingleRow(cssClasses);
+  }
+
+  private __renderSingleRow(cssClasses: Record<string, boolean>) {
+    return html`
+      <header class=${classMap(cssClasses)} role="banner">
+        <div class="background"></div>
+        <div class="row row-top">
+          <div class="leading">
+            <slot name="leading"></slot>
+          </div>
+          <div class="headline">
+            <slot></slot>
+          </div>
+          <div class="trailing">
+            <slot name="trailing"></slot>
+          </div>
+        </div>
+      </header>
+    `;
+  }
+
+  private __renderTwoRow(cssClasses: Record<string, boolean>) {
+    return html`
+      <header class=${classMap(cssClasses)} role="banner">
+        <div class="background"></div>
+        <div class="row row-top">
+          <div class="leading">
+            <slot name="leading"></slot>
+          </div>
+          <div class="trailing">
+            <slot name="trailing"></slot>
+          </div>
+        </div>
+        <div class="row row-bottom">
+          <div class="headline">
+            <slot></slot>
+          </div>
+        </div>
+      </header>
+    `;
+  }
+}

package/src/app-bar/index.ts

@@ -0,0 +1 @@
+export { AppBar } from './app-bar.js';

package/src/avatar/avatar.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './avatar.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Avatar
@@ -22,11 +23,14 @@ import styles from './avatar.scss';
  *
  * @tags display
  */
+@IndividualComponent
 export class Avatar extends LitElement {
   static styles = [styles];
 
+  /** Full name of the person. Used to derive initials when no `src` is provided. */
   @property({ type: String, reflect: true }) name: string = '';
 
+  /** URL of the avatar image. When provided, the image is displayed instead of initials. */
   @property({ type: String, reflect: true }) src?: string;
 
   render() {

package/src/badge/badge.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './badge.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Badge
@@ -17,6 +18,7 @@ import styles from './badge.scss';
  * ```
  * @tags display
  */
+@IndividualComponent
 export class Badge extends LitElement {
   static styles = [styles];
 

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

@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+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';
@@ -8,7 +8,7 @@ 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.
+ * @summary Bottom sheets slide up from the bottom of the screen to reveal additional content. Supports standard and modal variants.
  *
  * @cssprop --bottom-sheet-container-color - Background color of the sheet container.
  * @cssprop --bottom-sheet-scrim-color - Color of the modal scrim overlay.
@@ -40,7 +40,9 @@ export class BottomSheet extends LitElement {
   @property({ type: Boolean, attribute: 'show-handle' }) showHandle = true;
 
   @state() private _dragging = false;
+
   @state() private _dragStartY = 0;
+
   @state() private _dragOffsetY = 0;
 
   show() {
@@ -99,6 +101,9 @@ export class BottomSheet extends LitElement {
         ? html`<div
             class=${classMap({ scrim: true, visible: this.open })}
             @click=${this._handleScrimClick}
+            @keydown=${(e: KeyboardEvent) => {
+              if (e.key === 'Escape') this._close('esc');
+            }}
           ></div>`
         : nothing}
 
@@ -111,6 +116,7 @@ export class BottomSheet extends LitElement {
         })}
         style=${translateY ? `transform: translateY(${translateY})` : ''}
         role="dialog"
+        aria-label="${this.ariaLabel ?? 'Bottom sheet'}"
         aria-modal=${this.variant === 'modal' ? 'true' : 'false'}
         aria-hidden=${!this.open ? 'true' : 'false'}
       >

package/src/breadcrumb/breadcrumb/breadcrumb.ts

@@ -2,6 +2,7 @@ import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './breadcrumb.scss';
 import { BreadcrumbItem } from '../breadcrumb-item/breadcrumb-item.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Breadcrumb
@@ -23,6 +24,7 @@ import { BreadcrumbItem } from '../breadcrumb-item/breadcrumb-item.js';
  * </wc-breadcrumb>
  * ```
  */
+@IndividualComponent
 export class Breadcrumb extends LitElement {
   static styles = [styles];
 

package/src/breadcrumb/breadcrumb-item/breadcrumb-item.ts

@@ -3,6 +3,7 @@ import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './breadcrumb-item.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Breadcrumb Item
@@ -16,6 +17,7 @@ import styles from './breadcrumb-item.scss';
  * <wc-breadcrumb-item href="#">Home</wc-breadcrumb-item>
  * ```
  */
+@IndividualComponent
 export class BreadcrumbItem extends LitElement {
   static styles = [styles];
 
@@ -39,6 +41,7 @@ export class BreadcrumbItem extends LitElement {
    */
   @property({ type: String }) separator?: string;
 
+  /** 1-based position among sibling breadcrumb items, used for schema.org `ListItem` metadata. */
   @state()
   private position = 1;
 

package/src/button/ButtonTypes.ts

@@ -0,0 +1,17 @@
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonLevel = 'primary' | 'secondary' | 'tertiary' | 'danger';
+export type ButtonShape = 'round' | 'square';
+export type ButtonVariant =
+  | 'elevated'
+  | 'filled'
+  | 'tonal'
+  | 'outlined'
+  | 'text'
+  | 'neo';
+export type ButtonColor =
+  | 'primary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'surface'
+  | 'on-surface';

package/src/button/base-button/base-button.ts

@@ -0,0 +1,85 @@
+import { LitElement, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { WithElementInternals } from '@/__internal/mixins/element-internals.js';
+import { throttle } from '@/__internal/utils/throttle.js';
+import { MixinBase, MixinReturn } from '@/__internal/mixins/mixin.js';
+
+/**
+ * 1. Define an interface for the members the mixin adds.
+ * This makes the type annotation much cleaner.
+ */
+export interface BaseButton {
+  variant: string;
+
+  color: string;
+
+  disabled: boolean;
+
+  softDisabled: boolean;
+
+  disabledReason: string;
+
+  throttleDelay?: number;
+
+  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
+
+  __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
+}
+
+export function mixinBaseButton<
+  T extends MixinBase<LitElement & WithElementInternals>,
+>(base: T): MixinReturn<T, BaseButton> {
+  abstract class BaseButtonElement extends base implements BaseButton {
+    @property({ type: String, reflect: true })
+    variant: string = '';
+
+    @property({ type: String, reflect: true })
+    color: string = '';
+
+    /**
+     * When `true`, the button is disabled and cannot be interacted with. Reflects to the `disabled` attribute. Defaults to `false`.
+     */
+    @property({ type: Boolean, reflect: true })
+    disabled: boolean = false;
+
+    /**
+     * When `true`, the button is visually styled as disabled and cannot be interacted with, but remains focusable.
+     * Use this in combination with `disabledReason` to communicate why the button is unavailable.
+     * Reflects to the `soft-disabled` attribute. Defaults to `false`.
+     */
+    @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
+    softDisabled: boolean = false;
+
+    /**
+     * A human-readable explanation of why the button is disabled or soft-disabled.
+     * Rendered as a visually hidden tooltip and linked via `aria-describedby` for accessibility.
+     * Maps to the `disabled-reason` attribute.
+     */
+    @property({ attribute: 'disabled-reason' })
+    disabledReason: string = '';
+
+    /**
+     * Sets the delay for throttle in milliseconds. When undefined (default), no throttle is applied.
+     */
+    @property() throttleDelay?: number;
+
+    __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
+      event => {
+        this.__dispatchClick(event);
+      };
+
+    abstract __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
+
+    override firstUpdated(changedProperties: PropertyValues) {
+      super.firstUpdated(changedProperties);
+      if (typeof this.throttleDelay === 'number') {
+        this.__dispatchClickWithThrottle = throttle(
+          this.__dispatchClick,
+          this.throttleDelay,
+        );
+      }
+    }
+  }
+
+  return BaseButtonElement;
+}