@redvars/peacock 3.3.3 → 3.4.0

package/src/card/card.ts

@@ -1,10 +1,14 @@
-import { LitElement, html } from 'lit';
-import { property } from 'lit/decorators.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, throttle } from '../utils.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 +28,244 @@ 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 (!isLink) {
+          return html`<button
+              class=${classMap(cssClasses)}
+              id="button"
+              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="button"
+            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/code-editor/code-editor.ts

@@ -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/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/empty-state/empty-state.scss

@@ -64,6 +64,10 @@
     .content {
       width: 50%;
     }
+
+    .headline {
+      @include mixin.get-typography(title-medium);
+    }
   }
 }
 
@@ -79,6 +83,10 @@
         justify-content: center;
       }
     }
+
+    .headline {
+      @include mixin.get-typography(title-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 width="80%" 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/focus-ring/focus-ring.ts

@@ -18,7 +18,7 @@ export class FocusRing extends LitElement {
 
   @property({ type: Boolean, reflect: true }) visible: boolean = false;
 
-  @property({ type: String}) element = '';
+  @property({ type: String }) for = '';
 
 
   render() {
@@ -27,6 +27,8 @@ export class FocusRing extends LitElement {
 
   _control?: HTMLElement;
 
+  _focusTarget?: HTMLElement;
+
   get control() {
     return this._control || null;
   }
@@ -39,6 +41,15 @@ export class FocusRing extends LitElement {
     }
   }
 
+  set forElement(value: HTMLElement | null) {
+    if (value) {
+      this._focusTarget = value;
+      this.attach();
+    } else {      
+      this.detach();
+    }
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this.attach();
@@ -50,8 +61,8 @@ export class FocusRing extends LitElement {
   }
 
   __focusin() {
-    // @ts-ignore
-    this.visible = this._control[this.element].matches(':focus-visible') ?? false;
+    const focusTarget = this.__getFocusTarget();
+    this.visible = focusTarget?.matches(':focus-visible') ?? false;
   }
 
   __focusout() {
@@ -62,27 +73,34 @@ export class FocusRing extends LitElement {
     this.visible = false;
   }
 
+  __getFocusTarget(): HTMLElement | undefined {
+
+    if (this._focusTarget) {
+      return this._focusTarget;
+    }
+
+    const focusTarget = document.getElementById(this.for);
+     if (focusTarget) {
+      return focusTarget
+     }
+     return undefined;
+  }
+
   attach() {
-    // @ts-ignore
-    if (this._control && this._control[this.element]) {
-      // @ts-ignore
-      this._control[this.element].addEventListener('focusin', this.__focusin.bind(this));
-      // @ts-ignore
-      this._control[this.element].addEventListener('focusout', this.__focusin.bind(this));
-      // @ts-ignore
-      this._control[this.element].addEventListener('pointerdown', this.__focusin.bind(this));
+    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));
     }
   }
 
   detach() {
-    // @ts-ignore
-    if (this._control && this._control[this.element]) {
-      // @ts-ignore
-      this._control[this.element].removeEventListener('focusin', this.__focusin);
-      // @ts-ignore
-      this._control[this.element].removeEventListener('focusout', this.__focusout);
-      // @ts-ignore
-      this._control[this.element].removeEventListener('pointerdown', this.__pointerdown);
+    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));
     }
     this._control = undefined;
   }

package/src/index.ts

@@ -5,6 +5,7 @@ export { Divider } from './divider/index.js';
 export { Clock } from './clock/index.js';
 export { Elevation } from './elevation/index.js';
 export { Button, ButtonGroup, IconButton } from './button/index.js';
+export { SegmentedButton, SegmentedButtonGroup } from './segmented-button/index.js';
 
 export { FocusRing } from './focus-ring/index.js';
 export { Ripple } from './ripple/index.js';
@@ -37,7 +38,6 @@ export { CodeEditor } from './code-editor/index.js';
 export { Image } from './image/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
-export { ChartDonut } from './chart-donut/index.js';
 export { ChartDoughnut } from './chart-doughnut/index.js';
 export { ChartPie } from './chart-pie/index.js';
 export { ChartBar, ChartStackedBar } from './chart-bar/index.js';
@@ -47,3 +47,9 @@ export { TreeView, TreeNode } from './tree-view/index.js';
 export { Card } from './card/index.js';
 export { Snackbar } from './snackbar/index.js';
 export { Radio } from './radio/index.js';
+export { BottomSheet } from './bottom-sheet/index.js';
+export { SideSheet } from './side-sheet/index.js';
+export { Select } from './select/index.js';
+export type { SelectOption } from './select/index.js';
+export { SelectOptionElement } from './select/index.js';
+

package/src/menu/menu/menu.scss

@@ -4,23 +4,37 @@
 
 .menu {
   display: flex;
-  position: relative;
+  position: fixed;
   z-index: var(--menu-z-index, 1000);
   min-width: 112px;
   padding-block: var(--spacing-050);
+  transform-origin: top center;
+
+  --_menu-enter-duration: var(--duration-medium1, 250ms);
+  --_menu-exit-duration: var(--duration-short4, 200ms);
+  --_menu-enter-easing: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --_menu-exit-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+
+  transition-property: opacity, transform, visibility;
+  transition-duration: var(--_menu-exit-duration), var(--_menu-exit-duration), 0ms;
+  transition-delay: 0ms, 0ms, var(--_menu-exit-duration);
+  transition-timing-function: var(--_menu-exit-easing), var(--_menu-exit-easing), linear;
 
   &.closed {
-    display: none;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
+    transform: translateY(-4px) scale(0.97);
   }
 
   &.open {
-    display: flex;
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
+    transform: translateY(0) scale(1);
+    transition-duration: var(--_menu-enter-duration), var(--_menu-enter-duration), 0ms;
+    transition-delay: 0ms, 0ms, 0ms;
+    transition-timing-function: var(--_menu-enter-easing), var(--_menu-enter-easing), linear;
   }
 
   .menu-content {
@@ -73,6 +87,13 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .menu {
+    transition: none;
+    transform: none;
+  }
+}
+
 .menu { 
   --_container-shape-start-start: var(--shape-corner-large);
   --_container-shape-start-end: var(--shape-corner-large);

package/src/menu/menu/menu.ts

@@ -181,7 +181,6 @@ export class Menu extends LitElement {
     for (let index = 0; index < enabledItems.length; index += 1) {
       const currentItem = enabledItems[index];
       currentItem.tabIndex = index === this.activeIndex ? 0 : -1;
-      currentItem.selected = index === this.activeIndex;
     }
   }
 
@@ -226,10 +225,23 @@ export class Menu extends LitElement {
     return this._enabledItems()[0] ?? null;
   }
 
+  private _ownsKeyboardEvent(event: KeyboardEvent) {
+    const path = event.composedPath();
+    const ownedItems = this.items;
+
+    return path.some(target => target instanceof MenuItem && ownedItems.includes(target));
+  }
+
   private _onItemActivate = (event: Event) => {
     const customEvent = event as CustomEvent<{ item: MenuItem }>;
+    const { item } = customEvent.detail;
+    const ownedItems = this.items;
+    if (!ownedItems.includes(item)) {
+      return;
+    }
+
     const enabledItems = this._enabledItems();
-    const nextIndex = enabledItems.indexOf(customEvent.detail.item);
+    const nextIndex = enabledItems.indexOf(item);
     if (nextIndex >= 0) {
       this.activeIndex = nextIndex;
       this._syncRovingTabIndex();
@@ -238,10 +250,15 @@ export class Menu extends LitElement {
 
   private _onItemRequestClose = (event: Event) => {
     const customEvent = event as CustomEvent<{
+      item: MenuItem;
       reason: 'click-selection' | 'keydown';
       key?: string;
     }>;
 
+    if (!this.items.includes(customEvent.detail.item)) {
+      return;
+    }
+
     if (customEvent.defaultPrevented) {
       return;
     }
@@ -259,6 +276,10 @@ export class Menu extends LitElement {
       return;
     }
 
+    if (!this._ownsKeyboardEvent(event)) {
+      return;
+    }
+
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();

package/src/menu/menu-item/menu-item.scss

@@ -4,6 +4,7 @@
 
 :host {
   padding-inline: var(--spacing-050);
+  outline: none;
 }
 
 .menu-item {

package/src/menu/menu-item/menu-item.ts

@@ -138,10 +138,6 @@ export class MenuItem extends LitElement {
     return !!this.href;
   }
 
-  get focusTarget() {
-    return this;
-  }
-
   render() {
     const isLink = this.__isLink();
 
@@ -180,11 +176,7 @@ export class MenuItem extends LitElement {
 
   renderContent() {
     return html`
-      <wc-focus-ring
-        class="focus-ring"
-        .control=${this}
-        element="focusTarget"
-      ></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this}></wc-focus-ring>
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
 

