@redvars/peacock 3.2.10 → 3.3.1

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

package/src/tabs/tab.ts

@@ -0,0 +1,243 @@
+import { html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { dispatchActivationClick, isActivationClick } from 'src/utils/dispatch-event-utils.js';
+import { observerSlotChangesWithCallback, throttle } from 'src/utils.js';
+import { spread } from 'src/spread.js';
+import styles from './tab.scss';
+
+/**
+ * @label Tab
+ * @tag wc-tab
+ * @rawTag tab
+ * @parentRawTag tabs
+ *
+ * @summary A tab component for use within tabs.
+ * @overview
+ * <p>Tab represents an individual tab in a tabs component.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tab>Tab Label</wc-tab>
+ * ```
+ * @tags navigation
+ */
+export class Tab extends LitElement {
+
+  #id = crypto.randomUUID();
+
+  static styles = [styles];
+
+  @property({ type: Boolean, reflect: true }) active = false;
+  
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ type: String }) disabledReason = '';
+
+  @property({ type: String }) icon?: string;
+
+  @property({ type: String }) label?: string;
+
+  @property({ type: String }) value?: string;
+
+  @property({ reflect: true })
+  configAria?: { [key: string]: any };
+
+   /**
+   * Sets or retrieves the window or frame at which to target content.
+   */
+  @property() target: string = '_self';
+
+  @property({ type: String, reflect: true }) href?: string;
+
+  /**
+   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+   */
+  @property() throttleDelay = 200;
+
+  @state() hasFocus = false;
+
+  @state() slotHasContent = false;
+
+   /**
+     * States
+     */
+    @state()
+    isPressed = false;
+
+  private _tabindex = 0;
+
+  @query('.tab-element') readonly tabElement!: HTMLElement | null;
+
+  override focus() {
+    this.tabElement?.focus();
+  }
+
+  override blur() {
+    this.tabElement?.blur();
+  }
+
+
+  constructor() {
+    super();
+    this._tabindex = 0;
+  }
+
+  override firstUpdated() {
+    this.__dispatchClickWithThrottle = throttle(
+      this.__dispatchClick,
+      this.throttleDelay,
+    );
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot'),
+      hasContent => {
+        this.slotHasContent = hasContent;
+        this.requestUpdate();
+      },
+    );
+  }
+
+  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =
+      event => {
+        this.__dispatchClick(event);
+      };
+  
+    __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
+      // If the button is soft-disabled or a disabled link, we need to explicitly
+      // prevent the click from propagating to other event listeners as well as
+      // prevent the default action.
+      if (this.disabled && this.href) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        return;
+      }
+  
+      if (!isActivationClick(event) || !this.tabElement) {
+        return;
+      }
+  
+      this.focus();
+      dispatchActivationClick(this.tabElement);
+    };
+
+  __handlePress = (event: KeyboardEvent | MouseEvent) => {
+    if (this.disabled) return;
+    if (
+      event instanceof KeyboardEvent &&
+      event.type === 'keydown' &&
+      (event.key === 'Enter' || event.key === ' ')
+    ) {
+      this.isPressed = true;
+    } else if (event.type === 'mousedown') {
+      this.isPressed = true;
+    } else {
+      this.isPressed = false;
+    }
+  };
+
+  __isLink() {
+    return !!this.href;
+  }
+
+  // private handleKeyDown(evt: KeyboardEvent) {
+  //   if (this.disabled || this.showLoader) return;
+  //   if (evt.key === 'Enter' || evt.key === ' ') {
+  //     evt.preventDefault();
+  //     this.isActive = true;
+  //     this.dispatchTabClick();
+  //   }
+  // }
+
+
+  render() {
+
+    const isLink = this.__isLink();
+
+    const cssClasses = {
+      tab: true,
+      'tab-element': true,
+      disabled: this.disabled,
+      pressed: this.isPressed,
+      active: this.active,
+      'has-content': this.slotHasContent
+    };
+
+
+    if (!isLink) {
+          return html`<button
+              class=${classMap(cssClasses)}
+              tabindex="0"
+              @mousedown=${this.__handlePress}
+              @keydown=${this.__handlePress}
+              @keyup=${this.__handlePress}
+              ?aria-describedby=${this.__getDisabledReasonID()}
+              aria-disabled=${`${this.disabled}`}
+              ?disabled=${this.disabled}
+              ${spread(this.configAria)}
+            >
+              ${this.renderTabContent()}
+            </button>`;
+        }
+
+    return html`<a
+        class=${classMap(cssClasses)}
+        id="button"
+        tabindex="0"
+        href=${this.href}
+        target=${this.target}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        role="button"
+        ?aria-describedby=${this.__getDisabledReasonID()}
+        aria-disabled=${`${this.disabled}`}
+        ${spread(this.configAria)}
+      >
+        ${this.renderTabContent()}
+      </a>`;
+  }
+
+  renderTabContent() {
+    return html`
+      <wc-focus-ring class="focus-ring" .control=${this} element="tabElement"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      
+      <div class="tab-content">
+        <div class="slot-container">
+          <slot></slot>
+        </div>
+
+        <slot name="icon"></slot>
+
+        <div class="indicator"></div>
+      </div>
+
+      <div class="indicator"></div>
+
+      ${this.__renderDisabledReason()}
+    `;
+  }
+
+  __getDisabledReasonID() {
+    return this.disabled && this.disabledReason
+      ? `disabled-reason-${this.#id}`
+      : nothing;
+  }
+
+  __renderDisabledReason() {
+    const disabledReasonID = this.__getDisabledReasonID();
+    if (disabledReasonID)
+      return html`<div
+        id="disabled-reason-${this.#id}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        {this.disabledReason}
+      </div>`;
+    return nothing;
+  }
+}

