@redvars/peacock 3.3.3 → 3.5.0

package/src/button/button-group/button-group.ts

@@ -1,10 +1,11 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import styles from './button-group.scss';
 import { Button } from '../button/button.js';
 import { IconButton } from '../icon-button/icon-button.js';
+import { BaseButton } from '../BaseButton.js';
 
 /**
  * @label Button Group
@@ -15,9 +16,9 @@ import { IconButton } from '../icon-button/icon-button.js';
 
  * @example
  * ```html
- * <wc-button-group>
- *  <wc-icon-button name="home"></wc-icon-button>
- *  <wc-icon-button name="alarm"></wc-icon-button>
+ * <wc-button-group variant="connected">
+ *  <wc-icon-button name="home" toggle selected></wc-icon-button>
+ *  <wc-icon-button name="alarm" toggle></wc-icon-button>
  * </wc-button-group>
  * ```
  *
@@ -40,14 +41,130 @@ export class ButtonGroup extends LitElement {
    */
   @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
 
+  /**
+   * Layout variant of the button group.
+   * `"standard"` shows buttons with a small gap between them.
+   * `"connected"` places buttons with a 2px gap; in horizontal orientation outer buttons have fully
+   * rounded outer corners and middle buttons keep standard rounded corners. In vertical orientation
+   * all buttons keep their default corner shape.
+   * Defaults to `"standard"`.
+   */
+  @property({ reflect: true }) variant: 'standard' | 'connected' = 'standard';
+
+  /**
+   * Orientation of the button group.
+   * `"horizontal"` lays buttons out in a row.
+   * `"vertical"` stacks buttons in a column.
+   * Defaults to `"horizontal"`.
+   */
+  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  /**
+   * Color applied to all buttons in the group.
+   * Possible values are `"primary"`, `"success"`, `"danger"`, `"warning"`, `"surface"`, `"on-surface"`.
+   */
+  @property({ reflect: true }) color?: 'primary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';
+
+  /**
+   * Visual style applied to all buttons in the group.
+   * Possible values are `"filled"`, `"tonal"`, `"outlined"`.
+   */
+  @property({ attribute: 'button-variant', reflect: true }) buttonVariant?: 'filled' | 'tonal' | 'outlined';
+
+  override updated() {
+    this._syncChildren();
+  }
+
+  private _getSlottedElements(): HTMLElement[] {
+    const slot = this.shadowRoot?.querySelector('slot');
+    return (slot?.assignedElements({ flatten: true }) ?? []) as HTMLElement[];
+  }
+
+  private _syncChildren() {
+    const children = this._getSlottedElements();
+    const isVertical = this.orientation === 'vertical';
+
+    children.forEach((child, index) => {
+      const isFirst = index === 0;
+      const isLast = index === children.length - 1;
+      const isOnly = children.length === 1;
+
+      if (this.color && 'color' in child) {
+        (child as BaseButton).color = this.color;
+      }
+
+      if (this.buttonVariant && 'variant' in child) {
+        (child as BaseButton).variant = this.buttonVariant;
+      }
+
+      if (this.variant === 'connected') {
+        child.style.setProperty('--button-container-shape-variant', 'round');
+
+        if (isOnly) {
+          child.style.setProperty('--button-container-shape', 'var(--shape-corner-full)');
+          child.style.removeProperty('--button-container-shape-start-start');
+          child.style.removeProperty('--button-container-shape-end-start');
+          child.style.removeProperty('--button-container-shape-start-end');
+          child.style.removeProperty('--button-container-shape-end-end');
+        } else if (isFirst) {
+          child.style.removeProperty('--button-container-shape');
+          if (isVertical) {
+            // Top button in vertical group: leave default corner shape
+            child.style.removeProperty('--button-container-shape-start-start');
+            child.style.removeProperty('--button-container-shape-start-end');
+            child.style.removeProperty('--button-container-shape-end-start');
+            child.style.removeProperty('--button-container-shape-end-end');
+          } else {
+            // Left button in horizontal group: round left corners, standard right corners
+            child.style.setProperty('--button-container-shape-start-start', 'calc(var(--button-height) / 2)');
+            child.style.setProperty('--button-container-shape-end-start', 'calc(var(--button-height) / 2)');
+            child.style.setProperty('--button-container-shape-start-end', 'var(--shape-corner-medium)');
+            child.style.setProperty('--button-container-shape-end-end', 'var(--shape-corner-medium)');
+          }
+        } else if (isLast) {
+          child.style.removeProperty('--button-container-shape');
+          if (isVertical) {
+            // Bottom button in vertical group: leave default corner shape
+            child.style.removeProperty('--button-container-shape-start-start');
+            child.style.removeProperty('--button-container-shape-start-end');
+            child.style.removeProperty('--button-container-shape-end-start');
+            child.style.removeProperty('--button-container-shape-end-end');
+          } else {
+            // Right button in horizontal group: standard left corners, round right corners
+            child.style.setProperty('--button-container-shape-start-start', 'var(--shape-corner-medium)');
+            child.style.setProperty('--button-container-shape-end-start', 'var(--shape-corner-medium)');
+            child.style.setProperty('--button-container-shape-start-end', 'calc(var(--button-height) / 2)');
+            child.style.setProperty('--button-container-shape-end-end', 'calc(var(--button-height) / 2)');
+          }
+        } else {
+          // Middle buttons: standard rounded corners on all sides
+          child.style.setProperty('--button-container-shape', 'var(--shape-corner-medium)');
+          child.style.removeProperty('--button-container-shape-start-start');
+          child.style.removeProperty('--button-container-shape-end-start');
+          child.style.removeProperty('--button-container-shape-start-end');
+          child.style.removeProperty('--button-container-shape-end-end');
+        }
+      } else {
+        child.style.removeProperty('--button-container-shape');
+        child.style.removeProperty('--button-container-shape-start-start');
+        child.style.removeProperty('--button-container-shape-end-start');
+        child.style.removeProperty('--button-container-shape-start-end');
+        child.style.removeProperty('--button-container-shape-end-end');
+        child.style.removeProperty('--button-container-shape-variant');
+      }
+    });
+  }
+
   render() {
     const cssClasses = {
       'button-group': true,
       [`size-${this.size}`]: true,
+      [`variant-${this.variant}`]: true,
+      [`orientation-${this.orientation}`]: true,
     };
     return html`
       <div class=${classMap(cssClasses)}>
-        <slot></slot>
+        <slot @slotchange=${() => this._syncChildren()}></slot>
       </div>
     `;
   }

