@redvars/peacock 3.5.1 → 3.6.0

package/src/popover/popover.ts

@@ -0,0 +1,170 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { Placement } from '@floating-ui/dom';
+import IndividualComponent from '@/IndividualComponent.js';
+import { FloatingController } from '../__controllers/floating-controller.js';
+import styles from './popover.scss';
+import type { PopoverContent } from './popover-content.js';
+
+/**
+ * @label Popover
+ * @tag wc-popover
+ * @rawTag popover
+ * @summary Displays additional information in a floating panel anchored to a trigger element.
+ * @overview
+ * <p>The Popover component wraps a trigger element and a <code>wc-popover-content</code> child. It uses
+ * floating-ui to compute position, keeping the panel visible inside the viewport even on scroll.</p>
+ * @tags display
+ *
+ * @fires {CustomEvent} wc-popover--open - Fired when the popover opens.
+ * @fires {CustomEvent} wc-popover--close - Fired when the popover closes.
+ *
+ * @example
+ * ```html
+ * <wc-popover trigger="click">
+ *   <wc-button>Open popover</wc-button>
+ *   <wc-popover-content>
+ *     <p>Popover body text goes here.</p>
+ *   </wc-popover-content>
+ * </wc-popover>
+ * ```
+ */
+@IndividualComponent
+export class Popover extends LitElement {
+  static styles = [styles];
+
+  /**
+   * Determines how the popover is triggered.
+   * Possible values are `"click"`, `"hover"`, `"manual"`.
+   */
+  @property({ reflect: true }) trigger: 'click' | 'hover' | 'manual' = 'click';
+
+  /**
+   * Preferred placement of the popover relative to the trigger element.
+   * Accepts any floating-ui `Placement` string such as `"bottom"`, `"top-start"`, `"right"`, etc.
+   */
+  @property({ reflect: true }) placement: Placement = 'bottom';
+
+  /**
+   * Whether the popover is open.
+   */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * Distance in pixels between the trigger element and the popover panel.
+   */
+  @property({ type: Number }) offset = 8;
+
+  private _floating: FloatingController | null = null;
+
+  private _contentEl: PopoverContent | null = null;
+
+  private _triggerEl: HTMLElement | null = null;
+
+  private _setupFloating() {
+    // Tear down any existing controller
+    if (this._floating) {
+      this._floating = null;
+    }
+
+    // Resolve the content element
+    this._contentEl = this.querySelector<PopoverContent>('wc-popover-content');
+
+    // Resolve the trigger element: first light-DOM child that is NOT wc-popover-content
+    this._triggerEl =
+      (Array.from(this.children).find(
+        (c) => c.tagName.toLowerCase() !== 'wc-popover-content',
+      ) as HTMLElement) ?? null;
+
+    if (!this._triggerEl || !this._contentEl) return;
+
+    const triggerMode =
+      this.trigger === 'manual'
+        ? 'manual'
+        : (this.trigger as 'click' | 'hover');
+
+    this._floating = new FloatingController(this, {
+      placement: this.placement,
+      strategy: 'fixed',
+      offset: this.offset,
+      trigger: triggerMode,
+      closeOnClickOutside: true,
+      onOpenChange: (isOpen) => {
+        this.open = isOpen;
+        if (this._contentEl) {
+          this._contentEl.open = isOpen;
+        }
+        this.dispatchEvent(
+          new CustomEvent(isOpen ? 'wc-popover--open' : 'wc-popover--close', {
+            bubbles: true,
+            composed: true,
+          }),
+        );
+      },
+    });
+
+    this._floating.setElements(
+      this._triggerEl,
+      this._contentEl as unknown as HTMLElement,
+    );
+
+    if (this.open) {
+      this._floating.open();
+      this._contentEl.open = true;
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  firstUpdated() {
+    this._setupFloating();
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    if (
+      changedProps.has('trigger') ||
+      changedProps.has('placement') ||
+      changedProps.has('offset')
+    ) {
+      this._setupFloating();
+    }
+
+    if (changedProps.has('open') && this._floating) {
+      if (this.open && !this._floating.isOpen) {
+        this._floating.open();
+        if (this._contentEl) this._contentEl.open = true;
+      } else if (!this.open && this._floating.isOpen) {
+        this._floating.close();
+        if (this._contentEl) this._contentEl.open = false;
+      }
+    }
+  }
+
+  /**
+   * Programmatically opens the popover.
+   */
+  show() {
+    if (this._floating && !this._floating.isOpen) {
+      this._floating.open();
+    } else if (!this._floating) {
+      this.open = true;
+    }
+  }
+
+  /**
+   * Programmatically closes the popover.
+   */
+  hide() {
+    if (this._floating && this._floating.isOpen) {
+      this._floating.close();
+    } else if (!this._floating) {
+      this.open = false;
+    }
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/split-button/index.ts

@@ -0,0 +1 @@
+export { SplitButton } from './split-button.js';

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/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/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;
   }