@redvars/peacock 3.3.3 → 3.5.0

package/dist/{button-ClzS8JLq.js → button-DMN1dPAg.js}

@@ -1,8 +1,12 @@
-import { a as i, _ as __decorate, n, i as i$2, A, c as __classPrivateFieldGet, b, I as IndividualComponent } from './IndividualComponent-Dt5xirYG.js';
-import { r, e as e$2 } from './class-map-59YGWLnx.js';
-import { i as isActivationClick, d as dispatchActivationClick, t as throttle, o as observerSlotChangesWithCallback } from './dispatch-event-utils-B4odODQf.js';
-import { e, i as i$1, t } from './directive-Cuw6h7YA.js';
-import { e as e$1 } from './query-QBcUV-L_.js';
+import { a as i, _ as __decorate, b, A, i as i$1, I as IndividualComponent, c as __classPrivateFieldGet } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
+import { e as e$1 } from './class-map-YU7g0o3B.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
+import { t as throttle } from './throttle-C7ZAPqtu.js';
+import { s as spread } from './spread-B5cgadZl.js';
+import { e } from './query-QBcUV-L_.js';
+import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
 
 var css_248z$2 = i`* {
   box-sizing: border-box;
@@ -14,15 +18,15 @@ var css_248z$2 = i`* {
 
 :host {
   display: inline-flex;
-  --z-index-button: 0;
   --button-height: unset;
   --button-icon-size: unset;
-  --button-container-shape: unset;
+  --button-container-padding: unset;
+  --button-container-shape: var(--shape-corner-medium);
   --button-container-shape-start-start: unset;
   --button-container-shape-start-end: unset;
   --button-container-shape-end-start: unset;
   --button-container-shape-end-end: unset;
-  --button-container-shape-variant: unset;
+  --button-container-shape-variant: squircle;
 }
 
 /**
@@ -31,7 +35,7 @@ var css_248z$2 = i`* {
   */
 slot::slotted(*) {
   --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_label-text-color);
+  --icon-color: var(--_button_label-text-color);
 }
 
 /*
@@ -52,29 +56,30 @@ slot::slotted(*) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: var(--button-height, var(--_button-height));
-  padding: 0 var(--_container-padding);
+  height: var(--button-height);
+  padding: 0 var(--button-container-padding, var(--_button_container-padding));
   width: 100%;
   font-family: var(--font-family-sans) !important;
   cursor: pointer;
-  --_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-corner-shape-variant: var(--button-container-shape-variant, squircle);
+  --_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);
 }
 .button .button-content {
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: none;
   gap: var(--_button-icon-label-spacing);
   width: 100%;
   height: 100%;
   z-index: 0;
-  color: var(--_label-text-color);
-  opacity: var(--_label-text-opacity, 1);
+  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(--_label-text-color);
+  --icon-color: var(--_button_label-text-color);
 }
 .button .button-content .slot-container {
   display: none;
@@ -89,20 +94,20 @@ slot::slotted(*) {
 }
 .button .focus-ring {
   z-index: 2;
-  --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
-  --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
-  --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
-  --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
-  --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
+  --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);
 }
 .button .ripple {
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
-  --ripple-state-opacity: var(--_container-state-opacity, 0);
-  --ripple-pressed-color: var(--_container-state-color);
+  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);
 }
 .button .background {
   display: block;
@@ -110,13 +115,13 @@ slot::slotted(*) {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--_container-color);
-  opacity: var(--_container-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
+  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);
   pointer-events: none;
 }
 .button .skeleton {
@@ -127,30 +132,30 @@ slot::slotted(*) {
   position: absolute;
   top: 0;
   left: 0;
-  --skeleton-container-shape-start-start: var(--_container-shape-start-start);
-  --skeleton-container-shape-start-end: var(--_container-shape-start-end);
-  --skeleton-container-shape-end-start: var(--_container-shape-end-start);
-  --skeleton-container-shape-end-end: var(--_container-shape-end-end);
-  --skeleton-container-shape-variant: var(--_container-corner-shape-variant);
+  --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);
 }
 .button .elevation {
-  --elevation-level: var(--_container-elevation-level);
+  --elevation-level: var(--_button_container-elevation-level);
   transition-duration: 280ms;
-  --elevation-container-shape-start-start: var(--_container-shape-start-start);
-  --elevation-container-shape-start-end: var(--_container-shape-start-end);
-  --elevation-container-shape-end-start: var(--_container-shape-end-start);
-  --elevation-container-shape-end-end: var(--_container-shape-end-end);
-  --elevation-container-shape-variant: var(--_container-corner-shape-variant);
+  --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);
 }
 .button .neo-background {
   display: none;
   position: absolute;
   background: var(--color-inverse-surface);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
+  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;
@@ -164,13 +169,13 @@ slot::slotted(*) {
   width: 100%;
   height: 100%;
   pointer-events: none;
-  border: var(--_outline-width) solid var(--_outline-color);
-  opacity: var(--_outline-opacity, 1);
-  border-start-start-radius: var(--_container-shape-start-start);
-  border-start-end-radius: var(--_container-shape-start-end);
-  border-end-start-radius: var(--_container-shape-end-start);
-  border-end-end-radius: var(--_container-shape-end-end);
-  corner-shape: var(--_container-corner-shape-variant);
+  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);
 }
 .button.has-content .slot-container {
   display: flex;
@@ -203,123 +208,123 @@ slot::slotted(*) {
  * Button variant definitions
  */
 .button.variant-elevated {
-  --_container-color: var(--elevated-button-container-color);
-  --_label-text-color: var(--elevated-button-label-text-color);
-  --_container-elevation-level: 1;
-  --_container-state-color: var(--_label-text-color);
+  --_button_container-color: var(--elevated-button-container-color);
+  --_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.variant-elevated:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 2;
-  --_container-state-opacity: 0.08;
+  --_button_container-elevation-level: 2;
+  --_button_container-state-opacity: 0.08;
 }
 .button.variant-elevated.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 1;