package/src/button/icon-button/icon-button-sizes.scss

@@ -2,36 +2,56 @@
 
 .button {
   --_container-padding: 0.75rem;
-  width: var(--_button-height);
+  width: var(--button-height);
   --_container-padding: 0;
 }
-.button.size-xs,
-.button.size-extra-small {
-  --_button-height: 2rem;
+
+:host([size='xs']),
+:host([size='extra-small']) {
+  --button-height: 2rem;
+}
+
+:host([size='xs']) .button,
+:host([size='extra-small']) .button {
   --_button-icon-size: 1rem;
 }
 
 
-.button.size-sm,
-.button.size-small {
-  --_button-height: 2.5rem;
+:host([size='sm']),
+:host([size='small']) {
+  --button-height: 2.5rem;
+}
+
+:host([size='sm']) .button,
+:host([size='small']) .button {
   --_button-icon-size: 1.25rem;
   --_button-icon-label-spacing: 0.5rem;
 }
 
-.button.size-md,
-.button.size-medium {
-  --_button-height: 3.5rem;
+:host([size='md']),
+:host([size='medium']) {
+  --button-height: 3.5rem;
+}
+
+:host([size='md']) .button,
+:host([size='medium']) .button {
   --_button-icon-size: 1.5rem;
 }
 
-.button.size-lg,
-.button.size-large {
-  --_button-height: 6rem;
+:host([size='lg']),
+:host([size='large']) {
+  --button-height: 6rem;
+}
+
+:host([size='lg']) .button,
+:host([size='large']) .button {
   --_button-icon-size: 2rem;
 }
 
-.button.size-xl {
-  --_button-height: 8.5rem;
+:host([size='xl']) {
+  --button-height: 8.5rem;
+}
+
+:host([size='xl']) .button {
   --_button-icon-size: 2.5rem;
 }

package/src/button/icon-button/icon-button.ts

@@ -4,10 +4,10 @@ import { classMap } from 'lit/directives/class-map.js';
 import styles from '../button/button.scss';
 import colorStyles from '../button/button-colors.scss';
 import sizeStyles from './icon-button-sizes.scss';
-import { spread } from '../../spread.js';
+import { spread } from '@/__directive/spread.js';
+import { throttle } from '@/__utils/throttle.js';
 import { BaseButton } from '../BaseButton.js';
 import { IconProvider } from '../../icon/icon.js';
-import { throttle } from '../../utils.js';
 
 /**
  * @label Icon Button
@@ -55,8 +55,6 @@ import { throttle } from '../../utils.js';
 export class IconButton extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 
-  #id = crypto.randomUUID();
-
   #tabindex?: number = 0;
 
   @property({ type: String, reflect: true }) name?: string;
@@ -65,6 +63,26 @@ export class IconButton extends BaseButton {
 
   @property({ type: String }) provider: IconProvider = 'material-symbols';
 
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+    window.addEventListener('mouseup', this.__handlePress);
+  }
+
+  override disconnectedCallback() {
+    window.removeEventListener('mouseup', this.__handlePress);
+    this.removeEventListener('click', this.__dispatchClickWithThrottle);
+    super.disconnectedCallback();
+  }
+  
   override firstUpdated() {
     this.__dispatchClickWithThrottle = throttle(
       this.__dispatchClick,
@@ -97,10 +115,7 @@ export class IconButton extends BaseButton {
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          ?aria-describedby=${(this.disabled || this.softDisabled) &&
-          this.disabledReason
-            ? `disabled-reason-${this.#id}`
-            : null}
+          aria-describedby=${this.__disabledReasonID}
           aria-disabled=${`${this.disabled || this.softDisabled}`}
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
@@ -120,9 +135,7 @@ export class IconButton extends BaseButton {
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-describedby=${this.disabled && this.disabledReason
-          ? `disabled-reason-${this.#id}`
-          : null}
+        aria-describedby=${this.__disabledReasonID}
         aria-disabled=${`${this.disabled}`}
         ${spread(this.configAria)}
       >
@@ -133,7 +146,7 @@ export class IconButton extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} element="buttonElement"></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>

package/src/card/card-colors.scss

@@ -0,0 +1,10 @@
+:host {
+  --filled-card-container-color: var(--color-surface-container-highest);
+  --filled-card-label-text-color: var(--color-on-surface);
+
+  --elevated-card-container-color: var(--color-surface-container-low);
+  --elevated-card-label-text-color: var(--color-on-surface);
+
+  --outlined-card-outline-color: var(--color-outline-variant);
+  --outlined-card-label-text-color:  var(--color-on-surface);
+}

package/src/card/card-content.ts

@@ -0,0 +1,26 @@
+import { LitElement, html, css } from 'lit';
+import IndividualComponent from '../IndividualComponent.js';
+
+/**
+ * @label Card Content
+ * @tag wc-card-content
+ * @rawTag card-content
+ * @parentRawTag 
+ * 
+ * @cssprop --card-content-padding - Inner padding for the card container. Defaults to 1rem.
+ *
+ * ```
+ */
+@IndividualComponent
+export class CardContent extends LitElement {
+  static styles = css`
+      :host {
+          padding-inline: 1rem;
+          display: block;
+      }
+  `;
+
+   render() {
+    return html`<slot></slot>`;
+   }
+}

package/src/card/card.scss

@@ -1,61 +1,241 @@
+@use '../../scss/mixin';
+
+@include mixin.base-styles;
+
 :host {
   display: block;
-  --card-background: var(--color-surface, #ffffff);
-  --card-border-color: transparent;
-  --card-shadow: none;
-  --card-shape: var(--global-shape-corner-large, 1rem);
-  --card-padding: 1rem;
   --card-gap: 0;
+  --card-padding: 0;
+  --card-container-shape: var(--shape-corner-large);
+  --card-container-shape-start-start: unset;
+  --card-container-shape-start-end: unset;
+  --card-container-shape-end-start: unset;
+  --card-container-shape-end-end: unset;
 }
 
+/*
+  * Reset native button/link styles
+  */
 .card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--card-gap);
-  background: var(--card-background);
-  border-radius: var(--card-shape);
-  border: 1px solid var(--card-border-color);
-  box-shadow: var(--card-shadow);
-  color: var(--color-on-surface, inherit);
-  padding: var(--card-padding);
-  transition: box-shadow 150ms ease, transform 150ms ease;
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  text-align: unset;
 }
 
-:host([variant='elevated']) {
-  --card-background: var(--color-surface-container-low, #fdfcfe);
-  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
-}
+.card {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
 
-:host([variant='filled']) {
-  --card-background: var(--color-surface-container-highest, #f5f5f5);
-  --card-shadow: none;
-}
+  --_container-shape-start-start: var(--card-container-shape-start-start, var(--card-container-shape));
+  --_container-shape-start-end: var(--card-container-shape-start-end, var(--card-container-shape));
+  --_container-shape-end-start: var(--card-container-shape-end-start, var(--card-container-shape));
+  --_container-shape-end-end: var(--card-container-shape-end-end, var(--card-container-shape));
 
-:host([variant='outlined']) {
-  --card-border-color: var(--color-outline, rgba(0, 0, 0, 0.12));
-  --card-shadow: none;
-}
 
-:host([elevation='0']) {
-  --card-shadow: none;
-}
+  .card-content {
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: var(--card-padding);
+
+    border: 1px solid transparent; /* Fixes overflow issues with border */
+    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);
+
+    color: var(--_label-text-color);
+    opacity: var(--_label-text-opacity, 1);
+    --icon-color: var(--_label-text-color);
+
+    .slot-container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--card-gap);
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  /*
+    Background layers
+   */
+  .focus-ring {
+    z-index: 2;
+    display: none;
+    --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 {
+    display: none;
+    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);
+    corner-shape: var(--_container-corner-shape-variant);
+    --ripple-state-opacity: var(--_container-state-opacity, 0);
+    --ripple-pressed-color: var(--_container-state-color);
+  }
+
+  .background {
+    z-index: 0;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--_container-color);
+    opacity: var(--_container-opacity, 1);
+
+    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);
+    corner-shape: var(--_container-corner-shape-variant);
+    pointer-events: none;
+  }
+
+  .elevation {
+    --elevation-level: var(--_container-elevation-level);
+    transition-duration: 280ms;
+    --elevation-container-shape-start-start: var(--_container-shape-start-start);
+    --elevation-container-shape-start-end: var(--_container-shape-start-end);
+    --elevation-container-shape-end-start: var(--_container-shape-end-start);
+    --elevation-container-shape-end-end: var(--_container-shape-end-end);
+    --elevation-container-shape-variant: var(--_container-corner-shape-variant);
+  }
+
+  .outline {
+    z-index: 0;
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    border: var(--_outline-width) solid var(--_outline-color);
+    opacity: var(--_outline-opacity, 1);
+    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);
+    corner-shape: var(--_container-corner-shape-variant);
+  }
 
-:host([elevation='1']) {
-  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
-}
 
-:host([elevation='2']) {
-  --card-shadow: var(--shadow-md, 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06));
 }
 
-:host([elevation='3']) {
-  --card-shadow: var(--shadow-lg, 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03));
+.card.actionable {
+
+  .focus-ring,
+  .ripple {
+    display: block;
+  }
+
+  .card-content {
+    pointer-events: none;
+  }
 }
 
-:host([elevation='4']) {
-  --card-shadow: var(--shadow-xl, 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03));
+.card.variant-elevated {
+  --_container-color: var(--elevated-card-container-color);
+  --_label-text-color: var(--elevated-card-label-text-color);
+  --_container-elevation-level: 1;
+
+  --_container-state-color: var(--_label-text-color);
+
+  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+    --_container-elevation-level: 2;
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+    --_container-elevation-level: 1;
+    --_container-state-opacity: 0.12;
+  }
+
+  &.disabled {
+    --_container-color: var(--color-on-surface);
+    --_container-opacity: 0.1;
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
+    }
+  }
 }
 
