@redvars/peacock 3.3.3 → 3.5.0

package/src/accordion/accordion-item.ts

@@ -1,5 +1,5 @@
-import { html, LitElement } from 'lit';
-import { property, query } from 'lit/decorators.js';
+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';
 
@@ -7,13 +7,27 @@ import styles from './accordion-item.scss';
  * @label Accordion Item
  * @tag wc-accordion-item
  * @rawTag accordion-item
- * @summary An accordion item is single item in an accordion list. It contains a header and a content section that can be expanded or collapsed by the user.
+ * @summary An expansion panel with a header that reveals or hides associated content. Follows Material Design 3 expansion panel guidelines.
  * @parentRawTag accordion
- * 
+ *
+ * @slot - The body content revealed when the panel is expanded.
+ * @slot heading - The panel title. Renders as `body-large` text.
+ * @slot description - Optional subtitle rendered below the title. Renders as `body-small` text.
+ * @slot header-actions - Actions (e.g. icon buttons) placed at the trailing end of the header, before the toggle icon.
+ *
+ * @part header - The header `<button>` element.
+ * @part title - The title text container.
+ * @part description - The description text container.
+ * @part content - The expandable content region wrapper.
+ *
+ * @fires {CustomEvent<{ open: boolean }>} accordion-item:toggle - Fired when the panel is expanded or collapsed.
+ *
  * @example
  * ```html
  * <wc-accordion-item>
- * Testing
+ *   <span slot="heading">Personal information</span>
+ *   <span slot="description">Fill in your details</span>
+ *   <p>Content goes here.</p>
  * </wc-accordion-item>
  * ```
  * @tags display
