@redvars/peacock 3.8.3 → 3.8.5

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.8.3",
+  "version": "3.8.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <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">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.3/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.5/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.3/dist/loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.5/dist/loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/scss/mixin.scss

@@ -1,6 +1,7 @@
 @mixin base-styles {
   * {
     box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
   }
 
   .screen-reader-only {

package/src/accordion/accordion-item.scss

@@ -13,7 +13,10 @@
 .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));
+  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),
@@ -24,6 +27,7 @@
   .header-button {
     position: relative;
     display: flex;
+    flex-direction: row-reverse;
     align-items: center;
     width: 100%;
     min-height: 3rem; // 48dp — grows with description
@@ -62,6 +66,11 @@
     }
   }
 
+  .header-content {
+    display: flex;
+    flex: 1;
+  }
+
   // ─── Header Label (title + description column) ──────────────────────────────
 
   .header-label {
@@ -117,7 +126,8 @@
   .panel-content {
     display: grid;
     grid-template-rows: 0fr;
-    transition: grid-template-rows var(--duration-medium1) var(--easing-standard);
+    transition: grid-template-rows var(--duration-medium1)
+      var(--easing-standard);
   }
 
   .content-inner {
@@ -130,8 +140,16 @@
   // ─── 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);
+    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;
@@ -163,20 +181,24 @@
   // ─── 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);
+    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([toggle-position='before']) {
+:host-context([leading-toggle]) {
   .header-button {
-    flex-direction: row-reverse;
+    flex-direction: row;
     justify-content: flex-end;
   }
-
-  .header-label {
-    flex: 1;
-  }
 }

package/src/accordion/accordion-item.ts

@@ -20,7 +20,7 @@ import IndividualComponent from '@/IndividualComponent.js';
  * @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.
+ * @fires {CustomEvent<{ open: boolean }>} accordion-item-toggle - Fired when the panel is expanded or collapsed.
  *
  * @example
  * ```html
@@ -56,14 +56,6 @@ export class AccordionItem extends LitElement {
   @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';
-
   /** True when the `description` slot contains at least one non-empty node. */
   @state()
   private _hasDescriptionSlot = false;
@@ -87,7 +79,7 @@ export class AccordionItem extends LitElement {
     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 },
@@ -136,27 +128,34 @@ export class AccordionItem extends LitElement {
           ?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>
+          ${this._renderToggleIcon()}
+          <div class="header-content">
+            <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>
-            <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}
+            <slot name="header-actions" class="header-actions"></slot>
+          </div>
         </button>
         <div
           id=${`panel-content-${this.#id}`}

package/src/accordion/accordion.scss

@@ -18,10 +18,10 @@
   gap: var(--spacing-100); // 8dp gap between panels
 }
 
-// ─── Flat display mode ───────────────────────────────────────────────────────
+// ─── Flat variant ───────────────────────────────────────────────────────
 // Removes the gap and the per-item border/background — for use inside cards.
 
-:host([display-mode='flat']) {
+:host([variant='flat']) {
   .accordion {
     gap: 0;
   }

package/src/accordion/accordion.ts

@@ -35,15 +35,22 @@ export class Accordion extends LitElement {
    * When `false` (default), expanding one panel collapses all others.
    */
   @property({ type: Boolean, reflect: true })
-  multi = false;
+  multiple = false;
 
   /**
-   * Display mode for the accordion.
+   * Variant 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';
+  @property({ type: String, reflect: true })
+  variant: 'default' | 'flat' = 'default';
+
+  /**
+   * When `true`, the toggle icon is placed at the leading start of the header.
+   * When `false` (default), the icon is placed at the trailing end.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'leading-toggle' })
+  leadingToggle = false;
 
   @queryAssignedElements({ selector: 'wc-accordion-item' })
   items!: Array<AccordionItem>;
@@ -52,14 +59,14 @@ export class Accordion extends LitElement {
     super.connectedCallback();
     // @ts-ignore
     // eslint-disable-next-line wc/require-listener-teardown
-    this.addEventListener('accordion-item:toggle', this._onItemToggle);
+    this.addEventListener('accordion-item-toggle', this._onItemToggle);
     this.addEventListener('keydown', this._onKeyDown);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     // @ts-ignore
-    this.removeEventListener('accordion-item:toggle', this._onItemToggle);
+    this.removeEventListener('accordion-item-toggle', this._onItemToggle);
     this.removeEventListener('keydown', this._onKeyDown);
   }
 
@@ -69,7 +76,7 @@ export class Accordion extends LitElement {
     // Ignore events from nested accordions — only handle direct children
     if (targetItem.parentElement !== this) return;
 
-    if (!this.multi && targetItem.open) {
+    if (!this.multiple && targetItem.open) {
       this.items.forEach(item => {
         if (item !== targetItem && item.open) {
           // eslint-disable-next-line no-param-reassign

package/src/button/button/button.ts

@@ -44,30 +44,30 @@ export type {
  * @overview
  * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>
  *
- * @cssprop --button-container-shape: Defines the border radius of the button container shape.
+ * @cssprop --button-container-shape - Defines the border radius of the button container shape.
  *
- * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
- * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
+ * @cssprop --button-container-shape-start-start - Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-start-end - Defines the end position of the button container shape.
+ * @cssprop --button-container-shape-end-start - Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-end-end - Defines the end position of the button container shape.
  *
  *
- * @cssprop --filled-button-container-color: Color of the filled button container.
- * @cssprop --filled-button-label-text-color: Text color of the filled button label.
+ * @cssprop --filled-button-container-color - Color of the filled button container.
+ * @cssprop --filled-button-label-text-color - Text color of the filled button label.
  *
- * @cssprop --outlined-button-container-color: Color of the outlined button container.
- * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
+ * @cssprop --outlined-button-container-color - Color of the outlined button container.
+ * @cssprop --outlined-button-label-text-color - Text color of the outlined button label.
  *
- * @cssprop --text-button-label-text-color: Text color of the text button label.
+ * @cssprop --text-button-label-text-color - Text color of the text button label.
  *
- * @cssprop --tonal-button-container-color: Color of the tonal button container.
- * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
+ * @cssprop --tonal-button-container-color - Color of the tonal button container.
+ * @cssprop --tonal-button-label-text-color - Text color of the tonal button label.
  *
- * @cssprop --elevated-button-container-color: Color of the elevated button container.
- * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
+ * @cssprop --elevated-button-container-color - Color of the elevated button container.
+ * @cssprop --elevated-button-label-text-color - Text color of the elevated button label.
  *
- * @cssprop --neo-button-container-color: Color of the neo button container.
- * @cssprop --neo-button-label-text-color: Text color of the neo button label.
+ * @cssprop --neo-button-container-color - Color of the neo button container.
+ * @cssprop --neo-button-label-text-color - Text color of the neo button label.
  *
  * @fires {MouseEvent} click - Dispatched when the button is clicked.
  *
@@ -100,8 +100,8 @@ export class Button extends mixinBaseButton(
   // ── Properties ───────────────────────────────────────────────────────────
 
   /**
-   * Icon alignment.
-   * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
+   * When `true` (default), the icon is placed after the label (trailing).
+   * When `false`, the icon is placed before the label (leading).
    */
   @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
   trailingIcon = false;

package/src/pagination/pagination.scss

@@ -4,20 +4,23 @@
 
 :host {
   display: block;
+  container-type: inline-size;
 }
 
 .pagination {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
+  flex-wrap: wrap;
   gap: var(--spacing-200, 1rem);
+  row-gap: var(--spacing-100, 0.5rem);
   background: var(--color-surface, #fff);
   padding: var(--spacing-150, 0.75rem) var(--spacing-200, 1rem);
 
-  @media (max-width: 48rem) {
-    flex-wrap: wrap;
-    justify-content: space-between;
-    row-gap: var(--spacing-100, 0.5rem);
+  @container (min-width: 48rem) {
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    row-gap: 0;
   }
 
   .page-size {
@@ -40,14 +43,16 @@
   }
 
   .pagination-item-count {
-    margin-inline-start: auto;
+    order: 3;
+    margin-inline-start: 0;
+    inline-size: 100%;
     display: flex;
     align-items: center;
 
-    @media (max-width: 48rem) {
-      order: 3;
-      margin-inline-start: 0;
-      inline-size: 100%;
+    @container (min-width: 48rem) {
+      order: 0;
+      margin-inline-start: auto;
+      inline-size: auto;
     }
   }
 

package/src/sidebar-menu/sidebar-menu-item.scss

@@ -62,9 +62,10 @@
   gap: 0.25rem;
   flex: 1;
   min-height: var(--sidebar-menu-item-height);
-  padding-inline: 0.75rem;
+  padding-inline: var(--sidebar-menu-item-content-padding, 0.75rem);
   color: inherit;
   z-index: 1;
+  overflow: hidden;
 }
 
 .background {

package/src/table/table.scss

@@ -8,7 +8,8 @@
   min-height: 20em;
   --table-border-color: var(--color-outline-variant);
   --table-border: 1px solid var(--table-border-color);
-  --table-col-content-padding: var(--spacing-150, 0.75rem) var(--spacing-200, 1rem);
+  --table-col-content-padding: var(--spacing-150, 0.75rem)
+    var(--spacing-200, 1rem);
 }
 
 .table {
@@ -86,11 +87,7 @@
       }
 
       .col-action {
-        --button-border-radius: 0;
-
-        &.has-focus {
-          z-index: 12;
-        }
+        --button-container-shape: 0;
       }
 
       .checkbox {
@@ -110,7 +107,6 @@
   .fixed-columns {
     position: sticky;
     left: 0;
-    z-index: 1;
   }
 
   .scrollable-columns {
@@ -119,7 +115,6 @@
 }
 
 .header {
-  z-index: 2;
   position: sticky;
   top: 0;
 
@@ -157,7 +152,6 @@
       &:focus {
         outline: none;
         border-bottom-color: var(--color-primary);
-        z-index: 1;
 
         .col-content {
           border-color: var(--color-primary);

package/src/table/table.ts

@@ -237,7 +237,7 @@ export class Table extends LitElement {
         ? 'keyboard_arrow_up'
         : 'keyboard_arrow_down';
     }
-    return '';
+    return 'unfold_more';
   }
 
   private onSortClick(col: TableColumn) {