@redvars/peacock 3.2.9 → 3.3.0

package/src/slider/slider.scss

@@ -0,0 +1,130 @@
+:host {
+  --_track-height: 4px;
+  --_thumb-size: 20px;
+  --thumb-half: 10px;
+  --_active-track-color: var(--color-primary);
+  --_inactive-track-color: var(--color-secondary-container);
+  --_thumb-color: var(--color-primary);
+  --_label-color: var(--color-primary);
+  --_label-text-color: var(--color-on-primary);
+
+  display: inline-block;
+  width: 100%;
+  min-width: 200px;
+  vertical-align: middle;
+  touch-action: none; // Prevent scrolling while dragging
+}
+
+.slider-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 48px; // Touch target size
+  cursor: pointer;
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+}
+
+.track {
+  position: absolute;
+  width: 100%;
+  height: var(--_track-height);
+  background-color: var(--_inactive-track-color);
+  border-radius: var(--_track-height);
+  overflow: hidden;
+  pointer-events: none;
+
+  .track-active {
+    position: absolute;
+    height: 100%;
+    background-color: var(--_active-track-color);
+    transition: width 0.1s ease-out;
+    will-change: width;
+  }
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  background-color: var(--_thumb-color);
+  border-radius: 50%;
+  box-shadow: var(--md-sys-elevation-1);
+  outline: none;
+  cursor: grab;
+  transition: left 0.05s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
+  will-change: left;
+  z-index: 2;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  // State Layer (Hover/Focus halo)
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 40px;
+    height: 40px;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background-color: var(--_thumb-color);
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  &:hover::before { opacity: 0.08; }
+  &:focus-visible::before { opacity: 0.12; }
+  &:active {
+    cursor: grabbing;
+    box-shadow: var(--md-sys-elevation-5);
+  }
+
+  // Disable transition while dragging
+  &.dragging {
+    transition: none;
+  }
+}
+
+// Value Label (Tooltip)
+.value-label {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 8px;
+  padding: 4px 8px;
+  background-color: var(--_label-color);
+  color: var(--_label-text-color);
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.1s, transform 0.1s;
+  pointer-events: none;
+
+  // Tooltip triangle
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: var(--_label-color);
+  }
+}
+
+.slider-container.dragging .value-label,
+.slider-container:active .value-label,
+.thumb:focus-visible .value-label {
+  opacity: 1;
+  transform: translateY(0);
+}

package/src/slider/slider.ts

