@redvars/peacock 3.5.0 → 3.5.1

package/src/sidebar-menu/sidebar-sub-menu.ts

@@ -0,0 +1,160 @@
+import { html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import styles from './sidebar-sub-menu.scss';
+
+/**
+ * @label Sidebar Sub Menu
+ * @tag wc-sidebar-sub-menu
+ * @rawTag sidebar-sub-menu
+ * @parentRawTag sidebar-menu
+ * @summary A sidebar sub menu groups sidebar menu items and handles expand/collapse behavior.
+ *
+ * @example
+ * ```html
+ * <wc-sidebar-sub-menu label="Parent" expanded>
+ *   <wc-sidebar-menu-item label="Child"></wc-sidebar-menu-item>
+ * </wc-sidebar-sub-menu>
+ * ```
+ * @tags navigation
+ */
+export class SidebarSubMenu extends LitElement {
+  static styles = [styles];
+
+  @property({ type: String, reflect: true })
+  value: string = '';
+
+  @property({ type: String, reflect: true })
+  label: string = '';
+
+  @property({ type: String, reflect: true })
+  icon: string = '';
+
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  selected: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  expanded: boolean = false;
+
+  @property({ type: Number, reflect: true })
+  level: number = 0;
+
+  @query('.sidebar-sub-menu-inner')
+  private readonly _nativeElement!: HTMLElement | null;
+
+  override focus() {
+    this._nativeElement?.focus();
+  }
+
+  override blur() {
+    this._nativeElement?.blur();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateChildLevels();
+  }
+
+  updated(changedProps: Map<string, unknown>) {
+    super.updated(changedProps);
+
+    if (changedProps.has('expanded')) {
+      this.setAttribute('aria-expanded', String(this.expanded));
+      if (this.expanded) {
+        this.setAttribute('data-expanded', '');
+      } else {
+        this.removeAttribute('data-expanded');
+      }
+    }
+  }
+
+  private _getChildNodes(): Element[] {
+    return Array.from(this.children).filter(el => {
+      const tag = el.tagName.toLowerCase();
+      return tag === 'wc-sidebar-menu-item' || tag === 'wc-sidebar-sub-menu';
+    });
+  }
+
+  private _updateChildLevels = () => {
+    this._getChildNodes().forEach(child => {
+      if ('level' in child) {
+        // eslint-disable-next-line no-param-reassign
+        (child as { level: number }).level = this.level + 1;
+      }
+    });
+  };
+
+  private _onClick = () => {
+    if (this.disabled) return;
+
+    if (this._getChildNodes().length > 0) {
+      this.expanded = !this.expanded;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('sidebar-menu-item:click', {
+        bubbles: true,
+        composed: true,
+        detail: { value: this.value, label: this.label },
+      }),
+    );
+  };
+
+  override render() {
+    const hasChildren = this._getChildNodes().length > 0;
+    const wrapperClasses = classMap({
+      'sidebar-sub-menu': true,
+    });
+    const innerClasses = classMap({
+      'sidebar-sub-menu-inner': true,
+      disabled: this.disabled,
+      selected: this.selected,
+    });
+
+    const inlineStyles = styleMap({
+      paddingLeft: `calc(var(--sidebar-menu-item-height, 2.5rem) * ${this.level})`,
+    });
+
+    return html`
+      <div class="${wrapperClasses}" style="${inlineStyles}">
+        <div
+          id="item"
+          class="${innerClasses}"
+          role="treeitem"
+          aria-label="${this.label}"
+          aria-selected="${String(this.selected)}"
+          aria-disabled="${this.disabled}"
+          aria-expanded="${this.expanded}"
+          @click="${this._onClick}"
+          @keydown="${(e: KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              this._onClick();
+            }
+          }}"
+          tabindex="${this.disabled ? -1 : 0}"
+        >
+          <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+          <div class="background"></div>
+          <wc-ripple class="ripple"></wc-ripple>
+          <div class="sidebar-sub-menu-content">
+            ${this.icon ? html`<wc-icon name="${this.icon}"></wc-icon>` : ''}
+            <span class="sidebar-sub-menu-label">${this.label}</span>
+          </div>
+          ${hasChildren
+            ? html`
+                <wc-icon class="expand-icon" name="arrow_drop_down" aria-hidden="true"></wc-icon>
+              `
+            : ''}
+        </div>
+        <div class="sidebar-sub-menu-children ${(!hasChildren || !this.expanded) ? 'hidden' : ''}">
+          <slot @slotchange="${this._updateChildLevels}"></slot>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/skeleton/skeleton.scss

@@ -1,43 +1,37 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+
+
+
 :host {
+  position: relative;
+  inset: 0;
   --skeleton-container-color: var(--color-surface-container);
   --skeleton-element: var(--color-on-surface);
-  display: inline-block;
-  height: 3rem;
-  width: 10rem;
+  display: flex;
+  pointer-events: none;
+}
+
+.skeleton,
+.skeleton::before {
+  inset: 0;
+  position: absolute;
+  @include mixin.apply-container-shape(skeleton);
 }
 
 .skeleton {
-  position: relative;
-  padding: 0;
-  border: none;
   background:  var(--skeleton-container-color);
-  box-shadow: none;
   overflow: hidden;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  border-start-start-radius: var(--skeleton-container-shape-start-start);
-  border-start-end-radius: var(--skeleton-container-shape-start-end);
-  border-end-start-radius: var(--skeleton-container-shape-end-start);
-  border-end-end-radius: var(--skeleton-container-shape-end-end);
-  corner-shape: var(--skeleton-container-shape-variant);
 
   &::before {
-    position: absolute;
-    left: 0;
-    top: 0;
     animation: 3s ease-in-out skeleton infinite;
     background:  var(--skeleton-element);
     block-size: 100%;
     content: "";
     inline-size: 100%;
     will-change: transform-origin, transform, opacity;
-
-    border-start-start-radius: var(--skeleton-container-shape-start-start);
-    border-start-end-radius: var(--skeleton-container-shape-start-end);
-    border-end-start-radius: var(--skeleton-container-shape-end-start);
-    border-end-end-radius: var(--skeleton-container-shape-end-end);
-    corner-shape: var(--skeleton-container-shape-variant);
   }
 }
 

package/src/snackbar/snackbar.ts

@@ -221,8 +221,8 @@ export class Snackbar extends LitElement {
               size='small'
               aria-label="Dismiss notification"
               @click=${this.handleCloseClick}
-              name="close"
             >
+              <wc-icon name="close"></wc-icon>
             </wc-icon-button>`
           : nothing}
       </div>

package/src/tabs/tab.ts

@@ -193,6 +193,7 @@ export class Tab extends LitElement {
 
     if (!isLink) {
           return html`<button
+          id="button"
               class=${classMap(cssClasses)}
               tabindex="0"
               @mousedown=${this.__handlePress}
@@ -241,7 +242,7 @@ export class Tab extends LitElement {
 
   renderPrimaryTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -267,7 +268,7 @@ export class Tab extends LitElement {
 
   renderSecondaryTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -300,7 +301,7 @@ export class Tab extends LitElement {
 
   renderSegmentedTabContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.tabElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>

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

@@ -49,11 +49,17 @@ $sizes: "large", "medium", 'small';
 }
 
 .text-code-block {
-  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: var(--spacing-050);
   font-family: var(--font-family-monospace);
+
+  display: inline-block;
+  max-width: 100%;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  vertical-align: middle;
 }

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

@@ -167,7 +167,6 @@ export class TimePicker extends BaseInput {
           slot="field-end"
           color="secondary"
           variant="text"
-          name="calendar_today"
           ?disabled=${this.disabled}
           @click=${() => {
             setTimeout(() => {
@@ -176,6 +175,7 @@ export class TimePicker extends BaseInput {
             });
           }}
         >
+          <wc-icon name="calendar_today"></wc-icon>
         </wc-icon-button>
       </wc-field>
     `;

package/src/toolbar/toolbar.ts

@@ -33,10 +33,10 @@ import colorStyles from './toolbar-colors.scss';
  * ```html
  * <!-- Docked toolbar -->
  * <wc-toolbar>
- *   <wc-icon-button variant="text" name="home"></wc-icon-button>
- *   <wc-icon-button variant="tonal" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
- *   <wc-icon-button variant="text" name="account_circle"></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *
@@ -44,9 +44,9 @@ import colorStyles from './toolbar-colors.scss';
  * ```html
  * <!-- Floating horizontal toolbar -->
  * <wc-toolbar variant="floating" orientation="horizontal">
- *   <wc-icon-button variant="tonal" name="home"></wc-icon-button>
- *   <wc-icon-button variant="text" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  *
@@ -54,9 +54,9 @@ import colorStyles from './toolbar-colors.scss';
  * ```html
  * <!-- Floating vertical toolbar -->
  * <wc-toolbar variant="floating" orientation="vertical">
- *   <wc-icon-button variant="tonal" name="home"></wc-icon-button>
- *   <wc-icon-button variant="text" name="search"></wc-icon-button>
- *   <wc-icon-button variant="text" name="favorite"></wc-icon-button>
+ *   <wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
  * </wc-toolbar>
  * ```
  * @tags display navigation

package/src/tooltip/tooltip.ts

@@ -133,6 +133,30 @@ export class Tooltip extends LitElement {
     this._target = null;
   }
 
+  _focusTarget?: HTMLElement;
+
+  set forElement(value: HTMLElement | null) {
+    if (value) {
+      this._focusTarget = value;
+    } else {      
+      this._focusTarget = undefined;
+    }
+  }
+
+  __getFocusTarget(): HTMLElement | null {
+
+    if (this._focusTarget) {
+      return this._focusTarget;
+    }
+
+    const focusTarget = document.getElementById(this.for);
+     if (focusTarget) {
+      return focusTarget
+     }
+
+     return this.parentElement;
+  }
+
   private attachListeners() {
     this.detachListeners(); // Cleanup old target if it exists
 

package/src/url-field/index.ts

@@ -0,0 +1 @@
+export { UrlField } from './url-field.js';

package/src/url-field/url-field.scss

@@ -0,0 +1,50 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.url-input {
+  flex: 1;
+  width: 100%;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  cursor: inherit;
+  font: inherit;
+  color: inherit;
+}
+
+.url-display {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.url-link {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-primary);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.url-placeholder {
+  color: var(--color-on-surface-variant);
+  opacity: 0.6;
+}
+
+.edit-button {
+  --button-container-shape: var(--shape-corner-full);
+}

package/src/url-field/url-field.ts

@@ -0,0 +1,239 @@
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+
+import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
+
+import BaseInput from '../input/BaseInput.js';
+import styles from './url-field.scss';
+
+/**
+ * @label URL Field
+ * @tag wc-url-field
+ * @rawTag url-field
+ *
+ * @summary A field for entering and displaying URLs with validation.
+ * @overview
+ * <p>URL Field wraps an input with URL validation, showing a clickable link preview when not in edit mode.</p>
+ *
+ * @example
+ * ```html
+ * <wc-url-field label="Website" value="https://example.com"></wc-url-field>
+ * ```
+ * @tags form
+ */
+export class UrlField extends BaseInput {
+  static styles = [styles];
+
+  @property({ type: String })
+  value: string = '';
+
+  @property({ type: String })
+  name: string = '';
+
+  @property({ type: String })
+  placeholder: string = '';
+
+  @property({ type: String })
+  label: string = '';
+
+  @property({ type: Boolean, reflect: true })
+  editing: boolean = false;
+
+  @property({ type: Number })
+  debounce: number = 300;
+
+  @property({ type: String, reflect: true })
+  size: 'sm' | 'md' | 'lg' = 'md';
+
+  @property({ type: String })
+  variant: 'filled' | 'outlined' | 'default' = 'default';
+
+  @property({ type: String, attribute: 'helper-text' })
+  helperText: string = '';
+
+  @property({ type: Boolean })
+  error: boolean = false;
+
+  @property({ type: String, attribute: 'error-text' })
+  errorText: string = '';
+
+  @property({ type: Boolean })
+  warning: boolean = false;
+
+  @property({ type: String, attribute: 'warning-text' })
+  warningText: string = '';
+
+  @state()
+  private focused: boolean = false;
+
+  @state()
+  private isValid: boolean = true;
+
+  @query('.url-input')
+  private inputElement?: HTMLInputElement;
+
+  private debounceTimer?: ReturnType<typeof setTimeout>;
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+  }
+
+  override focus() {
+    if (!this.editing && !this.disabled && !this.readonly) {
+      this.startEditing();
+      return;
+    }
+    this.inputElement?.focus();
+  }
+
+  override blur() {
+    this.inputElement?.blur();
+  }
+
+  private startEditing() {
+    if (this.disabled || this.readonly) return;
+    this.editing = true;
+    setTimeout(() => this.inputElement?.focus(), 80);
+  }
+
+  private closeEditing() {
+    this.isValid = this.validateUrl(this.value);
+    this.dispatchEvent(
+      new CustomEvent('input-invalid', {
+        detail: !this.isValid,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    if (this.isValid) {
+      this.editing = false;
+    }
+  }
+
+  private validateUrl(url: string): boolean {
+    if (!url) return true;
+
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  private handleInput(event: InputEvent) {
+    this.value = (event.target as HTMLInputElement).value;
+    this.isValid = true;
+
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+
+    this.debounceTimer = setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent('value-change', {
+          detail: this.value,
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }, this.debounce);
+  }
+
+  private handleFocusChange() {
+    this.focused = this.inputElement?.matches(':focus') ?? false;
+  }
+
+  private handleBlur() {
+    this.focused = false;
+    this.closeEditing();
+  }
+
+  private handleChange(event: Event) {
+    redispatchEvent(this, event);
+  }
+
+  private renderDisplayValue() {
+    if (!this.value) {
+      return html`<span class="url-placeholder">${this.placeholder}</span>`;
+    }
+
+    return html`
+      <a
+        class="url-link"
+        href=${this.value}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        ${this.value}
+      </a>
+    `;
+  }
+
+  render() {
+    const hasValue = !!this.value;
+    const showInvalidState = this.error || !this.isValid;
+    const resolvedErrorText = !this.isValid
+      ? 'Please enter a valid URL'
+      : this.errorText;
+
+    return html`
+      <wc-field
+        label=${this.label}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?skeleton=${this.skeleton}
+        helper-text=${this.helperText}
+        ?error=${showInvalidState}
+        error-text=${resolvedErrorText}
+        ?warning=${this.warning}
+        warning-text=${this.warningText}
+        variant=${this.variant}
+        ?populated=${hasValue || this.editing}
+        ?focused=${this.focused}
+        .host=${this}
+        class="url-field-wrapper"
+      >
+        ${this.editing
+          ? html`
+              <input
+                class="url-input"
+                name=${this.name}
+                type="url"
+                placeholder=${this.placeholder}
+                .value=${this.value}
+                ?readonly=${this.readonly}
+                ?required=${this.required}
+                ?disabled=${this.disabled}
+                @input=${this.handleInput}
+                @change=${this.handleChange}
+                @focus=${this.handleFocusChange}
+                @blur=${this.handleBlur}
+              />
+            `
+          : html`<div class="url-display">${this.renderDisplayValue()}</div>`}
+
+        ${!this.editing && !this.disabled && !this.readonly
+          ? html`
+              <wc-icon-button
+                class="edit-button"
+                slot="field-end"
+                variant="text"
+                @click=${(event: MouseEvent) => {
+                  event.stopPropagation();
+                  this.startEditing();
+                }}
+              >
+                <wc-icon name="edit"></wc-icon>
+              </wc-icon-button>
+            `
+          : nothing}
+      </wc-field>
+    `;
+  }
+}