@redvars/peacock 3.3.3 → 3.5.0

package/src/card/card.ts

@@ -1,10 +1,15 @@
-import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import IndividualComponent from '../IndividualComponent.js';
+import { LitElement, html, nothing, PropertyValues } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { throttle } from '@/__utils/throttle.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import styles from './card.scss';
+import colorStyles from './card-colors.scss';
 
 type CardVariant = 'elevated' | 'filled' | 'outlined';
-type CardElevation = 0 | 1 | 2 | 3 | 4 | 5;
+
 /**
  * @label Card
  * @tag wc-card
@@ -24,15 +29,253 @@ type CardElevation = 0 | 1 | 2 | 3 | 4 | 5;
  */
 @IndividualComponent
 export class Card extends LitElement {
-  static styles = [styles];
+  static styles = [styles, colorStyles];
+
+  #id = crypto.randomUUID();
 
   @property({ type: String, reflect: true })
   variant: CardVariant = 'elevated';
 
-  @property({ type: Number, reflect: true })
-  elevation: CardElevation = 1;
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false;
+
+  @property({ type: Boolean, reflect: true })
+  actionable: boolean = false;
+
+  /**
+  * If button is disabled, the reason why it is disabled.
+  */
+  @property({ attribute: 'disabled-reason' })
+  disabledReason: string = '';
+
+  /**
+   * Hyperlink to navigate to on click.
+   */
+  @property({ reflect: true }) href?: string;
+
+  /**
+   * Sets or retrieves the window or frame at which to target content.
+   */
+  @property() target: string = '_self';
+
+
+  /**
+   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+   */
+  @property() throttleDelay = 200;
+
+  /**
+   * States
+   */
+  @state()
+  isPressed = false;
+
+  @state()
+  private slotHasContent = false;
+
+
+  @query('.card') readonly cardElement!: HTMLElement | null;
+
+  @query('slot') readonly contentSlot!: HTMLSlotElement | null;
+
+  #tabindex?: number = 0;
+
+  #slottedTabIndexMap = new WeakMap<HTMLElement, string | null>();
+
+  override firstUpdated() {
+    this.__dispatchClickWithThrottle = throttle(
+      this.__dispatchClick,
+      this.throttleDelay,
+    );
+    observerSlotChangesWithCallback(
+      this.renderRoot.querySelector('slot'),
+      hasContent => {
+        this.slotHasContent = hasContent;
+        this.__syncSlottedChildrenTabIndex();
+        this.requestUpdate();
+      },
+    );
+    this.__syncSlottedChildrenTabIndex();
+  }
+
+  override updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('actionable') || changedProperties.has('href')) {
+      this.__syncSlottedChildrenTabIndex();
+    }
+  }
+
+  __syncSlottedChildrenTabIndex() {
+    if (!this.contentSlot) return;
+
+    const shouldDisableTabbing = this.actionable || this.__isLink();
+    const assignedChildren = this.contentSlot.assignedElements({ flatten: true });
+
+    assignedChildren.forEach(node => {
+      if (!(node instanceof HTMLElement)) return;
+
+      if (shouldDisableTabbing) {
+        if (!this.#slottedTabIndexMap.has(node)) {
+          this.#slottedTabIndexMap.set(node, node.getAttribute('tabindex'));
+        }
+
+        if (node.getAttribute('tabindex') !== '-1') {
+          node.setAttribute('tabindex', '-1');
+        }
+        return;
+      }
+
+      const originalTabIndex = this.#slottedTabIndexMap.get(node);
+      if (originalTabIndex === null) {
+        if (node.hasAttribute('tabindex')) {
+          node.removeAttribute('tabindex');
+        }
+      } else if (originalTabIndex !== undefined) {
+        if (node.getAttribute('tabindex') !== originalTabIndex) {
+          node.setAttribute('tabindex', originalTabIndex);
+        }
+      }
+
+      this.#slottedTabIndexMap.delete(node);
+    });
+  }
+
+  __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.cardElement) {
+      return;
+    }
+
+    this.focus();
+    dispatchActivationClick(this.cardElement);
+  };
+
+  __isLink() {
+    return !!this.href;
+  }
+
+  __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;
+  }
+
+  __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;
+    }
+  };
+
+
+
 
   render() {
-    return html`<div class="card"><slot></slot></div>`;
+
+    const isLink = this.__isLink();
+
+    const cssClasses = {
+      card: true,
+      'card-element': true,
+      [`variant-${this.variant}`]: true,
+      actionable: (this.actionable && !this.disabled) || isLink,
+      disabled: this.disabled,
+      pressed: this.isPressed,
+      'has-content': this.slotHasContent,
+    };
+
+    if (!this.actionable && !isLink) {
+      return html`<div
+              class=${classMap(cssClasses)}
+              id="card"
+              >
+              ${this.renderCardContent()}
+            </div>`;
+    }
+
+    if (!isLink) {
+      return html`<button
+              class=${classMap(cssClasses)}
+              id="card"
+              tabindex=${this.#tabindex}
+              @click=${this.__dispatchClickWithThrottle}
+              @mousedown=${this.__handlePress}
+              @keydown=${this.__handlePress}
+              @keyup=${this.__handlePress}
+              ?aria-describedby=${this.__getDisabledReasonID()}
+              aria-disabled=${`${this.disabled}`}
+              ?disabled=${this.disabled}
+            >
+              ${this.renderCardContent()}
+            </button>`;
+    }
+    return html`<a
+            class=${classMap(cssClasses)}
+            id="card"
+            tabindex=${this.#tabindex}
+            href=${this.href}
+            target=${this.target}
+              @click=${this.__dispatchClickWithThrottle}
+            @mousedown=${this.__handlePress}
+            @keydown=${this.__handlePress}
+            @keyup=${this.__handlePress}
+            role="button"
+            ?aria-describedby=${this.__getDisabledReasonID()}
+            aria-disabled=${`${this.disabled}`}
+          >
+            ${this.renderCardContent()}
+          </a>`;
+  }
+
+  renderCardContent() {
+    return html`
+    <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.cardElement}></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="card-content">
+
+        <div class="slot-container">
+          <slot @slotchange=${this.__syncSlottedChildrenTabIndex}></slot>
+        </div>
+
+      </div>
+      `;
   }
 }

