@redvars/peacock 3.4.0 → 3.5.1

package/src/divider/divider.ts

@@ -1,8 +1,10 @@
 import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+
 import styles from './divider.scss';
-import { observerSlotChangesWithCallback } from '../utils.js';
 
 /**
  * @label Divider

package/src/elevation/elevation.scss

@@ -1,3 +1,7 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
 /**
  * Derived from Material Design Elevation
  * https://github.com/material-components/material-web/blob/main/elevation/internal/_elevation.scss
@@ -7,11 +11,7 @@
 .shadow,
 .shadow::before,
 .shadow::after {
-  border-start-start-radius: var(--elevation-container-shape-start-start, var(--elevation-container-shape));
-  border-start-end-radius: var(--elevation-container-shape-start-end, var(--elevation-container-shape));
-  border-end-start-radius: var(--elevation-container-shape-end-start, var(--elevation-container-shape));
-  border-end-end-radius: var(--elevation-container-shape-end-end, var(--elevation-container-shape));
-  corner-shape: var(--elevation-container-shape-variant);
+  @include mixin.apply-container-shape(elevation);
 
   inset: 0;
   position: absolute;

package/src/empty-state/empty-state.scss

@@ -38,8 +38,8 @@
   flex-direction: column;
   justify-content: center;
 
-  .title {
-    @include mixin.get-typography(headline-medium-emphasized);
+  .headline {
+    @include mixin.get-typography(headline-medium);
     margin-bottom: var(--spacing-200);
     color: var(--color-on-surface)
   }
@@ -64,10 +64,6 @@
     .content {
       width: 50%;
     }
-
-    .headline {
-      @include mixin.get-typography(title-medium);
-    }
   }
 }
 
@@ -75,7 +71,7 @@
   .empty-state {
     .empty-state-container {
       flex-direction: column;
-      gap: var(--spacing-200);
+      gap: var(--spacing-150);
 
       .illustration {
         height: auto;
@@ -84,8 +80,10 @@
       }
     }
 
-    .headline {
-      @include mixin.get-typography(title-small);
+    .content {
+      .headline {
+        @include mixin.get-typography(headline-small);
+      }
     }
   }
 }

package/src/empty-state/empty-state.ts

@@ -12,7 +12,7 @@ import styles from './empty-state.scss';
  *
  * @example
  * ```html
- * <wc-empty-state width="80%" headline="No items found"></wc-empty-state>
+ * <wc-empty-state style="width:100%" headline="No items found"></wc-empty-state>
  * ```
  */
 export class EmptyState extends LitElement {

package/src/fab/fab-colors.scss

@@ -0,0 +1,49 @@
+:host {
+  --tonal-fab-container-color: var(--color-surface-container-high);
+  --tonal-fab-label-text-color: var(--color-on-surface);
+
+  --filled-fab-container-color: var(--color-surface);
+  --filled-fab-label-text-color: var(--color-on-surface);
+}
+
+:host([color='surface']) {
+  --tonal-fab-container-color: var(--color-surface-container-high);
+  --tonal-fab-label-text-color: var(--color-on-surface);
+
+  --filled-fab-container-color: var(--color-surface);
+  --filled-fab-label-text-color: var(--color-on-surface);
+}
+
+:host([color='primary']) {
+  --tonal-fab-container-color: var(--color-primary-container);
+  --tonal-fab-label-text-color: var(--color-on-primary-container);
+
+  --filled-fab-container-color: var(--color-primary);
+  --filled-fab-label-text-color: var(--color-on-primary);
+}
+
+:host([color='secondary']) {
+  --tonal-fab-container-color: var(--color-secondary-container);
+  --tonal-fab-label-text-color: var(--color-on-secondary-container);
+
+  --filled-fab-container-color: var(--color-secondary);
+  --filled-fab-label-text-color: var(--color-on-secondary);
+}
+
+:host([color='tertiary']) {
+  --tonal-fab-container-color: var(--color-tertiary-container);
+  --tonal-fab-label-text-color: var(--color-on-tertiary-container);
+
+  --filled-fab-container-color: var(--color-tertiary);
+  --filled-fab-label-text-color: var(--color-on-tertiary);
+}
+
+.fab.variant-tonal {
+  --_fab-container-color: var(--tonal-fab-container-color);
+  --_fab-label-text-color: var(--tonal-fab-label-text-color);
+}
+
+.fab.variant-filled {
+  --_fab-container-color: var(--filled-fab-container-color);
+  --_fab-label-text-color: var(--filled-fab-label-text-color);
+}

package/src/fab/fab-sizes.scss

@@ -0,0 +1,47 @@
+/* Small FAB: 40x40dp, shape-corner-medium */
+:host([size='sm']) {
+  --fab-container-shape: var(--shape-corner-medium);
+}
+
+:host([size='sm']) .fab {
+  width: 2.5rem;
+  height: 2.5rem;
+  --_fab-icon-size: 1.5rem;
+}
+
+/* Standard/Medium FAB: 56x56dp, shape-corner-large (default) */
+:host([size='md']) .fab {
+  width: 3.5rem;
+  height: 3.5rem;
+  --_fab-icon-size: 1.5rem;
+}
+
+/* Large FAB: 96x96dp, shape-corner-extra-large */
+:host([size='lg']) {
+  --fab-container-shape: var(--shape-corner-extra-large);
+}
+
+:host([size='lg']) .fab {
+  width: 6rem;
+  height: 6rem;
+  --_fab-icon-size: 2.25rem;
+}
+
+/* Extended FAB overrides (height fixed, width auto) */
+:host([size='sm']) .fab.extended {
+  width: auto;
+  min-width: 4rem;
+  height: 2.5rem;
+}
+
+:host([size='md']) .fab.extended {
+  width: auto;
+  min-width: 5rem;
+  height: 3.5rem;
+}
+
+:host([size='lg']) .fab.extended {
+  width: auto;
+  min-width: 6rem;
+  height: 6rem;
+}

package/src/fab/fab.scss

@@ -0,0 +1,137 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  display: inline-flex;
+
+  --fab-container-shape: var(--shape-corner-large);
+  --fab-container-elevation-level: 3;
+}
+
+/*
+  * Reset native button/link styles
+  */
+.fab-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.fab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--fab-container-shape);
+  font-family: var(--font-family-sans) !important;
+
+  .fab-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 0;
+    gap: 0.75rem;
+
+    color: var(--_fab-label-text-color);
+    --icon-size: var(--_fab-icon-size);
+    --icon-color: var(--_fab-label-text-color);
+  }
+
+  .fab-label {
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-medium);
+    line-height: 1.25rem;
+    letter-spacing: 0.00625em;
+    white-space: nowrap;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  /*
+    Background layers
+   */
+  .focus-ring {
+    z-index: 2;
+    --focus-ring-container-shape-start-start: var(--fab-container-shape);
+    --focus-ring-container-shape-start-end: var(--fab-container-shape);
+    --focus-ring-container-shape-end-start: var(--fab-container-shape);
+    --focus-ring-container-shape-end-end: var(--fab-container-shape);
+  }
+
+  .ripple {
+    border-radius: var(--fab-container-shape);
+    --ripple-state-opacity: var(--_fab-container-state-opacity, 0);
+    --ripple-pressed-color: var(--_fab-label-text-color);
+  }
+
+  .background {
+    display: block;
+    position: absolute;
+    inset: 0;
+    background-color: var(--_fab-container-color);
+    opacity: var(--_fab-container-opacity, 1);
+    border-radius: var(--fab-container-shape);
+    pointer-events: none;
+  }
+
+  .elevation {
+    --elevation-level: var(--_fab-container-elevation-level, var(--fab-container-elevation-level));
+    transition-duration: 280ms;
+    --elevation-container-shape-start-start: var(--fab-container-shape);
+    --elevation-container-shape-start-end: var(--fab-container-shape);
+    --elevation-container-shape-end-start: var(--fab-container-shape);
+    --elevation-container-shape-end-end: var(--fab-container-shape);
+  }
+
+  &:hover:not(.disabled) {
+    --_fab-container-elevation-level: 4;
+    --_fab-container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(.disabled) {
+    --_fab-container-elevation-level: 3;
+    --_fab-container-state-opacity: 0.12;
+  }
+
+  &.lowered {
+    --fab-container-elevation-level: 1;
+
+    &:hover:not(.disabled) {
+      --_fab-container-elevation-level: 2;
+    }
+
+    &.pressed:not(.disabled) {
+      --_fab-container-elevation-level: 1;
+    }
+  }
+
+  &.disabled {
+    --_fab-container-color: var(--color-on-surface);
+    --_fab-container-opacity: 0.12;
+    --_fab-label-text-color: var(--color-on-surface);
+    --_fab-label-text-opacity: 0.38;
+    --_fab-container-elevation-level: 0;
+
+    .ripple {
+      display: none;
+    }
+
+    .fab-content {
+      opacity: 0.38;
+    }
+  }
+}
+
+/* Extended FAB */
+.fab.extended {
+  padding: 0 1rem;
+  border-radius: var(--fab-container-shape);
+}

