@redvars/peacock 3.6.1 → 3.6.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.1/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.2/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.1/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.6.2/dist/peacock-loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/scss/styles.scss

@@ -46,19 +46,19 @@
   --icon-color: var(--color-on-surface-variant);
 }
 
-::selection {
+.scrollbar-primary::selection {
   color: var(--color-surface);
   background: var(--color-primary);
 }
 
 /* width */
-::-webkit-scrollbar {
+.scrollbar-primary::-webkit-scrollbar {
     background-color: transparent;
     width: var(--scrollbar-width);
 }
 
 /* Handle */
-::-webkit-scrollbar-thumb {
+.scrollbar-primary::-webkit-scrollbar-thumb {
   background-color: var(--color-primary);
   border-radius: calc(var(--scrollbar-width) / 2);
 }

package/scss/tokens.css

@@ -256,7 +256,7 @@
   --font-weight-medium: 500; /* Slightly heavier than regular weight. 500 weight. */
   --font-weight-regular: 400; /* Standard weight for regular text. 400 weight. */
   --font-weight-semi-bold: 600; /* Heavier than medium weight. 600 weight. */
-  --global-avatar-border-radius: var(--shape-corner-full);
+  --global-avatar-container-shape: var(--shape-corner-full);
   --global-badge-color: var(--color-error);
   --scrollbar-width: 8px;
   --shape-corner-extra-large: 28px;

package/src/__controllers/floating-controller.ts

@@ -144,7 +144,9 @@ export class FloatingController implements ReactiveController {
     this.reference.removeEventListener('focusout', this.handleFocusOut);
   }
 
-  private toggle = () => (this.isOpen ? this.close() : this.open());
+  private toggle = () => {
+    this.isOpen ? this.close() : this.open()
+  };
 
   private handleContextMenu = (e: MouseEvent) => {
     e.preventDefault();
@@ -156,13 +158,17 @@ export class FloatingController implements ReactiveController {
     this.close();
   };
 
+  private isEventInsideElement(event: Event, element: HTMLElement) {
+    return event.composedPath().some(target => target === element);
+  }
+
   private handleOutsideClick = (e: MouseEvent) => {
     if (
       this.isOpen &&
       this.reference &&
       this.floating &&
-      !this.reference.contains(e.target as Node) &&
-      !this.floating.contains(e.target as Node)
+      !this.isEventInsideElement(e, this.reference) &&
+      !this.isEventInsideElement(e, this.floating)
     ) {
       this.close();
     }

package/src/avatar/avatar.scss

@@ -6,9 +6,9 @@
   display: inline-block;
   pointer-events: none;
   --avatar-size: 2rem;
-  --avatar-background-color: var(--color-primary);
+  --avatar-container-color: var(--color-primary);
   --avatar-text-color: var(--color-on-primary);
-  --avatar-border-radius: var(--global-avatar-border-radius);
+  --avatar-container-shape: var(--global-avatar-container-shape);
 }
 
 .avatar-container {
@@ -19,7 +19,7 @@
 }
 
 .avatar {
-  border-radius: var(--avatar-border-radius);
+  border-radius: var(--avatar-container-shape);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,7 +27,7 @@
   width: var(--avatar-size);
   height: var(--avatar-size);
   @include mixin.get-typography('body-large-emphasized');
-  background-color: var(--avatar-background-color);
+  background-color: var(--avatar-container-color);
 
   font-size: calc(var(--avatar-size) * 0.5) !important;
 

package/src/avatar/avatar.ts

@@ -10,7 +10,7 @@ import styles from './avatar.scss';
  * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
  *
  * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
- * @cssprop --avatar-background-color - Controls the color of the avatar.
+ * @cssprop --avatar-container-color - Controls the color of the avatar container.
  * @cssprop --avatar-size - Controls the size of the avatar.
  * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
  *

package/src/breadcrumb/breadcrumb/breadcrumb.ts

@@ -30,7 +30,6 @@ export class Breadcrumb extends LitElement {
 
   /**
    * Accessible label for the breadcrumb navigation landmark.
-   * @default "Breadcrumb"
    */
   @property({ type: String }) label = 'Breadcrumb';
 

package/src/button/button/button.scss

@@ -101,8 +101,8 @@ slot::slotted(*) {
     border-end-start-radius: var(--_button_container-shape-end-start);
     border-end-end-radius: var(--_button_container-shape-end-end);
     corner-shape: var(--_button_container-corner-shape-variant);
-    --ripple-state-opacity: var(--_button_container-state-opacity, 0);
-    --ripple-pressed-color: var(--_button_container-state-color);
+    --ripple-state-opacity: var(--_button_state-opacity, 0);
+    --ripple-pressed-color: var(--_button_state-color);
   }
 
   .background {
@@ -226,16 +226,16 @@ slot::slotted(*) {
   --_button_label-text-color: var(--elevated-button-label-text-color);
   --_button_container-elevation-level: 1;
 
-  --_button_container-state-color: var(--_button_label-text-color);
+  --_button_state-color: var(--_button_label-text-color);
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
     --_button_container-elevation-level: 2;
-    --_button_container-state-opacity: 0.08;
+    --_button_state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
     --_button_container-elevation-level: 1;
-    --_button_container-state-opacity: 0.12;
+    --_button_state-opacity: 0.12;
   }
 
   &.disabled {
@@ -254,17 +254,17 @@ slot::slotted(*) {
 .button.variant-filled {
   --_button_container-color: var(--filled-button-container-color);
   --_button_label-text-color: var(--filled-button-label-text-color);
-  --_button_container-state-color: var(--_button_label-text-color);
+  --_button_state-color: var(--_button_label-text-color);
 
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
     --_button_container-elevation-level: 1;
-    --_button_container-state-opacity: 0.08;
+    --_button_state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
     --_button_container-elevation-level: 0;
-    --_button_container-state-opacity: 0.1;
+    --_button_state-opacity: 0.1;
   }
 
   &.disabled {
@@ -284,16 +284,16 @@ slot::slotted(*) {
   --_button_container-color: var(--tonal-button-container-color);
   --_button_label-text-color: var(--tonal-button-label-text-color);
 
-  --_button_container-state-color: var(--_button_label-text-color);
+  --_button_state-color: var(--_button_label-text-color);
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
     --_button_container-elevation-level: 1;
-    --_button_container-state-opacity: 0.08;
+    --_button_state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
     --_button_container-elevation-level: 0;
-    --_button_container-state-opacity: 0.12;
+    --_button_state-opacity: 0.12;
   }
 
   &.disabled {
@@ -314,18 +314,18 @@ slot::slotted(*) {
   --_button_outline-color: var(--outlined-button-outline-color);
   --_button_label-text-color: var(--outlined-button-label-text-color);
 
-  --_button_container-state-color: var(--_button_label-text-color);
+  --_button_state-color: var(--_button_label-text-color);
 
   .outline {
     display: block;
   }
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-state-opacity: 0.08;
+    --_button_state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-state-opacity: 0.12;
+    --_button_state-opacity: 0.12;
   }
 
   &.disabled {
@@ -344,14 +344,14 @@ slot::slotted(*) {
 .button.variant-text {
 
   --_button_label-text-color: var(--text-button-label-text-color);
-  --_button_container-state-color: var(--_button_label-text-color);
+  --_button_state-color: var(--_button_label-text-color);
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-state-opacity: 0.08;
+    --_button_state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-state-opacity: 0.12;
+    --_button_state-opacity: 0.12;
   }
 
   &.disabled {

package/src/button/button/button.ts

@@ -155,7 +155,6 @@ export class Button extends BaseButton {
   }
 
   override render() {
-    const isLink = this.__isLink();
 
     const cssClasses = {
       button: true,
@@ -170,7 +169,7 @@ export class Button extends BaseButton {
       [`icon-align-${this.iconAlign}`]: true,
     };
 
-    if (!isLink) {
+    if (!this.__isLink()) {
       return html`<button
           class=${classMap(cssClasses)}
           id="button"

package/src/card/card.ts

@@ -189,7 +189,7 @@ export class Card extends BaseHyperlinkMixin(LitElement) {
             tabindex=${this.#tabindex}
             href=${this.href}
             target=${this.target}
-              @click=${this.__dispatchClickWithThrottle}
+            @click=${this.__dispatchClickWithThrottle}
             @mousedown=${this.__handlePress}
             @keydown=${this.__handlePress}
             @keyup=${this.__handlePress}

package/src/chip/chip/chip.scss

@@ -6,24 +6,33 @@
   display: inline-block;
   --chip-container-color: var(--color-surface);
   --chip-label-text-color: var(--color-on-surface);
-  --chip-outline-color: var(--color-outline);
+  --chip-outline-color: var(--color-outline-variant);
   --chip-container-shape: var(--shape-corner-small);
+
+  --chip-container-padding: 1rem;
+  /* 8dp */
 }
 
-:host-context([data-theme="dark"]) {
-  --chip-hover-color: var(--color-primary-30);
+/*
+  * Reset native button/link styles
+  */
+.button {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  text-decoration: none;
 }
 
 .chip {
   position: relative;
   display: inline-flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
   height: var(--chip-height, var(--_chip-height, 2rem));
-  padding: 0 var(--_container-padding, 1rem);
   width: 100%;
-  border-radius: var(--chip-container-shape);
+  cursor: pointer;
 
   .tag-content {
     position: relative;
@@ -32,86 +41,151 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--chip-label-text-color);
-    @include mixin.get-typography(label-small);
-    gap: .5rem;
+    padding-inline: var(--chip-container-padding);
+    color: var(--_chip-text-color);
+    opacity: var(--_chip-text-opacity, 1);
+    @include mixin.get-typography(label-large);
+
+    .label-container {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
 
-    .tag-image {
-      width: 1.125rem;
-      height: 1.125rem;
-      border-radius: 100%;
-      background: var(--chip-hover-color);
-    }
+    .close-btn {
+      height: 100%;
+      padding: 0;
+      padding-inline: calc(var(--chip-container-padding) / 2);
+      margin: 0;
+      border: none;
+      background: transparent;
+      line-height: 0;
+      cursor: pointer;
 
-  }
+      .close-btn-icon {
+        --icon-size: 1rem;
+        --icon-color: var(--_chip-text-color);
+      }
+
+      &:hover {
+        background: var(--chip-hover-color);
+      }
+    }
 
-  .close-btn {
-    border-radius: 12px;
-    padding: 0;
-    margin: 0;
-    border: none;
-    background: transparent;
-    line-height: 0;
-    cursor: pointer;
-    --icon-size: 1rem;
-
-    .close-btn-icon {
+    .icon-slot-container {
+      height: 100%;
+      display: flex;
+      align-items: center;
       --icon-size: 1rem;
+      --icon-color: var(--color-primary);
     }
 
-    &:hover {
-      background: var(--chip-hover-color);
+  }
 
-      .close-btn-icon {
-        color: var(--background);
-      }
-    }
+  .focus-ring {
+    z-index: 2;
+    display: block;
+    --focus-ring-container-shape: var(--chip-container-shape);
+  }
+
+  .ripple {
+    display: block;
+    border-radius: var(--chip-container-shape);
+    --ripple-state-opacity: var(--_chip-state-opacity, 0);
+    --ripple-pressed-color: var(--_chip-state-color);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
   }
 
+  &.dismissible .tag-content {
+    padding-inline-end: 0;
+  }
+
+  &.dismissible.actionable .tag-content {
+    padding-inline-end: calc(var(--chip-container-padding) / 2);
+  }
+
+  &.icon-slot-has-content .tag-content, &.selected .tag-content {
+    padding-inline-start: 0;
+  }
+
+  &.icon-slot-has-content .icon-slot-container, &.selected .icon-slot-container {
+    padding-inline: calc(var(--chip-container-padding) / 2);
+  }
+
+
+
   /**
    * Tag background layers
    */
   .background {
     display: block;
     position: absolute;
+    left: 0;
     width: 100%;
     height: 100%;
-    border-radius: inherit;
+    border-radius: var(--chip-container-shape);
+    
 
-    background: var(--chip-container-color);
+    background: var(--_chip-container-color);
     pointer-events: none;
   }
 
   .outline {
+    z-index: 0;
     display: block;
     position: absolute;
+    left: 0;
     width: 100%;
     height: 100%;
-    border-radius: inherit;
+    border-radius: var(--chip-container-shape);
     border: 1px solid var(--chip-outline-color);
   }
 
   .elevation {
     --elevation-level: 0;
     transition-duration: 280ms;
-    border-radius: inherit;
+    --elevation-container-shape: var(--chip-container-shape);
   }
 
+}
 
-  &.dismissible .tag-content {
-    padding-inline-end: .25rem;
+
+/** Color state management */
+.chip {
+  --_chip-container-color: var(--chip-container-color);
+  --_chip-text-color: var(--chip-label-text-color);
+  --_chip-state-color: var(--_chip-text-color);
+
+  &:hover {
+    --_chip-state-opacity: 0.08;
   }
 
+  &.pressed {
+    --_chip-state-opacity: 0.12;
+  }
+  
   &.selected {
-    color: var(--background);
-    background: var(--chip-hover-color);
+    --_chip-container-color: var(--color-secondary-container);
+    --_chip-text-color: var(--color-on-secondary-container);
+  }
 
-    .close-btn-icon {
-      color: var(--background);
+  &.disabled {
+    --_chip-container-color: var(--color-on-surface);
+    --_chip-container-opacity: 0.1;
+    --_chip-text-color: var(--color-on-surface);
+    --_chip-text-opacity: 0.38;
+
+    .ripple {
+      display: none;
     }
   }
-}
+}