@redvars/peacock 3.3.3 → 3.4.0

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

@@ -1,5 +1,7 @@
-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 { a as i, _ as __decorate, i as i$2, A, c as __classPrivateFieldGet, b, I as IndividualComponent } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
+import { e as e$2 } from './class-map-3TAnCMAX.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';
@@ -14,15 +16,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 +33,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 +54,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 +92,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 +113,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 +130,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 +167,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 +206,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 +341,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 +355,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 +369,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 +405,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 +441,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 +477,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,6 +513,28 @@ var css_248z$1 = i`:host([color=primary]) {
   --neo-button-label-text-color: var(--color-on-error);
 }
 
+: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=dark]) {
   --filled-button-container-color: var(--color-on-surface);
   --filled-button-label-text-color: var(--color-surface);
@@ -450,22 +563,30 @@ var css_248z$1 = i`:host([color=primary]) {
   --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,32 +594,43 @@ 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;
@@ -576,6 +708,7 @@ class BaseButton extends i$2 {
          * 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 +748,9 @@ class BaseButton extends i$2 {
             if (!isActivationClick(event) || !this.buttonElement) {
                 return;
             }
+            if (this.toggle) {
+                this.selected = !this.selected;
+            }
             this.focus();
             dispatchActivationClick(this.buttonElement);
         };
@@ -695,16 +831,16 @@ __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' })
@@ -712,14 +848,17 @@ __decorate([
 __decorate([
     n({ reflect: true })
 ], BaseButton.prototype, "href", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "target", 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()
@@ -788,6 +927,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 => {
@@ -816,6 +971,7 @@ let Button = class Button extends BaseButton {
           id="button"
           tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
           type=${this.htmlType}
+          @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
@@ -834,6 +990,7 @@ let Button = class Button extends BaseButton {
         tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
         href=${this.href}
         target=${this.target}
+          @click=${this.__dispatchClickWithThrottle}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
@@ -848,7 +1005,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>
@@ -881,4 +1038,4 @@ Button = __decorate([
 ], 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
+//# sourceMappingURL=button-COYCtuA8.js.map