package/src/fab/fab.ts

@@ -0,0 +1,214 @@
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import IndividualComponent from '@/IndividualComponent.js';
+import { dispatchActivationClick, isActivationClick } from '@/__utils/dispatch-event-utils.js';
+import { throttle } from '@/__utils/throttle.js';
+import { spread } from '@/__directive/spread.js';
+
+import styles from './fab.scss';
+import colorStyles from './fab-colors.scss';
+import sizeStyles from './fab-sizes.scss';
+import { BaseButton } from '@/button/BaseButton.js';
+
+/**
+ * @label FAB
+ * @tag wc-fab
+ * @rawTag fab
+ *
+ * @summary The FAB (Floating Action Button) represents the primary action on a screen.
+ * @overview
+ * <p>A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the Material Design 3 specification and supports four color roles and two variants.</p>
+ *
+ * @cssprop --fab-container-color: Background color of the FAB container.
+ * @cssprop --fab-label-text-color: Text and icon color of the FAB label.
+ * @cssprop --fab-container-shape: Corner radius of the FAB. Defaults to var(--shape-corner-large).
+ * @cssprop --fab-container-elevation-level: Elevation level of the FAB. Defaults to 3.
+ *
+ * @fires {MouseEvent} click - Dispatched when the FAB is clicked.
+ *
+ * @example
+ * ```html
+ * <wc-fab><wc-icon name="add"></wc-icon></wc-fab>
+ * ```
+ * @tags controls
+ */
+@IndividualComponent
+export class Fab extends BaseButton {
+  static override styles = [styles, colorStyles, sizeStyles];
+
+  #id = crypto.randomUUID();
+  
+
+
+  /**
+   * Optional label text for the extended FAB variant.
+   * When set, the FAB displays both the icon and a text label.
+   */
+  @property({ type: String }) label?: string;
+
+  /**
+   * The color role of the FAB.
+   * `"surface"` uses the surface color role.
+   * `"primary"` uses the primary color role.
+   * `"secondary"` uses the secondary color role.
+   * `"tertiary"` uses the tertiary color role.
+   */
+  @property({ reflect: true }) color: 'surface' | 'primary' | 'secondary' | 'tertiary' = 'surface';
+
+  /**
+   * The style variant of the FAB.
+   * `"tonal"` uses container colors.
+   * `"filled"` uses solid role colors.
+   */
+  @property({ reflect: true }) variant: 'tonal' | 'filled' = 'tonal';
+
+  /**
+   * The size of the FAB.
+   * `"sm"` renders a small FAB (40×40dp).
+   * `"md"` renders a standard FAB (56×56dp). This is the default.
+   * `"lg"` renders a large FAB (96×96dp).
+   */
+  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+
+  /**
+   * If `true`, the FAB is in a lowered (resting) state with reduced elevation.
+   */
+  @property({ type: Boolean, reflect: true }) lowered: boolean = false;
+
+  /**
+   * Additional ARIA attributes to pass to the inner button/anchor element.
+   */
+  @property({ reflect: true })
+  configAria?: { [key: string]: any };
+
+  /**
+   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+   */
+  @property() throttleDelay = 200;
+
+  /**
+   * Tooltip text shown on hover.
+   */
+  @property() tooltip?: string;
+
+  @state()
+  isPressed = false;
+
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  override firstUpdated() {
+    this.__dispatchClickWithThrottle = throttle(
+      this.__dispatchClick,
+      this.throttleDelay,
+    );
+  }
+
+  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {
+    if (this.disabled && this.href) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (!isActivationClick(event) || !this.buttonElement) {
+      return;
+    }
+
+    this.focus();
+    dispatchActivationClick(this.buttonElement);
+  };
+
+  __getDisabledReasonID() {
+    return this.disabled ? `disabled-reason-${this.#id}` : nothing;
+  }
+
+  override render() {
+    const isLink = this.__isLink();
+    const isExtended = !!this.label;
+
+    const cssClasses = {
+      button: true,
+      fab: true,
+      'fab-element': true,
+      [`size-${this.size}`]: true,
+      [`color-${this.color}`]: true,
+      [`variant-${this.variant}`]: true,
+      extended: isExtended,
+      lowered: this.lowered,
+      disabled: this.disabled,
+      pressed: this.isPressed,
+    };
+
+    if (!isLink) {
+      return html`<button
+          class=${classMap(cssClasses)}
+          id="button"
+          type="button"
+          @click=${this.__dispatchClickWithThrottle}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handlePress}
+          @keyup=${this.__handlePress}
+          
+          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
+          ?disabled=${this.disabled}
+          ${spread(this.configAria)}
+        >
+          ${this.__renderFabContent(isExtended)}
+        </button>
+        ${this.__renderTooltip()}`;
+    }
+
+    return html`<a
+        class=${classMap(cssClasses)}
+        id="button"
+        tabindex=${this.disabled ? '-1' : '0'}
+        href=${ifDefined(this.href)}
+        target=${this.target}
+        @click=${this.__dispatchClick}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        role="button"
+
+        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
+        ${spread(this.configAria)}
+      >
+        ${this.__renderFabContent(isExtended)}
+      </a>
+      ${this.__renderTooltip()}`;
+  }
+
+  __renderFabContent(isExtended: boolean) {
+    return html`
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
+
+      <div class="fab-content">
+
+        <slot></slot>
+        ${isExtended
+          ? html`<span class="fab-label">${this.label}</span>`
+          : nothing}
+      </div>
+
+      ${this.__renderDisabledReason(this.softDisabled)}
+    `;
+  }
+
+}