package/src/card/index.ts

@@ -1 +1,2 @@
 export { Card } from './card.js';
+export { CardContent } from './card-content.js';

package/src/chart-bar/chart-bar.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import * as d3 from 'd3';
 import styles from './chart-bar.scss';
 

package/src/chart-bar/chart-stacked-bar.ts

@@ -1,8 +1,10 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import IndividualComponent from 'src/IndividualComponent.js';
 import * as d3 from 'd3';
+
+import IndividualComponent from '@/IndividualComponent.js';
+
 import styles from './chart-bar.scss';
 
 export type ChartStackedSegment = {

package/src/chart-doughnut/chart-doughnut.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import * as d3 from 'd3';
 import styles from './chart-donut.scss';
 

package/src/chart-pie/chart-pie.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import * as d3 from 'd3';
 import styles from './chart-pie.scss';
 

package/src/checkbox/checkbox.ts

@@ -1,7 +1,7 @@
 import { html, LitElement, svg } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { spread } from '../spread.js';
+import { spread } from '@/__directive/spread.js';
 import styles from './checkbox.scss';
 
 /**

package/src/clock/clock.ts

@@ -1,6 +1,6 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import { ClockController } from './ClockController.js';
 
 import styles from './clock.scss';

package/src/code-editor/code-editor.ts

@@ -2,13 +2,13 @@ import { html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import {init} from 'modern-monaco';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import BaseInput from '../input/BaseInput.js';
-import { observeThemeChange } from '../utils/observe-theme-change.js';
-import { redispatchEvent } from '../utils/dispatch-event-utils.js';
+import { observeThemeChange } from '../__utils/observe-theme-change.js';
+import { redispatchEvent } from '../__utils/dispatch-event-utils.js';
 import {
   isDarkMode,
-} from '../utils.js';
+} from '@/__utils/is-dark-mode.js';
 
 import styles from './code-editor.scss';
 
@@ -21,7 +21,7 @@ import styles from './code-editor.scss';
  *
  * @example
  * ```html
- * <wc-code-editor language="javascript"></wc-code-editor>
+ * <wc-code-editor language="javascript" style="width: 80%;--code-editor-height: 9rem;height: 9rem;" ></wc-code-editor>
  * ```
  */
 

package/src/code-highlighter/code-highlighter.ts

@@ -12,8 +12,8 @@ import * as prettierPluginEstree from 'prettier/plugins/estree';
 
 import { BundledLanguage, codeToHtml, ShikiTransformer } from 'shiki';
 
-import IndividualComponent from 'src/IndividualComponent.js';
-import { copyToClipboard } from '../utils/copy-to-clipboard.js';
+import IndividualComponent from '@/IndividualComponent.js';
+import { copyToClipboard } from '@/__utils/copy-to-clipboard.js';
 import styles from './code-highlighter.scss';
 
 const locale = {

package/src/container/container.ts

@@ -16,7 +16,7 @@ type ContainerSize = 'max' | 'xl' | 'lg' | 'md' | 'sm' | 'full';
  *
  * @example
  * ```html
- * <wc-container size="lg">Content</wc-container>
+ * <wc-container style="width: 80%; border: 1px dotted black;" size="md">Content</wc-container>
  * ```
  */
 export class Container extends LitElement {

package/src/date-picker/date-picker.ts

@@ -1,9 +1,12 @@
 import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { redispatchEvent } from 'src/utils/dispatch-event-utils.js';
+
+import { redispatchEvent } from '@/__utils/dispatch-event-utils.js';
+import { spread } from '@/__directive/spread.js';
+
 import BaseInput from '../input/BaseInput.js';
 import styles from './date-picker.scss';
-import { spread } from '../spread.js';
+
 
 /**
  * @label Date Picker

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/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)
   }
@@ -71,7 +71,7 @@
   .empty-state {
     .empty-state-container {
       flex-direction: column;
-      gap: var(--spacing-200);
+      gap: var(--spacing-150);
 
       .illustration {
         height: auto;
@@ -79,6 +79,12 @@
         justify-content: center;
       }
     }
+
+    .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 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 {
@@ -52,7 +52,7 @@ export class EmptyState extends LitElement {
 
   __renderTitle() {
     if (!this.headline) return nothing;
-    return html`<div class="title">${this.headline}</div>`;
+    return html`<div class="headline">${this.headline}</div>`;
   }
 
   __renderDescription() {

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