@redvars/peacock 3.3.3 → 3.5.0

package/src/pagination/pagination.scss

@@ -7,44 +7,48 @@
 }
 
 .pagination {
-  background: var(--color-surface, #fff);
   display: flex;
   align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-200, 1rem);
+  background: var(--color-surface, #fff);
+  padding: var(--spacing-150, 0.75rem) var(--spacing-200, 1rem);
 
-  .page-sizes-select {
-    margin-inline-start: var(--spacing-100, 0.5rem);
+  @media (max-width: 48rem) {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    row-gap: var(--spacing-100, 0.5rem);
   }
 
-  .page-size-label {
-    display: flex;
+  .page-size {
+    display: inline-flex;
     align-items: center;
     gap: var(--spacing-100, 0.5rem);
-    @include mixin.get-typography-not-important('body-medium');
+    min-inline-size: max-content;
+  }
+
+  .page-size-label {
+    @include mixin.get-typography-not-important('body-small');
     color: var(--color-on-surface-variant);
     white-space: nowrap;
   }
 
   .page-size-select {
-    border: 1px solid var(--color-outline-variant);
-    background: var(--color-surface, #fff);
-    color: var(--color-on-surface);
-    padding: var(--spacing-050, 0.25rem) var(--spacing-100, 0.5rem);
-    cursor: pointer;
-    outline: none;
-    height: 2.5rem;
-
-    @include mixin.get-typography-not-important('body-medium');
-
-    &:focus {
-      outline: 2px solid var(--color-primary);
-    }
+    inline-size: 5.5rem;
+    min-inline-size: 5.5rem;
+    --field-container-height: 2.5rem;
   }
 
   .pagination-item-count {
-    margin-inline-start: var(--spacing-150, 0.75rem);
-    flex: 1;
+    margin-inline-start: auto;
     display: flex;
     align-items: center;
+
+    @media (max-width: 48rem) {
+      order: 3;
+      margin-inline-start: 0;
+      inline-size: 100%;
+    }
   }
 
   .pagination-text {
@@ -52,8 +56,13 @@
     color: var(--color-on-surface-variant);
   }
 
-  .arrows {
-    --border-radius: 0;
-    --button-height: calc(2.5rem - 2px);
+  .pagination-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-025, 0.125rem);
+  }
+
+  .nav-button {
+    --button-container-shape: 999px;
   }
 }

package/src/pagination/pagination.ts

@@ -1,4 +1,5 @@
 import { html, LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './pagination.scss';
 
@@ -16,7 +17,7 @@ const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
  *
  * @example
  * ```html
- * <wc-pagination page="1" page-size="10" total-items="100"></wc-pagination>
+ * <wc-pagination style="width: 100%;" page="1" page-size="10" total-items="100"></wc-pagination>
  * ```
  * @tags navigation, data
  */
@@ -47,6 +48,80 @@ export class Pagination extends LitElement {
   @property({ type: Array, attribute: 'page-sizes' })
   pageSizes: number[] = DEFAULT_PAGE_SIZES;
 
+  protected override willUpdate(
+    changedProperties: PropertyValues<Pagination>,
+  ): void {
+    // Normalize page-size options so the select always has valid numeric values.
+    const normalizedPageSizes = [...new Set(
+      this.pageSizes
+        .map(size => Number(size))
+        .filter(size => Number.isFinite(size) && size > 0)
+        .map(size => Math.trunc(size)),
+    )];
+
+    if (!normalizedPageSizes.length) {
+      normalizedPageSizes.push(...DEFAULT_PAGE_SIZES);
+    }
+
+    if (
+      changedProperties.has('pageSizes') &&
+      (this.pageSizes.length !== normalizedPageSizes.length ||
+        this.pageSizes.some((size, index) => size !== normalizedPageSizes[index]))
+    ) {
+      this.pageSizes = normalizedPageSizes;
+    }
+
+    if (!this.pageSizes.includes(this.pageSize)) {
+      this.pageSize = this.pageSizes[0] ?? DEFAULT_PAGE_SIZES[0];
+    }
+
+    if (!Number.isFinite(this.totalItems) || this.totalItems < 0) {
+      this.totalItems = 0;
+    }
+
+    if (!Number.isFinite(this.page) || this.page < 1) {
+      this.page = 1;
+    }
+
+    const maxPage = this.getTotalPages();
+    if (this.page > maxPage) {
+      this.page = maxPage;
+    }
+  }
+
+  private getTotalPages(): number {
+    if (this.totalItems <= 0) return 1;
+    return Math.max(1, Math.ceil(this.totalItems / this.pageSize));
+  }
+
+  private setPage(nextPage: number) {
+    const clampedPage = Math.min(Math.max(1, nextPage), this.getTotalPages());
+    if (clampedPage === this.page) return;
+    this.page = clampedPage;
+    this.dispatchPageEvent();
+  }
+
+  private handlePageSizeChange(event: CustomEvent<{ value?: string }>) {
+    const rawValue = event.detail?.value;
+    const parsedPageSize = Number.parseInt(rawValue ?? '', 10);
+
+    if (!Number.isFinite(parsedPageSize) || parsedPageSize <= 0) {
+      return;
+    }
+
+    this.pageSize = parsedPageSize;
+    this.page = 1;
+    this.dispatchPageEvent();
+  }
+
+  private handlePreviousPage = () => {
+    this.setPage(this.page - 1);
+  };
+
+  private handleNextPage = () => {
+    this.setPage(this.page + 1);
+  };
+
   private dispatchPageEvent() {
     this.dispatchEvent(
       new CustomEvent('page', {
@@ -58,76 +133,54 @@ export class Pagination extends LitElement {
   }
 
   render() {
-    const startItem = this.pageSize * (this.page - 1);
+    const startItem = this.totalItems === 0 ? 0 : this.pageSize * (this.page - 1) + 1;
     const endItem = Math.min(this.pageSize * this.page, this.totalItems);
     const isFirstPage = this.page === 1;
     const isLastPage = this.pageSize * this.page >= this.totalItems;
 
     return html`
       <div class="pagination">
-        <div class="page-sizes-select">
-          <label class="page-size-label">
-            Items per page:
-            <select
-              class="page-size-select"
-              .value=${String(this.pageSize)}
-              @change=${(e: Event) => {
-                this.pageSize = parseInt(
-                  (e.target as HTMLSelectElement).value,
-                  10,
-                );
-                this.page = 1;
-                this.dispatchPageEvent();
-              }}
-            >
-              ${this.pageSizes.map(
-                size => html`
-                  <option value=${size} ?selected=${this.pageSize === size}>
-                    ${size}
-                  </option>
-                `,
-              )}
-            </select>
-          </label>
+        <div class="page-size">
+          <span class="page-size-label">Items per page:</span>
+          <wc-select
+            class="page-size-select"
+            .value=${String(this.pageSize)}
+            aria-label="Items per page"
+            @change=${this.handlePageSizeChange}
+          >
+            ${this.pageSizes.map(
+              size => html`<wc-option value=${String(size)}>${size}</wc-option>`,
+            )}
+          </wc-select>
         </div>
+
         <div class="pagination-item-count">
           <span class="pagination-text">
-            ${startItem} - ${endItem} of ${this.totalItems} items
+            ${startItem} - ${endItem} of ${this.totalItems}
           </span>
         </div>
-        <div class="pagination-right">
-          <div class="table-footer-right-content">
-            <div class="table-footer-right-content-pagination">
-              <wc-button
-                class="arrows"
-                color="secondary"
-                variant="text"
-                ?disabled=${isFirstPage}
-                @click=${() => {
-                  if (!isFirstPage) {
-                    this.page -= 1;
-                    this.dispatchPageEvent();
-                  }
-                }}
-              >
-                <wc-icon slot="icon" name="arrow--left"></wc-icon>
-              </wc-button>
-              <wc-button
-                color="secondary"
-                variant="text"
-                class="arrows"
-                ?disabled=${isLastPage}
-                @click=${() => {
-                  if (!isLastPage) {
-                    this.page += 1;
-                    this.dispatchPageEvent();
-                  }
-                }}
-              >
-                <wc-icon slot="icon" name="arrow--right"></wc-icon>
-              </wc-button>
-            </div>
-          </div>
+
+        <div class="pagination-actions">
+          <wc-icon-button
+            class="nav-button"
+            color="secondary"
+            variant="text"
+            size="sm"
+            name="keyboard_arrow_left"
+            title="Previous page"
+            ?disabled=${isFirstPage}
+            @click=${this.handlePreviousPage}
+          ></wc-icon-button>
+          <wc-icon-button
+            class="nav-button"
+            color="secondary"
+            variant="text"
+            size="sm"
+            name="keyboard_arrow_right"
+            title="Next page"
+            ?disabled=${isLastPage}
+            @click=${this.handleNextPage}
+          ></wc-icon-button>
         </div>
       </div>
     `;

package/src/peacock-loader.ts

@@ -11,6 +11,9 @@ import { Divider } from './divider/divider.js';
 import { Button } from './button/button/button.js';
 import { ButtonGroup } from './button/button-group/button-group.js';
 import { IconButton } from './button/icon-button/icon-button.js';
+import { Fab } from './fab/fab.js';
+import { SegmentedButton } from './segmented-button/segmented-button.js';
+import { SegmentedButtonGroup } from './segmented-button/segmented-button-group.js';
 import { Input } from './input/input.js';
 import { Field } from './field/field.js';
 import { NumberField } from './number-field/number-field.js';
@@ -53,7 +56,16 @@ import { Table } from './table/table.js';
 import { Pagination } from './pagination/pagination.js';
 import { TreeView } from './tree-view/tree-view.js';
 import { Card } from './card/card.js';
+import { CardContent } from './card/card-content.js';
+import { Banner } from './banner/banner.js';
+import { Notification } from './notification/notification.js';
 import { Snackbar } from './snackbar/snackbar.js';
+import { BottomSheet } from './bottom-sheet/bottom-sheet.js';
+import { SideSheet } from './side-sheet/side-sheet.js';
+import { Select } from './select/select.js';
+import { SelectOptionElement } from './select/option.js';
+import { Search } from './search/search.js';
+import { Toolbar } from './toolbar/toolbar.js';
 
 const distDirectory = `${import.meta.url}/..`;
 await loadCSS(`${distDirectory}/assets/styles.css`);
@@ -99,9 +111,18 @@ const loaderConfig: LoaderConfig = {
     'wc-icon-button': {
       CustomElementClass: IconButton,
     },
+    'wc-fab': {
+      CustomElementClass: Fab,
+    },
     'wc-button-group': {
       CustomElementClass: ButtonGroup,
     },
+    'wc-segmented-button': {
+      CustomElementClass: SegmentedButton,
+    },
+    'wc-segmented-button-group': {
+      CustomElementClass: SegmentedButtonGroup,
+    },
     'wc-divider': {
       CustomElementClass: Divider,
     },
@@ -141,6 +162,15 @@ const loaderConfig: LoaderConfig = {
     'wc-card': {
       CustomElementClass: Card,
     },
+    'wc-card-content': {
+      CustomElementClass: CardContent,
+    },
+    'wc-banner': {
+      CustomElementClass: Banner,
+    },
+    'wc-notification': {
+      CustomElementClass: Notification,
+    },
     'wc-tag': {
       CustomElementClass: Tag,
     },
@@ -238,6 +268,24 @@ const loaderConfig: LoaderConfig = {
     'wc-snackbar': {
       CustomElementClass: Snackbar,
     },
+    'wc-bottom-sheet': {
+      CustomElementClass: BottomSheet,
+    },
+    'wc-side-sheet': {
+      CustomElementClass: SideSheet,
+    },
+    'wc-select': {
+      CustomElementClass: Select,
+    },
+    'wc-option': {
+      CustomElementClass: SelectOptionElement,
+    },
+    'wc-search': {
+      CustomElementClass: Search,
+    },
+    'wc-toolbar': {
+      CustomElementClass: Toolbar,
+    },
     'wc-chart-doughnut': {
       importPath: `${distDirectory}/chart-doughnut.js`,
     },

package/src/radio/radio.ts

@@ -1,7 +1,9 @@
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { spread } from '../spread.js';
+
+import { spread } from '@/__directive/spread.js';
+
 import styles from './radio.scss';
 
 /**

package/src/ripple/ripple.ts

@@ -91,10 +91,26 @@ const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
  *
  * @example
  * ```html
- * <button style="position: relative;">
+ * <style>
+ * .ripple-surface {
+ *   position: relative;
+ *   display: inline-flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   width: 220px;
+ *   height: 64px;
+ *   border-radius: 12px;
+ *   background: var(--color-surface-container-high);
+ *   color: var(--color-on-surface);
+ *   overflow: hidden;
+ *   cursor: pointer;
+ *   user-select: none;
+ * }
+ * </style>
+ * <div class="ripple-surface">
  *   <wc-ripple></wc-ripple>
- *   Click me
- * </button>
+ *   Ripple Effect
+ * </div>
  * ```
  * @tags display
  */

package/src/search/index.ts

@@ -0,0 +1 @@
+export { Search } from './search.js';

package/src/search/search-colors.scss

@@ -0,0 +1,14 @@
+:host {
+  /* Filled variant tokens */
+  --search-container-color: var(--color-surface-container-high);
+  --search-input-text-color: var(--color-on-surface);
+  --search-placeholder-color: var(--color-on-surface-variant);
+  --search-icon-color: var(--color-on-surface-variant);
+
+  /* Outlined variant tokens */
+  --search-outlined-container-color: var(--color-surface);
+  --search-outlined-input-text-color: var(--color-on-surface);
+  --search-outlined-placeholder-color: var(--color-on-surface-variant);
+  --search-outlined-icon-color: var(--color-on-surface-variant);
+  --search-outline-color: var(--color-outline);
+}

package/src/search/search.scss

@@ -0,0 +1,204 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  --search-container-shape: var(--shape-corner-full);
+  --search-container-shape-start-start: unset;
+  --search-container-shape-start-end: unset;
+  --search-container-shape-end-start: unset;
+  --search-container-shape-end-end: unset;
+}
+
+.search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.25rem;
+
+  --_container-shape-start-start: var(--search-container-shape-start-start, var(--search-container-shape));
+  --_container-shape-start-end: var(--search-container-shape-start-end, var(--search-container-shape));
+  --_container-shape-end-start: var(--search-container-shape-end-start, var(--search-container-shape));
+  --_container-shape-end-end: var(--search-container-shape-end-end, var(--search-container-shape));
+
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+
+  padding-inline: 1rem;
+
+  /* size-md default */
+  --_height: 3.5rem;
+
+  &.size-sm {
+    --_height: 2.5rem;
+    padding-inline: 0.75rem;
+  }
+
+  &.size-lg {
+    --_height: 4rem;
+    padding-inline: 1.25rem;
+  }
+
+  min-height: var(--_height);
+}
+
+/* Background layer */
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Outline layer (outlined variant) */
+.outline {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border: var(--_outline-width, 0.0675rem) solid var(--_outline-color);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Input element */
+.search-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  z-index: 1;
+  position: relative;
+  color: var(--_input-text-color);
+  caret-color: var(--_caret-color, var(--color-primary));
+
+  @include mixin.get-typography-not-important(body-large);
+
+  &::placeholder {
+    color: var(--_placeholder-color);
+  }
+
+  /* Remove browser default search input styling */
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    appearance: none;
+    display: none;
+  }
+}
+
+/* Leading icon area */
+.leading-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  z-index: 1;
+  position: relative;
+  color: var(--_icon-color);
+  --icon-color: var(--_icon-color);
+  margin-inline-end: 0.5rem;
+}
+
+/* Trailing actions area (clear button + trailing slot) */
+.trailing-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+  z-index: 1;
+  position: relative;
+  color: var(--_icon-color);
+  --icon-color: var(--_icon-color);
+}
+
+/* Clear button */
+.clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 50%;
+  color: var(--_icon-color);
+  --icon-color: var(--_icon-color);
+  outline: none;
+  transition: background-color 150ms;
+
+  &:hover:not([disabled]) {
+    background-color: color-mix(in srgb, var(--_icon-color) 8%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 1px;
+  }
+
+  &[disabled] {
+    cursor: default;
+    opacity: 0.38;
+    pointer-events: none;
+  }
+}
+
+/* ---- Variants ---- */
+
+.search.variant-filled {
+  --_container-color: var(--search-container-color);
+  --_input-text-color: var(--search-input-text-color);
+  --_placeholder-color: var(--search-placeholder-color);
+  --_icon-color: var(--search-icon-color);
+
+  &.focused {
+    --_outline-color: var(--color-primary);
+    .outline {
+      display: block;
+      border-width: 2px;
+    }
+  }
+}
+
+.search.variant-outlined {
+  --_container-color: var(--search-outlined-container-color);
+  --_input-text-color: var(--search-outlined-input-text-color);
+  --_placeholder-color: var(--search-outlined-placeholder-color);
+  --_icon-color: var(--search-outlined-icon-color);
+  --_outline-color: var(--search-outline-color);
+
+  .outline {
+    display: block;
+  }
+
+  &.focused {
+    --_outline-color: var(--color-primary);
+    .outline {
+      border-width: 2px;
+    }
+  }
+}
+
+/* ---- Disabled state ---- */
+
+.search.disabled {
+  pointer-events: none;
+  opacity: 0.38;
+
+  .search-input {
+    cursor: not-allowed;
+  }
+}