@redvars/peacock 3.4.0 → 3.5.1

package/src/accordion/accordion-item.scss

@@ -1,111 +1,182 @@
 @use '../../scss/mixin';
 
-
 @include mixin.base-styles;
 
+// ─── Host ────────────────────────────────────────────────────────────────────
+
 :host {
   display: block;
-
-  --accordion-item-title-align: start;
 }
 
-.accordion-item {
+// ─── Expansion Panel ─────────────────────────────────────────────────────────
 
-  .accordion-heading {
-    cursor: pointer;
-    width: 100%;
-    border-radius: 0;
-    border: 0;
-    padding: 0 var(--spacing-200);
-    background: var(--accordion-item-heading-background, transparent);
+.expansion-panel {
+  border: var(--_accordion-item-border, 1px solid var(--color-outline-variant));
+  border-radius: var(--shape-corner-medium); // 12dp — M3 medium shape
+  background-color: var(--_accordion-item-background, var(--color-surface-container-low));
+  overflow: hidden; // clip children to border-radius
+  transition:
+    background-color var(--duration-medium1) var(--easing-standard),
+    border-color var(--duration-medium1) var(--easing-standard);
+
+  // ─── Header Button ─────────────────────────────────────────────────────────
 
+  .header-button {
+    position: relative;
     display: flex;
-    flex-direction: row-reverse;
     align-items: center;
+    width: 100%;
+    min-height: 3rem; // 48dp — grows with description
+    padding: 0 var(--spacing-300); // 0 24dp
+    gap: var(--spacing-200); // 16dp between label and icon
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    cursor: pointer;
+    text-align: start;
     color: var(--color-on-surface);
-    justify-content: flex-start;
-    gap: 0.5rem;
-    @include mixin.get-typography(title-medium);
+    overflow: hidden;
+
+    // M3 state layer
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: var(--color-on-surface);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--duration-short4) var(--easing-standard);
+    }
 
-    .accordion-title {
-      width: 100%;
-      text-align: var(--accordion-item-title-align);
+    &:not(:disabled):hover::before {
+      opacity: 0.08;
     }
 
     &:focus-visible {
+      outline: none;
       @include mixin.focus-ring();
     }
 
-    .accordion-icon {
-      --icon-size: 1.5rem;
-      --icon-color: currentColor;
-      transition: transform var(--duration-short2) var(--easing-standard);
+    &:focus-visible::before {
+      opacity: 0.12;
     }
+  }
+
+  // ─── Header Label (title + description column) ──────────────────────────────
 
+  .header-label {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    padding: var(--spacing-150) 0; // 12dp vertical padding
+    min-width: 0;
   }
 
-  .item-section {
-    height: 0;
-    opacity: 0;
-    pointer-events: none;
-    text-align: start;
-    transition: all var(--duration-short2) var(--easing-standard);
+  .panel-title {
+    @include mixin.get-typography(body-large);
+    color: var(--color-on-surface);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  &:not(.disabled) .accordion-heading:hover {
-    --accordion-item-heading-background: var(--color-inverse-primary);
+  .panel-description {
+    @include mixin.get-typography(body-small);
+    color: var(--color-on-surface-variant);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &[hidden] {
+      display: none;
+    }
   }
 
-  &.disabled .accordion-heading {
-    cursor: not-allowed;
-    opacity: 0.38;
+  // ─── Header Actions slot ────────────────────────────────────────────────────
+
+  ::slotted([slot='header-actions']) {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: var(--spacing-100);
   }
 
-  &.open {
-    .item-section {
-      height: 100%;
-      pointer-events: auto;
-      opacity: 1;
-      padding: var(--spacing-100) var(--spacing-800) var(--spacing-300) var(--spacing-200);
-    }
+  // ─── Toggle Icon ────────────────────────────────────────────────────────────
 
-    .accordion-icon {
-      transform: rotate(180deg);
-    }
+  .toggle-icon {
+    --icon-size: 1.5rem;
+    --icon-color: var(--color-on-surface-variant);
+    flex-shrink: 0;
+    transition: transform var(--duration-medium1) var(--easing-standard);
   }
 
-}
+  // ─── Expandable Content ─────────────────────────────────────────────────────
 
-/*
- * Sizes
- */
-.accordion-item {
-  .accordion-heading {
-    height: 2.5rem;
+  .panel-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows var(--duration-medium1) var(--easing-standard);
+  }
+
+  .content-inner {
+    overflow: hidden;
+    min-height: 0;
+    @include mixin.get-typography(body-medium);
+    color: var(--color-on-surface-variant);
   }
-}
 
-:host-context([size="sm"]) {
-  .accordion-item {
-    .accordion-heading {
-      height: 2rem;
+  // ─── Disabled State ─────────────────────────────────────────────────────────
+
+  &.disabled {
+    background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
+    border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
+
+    .header-button {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.38;
     }
   }
-}
 
-:host-context([size="lg"]) {
-  .accordion-item {
-    .accordion-heading {
-      height: 3rem;
+  // ─── Expanded / Open State (must come after disabled so .open wins) ─────────
+
+  &.open {
+    background-color: var(--color-surface-container);
+    border-color: transparent; // border fades out when expanded, matching M3
+
+    .panel-content {
+      grid-template-rows: 1fr;
+      border-block-start: 1px solid var(--color-outline-variant); // header–content divider
     }
+
+    .content-inner {
+      padding: 0 var(--spacing-300) var(--spacing-200); // 0 24dp 16dp
+    }
+
+    .toggle-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  // ─── Disabled State (border + bg dimmed) ────────────────────────────────────
+
+  &.disabled {
+    background-color: color-mix(in srgb, var(--color-surface-container-low) 38%, transparent);
+    border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
   }
 }
 
+// ─── Toggle position: before ─────────────────────────────────────────────────
 
-:host-context(p-accordion[align="start"]) {
-  .accordion-item {
-    .accordion-heading {
-      flex-direction: row;
-    }
+:host([toggle-position='before']) {
+  .header-button {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+  }
+
+  .header-label {
+    flex: 1;
   }
 }

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