@redvars/peacock 3.6.3 → 3.8.0

package/dist/{button-colors-Cg6oxiz-.js → button-colors-DSuBHd-i.js}

@@ -1,6 +1,13 @@
 import { a as i } from './IndividualComponent-DUINtMGK.js';
 
-var css_248z$1 = i`* {
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function n(n,r,t){return n?r(n):t?.(n)}
+
+var css_248z$2 = i`* {
   box-sizing: border-box;
 }
 
@@ -9,8 +16,6 @@ var css_248z$1 = i`* {
 }
 
 :host {
-  display: inline-flex;
-  --button-height: unset;
   --button-icon-size: unset;
   --button-container-padding: unset;
   --button-container-shape: var(--shape-corner-medium);
@@ -21,13 +26,15 @@ var css_248z$1 = i`* {
   --button-container-shape-variant: squircle;
 }
 
-/**
-  * Private CSS Variables
-  * These variables are used internally within the button component
-  */
-slot::slotted(*) {
-  --icon-size: var(--button-icon-size, var(--private-button-icon-size));
-  --icon-color: var(--private-button-label-text-color);
+:host {
+  position: relative;
+  display: inline-flex;
+  min-height: var(--button-height);
+  --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);
 }
 
 /*
@@ -53,305 +60,201 @@ slot::slotted(*) {
 }
 
 .button {
-  position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   height: var(--button-height);
   padding: 0 var(--button-container-padding, var(--private-button-container-padding));
   width: 100%;
-  font-family: var(--font-family-sans) !important;
+  z-index: 0;
   cursor: pointer;
-  --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 .button-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  gap: var(--private-button-icon-label-spacing);
-  width: 100%;
-  height: 100%;
-  z-index: 0;
+.button .label {
+  font-family: var(--font-family-sans) !important;
+  font-size: var(--private-button-font-size);
+  font-weight: var(--private-button-font-weight);
+  line-height: var(--private-button-line-height);
+  letter-spacing: var(--private-button-letter-spacing);
   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);
+  pointer-events: none;
 }
-.button .button-content .slot-container {
-  display: none;
-}
-.button.disabled {
-  cursor: not-allowed;
-}
-.button {
-  /*
-    Background layers
-   */
-}
-.button .focus-ring {
-  z-index: 2;
-  --focus-ring-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
-  --focus-ring-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
-  --focus-ring-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
-  --focus-ring-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
-  --focus-ring-container-shape-variant: var(--private-button-container-shape-variant);
-}
-.button .ripple {
-  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
-  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
-  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
-  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
-  corner-shape: var(--private-button-container-shape-variant);
-  --ripple-state-opacity: var(--private-button-state-opacity, 0);
-  --ripple-pressed-color: var(--private-button-state-color);
-}
-.button .background {
-  display: block;
+.button .touch {
   position: absolute;
-  left: 0;
-  width: 100%;
+  min-height: 2.5rem;
   height: 100%;
-  background-color: var(--private-button-container-color);
-  opacity: var(--private-button-container-opacity, 1);
-  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
-  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
-  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
-  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
-  corner-shape: var(--private-button-container-shape-variant);
-  pointer-events: none;
-}
-.button .skeleton {
-  display: none;
   width: 100%;
-  height: 100%;
-  z-index: 2;
-  position: absolute;
-  top: 0;
+  top: auto;
   left: 0;
-  --skeleton-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
-  --skeleton-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
-  --skeleton-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
-  --skeleton-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
-  --skeleton-container-shape-variant: var(--private-button-container-shape-variant);
-}
-.button .elevation {
-  transition-duration: 280ms;
-  --elevation-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
-  --elevation-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
-  --elevation-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
-  --elevation-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
-  --elevation-container-shape-variant: var(--private-button-container-shape-variant);
-  --elevation-level: var(--private-button-container-elevation-level);
 }
-.button .neo-background {
-  display: none;
-  position: absolute;
-  background: var(--color-inverse-surface);
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  transform: translateX(0.25rem) translateY(0.25rem);
-  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
-  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
-  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
-  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
-  corner-shape: var(--private-button-container-shape-variant);
+.button {
+  /* make the icon slot itself collapsible so removal animates smoothly */
 }
-.button .outline {
-  z-index: 0;
-  display: none;
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
+.button .icon-slot {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
   pointer-events: none;
-  border: var(--private-button-outline-width) solid var(--private-button-outline-color);
-  opacity: var(--private-button-outline-opacity, 1);
-  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
-  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
-  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
-  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
-  corner-shape: var(--private-button-container-shape-variant);
 }
-.button.has-content .slot-container {
-  display: flex;
-  flex: none;
-  justify-content: center;
+.button .icon-slot::slotted(*) {
+  --icon-size: var(--button-icon-size, var(--private-button-icon-size));
+  --icon-color: var(--private-button-label-text-color);
+  opacity: var(--private-button-label-text-opacity, 1);
 }
-.button.show-skeleton .background {
-  display: none;
+
+:host([disabled]), :host([soft-disabled]) {
+  cursor: not-allowed;
 }
-.button.show-skeleton .neo-background {
+
+:host(:not([skeleton])) .skeleton {
   display: none;
 }
-.button.show-skeleton .neo-background:before {
+
+:host([skeleton]) .background {
   display: none;
 }
-.button.show-skeleton .ripple {
+:host([skeleton]) .ripple {
   display: none;
 }
-.button.show-skeleton .skeleton {
-  display: block;
-}
-.button.icon-align-start .button-content {
-  flex-direction: row-reverse;
-}
-.button.icon-align-end .button-content {
-  flex-direction: row;
-}
 
 /**
  * Button variant definitions
  */
-.button.variant-elevated {
+:host([variant=elevated]) {
   --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;
   --private-button-state-color: var(--private-button-label-text-color);
 }
-.button.variant-elevated:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=elevated]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-container-elevation-level: 2;
   --private-button-state-opacity: 0.08;
 }
-.button.variant-elevated.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=elevated]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-container-elevation-level: 1;
   --private-button-state-opacity: 0.12;
 }
-.button.variant-elevated.disabled {
+:host([variant=elevated]):host([disabled]) {
   --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;
 }
-.button.variant-elevated.disabled .ripple {
+:host([variant=elevated]):host([disabled]) .ripple {
   display: none;
 }
 
-.button.variant-filled {
+:host([variant=filled]) {
   --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);
 }
-.button.variant-filled:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=filled]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-container-elevation-level: 1;
   --private-button-state-opacity: 0.08;
 }
-.button.variant-filled.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=filled]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-container-elevation-level: 0;
   --private-button-state-opacity: 0.1;
 }
-.button.variant-filled.disabled {
+:host([variant=filled]):host([disabled]) {
   --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;
 }
-.button.variant-filled.disabled .ripple {
+:host([variant=filled]):host([disabled]) .ripple {
   display: none;
 }
 
-.button.variant-tonal {
+:host([variant=tonal]) {
   --private-button-container-color: var(--tonal-button-container-color);
   --private-button-label-text-color: var(--tonal-button-label-text-color);
   --private-button-state-color: var(--private-button-label-text-color);
 }
-.button.variant-tonal:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=tonal]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-container-elevation-level: 1;
   --private-button-state-opacity: 0.08;
 }
-.button.variant-tonal.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=tonal]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-container-elevation-level: 0;
   --private-button-state-opacity: 0.12;
 }
-.button.variant-tonal.disabled {
+:host([variant=tonal]):host([disabled]) {
   --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;
 }
-.button.variant-tonal.disabled .ripple {
+:host([variant=tonal]):host([disabled]) .ripple {
   display: none;
 }
 
-.button.variant-outlined {
+:host([variant=outlined]) {
   --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);
   --private-button-state-color: var(--private-button-label-text-color);
 }
-.button.variant-outlined .outline {
-  display: block;
-}
-.button.variant-outlined:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=outlined]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-state-opacity: 0.08;
 }
-.button.variant-outlined.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=outlined]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-state-opacity: 0.12;
 }
