@redvars/peacock 3.6.2 → 3.7.0

package/dist/button-colors-Dwnez1tR.js

@@ -0,0 +1,586 @@
+import { a as i } from './IndividualComponent-DUINtMGK.js';
+
+/**
+ * @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;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  --button-icon-size: 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: squircle;
+}
+
+: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);
+}
+
+/*
+  * Reset native button/link styles
+  */
+.native-button {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+
+.native-link {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+.native-link:link, .native-link:visited, .native-link:hover, .native-link:active {
+  text-decoration: none;
+  color: inherit;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--button-height);
+  padding: 0 var(--button-container-padding, var(--private-button-container-padding));
+  width: 100%;
+  z-index: 0;
+  cursor: pointer;
+}
+.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);
+  --icon-size: var(--button-icon-size, var(--private-button-icon-size));
+  --icon-color: var(--private-button-label-text-color);
+  pointer-events: none;
+}
+.button .touch {
+  position: absolute;
+  min-height: 2.5rem;
+  height: 100%;
+  width: 100%;
+  top: auto;
+  left: 0;
+  transform: translateY(-25%);
+}
+.button {
+  /* make the icon slot itself collapsible so removal animates smoothly */
+}
+.button .icon-slot {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  pointer-events: none;
+}
+.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);
+}
+
+:host([disabled]), :host([soft-disabled]) {
+  cursor: not-allowed;
+}
+
+:host(:not([skeleton])) .skeleton {
+  display: none;
+}
+
+:host([skeleton]) .background {
+  display: none;
+}
+:host([skeleton]) .ripple {
+  display: none;
+}
+
+/**
+ * Button variant definitions
+ */
+: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);
+}
+:host([variant=elevated]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-container-elevation-level: 2;
+  --private-button-state-opacity: 0.08;
+}
+:host([variant=elevated]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-container-elevation-level: 1;
+  --private-button-state-opacity: 0.12;
+}
+: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;
+}
+:host([variant=elevated]):host([disabled]) .ripple {
+  display: none;
+}
+
+: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);
+}
+:host([variant=filled]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-container-elevation-level: 1;
+  --private-button-state-opacity: 0.08;
+}
+:host([variant=filled]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-container-elevation-level: 0;
+  --private-button-state-opacity: 0.1;
+}
+: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;
+}
+:host([variant=filled]):host([disabled]) .ripple {
+  display: none;
+}
+
+: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);
+}
+:host([variant=tonal]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-container-elevation-level: 1;
+  --private-button-state-opacity: 0.08;
+}
+:host([variant=tonal]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-container-elevation-level: 0;
+  --private-button-state-opacity: 0.12;
+}
+: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;
+}
+:host([variant=tonal]):host([disabled]) .ripple {
+  display: none;
+}
+
+: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);
+}
+:host([variant=outlined]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-state-opacity: 0.08;
+}
+:host([variant=outlined]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-state-opacity: 0.12;
+}
+: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;
+}
+:host([variant=outlined]):host([disabled]) .ripple {
+  display: none;
+}
+
+:host([variant=text]) {
+  --private-button-label-text-color: var(--text-button-label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
+}
+:host([variant=text]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-state-opacity: 0.08;
+}
+:host([variant=text]):host([pressed]:not([disabled], [soft-disabled], [skeleton])) {
+  --private-button-state-opacity: 0.12;
+}
+:host([variant=text]):host([disabled]) {
+  --private-button-label-text-color: var(--color-on-surface);
+  --private-button-label-text-opacity: 0.38;
+}
+:host([variant=text]):host([disabled]) .ripple {
+  display: none;
+}
+
+: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);
+}
+:host([variant=neo]) .focus-ring {
+  --focus-ring-color: var(--color-primary-container);
+  --focus-ring-inset: -2px;
+}
+:host([variant=neo]) .ripple {
+  display: none;
+}
+: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);
+}
+: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;
+}
+:host([variant=neo]):host([disabled]) .ripple {
+  display: none;
+}
+
+:host([block]) {
+  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);
+  --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);
+  --text-button-label-text-color: var(--color-primary);
+  --neo-button-container-color: var(--color-primary);
+  --neo-button-label-text-color: var(--color-on-primary);
+}
+
+: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-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);
+  --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);
+  --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);
+  --text-button-label-text-color: var(--color-secondary);
+  --neo-button-container-color: var(--color-secondary);
+  --neo-button-label-text-color: var(--color-on-secondary);
+}
+
+: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-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);
+  --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);
+  --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);
+  --text-button-label-text-color: var(--color-tertiary);
+  --neo-button-container-color: var(--color-tertiary);
+  --neo-button-label-text-color: var(--color-on-tertiary);
+}
+
+: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-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);
+  --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);
+  --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);
+  --text-button-label-text-color: var(--color-success);
+  --neo-button-container-color: var(--color-success);
+  --neo-button-label-text-color: var(--color-on-success);
+}
+
+: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-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);
+  --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);
+  --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);
+  --text-button-label-text-color: var(--color-error);
+  --neo-button-container-color: var(--color-error);
+  --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-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);
+  --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-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);
+  --neo-button-container-color: var(--color-on-surface);
+  --neo-button-label-text-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-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);
+}`;
+
+export { css_248z$2 as a, css_248z as b, css_248z$1 as c, n };
+//# sourceMappingURL=button-colors-Dwnez1tR.js.map

package/dist/button-colors-Dwnez1tR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-colors-Dwnez1tR.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-ohxHhy4t.js';
+import { I as IconButton } from './icon-button-DJ0kZXYr.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-Dwnez1tR.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-AvGh22Zn.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