@redvars/peacock 3.8.1 → 3.8.2

package/src/__internal/mixins/hyperlink.ts

@@ -0,0 +1,71 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { MixinBase, MixinReturn } from './mixin.js';
+
+/**
+ * An element that navigates to a URL when activated, similar to `<a href>`.
+ */
+export interface Hyperlink {
+  /**
+   * The URL the hyperlink points to. When set, the component renders as an
+   * `<a>` element. Maps to the native `href` attribute.
+   */
+  href?: string;
+
+  /**
+   * Where to display the linked URL. Maps to the native `target` attribute.
+   * Possible values: `"_self"`, `"_blank"`, `"_parent"`, `"_top"`, or a
+   * frame name. When using `"_blank"`, set `rel="noopener noreferrer"`.
+   */
+  target: '_self' | '_parent' | '_blank' | '_top' | string;
+
+  /**
+   * The relationship between the current document and the linked URL.
+   * Maps to the native `rel` attribute. Use `"noopener noreferrer"` when
+   * `target="_blank"` to prevent tab-napping attacks.
+   */
+  rel: string;
+
+  /**
+   * Causes the browser to download the linked URL instead of navigating.
+   * A string value is used as the suggested filename. Only applies when
+   * `href` is set. Maps to the native `download` attribute.
+   */
+  download: string;
+}
+
+/**
+ * Mixes in hyperlink behavior for a class.
+ *
+ * @example
+ * ```ts
+ * class MyLink extends mixinHyperlink(LitElement) {}
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `Hyperlink` mixed in.
+ */
+export function mixinHyperlink<T extends MixinBase<LitElement>>(
+  base: T,
+): MixinReturn<T, Hyperlink> {
+  abstract class HyperlinkElement extends base implements Hyperlink {
+    @property() href?: string;
+
+    @property() target: '_self' | '_parent' | '_blank' | '_top' | string =
+      '_self';
+
+    @property() rel = '';
+
+    @property() download = '';
+
+    // Mixins must have a constructor with `...args: any[]`
+    // tslint:disable-next-line:no-any
+    // eslint-disable-next-line no-useless-constructor
+    constructor(...args: any[]) {
+      super(...args);
+    }
+  }
+
+  return HyperlinkElement;
+}

package/src/__internal/mixins/mixin.ts

@@ -0,0 +1,58 @@
+/**
+ * The base class for a mixin with an optional expected base class type.
+ *
+ * @template ExpectedBase Optional expected base class type, such as
+ *     `LitElement`.
+ *
+ * @example
+ * ```ts
+ * interface Foo {
+ *   isFoo: boolean;
+ * }
+ *
+ * function mixinFoo<T extends MixinBase>(base: T): MixinReturn<T, Foo> {
+ *   // Mixins must be `abstract`
+ *   abstract class FooImpl extends base implements Foo {
+ *     isFoo = true;
+ *   }
+ *
+ *   return FooImpl;
+ * }
+ * ```
+ */
+export type MixinBase<ExpectedBase = object> = abstract new (
+  // Mixins must have a constructor with `...args: any[]`
+  // tslint:disable-next-line:no-any
+  ...args: any[]
+) => ExpectedBase;
+
+/**
+ * The return value of a mixin.
+ *
+ * @template MixinBase The generic that extends `MixinBase` used for the mixin's
+ *     base class argument.
+ * @template MixinClass Optional interface of fuctionality that was mixed in.
+ *     Omit if no additional APIs were added (such as purely overriding base
+ *     class functionality).
+ *
+ * @example
+ * ```ts
+ * interface Foo {
+ *   isFoo: boolean;
+ * }
+ *
+ * // Mixins must be `abstract`
+ * function mixinFoo<T extends MixinBase>(base: T): MixinReturn<T, Foo> {
+ *   abstract class FooImpl extends base implements Foo {
+ *     isFoo = true;
+ *   }
+ *
+ *   return FooImpl;
+ * }
+ * ```
+ */
+// eslint-disable-next-line no-shadow
+export type MixinReturn<MixinBase, MixinClass = object> =
+  // Mixins must have a constructor with `...args: any[]`
+  // tslint:disable-next-line:no-any
+  (abstract new (...args: any[]) => MixinClass) & MixinBase;