package/src/fab/index.ts

@@ -0,0 +1 @@
+export { Fab } from './fab.js';

package/src/field/field.ts

@@ -1,8 +1,10 @@
 import { html, LitElement, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+
 import styles from './field.scss';
-import { observerSlotChangesWithCallback } from '../utils.js';
 
 /**
  * @label Field

package/src/focus-ring/focus-ring.ts

@@ -20,34 +20,14 @@ export class FocusRing extends LitElement {
 
   @property({ type: String }) for = '';
 
+  private __boundFocusin = this.__focusin.bind(this);
 
-  render() {
-    return nothing;
-  }
-
-  _control?: HTMLElement;
-
-  _focusTarget?: HTMLElement;
+  private __boundFocusout = this.__focusout.bind(this);
 
-  get control() {
-    return this._control || null;
-  }
-
-  set control(control: HTMLElement | null) {
-    if (control) {
-      this._control = control;
-    } else {
-      this.detach();
-    }
-  }
+  private __boundPointerdown = this.__pointerdown.bind(this);
 
-  set forElement(value: HTMLElement | null) {
-    if (value) {
-      this._focusTarget = value;
-      this.attach();
-    } else {      
-      this.detach();
-    }
+  render() {
+    return nothing;
   }
 
   connectedCallback() {
@@ -60,6 +40,22 @@ export class FocusRing extends LitElement {
     super.disconnectedCallback();
   }
 
+  updated(changed: Map<string, unknown>) {
+    if (changed.has('for')) {
+      const prevId = changed.get('for') as string;
+      if (prevId) {
+        const root = this.parentElement?.getRootNode() as ShadowRoot | Document;
+        const prevEl = root?.getElementById(prevId) ?? document.getElementById(prevId);
+        if (prevEl) {
+          prevEl.removeEventListener('focusin', this.__boundFocusin);
+          prevEl.removeEventListener('focusout', this.__boundFocusout);
+          prevEl.removeEventListener('pointerdown', this.__boundPointerdown);
+        }
+      }
+      this.attach();
+    }
+  }
+
   __focusin() {
     const focusTarget = this.__getFocusTarget();
     this.visible = focusTarget?.matches(':focus-visible') ?? false;
@@ -73,35 +69,46 @@ export class FocusRing extends LitElement {
     this.visible = false;
   }
 
+  /**
+   * Resolves the element that should receive focus-ring event listeners by id.
+   * Prefers lookup from the current control's root node, then falls back to a
+   * document-level lookup.
+   *
+   * @returns The resolved focus target, if one can be found.
+   */
   __getFocusTarget(): HTMLElement | undefined {
-
-    if (this._focusTarget) {
-      return this._focusTarget;
+    if (this.for) {
+      const root = this.parentElement?.getRootNode() as ShadowRoot | Document;
+      if (root) {
+        const focusTarget = root.getElementById(this.for);
+        if (focusTarget) {
+          return focusTarget;
+        }
+      }
+      const focusTarget = document.getElementById(this.for);
+      if (focusTarget) {
+        return focusTarget;
+      }
     }
 
-    const focusTarget = document.getElementById(this.for);
-     if (focusTarget) {
-      return focusTarget
-     }
-     return undefined;
+    return undefined;
   }
 
   attach() {
     const focusTarget = this.__getFocusTarget();
     if (focusTarget) {
-      focusTarget.addEventListener('focusin', this.__focusin.bind(this));
-      focusTarget.addEventListener('focusout', this.__focusout.bind(this));
-      focusTarget.addEventListener('pointerdown', this.__pointerdown.bind(this));
+      focusTarget.addEventListener('focusin', this.__boundFocusin);
+      focusTarget.addEventListener('focusout', this.__boundFocusout);
+      focusTarget.addEventListener('pointerdown', this.__boundPointerdown);
     }
   }
 
   detach() {
     const focusTarget = this.__getFocusTarget();
     if (focusTarget) {
-      focusTarget.removeEventListener('focusin', this.__focusin.bind(this));
-      focusTarget.removeEventListener('focusout', this.__focusout.bind(this));
-      focusTarget.removeEventListener('pointerdown', this.__pointerdown.bind(this));
+      focusTarget.removeEventListener('focusin', this.__boundFocusin);
+      focusTarget.removeEventListener('focusout', this.__boundFocusout);
+      focusTarget.removeEventListener('pointerdown', this.__boundPointerdown);
     }
-    this._control = undefined;
   }
 }

package/src/icon/datasource.ts

@@ -1,4 +1,4 @@
-import { createCacheFetch } from '../utils.js';
+import { createCacheFetch } from '@/__utils/cache-fetch.js';
 
 const PROVIDERS: Record<string, (name: string) => string> = {
   'material-symbols': (name: string) =>

package/src/icon/icon.ts

@@ -1,8 +1,10 @@
 import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+import { sanitizeSvg } from '@/__utils/sanitize-svg.js';
+
 import { fetchIcon, fetchSVG } from './datasource.js';
-import { sanitizeSvg } from '../utils.js';
 import styles from './icon.scss';
 
 export type IconProvider = 'material-symbols' | 'material-icons';