@redvars/peacock 3.8.4 → 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.4",
+  "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.4/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.4/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/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

@@ -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;
@@ -136,37 +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.ts

@@ -45,6 +45,13 @@ export class Accordion extends LitElement {
   @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>;
 

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.
  *
@@ -104,7 +104,7 @@ export class Button extends mixinBaseButton(
    * When `false`, the icon is placed before the label (leading).
    */
   @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })
-  trailingIcon = true;
+  trailingIcon = false;
 
   /**
    * Button size.

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/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) {