@redvars/peacock 3.8.0 → 3.8.2

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

@@ -1,11 +1,9 @@
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import IndividualComponent from '@/IndividualComponent.js';
 import styles from './button-group.scss';
-import { Button } from '../button/button.js';
+import { Button, ButtonColor } from '../button/button.js';
 import { IconButton } from '../icon-button/icon-button.js';
-import type { GroupButtonInterface } from '@/button/GroupButtonInterface.js';
 
 /**
  * @label Button Group
@@ -16,9 +14,16 @@ import type { GroupButtonInterface } from '@/button/GroupButtonInterface.js';
 
  * @example
  * ```html
- * <wc-button-group variant="connected">
- *  <wc-icon-button toggle selected><wc-icon name="home"></wc-icon></wc-icon-button>
- *  <wc-icon-button toggle><wc-icon name="alarm"></wc-icon></wc-icon-button>
+ * <wc-button-group connected="true">
+ *  <wc-icon-button toggle="true" shaped="wide">
+ *    <wc-icon name="format_bold"></wc-icon>
+ *  </wc-icon-button>
+ *  <wc-icon-button toggle="true" shaped="wide">
+ *    <wc-icon name="format_italic"></wc-icon>
+ *  </wc-icon-button>
+ *  <wc-icon-button toggle="true" shaped="wide">
+ *    <wc-icon name="format_underlined"></wc-icon>
+ *  </wc-icon-button>
  * </wc-button-group>
  * ```
  *
@@ -39,50 +44,34 @@ class ButtonGroup extends LitElement {
    * Button size.
    * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
    */
-  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+  @property({ reflect: true }) 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.
+   * `"connected"` places buttons with a 2px gap;
+   * rounded outer corners and middle buttons keep standard rounded corners.
    * 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';
+  @property({ type: Boolean, reflect: true }) connected = false;
 
   /**
    * 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';
+  @property({ reflect: true }) color?: ButtonColor;
 
   /**
    * Visual style applied to all buttons in the group.
    * Possible values are `"filled"`, `"tonal"`, `"outlined"`.
    */
