@redvars/peacock 3.4.0 → 3.5.1

package/src/search/search.ts

@@ -0,0 +1,244 @@
+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;
+    // Prevent the native input event from escaping in addition to our API event.
+    event.stopPropagation();
+    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;
+    // Prevent the native change event from escaping in addition to our API event.
+    event.stopPropagation();
+    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/sidebar-menu/demo/index.html

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
+  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
+  <style>
+    body {
+      background: #fafafa;
+      padding: 2rem;
+      font-family: 'Noto Sans', sans-serif;
+    }
+    h2 {
+      margin-top: 2rem;
+      margin-bottom: 0.5rem;
+    }
+  </style>
+</head>
+<body>
+
+<h2>Basic Sidebar Menu</h2>
+<wc-sidebar-menu>
+  <wc-sidebar-sub-menu label="Documents" icon="folder" expanded>
+    <wc-sidebar-sub-menu label="Work" icon="folder" expanded>
+      <wc-sidebar-menu-item label="Project A" icon="description"></wc-sidebar-menu-item>
+      <wc-sidebar-menu-item label="Project B" icon="description"></wc-sidebar-menu-item>
+    </wc-sidebar-sub-menu>
+    <wc-sidebar-menu-item label="Personal" icon="folder"></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+  <wc-sidebar-sub-menu label="Pictures" icon="image" expanded>
+    <wc-sidebar-menu-item label="Vacation 2024" icon="image"></wc-sidebar-menu-item>
+    <wc-sidebar-menu-item label="Family" icon="image"></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+</wc-sidebar-menu>
+
+<h2>Sidebar Menu without icons</h2>
+<wc-sidebar-menu>
+  <wc-sidebar-sub-menu label="Category 1" expanded>
+    <wc-sidebar-menu-item label="Subcategory 1.1"></wc-sidebar-menu-item>
+    <wc-sidebar-menu-item label="Subcategory 1.2"></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+  <wc-sidebar-menu-item label="Category 2"></wc-sidebar-menu-item>
+</wc-sidebar-menu>
+
+<h2>Disabled items</h2>
+<wc-sidebar-menu>
+  <wc-sidebar-sub-menu label="Enabled" expanded>
+    <wc-sidebar-menu-item label="Child 1"></wc-sidebar-menu-item>
+    <wc-sidebar-menu-item label="Child 2" disabled></wc-sidebar-menu-item>
+  </wc-sidebar-sub-menu>
+  <wc-sidebar-menu-item label="Disabled" disabled></wc-sidebar-menu-item>
+</wc-sidebar-menu>
+
+<script type='module'>
+  import '/dist/index.es2017.js';
+
+  const menu = document.querySelector('wc-sidebar-menu');
+  if (menu) {
+    menu.addEventListener('sidebar-menu:change', (e) => {
+      console.log('Selected item:', e.detail);
+    });
+  }
+</script>
+
+</body>
+</html>

package/src/sidebar-menu/index.ts

@@ -0,0 +1,3 @@
+export { SidebarMenuItem } from './sidebar-menu-item.js';
+export { SidebarSubMenu } from './sidebar-sub-menu.js';
+export { SidebarMenu } from './sidebar-menu.js';

package/src/sidebar-menu/sidebar-menu-item.scss

@@ -0,0 +1,102 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+
+  // M3 sidebar menu item sizing
+  --sidebar-menu-item-height: 3rem;
+  --sidebar-menu-item-icon-size: 1.25rem;
+  --sidebar-menu-item-border-radius: var(--global-shape-corner-full, 9999px);
+
+  // M3 color tokens
+  --sidebar-menu-item-label-color: var(--color-on-surface);
+  --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
+  --sidebar-menu-item-selected-background: var(--color-secondary-container);
+  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-focus-ring-color: var(--color-primary);
+
+  // M3 animation timing
+  --sidebar-menu-item-transition-duration: 200ms;
+  --sidebar-menu-item-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-menu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: var(--sidebar-menu-item-height);
+  border-radius: var(--sidebar-menu-item-border-radius);
+  color: var(--_label-color);
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  outline: none;
+
+  --_container-color: transparent;
+  --_container-opacity: 1;
+  --_label-color: var(--sidebar-menu-item-label-color);
+
+  @include mixin.get-typography(label-large);
+
+  &.selected {
+    --_container-color: var(--sidebar-menu-item-selected-background);
+    --_label-color: var(--sidebar-menu-item-selected-color);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    .ripple {
+      display: none;
+    }
+  }
+}
+
+.sidebar-menu-item-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 1;
+  min-height: var(--sidebar-menu-item-height);
+  padding-inline: 0.75rem;
+  color: inherit;
+  z-index: 1;
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.focus-ring {
+  z-index: 2;
+  --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
+  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
+}
+
+.ripple {
+  --ripple-pressed-color: var(--color-on-surface);
+  border-radius: inherit;
+}
+
+.sidebar-menu-item.selected .ripple {
+  --ripple-pressed-color: var(--sidebar-menu-item-selected-color);
+}
+
+.sidebar-menu-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+