@redvars/peacock 3.5.0 → 3.6.0

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/tabs/tab.ts

@@ -193,6 +193,7 @@ export class Tab extends LitElement {
 
     if (!isLink) {
           return html`<button
+          id="button"
               class=${classMap(cssClasses)}
               tabindex="0"
               @mousedown=${this.__handlePress}
@@ -241,7 +242,7 @@ export class Tab extends LitElement {
 
   renderPrimaryTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -267,7 +268,7 @@ export class Tab extends LitElement {
 
   renderSecondaryTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -300,7 +301,7 @@ export class Tab extends LitElement {
 
   renderSegmentedTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>

package/src/text/text.css-component.scss

@@ -49,11 +49,17 @@ $sizes: "large", "medium", 'small';
 }
 
 .text-code-block {
-  display: inline-flex;
   background-color: var(--color-surface-variant);
   text-shadow: 0 1px 1px var(--color-surface-variant);
   color: var(--color-on-surface);
   border-radius: var(--shape-corner-extra-small);
   padding: var(--spacing-050);
   font-family: var(--font-family-monospace);
+
+  display: inline-block;
+  max-width: 100%;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  vertical-align: middle;
 }

package/src/time-picker/time-picker.ts

@@ -167,7 +167,6 @@ export class TimePicker extends BaseInput {
           slot="field-end"
           color="secondary"
           variant="text"
-          name="calendar_today"
           ?disabled=${this.disabled}
           @click=${() => {
             setTimeout(() => {
@@ -176,6 +175,7 @@ export class TimePicker extends BaseInput {
             });
           }}
         >
+          <wc-icon name="calendar_today"></wc-icon>
         </wc-icon-button>
       </wc-field>
     `;

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" name="home"></wc-icon-button>
- *   <wc-icon-button variant="tonal" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
- *   <wc-icon-button variant="text" name="account_circle"></wc-icon-button>
+ *   <wc-icon-button variant="text"><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-toolbar>
  * ```
  *
@@ -44,9 +44,9 @@ import colorStyles from './toolbar-colors.scss';
  * ```html
  * <!-- Floating horizontal toolbar -->
  * <wc-toolbar variant="floating" orientation="horizontal">
- *   <wc-icon-button variant="tonal" name="home"></wc-icon-button>
- *   <wc-icon-button variant="text" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *
@@ -54,9 +54,9 @@ import colorStyles from './toolbar-colors.scss';
  * ```html
  * <!-- Floating vertical toolbar -->
  * <wc-toolbar variant="floating" orientation="vertical">
- *   <wc-icon-button variant="tonal" name="home"></wc-icon-button>
- *   <wc-icon-button variant="text" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  * @tags display navigation

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

package/src/tooltip/tooltip.ts

@@ -1,8 +1,8 @@
 import { html, LitElement } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './tooltip.scss';
-import { PopoverController } from '../popover/PopoverController.js';
+import { FloatingController } from '../__controllers/floating-controller.js';
 
 // Define a type for valid trigger combinations
 export type TooltipTrigger = 'hover' | 'focus' | 'click';
@@ -39,102 +39,59 @@ export class Tooltip extends LitElement {
 
   @property({ type: Boolean, reflect: true }) preview = false;
 
-  @query('#tooltip') floatingEl!: HTMLElement;
-
   private _target: HTMLElement | null = null;
 
-  private _popover = new PopoverController(this, {
-    placement: 'top',
-    offset: 8,
-  });
-
-  private static CLOSE_OTHERS_EVENT = 'tooltip--open';
+  private _floating: FloatingController | null = null;
 
-  private hasTrigger(type: TooltipTrigger): boolean {
-    return this.trigger.split(' ').includes(type);
-  }
+  private resolveTrigger(): 'hover' | 'click' | 'focus' | 'manual' | 'hover-focus' {
+    if (this.preview) return 'manual';
 
-  // Define listeners as arrow functions to maintain 'this' context
-  private _onMouseEnter = () => {
-    if (this.preview || !this.hasTrigger('hover')) return;
-    window.clearTimeout(this._hideTimeout); // Cancel any pending close
-    this.show();
-  };
-
-  private _onMouseLeave = () => {
-    if (this.preview || !this.hasTrigger('hover')) return;
-
-    // Small delay allows the mouse to move from target -> tooltip
-    // without the tooltip vanishing instantly.
-    this._hideTimeout = window.setTimeout(() => {
-      // Only hide if the mouse isn't currently hovering the target OR the tooltip
-      const isHoveringTarget = this._target?.matches(':hover');
-      const isHoveringTooltip = this.floatingEl?.matches(':hover');
-
-      if (!isHoveringTarget && !isHoveringTooltip) {
-        this.hide();
-      }
-    }, 100); // 100ms is usually enough for a smooth transition
-  };
+    const triggerTokens = this.trigger.split(' ');
+    const hasHover = triggerTokens.includes('hover');
+    const hasFocus = triggerTokens.includes('focus');
+    const hasClick = triggerTokens.includes('click');
 
-  private _onFocusIn = () => this.preview && this.hasTrigger('focus') && this.show();
+    if (hasClick) return 'click';
+    if (hasHover && hasFocus) return 'hover-focus';
+    if (hasFocus) return 'focus';
+    if (hasHover) return 'hover';
+    return 'manual';
+  }
 
-  private _onFocusOut = (e: FocusEvent) => {
-    if (this.preview || !this.hasTrigger('focus')) return;
-    if (this._target && !this._target.contains(e.relatedTarget as Node)) {
-      this.hide();
+  private detachListeners() {
+    if (this._floating) {
+      this._floating.close();
+      this._floating = null;
     }
-  };
-
-  private _onClick = (e: MouseEvent) => {
-    if (this.preview || !this.hasTrigger('click')) return;
-    e.stopPropagation();
-    this.toggle();
-  };
-
-  private show() {
-    if (this.open) return;
-    window.dispatchEvent(
-      new CustomEvent(Tooltip.CLOSE_OTHERS_EVENT, {
-        detail: { invoker: this },
-      }),
-    );
-    this.open = true;
+    this._target = null;
   }
 
-  private hide() {
-    if (!this.open) return;
-    this.open = false;
-  }
+  _focusTarget?: HTMLElement;
 
-  private toggle() {
-    // eslint-disable-next-line no-unused-expressions
-    this.open ? this.hide() : this.show();
+  set forElement(value: HTMLElement | null) {
+    if (value) {
+      this._focusTarget = value;
+    } else {      
+      this._focusTarget = undefined;
+    }
   }
 
-  private _handleGlobalOpen = (e: any) => {
-    if (e.detail.invoker !== this) this.hide();
-  };
+  __getFocusTarget(): HTMLElement | null {
 
-  private _handleDocumentClick = (e: MouseEvent) => {
-    const path = e.composedPath();
-    if (this._target && !path.includes(this._target)) {
-      this.hide();
+    if (this._focusTarget) {
+      return this._focusTarget;
     }
-  };
 
-  private detachListeners() {
-    if (!this._target) return;
-    this._target.removeEventListener('mouseenter', this._onMouseEnter);
-    this._target.removeEventListener('mouseleave', this._onMouseLeave);
-    this._target.removeEventListener('focusin', this._onFocusIn);
-    this._target.removeEventListener('focusout', this._onFocusOut);
-    this._target.removeEventListener('click', this._onClick);
-    this._target = null;
+    const focusTarget = document.getElementById(this.for);
+     if (focusTarget) {
+      return focusTarget
+     }
+
+     return this.parentElement;
   }
 
   private attachListeners() {
-    this.detachListeners(); // Cleanup old target if it exists
+    this.detachListeners();
 
     // Resolve target: ID-based lookup or fallback to parent
     const root = this.getRootNode() as ShadowRoot | Document;
@@ -144,27 +101,28 @@ export class Tooltip extends LitElement {
 
     if (!this._target) return;
 
-    this._target.addEventListener('mouseenter', this._onMouseEnter);
-    this._target.addEventListener('mouseleave', this._onMouseLeave);
-    this._target.addEventListener('focusin', this._onFocusIn);
-    this._target.addEventListener('focusout', this._onFocusOut);
-    this._target.addEventListener('click', this._onClick);
+    this._floating = new FloatingController(this, {
+      placement: 'top',
+      strategy: 'fixed',
+      offset: 0,
+      trigger: this.resolveTrigger(),
+      closeOnClickOutside: true,
+      onOpenChange: (isOpen) => {
+        if (this.open === isOpen) return;
+        this.open = isOpen;
+      },
+    });
+
+    this._floating.setElements(this._target, this);
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.attachListeners();
-    window.addEventListener(Tooltip.CLOSE_OTHERS_EVENT, this._handleGlobalOpen);
-    window.addEventListener('click', this._handleDocumentClick);
   }
 
   disconnectedCallback() {
     this.detachListeners();
-    window.removeEventListener(
-      Tooltip.CLOSE_OTHERS_EVENT,
-      this._handleGlobalOpen,
-    );
-    window.removeEventListener('click', this._handleDocumentClick);
     super.disconnectedCallback();
   }
 
@@ -174,12 +132,22 @@ export class Tooltip extends LitElement {
       this.attachListeners();
     }
 
-    if (changedProps.has('open') && this.open && this._target) {
-      this._popover.updatePosition(this._target, this.floatingEl);
+    if (changedProps.has('trigger') || changedProps.has('preview')) {
+      this.attachListeners();
     }
-  }
 
-  private _hideTimeout?: number;
+    if (this._floating && this._target) {
+      this._floating.setElements(this._target, this);
+
+      if (changedProps.has('open') && this.open && !this._floating.isOpen) {
+        this._floating.open();
+      }
+
+      if (changedProps.has('open') && !this.open && this._floating.isOpen) {
+        this._floating.close();
+      }
+    }
+  }
 
   render() {
     return html` <div
@@ -190,8 +158,6 @@ export class Tooltip extends LitElement {
       })}
       id="tooltip"
       role="tooltip"
-      @mouseenter=${this._onMouseEnter}
-      @mouseleave=${this._onMouseLeave}
       aria-hidden=${!this.open}
       aria-labelledby="tooltip-labelledby"
     >

package/src/url-field/index.ts

@@ -0,0 +1 @@
+export { UrlField } from './url-field.js';

package/src/url-field/url-field.scss

@@ -0,0 +1,50 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.url-input {
+  flex: 1;
+  width: 100%;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  cursor: inherit;
+  font: inherit;
+  color: inherit;
+}
+
+.url-display {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.url-link {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.url-placeholder {
+  color: var(--color-on-surface-variant);
+  opacity: 0.6;
+}
+
+.edit-button {
+  --button-container-shape: var(--shape-corner-full);
+}