@redvars/peacock 3.6.2 → 3.6.3

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

@@ -26,20 +26,30 @@ var css_248z$1 = i`* {
   * These variables are used internally within the button component
   */
 slot::slotted(*) {
-  --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_button_label-text-color);
+  --icon-size: var(--button-icon-size, var(--private-button-icon-size));
+  --icon-color: var(--private-button-label-text-color);
 }
 
 /*
   * Reset native button/link styles
   */
-.button-element {
+.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 {
@@ -49,29 +59,29 @@ slot::slotted(*) {
   align-items: center;
   justify-content: center;
   height: var(--button-height);
-  padding: 0 var(--button-container-padding, var(--_button_container-padding));
+  padding: 0 var(--button-container-padding, var(--private-button-container-padding));
   width: 100%;
   font-family: var(--font-family-sans) !important;
   cursor: pointer;
-  --_button_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape));
-  --_button_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape));
-  --_button_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape));
-  --_button_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape));
-  --_button_container-corner-shape-variant: var(--button-container-shape-variant);
+  --private-button-container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape));
+  --private-button-container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape));
+  --private-button-container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape));
+  --private-button-container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape));
+  --private-button-container-shape-variant: var(--button-container-shape-variant);
 }
 .button .button-content {
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
-  gap: var(--_button-icon-label-spacing);
+  gap: var(--private-button-icon-label-spacing);
   width: 100%;
   height: 100%;
   z-index: 0;
-  color: var(--_button_label-text-color);
-  opacity: var(--_button_label-text-opacity, 1);
-  --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_button_label-text-color);
+  color: var(--private-button-label-text-color);
+  opacity: var(--private-button-label-text-opacity, 1);
+  --icon-size: var(--button-icon-size, var(--private-button-icon-size));
+  --icon-color: var(--private-button-label-text-color);
 }
 .button .button-content .slot-container {
   display: none;
@@ -86,20 +96,20 @@ slot::slotted(*) {
 }
 .button .focus-ring {
   z-index: 2;
-  --focus-ring-container-shape-start-start: var(--_button_container-shape-start-start);
-  --focus-ring-container-shape-start-end: var(--_button_container-shape-start-end);
-  --focus-ring-container-shape-end-start: var(--_button_container-shape-end-start);
-  --focus-ring-container-shape-end-end: var(--_button_container-shape-end-end);
-  --focus-ring-container-shape-variant: var(--_button_container-corner-shape-variant);
+  --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(--_button_container-shape-start-start);
-  border-start-end-radius: var(--_button_container-shape-start-end);
-  border-end-start-radius: var(--_button_container-shape-end-start);
-  border-end-end-radius: var(--_button_container-shape-end-end);
-  corner-shape: var(--_button_container-corner-shape-variant);
-  --ripple-state-opacity: var(--_button_state-opacity, 0);
-  --ripple-pressed-color: var(--_button_state-color);
+  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;
@@ -107,13 +117,13 @@ slot::slotted(*) {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--_button_container-color);
-  opacity: var(--_button_container-opacity, 1);
-  border-start-start-radius: var(--_button_container-shape-start-start);
-  border-start-end-radius: var(--_button_container-shape-start-end);
-  border-end-start-radius: var(--_button_container-shape-end-start);
-  border-end-end-radius: var(--_button_container-shape-end-end);
-  corner-shape: var(--_button_container-corner-shape-variant);
+  background-color: var(--private-button-container-color);
+  opacity: var(--private-button-container-opacity, 1);
+  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 {
@@ -124,34 +134,34 @@ slot::slotted(*) {
   position: absolute;
   top: 0;
   left: 0;
-  --skeleton-container-shape-start-start: var(--_button_container-shape-start-start);
-  --skeleton-container-shape-start-end: var(--_button_container-shape-start-end);
-  --skeleton-container-shape-end-start: var(--_button_container-shape-end-start);
-  --skeleton-container-shape-end-end: var(--_button_container-shape-end-end);
-  --skeleton-container-shape-variant: var(--_button_container-corner-shape-variant);
+  --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 {
-  --elevation-level: var(--_button_container-elevation-level);
   transition-duration: 280ms;
-  --elevation-container-shape-start-start: var(--_button_container-shape-start-start);
-  --elevation-container-shape-start-end: var(--_button_container-shape-start-end);
-  --elevation-container-shape-end-start: var(--_button_container-shape-end-start);
-  --elevation-container-shape-end-end: var(--_button_container-shape-end-end);
-  --elevation-container-shape-variant: var(--_button_container-corner-shape-variant);
+  --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);
-  border-start-start-radius: var(--_button_container-shape-start-start);
-  border-start-end-radius: var(--_button_container-shape-start-end);
-  border-end-start-radius: var(--_button_container-shape-end-start);
-  border-end-end-radius: var(--_button_container-shape-end-end);
-  corner-shape: var(--_button_container-corner-shape-variant);
   width: 100%;
   height: 100%;
   pointer-events: none;
   transform: translateX(0.25rem) translateY(0.25rem);
+  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 .outline {
   z-index: 0;
@@ -161,13 +171,13 @@ slot::slotted(*) {
   width: 100%;
   height: 100%;
   pointer-events: none;
-  border: var(--_button_outline-width) solid var(--_button_outline-color);
-  opacity: var(--_button_outline-opacity, 1);
-  border-start-start-radius: var(--_button_container-shape-start-start);
-  border-start-end-radius: var(--_button_container-shape-start-end);
-  border-end-start-radius: var(--_button_container-shape-end-start);
-  border-end-end-radius: var(--_button_container-shape-end-end);
-  corner-shape: var(--_button_container-corner-shape-variant);
+  border: var(--private-button-outline-width) solid var(--private-button-outline-color);
+  opacity: var(--private-button-outline-opacity, 1);
+  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;
@@ -200,123 +210,123 @@ slot::slotted(*) {
  * Button variant definitions
  */
 .button.variant-elevated {
-  --_button_container-color: var(--elevated-button-container-color);
-  --_button_label-text-color: var(--elevated-button-label-text-color);
-  --_button_container-elevation-level: 1;
-  --_button_state-color: var(--_button_label-text-color);
+  --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)) {
-  --_button_container-elevation-level: 2;
-  --_button_state-opacity: 0.08;
+  --private-button-container-elevation-level: 2;
+  --private-button-state-opacity: 0.08;
 }
 .button.variant-elevated.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_button_container-elevation-level: 1;
-  --_button_state-opacity: 0.12;
+  --private-button-container-elevation-level: 1;
+  --private-button-state-opacity: 0.12;
 }
 .button.variant-elevated.disabled {
-  --_button_container-color: var(--color-on-surface);
-  --_button_container-opacity: 0.1;
-  --_button_label-text-color: var(--color-on-surface);
-  --_button_label-text-opacity: 0.38;
+  --private-button-container-color: var(--color-on-surface);
+  --private-button-container-opacity: 0.1;
+  --private-button-label-text-color: var(--color-on-surface);
+  --private-button-label-text-opacity: 0.38;
 }
 .button.variant-elevated.disabled .ripple {
   display: none;
 }
 
 .button.variant-filled {
-  --_button_container-color: var(--filled-button-container-color);
-  --_button_label-text-color: var(--filled-button-label-text-color);
-  --_button_state-color: var(--_button_label-text-color);
+  --private-button-container-color: var(--filled-button-container-color);
+  --private-button-label-text-color: var(--filled-button-label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 }
 .button.variant-filled:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_button_container-elevation-level: 1;
-  --_button_state-opacity: 0.08;
+  --private-button-container-elevation-level: 1;
+  --private-button-state-opacity: 0.08;
 }
 .button.variant-filled.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_button_container-elevation-level: 0;
-  --_button_state-opacity: 0.1;
+  --private-button-container-elevation-level: 0;
+  --private-button-state-opacity: 0.1;
 }
 .button.variant-filled.disabled {
-  --_button_container-color: var(--color-on-surface);
-  --_button_container-opacity: 0.1;
-  --_button_label-text-color: var(--color-on-surface);
-  --_button_label-text-opacity: 0.38;
+  --private-button-container-color: var(--color-on-surface);
+  --private-button-container-opacity: 0.1;
+  --private-button-label-text-color: var(--color-on-surface);
+  --private-button-label-text-opacity: 0.38;
 }
 .button.variant-filled.disabled .ripple {
   display: none;
 }
 
 .button.variant-tonal {
-  --_button_container-color: var(--tonal-button-container-color);
-  --_button_label-text-color: var(--tonal-button-label-text-color);
-  --_button_state-color: var(--_button_label-text-color);
+  --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)) {
-  --_button_container-elevation-level: 1;
-  --_button_state-opacity: 0.08;
+  --private-button-container-elevation-level: 1;
+  --private-button-state-opacity: 0.08;
 }
 .button.variant-tonal.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_button_container-elevation-level: 0;
-  --_button_state-opacity: 0.12;
+  --private-button-container-elevation-level: 0;
+  --private-button-state-opacity: 0.12;
 }
 .button.variant-tonal.disabled {
-  --_button_container-color: var(--color-on-surface);
-  --_button_container-opacity: 0.1;
-  --_button_label-text-color: var(--color-on-surface);
-  --_button_label-text-opacity: 0.38;
+  --private-button-container-color: var(--color-on-surface);
+  --private-button-container-opacity: 0.1;
+  --private-button-label-text-color: var(--color-on-surface);
+  --private-button-label-text-opacity: 0.38;
 }
 .button.variant-tonal.disabled .ripple {
   display: none;
 }
 
 .button.variant-outlined {
-  --_button_outline-width: var(--outlined-button-outline-width, 0.0675rem);
-  --_button_outline-color: var(--outlined-button-outline-color);
-  --_button_label-text-color: var(--outlined-button-label-text-color);
-  --_button_state-color: var(--_button_label-text-color);
+  --private-button-outline-width: var(--outlined-button-outline-width, 0.0675rem);
+  --private-button-outline-color: var(--outlined-button-outline-color);
+  --private-button-label-text-color: var(--outlined-button-label-text-color);
+  --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)) {
-  --_button_state-opacity: 0.08;
+  --private-button-state-opacity: 0.08;
 }
 .button.variant-outlined.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_button_state-opacity: 0.12;
+  --private-button-state-opacity: 0.12;
 }
 .button.variant-outlined.disabled {
-  --_button_outline-color: var(--color-on-surface);
-  --_button_label-text-color: var(--color-on-surface);
-  --_button_label-text-opacity: 0.38;
-  --_button_outline-opacity: 0.12;
+  --private-button-outline-color: var(--color-on-surface);
+  --private-button-label-text-color: var(--color-on-surface);
+  --private-button-label-text-opacity: 0.38;
+  --private-button-outline-opacity: 0.12;
 }
 .button.variant-outlined.disabled .ripple {
   display: none;
 }
 
 .button.variant-text {
-  --_button_label-text-color: var(--text-button-label-text-color);
-  --_button_state-color: var(--_button_label-text-color);
+  --private-button-label-text-color: var(--text-button-label-text-color);
+  --private-button-state-color: var(--private-button-label-text-color);
 }
 .button.variant-text:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_button_state-opacity: 0.08;
+  --private-button-state-opacity: 0.08;
 }
 .button.variant-text.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-  --_button_state-opacity: 0.12;
+  --private-button-state-opacity: 0.12;
 }
 .button.variant-text.disabled {
-  --_button_label-text-color: var(--color-on-surface);
-  --_button_label-text-opacity: 0.38;
+  --private-button-label-text-color: var(--color-on-surface);
+  --private-button-label-text-opacity: 0.38;
 }
 .button.variant-text.disabled .ripple {
   display: none;
 }
 
 .button.variant-neo {
-  --_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);
+  --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;
@@ -335,11 +345,11 @@ slot::slotted(*) {
   transform: translateX(0.25rem) translateY(0.25rem);
 }
 .button.variant-neo.disabled {
-  --_button_container-color: var(--color-on-surface);
-  --_button_container-opacity: 0.1;
-  --_button_label-text-color: var(--color-on-surface);
-  --_button_label-text-opacity: 0.38;
-  --_button_outline-opacity: 0.12;
+  --private-button-container-color: var(--color-on-surface);
+  --private-button-container-opacity: 0.1;
+  --private-button-label-text-color: var(--color-on-surface);
+  --private-button-label-text-opacity: 0.38;
+  --private-button-outline-opacity: 0.12;
 }
 .button.variant-neo.disabled .ripple {
   display: none;
@@ -558,4 +568,4 @@ var css_248z = i`:host([color=primary]:not([toggle])) {
 }`;
 
 export { css_248z as a, css_248z$1 as c };
-//# sourceMappingURL=button-colors-AvGh22Zn.js.map
+//# sourceMappingURL=button-colors-Cg6oxiz-.js.map

package/dist/{button-colors-AvGh22Zn.js.map → button-colors-Cg6oxiz-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-colors-AvGh22Zn.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button-colors-Cg6oxiz-.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/button-group.js

@@ -2,14 +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-AdJBEoNy.js';
 import './directive-ZPhl09Yt.js';
 import './state-DwbEjqVk.js';
 import './BaseButton-BNFAYn-S.js';
 import './query-QBcUV-L_.js';
 import './dispatch-event-utils-CuEqjlPT.js';
 import './BaseHyperlinkMixin-BNuwbiEf.js';
-import './button-colors-AvGh22Zn.js';
+import './button-colors-Cg6oxiz-.js';
 import './observe-slot-change-BGJfgg2E.js';
 
 var css_248z = i`* {

package/dist/button.js

@@ -3,7 +3,7 @@ import { n } from './property-1psGvXOq.js';
 import { r } from './state-DwbEjqVk.js';
 import { e } from './class-map-YU7g0o3B.js';
 import { B as BaseButton, o, s as spread } from './BaseButton-BNFAYn-S.js';
-import { c as css_248z$1, a as css_248z$2 } from './button-colors-AvGh22Zn.js';
+import { c as css_248z$1, a as css_248z$2 } from './button-colors-Cg6oxiz-.js';
 import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
 import { t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
 import './directive-ZPhl09Yt.js';
@@ -17,8 +17,8 @@ var css_248z = i`:host([size=xs]),
 
 :host([size=xs]) .button,
 :host([size=extra-small]) .button {
-  --_button-icon-size: 1rem;
-  --_button_container-padding: 0.75rem;
+  --private-button-icon-size: 1rem;
+  --private-button-container-padding: 0.75rem;
   font-size: 0.875rem !important;
   font-weight: var(--font-weight-medium) !important;
   line-height: 1.25rem !important;
@@ -32,9 +32,9 @@ var css_248z = i`:host([size=xs]),
 
 :host([size=sm]) .button,
 :host([size=small]) .button {
-  --_button-icon-size: 1.25rem;
-  --_button_container-padding: 1rem;
-  --_button-icon-label-spacing: 0.5rem;
+  --private-button-icon-size: 1.25rem;
+  --private-button-container-padding: 1rem;
+  --private-button-icon-label-spacing: 0.5rem;
   font-size: 0.875rem !important;
   font-weight: var(--font-weight-medium) !important;
   line-height: 1.25rem !important;
@@ -48,8 +48,8 @@ var css_248z = i`:host([size=xs]),
 
 :host([size=md]) .button,
 :host([size=medium]) .button {
-  --_button-icon-size: 1.5rem;
-  --_button_container-padding: 1.5rem;
+  --private-button-icon-size: 1.5rem;
+  --private-button-container-padding: 1.5rem;
   font-size: 1rem !important;
   font-weight: var(--font-weight-medium) !important;
   line-height: 1.5rem !important;
@@ -63,8 +63,8 @@ var css_248z = i`:host([size=xs]),
 
 :host([size=lg]) .button,
 :host([size=large]) .button {
-  --_button-icon-size: 2rem;
-  --_button_container-padding: 3rem;
+  --private-button-icon-size: 2rem;
+  --private-button-container-padding: 3rem;
   font-size: 1.5rem !important;
   font-weight: var(--font-weight-regular) !important;
   line-height: 2rem !important;
@@ -78,8 +78,8 @@ var css_248z = i`:host([size=xs]),
 
 :host([size=xl]) .button,
 :host([size=extra-large]) .button {
-  --_button-icon-size: 2.5rem;
-  --_button_container-padding: 4rem;
+  --private-button-icon-size: 2.5rem;
+  --private-button-container-padding: 4rem;
   font-size: 2rem !important;
   font-weight: var(--font-weight-regular) !important;
   line-height: 2.5rem !important;
@@ -193,7 +193,6 @@ let Button = class Button extends BaseButton {
     render() {
         const cssClasses = {
             button: true,
-            'button-element': true,
             [`size-${this.size}`]: true,
             [`variant-${this.variant}`]: true,
             [`color-${this.color}`]: true,
@@ -204,6 +203,7 @@ let Button = class Button extends BaseButton {
             [`icon-align-${this.iconAlign}`]: true,
         };
         if (!this.__isLink()) {
+            cssClasses['native-button'] = true;
             return b `<button
           class=${e(cssClasses)}
           id="button"
@@ -223,7 +223,9 @@ let Button = class Button extends BaseButton {
         </button>
         ${this.__renderTooltip()}`;
         }
-        return b `<a
+        else {
+            cssClasses['native-link'] = true;
+            return b `<a
         class=${e(cssClasses)}
         id="button"
         href=${this.href}
@@ -244,6 +246,7 @@ let Button = class Button extends BaseButton {
         ${this.renderButtonContent()}
       </a>
       ${this.__renderTooltip()}`;
+        }
     }
     renderButtonContent() {
         return b `

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/button/button/button.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\nimport colorStyles from './button-colors.scss';\nimport sizeStyles from './button-sizes.scss';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { spread } from '@/__directive/spread.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends BaseButton {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Icon alignment.\n   * Possible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.\n   */\n  @property({ attribute: 'icon-align' })\n  iconAlign: 'start' | 'end' = 'end';\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n     * Type is preset of color and variant. Type will be only applied.\n     *\n     */\n    @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n  \n    /**\n     * The visual style of the button.\n     *\n     *  Possible variant values:\n     * `\"filled\"` is a filled button.\n     * `\"outlined\"` is an outlined button.\n     * `\"text\"` is a transparent button.\n     * `\"tonal\"` is a light color button.\n     * `\"elevated\"` is elevated button\n     */\n    @property() variant:\n      | 'elevated'\n      | 'filled'\n      | 'tonal'\n      | 'outlined'\n      | 'text'\n      | 'neo' = 'filled';\n  \n    /**\n     * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n     */\n    @property({ reflect: true }) color:\n      | 'primary'\n      | 'success'\n      | 'danger'\n      | 'warning'\n      | 'surface'\n      | 'on-surface' = 'primary';\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  @state()\n  private slotHasContent = false;\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    this.__convertTypeToVariantAndColor();\n  }\n\n  __convertTypeToVariantAndColor() {\n    if (this.type === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.type === 'secondary') {\n      this.color = 'surface';\n      this.variant = 'filled';\n    } else if (this.type === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.type === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\n  }\n\n  override render() {\n\n    const cssClasses = {\n      button: true,\n      'button-element': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      disabled: this.disabled || this.softDisabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n      'show-skeleton': this.skeleton,\n      [`icon-align-${this.iconAlign}`]: true,\n    };\n\n    if (!this.__isLink()) {\n      return html`<button\n          class=${classMap(cssClasses)}\n          id=\"button\"\n          type=${this.htmlType}\n          @click=${this.__dispatchClickWithThrottle}\n          @mousedown=${this.__handlePress}\n          @keydown=${this.__handlePress}\n          @keyup=${this.__handlePress}\n\n          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n          ?aria-disabled=${this.softDisabled}\n\n          ?disabled=${this.disabled}\n          ${spread(this.configAria)}\n        >\n          ${this.renderButtonContent()}\n        </button>\n        ${this.__renderTooltip()}`;\n    }\n    return html`<a\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        href=${this.href}\n        target=${this.target}\n        tabindex=${this.disabled ? '-1' : '0'}\n        \n        @click=${this.__dispatchClick}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        role=\"button\"\n\n        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n        ?aria-disabled=${this.softDisabled}\n\n        ${spread(this.configAria)}\n      >\n        ${this.renderButtonContent()}\n      </a>\n      ${this.__renderTooltip()}`;\n  }\n\n  renderButtonContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for='button'></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"neo-background\"></div>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      <div class=\"button-content\">\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"icon\"></slot>\n      </div>\n\n      ${this.__renderDisabledReason(this.softDisabled)}\n    `;\n  }\n}\n"],"names":["html","classMap","ifDefined","styles","colorStyles","sizeStyles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU,CAAA;AAA/B,IAAA,WAAA,GAAA;;AAGL;;;AAGG;QAEH,IAAA,CAAA,SAAS,GAAoB,KAAK;AAElC;;;AAGG;QAC0B,IAAA,CAAA,IAAI,GAAqC,IAAI;AAQxE;;;;;;;;;AASG;QACS,IAAA,CAAA,OAAO,GAMP,QAAQ;AAEpB;;AAEG;QAC0B,IAAA,CAAA,KAAK,GAMf,SAAS;QAStB,IAAA,CAAA,cAAc,GAAG,KAAK;IAyHhC;IAvHW,KAAK,GAAA;AACZ,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE;IAC7B;IAES,IAAI,GAAA;AACX,QAAA,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE;IAC5B;IAES,YAAY,GAAA;AACnB,QAAA,IAAI,CAAC,2BAA2B,GAAG,QAAQ,CACzC,IAAI,CAAC,eAAe,EACpB,IAAI,CAAC,aAAa,CACnB;AACD,QAAA,+BAA+B,CAC7B,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,UAAU,IAAG;AACX,YAAA,IAAI,CAAC,cAAc,GAAG,UAAU;YAChC,IAAI,CAAC,aAAa,EAAE;AACtB,QAAA,CAAC,CACF;QAED,IAAI,CAAC,8BAA8B,EAAE;IACvC;IAEA,8BAA8B,GAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;AAC3B,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;QACzB;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;AACpC,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;QACzB;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AACnC,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM;QACvB;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AACjC,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;AACrB,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;QACzB;IACF;IAES,MAAM,GAAA;AAEb,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AAC3B,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,IAAI;AAC7B,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;YAC5C,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,aAAa,EAAE,IAAI,CAAC,cAAc;YAClC,eAAe,EAAE,IAAI,CAAC,QAAQ;AAC9B,YAAA,CAAC,cAAc,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,IAAI;SACvC;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;AACpB,YAAA,OAAOA,CAAI,CAAA,CAAA;kBACCC,CAAQ,CAAC,UAAU,CAAC;;AAErB,eAAA,EAAA,IAAI,CAAC,QAAQ;AACX,iBAAA,EAAA,IAAI,CAAC,2BAA2B;AAC5B,qBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,mBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,iBAAA,EAAA,IAAI,CAAC,aAAa;;AAER,2BAAA,EAAAC,CAAS,CAAC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,kBAAkB,GAAG,SAAS,CAAC;AAC1E,yBAAA,EAAA,IAAI,CAAC,YAAY;;AAEtB,oBAAA,EAAA,IAAI,CAAC,QAAQ;AACvB,UAAA,EAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;YAEvB,IAAI,CAAC,mBAAmB,EAAE;;AAE5B,QAAA,EAAA,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE;QAC9B;AACA,QAAA,OAAOF,CAAI,CAAA,CAAA;gBACCC,CAAQ,CAAC,UAAU,CAAC;;AAErB,aAAA,EAAA,IAAI,CAAC,IAAI;AACP,eAAA,EAAA,IAAI,CAAC,MAAM;mBACT,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG;;AAE5B,eAAA,EAAA,IAAI,CAAC,eAAe;AAChB,mBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,iBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,eAAA,EAAA,IAAI,CAAC,aAAa;;;AAGR,yBAAA,EAAAC,CAAS,CAAC,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,kBAAkB,GAAG,SAAS,CAAC;AAC1E,uBAAA,EAAA,IAAI,CAAC,YAAY;;AAEhC,QAAA,EAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;UAEvB,IAAI,CAAC,mBAAmB,EAAE;;AAE5B,MAAA,EAAA,IAAI,CAAC,eAAe,EAAE,CAAA,CAAE;IAC9B;IAEA,mBAAmB,GAAA;AACjB,QAAA,OAAOF,CAAI,CAAA;;;;;;;;;;;;;;;;;AAiBP,MAAA,EAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC;KACjD;IACH;;AAjLgB,MAAA,CAAA,MAAM,GAAG,CAACG,UAAM,EAAEC,UAAW,EAAEC,QAAU,CAAnC;AAOtB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE;AACF,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAMN,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAgD,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAM7C,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAA8C,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAY5D,UAAA,CAAA;AAAX,IAAAA,CAAQ;AAMY,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAKQ,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAME,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAM/B,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACS,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAG5B,UAAA,CAAA;AADP,IAAAC,CAAK;AACyB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AA1DpB,MAAM,GAAA,UAAA,CAAA;IADlB;AACY,CAAA,EAAA,MAAM,CAmLlB;;;;"}
+{"version":3,"file":"button.js","sources":["../../src/button/button/button.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\nimport colorStyles from './button-colors.scss';\nimport sizeStyles from './button-sizes.scss';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { spread } from '@/__directive/spread.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends BaseButton {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  /**\n   * Icon alignment.\n   * Possible values are `\"start\"`, `\"end\"`. Defaults to `\"end\"`.\n   */\n  @property({ attribute: 'icon-align' })\n  iconAlign: 'start' | 'end' = 'end';\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n     * Type is preset of color and variant. Type will be only applied.\n     *\n     */\n  @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\n\n  /**\n   * The visual style of the button.\n   *\n   *  Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"text\"` is a transparent button.\n   * `\"tonal\"` is a light color button.\n   * `\"elevated\"` is elevated button\n   */\n  @property() variant:\n    | 'elevated'\n    | 'filled'\n    | 'tonal'\n    | 'outlined'\n    | 'text'\n    | 'neo' = 'filled';\n\n  /**\n   * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n   */\n  @property({ reflect: true }) color:\n    | 'primary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface' = 'primary';\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  @state()\n  private slotHasContent = false;\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    this.__convertTypeToVariantAndColor();\n  }\n\n  __convertTypeToVariantAndColor() {\n    if (this.type === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.type === 'secondary') {\n      this.color = 'surface';\n      this.variant = 'filled';\n    } else if (this.type === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.type === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\n  }\n\n  override render() {\n\n    const cssClasses: any = {\n      button: true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      disabled: this.disabled || this.softDisabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n      'show-skeleton': this.skeleton,\n      [`icon-align-${this.iconAlign}`]: true,\n    };\n\n    if (!this.__isLink()) {\n      cssClasses['native-button'] = true;\n\n      return html`<button\n          class=${classMap(cssClasses)}\n          id=\"button\"\n          type=${this.htmlType}\n          @click=${this.__dispatchClickWithThrottle}\n          @mousedown=${this.__handlePress}\n          @keydown=${this.__handlePress}\n          @keyup=${this.__handlePress}\n\n          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n          ?aria-disabled=${this.softDisabled}\n\n          ?disabled=${this.disabled}\n          ${spread(this.configAria)}\n        >\n          ${this.renderButtonContent()}\n        </button>\n        ${this.__renderTooltip()}`;\n    } else {\n      cssClasses['native-link'] = true;\n      return html`<a\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        href=${this.href}\n        target=${this.target}\n        tabindex=${this.disabled ? '-1' : '0'}\n        \n        @click=${this.__dispatchClick}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        role=\"button\"\n\n        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n        ?aria-disabled=${this.softDisabled}\n\n        ${spread(this.configAria)}\n      >\n        ${this.renderButtonContent()}\n      </a>\n      ${this.__renderTooltip()}`;\n    }\n  }\n\n  renderButtonContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for='button'></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"neo-background\"></div>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      <div class=\"button-content\">\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"icon\"></slot>\n      </div>\n\n      ${this.__renderDisabledReason(this.softDisabled)}\n    `;\n  }\n}\n"],"names":["html","classMap","ifDefined","styles","colorStyles","sizeStyles","property","state"],"mappings":"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"}