@redvars/peacock 3.3.2 → 3.4.0

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

package/src/select/option.ts

@@ -0,0 +1,109 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import type { MenuItem } from '../menu/menu-item/menu-item.js';
+
+/**
+ * @label Select Option
+ * @tag wc-option
+ * @rawTag option
+ * @parentRawTag select
+ *
+ * @summary A declarative option element for use inside wc-select.
+ *
+ * @example
+ * ```html
+ * <wc-select label="Fruit">
+ *   <wc-option value="apple">Apple</wc-option>
+ *   <wc-option value="banana">Banana</wc-option>
+ * </wc-select>
+ * ```
+ */
+export class SelectOptionElement extends LitElement {
+  static override styles = [
+    css`
+      :host {
+        display: contents;
+      }
+      :host([filtered]) {
+        display: none;
+      }
+    `,
+  ];
+
+  /**
+   * The option's submitted value.
+   */
+  @property({ type: String, reflect: true })
+  value: string = '';
+
+  /**
+   * Optional Material Symbol icon name shown before the label.
+   */
+  @property({ type: String, reflect: true })
+  icon: string = '';
+
+  /**
+   * Disables the option so it cannot be selected.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  // ── Managed by wc-select ──────────────────────────────────────────────────
+
+  /** Reflects whether this option is currently selected. Set by wc-select. */
+  @property({ type: Boolean, reflect: true })
+  selected: boolean = false;
+
+  /**
+   * When true the menu stays open after selection (used for multi-select).
+   * Set by wc-select.
+   */
+  @property({ type: Boolean, attribute: 'keep-open' })
+  keepOpen: boolean = false;
+
+  /**
+   * When true the option is hidden and excluded from keyboard navigation
+   * because it does not match the current typeahead search query.
+   * Set by wc-select.
+   */
+  @property({ type: Boolean, reflect: true })
+  filtered: boolean = false;
+
+  @query('wc-menu-item')
+  private readonly _menuItemEl?: HTMLElement;
+
+  /**
+   * Returns the inner `wc-menu-item` element.
+   * `wc-menu` discovers this via its `items` getter which checks `el.item`
+   * as a `MenuItem` proxy, so keyboard navigation and activation work
+   * without `wc-option` extending `MenuItem` directly.
+   */
+  get item(): MenuItem | null {
+    const el = this._menuItemEl;
+    // Narrow to MenuItem — the shadow DOM only ever contains a wc-menu-item
+    // (a MenuItem subclass), so this cast is safe by construction.
+    return el != null ? (el as unknown as MenuItem) : null;
+  }
+
+  override render() {
+    return html`
+      <wc-menu-item
+        value=${this.value}
+        ?disabled=${this.disabled || this.filtered}
+        ?selected=${this.selected}
+        ?keep-open=${this.keepOpen}
+      >
+        ${this.icon
+          ? html`<wc-icon name=${this.icon} slot="leading-icon"></wc-icon>`
+          : nothing}
+        <slot></slot>
+        ${this.selected && this.keepOpen
+          ? html`<wc-icon
+              name="check"
+              slot="trailing-supporting-text"
+            ></wc-icon>`
+          : nothing}
+      </wc-menu-item>
+    `;
+  }
+}

package/src/select/select.scss

@@ -0,0 +1,120 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* Make the field wrapper behave as a select (pointer cursor) */
+.select-field {
+  cursor: pointer;
+}
+
+.select-trigger {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-height: 1.5rem;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  min-width: 0;
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.display-value {
+  @include mixin.get-typography(body-large);
+  color: var(--color-on-surface);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.placeholder {
+  @include mixin.get-typography(body-large);
+  color: var(--color-on-surface-variant);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Typeahead search input */
+.search-input {
+  flex: 1;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  margin: 0;
+  padding: 0;
+  @include mixin.get-typography(body-large);
+  color: var(--color-on-surface);
+  cursor: pointer;
+
+  &::placeholder {
+    color: var(--color-on-surface-variant);
+  }
+
+  &:focus {
+    cursor: text;
+  }
+}
+
+/* Field end slot wrapper */
+.field-end-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-050);
+}
+
+/* Dropdown chevron icon */
+.dropdown-icon {
+  --icon-size: 1.5rem;
+  --icon-color: var(--color-on-surface-variant);
+  transition: transform 200ms ease;
+  flex-shrink: 0;
+
+  &.dropdown-icon--open {
+    transform: rotate(180deg);
+  }
+}
+
+/* Clear button */
+.clear-btn {
+  --button-container-shape: var(--shape-corner-full);
+}
+
+/* Multi-select chips area — single scrollable row, no vertical growth */
+.chips-container {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+  gap: var(--spacing-050);
+  padding-block: var(--spacing-050);
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Disabled state */
+:host([disabled]) .select-trigger,
+:host([disabled]) .select-field {
+  cursor: not-allowed;
+}
+
+/* Readonly state */
+:host([readonly]) .select-trigger,
+:host([readonly]) .select-field {
+  cursor: default;
+}