@redvars/peacock 3.3.2 → 3.4.0

package/src/radio/radio.scss

@@ -0,0 +1,181 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-block;
+  --radio-size: 20px;
+  --radio-dot-size: 12px;
+  --radio-selected-color: var(--color-primary);
+  --radio-unselected-color: var(--color-on-surface-variant);
+  --radio-state-layer-size: 40px;
+  --radio-disabled-opacity: 0.38;
+}
+
+.radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  gap: 8px;
+
+  @include mixin.get-typography('body-medium');
+
+  .input-native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  .container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--radio-state-layer-size);
+    height: var(--radio-state-layer-size);
+    cursor: inherit;
+    outline: none;
+    flex-shrink: 0;
+  }
+
+  .state-layer {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity var(--duration-short2) var(--easing-standard);
+  }
+
+  .outer-circle {
+    position: absolute;
+    width: var(--radio-size);
+    height: var(--radio-size);
+    border: 2px solid var(--radio-unselected-color);
+    border-radius: 50%;
+    box-sizing: border-box;
+    transition: border-color var(--duration-short2) var(--easing-standard);
+  }
+
+  .inner-circle {
+    position: absolute;
+    width: var(--radio-dot-size);
+    height: var(--radio-dot-size);
+    background: var(--radio-selected-color);
+    border-radius: 50%;
+    opacity: 0;
+    transform: scale(0.5);
+    transition:
+      transform var(--duration-short2) var(--easing-standard),
+      opacity var(--duration-short2) var(--easing-standard);
+  }
+
+  .label {
+    color: var(--color-on-surface);
+    cursor: inherit;
+  }
+
+  // Hover state
+  &:hover:not(.disabled):not(.readonly) {
+    .state-layer {
+      opacity: 0.08;
+      background: var(--color-on-surface);
+    }
+
+    &.state-checked .state-layer {
+      background: var(--radio-selected-color);
+    }
+  }
+
+  // Focus state
+  &.has-focus:not(.active):not(.disabled):not(.readonly) {
+    .state-layer {
+      opacity: 0.12;
+      background: var(--color-on-surface);
+    }
+
+    .container {
+      outline: 3px solid var(--color-primary);
+      outline-offset: 2px;
+      border-radius: 50%;
+    }
+
+    &.state-checked .state-layer {
+      background: var(--radio-selected-color);
+    }
+  }
+
+  // Active/pressed state
+  &.active:not(.disabled):not(.readonly) {
+    .state-layer {
+      opacity: 0.12;
+      background: var(--color-on-surface);
+    }
+
+    &.state-checked .state-layer {
+      background: var(--radio-selected-color);
+    }
+  }
+}
+
+// Checked state
+.radio.state-checked {
+  .outer-circle {
+    border-color: var(--radio-selected-color);
+  }
+
+  .inner-circle {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Readonly state
+.radio.readonly {
+  cursor: default;
+
+  .state-layer {
+    display: none;
+  }
+
+  .outer-circle {
+    border-color: var(--color-on-surface-variant);
+  }
+
+  &.state-checked {
+    .inner-circle {
+      background: var(--color-on-surface-variant);
+    }
+  }
+}
+
+// Disabled state
+.radio.disabled {
+  cursor: not-allowed;
+  opacity: var(--radio-disabled-opacity);
+
+  .state-layer {
+    display: none;
+  }
+
+  .label {
+    color: var(--color-on-surface);
+  }
+
+  .outer-circle {
+    border-color: var(--color-on-surface);
+  }
+
+  &.state-checked {
+    .inner-circle {
+      background: var(--color-on-surface);
+    }
+  }
+}

package/src/radio/radio.ts

@@ -0,0 +1,362 @@
+import { html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { spread } from '../spread.js';
+import styles from './radio.scss';
+
+/**
+ * @label Radio
+ * @tag wc-radio
+ * @rawTag radio
+ * @summary Allows selection of a single option from a set.
+ * @overview
+ * <p>Radio buttons follow the Material Design 3 specifications with clear focus, hover, and selected states.</p>
+ *
+ * @cssprop --radio-size: Size of the outer radio circle.
+ * @cssprop --radio-dot-size: Size of the inner dot when selected.
+ * @cssprop --radio-selected-color: Color of the radio when selected.
+ * @cssprop --radio-unselected-color: Color of the radio outline when unselected.
+ * @cssprop --radio-state-layer-size: Size of the state layer for touch target.
+ * @cssprop --radio-disabled-opacity: Opacity applied when the radio is disabled.
+ *
+ * @fires {CustomEvent} change - Dispatched when the radio selection changes.
+ * @fires {CustomEvent} blur - Dispatched when the radio loses focus.
+ * @fires {CustomEvent} focus - Dispatched when the radio receives focus.
+ *
+ * @example
+ * ```html
+ * <wc-radio name="fruits" value="apple" label="Apple"></wc-radio>
+ * ```
+ * @tags input, form
+ */
+type RadioDirection = 1 | -1;
+
+export class Radio extends LitElement {
+  private static readonly DIRECTION_NEXT: RadioDirection = 1;
+  private static readonly DIRECTION_PREVIOUS: RadioDirection = -1;
+
+  static styles = [styles];
+
+  /**
+   * The input field name for grouping radios.
+   */
+  @property({ type: String })
+  name: string = '';
+
+  /**
+   * The submitted value when this radio is selected.
+   */
+  @property({ type: String })
+  value: string = '';
+
+  /**
+   * The radio label.
+   */
+  @property({ type: String })
+  label: string = '';
+
+  /**
+   * Whether the radio is selected.
+   */
+  @property({ type: Boolean, reflect: true })
+  checked: boolean = false;
+
+  /**
+   * If true, required icon is shown. Defaults to `false`.
+   */
+  @property({ type: Boolean, reflect: true })
+  required: boolean = false;
+
+  /**
+   * If true, the radio is readonly. Defaults to `false`.
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly: boolean = false;
+
+  /**
+   * If true, the user cannot interact with the radio. Defaults to `false`.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  /**
+   * Configuration object for aria attributes.
+   */
+  @property({ type: Object })
+  configAria: Record<string, string> = {};
+
+  @state()
+  private hasFocus = false;
+
+  @state()
+  private isActive = false;
+
+  @state()
+  private slotHasContent = false;
+
+  @state()
+  private isGroupFocusTarget = false;
+
+  @query('.container')
+  private containerElement?: HTMLElement;
+
+  @query('.input-native')
+  private nativeElement?: HTMLInputElement;
+
+  private tabindex?: number;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleInitialAttributes();
+    window.addEventListener('mouseup', this.windowMouseUp);
+    window.addEventListener('keyup', this.windowKeyUp);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('mouseup', this.windowMouseUp);
+    window.removeEventListener('keyup', this.windowKeyUp);
+  }
+
+  firstUpdated() {
+    this.slotHasContent = this.hasChildNodes() || !!this.label;
+    this.updateGroupFocusTarget();
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    if (changedProps.has('label')) {
+      this.slotHasContent = this.hasChildNodes() || !!this.label;
+    }
+
+    if (changedProps.has('checked') && this.checked) {
+      this.uncheckSiblings();
+    }
+
+    if (changedProps.has('checked') || changedProps.has('name')) {
+      this.updateGroupFocusTarget();
+    }
+  }
+
+  private handleInitialAttributes() {
+    if (this.hasAttribute('tabindex')) {
+      const attrValue = this.getAttribute('tabindex');
+      if (attrValue !== null) {
+        this.tabindex = parseInt(attrValue, 10);
+      }
+      this.removeAttribute('tabindex');
+    }
+
+    Array.from(this.attributes).forEach(attr => {
+      if (attr.name.startsWith('aria-')) {
+        this.configAria[attr.name] = attr.value;
+        this.removeAttribute(attr.name);
+      }
+    });
+  }
+
+  private windowMouseUp = () => {
+    if (this.isActive) {
+      this.isActive = false;
+    }
+  };
+
+  private windowKeyUp = (evt: KeyboardEvent) => {
+    if (this.isActive && evt.key === ' ') {
+      evt.preventDefault();
+      this.isActive = false;
+    }
+  };
+
+  private mouseDownHandler = () => {
+    this.isActive = true;
+  };
+
+  private keyDownHandler = (evt: KeyboardEvent) => {
+    if (evt.key === ' ') {
+      evt.preventDefault();
+      this.isActive = true;
+      this.selectRadio(evt);
+    } else if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {
+      evt.preventDefault();
+      this.navigateGroup(Radio.DIRECTION_NEXT);
+    } else if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {
+      evt.preventDefault();
+      this.navigateGroup(Radio.DIRECTION_PREVIOUS);
+    }
+  };
+
+  private clickHandler = (ev: MouseEvent | KeyboardEvent) => {
+    this.selectRadio(ev);
+  };
+
+  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,
+      }),
+    );
+  };
+
+  private selectRadio(ev?: Event) {
+    if (this.disabled || this.readonly) return;
+
+    if (!this.checked) {
+      this.checked = true;
+      this.uncheckSiblings();
+      this.dispatchChange(ev);
+    }
+
+    this.containerElement?.focus();
+  }
+
+  private dispatchChange(ev?: Event) {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: { value: this.value, checked: this.checked, originalEvent: ev },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private uncheckSiblings() {
+    if (!this.name || !this.checked) return;
+    const radios = this.getGroupRadios();
+
+    radios.forEach(radio => {
+      if (radio === this) return;
+      radio.checked = false;
+    });
+  }
+
+  private getGroupRadios(): Radio[] {
+    if (!this.name) return [this];
+    const scopeRoot = this.closest('form') ?? document;
+    return Array.from(
+      scopeRoot.querySelectorAll<Radio>(`wc-radio[name="${this.name}"]`),
+    );
+  }
+
+  private isRadioEnabled(radio: Radio) {
+    return !radio.disabled && !radio.readonly;
+  }
+
+  private updateGroupFocusTarget() {
+    const group = this.getGroupRadios();
+    if (!group.length) return;
+
+    const enabledGroup = group.filter(radio => this.isRadioEnabled(radio));
+    if (!enabledGroup.length) {
+      group.forEach(radio => {
+        radio.isGroupFocusTarget = false;
+      });
+      return;
+    }
+
+    const target =
+      enabledGroup.find(radio => radio.checked) || enabledGroup[0];
+
+    group.forEach(radio => {
+      radio.isGroupFocusTarget = radio === target;
+    });
+  }
+
+  private navigateGroup(direction: RadioDirection) {
+    const group = this.getGroupRadios().filter(radio =>
+      this.isRadioEnabled(radio),
+    );
+    if (!group.length) return;
+
+    const currentIndex = group.indexOf(this);
+    const startIndex = currentIndex >= 0 ? currentIndex : 0;
+    const nextIndex = (startIndex + direction + group.length) % group.length;
+    const target = group[nextIndex];
+
+    target.selectRadio();
+    target.containerElement?.focus();
+  }
+
+  /**
+   * Sets focus on the radio.
+   */
+  focus() {
+    this.containerElement?.focus();
+  }
+
+  /**
+   * Removes focus from the radio.
+   */
+  blur() {
+    this.containerElement?.blur();
+  }
+
+  render() {
+    const cssClasses = {
+      radio: true,
+      'state-checked': this.checked,
+      'has-focus': this.hasFocus,
+      active: this.isActive,
+      disabled: this.disabled,
+      readonly: this.readonly,
+      required: this.required,
+      'has-content': this.slotHasContent,
+    };
+
+    return html`
+      <label class=${classMap(cssClasses)}>
+        <div
+          class="container"
+          tabindex=${this.isGroupFocusTarget
+            ? this.tabindex !== undefined
+              ? this.tabindex
+              : 0
+            : -1}
+          role="radio"
+          aria-disabled=${this.disabled}
+          aria-required=${this.required}
+          aria-checked=${this.checked}
+          @click=${this.clickHandler}
+          @mousedown=${this.mouseDownHandler}
+          @keydown=${this.keyDownHandler}
+          @blur=${this.blurHandler}
+          @focus=${this.focusHandler}
+          ${spread(this.configAria)}
+        >
+          <div class="state-layer"></div>
+          <div class="outer-circle"></div>
+          <div class="inner-circle"></div>
+        </div>
+
+        <input
+          type="radio"
+          class="input-native"
+          name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          aria-hidden="true"
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          tabindex="-1"
+        />
+
+        ${this.label
+          ? html`<div class="label">${this.label}</div>`
+          : html`<div class="label slot-container"><slot></slot></div>`}
+      </label>
+    `;
+  }
+}

package/src/ripple/ripple.ts

@@ -91,10 +91,26 @@ const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
  *
  * @example
  * ```html
- * <button style="position: relative;">
+ * <style>
+ * .ripple-surface {
+ *   position: relative;
+ *   display: inline-flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   width: 220px;
+ *   height: 64px;
+ *   border-radius: 12px;
+ *   background: var(--color-surface-container-high);
+ *   color: var(--color-on-surface);
+ *   overflow: hidden;
+ *   cursor: pointer;
+ *   user-select: none;
+ * }
+ * </style>
+ * <div class="ripple-surface">
  *   <wc-ripple></wc-ripple>
- *   Click me
- * </button>
+ *   Ripple Effect
+ * </div>
  * ```
  * @tags display
  */

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