@redvars/peacock 3.5.0 → 3.5.1

package/src/button/button/button.ts

@@ -1,6 +1,7 @@
 import { html } 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 styles from './button.scss';
 import colorStyles from './button-colors.scss';
@@ -56,8 +57,6 @@ import { BaseButton } from '../BaseButton.js';
 export class Button extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 
-  #tabindex?: number = 0;
-
   /**
    * Icon alignment.
    * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
@@ -65,6 +64,53 @@ export class Button extends BaseButton {
   @property({ attribute: 'icon-align' })
   iconAlign: 'start' | 'end' = 'end';
 
+  /**
+   * Button size.
+   * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+   */
+  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
+
+  /**
+     * Type is preset of color and variant. Type will be only applied.
+     *
+     */
+    @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
+  
+    /**
+     * The visual style of the button.
+     *
+     *  Possible variant values:
+     * `"filled"` is a filled button.
+     * `"outlined"` is an outlined button.
+     * `"text"` is a transparent button.
+     * `"tonal"` is a light color button.
+     * `"elevated"` is elevated button
+     */
+    @property() variant:
+      | 'elevated'
+      | 'filled'
+      | 'tonal'
+      | 'outlined'
+      | 'text'
+      | 'neo' = 'filled';
+  
+    /**
+     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+     */
+    @property({ reflect: true }) color:
+      | 'primary'
+      | 'success'
+      | 'danger'
+      | 'warning'
+      | 'surface'
+      | 'on-surface' = 'primary';
+
+  /**
+   * Additional ARIA attributes to pass to the inner button/anchor element.
+   */
+  @property({ reflect: true })
+  configAria?: { [key: string]: any };
+
   @state()
   private slotHasContent = false;
 