@@ -0,0 +1,178 @@
+import { LitElement, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import sliderStyles from './slider.scss';
+
+/**
+ * @label Slider
+ * @tag wc-slider
+ * @rawTag slider
+ *
+ * @summary Sliders allow users to make selections from a range of values.
+ *
+ * @fires {CustomEvent} input - Dispatched when the slider value changes during interaction.
+ * @fires {CustomEvent} change - Dispatched when the slider interaction ends.
+ *
+ * @example
+ * ```html
+ * <wc-slider min="0" max="100" value="50"></wc-slider>
+ * ```
+ */
+export class Slider extends LitElement {
+  static styles = [sliderStyles];
+
+  /**
+   * The minimum value of the slider.
+   */
+  @property({ type: Number }) min = 0;
+
+  /**
+   * The maximum value of the slider.
+   */
+  @property({ type: Number }) max = 100;
+
+  /**
+   * The current value of the slider.
+   */
+  @property({ type: Number, reflect: true }) value = 50;
+
+  /**
+   * The step increment for the slider.
+   */
+  @property({ type: Number }) step = 1;
+
+  /**
+   * Whether the slider is disabled.
+   */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * Whether to show labels on the slider.
+   */
+  @property({ type: Boolean }) labeled = true;
+
+  @state() private isDragging = false;
+
+  @query('.slider-container') private container!: HTMLElement;
+  @query('.thumb') private thumbElement!: HTMLElement;
+
+  private handleInput(event: MouseEvent | TouchEvent) {
+    if (this.disabled) return;
+    
+    const rect = this.container.getBoundingClientRect();
+    const clientX = 'touches' in event ? event.touches[0].clientX : (event as MouseEvent).clientX;
+    
+    // Calculate percentage relative to track width
+    let percentage = (clientX - rect.left) / rect.width;
+    percentage = Math.max(0, Math.min(1, percentage));
+    
+    const rawValue = this.min + percentage * (this.max - this.min);
+    const steppedValue = Math.round(rawValue / this.step) * this.step;
+    
+    const oldValue = this.value;
+    this.value = Math.max(this.min, Math.min(this.max, steppedValue));
+
+    if (oldValue !== this.value) {
+      this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+  }
+
+  private onMouseDown(e: MouseEvent | TouchEvent) {
+    if (this.disabled) return;
+    
+    e.preventDefault();
+    this.isDragging = true;
+    
+    // Add dragging class for CSS state
+    this.container.classList.add('dragging');
+    this.thumbElement.classList.add('dragging');
+    
+    this.handleInput(e);
+    
+    window.addEventListener('mousemove', this.onMouseMove);
+    window.addEventListener('mouseup', this.onMouseUp);
+    window.addEventListener('touchmove', this.onMouseMove, { passive: false });
+    window.addEventListener('touchend', this.onMouseUp);
+    window.addEventListener('touchcancel', this.onMouseUp);
+  }
+
+  private onMouseMove = (e: MouseEvent | TouchEvent) => {
+    if (this.isDragging) {
+      e.preventDefault();
+      this.handleInput(e);
+    }
+  };
+
+  private onMouseUp = () => {
+    if (!this.isDragging) return;
+    
+    this.isDragging = false;
+    this.container.classList.remove('dragging');
+    this.thumbElement.classList.remove('dragging');
+    
+    this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true }));
+    
+    window.removeEventListener('mousemove', this.onMouseMove);
+    window.removeEventListener('mouseup', this.onMouseUp);
+    window.removeEventListener('touchmove', this.onMouseMove);
+    window.removeEventListener('touchend', this.onMouseUp);
+    window.removeEventListener('touchcancel', this.onMouseUp);
+  };
+
+  private handleKeyDown(e: KeyboardEvent) {
+    if (this.disabled) return;
+    
+    const increment = e.shiftKey ? this.step * 10 : this.step;
+    let newValue = this.value;
+
+    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+      newValue = Math.min(this.max, this.value + increment);
+      e.preventDefault();
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+      newValue = Math.max(this.min, this.value - increment);
+      e.preventDefault();
+    } else if (e.key === 'Home') {
+      newValue = this.min;
+      e.preventDefault();
+    } else if (e.key === 'End') {
+      newValue = this.max;
+      e.preventDefault();
+    }
+
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this.dispatchEvent(new CustomEvent('input', { detail: { value: this.value }, bubbles: true, composed: true }));
+      this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+  }
+
+  render() {
+    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="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}
+        >
+          ${this.labeled ? html`<div class="value-label">${this.value}</div>` : ''}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/spinner/spinner.ts

@@ -4,7 +4,7 @@ import styles from './spinner.scss';
 
 /**
  * @label Spinner
- * @tag base-spinner
+ * @tag wc-spinner
  * @rawTag spinner
  * @summary A spinner component that animates a circular shape.
  * @cssprop --spinner-track-color - The color of the track.
@@ -13,7 +13,7 @@ import styles from './spinner.scss';
  *
  * @example
  * ```html
- * <base-spinner></base-spinner>
+ * <wc-spinner></wc-spinner>
  * ```
  */
 export class Spinner extends LitElement {

package/src/switch/switch.ts

@@ -7,7 +7,7 @@ import BaseInput from '../input/BaseInput.js';
 
 /**
  * @label Switch
- * @tag base-switch
+ * @tag wc-switch
  * @rawTag switch
  *
  * @summary Captures boolean input with an on/off switch interaction.
@@ -27,7 +27,7 @@ import BaseInput from '../input/BaseInput.js';
  *
  * @example
  * ```html
- * <base-switch value="true"></base-switch>
+ * <wc-switch value="true"></wc-switch>
  * ```
  * @tags input, form
  */
@@ -213,8 +213,8 @@ export class Switch extends BaseInput {
   __renderIcon() {
     if (this.withIcon) {
       if (this.value)
-        return html`<base-icon name="check" class="icon"></base-icon>`;
-      return html`<base-icon name="close" class="icon"></base-icon>`;
+        return html`<wc-icon name="check" class="icon"></wc-icon>`;
+      return html`<wc-icon name="close" class="icon"></wc-icon>`;
     }
     return nothing;
   }

package/src/tabs/index.ts

@@ -0,0 +1,4 @@
+export { Tab } from './tab.js';
+export { TabGroup } from './tab-group.js';
+export { TabPanel } from './tab-panel.js';
+export { Tabs } from './tabs.js';

package/src/tabs/tab-group.scss

@@ -0,0 +1,10 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+

package/src/tabs/tab-group.ts

@@ -0,0 +1,137 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './tab-group.scss';
+
+/**
+ * @label Tab Group
+ * @tag wc-tab-group
+ * @rawTag tab-group
+ *
+ * @summary The tab group component is used to display multiple panels of content in a container.
+ * @overview
+ * <p>The tab group component allows users to switch between different views or content sections.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tab-group>
+ * 
+ *   <wc-tabs>
+ *    <wc-tab selected >Tab 1</wc-tab>
+ *    <wc-tab>Tab 2</wc-tab>
+ *   </wc-tabs>
+ * 
+ *   <wc-tab-panel>Panel 1</wc-tab-panel>
+ *   <wc-tab-panel>Panel 2</wc-tab-panel>
+ * </wc-tab-group>
+ * ```
+ * @tags navigation
+ */
+export class TabGroup extends LitElement {
+  static styles = [styles];
+
+  @property({ reflect: true }) 
+  variant: 'line' | 'line-secondary' | 'contained' | 'pill' = 'line';
+
+  private uid = crypto.randomUUID();
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('base-tab-click', this.onTabClick as EventListener);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('base-tab-click', this.onTabClick as EventListener);
+    super.disconnectedCallback();
+  }
+
+  firstUpdated() {
+    this.initializeTabs();
+  }
+
+  private onTabClick = (event: Event) => {
+    const custom = event as CustomEvent;
+    event.stopPropagation();
+    const targetValue = custom.detail?.target || custom.detail?.value;
+    if (targetValue) {
+      this.selectTab(targetValue);
+    }
+  };
+
+  selectTab(target: string) {
+    const tabs = this.getTabs();
+    tabs.forEach((tab: HTMLElement) => {
+      (tab as any).selected = false;
+      tab.classList.remove('previous-tab', 'next-tab');
+    });
+
+    let selectedIndex = -1;
+    tabs.forEach((tab: HTMLElement, index: number) => {
+      const t = tab.getAttribute('target') || tab.getAttribute('value');
+      if (t === target) {
+        selectedIndex = index;
+      }
+    });
+
+    if (selectedIndex >= 0) {
+      const selectedTab = tabs[selectedIndex];
+      (selectedTab as any).selected = true;
+      if (tabs[selectedIndex - 1]) {
+        tabs[selectedIndex - 1].classList.add('previous-tab');
+      }
+      if (tabs[selectedIndex + 1]) {
+        tabs[selectedIndex + 1].classList.add('next-tab');
+      }
+    }
+
+    const panels = this.getTabPanels();
+    panels.forEach(panel => {
+      const panelValue = panel.getAttribute('value');
+      (panel as any).active = panelValue === target;
+    });
+  }
+
+  private getTabs(): NodeListOf<HTMLElement> {
+    return this.querySelectorAll(':scope > tabs-list base-tab');
+  }
+
+  private getTabPanels(): NodeListOf<HTMLElement> {
+    return this.querySelectorAll(':scope > base-tab-panel');
+  }
+
+  private getTabList(): HTMLElement | null {
+    return this.querySelector(':scope > tabs-list');
+  }
+
+  private tabsHaveTarget(): boolean {
+    return !!this.querySelector(':scope > tabs-list base-tab[target]');
+  }
+
+  private initializeTabs() {
+    const tabs = Array.from(this.getTabs());
+    if (!this.tabsHaveTarget()) {
+     
+      this.getTabPanels().forEach((panel, index) => {
+        if (!panel.getAttribute('value')) {
+          panel.setAttribute('value', `tab-${this.uid}-${index}`);
+        }
+      });
+
+      if (tabs.length > 0) {
+        const firstTarget = tabs[0].getAttribute('target');
+        if (firstTarget) {
+          this.selectTab(firstTarget);
+        }
+      }
+    } else {
+      const selectedTab = this.querySelector(':scope > tabs-list base-tab[selected]') as HTMLElement;
+      if (selectedTab) {
+        const selectedTarget = selectedTab.getAttribute('target');
+        if (selectedTarget) this.selectTab(selectedTarget);
+      }
+    }
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/tabs/tab-panel.scss

@@ -0,0 +1,12 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  flex: 1;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/src/tabs/tab-panel.ts

@@ -0,0 +1,28 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './tab-panel.scss';
+
+/**
+ * @label Tab Panel
+ * @tag wc-tab-panel
+ * @rawTag tab-panel
+ *
+ * @summary Content panel for tabs.
+ * @overview
+ * <p>TabPanel contains the content associated with a tab.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tab-panel>Content for this tab</wc-tab-panel>
+ * ```
+ * @tags navigation
+ */
+export class TabPanel extends LitElement {
+  static styles = [styles];
+
+  @property({ reflect: true }) value?: string;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}

package/src/tabs/tab.scss

@@ -0,0 +1,157 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-block;
+  height: 100%;
+  --tab-outline-color: var(--color-primary);
+}
+
+.tab-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+}
+
+.tab {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: var(--_tab-height);
+  padding: 0 var(--_container-padding);
+  width: 100%;
+  cursor: pointer;
+
+  .tab-content {
+    position: relative;
+    @include mixin.get-typography('title-small');
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--_tab-icon-label-spacing);
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+
+    color: var(--_label-text-color);
+    opacity: var(--_label-text-opacity, 1);
+    --icon-size: var(--tab-icon-size, var(--_tab-icon-size));
+    --icon-color: var(--_label-text-color);
+
+    .slot-container {
+      display: none;
+    }
+  }
+
+  .indicator {
+    position: absolute;
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0;
+    background: var(--_active-indicator-color);
+    border-radius: var(--_active-indicator-shape);
+    transform-origin: left bottom;
+    height: var(--_active-indicator-height);
+    inset: auto 0px 0px;
+    opacity: 0;
+  }
+
+  &.has-content {
+    .slot-container {
+      display: flex;
+      flex: none;
+      justify-content: center;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  /*
+    Background layers
+   */
+  .focus-ring {
+    z-index: 2;
+    --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
+    --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
+    --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
+    --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
+    --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
+  }
+
+  .ripple {
+    corner-shape: var(--_container-corner-shape-variant);
+    --ripple-state-opacity: var(--_container-state-opacity, 0);
+    --ripple-pressed-color: var(--_container-state-color);
+  }
+
+  .outline {
+    z-index: 1;
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    border: var(--_outline-width) solid var(--_outline-color);
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+  }
+}
+
+
+
+:host-context([variant='line']) .tab {
+  --_tab-height: 100%;
+  --_container-padding: 1rem;
+
+  --_label-text-color: var(--color-on-surface);
+  --_container-state-color: var(--_label-text-color);
+  --_container-shape-start-start: var(--shape-corner-small);
+  --_container-shape-start-end: var(--shape-corner-small);
+  --_container-shape-end-start: var(--shape-corner-small);
+  --_container-shape-end-end: var(--shape-corner-small);
+  --_active-indicator-color: var(--color-primary);
+  --_active-indicator-shape: 3px 3px 0 0;
+  --_active-indicator-height: 2px;
+
+  .focus-ring {
+    inset: 3px 3px 4px 3px;
+  }
+
+  &.active {
+
+    .tab-content .indicator {
+      opacity: 1;
+    }
+
+    .focus-ring {
+      inset: 3px 3px calc(4px + var(--_active-indicator-height)) 3px;
+    }
+  }
+
+  &:hover:not(:where(.disabled)) {
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(:where(.disabled)) {
+    --_container-state-opacity: 0.12;
+  }
+
+  &.disabled {
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
+    }
+  }
+}