@redvars/peacock 3.3.3 → 3.5.0

package/src/search/search.ts

@@ -0,0 +1,240 @@
+import { LitElement, html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { live } from 'lit/directives/live.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import styles from './search.scss';
+import colorStyles from './search-colors.scss';
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+
+/**
+ * @label Search
+ * @tag wc-search
+ * @rawTag search
+ *
+ * @summary A Material 3 search bar for filtering and finding content.
+ * @overview
+ * <p>The search component provides a text input designed for search interactions.
+ * It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.</p>
+ *
+ * @cssprop --search-container-shape - Border radius of the search bar. Defaults to full (pill shape).
+ * @cssprop --search-container-color - Background color of the search container.
+ * @cssprop --search-input-text-color - Color of the input text.
+ * @cssprop --search-placeholder-color - Color of the placeholder text.
+ * @cssprop --search-icon-color - Color of the leading and trailing icons.
+ * @cssprop --search-outline-color - Border color for the outlined variant.
+ * @cssprop --search-outline-width - Border width for the outlined variant.
+ *
+ * @fires {CustomEvent} input - Dispatched when the search value changes.
+ * @fires {CustomEvent} change - Dispatched when the search input loses focus or Enter is pressed.
+ * @fires {CustomEvent} clear - Dispatched when the clear button is activated.
+ * @fires {CustomEvent} search - Dispatched when the user submits the search (presses Enter).
+ *
+ * @example
+ * ```html
+ * <wc-search placeholder="Search..."></wc-search>
+ * ```
+ * @tags form
+ */
+@IndividualComponent
+export class Search extends LitElement {
+  static styles = [styles, colorStyles];
+
+  /**
+   * Visual style variant.
+   * Possible values: `"outlined"`, `"filled"`. Defaults to `"filled"`.
+   */
+  @property({ type: String, reflect: true })
+  variant: 'outlined' | 'filled' = 'filled';
+
+  /**
+   * Placeholder text shown when the input is empty.
+   */
+  @property({ type: String })
+  placeholder: string = 'Search';
+
+  /**
+   * Current search value.
+   */
+  @property({ type: String })
+  value: string = '';
+
+  /**
+   * Whether the search bar is disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  /**
+   * Whether a clear button is shown when the input has a value.
+   */
+  @property({ type: Boolean })
+  clearable: boolean = true;
+
+  /**
+   * Size of the search bar.
+   * Possible values: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+   */
+  @property({ type: String, reflect: true })
+  size: 'sm' | 'md' | 'lg' = 'md';
+
+  @state()
+  private focused: boolean = false;
+
+  @state()
+  private leadingSlotHasContent: boolean = false;
+
+  @query('.search-input')
+  private inputElement?: HTMLInputElement;
+
+  override firstUpdated() {
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot[name="leading"]'),
+      hasContent => {
+        this.leadingSlotHasContent = hasContent;
+        this.requestUpdate();
+      },
+    );
+  }
+
+  /** Focuses the internal input element. */
+  override focus() {
+    this.inputElement?.focus();
+  }
+
+  /** Blurs the internal input element. */
+  override blur() {
+    this.inputElement?.blur();
+  }
+
+  private __handleInput(event: InputEvent) {
+    const input = event.target as HTMLInputElement;
+    this.value = input.value;
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private __handleChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    this.value = input.value;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private __handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.dispatchEvent(
+        new CustomEvent('search', {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+    if (event.key === 'Escape') {
+      this.__clearValue();
+    }
+  }
+
+  private __handleFocus() {
+    this.focused = true;
+  }
+
+  private __handleBlur() {
+    this.focused = false;
+  }
+
+  private __clearValue() {
+    this.value = '';
+    this.inputElement?.focus();
+    this.dispatchEvent(
+      new CustomEvent('clear', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    this.dispatchEvent(
+      new CustomEvent('input', {
+        detail: { value: '' },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private __renderClearButton() {
+    if (!this.clearable || !this.value) return nothing;
+
+    return html`
+      <button
+        class="clear-button"
+        aria-label="Clear search"
+        tabindex="-1"
+        @click=${this.__clearValue}
+        ?disabled=${this.disabled}
+      >
+        <wc-icon name="close"></wc-icon>
+      </button>
+    `;
+  }
+
+  private __renderLeadingIcon() {
+    return html`
+      <div class="leading-icon ${this.leadingSlotHasContent ? 'has-slot' : ''}">
+        <slot name="leading">
+          <wc-icon name="search"></wc-icon>
+        </slot>
+      </div>
+    `;
+  }
+
+  override render() {
+    const cssClasses = {
+      search: true,
+      [`variant-${this.variant}`]: true,
+      [`size-${this.size}`]: true,
+      focused: this.focused,
+      disabled: this.disabled,
+      'has-value': !!this.value,
+    };
+
+    return html`
+      <div class=${classMap(cssClasses)} role="search">
+        <div class="background"></div>
+        <div class="outline"></div>
+
+        ${this.__renderLeadingIcon()}
+
+        <input
+          class="search-input"
+          type="search"
+          role="searchbox"
+          .value=${live(this.value)}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          aria-label=${this.placeholder}
+          @input=${this.__handleInput}
+          @change=${this.__handleChange}
+          @keydown=${this.__handleKeydown}
+          @focus=${this.__handleFocus}
+          @blur=${this.__handleBlur}
+        />
+
+        <div class="trailing-actions">
+          ${this.__renderClearButton()}
+          <slot name="trailing"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/segmented-button/index.ts

@@ -0,0 +1,2 @@
+export { SegmentedButton } from './segmented-button.js';
+export { SegmentedButtonGroup } from './segmented-button-group.js';

package/src/segmented-button/segmented-button-group.scss

@@ -0,0 +1,21 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-flex;
+  --_segmented-button-group-shape: var(--shape-corner-full, 9999px);
+}
+
+.segmented-button-group {
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--segmented-button-group-shape, var(--_segmented-button-group-shape));
+  border: 1px solid var(--segmented-button-outline-color, var(--color-outline, #79747e));
+  overflow: hidden;
+  min-width: max-content;
+
+  ::slotted(wc-segmented-button) {
+    flex: 1;
+  }
+}

package/src/segmented-button/segmented-button-group.ts

@@ -0,0 +1,110 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './segmented-button-group.scss';
+import { SegmentedButton } from './segmented-button.js';
+
+/**
+ * @label Segmented Button Group
+ * @tag wc-segmented-button-group
+ * @rawTag segmented-button-group
+ * @summary A container for segmented buttons following Material Design 3.
+ * @overview
+ * <p>Segmented buttons help people select options, switch views, or sort elements. They follow the Material Design 3 specification.</p>
+ * <p>Use <code>multi-select</code> to allow more than one segment to be selected at a time. By default only one segment can be active (single-select).</p>
+ *
+ * @cssprop --segmented-button-group-shape: Border-radius of the group container.
+ *
+ * @fires {CustomEvent} change - Dispatched when the selection changes. Detail contains <code>{ value, values }</code>.
+ *
+ * @example
+ * ```html
+ * <wc-segmented-button-group>
+ *   <wc-segmented-button value="day">Day</wc-segmented-button>
+ *   <wc-segmented-button value="week" selected>Week</wc-segmented-button>
+ *   <wc-segmented-button value="month">Month</wc-segmented-button>
+ * </wc-segmented-button-group>
+ * ```
+ *
+ * @tags controls
+ */
+export class SegmentedButtonGroup extends LitElement {
+  static styles = [styles];
+
+  static SegmentedButton = SegmentedButton;
+
+  /**
+   * When true, multiple segments can be selected simultaneously.
+   * Defaults to single-select mode.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'multi-select' })
+  multiSelect: boolean = false;
+
+  /**
+   * When true, in single-select mode the currently selected segment can be
+   * deselected by clicking it again (allowing an empty selection).
+   * Defaults to `false`.
+   */
+  @property({ type: Boolean, reflect: true })
+  nullable: boolean = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener(
+      'segmented-button--change',
+      this._onSegmentChange as EventListener,
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener(
+      'segmented-button--change',
+      this._onSegmentChange as EventListener,
+    );
+  }
+
+  private _getSegments(): SegmentedButton[] {
+    return Array.from(this.querySelectorAll<SegmentedButton>('wc-segmented-button'));
+  }
+
+  private _onSegmentChange = (ev: CustomEvent) => {
+    ev.stopPropagation();
+    const target = ev.composedPath()[0] as SegmentedButton;
+    const segments = this._getSegments();
+
+    if (this.multiSelect) {
+      target.selected = !target.selected;
+    } else {
+      if (target.selected && this.nullable) {
+        target.selected = false;
+      } else {
+        segments.forEach(seg => {
+          seg.selected = seg === target;
+        });
+      }
+    }
+
+    const selectedValues = segments
+      .filter(s => s.selected)
+      .map(s => s.value || s.textContent?.trim() || '');
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: selectedValues[0] ?? null,
+          values: selectedValues,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
+
+  render() {
+    return html`
+      <div class="segmented-button-group" role="group">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/segmented-button/segmented-button.scss

@@ -0,0 +1,115 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: contents;
+
+  --_segmented-button-height: 2.5rem;
+  --_segmented-button-outline-color: var(--color-outline, #79747e);
+  --_segmented-button-selected-container-color: var(--color-secondary-container, #e8def8);
+  --_segmented-button-selected-label-text-color: var(--color-on-secondary-container, #1d192b);
+  --_segmented-button-unselected-label-text-color: var(--color-on-surface, #1c1b1f);
+  --_segmented-button-disabled-opacity: 0.38;
+  --_segmented-button-state-layer-color: var(--color-on-surface, #1c1b1f);
+  --_segmented-button-selected-state-layer-color: var(--color-on-secondary-container, #1d192b);
+}
+
+.segment {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--segmented-button-height, var(--_segmented-button-height));
+  padding: 0 1.5rem;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+  background: transparent;
+  overflow: hidden;
+  transition:
+    background-color 200ms ease,
+    color 200ms ease;
+
+  .content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    @include mixin.get-typography(label-large);
+    color: var(--segmented-button-unselected-label-text-color, var(--_segmented-button-unselected-label-text-color));
+
+    .check-icon,
+    .leading-icon {
+      --icon-size: 1.125rem;
+      --icon-color: currentColor;
+      flex-shrink: 0;
+    }
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .state-layer {
+    position: absolute;
+    inset: 0;
+    background: var(--_segmented-button-state-layer-color);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 200ms ease;
+  }
+
+  /* right-side divider between segments */
+  .segment-outline {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 1px;
+    height: 100%;
+    background: var(--segmented-button-outline-color, var(--_segmented-button-outline-color));
+    pointer-events: none;
+  }
+
+  &:hover:not(.disabled) .state-layer {
+    opacity: 0.08;
+  }
+
+  &.has-focus:not(.disabled) .state-layer {
+    opacity: 0.12;
+  }
+
+  &.active:not(.disabled) .state-layer {
+    opacity: 0.16;
+  }
+
+  /* Selected state */
+  &.selected {
+    background-color: var(--segmented-button-selected-container-color, var(--_segmented-button-selected-container-color));
+
+    .content {
+      color: var(--segmented-button-selected-label-text-color, var(--_segmented-button-selected-label-text-color));
+    }
+
+    .state-layer {
+      background: var(--_segmented-button-selected-state-layer-color);
+    }
+  }
+
+  /* Disabled state */
+  &.disabled {
+    cursor: not-allowed;
+    opacity: var(--segmented-button-disabled-opacity, var(--_segmented-button-disabled-opacity));
+    pointer-events: none;
+  }
+}
+
+:host(:last-child) .segment-outline {
+  display: none;
+}

package/src/segmented-button/segmented-button.ts

@@ -0,0 +1,175 @@
+import { html, LitElement, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import styles from './segmented-button.scss';
+
+/**
+ * @label Segmented Button
+ * @tag wc-segmented-button
+ * @rawTag segmented-button
+ * @summary An individual segment within a segmented button group.
+ * @parentRawTag segmented-button-group
+ * @overview
+ * <p>Segmented buttons help people select options, switch views, or sort elements. They are used within a <code>wc-segmented-button-group</code>.</p>
+ *
+ * @cssprop --segmented-button-height: Height of the segmented button.
+ * @cssprop --segmented-button-selected-container-color: Background color when the segment is selected.
+ * @cssprop --segmented-button-selected-label-text-color: Text color when the segment is selected.
+ * @cssprop --segmented-button-unselected-label-text-color: Text color when the segment is unselected.
+ * @cssprop --segmented-button-outline-color: Outline / border color.
+ * @cssprop --segmented-button-disabled-opacity: Opacity when the segment is disabled.
+ *
+ * @fires {CustomEvent} segmented-button--change - Dispatched when the selected state changes.
+ *
+ * @example
+ * ```html
+ * <wc-segmented-button-group>
+ *   <wc-segmented-button value="day">Day</wc-segmented-button>
+ *   <wc-segmented-button value="week" selected>Week</wc-segmented-button>
+ *   <wc-segmented-button value="month">Month</wc-segmented-button>
+ * </wc-segmented-button-group>
+ * ```
+ *
+ * @tags controls
+ */
+export class SegmentedButton extends LitElement {
+  static styles = [styles];
+
+  /**
+   * The value associated with this segment.
+   */
+  @property({ type: String, reflect: true })
+  value: string = '';
+
+  /**
+   * Whether this segment is currently selected.
+   */
+  @property({ type: Boolean, reflect: true })
+  selected: boolean = false;
+
+  /**
+   * If true, the user cannot interact with this segment.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  /**
+   * Optional icon name to display (uses wc-icon).
+   */
+  @property({ type: String })
+  icon?: string;
+
+  @state()
+  private hasFocus = false;
+
+  @state()
+  private isActive = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener('mouseup', this._windowMouseUp);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('mouseup', this._windowMouseUp);
+  }
+
+  private _windowMouseUp = () => {
+    if (this.isActive) {
+      this.isActive = false;
+    }
+  };
+
+  private _mouseDownHandler = () => {
+    this.isActive = true;
+  };
+
+  private _keyDownHandler = (evt: KeyboardEvent) => {
+    if (evt.key === ' ' || evt.key === 'Enter') {
+      evt.preventDefault();
+      this.isActive = true;
+      this._toggle(evt);
+    }
+  };
+
+  private _clickHandler = (ev: MouseEvent) => {
+    this._toggle(ev);
+  };
+
+  private _toggle(ev: MouseEvent | KeyboardEvent) {
+    if (this.disabled) return;
+    this.dispatchEvent(
+      new CustomEvent('segmented-button--change', {
+        detail: {
+          value: this.value || this.textContent?.trim(),
+          selected: !this.selected,
+          originalEvent: ev,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _blurHandler = (ev: FocusEvent) => {
+    this.hasFocus = false;
+    this.dispatchEvent(
+      new CustomEvent('blur', { detail: ev, bubbles: true, composed: true }),
+    );
+  };
+
+  private _focusHandler = (ev: FocusEvent) => {
+    this.hasFocus = true;
+    this.dispatchEvent(
+      new CustomEvent('focus', { detail: ev, bubbles: true, composed: true }),
+    );
+  };
+
+  /** Sets focus on the segment. */
+  focus() {
+    this.renderRoot.querySelector<HTMLElement>('.segment')?.focus();
+  }
+
+  /** Removes focus from the segment. */
+  blur() {
+    this.renderRoot.querySelector<HTMLElement>('.segment')?.blur();
+  }
+
+  render() {
+    const cssClasses = {
+      segment: true,
+      selected: this.selected,
+      disabled: this.disabled,
+      'has-focus': this.hasFocus,
+      active: this.isActive,
+      'has-icon': !!this.icon,
+    };
+
+    return html`
+      <div
+        class=${classMap(cssClasses)}
+        role="button"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-pressed=${this.selected}
+        aria-disabled=${this.disabled}
+        @click=${this._clickHandler}
+        @mousedown=${this._mouseDownHandler}
+        @keydown=${this._keyDownHandler}
+        @blur=${this._blurHandler}
+        @focus=${this._focusHandler}
+      >
+        <div class="state-layer"></div>
+        <div class="content">
+          ${this.selected
+            ? html`<wc-icon class="check-icon" name="check"></wc-icon>`
+            : this.icon
+              ? html`<wc-icon class="leading-icon" name=${this.icon}></wc-icon>`
+              : nothing}
+          <span class="label"><slot></slot></span>
+        </div>
+        <div class="segment-outline"></div>
+      </div>
+    `;
+  }
+}

package/src/select/index.ts

@@ -0,0 +1,3 @@
+export { Select } from './select.js';
+export type { SelectOption } from './select.js';
+export { SelectOptionElement } from './option.js';