package/src/peacock-loader.ts

@@ -11,6 +11,8 @@ import { Divider } from './divider/divider.js';
 import { Button } from './button/button/button.js';
 import { ButtonGroup } from './button/button-group/button-group.js';
 import { IconButton } from './button/icon-button/icon-button.js';
+import { SegmentedButton } from './segmented-button/segmented-button.js';
+import { SegmentedButtonGroup } from './segmented-button/segmented-button-group.js';
 import { Input } from './input/input.js';
 import { Field } from './field/field.js';
 import { NumberField } from './number-field/number-field.js';
@@ -53,7 +55,12 @@ import { Table } from './table/table.js';
 import { Pagination } from './pagination/pagination.js';
 import { TreeView } from './tree-view/tree-view.js';
 import { Card } from './card/card.js';
+import { CardContent } from './card/card-content.js';
 import { Snackbar } from './snackbar/snackbar.js';
+import { BottomSheet } from './bottom-sheet/bottom-sheet.js';
+import { SideSheet } from './side-sheet/side-sheet.js';
+import { Select } from './select/select.js';
+import { SelectOptionElement } from './select/option.js';
 
 const distDirectory = `${import.meta.url}/..`;
 await loadCSS(`${distDirectory}/assets/styles.css`);
@@ -102,6 +109,12 @@ const loaderConfig: LoaderConfig = {
     'wc-button-group': {
       CustomElementClass: ButtonGroup,
     },
+    'wc-segmented-button': {
+      CustomElementClass: SegmentedButton,
+    },
+    'wc-segmented-button-group': {
+      CustomElementClass: SegmentedButtonGroup,
+    },
     'wc-divider': {
       CustomElementClass: Divider,
     },
@@ -141,6 +154,9 @@ const loaderConfig: LoaderConfig = {
     'wc-card': {
       CustomElementClass: Card,
     },
+    'wc-card-content': {
+      CustomElementClass: CardContent,
+    },
     'wc-tag': {
       CustomElementClass: Tag,
     },
@@ -238,6 +254,18 @@ const loaderConfig: LoaderConfig = {
     'wc-snackbar': {
       CustomElementClass: Snackbar,
     },
+    'wc-bottom-sheet': {
+      CustomElementClass: BottomSheet,
+    },
+    'wc-side-sheet': {
+      CustomElementClass: SideSheet,
+    },
+    'wc-select': {
+      CustomElementClass: Select,
+    },
+    'wc-option': {
+      CustomElementClass: SelectOptionElement,
+    },
     'wc-chart-doughnut': {
       importPath: `${distDirectory}/chart-doughnut.js`,
     },

package/src/ripple/ripple.ts

@@ -91,10 +91,26 @@ const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
  *
  * @example
  * ```html
- * <button style="position: relative;">
+ * <style>
+ * .ripple-surface {
+ *   position: relative;
+ *   display: inline-flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   width: 220px;
+ *   height: 64px;
+ *   border-radius: 12px;
+ *   background: var(--color-surface-container-high);
+ *   color: var(--color-on-surface);
+ *   overflow: hidden;
+ *   cursor: pointer;
+ *   user-select: none;
+ * }
+ * </style>
+ * <div class="ripple-surface">
  *   <wc-ripple></wc-ripple>
- *   Click me
- * </button>
+ *   Ripple Effect
+ * </div>
  * ```
  * @tags display
  */