-  --_container-state-opacity: 0.12;
+  --_button_container-elevation-level: 1;
+  --_button_container-state-opacity: 0.12;
 }
 .button.variant-elevated.disabled {
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
+  --_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.variant-elevated.disabled .ripple {
   display: none;
 }
 
 .button.variant-filled {
-  --_container-color: var(--filled-button-container-color);
-  --_label-text-color: var(--filled-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
+  --_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.variant-filled:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 1;
-  --_container-state-opacity: 0.08;
+  --_button_container-elevation-level: 1;
+  --_button_container-state-opacity: 0.08;
 }
 .button.variant-filled.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 0;
-  --_container-state-opacity: 0.1;
+  --_button_container-elevation-level: 0;
+  --_button_container-state-opacity: 0.1;
 }
 .button.variant-filled.disabled {
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
+  --_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.variant-filled.disabled .ripple {
   display: none;
 }
 
 .button.variant-tonal {
-  --_container-color: var(--tonal-button-container-color);
-  --_label-text-color: var(--tonal-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
+  --_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.variant-tonal:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 1;
-  --_container-state-opacity: 0.08;
+  --_button_container-elevation-level: 1;
+  --_button_container-state-opacity: 0.08;
 }
 .button.variant-tonal.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-elevation-level: 0;
-  --_container-state-opacity: 0.12;
+  --_button_container-elevation-level: 0;
+  --_button_container-state-opacity: 0.12;
 }
 .button.variant-tonal.disabled {
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
+  --_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.variant-tonal.disabled .ripple {
   display: none;
 }
 
 .button.variant-outlined {
-  --_outline-width: var(--outlined-button-outline-width, 0.0675rem);
-  --_outline-color: var(--outlined-button-outline-color);
-  --_label-text-color: var(--outlined-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
+  --_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);
+  --_button_container-state-color: var(--_button_label-text-color);
 }
 .button.variant-outlined .outline {
   display: block;
 }
 .button.variant-outlined:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-state-opacity: 0.08;
+  --_button_container-state-opacity: 0.08;
 }
 .button.variant-outlined.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-state-opacity: 0.12;
+  --_button_container-state-opacity: 0.12;
 }
 .button.variant-outlined.disabled {
-  --_outline-color: var(--color-on-surface);
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-  --_outline-opacity: 0.12;
+  --_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;
 }
 .button.variant-outlined.disabled .ripple {
   display: none;
 }
 
 .button.variant-text {
-  --_label-text-color: var(--text-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
+  --_button_label-text-color: var(--text-button-label-text-color);
+  --_button_container-state-color: var(--_button_label-text-color);
 }
 .button.variant-text:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-state-opacity: 0.08;
+  --_button_container-state-opacity: 0.08;
 }
 .button.variant-text.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_container-state-opacity: 0.12;
+  --_button_container-state-opacity: 0.12;
 }
 .button.variant-text.disabled {
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
+  --_button_label-text-color: var(--color-on-surface);
+  --_button_label-text-opacity: 0.38;
 }
 .button.variant-text.disabled .ripple {
   display: none;
 }
 
 .button.variant-neo {
-  --_container-color: var(--neo-button-container-color);
-  --_label-text-color: var(--neo-button-label-text-color);
-  --_outline-width: var(--outlined-button-outline-width, 0.125rem);
-  --_outline-color: var(--color-inverse-surface);
+  --_button_container-color: var(--neo-button-container-color);
+  --_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);
 }
 .button.variant-neo .outline {
   display: block;
@@ -338,11 +343,11 @@ slot::slotted(*) {
   transform: translateX(0.25rem) translateY(0.25rem);
 }
 .button.variant-neo.disabled {
-  --_container-color: var(--color-on-surface);
-  --_container-opacity: 0.1;
-  --_label-text-color: var(--color-on-surface);
-  --_label-text-opacity: 0.38;
-  --_outline-opacity: 0.12;
+  --_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;
 }
 .button.variant-neo.disabled .ripple {
   display: none;
@@ -352,7 +357,7 @@ slot::slotted(*) {
   width: 100%;
 }`;
 
-var css_248z$1 = i`:host([color=primary]) {
+var css_248z$1 = i`:host([color=primary]:not([toggle])) {
   --filled-button-container-color: var(--color-primary);
   --filled-button-label-text-color: var(--color-on-primary);
   --tonal-button-container-color: var(--color-primary-container);
@@ -366,7 +371,29 @@ var css_248z$1 = i`:host([color=primary]) {
   --neo-button-label-text-color: var(--color-on-primary);
 }
 
-:host([color=secondary]) {
+:host([color=primary][toggle][selected]) {
+  --filled-button-container-color: var(--color-primary);
+  --filled-button-label-text-color: var(--color-on-primary);
+  --tonal-button-container-color: var(--color-primary);
+  --tonal-button-label-text-color: var(--color-on-primary);
+  --elevated-button-container-color: var(--color-primary);
+  --elevated-button-label-text-color: var(--color-on-primary);
+  --outlined-button-outline-color: var(--color-inverse-surface);
+  --outlined-button-label-text-color: var(--color-inverse-on-surface);
+}
+
+:host([color=primary][toggle]:not([selected])) {
+  --filled-button-container-color: var(--color-surface-container);
+  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --tonal-button-container-color: var(--color-primary-container);
+  --tonal-button-label-text-color: var(--color-on-primary-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-primary);
+  --outlined-button-outline-color: var(--color-primary);
+  --outlined-button-label-text-color: var(--color-primary);
+}
+
+:host([color=secondary]:not([toggle])) {
   --filled-button-container-color: var(--color-secondary);
   --filled-button-label-text-color: var(--color-on-secondary);
   --tonal-button-container-color: var(--color-secondary-container);
@@ -380,7 +407,29 @@ var css_248z$1 = i`:host([color=primary]) {
   --neo-button-label-text-color: var(--color-on-secondary);
 }
 
-:host([color=tertiary]) {
+:host([color=secondary][toggle][selected]) {
+  --filled-button-container-color: var(--color-secondary);
+  --filled-button-label-text-color: var(--color-on-secondary);
+  --tonal-button-container-color: var(--color-secondary);
+  --tonal-button-label-text-color: var(--color-on-secondary);
+  --elevated-button-container-color: var(--color-secondary);
+  --elevated-button-label-text-color: var(--color-on-secondary);
+  --outlined-button-outline-color: var(--color-inverse-surface);
+  --outlined-button-label-text-color: var(--color-inverse-on-surface);
+}
+
+:host([color=secondary][toggle]:not([selected])) {
+  --filled-button-container-color: var(--color-surface-container);
+  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --tonal-button-container-color: var(--color-secondary-container);
+  --tonal-button-label-text-color: var(--color-on-secondary-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-secondary);
+  --outlined-button-outline-color: var(--color-secondary);
+  --outlined-button-label-text-color: var(--color-secondary);
+}
+
+:host([color=tertiary]:not([toggle])) {
   --filled-button-container-color: var(--color-tertiary);
   --filled-button-label-text-color: var(--color-on-tertiary);
   --tonal-button-container-color: var(--color-tertiary-container);
@@ -394,7 +443,29 @@ var css_248z$1 = i`:host([color=primary]) {
   --neo-button-label-text-color: var(--color-on-tertiary);
 }
 
-:host([color=success]) {
+:host([color=tertiary][toggle][selected]) {
+  --filled-button-container-color: var(--color-tertiary);
+  --filled-button-label-text-color: var(--color-on-tertiary);
+  --tonal-button-container-color: var(--color-tertiary);
+  --tonal-button-label-text-color: var(--color-on-tertiary);
+  --elevated-button-container-color: var(--color-tertiary);
+  --elevated-button-label-text-color: var(--color-on-tertiary);
+  --outlined-button-outline-color: var(--color-inverse-surface);
+  --outlined-button-label-text-color: var(--color-inverse-on-surface);
+}
+
+:host([color=tertiary][toggle]:not([selected])) {
+  --filled-button-container-color: var(--color-surface-container);
+  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --tonal-button-container-color: var(--color-tertiary-container);
+  --tonal-button-label-text-color: var(--color-on-tertiary-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-tertiary);
+  --outlined-button-outline-color: var(--color-tertiary);
+  --outlined-button-label-text-color: var(--color-tertiary);
+}
+
+:host([color=success]:not([toggle])) {
   --filled-button-container-color: var(--color-success);
   --filled-button-label-text-color: var(--color-on-success);
   --tonal-button-container-color: var(--color-success-container);
@@ -408,7 +479,29 @@ var css_248z$1 = i`:host([color=primary]) {
   --neo-button-label-text-color: var(--color-on-success);
 }
 
-:host([color=danger]) {
+:host([color=success][toggle][selected]) {
+  --filled-button-container-color: var(--color-success);
+  --filled-button-label-text-color: var(--color-on-success);
+  --tonal-button-container-color: var(--color-success);
+  --tonal-button-label-text-color: var(--color-on-success);
+  --elevated-button-container-color: var(--color-success);
+  --elevated-button-label-text-color: var(--color-on-success);
+  --outlined-button-outline-color: var(--color-inverse-surface);
+  --outlined-button-label-text-color: var(--color-inverse-on-surface);
+}
+
+:host([color=success][toggle]:not([selected])) {
+  --filled-button-container-color: var(--color-surface-container);
+  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --tonal-button-container-color: var(--color-success-container);
+  --tonal-button-label-text-color: var(--color-on-success-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-success);
+  --outlined-button-outline-color: var(--color-success);
+  --outlined-button-label-text-color: var(--color-success);
+}
+
+:host([color=danger]:not([toggle])) {
   --filled-button-container-color: var(--color-error);
   --filled-button-label-text-color: var(--color-on-error);
   --tonal-button-container-color: var(--color-error-container);
@@ -422,13 +515,35 @@ var css_248z$1 = i`:host([color=primary]) {
   --neo-button-label-text-color: var(--color-on-error);
 }
 
-:host([color=dark]) {
+:host([color=danger][toggle][selected]) {
+  --filled-button-container-color: var(--color-error);
+  --filled-button-label-text-color: var(--color-on-error);
+  --tonal-button-container-color: var(--color-error);
+  --tonal-button-label-text-color: var(--color-on-error);
+  --elevated-button-container-color: var(--color-error);
+  --elevated-button-label-text-color: var(--color-on-error);
+  --outlined-button-outline-color: var(--color-inverse-surface);
+  --outlined-button-label-text-color: var(--color-inverse-on-surface);
+}
+
+:host([color=danger][toggle]:not([selected])) {
+  --filled-button-container-color: var(--color-surface-container);
+  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --tonal-button-container-color: var(--color-error-container);
+  --tonal-button-label-text-color: var(--color-on-error-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-error);
+  --outlined-button-outline-color: var(--color-error);
+  --outlined-button-label-text-color: var(--color-error);
+}
+
+:host([color=on-surface]) {
   --filled-button-container-color: var(--color-on-surface);
   --filled-button-label-text-color: var(--color-surface);
-  --tonal-button-container-color: var(--color-surface-container);
-  --tonal-button-label-text-color: var(--color-on-surface-container);
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-on-surface);
+  --tonal-button-container-color: var(--color-on-surface-container);
+  --tonal-button-label-text-color: var(--color-surface-container-high);
+  --elevated-button-container-color: var(--color-on-surface);
+  --elevated-button-label-text-color: var(--color-surface);
   --outlined-button-outline-color: var(--color-on-surface);
   --outlined-button-label-text-color: var(--color-on-surface);
   --text-button-label-text-color: var(--color-on-surface);
@@ -436,36 +551,44 @@ var css_248z$1 = i`:host([color=primary]) {
   --neo-button-label-text-color: var(--color-surface);
 }
 
-:host([color=light]) {
-  --filled-button-container-color: var(--color-surface);
+:host([color=surface]) {
+  --filled-button-container-color: var(--color-surface-container-high);
   --filled-button-label-text-color: var(--color-on-surface);
-  --tonal-button-container-color: var(--color-on-surface-container);
-  --tonal-button-label-text-color: var(--color-surface-container);
-  --elevated-button-container-color: var(--color-surface-container-low);
-  --elevated-button-label-text-color: var(--color-white);
-  --outlined-button-outline-color: var(--color-surface);
-  --outlined-button-label-text-color: var(--color-surface);
-  --text-button-label-text-color: var(--color-surface);
+  --tonal-button-container-color: var(--color-surface-container-high);
+  --tonal-button-label-text-color: var(--color-on-surface-container);
+  --elevated-button-container-color: var(--color-surface);
+  --elevated-button-label-text-color: var(--color-on-surface);
+  --outlined-button-outline-color: var(--color-on-surface);
+  --outlined-button-label-text-color: var(--color-on-surface);
+  --text-button-label-text-color: var(--color-on-surface);
   --neo-button-container-color: var(--color-surface);
   --neo-button-label-text-color: var(--color-on-surface);
 }`;
 
-var css_248z = i`.button.size-xs,
-.button.size-extra-small {
-  --_button-height: 2rem;
+var css_248z = i`:host([size=xs]),
+:host([size=extra-small]) {
+  --button-height: 2rem;
+}
+
+:host([size=xs]) .button,
+:host([size=extra-small]) .button {
   --_button-icon-size: 1rem;
-  --_container-padding: 0.75rem;
+  --_button_container-padding: 0.75rem;
   font-size: 0.875rem !important;
   font-weight: var(--font-weight-medium) !important;
   line-height: 1.25rem !important;
   letter-spacing: 0.1px !important;
 }
 
-.button.size-sm,
-.button.size-small {
-  --_button-height: 2.5rem;
+:host([size=sm]),
+:host([size=small]) {
+  --button-height: 2.5rem;
+}
+
+:host([size=sm]) .button,
+:host([size=small]) .button {
   --_button-icon-size: 1.25rem;
-  --_container-padding: 1rem;
+  --_button_container-padding: 1rem;
   --_button-icon-label-spacing: 0.5rem;
   font-size: 0.875rem !important;
   font-weight: var(--font-weight-medium) !important;
@@ -473,71 +596,76 @@ var css_248z = i`.button.size-xs,
   letter-spacing: 0.1px !important;
 }
 
-.button.size-md,
-.button.size-medium {
-  --_button-height: 3.5rem;
+:host([size=md]),
+:host([size=medium]) {
+  --button-height: 3.5rem;
+}
+
+:host([size=md]) .button,
+:host([size=medium]) .button {
   --_button-icon-size: 1.5rem;
-  --_container-padding: 1.5rem;
+  --_button_container-padding: 1.5rem;
   font-size: 1rem !important;
   font-weight: var(--font-weight-medium) !important;
   line-height: 1.5rem !important;
   letter-spacing: 0.15px !important;
 }
 
-.button.size-lg,
-.button.size-large {
-  --_button-height: 6rem;
+:host([size=lg]),
+:host([size=large]) {
+  --button-height: 6rem;
+}
+
+:host([size=lg]) .button,
+:host([size=large]) .button {
   --_button-icon-size: 2rem;
-  --_container-padding: 3rem;
+  --_button_container-padding: 3rem;
   font-size: 1.5rem !important;
   font-weight: var(--font-weight-regular) !important;
   line-height: 2rem !important;
   letter-spacing: 0 !important;
 }
 
-.button.size-xl {
-  --_button-height: 8.5rem;
+:host([size=xl]) {
+  --button-height: 8.5rem;
+}
+
+:host([size=xl]) .button {
   --_button-icon-size: 2.5rem;
-  --_container-padding: 4rem;
+  --_button_container-padding: 4rem;
   font-size: 2rem !important;
   font-weight: var(--font-weight-regular) !important;
   line-height: 2.5rem !important;
   letter-spacing: 0 !important;
 }`;
 
-class SpreadDirective extends i$1 {
-    constructor(partInfo) {
-        super(partInfo);
-        if (partInfo.type !== t.ELEMENT) {
-            throw new Error('spread() can only be used on elements');
+/**
+ * 3. Apply the type annotation to the variable.
+ */
+const BaseHyperlink = (superclass) => {
+    // Naming the class (BaseHyperlinkElement) instead of using 'Mixin' or anonymous 
+    // prevents the "__childPart" visibility error.
+    class BaseHyperlinkElement extends superclass {
+        constructor() {
+            super(...arguments);
+            this.target = '_self';
         }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    render(_props) {
-        return '';
-    }
-    update(part, [props]) {
-        if (!props)
-            return;
-        // eslint-disable-next-line guard-for-in,no-restricted-syntax
-        for (const key in props) {
-            const value = props[key];
-            if (value === undefined || value === null) {
-                part.element.removeAttribute(key);
-            }
-            else {
-                part.element.setAttribute(key, value);
-            }
+        __isLink() {
+            return !!this.href;
         }
     }
-}
-const spread = e(SpreadDirective);
+    __decorate([
+        n({ reflect: true })
+    ], BaseHyperlinkElement.prototype, "href", void 0);
+    __decorate([
+        n()
+    ], BaseHyperlinkElement.prototype, "target", void 0);
+    return BaseHyperlinkElement;
+};
 
-var _BaseButton_id;
-class BaseButton extends i$2 {
+class BaseButton extends BaseHyperlink(i$1) {
     constructor() {
         super(...arguments);
-        _BaseButton_id.set(this, crypto.randomUUID());
         this.htmlType = 'button';
         /**
          * The visual style of the button.
@@ -572,10 +700,7 @@ class BaseButton extends i$2 {
          * If button is disabled, the reason why it is disabled.
          */
         this.disabledReason = '';
-        /**
-         * Sets or retrieves the window or frame at which to target content.
-         */
-        this.target = '_self';
+        this.toggle = false;
         this.selected = false;
         /**
          * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
@@ -615,6 +740,9 @@ class BaseButton extends i$2 {
             if (!isActivationClick(event) || !this.buttonElement) {
                 return;
             }
+            if (this.toggle) {
+                this.selected = !this.selected;
+            }
             this.focus();
             dispatchActivationClick(this.buttonElement);
         };
@@ -635,17 +763,14 @@ class BaseButton extends i$2 {
         this.removeEventListener('click', this.__dispatchClickWithThrottle);
         super.disconnectedCallback();
     }
-    __isLink() {
-        return !!this.href;
-    }
     __convertTypeToVariantAndColor() {
         if (this.type === 'primary') {
             this.color = 'primary';
             this.variant = 'filled';
         }
         else if (this.type === 'secondary') {
-            this.color = 'dark';
-            this.variant = 'outlined';
+            this.color = 'surface';
+            this.variant = 'filled';
         }
         else if (this.type === 'tertiary') {
             this.color = 'primary';
@@ -656,21 +781,21 @@ class BaseButton extends i$2 {
             this.variant = 'filled';
         }
     }
-    __getDisabledReasonID() {
+    get __disabledReasonID() {
         return this.disabled && this.disabledReason
-            ? `disabled-reason-${__classPrivateFieldGet(this, _BaseButton_id, "f")}`
-            : A;
+            ? BaseButton.DISABLED_REASON_ID
+            : undefined;
     }
     __renderDisabledReason() {
-        const disabledReasonID = this.__getDisabledReasonID();
+        const disabledReasonID = this.__disabledReasonID;
         if (disabledReasonID)
             return b `<div
-        id="disabled-reason-${__classPrivateFieldGet(this, _BaseButton_id, "f")}"
+        id=${disabledReasonID}
         role="tooltip"
         aria-label=${this.disabledReason}
         class="screen-reader-only"
       >
-        {this.disabledReason}
+        ${this.disabledReason}
       </div>`;
         return A;
     }
@@ -681,7 +806,7 @@ class BaseButton extends i$2 {
         return A;
     }
 }
-_BaseButton_id = new WeakMap();
+BaseButton.DISABLED_REASON_ID = 'disabled-reason';
 __decorate([
     n({ type: String })
 ], BaseButton.prototype, "htmlType", void 0);
@@ -695,31 +820,28 @@ __decorate([
     n({ reflect: true })
 ], BaseButton.prototype, "color", void 0);
 __decorate([
-    n()
+    n({ reflect: true })
 ], BaseButton.prototype, "size", void 0);
 __decorate([
     n({ type: Boolean, reflect: true })
 ], BaseButton.prototype, "disabled", void 0);
 __decorate([
-    n()
+    n({ type: Boolean, reflect: true })
 ], BaseButton.prototype, "skeleton", void 0);
 __decorate([
-    n({ reflect: true, attribute: 'soft-disabled' })
+    n({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
 ], BaseButton.prototype, "softDisabled", void 0);
 __decorate([
     n({ attribute: 'disabled-reason' })
 ], BaseButton.prototype, "disabledReason", void 0);
-__decorate([
-    n({ reflect: true })
-], BaseButton.prototype, "href", void 0);
 __decorate([
     n({ reflect: true })
 ], BaseButton.prototype, "configAria", void 0);
 __decorate([
-    n()
-], BaseButton.prototype, "target", void 0);
+    n({ type: Boolean, reflect: true })
+], BaseButton.prototype, "toggle", void 0);
 __decorate([
-    n()
+    n({ type: Boolean, reflect: true })
 ], BaseButton.prototype, "selected", void 0);
 __decorate([
     n()
@@ -731,7 +853,7 @@ __decorate([
     r()
 ], BaseButton.prototype, "isPressed", void 0);
 __decorate([
-    e$1('.button')
+    e('.button')
 ], BaseButton.prototype, "buttonElement", void 0);
 
 var _Button_tabindex;
@@ -788,6 +910,22 @@ let Button = class Button extends BaseButton {
         this.iconAlign = 'end';
         this.slotHasContent = false;
     }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
+        window.addEventListener('mouseup', this.__handlePress);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('mouseup', this.__handlePress);
+        this.removeEventListener('click', this.__dispatchClickWithThrottle);
+        super.disconnectedCallback();
+    }
     firstUpdated() {
         this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
         observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
@@ -812,14 +950,15 @@ let Button = class Button extends BaseButton {
         };
         if (!isLink) {
             return b `<button
-          class=${e$2(cssClasses)}
+          class=${e$1(cssClasses)}
           id="button"
           tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
           type=${this.htmlType}
+          @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          ?aria-describedby=${this.__getDisabledReasonID()}
+          aria-describedby=${this.__disabledReasonID}
           aria-disabled=${`${this.disabled || this.softDisabled}`}
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
@@ -829,16 +968,17 @@ let Button = class Button extends BaseButton {
         ${this.__renderTooltip()}`;
         }
         return b `<a
-        class=${e$2(cssClasses)}
+        class=${e$1(cssClasses)}
         id="button"
         tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
         href=${this.href}
         target=${this.target}
+          @click=${this.__dispatchClickWithThrottle}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        ?aria-describedby=${this.__getDisabledReasonID()}
+        aria-describedby=${this.__disabledReasonID}
         aria-disabled=${`${this.disabled}`}
         ${spread(this.configAria)}
       >
@@ -848,7 +988,7 @@ let Button = class Button extends BaseButton {
     }
     renderButtonContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} element="buttonElement"></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
@@ -880,5 +1020,5 @@ Button = __decorate([
     IndividualComponent
 ], Button);
 
-export { Button as B, css_248z$1 as a, BaseButton as b, css_248z$2 as c, spread as s };
-//# sourceMappingURL=button-ClzS8JLq.js.map
+export { Button as B, css_248z$1 as a, BaseButton as b, css_248z$2 as c, BaseHyperlink as d };
+//# sourceMappingURL=button-DMN1dPAg.js.map