-  @property({ attribute: 'button-variant', reflect: true }) buttonVariant?:
+  @property({ attribute: 'variant', reflect: true }) variant?:
     | 'filled'
     | 'tonal'
     | 'outlined';
 
   override updated() {
-    this._syncChildren();
+    this._syncButtonProperties();
   }
 
   private _getSlottedElements(): HTMLElement[] {
@@ -90,122 +79,22 @@ class ButtonGroup extends LitElement {
     return (slot?.assignedElements({ flatten: true }) ?? []) as HTMLElement[];
   }
 
-  private _syncChildren() {
+  private _syncButtonProperties() {
     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 GroupButtonInterface).color = this.color;
-      }
-
-      if (this.buttonVariant && 'variant' in child) {
-        (child as GroupButtonInterface).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');
+      ['color', 'variant', 'toggle', 'size'].forEach(prop => {
+        // @ts-ignore
+        if (this[prop] && prop in child) {
+          // @ts-ignore
+          (child as any)[prop] = this[prop];
         }
-      } 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 @slotchange=${() => this._syncChildren()}></slot>
-      </div>
+      <slot @slotchange=${() => this._syncButtonProperties()}></slot>
     `;
   }
 }

package/src/{fab → button/fab}/fab-colors.scss

@@ -37,13 +37,3 @@
   --filled-fab-container-color: var(--color-tertiary);
   --filled-fab-label-text-color: var(--color-on-tertiary);
 }
-
-:host([variant='tonal']) {
-  --_fab-container-color: var(--tonal-fab-container-color);
-  --_fab-label-text-color: var(--tonal-fab-label-text-color);
-}
-
-:host([variant='filled']) {
-  --_fab-container-color: var(--filled-fab-container-color);
-  --_fab-label-text-color: var(--filled-fab-label-text-color);
-}

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

@@ -0,0 +1,37 @@
+/* Small FAB: 40×40dp, shape-corner-medium */
+:host([size='sm']) {
+  --fab-container-shape: var(--shape-corner-medium);
+  --fab-container-size: 2.5rem;
+  --private-button-icon-size: 1.5rem;
+  --fab-extended-min-width: 4rem;
+
+  --private-button-font-size: 0.875rem;
+  --private-button-font-weight: var(--font-weight-medium);
+  --private-button-line-height: 1.25rem;
+  --private-button-letter-spacing: 0.1px;
+}
+
+/* Standard/Medium FAB: 56×56dp, shape-corner-large (default) */
+:host([size='md']) {
+  --fab-container-size: 3.5rem;
+  --private-button-icon-size: 1.5rem;
+  --fab-extended-min-width: 5rem;
+
+  --private-button-font-size: 0.875rem;
+  --private-button-font-weight: var(--font-weight-medium);
+  --private-button-line-height: 1.25rem;
+  --private-button-letter-spacing: 0.1px;
+}
+
+/* Large FAB: 96×96dp, shape-corner-extra-large */
+:host([size='lg']) {
+  --fab-container-shape: var(--shape-corner-extra-large);
+  --fab-container-size: 6rem;
+  --private-button-icon-size: 2.25rem;
+  --fab-extended-min-width: 6rem;
+
+  --private-button-font-size: 1rem;
+  --private-button-font-weight: var(--font-weight-medium);
+  --private-button-line-height: 1.5rem;
+  --private-button-letter-spacing: 0.15px;
+}

package/src/button/fab/fab.scss

@@ -0,0 +1,172 @@
+@use '../../../scss/mixin';
+
+@include mixin.base-styles;
+
+:host {
+  position: relative;
+  display: inline-flex;
+
+  --fab-container-shape: var(--shape-corner-large);
+  --fab-container-elevation-level: 3;
+
+  --private-button-container-shape-start-start: var(--fab-container-shape);
+  --private-button-container-shape-start-end: var(--fab-container-shape);
+  --private-button-container-shape-end-start: var(--fab-container-shape);
+  --private-button-container-shape-end-end: var(--fab-container-shape);
+  --private-button-container-shape-variant: var(--fab-container-shape-variant);
+}
+
+/*
+  * Reset native button/link styles
+  */
+.native-button {
+  @include mixin.reset-button-styles;
+}
+.native-link {
+  @include mixin.reset-link-styles;
+}
+
+/*
+  * Reset native button/link styles
+  */
+.fab-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.fab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fab-container-size);
+  height: var(--fab-container-size);
+  border-radius: var(--fab-container-shape);
+  font-family: var(--font-family-sans) !important;
+  z-index: 0;
+
+  .fab-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 0;
+    gap: 0.75rem;
+
+    color: var(--private-button-label-text-color);
+    --icon-size: var(--private-button-icon-size);
+    --icon-color: var(--private-button-label-text-color);
+  }
+
+  .fab-label {
+    font-size: var(--private-button-font-size) !important;
+    font-weight: var(--private-button-font-weight) !important;
+    line-height: var(--private-button-line-height) !important;
+    letter-spacing: var(--private-button-letter-spacing) !important;
+    white-space: nowrap;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+/* Extended FAB */
+.fab.extended {
+  width: auto;
+  min-width: var(--fab-extended-min-width);
+  padding: 0 1rem;
+  border-radius: var(--fab-container-shape);
+}
+
+/*
+  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(--private-button-container-state-opacity, 0);
+  --ripple-pressed-color: var(--private-button-label-text-color);
+}
+
+.background {
+  display: block;
+  position: absolute;
+  inset: 0;
+  background-color: var(--private-button-container-color);
+  opacity: var(--private-button-container-opacity, 1);
+  border-radius: var(--fab-container-shape);
+  pointer-events: none;
+}
+
+.elevation {
+  --elevation-level: var(
+    --private-button-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);
+}
+
+/* State management */
+:host:hover:not([disabled]) {
+  --private-button-container-elevation-level: 4;
+  --private-button-container-state-opacity: 0.08;
+}
+
+:host(:active):not([disabled]) {
+  --private-button-container-elevation-level: 3;
+  --private-button-container-state-opacity: 0.12;
+}
+
+:host([lowered]) {
+  --fab-container-elevation-level: 1;
+
+  &:hover:not([disabled]) {
+    --private-button-container-elevation-level: 2;
+  }
+
+  &:active:not([disabled]) {
+    --private-button-container-elevation-level: 1;
+  }
+}
+
+:host([disabled]) {
+  --private-button-container-color: var(--color-on-surface);
+  --private-button-container-opacity: 0.12;
+  --private-button-label-text-color: var(--color-on-surface);
+  --private-button-label-text-opacity: 0.38;
+  --private-button-container-elevation-level: 0;
+
+  .ripple {
+    display: none;
+  }
+
+  .fab-content {
+    opacity: 0.38;
+  }
+}
+
+:host([variant='tonal']) {
+  --private-button-container-color: var(--tonal-fab-container-color);
+  --private-button-label-text-color: var(--tonal-fab-label-text-color);
+}
+
+:host([variant='filled']) {
+  --private-button-container-color: var(--filled-fab-container-color);
+  --private-button-label-text-color: var(--filled-fab-label-text-color);
+}