-:host([elevation='5']) {
-  --card-shadow: var(--shadow-xxl, 0px 24px 48px -12px rgba(16, 24, 40, 0.18));
+
+.card.variant-filled {
+  --_container-color: var(--filled-card-container-color);
+  --_label-text-color: var(--filled-card-label-text-color);
+  --_container-state-color: var(--_label-text-color);
+
+
+  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+    --_container-elevation-level: 1;
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+    --_container-elevation-level: 0;
+    --_container-state-opacity: 0.1;
+  }
+
+  &.disabled {
+    --_container-color: var(--color-on-surface);
+    --_container-opacity: 0.1;
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
+    }
+  }
 }
+
+
+.card.variant-outlined {
+  --_outline-width: var(--outlined-card-outline-width, 0.0675rem);
+  --_outline-color: var(--outlined-card-outline-color);
+  --_label-text-color: var(--outlined-card-label-text-color);
+
+  --_container-state-color: var(--_label-text-color);
+
+  .outline {
+    display: block;
+  }
+
+  &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+    --_container-state-opacity: 0.08;
+  }
+
+  &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+    --_container-state-opacity: 0.12;
+  }
+
+  &.disabled {
+    --_outline-color: var(--color-on-surface);
+    --_label-text-color: var(--color-on-surface);
+    --_label-text-opacity: 0.38;
+    --_outline-opacity: 0.12;
+
+    .ripple {
+      display: none;
+    }
+  }
+}