@redvars/peacock 3.4.0 → 3.5.1

package/src/button/button/button.ts

@@ -1,12 +1,14 @@
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import IndividualComponent from 'src/IndividualComponent.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';
 import sizeStyles from './button-sizes.scss';
-import { observerSlotChangesWithCallback, throttle } from '../../utils.js';
-import { spread } from '../../spread.js';
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { throttle } from '@/__utils/throttle.js';
+import { spread } from '@/__directive/spread.js';
 import { BaseButton } from '../BaseButton.js';
 
 /**
@@ -55,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"`.
@@ -64,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;
 
@@ -75,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,
@@ -103,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();
 
@@ -123,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.__getDisabledReasonID()}
-          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)}
         >
@@ -141,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.__getDisabledReasonID()}
-        aria-disabled=${`${this.disabled}`}
+
+        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
@@ -160,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>
@@ -176,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

@@ -1,7 +1,7 @@
 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';
@@ -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>
  * ```
  *
@@ -61,9 +61,9 @@ export class ButtonGroup extends LitElement {
 
   /**
    * Color applied to all buttons in the group.
-   * Possible values are `"primary"`, `"success"`, `"danger"`, `"warning"`, `"light"`, `"dark"`.
+   * Possible values are `"primary"`, `"success"`, `"danger"`, `"warning"`, `"surface"`, `"on-surface"`.
    */
-  @property({ reflect: true }) color?: 'primary' | 'success' | 'danger' | 'warning' | 'light' | 'dark';
+  @property({ reflect: true }) color?: 'primary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';
 
   /**
    * Visual style applied to all buttons in the 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 '../../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
@@ -48,22 +48,59 @@ import { throttle } from '../../utils.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];
 
-  #id = crypto.randomUUID();
-
-  #tabindex?: number = 0;
-
-  @property({ type: String, reflect: true }) name?: string;
-
-  @property({ type: String, reflect: true }) src?: string;
-
-  @property({ type: String }) provider: IconProvider = 'material-symbols';
+  /**
+   * 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 };
 
   override focus() {
     this.buttonElement?.focus();
@@ -72,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(
@@ -93,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();
 
@@ -111,17 +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.disabled || this.softDisabled) &&
-          this.disabledReason
-            ? `disabled-reason-${this.#id}`
-            : null}
-          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)}
         >
@@ -132,18 +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.disabled && this.disabledReason
-          ? `disabled-reason-${this.#id}`
-          : null}
-        aria-disabled=${`${this.disabled}`}
+        
+        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
@@ -153,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>
@@ -162,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,11 +1,13 @@
-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';
-import { observerSlotChangesWithCallback, throttle } from '../utils.js';
-import IndividualComponent from '../IndividualComponent.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';
+import BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';
 
 type CardVariant = 'elevated' | 'filled' | 'outlined';
 
@@ -27,37 +29,26 @@ type CardVariant = 'elevated' | 'filled' | 'outlined';
  * ```
  */
 @IndividualComponent
-export class Card extends LitElement {
+export class Card extends BaseHyperlinkMixin(LitElement) {
   static styles = [styles, colorStyles];
 
-   #id = crypto.randomUUID();
-   
+  #id = crypto.randomUUID();
+
   @property({ type: String, reflect: true })
   variant: CardVariant = 'elevated';
 
-  @property({type: Boolean, reflect: true})
+  @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.
-   */
+  /**
+  * 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.
    */
@@ -75,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,
@@ -90,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 =
@@ -144,26 +88,22 @@ export class Card extends LitElement {
     };
 
   __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);
-    };
+    // 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;
+    }
 
-  __isLink() {
-    return !!this.href;
-  }
+    if (!isActivationClick(event) || !this.cardElement) {
+      return;
+    }
+
+    this.focus();
+    dispatchActivationClick(this.cardElement);
+  };
 
   __getDisabledReasonID() {
     return this.disabled && this.disabledReason
@@ -201,11 +141,12 @@ export class Card extends LitElement {
   };
 
 
-    
+
 
   render() {
 
     const isLink = this.__isLink();
+    const disableSlotTabbing = this.actionable || isLink;
 
     const cssClasses = {
       card: true,
@@ -217,10 +158,19 @@ export class Card extends LitElement {
       'has-content': this.slotHasContent,
     };
 
+    if (!this.actionable && !isLink) {
+      return html`<div
+              class=${classMap(cssClasses)}
+              id="card"
+              >
+              ${this.renderCardContent(disableSlotTabbing)}
+            </div>`;
+    }
+
     if (!isLink) {
-          return html`<button
+      return html`<button
               class=${classMap(cssClasses)}
-              id="button"
+              id="card"
               tabindex=${this.#tabindex}
               @click=${this.__dispatchClickWithThrottle}
               @mousedown=${this.__handlePress}
@@ -230,12 +180,12 @@ export class Card extends LitElement {
               aria-disabled=${`${this.disabled}`}
               ?disabled=${this.disabled}
             >
-              ${this.renderCardContent()}
+              ${this.renderCardContent(disableSlotTabbing)}
             </button>`;
-        }
-        return html`<a
+    }
+    return html`<a
             class=${classMap(cssClasses)}
-            id="button"
+            id="card"
             tabindex=${this.#tabindex}
             href=${this.href}
             target=${this.target}
@@ -247,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>
@@ -261,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>