@redvars/peacock 3.5.1 → 3.6.1

package/src/split-button/split-button-colors.scss

@@ -0,0 +1,56 @@
+@mixin _split-button-color($color) {
+  --filled-split-button-container-color: var(--color-#{$color});
+  --filled-split-button-label-text-color: var(--color-on-#{$color});
+
+  --tonal-split-button-container-color: var(--color-#{$color}-container);
+  --tonal-split-button-label-text-color: var(--color-on-#{$color}-container);
+
+  --outlined-split-button-outline-color: var(--color-#{$color});
+  --outlined-split-button-label-text-color: var(--color-#{$color});
+}
+
+:host([color=primary]) {
+  @include _split-button-color(primary);
+}
+
+:host([color=secondary]) {
+  @include _split-button-color(secondary);
+}
+
+:host([color=tertiary]) {
+  @include _split-button-color(tertiary);
+}
+
+:host([color=success]) {
+  @include _split-button-color(success);
+}
+
+:host([color=danger]) {
+  @include _split-button-color(error);
+}
+
+:host([color=warning]) {
+  @include _split-button-color(warning);
+}
+
+:host([color=on-surface]) {
+  --filled-split-button-container-color: var(--color-on-surface);
+  --filled-split-button-label-text-color: var(--color-surface);
+
+  --tonal-split-button-container-color: var(--color-on-surface-container);
+  --tonal-split-button-label-text-color: var(--color-surface-container-high);
+
+  --outlined-split-button-outline-color: var(--color-on-surface);
+  --outlined-split-button-label-text-color: var(--color-on-surface);
+}
+
+:host([color=surface]) {
+  --filled-split-button-container-color: var(--color-surface-container-high);
+  --filled-split-button-label-text-color: var(--color-on-surface);
+
+  --tonal-split-button-container-color: var(--color-surface-container-high);
+  --tonal-split-button-label-text-color: var(--color-on-surface-container);
+
+  --outlined-split-button-outline-color: var(--color-on-surface);
+  --outlined-split-button-label-text-color: var(--color-on-surface);
+}

package/src/split-button/split-button-sizes.scss

@@ -0,0 +1,28 @@
+:host([size='xs']),
+:host([size='extra-small']) {
+  --split-button-icon-size: 1rem;
+}
+
+
+:host([size='sm']),
+:host([size='small']) {
+  --split-button-icon-size: 1.125rem;
+}
+
+
+:host([size='md']),
+:host([size='medium']) {
+  --split-button-icon-size: 1.25rem;
+}
+
+
+:host([size='lg']),
+:host([size='large']) {
+  --split-button-icon-size: 1.5rem;
+}
+
+
+:host([size='xl']),
+:host([size='extra-large']) {
+  --split-button-icon-size: 2rem;
+}

package/src/split-button/split-button.scss

@@ -0,0 +1,79 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-flex;
+  position: relative;
+
+  --split-button-container-shape: var(--shape-corner-medium);
+  --split-button-gap: 0.125rem;
+  --split-button-icon-size: 1.125rem;
+}
+
+.split-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--split-button-gap);
+}
+
+.action-button {
+  --button-container-shape: var(--split-button-container-shape);
+}
+
+.dropdown-trigger {
+  --button-container-shape: var(--split-button-container-shape);
+  --button-icon-size: var(--split-button-icon-size);
+}
+
+.dropdown-icon {
+  transition: transform 200ms ease;
+}
+
+.dropdown-trigger.active .dropdown-icon {
+  transform: rotate(180deg);
+}
+
+/* ── Variant: Filled ────────────────────────────────────── */
+
+.split-button.variant-filled {
+  .action-button,
+  .dropdown-trigger {
+    --filled-button-container-color: var(--filled-split-button-container-color);
+    --filled-button-label-text-color: var(--filled-split-button-label-text-color);
+  }
+}
+
+
+/* ── Variant: Tonal ─────────────────────────────────────── */
+
+.split-button.variant-tonal {
+  .action-button,
+  .dropdown-trigger {
+    --tonal-button-container-color: var(--tonal-split-button-container-color);
+    --tonal-button-label-text-color: var(--tonal-split-button-label-text-color);
+  }
+}
+
+
+/* ── Variant: Outlined ──────────────────────────────────── */
+
+.split-button.variant-outlined {
+  .action-button,
+  .dropdown-trigger {
+    --outlined-button-outline-color: var(--outlined-split-button-outline-color, var(--color-outline));
+    --outlined-button-label-text-color: var(--outlined-split-button-label-text-color);
+  }
+}
+
+:host([block]) {
+  width: 100%;
+
+  .split-button {
+    width: 100%;
+  }
+
+  .action-button {
+    flex: 1;
+  }
+}

package/src/split-button/split-button.ts

@@ -0,0 +1,236 @@
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './split-button.scss';
+import colorStyles from './split-button-colors.scss';
+import sizeStyles from './split-button-sizes.scss';
+
+/**
+ * @label Split Button
+ * @tag wc-split-button
+ * @rawTag split-button
+ *
+ * @summary A split button lets users perform a default action or choose from a set of related actions via a dropdown menu.
+ * @overview
+ * <p>A split button combines a primary action button with a dropdown arrow that opens a menu. Following M3 Material Design, the split button provides a default action alongside a set of secondary options, reducing clutter while keeping alternative actions accessible.</p>
+ *
+ * @cssprop --split-button-container-shape: Defines the border radius of the split button container shape.
+ *
+ * @cssprop --filled-split-button-container-color: Color of the filled split button container.
+ * @cssprop --filled-split-button-label-text-color: Text color of the filled split button label.
+ *
+ * @cssprop --outlined-split-button-container-color: Color of the outlined split button container.
+ * @cssprop --outlined-split-button-label-text-color: Text color of the outlined split button label.
+ *
+ * @cssprop --tonal-split-button-container-color: Color of the tonal split button container.
+ * @cssprop --tonal-split-button-label-text-color: Text color of the tonal split button label.
+ *
+ * @fires {MouseEvent} click - Dispatched when the primary action button is clicked.
+ * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.
+ *
+ * @example
+ * ```html
+ * <wc-split-button>
+ *   Save
+ *   <wc-menu-item slot="menu">Save as draft</wc-menu-item>
+ *   <wc-menu-item slot="menu">Save and publish</wc-menu-item>
+ * </wc-split-button>
+ * ```
+ * @tags controls
+ */
+@IndividualComponent
+export class SplitButton extends LitElement {
+  static override styles = [styles, colorStyles, sizeStyles];
+
+  /**
+   * Button size.
+   * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+   */
+  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+
+  /**
+   * The visual style of the split button.
+   *
+   * Possible variant values:
+   * `"filled"` is a filled button.
+   * `"outlined"` is an outlined button.
+   * `"tonal"` is a light color button.
+   */
+  @property({ reflect: true }) variant: 'filled' | 'tonal' | 'outlined' =
+    'filled';
+
+  /**
+   * Defines the primary color of the split button.
+   */
+  @property({ reflect: true }) color:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'surface'
+    | 'on-surface' = 'primary';
+
+  /**
+   * Whether the split button is disabled.
+   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @state() private _menuOpen = false;
+
+  @query('.dropdown-trigger') private readonly _dropdownButton!: HTMLElement;
+
+  @query('wc-menu') private readonly _menu!: HTMLElement & {
+    open: boolean;
+    anchorElement: HTMLElement | null;
+    show: () => void;
+    close: () => void;
+  };
+
+  private _menuId = `split-menu-${Math.random().toString(36).slice(2, 9)}`;
+
+  override focus() {
+    const btn =
+      this.shadowRoot?.querySelector<HTMLElement>('.action-button');
+    btn?.focus();
+  }
+
+  private _onActionClick(event: MouseEvent) {
+    if (this.disabled) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      return;
+    }
+
+    // Close menu if open
+    if (this._menuOpen) {
+      this._menu?.close();
+    }
+  }
+
+  private _onDropdownClick(event: MouseEvent) {
+    event.stopPropagation();
+    if (this.disabled) return;
+
+    if (this._menuOpen) {
+      this._menu?.close();
+    } else {
+      this._menu.anchorElement = this;
+      this._menu?.show();
+    }
+  }
+
+  private _onMenuOpened = () => {
+    this._menuOpen = true;
+    this.dispatchEvent(
+      new CustomEvent('toggle-menu', {
+        detail: { open: true },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private _onMenuClosed = () => {
+    this._menuOpen = false;
+    this.dispatchEvent(
+      new CustomEvent('toggle-menu', {
+        detail: { open: false },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  private _onKeyDown = (event: KeyboardEvent) => {
+    if (this.disabled) return;
+
+    if (
+      event.key === 'ArrowDown' &&
+      event.target === this._dropdownButton
+    ) {
+      event.preventDefault();
+      if (!this._menuOpen) {
+        this._menu.anchorElement = this;
+        this._menu?.show();
+      }
+      // Focus the menu so keyboard nav works
+      requestAnimationFrame(() => this._menu?.focus());
+    }
+
+    if (event.key === 'Escape' && this._menuOpen) {
+      this._menu?.close();
+      this._dropdownButton?.focus();
+    }
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('keydown', this._onKeyDown);
+  }
+
+  override disconnectedCallback() {
+    this.removeEventListener('keydown', this._onKeyDown);
+    super.disconnectedCallback();
+  }
+
+  override render() {
+    const actionClasses = {
+      'action-button': true,
+      disabled: this.disabled,
+    };
+
+    const dropdownClasses = {
+      'dropdown-trigger': true,
+      active: this._menuOpen,
+      disabled: this.disabled,
+    };
+
+    const containerClasses = {
+      'split-button': true,
+      [`variant-${this.variant}`]: true,
+      disabled: this.disabled,
+    };
+
+    return html`
+      <div class=${classMap(containerClasses)}>
+        <wc-button
+          class=${classMap(actionClasses)}
+          size=${this.size}
+          variant=${this.variant}
+          ?disabled=${this.disabled}
+          @click=${this._onActionClick}
+        >
+          <slot></slot>
+        </wc-button>
+
+        <wc-icon-button
+          class=${classMap(dropdownClasses)}
+          size=${this.size}
+          variant=${this.variant}
+          ?disabled=${this.disabled}
+          .configAria=${{
+            'aria-haspopup': 'menu',
+            'aria-expanded': String(this._menuOpen),
+            'aria-controls': this._menuId,
+            'aria-label': 'Open split button menu',
+          }}
+          @click=${this._onDropdownClick}
+        >
+          <wc-icon class="dropdown-icon" name="arrow_drop_down" aria-hidden="true"></wc-icon>
+        </wc-icon-button>
+      </div>
+
+      <wc-menu
+        id=${this._menuId}
+        placement="bottom-end"
+        @opened=${this._onMenuOpened}
+        @closed=${this._onMenuClosed}
+      >
+        <slot name="menu"></slot>
+      </wc-menu>
+    `;
+  }
+}

package/src/svg/index.ts

@@ -0,0 +1 @@
+export { Svg } from './svg.js';

package/src/svg/svg.scss

@@ -0,0 +1,91 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  --svg-size: inherit;
+  --svg-color: inherit;
+}
+
+.svg-wrapper {
+  height: var(--svg-size, 1rem);
+  width: var(--svg-size, 1rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.svg-content {
+  height: 100%;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    fill: var(--svg-color);
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.svg-content.clickable {
+  cursor: zoom-in;
+}
+
+.placeholder {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.preview-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+}
+
+.preview-overlay.open {
+  display: flex;
+}
+
+.preview-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 1.5rem;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+
+  &:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+  }
+}
+
+.preview-content {
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+
+  svg {
+    max-width: 90vw;
+    max-height: 90vh;
+    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+    border-radius: 4px;
+  }
+}

package/src/svg/svg.ts

@@ -0,0 +1,160 @@
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+import { sanitizeSvg } from '@/__utils/sanitize-svg.js';
+import { fetchSVG } from '../icon/datasource.js';
+
+import styles from './svg.scss';
+
+/**
+ * @label SVG
+ * @tag wc-svg
+ * @rawTag svg
+ * @summary An SVG component with lazy loading and optional preview support.
+ * @overview Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.
+ *
+ * @cssprop --svg-color - Controls the fill color of the SVG.
+ * @cssprop [--svg-size=1rem] - Controls the size of the SVG. Defaults to "1rem"
+ *
+ * @example
+ * ```html
+ * <wc-svg src="/icons/my-icon.svg" image-title="My icon"></wc-svg>
+ * ```
+ */
+export class Svg extends LitElement {
+  static styles = [styles];
+
+  /** URL of the SVG asset to fetch and render inline. */
+  @property({ type: String, reflect: true }) src = '';
+
+  /** Accessible title / alt text for the SVG. */
+  @property({ attribute: 'image-title' }) imageTitle = '';
+
+  /** Enable click-to-preview lightbox. */
+  @property({ type: Boolean, reflect: true }) preview = false;
+
+  @state() private _loaded = false;
+
+  @state() private _previewOpen = false;
+
+  @state() private _svgContent: string = '';
+
+  // token to avoid stale fetch results
+  private _fetchId = 0;
+
+  private _intersectionObserver: IntersectionObserver | null = null;
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._intersectionObserver?.disconnect();
+  }
+
+  firstUpdated() {
+    this._setupIntersectionObserver();
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('src')) {
+      // Reset lazy-load state so the new src is fetched when visible
+      this._loaded = false;
+      this._svgContent = '';
+      this._setupIntersectionObserver();
+    }
+  }
+
+  private _setupIntersectionObserver() {
+    this._intersectionObserver?.disconnect();
+
+    const wrapper = this.shadowRoot?.querySelector('.svg-wrapper');
+    if (!wrapper) return;
+
+    this._intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          this._loaded = true;
+          this._intersectionObserver?.disconnect();
+          this._fetchSvg();
+        }
+      },
+      { rootMargin: '200px' },
+    );
+
+    this._intersectionObserver.observe(wrapper);
+  }
+
+  private async _fetchSvg() {
+    if (!this.src) return;
+
+    this._fetchId += 1;
+    const currentId = this._fetchId;
+
+    try {
+      const raw = await fetchSVG(this.src);
+      if (currentId !== this._fetchId) return;
+
+      this._svgContent = raw ? sanitizeSvg(raw) : '';
+    } catch {
+      if (currentId === this._fetchId) {
+        this._svgContent = '';
+      }
+    }
+  }
+
+  private _handleClick() {
+    if (this.preview) {
+      this._previewOpen = true;
+      // Move focus into the dialog after render
+      this.updateComplete.then(() => {
+        const closeBtn = this.shadowRoot?.querySelector<HTMLElement>('.preview-close');
+        closeBtn?.focus();
+      });
+    }
+  }
+
+  private _closePreview(e: Event) {
+    e.stopPropagation();
+    const wasOpen = this._previewOpen;
+    this._previewOpen = false;
+    if (wasOpen) {
+      // Return focus to the trigger
+      const trigger = this.shadowRoot?.querySelector<HTMLElement>('.svg-content');
+      trigger?.focus();
+    }
+  }
+
+  render() {
+    return html`
+      <div class="svg-wrapper">
+        ${this._loaded && this._svgContent
+          ? html`<div
+              class="svg-content ${this.preview ? 'clickable' : ''}"
+              role=${this.imageTitle ? 'img' : 'presentation'}
+              aria-label=${this.imageTitle || ''}
+              @click=${this._handleClick}
+            >
+              ${unsafeSVG(this._svgContent)}
+            </div>`
+          : html`<span class="placeholder" aria-hidden="true"></span>`}
+      </div>
+
+      <div
+        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.imageTitle ? `Preview: ${this.imageTitle}` : 'SVG preview'}
+        @click=${this._closePreview}
+        @keydown=${(e: KeyboardEvent) => e.key === 'Escape' && this._closePreview(e)}
+      >
+        <button
+          class="preview-close"
+          aria-label="Close preview"
+          @click=${this._closePreview}
+        >&#x2715;</button>
+        <div class="preview-content" @click=${(e: Event) => e.stopPropagation()}>
+          ${unsafeSVG(this._svgContent)}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/table/table.ts

@@ -218,7 +218,7 @@ export class Table extends LitElement {
   }
 
   private getTotalItems(): number {
-    if (this.paginate && !this.managed) return this.data.length;
+    if (this.paginate && !this.managed && this.data) return this.data.length;
     return this.totalItems ?? 0;
   }
 
@@ -468,7 +468,7 @@ export class Table extends LitElement {
       <div class=${classMap(tableClasses)}>
         <div class="table-scroll-container" @scroll=${this.onScrollContainer}>
           ${this.renderHeader()}
-          ${this.data.length ? this.renderBody() : this.renderEmptyState()}
+          ${this.data && this.data.length ? this.renderBody() : this.renderEmptyState()}
         </div>
         <div class="table-footer">${this.renderPagination()}</div>
       </div>

package/src/toolbar/toolbar.ts

@@ -33,10 +33,10 @@ import colorStyles from './toolbar-colors.scss';
  * ```html
  * <!-- Docked toolbar -->
  * <wc-toolbar>
- *   <wc-icon-button variant="text"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><wc-icon name="home"></wc-icon></wc-icon-button>
  *   <wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
- *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
- *   <wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text" color="surface"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *

package/src/tooltip/tooltip.scss

@@ -5,13 +5,14 @@
 
 
 :host(:not([preview])) {
+  position: absolute;
+  top: 0;
+  left: 0;
+
   .tooltip {
     pointer-events: none;
     transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
     transform: scale(0);
-    position: absolute;
-    top: 0;
-    left: 0;
     opacity: 0;
   }