@@ -24,24 +38,38 @@ export class AccordionItem extends LitElement {
   #id = crypto.randomUUID();
 
   /**
-   * The menu item value.
-   */
-  @property({ type: String, reflect: true })
-  heading: string = '';
-
-  /**
-   * If true, the user cannot interact with the button. Defaults to `false`.
+   * Whether the user cannot interact with the panel.
    */
   @property({ type: Boolean, reflect: true })
   disabled: boolean = false;
 
   /**
-   * Menu item selection state.
+   * Whether the panel is expanded.
    */
   @property({ type: Boolean, reflect: true })
   open: boolean = false;
 
-  @query('.accordion-heading')
+  /**
+   * Whether to hide the expand/collapse toggle indicator icon.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-toggle' })
+  hideToggle: boolean = false;
+
+  /**
+   * Position of the toggle icon relative to the panel title.
+   * `'after'` places it at the trailing end (default, matches M3).
+   * `'before'` places it at the leading start.
+   */
+  @property({ type: String, reflect: true, attribute: 'toggle-position' })
+  togglePosition: 'before' | 'after' = 'after';
+
+  @state()
+  private _hasDescriptionSlot = false;
+
+  @state()
+  private _hasHeadingSlot = false;
+
+  @query('.header-button')
   private readonly buttonElement!: HTMLElement | null;
 
   override focus() {
@@ -52,48 +80,93 @@ export class AccordionItem extends LitElement {
     this.buttonElement?.blur();
   }
 
-  private __handleToggle() {
+  private _handleToggle() {
     if (this.disabled) return;
     this.open = !this.open;
     this.dispatchEvent(
-      new CustomEvent('accordion-item--toggle', {
+      new CustomEvent('accordion-item:toggle', {
         bubbles: true,
         composed: true,
-        detail: { open: this.open, id: this.#id },
+        detail: { open: this.open },
       }),
     );
   }
 
+  private static _onSlotChange(e: Event, setter: (v: boolean) => void) {
+    const slot = e.target as HTMLSlotElement;
+    const nodes = slot.assignedNodes({ flatten: true });
+    setter(
+      nodes.some(n =>
+        n.nodeType === Node.TEXT_NODE
+          ? (n.textContent?.trim() ?? '') !== ''
+          : true,
+      ),
+    );
+  }
+
+  private _renderToggleIcon() {
+    if (this.hideToggle) return nothing;
+    return html`<wc-icon
+      class="toggle-icon"
+      name="keyboard_arrow_down"
+      aria-hidden="true"
+    ></wc-icon>`;
+  }
+
   render() {
-    return html`<div
-      class=${classMap({
-        'accordion-item': true,
-        open: this.open,
-        disabled: this.disabled,
-      })}
-    >
-      <button
-        id=${`accordion-heading-${this.#id}`}
-        tabindex="0"
-        aria-controls=${`accordion-control-${this.#id}`}
-        class="accordion-heading"
-        aria-disabled=${this.disabled}
-        @click=${this.__handleToggle}
-        aria-expanded=${this.open}
-      >
-        <wc-icon class="accordion-icon" name="keyboard_arrow_down"></wc-icon>
-        <div part="title" class="accordion-title">
-          <slot name="heading">${this.heading}</slot>
-        </div>
-      </button>
+    return html`
       <div
-        class="item-section slot-main"
-        id=${`accordion-control-${this.#id}`}
-        aria-labelledby=${`accordion-heading-${this.#id}`}
-        role="region"
+        class=${classMap({
+          'expansion-panel': true,
+          open: this.open,
+          disabled: this.disabled,
+        })}
       >
-        <slot></slot>
+        <button
+          id=${`panel-header-${this.#id}`}
+          part="header"
+          class="header-button"
+          tabindex=${this.disabled ? '-1' : '0'}
+          aria-controls=${`panel-content-${this.#id}`}
+          aria-disabled=${this.disabled}
+          aria-expanded=${this.open}
+          ?disabled=${this.disabled}
+          @click=${this._handleToggle}
+        >
+          ${this.togglePosition === 'before' ? this._renderToggleIcon() : nothing}
+          <span class="header-label">
+            <span part="title" class="panel-title">
+              <slot
+                name="heading"
+                @slotchange=${(e: Event) => AccordionItem._onSlotChange(e, v => { this._hasHeadingSlot = v; })}
+              ></slot>
+            </span>
+            <span
+              part="description"
+              class="panel-description"
+              ?hidden=${!this._hasDescriptionSlot}
+            >
+              <slot
+                name="description"
+                @slotchange=${(e: Event) => AccordionItem._onSlotChange(e, v => { this._hasDescriptionSlot = v; })}
+              ></slot>
+            </span>
+          </span>
+          <slot name="header-actions" class="header-actions"></slot>
+          ${this.togglePosition === 'after' ? this._renderToggleIcon() : nothing}
+        </button>
+        <div
+          id=${`panel-content-${this.#id}`}
+          part="content"
+          class="panel-content"
+          role="region"
+          aria-labelledby=${`panel-header-${this.#id}`}
+        >
+          <div class="content-inner">
+            <slot></slot>
+          </div>
+        </div>
       </div>
-    </div>`;
+    `;
   }
 }

package/src/accordion/accordion.scss

@@ -2,15 +2,34 @@
 
 @include mixin.base-styles;
 
+// ─── Host ────────────────────────────────────────────────────────────────────
+
 :host {
   display: block;
 }
 
-slot::slotted(:not(:last-child)) {
-  border-block-start: 1px solid var(--color-outline);
+// ─── Default display mode ────────────────────────────────────────────────────
+// Each item is a fully-bordered rounded container (M3 expansion panel shape).
+// Items are stacked with a gap; no shared dividers.
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100); // 8dp gap between panels
 }
 
-slot::slotted(:last-child) {
-  border-block-start: 1px solid var(--color-outline);
-  border-block-end: 1px solid var(--color-outline);
+// ─── Flat display mode ───────────────────────────────────────────────────────
+// Removes the gap and the per-item border/background — for use inside cards.
+
+:host([display-mode='flat']) {
+  .accordion {
+    gap: 0;
+  }
+
+  // Push overrides into each item via inherited CSS custom properties.
+  // wc-accordion-item reads --_accordion-item-border / --_accordion-item-background.
+  slot::slotted(wc-accordion-item) {
+    --_accordion-item-border: none;
+    --_accordion-item-background: transparent;
+  }
 }

package/src/accordion/accordion.ts

@@ -7,14 +7,20 @@ import { AccordionItem } from './accordion-item.js';
  * @label Accordion
  * @tag wc-accordion
  * @rawTag accordion
- * @summary An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
+ * @summary A vertically stacked set of expansion panels. Follows Material Design 3 expansion panel guidelines.
  *
  * @example
  * ```html
  * <wc-accordion>
- *     <wc-accordion-item heading="Accordion">
- *         Content
- *     </wc-accordion-item>
+ *   <wc-accordion-item>
+ *     <span slot="heading">Panel 1</span>
+ *     <span slot="description">Summary text</span>
+ *     Content
+ *   </wc-accordion-item>
+ *   <wc-accordion-item>
+ *     <span slot="heading">Panel 2</span>
+ *     Content
+ *   </wc-accordion-item>
  * </wc-accordion>
  * ```
  * @tags display
@@ -22,10 +28,22 @@ import { AccordionItem } from './accordion-item.js';
 export class Accordion extends LitElement {
   static styles = [styles];
 
-  @property({ type: Boolean, attribute: 'allow-multiple' })
-  allowMultiple = false;
+  /**
+   * Whether multiple panels can be expanded simultaneously.
+   * When `false` (default), expanding one panel collapses all others.
+   */
+  @property({ type: Boolean, reflect: true })
+  multi = false;
 
-  @queryAssignedElements({ selector: 'p-accordion-item' })
+  /**
+   * Display mode for the accordion.
+   * `'default'` renders panels with a subtle background on expand and dividers between items.
+   * `'flat'` renders panels without borders or background changes — suitable for use inside cards.
+   */
+  @property({ type: String, reflect: true, attribute: 'display-mode' })
+  displayMode: 'default' | 'flat' = 'default';
+
+  @queryAssignedElements({ selector: 'wc-accordion-item' })
   items!: Array<AccordionItem>;
 
   connectedCallback() {
@@ -39,7 +57,6 @@ export class Accordion extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     // @ts-ignore
-    // eslint-disable-next-line no-undef
     this.removeEventListener('accordion-item:toggle', this._onItemToggle);
     this.removeEventListener('keydown', this._onKeyDown);
   }
@@ -47,11 +64,10 @@ export class Accordion extends LitElement {
   private _onItemToggle(e: CustomEvent) {
     const targetItem = e.target as AccordionItem;
 
-    // Stop event bubbling if it came from a nested accordion
-    // We check if the target item is a direct child of *this* accordion
+    // Ignore events from nested accordions — only handle direct children
     if (targetItem.parentElement !== this) return;
 
-    if (!this.allowMultiple && targetItem.open) {
+    if (!this.multi && targetItem.open) {
       this.items.forEach(item => {
         if (item !== targetItem && item.open) {
           // eslint-disable-next-line no-param-reassign
@@ -62,17 +78,11 @@ export class Accordion extends LitElement {
   }
 
   private _onKeyDown(e: KeyboardEvent) {
-    // 1. Find which item currently has its HEADER focused.
-    // We check the shadowRoot of each item to see if the internal <button> is the active element.
     const focusedItemIndex = this.items.findIndex(item => {
-      // Access the Shadow DOM of the item
       const root = item.shadowRoot;
-      // Check if the focused element inside that shadow DOM is the toggle button
-      return root?.activeElement?.classList.contains('accordion-heading');
+      return root?.activeElement?.classList.contains('header-button');
     });
 
-    // 2. If no header is focused (e.g., focus is on body content or outside), do nothing.
-    // This prevents stealing focus when the user is typing in a form inside the accordion.
     if (focusedItemIndex === -1) return;
 
     let nextIndex = -1;
@@ -81,12 +91,10 @@ export class Accordion extends LitElement {
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault();
-        // Cycle next
         nextIndex = (focusedItemIndex + 1) % this.items.length;
         break;
       case 'ArrowUp':
         e.preventDefault();
-        // Cycle previous
         nextIndex =
           (focusedItemIndex - 1 + this.items.length) % this.items.length;
         break;
@@ -100,12 +108,10 @@ export class Accordion extends LitElement {
         break;
     }
 
-    // 3. Apply Focus
     if (nextIndex !== -1) {
       const itemToFocus = this.items[nextIndex];
-      // Select the button inside the Shadow DOM of the target item
       const button = itemToFocus.shadowRoot?.querySelector(
-        '.accordion-heading',
+        '.header-button',
       ) as HTMLElement;
       button?.focus();
     }

package/src/accordion/demo/index.html

@@ -9,50 +9,89 @@
   <style>
     body {
       background: #fafafa;
+      padding: 2rem;
+      max-width: 640px;
+      margin: 0 auto;
     }
-    .text-body {
-      padding: 0;
-      margin: 0 !important;
+    h3 {
+      margin: 1.5rem 0 0.5rem;
+      font-family: sans-serif;
+      font-size: 0.875rem;
+      color: #666;
     }
   </style>
 </head>
 <body>
 
-<p-accordion>
-  <p-accordion-item heading="Title 1">
-    <p class='text-body'>
-      The accordion component delivers large amounts of content in a small space through progressive
-      disclosure.
-      The user gets key details about the underlying content and can choose to expand that content
-      within the
-      constraints of the accordion.
-      Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
-    </p>
-  </p-accordion-item>
+  <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>
 
-  <p-accordion-item heading="Title 1">
-    <p class='text-body'>
-      The accordion component delivers large amounts of content in a small space through progressive
-      disclosure.
-      The user gets key details about the underlying content and can choose to expand that content
-      within the
-      constraints of the accordion.
-      Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
-    </p>
-  </p-accordion-item>
+  <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>
 
-  <p-accordion-item heading="Title 1" disabled>
-    <p class='text-body'>
-      The accordion component delivers large amounts of content in a small space through progressive
-      disclosure.
-      The user gets key details about the underlying content and can choose to expand that content
-      within the
-      constraints of the accordion.
-      Accordions work especially well on mobile interfaces or whenever vertical space is at a premium.
-    </p>
-  </p-accordion-item>
-</p-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>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>

package/src/banner/banner.scss

@@ -0,0 +1,87 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+
+  --banner-container-color: var(--color-tertiary-container);
+  --banner-label-text-color: var(--color-on-tertiary-container);
+  --banner-description-text-color: var(--color-on-tertiary-container);
+  --banner-icon-color: var(--color-on-tertiary-container);
+  --banner-border-radius: var(--shape-corner-small);
+}
+
+.banner {
+  align-items: flex-start;
+  background: var(--banner-container-color);
+  border-radius: var(--banner-border-radius);
+  display: grid;
+  gap: var(--spacing-200);
+  grid-template-columns: auto 1fr;
+  padding: var(--spacing-200);
+}
+
+.banner-icon {
+  align-items: center;
+  color: var(--banner-icon-color);
+  display: inline-flex;
+  justify-content: center;
+  min-width: 1.5rem;
+  padding-top: 0.1rem;
+}
+
+.banner-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-050);
+}
+
+.banner-label {
+  @include mixin.get-typography(label-large);
+  color: var(--banner-label-text-color);
+}
+
+.banner-description {
+  @include mixin.get-typography(body-medium);
+  color: var(--banner-description-text-color);
+}
+
+.banner-content.inline {
+  flex-direction: row;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.25em;
+}
+
+.banner.info,
+.banner-content.info {
+  --banner-container-color: var(--color-primary-container);
+  --banner-label-text-color: var(--color-on-primary-container);
+  --banner-description-text-color: var(--color-on-primary-container);
+  --banner-icon-color: var(--color-on-primary-container);
+}
+
+.banner.success,
+.banner-content.success {
+  --banner-container-color: var(--color-success-container);
+  --banner-label-text-color: var(--color-on-success-container);
+  --banner-description-text-color: var(--color-on-success-container);
+  --banner-icon-color: var(--color-on-success-container);
+}
+
+.banner.warning,
+.banner-content.warning {
+  --banner-container-color: var(--color-warning-container);
+  --banner-label-text-color: var(--color-on-warning-container);
+  --banner-description-text-color: var(--color-on-warning-container);
+  --banner-icon-color: var(--color-on-warning-container);
+}
+
+.banner.error,
+.banner-content.error {
+  --banner-container-color: var(--color-error-container);
+  --banner-label-text-color: var(--color-on-error-container);
+  --banner-description-text-color: var(--color-on-error-container);
+  --banner-icon-color: var(--color-on-error-container);
+}