package/src/{__utils → __internal/utils}/observe-slot-change.ts

@@ -1,14 +1,11 @@
-function hasMeaningfulContent(slotElement: HTMLSlotElement | null) {
+export function hasMeaningfulContent(slotElement: HTMLSlotElement | null) {
   const nodes = slotElement?.assignedNodes({ flatten: true }) || [];
 
   for (const node of nodes) {
     if (node.nodeType === Node.ELEMENT_NODE) {
       return true;
     }
-    if (
-      node.nodeType === Node.TEXT_NODE &&
-      (node.textContent?.trim().length || 0) > 0
-    ) {
+    if (node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\S/)) {
       return true;
     }
   }

package/src/accordion/accordion-item.ts

@@ -1,13 +1,14 @@
-import { html, LitElement, nothing } from 'lit';
+import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './accordion-item.scss';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Accordion Item
  * @tag wc-accordion-item
  * @rawTag accordion-item
- * @summary An expansion panel with a header that reveals or hides associated content. Follows Material Design 3 expansion panel guidelines.
+ * @summary An expansion panel with a header that reveals or hides associated content.
  *
  * @slot - The body content revealed when the panel is expanded.
  * @slot heading - The panel title. Renders as `body-large` text.
@@ -31,6 +32,7 @@ import styles from './accordion-item.scss';
  * ```
  * @tags display
  */
+@IndividualComponent
 export class AccordionItem extends LitElement {
   static styles = [styles];
 
@@ -62,9 +64,11 @@ export class AccordionItem extends LitElement {
   @property({ type: String, reflect: true, attribute: 'toggle-position' })
   togglePosition: 'before' | 'after' = 'after';
 
+  /** True when the `description` slot contains at least one non-empty node. */
   @state()
   private _hasDescriptionSlot = false;
 
+  /** True when the `heading` slot contains at least one non-empty node. */
   @state()
   private _hasHeadingSlot = false;
 

package/src/accordion/accordion.ts

@@ -1,13 +1,14 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import styles from './accordion.scss';
 import { AccordionItem } from './accordion-item.js';
+import IndividualComponent from '@/IndividualComponent.js';
 
 /**
  * @label Accordion
  * @tag wc-accordion
  * @rawTag accordion
- * @summary A vertically stacked set of expansion panels. Follows Material Design 3 expansion panel guidelines.
+ * @summary A vertically stacked set of expansion panels.
  *
  * @example
  * ```html
@@ -25,6 +26,7 @@ import { AccordionItem } from './accordion-item.js';
  * ```
  * @tags display
  */
+@IndividualComponent
 export class Accordion extends LitElement {
   static styles = [styles];
 

package/src/accordion/demo/index.html

@@ -1,98 +1,103 @@
 <!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/tokens.css' />
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+<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/tokens.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
 
-  <style>
-    body {
-      background: #fafafa;
-      padding: 2rem;
-      max-width: 640px;
-      margin: 0 auto;
-    }
-    h3 {
-      margin: 1.5rem 0 0.5rem;
-      font-family: sans-serif;
-      font-size: 0.875rem;
-      color: #666;
-    }
-  </style>
-</head>
-<body>
+    <style>
+      body {
+        background: #fafafa;
+        padding: 2rem;
+        max-width: 640px;
+        margin: 0 auto;
+      }
+      h3 {
+        margin: 1.5rem 0 0.5rem;
+        font-family: sans-serif;
+        font-size: 0.875rem;
+        color: #666;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>Default</h3>
+    <wc-accordion>
+      <wc-accordion-item>
+        <span slot="heading">Personal information</span>
+        <span slot="description">Fill in your personal details</span>
+        <p>Type in your name and address below.</p>
+      </wc-accordion-item>
+      <wc-accordion-item>
+        <span slot="heading">Shipping address</span>
+        <span slot="description">Where should we send your order?</span>
+        <p>Add your shipping address to continue.</p>
+      </wc-accordion-item>
+      <wc-accordion-item disabled>
+        <span slot="heading">Billing address</span>
+        <p>This section is unavailable.</p>
+      </wc-accordion-item>
+    </wc-accordion>
 
-  <h3>Default</h3>
-  <wc-accordion>
-    <wc-accordion-item>
-      <span slot="heading">Personal information</span>
-      <span slot="description">Fill in your personal details</span>
-      <p>Type in your name and address below.</p>
-    </wc-accordion-item>
-    <wc-accordion-item>
-      <span slot="heading">Shipping address</span>
-      <span slot="description">Where should we send your order?</span>
-      <p>Add your shipping address to continue.</p>
-    </wc-accordion-item>
-    <wc-accordion-item disabled>
-      <span slot="heading">Billing address</span>
-      <p>This section is unavailable.</p>
-    </wc-accordion-item>
-  </wc-accordion>
+    <h3>Multi (allow multiple panels open)</h3>
+    <wc-accordion multi>
+      <wc-accordion-item>
+        <span slot="heading">Panel A</span>
+        <p>Content for panel A.</p>
+      </wc-accordion-item>
+      <wc-accordion-item open>
+        <span slot="heading">Panel B</span>
+        <p>Content for panel B (initially open).</p>
+      </wc-accordion-item>
+      <wc-accordion-item>
+        <span slot="heading">Panel C</span>
+        <p>Content for panel C.</p>
+      </wc-accordion-item>
+    </wc-accordion>
 
-  <h3>Multi (allow multiple panels open)</h3>
-  <wc-accordion multi>
-    <wc-accordion-item>
-      <span slot="heading">Panel A</span>
-      <p>Content for panel A.</p>
-    </wc-accordion-item>
-    <wc-accordion-item open>
-      <span slot="heading">Panel B</span>
-      <p>Content for panel B (initially open).</p>
-    </wc-accordion-item>
-    <wc-accordion-item>
-      <span slot="heading">Panel C</span>
-      <p>Content for panel C.</p>
-    </wc-accordion-item>
-  </wc-accordion>
+    <h3>Toggle position: before</h3>
+    <wc-accordion>
+      <wc-accordion-item toggle-position="before">
+        <span slot="heading">Panel 1</span>
+        <p>Icon appears at the leading start.</p>
+      </wc-accordion-item>
+      <wc-accordion-item toggle-position="before">
+        <span slot="heading">Panel 2</span>
+        <p>Icon appears at the leading start.</p>
+      </wc-accordion-item>
+    </wc-accordion>
 
-  <h3>Toggle position: before</h3>
-  <wc-accordion>
-    <wc-accordion-item toggle-position="before">
-      <span slot="heading">Panel 1</span>
-      <p>Icon appears at the leading start.</p>
-    </wc-accordion-item>
-    <wc-accordion-item toggle-position="before">
-      <span slot="heading">Panel 2</span>
-      <p>Icon appears at the leading start.</p>
-    </wc-accordion-item>
-  </wc-accordion>
+    <h3>Hide toggle</h3>
+    <wc-accordion>
+      <wc-accordion-item hide-toggle>
+        <span slot="heading">No toggle icon</span>
+        <p>The expand indicator is hidden.</p>
+      </wc-accordion-item>
+      <wc-accordion-item hide-toggle>
+        <span slot="heading">Another panel</span>
+        <p>Click the header to toggle.</p>
+      </wc-accordion-item>
+    </wc-accordion>
 
-  <h3>Hide toggle</h3>
-  <wc-accordion>
-    <wc-accordion-item hide-toggle>
-      <span slot="heading">No toggle icon</span>
-      <p>The expand indicator is hidden.</p>
-    </wc-accordion-item>
-    <wc-accordion-item hide-toggle>
-      <span slot="heading">Another panel</span>
-      <p>Click the header to toggle.</p>
-    </wc-accordion-item>
-  </wc-accordion>
+    <h3>Flat display mode</h3>
+    <wc-accordion display-mode="flat">
+      <wc-accordion-item>
+        <span slot="heading">Flat Panel 1</span>
+        <p>No borders between panels. Suitable inside cards.</p>
+      </wc-accordion-item>
+      <wc-accordion-item>
+        <span slot="heading">Flat Panel 2</span>
+        <p>Content here.</p>
+      </wc-accordion-item>
+    </wc-accordion>
 
-  <h3>Flat display mode</h3>
-  <wc-accordion display-mode="flat">
-    <wc-accordion-item>
-      <span slot="heading">Flat Panel 1</span>
-      <p>No borders between panels. Suitable inside cards.</p>
-    </wc-accordion-item>
-    <wc-accordion-item>
-      <span slot="heading">Flat Panel 2</span>
-      <p>Content here.</p>
-    </wc-accordion-item>
-  </wc-accordion>
-
-<script type='module' src='/dist/peacock-loader.js'></script>
-</body>
+    <script type="module" src="/dist/loader.js"></script>
+  </body>
 </html>

package/src/alert/alert.scss

@@ -0,0 +1,82 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+}
+
+.alert {
+  align-items: flex-start;
+  background: var(--alert-container-color);
+  border-radius: var(--alert-border-radius);
+  display: grid;
+  gap: var(--spacing-100);
+  grid-template-columns: auto 1fr;
+  padding: var(--spacing-200);
+}
+
+.alert-icon {
+  align-items: center;
+  color: var(--alert-icon-color);
+  display: inline-flex;
+  justify-content: center;
+  --icon-size: 1.5rem;
+}
+
+.alert-content {
+  .alert-label {
+    display: inline;
+    @include mixin.get-typography(label-large);
+    color: var(--alert-label-text-color);
+    margin-inline-end: var(--spacing-050);
+  }
+
+  .alert-description {
+    display: inline;
+    @include mixin.get-typography(body-medium);
+    color: var(--alert-description-text-color);
+  }
+}
+
+
+// Default styles for the alert and content. These will be overridden by the variant-specific styles below.
+:host {
+  --alert-container-color: var(--color-tertiary-container);
+  --alert-label-text-color: var(--color-on-tertiary-container);
+  --alert-description-text-color: var(--color-on-tertiary-container);
+  --alert-icon-color: var(--color-on-tertiary-container);
+  --alert-border-radius: var(--shape-corner-small);
+}
+
+.alert.info,
+.alert-content.info {
+  --alert-container-color: var(--color-primary-container);
+  --alert-label-text-color: var(--color-on-primary-container);
+  --alert-description-text-color: var(--color-on-primary-container);
+  --alert-icon-color: var(--color-on-primary-container);
+}
+
+.alert.success,
+.alert-content.success {
+  --alert-container-color: var(--color-success-container);
+  --alert-label-text-color: var(--color-on-success-container);
+  --alert-description-text-color: var(--color-on-success-container);
+  --alert-icon-color: var(--color-on-success-container);
+}
+
+.alert.warning,
+.alert-content.warning {
+  --alert-container-color: var(--color-warning-container);
+  --alert-label-text-color: var(--color-on-warning-container);
+  --alert-description-text-color: var(--color-on-warning-container);
+  --alert-icon-color: var(--color-on-warning-container);
+}
+
+.alert.error,
+.alert-content.error {
+  --alert-container-color: var(--color-error-container);
+  --alert-label-text-color: var(--color-on-error-container);
+  --alert-description-text-color: var(--color-on-error-container);
+  --alert-icon-color: var(--color-on-error-container);
+}

package/src/{banner/banner.ts → alert/alert.ts}

@@ -3,11 +3,11 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import IndividualComponent from '@/IndividualComponent.js';
-import styles from './banner.scss';
+import styles from './alert.scss';
 
-type BannerVariant = 'note' | 'info' | 'success' | 'warning' | 'error';
+type AlertVariant = 'note' | 'info' | 'success' | 'warning' | 'error';
 
-const VARIANT_LABELS: Record<BannerVariant, string> = {
+const VARIANT_LABELS: Record<AlertVariant, string> = {
   note: 'Note',
   info: 'Info',
   success: 'Success',
@@ -15,7 +15,7 @@ const VARIANT_LABELS: Record<BannerVariant, string> = {
   error: 'Error',
 };
 
-const VARIANT_ICONS: Record<BannerVariant, string> = {
+const VARIANT_ICONS: Record<AlertVariant, string> = {
   note: 'star',
   info: 'info',
   success: 'check_circle',
@@ -24,32 +24,32 @@ const VARIANT_ICONS: Record<BannerVariant, string> = {
 };
 
 /**
- * @label Banner
- * @tag wc-banner
- * @rawTag banner
- * @summary Banners show short, prominent contextual messages with optional icon and description.
+ * @label Alert
+ * @tag wc-alert
+ * @rawTag alert
+ * @summary Alerts 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.
+ * @cssprop --alert-container-color - Background color of the alert container.
+ * @cssprop --alert-label-text-color - Label text color.
+ * @cssprop --alert-description-text-color - Description text color.
+ * @cssprop --alert-icon-color - Icon color.
+ * @cssprop --alert-border-radius - Border radius of the alert surface.
  *
  * @example
  * ```html
- * <wc-banner variant="note" description="Use semantic roles that preserve a 3:1 contrast ratio."></wc-banner>
+ * <wc-alert variant="note" description="Use semantic roles that preserve a 3:1 contrast ratio."></wc-alert>
  * ```
  * @tags display, feedback
  */
 @IndividualComponent
-export class Banner extends LitElement {
+export class Alert extends LitElement {
   static styles = [styles];
 
   /**
-   * Visual intent of the banner.
+   * Visual intent of the alert.
    */
   @property({ type: String, reflect: true })
-  variant: BannerVariant = 'note';
+  variant: AlertVariant = 'note';
 
   /**
    * Optional explicit label text. Falls back to a variant-based label.
@@ -79,19 +79,19 @@ export class Banner extends LitElement {
 
   render() {
     return html`
-      <div class=${classMap({ 'banner': true, [this.variant]: true })} role="status" aria-live="polite">
-        <div class="banner-icon" aria-hidden="true">
+      <div class=${classMap({ 'alert': true, [this.variant]: true })} role="status" aria-live="polite">
+        <div class="alert-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 })}>
-          <div class="banner-label">
+        <div class=${classMap({ 'alert-content': true, [this.variant]: true })}>
+          <div class="alert-label">
             <slot name="label">${this.resolvedLabel}:</slot>
           </div>
 
-          <div class="banner-description">
+          <div class="alert-description">
             <slot>${this.description || nothing}</slot>
           </div>
         </div>

package/src/alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from './alert.js';

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

@@ -0,0 +1,17 @@
+:host {
+  --app-bar-container-color: var(--color-surface);
+  --app-bar-headline-color: var(--color-on-surface);
+  --app-bar-leading-icon-color: var(--color-on-surface);
+  --app-bar-trailing-icon-color: var(--color-on-surface-variant);
+
+  /* Internal aliases */
+  --_app-bar-container-color: var(--app-bar-container-color);
+  --_app-bar-headline-color: var(--app-bar-headline-color);
+  --_app-bar-leading-icon-color: var(--app-bar-leading-icon-color);
+  --_app-bar-trailing-icon-color: var(--app-bar-trailing-icon-color);
+}
+
+/* Scrolled state uses surface-container for slight tonal elevation */
+:host([scrolled]) {
+  --app-bar-container-color: var(--color-surface-container);
+}