package/src/tabs/tabs.scss

@@ -0,0 +1,19 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+
+.tabs {
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+:host-context([variant='line']), :host([variant='line']) {
+  --tabs-height: 3rem;
+  
+  .tabs {
+    height: var(--tabs-height);
+    border-bottom: 1px solid var(--color-surface-variant);
+  }
+}

package/src/tabs/tabs.ts

@@ -0,0 +1,66 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './tabs.scss';
+import { Tab } from './tab.js';
+
+/**
+ * @label Tabs
+ * @tag wc-tabs
+ * @rawTag tabs
+ *
+ * @summary Container for tab components.
+ * @overview
+ * <p>Tabs holds the tab buttons and manages their layout.</p>
+ *
+ * @example
+ * ```html
+ * <wc-tabs>
+ *   <wc-tab>Tab 1</wc-tab>
+ *   <wc-tab>Tab 2</wc-tab>
+ * </wc-tabs>
+ * ```
+ * @tags navigation
+ */
+export class Tabs extends LitElement {
+  static styles = [styles];
+
+  static Tab = Tab;
+
+  @property({ type: Boolean }) managed = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.__handleTabClick);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.__handleTabClick);
+    super.disconnectedCallback();
+  }
+
+  private __handleTabClick = (event: Event) => {
+    if (this.managed) return;
+
+    const detailEvent = event as CustomEvent;
+    const path = detailEvent.composedPath();
+    const clickedTab: Tab | undefined = path.find(
+      node => node instanceof Element && (node as Element).tagName.toLowerCase() === 'wc-tab',
+    ) as Tab | undefined;
+
+    if (!clickedTab) return;
+
+    const tabs: NodeListOf<Tab> = this.querySelectorAll('wc-tab');
+    tabs.forEach(tab => {
+      tab.active = false;
+    });
+    (clickedTab as Tab).active = true;
+  };
+
+  render() {
+    return html`
+      <div class="tabs">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/text/text.css-component.scss

@@ -49,8 +49,11 @@ $sizes: "large", "medium", 'small';
 }
 
 .text-code-block {
-  font-family: var(--font-family-monospace);
-  background: var(--color-primary-container);
+  display: inline-flex;
+  background-color: var(--color-surface-variant);
+  text-shadow: 0 1px 1px var(--color-surface-variant);
+  color: var(--color-on-surface);
   border-radius: var(--shape-corner-extra-small);
-  padding-inline: var(--spacing-050);
+  padding: var(--spacing-050);
+  font-family: var(--font-family-monospace);
 }

package/src/textarea/textarea.ts

@@ -7,14 +7,14 @@ import { spread } from '../spread.js';
 
 /**
  * @label Textarea
- * @tag textarea-field
+ * @tag wc-textarea
  * @rawTag textarea
- *
  * @summary The Textarea component is used to capture user input.
+ * @tags input
  *
  * @example
  * ```html
- * <textarea-field label="Name" required placeholder="Enter your name"></textarea-field>
+ * <wc-textarea label="Description" placeholder="Enter text"></wc-textarea>
  * ```
  */
 export class Textarea extends BaseInput {
@@ -124,7 +124,7 @@ export class Textarea extends BaseInput {
 
   render() {
     return html`
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -162,7 +162,7 @@ export class Textarea extends BaseInput {
         ></textarea>
 
         <slot name="end" slot="field-end"></slot>
-      </base-field>
+      </wc-field>
     `;
   }
 }

package/src/time-picker/time-picker.ts

@@ -7,14 +7,14 @@ import { spread } from '../spread.js';
 
 /**
  * @label Time Picker
- * @tag time-picker
+ * @tag wc-time-picker
  * @rawTag time-picker
- *
  * @summary The Time Picker component is used to capture time user input.
+ * @tags input
  *
  * @example
  * ```html
- * <time-picker label="Name" required placeholder="Enter your name"></time-picker>
+ * <wc-time-picker label="Time" placeholder="Select a time"></wc-time-picker>
  * ```
  */
 export class TimePicker extends BaseInput {
@@ -122,7 +122,7 @@ export class TimePicker extends BaseInput {
 
   render() {
     return html`
-      <base-field
+      <wc-field
         ?required=${this.required}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -161,7 +161,7 @@ export class TimePicker extends BaseInput {
 
         <slot name="end" slot="field-end"></slot>
 
-        <icon-button
+        <wc-icon-button
           slot="field-end"
           color="secondary"
           variant="text"
@@ -174,8 +174,8 @@ export class TimePicker extends BaseInput {
             });
           }}
         >