-.button.variant-outlined.disabled {
+:host([variant=outlined]):host([disabled]) {
   --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;
 }
-.button.variant-outlined.disabled .ripple {
+:host([variant=outlined]):host([disabled]) .ripple {
   display: none;
 }
 
-.button.variant-text {
+:host([variant=text]) {
   --private-button-label-text-color: var(--text-button-label-text-color);
   --private-button-state-color: var(--private-button-label-text-color);
 }
-.button.variant-text:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=text]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-state-opacity: 0.08;
 }
-.button.variant-text.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=text]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
   --private-button-state-opacity: 0.12;
 }
-.button.variant-text.disabled {
+:host([variant=text]):host([disabled]) {
   --private-button-label-text-color: var(--color-on-surface);
   --private-button-label-text-opacity: 0.38;
 }
-.button.variant-text.disabled .ripple {
+:host([variant=text]):host([disabled]) .ripple {
   display: none;
 }
 
-.button.variant-neo {
+:host([variant=neo]) {
   --private-button-container-color: var(--neo-button-container-color);
   --private-button-label-text-color: var(--neo-button-label-text-color);
   --private-button-outline-width: var(--outlined-button-outline-width, 0.125rem);
   --private-button-outline-color: var(--color-inverse-surface);
 }
-.button.variant-neo .outline {
-  display: block;
-}
-.button.variant-neo .neo-background {
-  display: block;
-}
-.button.variant-neo .focus-ring {
+:host([variant=neo]) .focus-ring {
   --focus-ring-color: var(--color-primary-container);
   --focus-ring-inset: -2px;
 }
-.button.variant-neo .ripple {
+:host([variant=neo]) .ripple {
   display: none;
 }
-.button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .background, .button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .button-content, .button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .outline, .button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .focus-ring {
+:host([variant=neo]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) .background, :host([variant=neo]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) .button, :host([variant=neo]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) .outline, :host([variant=neo]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) .focus-ring {
   transform: translateX(0.25rem) translateY(0.25rem);
 }
-.button.variant-neo.disabled {
+:host([variant=neo]):host([disabled]) {
   --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;
 }
-.button.variant-neo.disabled .ripple {
+:host([variant=neo]):host([disabled]) .ripple {
   display: none;
 }
 
@@ -359,6 +262,117 @@ slot::slotted(*) {
   width: 100%;
 }`;
 
+var css_248z$1 = i`.button {
+  transition-property: inset, width, height, transform, border-radius, opacity;
+  transition-duration: 200ms;
+  transition-timing-function: var(--easing-standard);
+  will-change: inset, transform, border-radius, opacity;
+}
+
+.background {
+  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-color: var(--private-button-container-color);
+  opacity: var(--private-button-container-opacity, 1);
+  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  corner-shape: var(--private-button-container-shape-variant);
+  transition-property: inset, width, height, transform, border-radius, opacity;
+  transition-duration: 200ms;
+  transition-timing-function: var(--easing-standard);
+  will-change: inset, transform, border-radius, opacity;
+}
+
+.neo-background {
+  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: var(--color-inverse-surface);
+  transform: translateX(0.25rem) translateY(0.25rem);
+  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  corner-shape: var(--private-button-container-shape-variant);
+  transition-property: inset, width, height, transform, border-radius, opacity;
+  transition-duration: 200ms;
+  transition-timing-function: var(--easing-standard);
+  will-change: inset, transform, border-radius, opacity;
+}
+
+.focus-ring {
+  z-index: 2;
+  pointer-events: none;
+  --focus-ring-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  --focus-ring-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  --focus-ring-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  --focus-ring-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  --focus-ring-container-shape-variant: var(--private-button-container-shape-variant);
+}
+
+.ripple {
+  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  corner-shape: var(--private-button-container-shape-variant);
+  pointer-events: none;
+  --ripple-state-opacity: var(--private-button-state-opacity, 0);
+  --ripple-pressed-color: var(--private-button-state-color);
+}
+
+.skeleton {
+  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  --skeleton-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  --skeleton-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  --skeleton-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  --skeleton-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  --skeleton-container-shape-variant: var(--private-button-container-shape-variant);
+}
+
+.elevation {
+  pointer-events: none;
+  transition-duration: 280ms;
+  --elevation-container-shape-start-start: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  --elevation-container-shape-start-end: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  --elevation-container-shape-end-start: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  --elevation-container-shape-end-end: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  --elevation-container-shape-variant: var(--private-button-container-shape-variant);
+  --elevation-level: var(--private-button-container-elevation-level);
+}
+
+.outline {
+  display: block;
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  border: var(--private-button-outline-width) solid var(--private-button-outline-color);
+  opacity: var(--private-button-outline-opacity, 1);
+  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
+  border-start-end-radius: var(--private-button-container-shape-start-end, var(--private-button-container-shape));
+  border-end-start-radius: var(--private-button-container-shape-end-start, var(--private-button-container-shape));
+  border-end-end-radius: var(--private-button-container-shape-end-end, var(--private-button-container-shape));
+  corner-shape: var(--private-button-container-shape-variant);
+  transition-property: inset, width, height, transform, border-radius, opacity;
+  transition-duration: 200ms;
+  transition-timing-function: var(--easing-standard);
+  will-change: inset, transform, border-radius, opacity;
+}
+
+.tooltip {
+  z-index: 1;
+}`;
+
 var css_248z = i`:host([color=primary]:not([toggle])) {
   --filled-button-container-color: var(--color-primary);
   --filled-button-label-text-color: var(--color-on-primary);
@@ -385,8 +399,8 @@ var css_248z = i`:host([color=primary]:not([toggle])) {
 }
 
 :host([color=primary][toggle]:not([selected])) {
-  --filled-button-container-color: var(--color-surface-container);
-  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --filled-button-container-color: var(--color-surface-container-high);
+  --filled-button-label-text-color: var(--color-on-surface);
   --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);
@@ -421,8 +435,8 @@ var css_248z = i`:host([color=primary]:not([toggle])) {
 }
 
 :host([color=secondary][toggle]:not([selected])) {
-  --filled-button-container-color: var(--color-surface-container);
-  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --filled-button-container-color: var(--color-surface-container-high);
+  --filled-button-label-text-color: var(--color-on-surface);
   --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);
@@ -457,8 +471,8 @@ var css_248z = i`:host([color=primary]:not([toggle])) {
 }
 
 :host([color=tertiary][toggle]:not([selected])) {
-  --filled-button-container-color: var(--color-surface-container);
-  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --filled-button-container-color: var(--color-surface-container-high);
+  --filled-button-label-text-color: var(--color-on-surface);
   --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);
@@ -493,8 +507,8 @@ var css_248z = i`:host([color=primary]:not([toggle])) {
 }
 
 :host([color=success][toggle]:not([selected])) {
-  --filled-button-container-color: var(--color-surface-container);
-  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --filled-button-container-color: var(--color-surface-container-high);
+  --filled-button-label-text-color: var(--color-on-surface);
   --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);
@@ -529,8 +543,8 @@ var css_248z = i`:host([color=primary]:not([toggle])) {
 }
 
 :host([color=danger][toggle]:not([selected])) {
-  --filled-button-container-color: var(--color-surface-container);
-  --filled-button-label-text-color: var(--color-surface-container-variant);
+  --filled-button-container-color: var(--color-surface-container-high);
+  --filled-button-label-text-color: var(--color-on-surface);
   --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);
@@ -567,5 +581,5 @@ var css_248z = i`:host([color=primary]:not([toggle])) {
   --neo-button-label-text-color: var(--color-on-surface);
 }`;
 
-export { css_248z as a, css_248z$1 as c };
-//# sourceMappingURL=button-colors-Cg6oxiz-.js.map
+export { css_248z$2 as a, css_248z as b, css_248z$1 as c, n };
+//# sourceMappingURL=button-colors-DSuBHd-i.js.map

package/dist/button-colors-DSuBHd-i.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-colors-DSuBHd-i.js","sources":["../node_modules/lit-html/directives/when.js"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction n(n,r,t){return n?r(n):t?.(n)}export{n as when};\n//# sourceMappingURL=when.js.map\n"],"names":[],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/button-group.js

@@ -2,15 +2,14 @@ import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from '
 import { n } from './property-1psGvXOq.js';
 import { e } from './class-map-YU7g0o3B.js';
 import { Button } from './button.js';
-import { I as IconButton } from './icon-button-AdJBEoNy.js';
+import { I as IconButton } from './icon-button-CYqrnMnF.js';
 import './directive-ZPhl09Yt.js';
-import './state-DwbEjqVk.js';
-import './BaseButton-BNFAYn-S.js';
-import './query-QBcUV-L_.js';
+import './ButtonConstants-D06bY4uy.js';
+import './button-colors-DSuBHd-i.js';
+import './NativeHyperlinkMixin-DrYXyfMQ.js';
+import './observe-slot-change-D8Xg-kSS.js';
 import './dispatch-event-utils-CuEqjlPT.js';
-import './BaseHyperlinkMixin-BNuwbiEf.js';
-import './button-colors-Cg6oxiz-.js';
-import './observe-slot-change-BGJfgg2E.js';
+import './query-QBcUV-L_.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
@@ -228,6 +227,7 @@ __decorate([
 ButtonGroup = __decorate([
     IndividualComponent
 ], ButtonGroup);
+var ButtonGroup$1 = ButtonGroup;
 
-export { ButtonGroup };
+export { ButtonGroup$1 as default };
 //# sourceMappingURL=button-group.js.map