@redvars/peacock 3.8.3 → 3.8.4

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.4",
   "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.4/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.4/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.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
@@ -87,7 +87,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,12 +136,17 @@ export class AccordionItem extends LitElement {
           ?disabled=${this.disabled}
           @click=${this._handleToggle}
         >
-          ${this.togglePosition === 'before' ? this._renderToggleIcon() : nothing}
+          ${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; })}
+                @slotchange=${(e: Event) =>
+                  AccordionItem._onSlotChange(e, v => {
+                    this._hasHeadingSlot = v;
+                  })}
               ></slot>
             </span>
             <span
@@ -151,12 +156,17 @@ export class AccordionItem extends LitElement {
             >
               <slot
                 name="description"
-                @slotchange=${(e: Event) => AccordionItem._onSlotChange(e, v => { this._hasDescriptionSlot = v; })}
+                @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}
+          ${this.togglePosition === 'after'
+            ? this._renderToggleIcon()
+            : nothing}
         </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,15 @@ 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';
 
   @queryAssignedElements({ selector: 'wc-accordion-item' })
   items!: Array<AccordionItem>;
@@ -52,14 +52,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 +69,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

@@ -100,11 +100,11 @@ 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;
+  trailingIcon = true;
 
   /**
    * Button size.

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 {