-        </icon-button>
-      </base-field>
+        </wc-icon-button>
+      </wc-field>
     `;
   }
 }

package/src/{popover/tooltip → tooltip}/tooltip.scss

@@ -1,22 +1,25 @@
-@use "../../../scss/mixin";
+@use "../../scss/mixin";
 @use "sass:string";
 
 @include mixin.base-styles;
 
-.tooltip {
-  pointer-events: none;
-  transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
-  transform: scale(0);
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-}
 
-.tooltip.open {
-  pointer-events: auto;
-  transform: scale(1);
-  opacity: 1;
+:host(:not([preview])) {
+  .tooltip {
+    pointer-events: none;
+    transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
+    transform: scale(0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  .tooltip.open {
+    pointer-events: auto;
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 .variant-plain .tooltip-content {

package/src/{popover/tooltip → tooltip}/tooltip.ts

@@ -2,22 +2,22 @@ import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import styles from './tooltip.scss';
-import { PopoverController } from '../PopoverController.js';
+import { PopoverController } from '../popover/PopoverController.js';
 
 // Define a type for valid trigger combinations
 export type TooltipTrigger = 'hover' | 'focus' | 'click';
 
 /**
  * @label Tooltip
- * @tag base-tooltip
+ * @tag wc-tooltip
  * @rawTag tooltip
  * @summary Displays a tooltip for an element.
+ * @tags display
  *
  * @example
  * ```html
- * <span class="tooltip">Tooltip</span>
+ * <wc-tooltip preview>Tooltip</wc-tooltip>
  * ```
- * @tags display
  */
 export class Tooltip extends LitElement {
   static styles = [styles];
@@ -37,6 +37,8 @@ export class Tooltip extends LitElement {
   @property({ type: String, reflect: true }) variant: 'plain' | 'rich' =
     'plain';
 
+  @property({ type: Boolean, reflect: true }) preview = false;
+
   @query('#tooltip') floatingEl!: HTMLElement;
 
   private _target: HTMLElement | null = null;
@@ -54,13 +56,13 @@ export class Tooltip extends LitElement {
 
   // Define listeners as arrow functions to maintain 'this' context
   private _onMouseEnter = () => {
-    if (!this.hasTrigger('hover')) return;
+    if (this.preview || !this.hasTrigger('hover')) return;
     window.clearTimeout(this._hideTimeout); // Cancel any pending close
     this.show();
   };
 
   private _onMouseLeave = () => {
-    if (!this.hasTrigger('hover')) return;
+    if (this.preview || !this.hasTrigger('hover')) return;
 
     // Small delay allows the mouse to move from target -> tooltip
     // without the tooltip vanishing instantly.
@@ -75,17 +77,17 @@ export class Tooltip extends LitElement {
     }, 100); // 100ms is usually enough for a smooth transition
   };
 
-  private _onFocusIn = () => this.hasTrigger('focus') && this.show();
+  private _onFocusIn = () => this.preview && this.hasTrigger('focus') && this.show();
 
   private _onFocusOut = (e: FocusEvent) => {
-    if (!this.hasTrigger('focus')) return;
+    if (this.preview || !this.hasTrigger('focus')) return;
     if (this._target && !this._target.contains(e.relatedTarget as Node)) {
       this.hide();
     }
   };
 
   private _onClick = (e: MouseEvent) => {
-    if (!this.hasTrigger('click')) return;
+    if (this.preview || !this.hasTrigger('click')) return;
     e.stopPropagation();
     this.toggle();
   };
@@ -210,7 +212,7 @@ export class Tooltip extends LitElement {
   __renderRichTooltip() {
     return html`
       <div class="tooltip-content">
-        <base-elevation class="elevation"></base-elevation>
+        <wc-elevation class="elevation"></wc-elevation>
 
         <div class="tooltip-title" id="tooltip-labelledby">
           <slot name="title"></slot>