@redvars/peacock 3.6.1 → 3.6.3

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.3",
   "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/mixin.scss

@@ -8,6 +8,29 @@
   }
 }
 
+@mixin reset-button-styles {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+
+@mixin reset-link-styles {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    text-decoration: none;
+    color: inherit;
+  }
+}
+
 @mixin get-typography($name) {
   font-family: var(--typography-#{$name}-font-family) !important;
   font-size:  var(--typography-#{$name}-font-size) !important;

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-sizes.scss

@@ -8,8 +8,8 @@
 
 :host([size='xs']) .button,
 :host([size='extra-small']) .button {
-  --_button-icon-size: 1rem;
-  --_button_container-padding: 0.75rem;
+  --private-button-icon-size: 1rem;
+  --private-button-container-padding: 0.75rem;
 
   font-size:  0.875rem !important;
   font-weight: var(--font-weight-medium) !important;
@@ -25,9 +25,9 @@
 
 :host([size='sm']) .button,
 :host([size='small']) .button {
-  --_button-icon-size: 1.25rem;
-  --_button_container-padding: 1rem;
-  --_button-icon-label-spacing: 0.5rem;
+  --private-button-icon-size: 1.25rem;
+  --private-button-container-padding: 1rem;
+  --private-button-icon-label-spacing: 0.5rem;
 
   font-size:  0.875rem !important;
   font-weight: var(--font-weight-medium) !important;
@@ -42,8 +42,8 @@
 
 :host([size='md']) .button,
 :host([size='medium']) .button {
-  --_button-icon-size: 1.5rem;
-  --_button_container-padding: 1.5rem;
+  --private-button-icon-size: 1.5rem;
+  --private-button-container-padding: 1.5rem;
 
   font-size:  1rem !important;
   font-weight: var(--font-weight-medium) !important;
@@ -58,8 +58,8 @@
 
 :host([size='lg']) .button,
 :host([size='large']) .button {
-  --_button-icon-size: 2rem;
-  --_button_container-padding: 3rem;
+  --private-button-icon-size: 2rem;
+  --private-button-container-padding: 3rem;
 
   font-size:  1.5rem !important;
   font-weight: var(--font-weight-regular) !important;
@@ -74,8 +74,8 @@
 
 :host([size='xl']) .button,
 :host([size='extra-large']) .button {
-  --_button-icon-size: 2.5rem;
-  --_button_container-padding: 4rem;
+  --private-button-icon-size: 2.5rem;
+  --private-button-container-padding: 4rem;
 
   font-size:  2rem !important;
   font-weight: var(--font-weight-regular) !important;

package/src/button/button/button.scss

@@ -23,20 +23,18 @@
   * These variables are used internally within the button component
   */
 slot::slotted(*) {
-  --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_button_label-text-color);
+  --icon-size: var(--button-icon-size, var(--private-button-icon-size));
+  --icon-color: var(--private-button-label-text-color);
 }
 
 /*
   * Reset native button/link styles
   */
-.button-element {
-  background: transparent;
-  border: none;
-  appearance: none;
-  margin: 0;
-  outline: none;
-  text-decoration: none;
+.native-button {
+  @include mixin.reset-button-styles;
+}
+.native-link {
+  @include mixin.reset-link-styles;
 }
 
 .button {
@@ -46,16 +44,16 @@ slot::slotted(*) {
   align-items: center;
   justify-content: center;
   height: var(--button-height);
-  padding: 0 var(--button-container-padding, var(--_button_container-padding));
+  padding: 0 var(--button-container-padding, var(--private-button-container-padding));
   width: 100%;
   font-family: var(--font-family-sans) !important;
   cursor: pointer;
 
-  --_button_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape));
-  --_button_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape));
-  --_button_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape));
-  --_button_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape));
-  --_button_container-corner-shape-variant: var(--button-container-shape-variant);
+  --private-button-container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape));
+  --private-button-container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape));
+  --private-button-container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape));
+  --private-button-container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape));
+  --private-button-container-shape-variant: var(--button-container-shape-variant);
 
 
   .button-content {
@@ -63,15 +61,15 @@ slot::slotted(*) {
     align-items: center;
     justify-content: center;
     pointer-events: none;
-    gap: var(--_button-icon-label-spacing);
+    gap: var(--private-button-icon-label-spacing);
     width: 100%;
     height: 100%;
     z-index: 0;
 
-    color: var(--_button_label-text-color);
-    opacity: var(--_button_label-text-opacity, 1);
-    --icon-size: var(--button-icon-size, var(--_button-icon-size));
-    --icon-color: var(--_button_label-text-color);
+    color: var(--private-button-label-text-color);
+    opacity: var(--private-button-label-text-opacity, 1);
+    --icon-size: var(--button-icon-size, var(--private-button-icon-size));
+    --icon-color: var(--private-button-label-text-color);
 
     .slot-container {
       display: none;
@@ -88,21 +86,15 @@ slot::slotted(*) {
    */
   .focus-ring {
     z-index: 2;
-    --focus-ring-container-shape-start-start: var(--_button_container-shape-start-start);
-    --focus-ring-container-shape-start-end: var(--_button_container-shape-start-end);
-    --focus-ring-container-shape-end-start: var(--_button_container-shape-end-start);
-    --focus-ring-container-shape-end-end: var(--_button_container-shape-end-end);
-    --focus-ring-container-shape-variant: var(--_button_container-corner-shape-variant);
+
+    @include mixin.copy-container-shape(private-button, focus-ring);
   }
 
   .ripple {
-    border-start-start-radius: var(--_button_container-shape-start-start);
-    border-start-end-radius: var(--_button_container-shape-start-end);
-    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);
+    @include mixin.apply-container-shape(private-button);
+
+    --ripple-state-opacity: var(--private-button-state-opacity, 0);
+    --ripple-pressed-color: var(--private-button-state-color);    
   }
 
   .background {
@@ -111,14 +103,9 @@ slot::slotted(*) {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--_button_container-color);
-    opacity: var(--_button_container-opacity, 1);
-
-    border-start-start-radius: var(--_button_container-shape-start-start);
-    border-start-end-radius: var(--_button_container-shape-start-end);
-    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);
+    background-color: var(--private-button-container-color);
+    opacity: var(--private-button-container-opacity, 1);
+    @include mixin.apply-container-shape(private-button);
     pointer-events: none;
   }
 
@@ -130,36 +117,27 @@ slot::slotted(*) {
     position: absolute;
     top: 0;
     left: 0;
-    --skeleton-container-shape-start-start: var(--_button_container-shape-start-start);
-    --skeleton-container-shape-start-end: var(--_button_container-shape-start-end);
-    --skeleton-container-shape-end-start: var(--_button_container-shape-end-start);
-    --skeleton-container-shape-end-end: var(--_button_container-shape-end-end);
-    --skeleton-container-shape-variant: var(--_button_container-corner-shape-variant);
+
+    @include mixin.copy-container-shape(private-button, skeleton);
   }
 
   .elevation {
-    --elevation-level: var(--_button_container-elevation-level);
     transition-duration: 280ms;
-    --elevation-container-shape-start-start: var(--_button_container-shape-start-start);
-    --elevation-container-shape-start-end: var(--_button_container-shape-start-end);
-    --elevation-container-shape-end-start: var(--_button_container-shape-end-start);
-    --elevation-container-shape-end-end: var(--_button_container-shape-end-end);
-    --elevation-container-shape-variant: var(--_button_container-corner-shape-variant);
+    @include mixin.copy-container-shape(private-button, elevation);
+
+    --elevation-level: var(--private-button-container-elevation-level);
   }
 
   .neo-background {
     display: none;
     position: absolute;
     background: var(--color-inverse-surface);
-    border-start-start-radius: var(--_button_container-shape-start-start);
-    border-start-end-radius: var(--_button_container-shape-start-end);
-    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);
     width: 100%;
     height: 100%;
     pointer-events: none;
     transform: translateX(0.25rem) translateY(0.25rem);
+
+    @include mixin.apply-container-shape(private-button);
   }
 
   .outline {
@@ -170,13 +148,9 @@ slot::slotted(*) {
     width: 100%;
     height: 100%;
     pointer-events: none;
-    border: var(--_button_outline-width) solid var(--_button_outline-color);
-    opacity: var(--_button_outline-opacity, 1);
-    border-start-start-radius: var(--_button_container-shape-start-start);
-    border-start-end-radius: var(--_button_container-shape-start-end);
-    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);
+    border: var(--private-button-outline-width) solid var(--private-button-outline-color);
+    opacity: var(--private-button-outline-opacity, 1);
+    @include mixin.apply-container-shape(private-button);
   }
 
 
@@ -222,27 +196,27 @@ slot::slotted(*) {
  */
 
 .button.variant-elevated {
-  --_button_container-color: var(--elevated-button-container-color);
-  --_button_label-text-color: var(--elevated-button-label-text-color);
-  --_button_container-elevation-level: 1;
+  --private-button-container-color: var(--elevated-button-container-color);
+  --private-button-label-text-color: var(--elevated-button-label-text-color);
+  --private-button-container-elevation-level: 1;
 
-  --_button_container-state-color: var(--_button_label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 2;
-    --_button_container-state-opacity: 0.08;
+    --private-button-container-elevation-level: 2;
+    --private-button-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 1;
-    --_button_container-state-opacity: 0.12;
+    --private-button-container-elevation-level: 1;
+    --private-button-state-opacity: 0.12;
   }
 
   &.disabled {
-    --_button_container-color: var(--color-on-surface);
-    --_button_container-opacity: 0.1;
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
+    --private-button-container-color: var(--color-on-surface);
+    --private-button-container-opacity: 0.1;
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -252,26 +226,26 @@ 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);
+  --private-button-container-color: var(--filled-button-container-color);
+  --private-button-label-text-color: var(--filled-button-label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 1;
-    --_button_container-state-opacity: 0.08;
+    --private-button-container-elevation-level: 1;
+    --private-button-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 0;
-    --_button_container-state-opacity: 0.1;
+    --private-button-container-elevation-level: 0;
+    --private-button-state-opacity: 0.1;
   }
 
   &.disabled {
-    --_button_container-color: var(--color-on-surface);
-    --_button_container-opacity: 0.1;
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
+    --private-button-container-color: var(--color-on-surface);
+    --private-button-container-opacity: 0.1;
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -281,26 +255,26 @@ slot::slotted(*) {
 
 
 .button.variant-tonal {
-  --_button_container-color: var(--tonal-button-container-color);
-  --_button_label-text-color: var(--tonal-button-label-text-color);
+  --private-button-container-color: var(--tonal-button-container-color);
+  --private-button-label-text-color: var(--tonal-button-label-text-color);
 
-  --_button_container-state-color: var(--_button_label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 1;
-    --_button_container-state-opacity: 0.08;
+    --private-button-container-elevation-level: 1;
+    --private-button-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-elevation-level: 0;
-    --_button_container-state-opacity: 0.12;
+    --private-button-container-elevation-level: 0;
+    --private-button-state-opacity: 0.12;
   }
 
   &.disabled {
-    --_button_container-color: var(--color-on-surface);
-    --_button_container-opacity: 0.1;
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
+    --private-button-container-color: var(--color-on-surface);
+    --private-button-container-opacity: 0.1;
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -310,29 +284,29 @@ slot::slotted(*) {
 
 
 .button.variant-outlined {
-  --_button_outline-width: var(--outlined-button-outline-width, 0.0675rem);
-  --_button_outline-color: var(--outlined-button-outline-color);
-  --_button_label-text-color: var(--outlined-button-label-text-color);
+  --private-button-outline-width: var(--outlined-button-outline-width, 0.0675rem);
+  --private-button-outline-color: var(--outlined-button-outline-color);
+  --private-button-label-text-color: var(--outlined-button-label-text-color);
 
-  --_button_container-state-color: var(--_button_label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 
   .outline {
     display: block;
   }
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-state-opacity: 0.08;
+    --private-button-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-state-opacity: 0.12;
+    --private-button-state-opacity: 0.12;
   }
 
   &.disabled {
-    --_button_outline-color: var(--color-on-surface);
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
-    --_button_outline-opacity: 0.12;
+    --private-button-outline-color: var(--color-on-surface);
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
+    --private-button-outline-opacity: 0.12;
 
     .ripple {
       display: none;
@@ -343,20 +317,20 @@ slot::slotted(*) {
 
 .button.variant-text {
 
-  --_button_label-text-color: var(--text-button-label-text-color);
-  --_button_container-state-color: var(--_button_label-text-color);
+  --private-button-label-text-color: var(--text-button-label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-state-opacity: 0.08;
+    --private-button-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_container-state-opacity: 0.12;
+    --private-button-state-opacity: 0.12;
   }
 
   &.disabled {
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -366,11 +340,11 @@ slot::slotted(*) {
 
 .button.variant-neo {
 
-  --_button_container-color: var(--neo-button-container-color);
-  --_button_label-text-color: var(--neo-button-label-text-color);
+  --private-button-container-color: var(--neo-button-container-color);
+  --private-button-label-text-color: var(--neo-button-label-text-color);
 
-  --_button_outline-width: var(--outlined-button-outline-width, 0.125rem);
-  --_button_outline-color: var(--color-inverse-surface);
+  --private-button-outline-width: var(--outlined-button-outline-width, 0.125rem);
+  --private-button-outline-color: var(--color-inverse-surface);
 
   .outline {
     display: block;
@@ -396,11 +370,11 @@ slot::slotted(*) {
   }
 
   &.disabled {
-    --_button_container-color: var(--color-on-surface);
-    --_button_container-opacity: 0.1;
-    --_button_label-text-color: var(--color-on-surface);
-    --_button_label-text-opacity: 0.38;
-    --_button_outline-opacity: 0.12;
+    --private-button-container-color: var(--color-on-surface);
+    --private-button-container-opacity: 0.1;
+    --private-button-label-text-color: var(--color-on-surface);
+    --private-button-label-text-opacity: 0.38;
+    --private-button-outline-opacity: 0.12;
 
 
     .ripple {