@redvars/peacock 3.6.2 → 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.2",
+  "version": "3.6.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

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/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_state-opacity, 0);
-    --ripple-pressed-color: var(--_button_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_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_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_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_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_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_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_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_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_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_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_state-opacity: 0.08;
+    --private-button-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_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_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_state-opacity: 0.08;
+    --private-button-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_button_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 {

package/src/button/button/button.ts

@@ -74,36 +74,36 @@ export class Button extends BaseButton {
      * 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 }) 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.
@@ -156,9 +156,8 @@ export class Button extends BaseButton {
 
   override render() {
 
-    const cssClasses = {
+    const cssClasses: any = {
       button: true,
-      'button-element': true,
       [`size-${this.size}`]: true,
       [`variant-${this.variant}`]: true,
       [`color-${this.color}`]: true,
@@ -170,6 +169,8 @@ export class Button extends BaseButton {
     };
 
     if (!this.__isLink()) {
+      cssClasses['native-button'] = true;
+
       return html`<button
           class=${classMap(cssClasses)}
           id="button"
@@ -188,8 +189,9 @@ export class Button extends BaseButton {
           ${this.renderButtonContent()}
         </button>
         ${this.__renderTooltip()}`;
-    }
-    return html`<a
+    } else {
+      cssClasses['native-link'] = true;
+      return html`<a
         class=${classMap(cssClasses)}
         id="button"
         href=${this.href}
@@ -210,6 +212,7 @@ export class Button extends BaseButton {
         ${this.renderButtonContent()}
       </a>
       ${this.__renderTooltip()}`;
+    }
   }
 
   renderButtonContent() {

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

@@ -1,9 +1,9 @@
 @use '../../../scss/mixin';
 
 .button {
-  --_container-padding: 0.75rem;
+  --private-button-container-padding: 0.75rem;
   width: var(--button-height);
-  --_container-padding: 0;
+  --private-button-container-padding: 0;
 }
 
 :host([size='xs']),
@@ -13,7 +13,7 @@
 
 :host([size='xs']) .button,
 :host([size='extra-small']) .button {
-  --_button-icon-size: 1rem;
+  --private-button-icon-size: 1rem;
 }
 
 
@@ -24,8 +24,8 @@
 
 :host([size='sm']) .button,
 :host([size='small']) .button {
-  --_button-icon-size: 1.25rem;
-  --_button-icon-label-spacing: 0.5rem;
+  --private-button-icon-size: 1.25rem;
+  --private-button-icon-label-spacing: 0.5rem;
 }
 
 :host([size='md']),
@@ -35,7 +35,7 @@
 
 :host([size='md']) .button,
 :host([size='medium']) .button {
-  --_button-icon-size: 1.5rem;
+  --private-button-icon-size: 1.5rem;
 }
 
 :host([size='lg']),
@@ -45,7 +45,7 @@
 
 :host([size='lg']) .button,
 :host([size='large']) .button {
-  --_button-icon-size: 2rem;
+  --private-button-icon-size: 2rem;
 }
 
 :host([size='xl']) {
@@ -53,5 +53,5 @@
 }
 
 :host([size='xl']) .button {
-  --_button-icon-size: 2.5rem;
+  --private-button-icon-size: 2.5rem;
 }