@@ -76,18 +122,6 @@ export class Button extends BaseButton {
     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,
@@ -104,6 +138,22 @@ export class Button extends BaseButton {
     this.__convertTypeToVariantAndColor();
   }
 
+  __convertTypeToVariantAndColor() {
+    if (this.type === 'primary') {
+      this.color = 'primary';
+      this.variant = 'filled';
+    } else if (this.type === 'secondary') {
+      this.color = 'surface';
+      this.variant = 'filled';
+    } else if (this.type === 'tertiary') {
+      this.color = 'primary';
+      this.variant = 'text';
+    } else if (this.type === 'danger') {
+      this.color = 'danger';
+      this.variant = 'filled';
+    }
+  }
+
   override render() {
     const isLink = this.__isLink();
 
@@ -124,14 +174,15 @@ export class Button extends BaseButton {
       return html`<button
           class=${classMap(cssClasses)}
           id="button"
-          tabindex=${this.#tabindex}
           type=${this.htmlType}
           @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          aria-describedby=${this.__disabledReasonID}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
+
+          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
         >
@@ -142,16 +193,18 @@ export class Button extends BaseButton {
     return html`<a
         class=${classMap(cssClasses)}
         id="button"
-        tabindex=${this.#tabindex}
         href=${this.href}
         target=${this.target}
-          @click=${this.__dispatchClickWithThrottle}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-describedby=${this.__disabledReasonID}
-        aria-disabled=${`${this.disabled}`}
+
+        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
@@ -161,7 +214,7 @@ export class Button extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
@@ -177,7 +230,7 @@ export class Button extends BaseButton {
         <slot name="icon"></slot>
       </div>
 
-      ${this.__renderDisabledReason()}
+      ${this.__renderDisabledReason(this.softDisabled)}
     `;
   }
 }

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

@@ -17,8 +17,8 @@ import { BaseButton } from '../BaseButton.js';
  * @example
  * ```html
  * <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-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>
  * ```
  *

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

@@ -1,13 +1,13 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from '../button/button.scss';
 import colorStyles from '../button/button-colors.scss';
 import sizeStyles from './icon-button-sizes.scss';
 import { spread } from '@/__directive/spread.js';
 import { throttle } from '@/__utils/throttle.js';
 import { BaseButton } from '../BaseButton.js';
-import { IconProvider } from '../../icon/icon.js';
 
 /**
  * @label Icon Button
@@ -48,20 +48,59 @@ import { IconProvider } from '../../icon/icon.js';
  *
  * @example
  * ```html
- * <wc-icon-button name="home"></wc-icon-button>
+ * <wc-icon-button><wc-icon name="home"></wc-icon></wc-icon-button>
  * ```
  * @tags display
  */
 export class IconButton extends BaseButton {
   static override styles = [styles, colorStyles, sizeStyles];
 
-  #tabindex?: number = 0;
+  /**
+   * Button size.
+   * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+   */
+  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';
 
-  @property({ type: String, reflect: true }) name?: string;
-
-  @property({ type: String, reflect: true }) src?: string;
+  /**
+     * Type is preset of color and variant. Type will be only applied.
+     *
+     */
+    @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';
+  
+    /**
+     * The visual style of the button.
+     *
+     *  Possible variant values:
+     * `"filled"` is a filled button.
+     * `"outlined"` is an outlined button.
+     * `"text"` is a transparent button.
+     * `"tonal"` is a light color button.
+     * `"elevated"` is elevated button
+     */
+    @property() variant:
+      | 'elevated'
+      | 'filled'
+      | 'tonal'
+      | 'outlined'
+      | 'text'
+      | 'neo' = 'filled';
+  
+    /**
+     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+     */
+    @property({ reflect: true }) color:
+      | 'primary'
+      | 'success'
+      | 'danger'
+      | 'warning'
+      | 'surface'
+      | 'on-surface' = 'primary';
 
-  @property({ type: String }) provider: IconProvider = 'material-symbols';
+  /**
+   * Additional ARIA attributes to pass to the inner button/anchor element.
+   */
+  @property({ reflect: true })
+  configAria?: { [key: string]: any };
 
   override focus() {
     this.buttonElement?.focus();
@@ -70,18 +109,6 @@ export class IconButton extends BaseButton {
   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(
@@ -91,6 +118,22 @@ export class IconButton extends BaseButton {
     this.__convertTypeToVariantAndColor();
   }
 
+  __convertTypeToVariantAndColor() {
+    if (this.type === 'primary') {
+      this.color = 'primary';
+      this.variant = 'filled';
+    } else if (this.type === 'secondary') {
+      this.color = 'surface';
+      this.variant = 'filled';
+    } else if (this.type === 'tertiary') {
+      this.color = 'primary';
+      this.variant = 'text';
+    } else if (this.type === 'danger') {
+      this.color = 'danger';
+      this.variant = 'filled';
+    }
+  }
+
   override render() {
     const isLink = this.__isLink();
 
@@ -109,14 +152,15 @@ export class IconButton extends BaseButton {
       return html`<button
           class=${classMap(cssClasses)}
           id="button"
-          tabindex=${this.#tabindex}
           type=${this.htmlType}
           @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          aria-describedby=${this.__disabledReasonID}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
+          
+          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
         >
@@ -127,16 +171,18 @@ export class IconButton extends BaseButton {
     return html`<a
         class=${classMap(cssClasses)}
         id="button"
-        tabindex=${this.#tabindex}
         href=${this.href}
         target=${this.target}
-        @click=${this.__dispatchClickWithThrottle}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-describedby=${this.__disabledReasonID}
-        aria-disabled=${`${this.disabled}`}
+        
+        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
@@ -146,7 +192,7 @@ export class IconButton extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
@@ -155,14 +201,10 @@ export class IconButton extends BaseButton {
       <wc-skeleton class="skeleton"></wc-skeleton>
 
       <div class="button-content">
-        <wc-icon
-          name=${this.name}
-          src=${this.src}
-          provider=${this.provider}
-        ></wc-icon>
+        <slot></slot>
       </div>
 
-      ${this.__renderDisabledReason()}
+      ${this.__renderDisabledReason(this.softDisabled)}
     `;
   }
 }

package/src/card/card.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, nothing, PropertyValues } from 'lit';
+import { LitElement, html, nothing } 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';
@@ -7,6 +7,7 @@ import { throttle } from '@/__utils/throttle.js';
 import IndividualComponent from '@/IndividualComponent.js';
 import styles from './card.scss';
 import colorStyles from './card-colors.scss';
+import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
 
 type CardVariant = 'elevated' | 'filled' | 'outlined';
 
@@ -28,7 +29,7 @@ type CardVariant = 'elevated' | 'filled' | 'outlined';
  * ```
  */
 @IndividualComponent
-export class Card extends LitElement {
+export class Card extends BaseHyperlinkMixin(LitElement) {
   static styles = [styles, colorStyles];
 
   #id = crypto.randomUUID();
@@ -48,17 +49,6 @@ export class Card extends LitElement {
   @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.
    */
@@ -76,12 +66,8 @@ export class Card extends LitElement {
 
   @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,
@@ -91,52 +77,9 @@ export class Card extends LitElement {
       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 =
@@ -162,10 +105,6 @@ export class Card extends LitElement {
     dispatchActivationClick(this.cardElement);
   };
 
-  __isLink() {
-    return !!this.href;
-  }
-
   __getDisabledReasonID() {
     return this.disabled && this.disabledReason
       ? `disabled-reason-${this.#id}`
@@ -207,6 +146,7 @@ export class Card extends LitElement {
   render() {
 
     const isLink = this.__isLink();
+    const disableSlotTabbing = this.actionable || isLink;
 
     const cssClasses = {
       card: true,
@@ -223,7 +163,7 @@ export class Card extends LitElement {
               class=${classMap(cssClasses)}
               id="card"
               >
-              ${this.renderCardContent()}
+              ${this.renderCardContent(disableSlotTabbing)}
             </div>`;
     }
 
@@ -240,7 +180,7 @@ export class Card extends LitElement {
               aria-disabled=${`${this.disabled}`}
               ?disabled=${this.disabled}
             >
-              ${this.renderCardContent()}
+              ${this.renderCardContent(disableSlotTabbing)}
             </button>`;
     }
     return html`<a
@@ -257,13 +197,13 @@ export class Card extends LitElement {
             ?aria-describedby=${this.__getDisabledReasonID()}
             aria-disabled=${`${this.disabled}`}
           >
-            ${this.renderCardContent()}
+            ${this.renderCardContent(disableSlotTabbing)}
           </a>`;
   }
 
-  renderCardContent() {
+  renderCardContent(disableSlotTabbing: boolean) {
     return html`
-    <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.cardElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='card'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -271,8 +211,8 @@ export class Card extends LitElement {
 
       <div class="card-content">
 
-        <div class="slot-container">
-          <slot @slotchange=${this.__syncSlottedChildrenTabIndex}></slot>
+        <div class="slot-container" ?inert=${disableSlotTabbing}>
+          <slot></slot>
         </div>
 
       </div>

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

@@ -1,8 +1,8 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { select, max, scaleBand, scaleLinear, scaleOrdinal, axisLeft, axisBottom, ScaleOrdinal } from 'd3';
 import IndividualComponent from '@/IndividualComponent.js';
-import * as d3 from 'd3';
 import styles from './chart-bar.scss';
 
 export type ChartBarItem = {
@@ -94,8 +94,7 @@ export class ChartBar extends LitElement {
   }
 
   private _getPaletteScale() {
-    return d3
-      .scaleOrdinal<string, string>()
+    return scaleOrdinal<string, string>()
       .domain(this.data.map(d => d.name))
       .range(chartColors);
   }
@@ -103,7 +102,7 @@ export class ChartBar extends LitElement {
   private _resolveColor(
     name: string,
     override: string | undefined,
-    scale: d3.ScaleOrdinal<string, string>,
+    scale: ScaleOrdinal<string, string>,
   ) {
     return override || scale(name);
   }
@@ -116,7 +115,7 @@ export class ChartBar extends LitElement {
     const margin = Math.max(this.margin, 12);
     const data = this.data ?? [];
 
-    const svg = d3.select(this.svgElement);
+    const svg = select(this.svgElement);
     svg.attr('width', width).attr('height', height);
 
     const innerWidth = Math.max(width - margin * 2, 0);
@@ -134,15 +133,13 @@ export class ChartBar extends LitElement {
       return;
     }
 
-    const xScale = d3
-      .scaleBand<string>()
+    const xScale = scaleBand<string>()
       .domain(data.map(d => d.name))
       .range([0, innerWidth])
       .padding(0.28);
 
-    const maxValue = d3.max(data, d => d.value) ?? 0;
-    const yScale = d3
-      .scaleLinear()
+    const maxValue = max(data, d => d.value) ?? 0;
+    const yScale = scaleLinear()
       .domain([0, maxValue || 1])
       .nice()
       .range([innerHeight, 0]);
@@ -150,8 +147,7 @@ export class ChartBar extends LitElement {
     const yGrid = container.select<SVGGElement>('.y-grid');
     yGrid
       .call(
-        d3
-          .axisLeft(yScale)
+        axisLeft(yScale)
           .ticks(5)
           .tickSize(-innerWidth)
           .tickFormat(() => ''),
@@ -165,8 +161,7 @@ export class ChartBar extends LitElement {
     xAxis
       .attr('transform', `translate(0,${innerHeight})`)
       .call(
-        d3
-          .axisBottom(xScale)
+        axisBottom(xScale)
           .tickSizeOuter(0)
           .tickFormat(name => {
             const entry = data.find(d => d.name === name);