@redvars/peacock 3.4.0 → 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/select/option.ts

@@ -96,7 +96,7 @@ export class SelectOptionElement extends LitElement {
         ${this.icon
           ? html`<wc-icon name=${this.icon} slot="leading-icon"></wc-icon>`
           : nothing}
-        <slot></slot>
+        <slot>${this.value === '' ? 'None' : ''}</slot>
         ${this.selected && this.keepOpen
           ? html`<wc-icon
               name="check"

package/src/select/select.scss

@@ -73,6 +73,11 @@
   gap: var(--spacing-050);
 }
 
+.select-empty-state {
+  display: block;
+  inline-size: min(22rem, 100%);
+}
+
 /* Dropdown chevron icon */
 .dropdown-icon {
   --icon-size: 1.5rem;

package/src/select/select.ts

@@ -38,6 +38,8 @@ export interface SelectOption {
 export class Select extends BaseInput {
   static styles = [styles];
 
+  private readonly _menuId = `wc-select-menu-${Math.random().toString(36).slice(2, 9)}`;
+
   /**
    * Array of options to display in the dropdown.
    * Setting this property creates matching `<wc-option>` children automatically.
@@ -77,12 +79,6 @@ export class Select extends BaseInput {
   @property({ type: String })
   label: string = '';
 
-  /**
-    * Show a clear button in single-select mode when a value is selected.
-   */
-  @property({ type: Boolean })
-  clearable: boolean = false;
-
   /**
    * Visual variant of the field.
    */
@@ -160,7 +156,7 @@ export class Select extends BaseInput {
       const el = new SelectOptionElement();
       el.value = opt.value;
       if (opt.icon) el.icon = opt.icon;
-      el.textContent = opt.label;
+      el.textContent = opt.label || (opt.value === '' ? 'None' : '');
       el.dataset.generated = '';
       this.appendChild(el);
     }
@@ -184,13 +180,13 @@ export class Select extends BaseInput {
         const q = this._searchQuery.toLowerCase();
         const label = opt.textContent?.trim() ?? '';
         opt.filtered = !label.toLowerCase().includes(q);
-        if (!opt.filtered) visibleCount++;
+        if (!opt.filtered) visibleCount += 1;
       } else {
         opt.filtered = false;
-        visibleCount++;
+        visibleCount += 1;
       }
     }
-    this._noOptionsVisible = optEls.length > 0 && visibleCount === 0;
+    this._noOptionsVisible = visibleCount === 0;
   }
 
   // ── Helpers ────────────────────────────────────────────────────────────────
@@ -204,16 +200,25 @@ export class Select extends BaseInput {
   }
 
   private _isSelected(value: string): boolean {
+    if (!this.multiple) {
+      return this.value === value;
+    }
     return this._selectedValues.includes(value);
   }
 
   /** Returns the display label for a given option value. */
   private _getLabelForValue(val: string): string {
     for (const opt of this.querySelectorAll<SelectOptionElement>('wc-option')) {
-      if (opt.value === val) return opt.textContent?.trim() ?? val;
+      if (opt.value === val) {
+        const label = opt.textContent?.trim();
+        if (label) return label;
+        return val === '' ? 'None' : val;
+      }
     }
     // Fallback to options array (before wc-option children are created)
-    return this.options.find(o => o.value === val)?.label ?? val;
+    const programmaticLabel = this.options.find(o => o.value === val)?.label;
+    if (programmaticLabel) return programmaticLabel;
+    return val === '' ? 'None' : val;
   }
 
   private get _displayLabel(): string {
@@ -233,9 +238,16 @@ export class Select extends BaseInput {
     if (this.disabled || this.readonly) return;
     this._open = true;
     this._focused = true;
+    this._triggerEl?.focus();
     const menu = this._menu;
     if (menu && this._triggerEl) {
       menu.anchorElement = this._triggerEl;
+      const triggerWidth = this._triggerEl.getBoundingClientRect().width;
+      if (triggerWidth < 240) {
+        menu.style.setProperty('--menu-width', '240px');
+      } else {
+        menu.style.setProperty('--menu-width', `${Math.ceil(triggerWidth)}px`);
+      }
       menu.show();
     }
     if (this.search) {
@@ -261,6 +273,7 @@ export class Select extends BaseInput {
   // ── Event handlers ─────────────────────────────────────────────────────────
 
   private _handleTriggerClick(event: MouseEvent) {
+    event.stopPropagation();
     // Ignore clicks that originated inside the search input — those should not
     // toggle the menu (the input needs to stay open so the user can type).
     if (event.target instanceof HTMLInputElement) {
@@ -273,6 +286,29 @@ export class Select extends BaseInput {
     }
   }
 
+  private _handleFieldClick(event: MouseEvent) {
+    const eventPath = event.composedPath();
+
+    if (
+      eventPath.includes(this._triggerEl as EventTarget) ||
+      eventPath.some(
+        target =>
+          target instanceof HTMLInputElement ||
+          (target instanceof HTMLElement &&
+            (target.closest('.clear-btn') != null ||
+              target.matches('wc-icon-button'))),
+      )
+    ) {
+      return;
+    }
+
+    if (this._open) {
+      this._closeMenu();
+    } else {
+      this._openMenu();
+    }
+  }
+
   private _handleTriggerKeyDown(event: KeyboardEvent) {
     // When the typeahead search input is active, let the input handle its own
     // keys (Space, Enter, etc.). Only intercept Escape to close the menu.
@@ -312,9 +348,11 @@ export class Select extends BaseInput {
     if (!item) return;
 
     const val = item.value;
-    if (!val) return;
+
+    if (val === undefined) return;
 
     if (this.multiple) {
+      if (val === '') return;
       const values = this._selectedValues;
       const idx = values.indexOf(val);
       if (idx >= 0) {
@@ -354,12 +392,6 @@ export class Select extends BaseInput {
     }
   }
 
-  private _handleClear(event: MouseEvent) {
-    event.stopPropagation();
-    this.value = '';
-    this._dispatchChange();
-  }
-
   private _handleChipDismiss(event: CustomEvent, chipValue: string) {
     event.stopPropagation();
     const values = this._selectedValues.filter(v => v !== chipValue);
@@ -367,6 +399,21 @@ export class Select extends BaseInput {
     this._dispatchChange();
   }
 
+  private _renderEmptyState() {
+    const hasSearchQuery = this._searchQuery.trim().length > 0;
+
+    return html`
+      <wc-empty-state
+        class="select-empty-state content-center"
+        illustration="no-document"
+        headline=${hasSearchQuery ? 'No results found' : 'No options available'}
+        description=${hasSearchQuery
+          ? 'Try a different search term.'
+          : 'There is nothing to select right now.'}
+      ></wc-empty-state>
+    `;
+  }
+
   // ── Render helpers ─────────────────────────────────────────────────────────
 
   private _renderTriggerContent() {
@@ -406,22 +453,7 @@ export class Select extends BaseInput {
   }
 
   private _renderFieldEnd() {
-    const showClear =
-      this.clearable &&
-      !this.multiple &&
-      !!this.value &&
-      !this.disabled &&
-      !this.readonly;
     return html`
-      ${showClear
-        ? html`<wc-icon-button
-            class="clear-btn"
-            variant="text"
-            size="sm"
-            name="close"
-            @click=${this._handleClear}
-          ></wc-icon-button>`
-        : nothing}
       <wc-icon
         class=${classMap({
           'dropdown-icon': true,
@@ -450,11 +482,14 @@ export class Select extends BaseInput {
         ?focused=${this._focused}
         .host=${this}
         class="select-field"
+        @click=${this._handleFieldClick}
       >
         <div
           class="select-trigger"
           tabindex=${this.disabled ? -1 : 0}
           role="combobox"
+          aria-label=${this.label || this.placeholder || 'Select option'}
+          aria-controls=${this._menuId}
           aria-expanded=${String(this._open)}
           aria-haspopup="listbox"
           @click=${this._handleTriggerClick}
@@ -469,6 +504,7 @@ export class Select extends BaseInput {
       </wc-field>
 
       <wc-menu
+        id=${this._menuId}
         placement="bottom-start"
         aria-label=${this.label || 'Options'}
         @closed=${this._handleMenuClosed}
@@ -476,9 +512,7 @@ export class Select extends BaseInput {
           this._handleMenuItemActivate(e)}
       >
         <slot></slot>
-        ${this._noOptionsVisible
-          ? html`<wc-menu-item disabled>No options</wc-menu-item>`
-          : nothing}
+        ${this._noOptionsVisible ? this._renderEmptyState() : nothing}
       </wc-menu>
     `;
   }

package/src/slider/slider.scss

@@ -15,6 +15,17 @@
   touch-action: none; // Prevent scrolling while dragging
 }
 
+.slider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-100, 0.5rem);
+  width: 100%;
+}
+
+.slider.with-value .slider-container {
+  flex: 1;
+}
+
 .slider-container {
   position: relative;
   display: flex;
@@ -29,6 +40,14 @@
   }
 }
 
+.value-display {
+  min-width: 2.25rem;
+  text-align: end;
+  color: var(--color-on-surface-variant);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
 .track {
   position: absolute;
   width: 100%;

package/src/slider/slider.ts

@@ -51,9 +51,15 @@ export class Slider extends LitElement {
    */
   @property({ type: Boolean }) labeled = true;
 
+  /**
+   * Whether to show the current value beside the slider.
+   */
+  @property({ type: Boolean, attribute: 'show-value' }) showValue = false;
+
   @state() private isDragging = false;
 
   @query('.slider-container') private container!: HTMLElement;
+  
   @query('.thumb') private thumbElement!: HTMLElement;
 
   private handleInput(event: MouseEvent | TouchEvent) {
@@ -150,28 +156,33 @@ export class Slider extends LitElement {
     const percentage = ((this.value - this.min) / (this.max - this.min)) * 100;
 
     return html`
-      <div 
-        class="slider-container ${this.disabled ? 'disabled' : ''}"
-        @mousedown=${this.onMouseDown}
-        @touchstart=${this.onMouseDown}
-      >
-        <div class="track">
-          <div class="track-active" style=${styleMap({ width: `${percentage}%` })}></div>
-        </div>
-
+      <div class="slider ${this.showValue ? 'with-value' : ''}">
         <div 
-          class="thumb" 
-          role="slider"
-          tabindex="${this.disabled ? -1 : 0}"
-          aria-valuemin=${this.min}
-          aria-valuemax=${this.max}
-          aria-valuenow=${this.value}
-          aria-disabled=${this.disabled}
-          style=${styleMap({ left: `calc(${percentage}% - var(--thumb-half))` })}
-          @keydown=${this.handleKeyDown}
+          class="slider-container ${this.disabled ? 'disabled' : ''}"
+          @mousedown=${this.onMouseDown}
+          @touchstart=${this.onMouseDown}
         >
-          ${this.labeled ? html`<div class="value-label">${this.value}</div>` : ''}
+          <div class="track">
+            <div class="track-active" style=${styleMap({ width: `${percentage}%` })}></div>
+          </div>
+
+          <div 
+            class="thumb" 
+            role="slider"
+            aria-label="Slider"
+            tabindex="${this.disabled ? -1 : 0}"
+            aria-valuemin=${this.min}
+            aria-valuemax=${this.max}
+            aria-valuenow=${this.value}
+            aria-disabled=${this.disabled}
+            style=${styleMap({ left: `calc(${percentage}% - var(--thumb-half))` })}
+            @keydown=${this.handleKeyDown}
+          >
+            ${this.labeled ? html`<div class="value-label">${this.value}</div>` : ''}
+          </div>
         </div>
+
+        ${this.showValue ? html`<output class="value-display" aria-live="polite">${this.value}</output>` : ''}
       </div>
     `;
   }