@medyll/idae-slotui-svelte 0.119.0 → 0.121.0

package/dist/slotui-css/button.css

@@ -1,761 +1,761 @@
-:root {
-  --sld-button-font-size: inherit;
-  --sld-button-radius: var(--sld-radius-small);
-  --sld-button-border-color: var(--sld-color-primary);
-  --sld-button-border-width: 1px;
-  --sld-button-text-align: center;
-  --sld-button-padding: 0;
-  --sld-button-background: var(--sld-color-foreground-alpha-high);
-  --sld-button-contained-background: var(--sld-color-primary-alpha-high);
-  --sld-button-hover-border-color: var(--sld-color-primary);
-  --sld-button-active-border-color: var(--sld-color-secondary);
-  --sld-button-focus-border-color: var(--sld-color-primary);
-  --sld-button-hover-shadow: var(--sld-elevation-3);
-  --sld-button-active-shadow: var(--sld-elevation-4);
-  --sld-button-focus-shadow: var(--sld-elevation-4);
-}
-
-.actionButton {
-  height: 100%;
-  width: var(--w-tiny);
-  cursor: pointer;
-}
-.actionButton:hover {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-
-.slotui-button,
-button.slotui-button,
-input[type=button].slotui-button,
-input[type=submit].slotui-button {
-  width: var(--sld-width-small);
-}
-.slotui-button,
-button.slotui-button,
-input[type=button].slotui-button,
-input[type=submit].slotui-button {
-  --preset-width: var(--sld-width-small);
-}
-.slotui-button[width=tiny], .slotui-button.width-tiny,
-button.slotui-button[width=tiny],
-button.slotui-button.width-tiny,
-input[type=button].slotui-button[width=tiny],
-input[type=button].slotui-button.width-tiny,
-input[type=submit].slotui-button[width=tiny],
-input[type=submit].slotui-button.width-tiny {
-  --preset-width: var(--sld-width-tiny);
-  width: var(--sld-width-tiny) !important;
-}
-.slotui-button[width=mini], .slotui-button.width-mini,
-button.slotui-button[width=mini],
-button.slotui-button.width-mini,
-input[type=button].slotui-button[width=mini],
-input[type=button].slotui-button.width-mini,
-input[type=submit].slotui-button[width=mini],
-input[type=submit].slotui-button.width-mini {
-  --preset-width: var(--sld-width-mini);
-  width: var(--sld-width-mini) !important;
-}
-.slotui-button[width=small], .slotui-button.width-small,
-button.slotui-button[width=small],
-button.slotui-button.width-small,
-input[type=button].slotui-button[width=small],
-input[type=button].slotui-button.width-small,
-input[type=submit].slotui-button[width=small],
-input[type=submit].slotui-button.width-small {
-  --preset-width: var(--sld-width-small);
-  width: var(--sld-width-small) !important;
-}
-.slotui-button[width=med], .slotui-button.width-med,
-button.slotui-button[width=med],
-button.slotui-button.width-med,
-input[type=button].slotui-button[width=med],
-input[type=button].slotui-button.width-med,
-input[type=submit].slotui-button[width=med],
-input[type=submit].slotui-button.width-med {
-  --preset-width: var(--sld-width-med);
-  width: var(--sld-width-med) !important;
-}
-.slotui-button[width=kind], .slotui-button.width-kind,
-button.slotui-button[width=kind],
-button.slotui-button.width-kind,
-input[type=button].slotui-button[width=kind],
-input[type=button].slotui-button.width-kind,
-input[type=submit].slotui-button[width=kind],
-input[type=submit].slotui-button.width-kind {
-  --preset-width: var(--sld-width-kind);
-  width: var(--sld-width-kind) !important;
-}
-.slotui-button[width=full], .slotui-button.width-full,
-button.slotui-button[width=full],
-button.slotui-button.width-full,
-input[type=button].slotui-button[width=full],
-input[type=button].slotui-button.width-full,
-input[type=submit].slotui-button[width=full],
-input[type=submit].slotui-button.width-full {
-  --preset-width: var(--sld-width-full);
-  width: var(--sld-width-full) !important;
-}
-.slotui-button[width=auto], .slotui-button.width-auto,
-button.slotui-button[width=auto],
-button.slotui-button.width-auto,
-input[type=button].slotui-button[width=auto],
-input[type=button].slotui-button.width-auto,
-input[type=submit].slotui-button[width=auto],
-input[type=submit].slotui-button.width-auto {
-  --preset-width: var(--sld-width-auto);
-  width: var(--sld-width-auto) !important;
-}
-.slotui-button[width=default], .slotui-button.width-default,
-button.slotui-button[width=default],
-button.slotui-button.width-default,
-input[type=button].slotui-button[width=default],
-input[type=button].slotui-button.width-default,
-input[type=submit].slotui-button[width=default],
-input[type=submit].slotui-button.width-default {
-  --preset-width: var(--sld-width-default);
-  width: var(--sld-width-default) !important;
-}
-.slotui-button,
-button.slotui-button,
-input[type=button].slotui-button,
-input[type=submit].slotui-button {
-  min-height: var(--preset-tall-small);
-  height: var(--preset-tall-small);
-}
-.slotui-button,
-button.slotui-button,
-input[type=button].slotui-button,
-input[type=submit].slotui-button {
-  --preset-tall: var(--sld-tall-small);
-}
-.slotui-button[tall=tiny], .slotui-button.tall-tiny,
-button.slotui-button[tall=tiny],
-button.slotui-button.tall-tiny,
-input[type=button].slotui-button[tall=tiny],
-input[type=button].slotui-button.tall-tiny,
-input[type=submit].slotui-button[tall=tiny],
-input[type=submit].slotui-button.tall-tiny {
-  min-height: var(--sld-tall-tiny) !important;
-}
-.slotui-button[tall=mini], .slotui-button.tall-mini,
-button.slotui-button[tall=mini],
-button.slotui-button.tall-mini,
-input[type=button].slotui-button[tall=mini],
-input[type=button].slotui-button.tall-mini,
-input[type=submit].slotui-button[tall=mini],
-input[type=submit].slotui-button.tall-mini {
-  min-height: var(--sld-tall-mini) !important;
-}
-.slotui-button[tall=small], .slotui-button.tall-small,
-button.slotui-button[tall=small],
-button.slotui-button.tall-small,
-input[type=button].slotui-button[tall=small],
-input[type=button].slotui-button.tall-small,
-input[type=submit].slotui-button[tall=small],
-input[type=submit].slotui-button.tall-small {
-  min-height: var(--sld-tall-small) !important;
-}
-.slotui-button[tall=med], .slotui-button.tall-med,
-button.slotui-button[tall=med],
-button.slotui-button.tall-med,
-input[type=button].slotui-button[tall=med],
-input[type=button].slotui-button.tall-med,
-input[type=submit].slotui-button[tall=med],
-input[type=submit].slotui-button.tall-med {
-  min-height: var(--sld-tall-med) !important;
-}
-.slotui-button[tall=kind], .slotui-button.tall-kind,
-button.slotui-button[tall=kind],
-button.slotui-button.tall-kind,
-input[type=button].slotui-button[tall=kind],
-input[type=button].slotui-button.tall-kind,
-input[type=submit].slotui-button[tall=kind],
-input[type=submit].slotui-button.tall-kind {
-  min-height: var(--sld-tall-kind) !important;
-}
-.slotui-button[tall=auto], .slotui-button.tall-auto,
-button.slotui-button[tall=auto],
-button.slotui-button.tall-auto,
-input[type=button].slotui-button[tall=auto],
-input[type=button].slotui-button.tall-auto,
-input[type=submit].slotui-button[tall=auto],
-input[type=submit].slotui-button.tall-auto {
-  min-height: var(--sld-tall-auto) !important;
-}
-.slotui-button[tall=default], .slotui-button.tall-default,
-button.slotui-button[tall=default],
-button.slotui-button.tall-default,
-input[type=button].slotui-button[tall=default],
-input[type=button].slotui-button.tall-default,
-input[type=submit].slotui-button[tall=default],
-input[type=submit].slotui-button.tall-default {
-  min-height: var(--sld-tall-default) !important;
-}
-.slotui-button[variant*=square],
-button.slotui-button[variant*=square],
-input[type=button].slotui-button[variant*=square],
-input[type=submit].slotui-button[variant*=square] {
-  aspect-ratio: 1/1 !important;
-  height: auto;
-}
-.slotui-button[variant*=rounded],
-button.slotui-button[variant*=rounded],
-input[type=button].slotui-button[variant*=rounded],
-input[type=submit].slotui-button[variant*=rounded] {
-  border-radius: 50%;
-}
-.slotui-button.elevation-0, .slotui-button[elevation-0],
-button.slotui-button.elevation-0,
-button.slotui-button[elevation-0],
-input[type=button].slotui-button.elevation-0,
-input[type=button].slotui-button[elevation-0],
-input[type=submit].slotui-button.elevation-0,
-input[type=submit].slotui-button[elevation-0] {
-  box-shadow: var(--sld-elevation-0);
-}
-.slotui-button.elevation-through, .slotui-button[elevation-through],
-button.slotui-button.elevation-through,
-button.slotui-button[elevation-through],
-input[type=button].slotui-button.elevation-through,
-input[type=button].slotui-button[elevation-through],
-input[type=submit].slotui-button.elevation-through,
-input[type=submit].slotui-button[elevation-through] {
-  box-shadow: var(--sld-elevation-through);
-}
-.slotui-button.elevation-5, .slotui-button[elevation-5],
-button.slotui-button.elevation-5,
-button.slotui-button[elevation-5],
-input[type=button].slotui-button.elevation-5,
-input[type=button].slotui-button[elevation-5],
-input[type=submit].slotui-button.elevation-5,
-input[type=submit].slotui-button[elevation-5] {
-  box-shadow: var(--sld-elevation-5);
-}
-.slotui-button,
-button.slotui-button,
-input[type=button].slotui-button,
-input[type=submit].slotui-button {
-  border: none;
-  border-radius: 0;
-  margin: 0;
-  text-align: var(--sld-button-text-align);
-  font-size: var(--sld-button-font-size);
-  border-radius: var(--sld-button-radius);
-  color: var(--sld-color-foreground);
-  padding: var(--sld-button-padding);
-  position: relative;
-  display: inline-flex;
-  transition: all 0.2s ease-in-out;
-  overflow: hidden;
-  cursor: pointer;
-  align-content: center;
-  align-items: center;
-  background: var(--sld-button-background);
-}
-.slotui-button .start,
-button.slotui-button .start,
-input[type=button].slotui-button .start,
-input[type=submit].slotui-button .start {
-  position: relative;
-  top: 0;
-  left: 0;
-  max-height: 100%;
-  align-items: center;
-  align-content: center;
-  padding: 0 0.5rem;
-  display: block;
-}
-.slotui-button .start:empty,
-button.slotui-button .start:empty,
-input[type=button].slotui-button .start:empty,
-input[type=submit].slotui-button .start:empty {
-  display: none;
-}
-.slotui-button .central,
-button.slotui-button .central,
-input[type=button].slotui-button .central,
-input[type=submit].slotui-button .central {
-  --preset-ellipsis-line: 1;
-}
-.slotui-button .central[ellipsis], .slotui-button .central.ellipsis,
-button.slotui-button .central[ellipsis],
-button.slotui-button .central.ellipsis,
-input[type=button].slotui-button .central[ellipsis],
-input[type=button].slotui-button .central.ellipsis,
-input[type=submit].slotui-button .central[ellipsis],
-input[type=submit].slotui-button .central.ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.slotui-button .central.ellipsis-line-1,
-button.slotui-button .central.ellipsis-line-1,
-input[type=button].slotui-button .central.ellipsis-line-1,
-input[type=submit].slotui-button .central.ellipsis-line-1 {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  --preset-ellipsis-line: 1;
-}
-.slotui-button .central.ellipsis-line-2,
-button.slotui-button .central.ellipsis-line-2,
-input[type=button].slotui-button .central.ellipsis-line-2,
-input[type=submit].slotui-button .central.ellipsis-line-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  --preset-ellipsis-line: 2;
-}
-.slotui-button .central.ellipsis-line-3,
-button.slotui-button .central.ellipsis-line-3,
-input[type=button].slotui-button .central.ellipsis-line-3,
-input[type=submit].slotui-button .central.ellipsis-line-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  --preset-ellipsis-line: 3;
-}
-.slotui-button .central.ellipsis-line-4,
-button.slotui-button .central.ellipsis-line-4,
-input[type=button].slotui-button .central.ellipsis-line-4,
-input[type=submit].slotui-button .central.ellipsis-line-4 {
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  --preset-ellipsis-line: 4;
-}
-.slotui-button .central.ellipsis-line-5,
-button.slotui-button .central.ellipsis-line-5,
-input[type=button].slotui-button .central.ellipsis-line-5,
-input[type=submit].slotui-button .central.ellipsis-line-5 {
-  display: -webkit-box;
-  -webkit-line-clamp: 5;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-  --preset-ellipsis-line: 5;
-}
-.slotui-button .central,
-button.slotui-button .central,
-input[type=button].slotui-button .central,
-input[type=submit].slotui-button .central {
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-  flex: 1;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-  justify-items: center;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  text-align: var(--sld-button-text-align, center);
-  overflow: hidden;
-}
-.slotui-button .central:empty,
-button.slotui-button .central:empty,
-input[type=button].slotui-button .central:empty,
-input[type=submit].slotui-button .central:empty {
-  display: none;
-}
-.slotui-button .end,
-button.slotui-button .end,
-input[type=button].slotui-button .end,
-input[type=submit].slotui-button .end {
-  position: relative;
-  align-items: center;
-  align-content: center;
-  padding: 0 0.5rem;
-  text-align: center;
-  cursor: pointer;
-}
-.slotui-button .end:empty,
-button.slotui-button .end:empty,
-input[type=button].slotui-button .end:empty,
-input[type=submit].slotui-button .end:empty {
-  display: none;
-}
-.slotui-button .end:hover,
-button.slotui-button .end:hover,
-input[type=button].slotui-button .end:hover,
-input[type=submit].slotui-button .end:hover {
-  background-color: var(--sld-button-action-hover-background);
-}
-.slotui-button.loading, .slotui-button[aria-busy=true],
-button.slotui-button.loading,
-button.slotui-button[aria-busy=true],
-input[type=button].slotui-button.loading,
-input[type=button].slotui-button[aria-busy=true],
-input[type=submit].slotui-button.loading,
-input[type=submit].slotui-button[aria-busy=true] {
-  position: relative;
-  color: transparent;
-  pointer-events: none;
-}
-.slotui-button.loading::after, .slotui-button[aria-busy=true]::after,
-button.slotui-button.loading::after,
-button.slotui-button[aria-busy=true]::after,
-input[type=button].slotui-button.loading::after,
-input[type=button].slotui-button[aria-busy=true]::after,
-input[type=submit].slotui-button.loading::after,
-input[type=submit].slotui-button[aria-busy=true]::after {
-  content: " ";
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  top: 50%;
-  left: 50%;
-  margin-top: -8px;
-  margin-left: -8px;
-  border: 2px solid var(--sld-color-secondary);
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  animation: button-spinner 0.6s linear infinite;
-}
-.slotui-button[disabled], .slotui-button.disabled, .slotui-button[aria-disabled=true],
-button.slotui-button[disabled],
-button.slotui-button.disabled,
-button.slotui-button[aria-disabled=true],
-input[type=button].slotui-button[disabled],
-input[type=button].slotui-button.disabled,
-input[type=button].slotui-button[aria-disabled=true],
-input[type=submit].slotui-button[disabled],
-input[type=submit].slotui-button.disabled,
-input[type=submit].slotui-button[aria-disabled=true] {
-  color: var(--color-gray-800);
-  border-color: var(--color-gray-400);
-  opacity: 0.6;
-  cursor: not-allowed;
-  box-shadow: none;
-  pointer-events: none;
-}
-.slotui-button[aria-pressed=true], .slotui-button.selected,
-button.slotui-button[aria-pressed=true],
-button.slotui-button.selected,
-input[type=button].slotui-button[aria-pressed=true],
-input[type=button].slotui-button.selected,
-input[type=submit].slotui-button[aria-pressed=true],
-input[type=submit].slotui-button.selected {
-  box-shadow: var(--sld-elevation-3);
-  background-color: var(--sld-color-secondary);
-  font-weight: bold;
-}
-.slotui-button .chip,
-button.slotui-button .chip,
-input[type=button].slotui-button .chip,
-input[type=submit].slotui-button .chip {
-  position: absolute;
-  z-index: 2;
-  height: 3px;
-  left: 50%;
-  transform: translate(-50%, 0);
-  width: 50%;
-  background-color: var(--css-button-chip-color, var(--sld-color-primary));
-  border-radius: var(--sld-radius-large);
-  bottom: 2px;
-}
-.slotui-button .loadingButtonZone,
-button.slotui-button .loadingButtonZone,
-input[type=button].slotui-button .loadingButtonZone,
-input[type=submit].slotui-button .loadingButtonZone {
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  height: 100%;
-  overflow: hidden;
-  align-content: center;
-  justify-content: space-around;
-}
-.slotui-button[variant*=bordered], .slotui-button[bordered=true], .slotui-button.bordered,
-button.slotui-button[variant*=bordered],
-button.slotui-button[bordered=true],
-button.slotui-button.bordered,
-input[type=button].slotui-button[variant*=bordered],
-input[type=button].slotui-button[bordered=true],
-input[type=button].slotui-button.bordered,
-input[type=submit].slotui-button[variant*=bordered],
-input[type=submit].slotui-button[bordered=true],
-input[type=submit].slotui-button.bordered {
-  color: var(--sld-color-foreground);
-  border: var(--sld-button-border-width) solid var(--sld-button-border-color);
-  box-shadow: var(--sld-elevation-1);
-  background-color: var(--sld-button-background);
-}
-.slotui-button[variant*=bordered]:hover, .slotui-button[bordered=true]:hover, .slotui-button.bordered:hover,
-button.slotui-button[variant*=bordered]:hover,
-button.slotui-button[bordered=true]:hover,
-button.slotui-button.bordered:hover,
-input[type=button].slotui-button[variant*=bordered]:hover,
-input[type=button].slotui-button[bordered=true]:hover,
-input[type=button].slotui-button.bordered:hover,
-input[type=submit].slotui-button[variant*=bordered]:hover,
-input[type=submit].slotui-button[bordered=true]:hover,
-input[type=submit].slotui-button.bordered:hover {
-  border-color: var(--sld-color-primary);
-  box-shadow: var(--sld-button-hover-shadow);
-}
-.slotui-button[variant*=bordered]:focus, .slotui-button[variant*=bordered]:active, .slotui-button[bordered=true]:focus, .slotui-button[bordered=true]:active, .slotui-button.bordered:focus, .slotui-button.bordered:active,
-button.slotui-button[variant*=bordered]:focus,
-button.slotui-button[variant*=bordered]:active,
-button.slotui-button[bordered=true]:focus,
-button.slotui-button[bordered=true]:active,
-button.slotui-button.bordered:focus,
-button.slotui-button.bordered:active,
-input[type=button].slotui-button[variant*=bordered]:focus,
-input[type=button].slotui-button[variant*=bordered]:active,
-input[type=button].slotui-button[bordered=true]:focus,
-input[type=button].slotui-button[bordered=true]:active,
-input[type=button].slotui-button.bordered:focus,
-input[type=button].slotui-button.bordered:active,
-input[type=submit].slotui-button[variant*=bordered]:focus,
-input[type=submit].slotui-button[variant*=bordered]:active,
-input[type=submit].slotui-button[bordered=true]:focus,
-input[type=submit].slotui-button[bordered=true]:active,
-input[type=submit].slotui-button.bordered:focus,
-input[type=submit].slotui-button.bordered:active {
-  border-color: var(--sld-button-active-border-color);
-  box-shadow: var(--sld-button-active-shadow);
-}
-.slotui-button[variant*=contained], .slotui-button[contained=true], .slotui-button.contained,
-button.slotui-button[variant*=contained],
-button.slotui-button[contained=true],
-button.slotui-button.contained,
-input[type=button].slotui-button[variant*=contained],
-input[type=button].slotui-button[contained=true],
-input[type=button].slotui-button.contained,
-input[type=submit].slotui-button[variant*=contained],
-input[type=submit].slotui-button[contained=true],
-input[type=submit].slotui-button.contained {
-  border: var(--sld-button-border-width) solid var(--sld-button-border-color);
-  color: var(--sld-color-on-primary);
-  background-color: var(--sld-button-contained-background);
-  background-clip: padding-box;
-  box-shadow: var(--sld-elevation-1);
-}
-.slotui-button[variant*=contained]:hover, .slotui-button[contained=true]:hover, .slotui-button.contained:hover,
-button.slotui-button[variant*=contained]:hover,
-button.slotui-button[contained=true]:hover,
-button.slotui-button.contained:hover,
-input[type=button].slotui-button[variant*=contained]:hover,
-input[type=button].slotui-button[contained=true]:hover,
-input[type=button].slotui-button.contained:hover,
-input[type=submit].slotui-button[variant*=contained]:hover,
-input[type=submit].slotui-button[contained=true]:hover,
-input[type=submit].slotui-button.contained:hover {
-  background-color: var(--sld-color-secondary);
-  color: var(--sld-color-on-secondary);
-}
-.slotui-button[variant*=contained]:focus, .slotui-button[variant*=contained]:active, .slotui-button[contained=true]:focus, .slotui-button[contained=true]:active, .slotui-button.contained:focus, .slotui-button.contained:active,
-button.slotui-button[variant*=contained]:focus,
-button.slotui-button[variant*=contained]:active,
-button.slotui-button[contained=true]:focus,
-button.slotui-button[contained=true]:active,
-button.slotui-button.contained:focus,
-button.slotui-button.contained:active,
-input[type=button].slotui-button[variant*=contained]:focus,
-input[type=button].slotui-button[variant*=contained]:active,
-input[type=button].slotui-button[contained=true]:focus,
-input[type=button].slotui-button[contained=true]:active,
-input[type=button].slotui-button.contained:focus,
-input[type=button].slotui-button.contained:active,
-input[type=submit].slotui-button[variant*=contained]:focus,
-input[type=submit].slotui-button[variant*=contained]:active,
-input[type=submit].slotui-button[contained=true]:focus,
-input[type=submit].slotui-button[contained=true]:active,
-input[type=submit].slotui-button.contained:focus,
-input[type=submit].slotui-button.contained:active {
-  background-color: var(--sld-color-tertiary);
-  color: var(--sld-color-on-tertiary);
-  box-shadow: var(--sld-button-active-shadow);
-}
-.slotui-button[variant*=link], .slotui-button.link, .slotui-button[role=link],
-button.slotui-button[variant*=link],
-button.slotui-button.link,
-button.slotui-button[role=link],
-input[type=button].slotui-button[variant*=link],
-input[type=button].slotui-button.link,
-input[type=button].slotui-button[role=link],
-input[type=submit].slotui-button[variant*=link],
-input[type=submit].slotui-button.link,
-input[type=submit].slotui-button[role=link] {
-  color: var(--sld-color-primary);
-  text-decoration: underline;
-  text-underline-offset: 0.35rem;
-  background-color: transparent;
-  cursor: pointer;
-  border: none;
-}
-.slotui-button[variant*=link]:hover, .slotui-button.link:hover, .slotui-button[role=link]:hover,
-button.slotui-button[variant*=link]:hover,
-button.slotui-button.link:hover,
-button.slotui-button[role=link]:hover,
-input[type=button].slotui-button[variant*=link]:hover,
-input[type=button].slotui-button.link:hover,
-input[type=button].slotui-button[role=link]:hover,
-input[type=submit].slotui-button[variant*=link]:hover,
-input[type=submit].slotui-button.link:hover,
-input[type=submit].slotui-button[role=link]:hover {
-  text-decoration: underline;
-}
-.slotui-button[variant*=link]:focus, .slotui-button[variant*=link]:active, .slotui-button.link:focus, .slotui-button.link:active, .slotui-button[role=link]:focus, .slotui-button[role=link]:active,
-button.slotui-button[variant*=link]:focus,
-button.slotui-button[variant*=link]:active,
-button.slotui-button.link:focus,
-button.slotui-button.link:active,
-button.slotui-button[role=link]:focus,
-button.slotui-button[role=link]:active,
-input[type=button].slotui-button[variant*=link]:focus,
-input[type=button].slotui-button[variant*=link]:active,
-input[type=button].slotui-button.link:focus,
-input[type=button].slotui-button.link:active,
-input[type=button].slotui-button[role=link]:focus,
-input[type=button].slotui-button[role=link]:active,
-input[type=submit].slotui-button[variant*=link]:focus,
-input[type=submit].slotui-button[variant*=link]:active,
-input[type=submit].slotui-button.link:focus,
-input[type=submit].slotui-button.link:active,
-input[type=submit].slotui-button[role=link]:focus,
-input[type=submit].slotui-button[role=link]:active {
-  text-decoration: underline;
-  outline: none;
-  box-shadow: none;
-}
-.slotui-button[variant*=naked]:hover, .slotui-button[naked=true]:hover, .slotui-button.naked:hover,
-button.slotui-button[variant*=naked]:hover,
-button.slotui-button[naked=true]:hover,
-button.slotui-button.naked:hover,
-input[type=button].slotui-button[variant*=naked]:hover,
-input[type=button].slotui-button[naked=true]:hover,
-input[type=button].slotui-button.naked:hover,
-input[type=submit].slotui-button[variant*=naked]:hover,
-input[type=submit].slotui-button[naked=true]:hover,
-input[type=submit].slotui-button.naked:hover {
-  border-color: var(--sld-hover-border-color);
-  background-color: var(--sld-background-disabled);
-}
-.slotui-button[variant*=naked], .slotui-button[naked=true], .slotui-button.naked,
-button.slotui-button[variant*=naked],
-button.slotui-button[naked=true],
-button.slotui-button.naked,
-input[type=button].slotui-button[variant*=naked],
-input[type=button].slotui-button[naked=true],
-input[type=button].slotui-button.naked,
-input[type=submit].slotui-button[variant*=naked],
-input[type=submit].slotui-button[naked=true],
-input[type=submit].slotui-button.naked {
-  color: inherit;
-  background-color: transparent;
-  border: 0px solid transparent;
-  cursor: pointer;
-}
-.slotui-button[variant*=naked]:hover, .slotui-button[naked=true]:hover, .slotui-button.naked:hover,
-button.slotui-button[variant*=naked]:hover,
-button.slotui-button[naked=true]:hover,
-button.slotui-button.naked:hover,
-input[type=button].slotui-button[variant*=naked]:hover,
-input[type=button].slotui-button[naked=true]:hover,
-input[type=button].slotui-button.naked:hover,
-input[type=submit].slotui-button[variant*=naked]:hover,
-input[type=submit].slotui-button[naked=true]:hover,
-input[type=submit].slotui-button.naked:hover {
-  background-color: var(--sld-button-hover-background);
-}
-.slotui-button[variant*=naked]:active, .slotui-button[variant*=naked]:focus, .slotui-button[naked=true]:active, .slotui-button[naked=true]:focus, .slotui-button.naked:active, .slotui-button.naked:focus,
-button.slotui-button[variant*=naked]:active,
-button.slotui-button[variant*=naked]:focus,
-button.slotui-button[naked=true]:active,
-button.slotui-button[naked=true]:focus,
-button.slotui-button.naked:active,
-button.slotui-button.naked:focus,
-input[type=button].slotui-button[variant*=naked]:active,
-input[type=button].slotui-button[variant*=naked]:focus,
-input[type=button].slotui-button[naked=true]:active,
-input[type=button].slotui-button[naked=true]:focus,
-input[type=button].slotui-button.naked:active,
-input[type=button].slotui-button.naked:focus,
-input[type=submit].slotui-button[variant*=naked]:active,
-input[type=submit].slotui-button[variant*=naked]:focus,
-input[type=submit].slotui-button[naked=true]:active,
-input[type=submit].slotui-button[naked=true]:focus,
-input[type=submit].slotui-button.naked:active,
-input[type=submit].slotui-button.naked:focus {
-  background-color: transparent;
-  border: 0.5px solid transparent;
-  color: inherit;
-}
-.slotui-button[variant*=flat], .slotui-button[flat=true], .slotui-button.flat,
-button.slotui-button[variant*=flat],
-button.slotui-button[flat=true],
-button.slotui-button.flat,
-input[type=button].slotui-button[variant*=flat],
-input[type=button].slotui-button[flat=true],
-input[type=button].slotui-button.flat,
-input[type=submit].slotui-button[variant*=flat],
-input[type=submit].slotui-button[flat=true],
-input[type=submit].slotui-button.flat {
-  color: inherit;
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  cursor: pointer;
-}
-.slotui-button[variant*=flat]:hover, .slotui-button[flat=true]:hover, .slotui-button.flat:hover,
-button.slotui-button[variant*=flat]:hover,
-button.slotui-button[flat=true]:hover,
-button.slotui-button.flat:hover,
-input[type=button].slotui-button[variant*=flat]:hover,
-input[type=button].slotui-button[flat=true]:hover,
-input[type=button].slotui-button.flat:hover,
-input[type=submit].slotui-button[variant*=flat]:hover,
-input[type=submit].slotui-button[flat=true]:hover,
-input[type=submit].slotui-button.flat:hover {
-  background-color: var(--sld-button-hover-background);
-}
-.slotui-button[variant*=flat]:active, .slotui-button[variant*=flat]:focus, .slotui-button[flat=true]:active, .slotui-button[flat=true]:focus, .slotui-button.flat:active, .slotui-button.flat:focus,
-button.slotui-button[variant*=flat]:active,
-button.slotui-button[variant*=flat]:focus,
-button.slotui-button[flat=true]:active,
-button.slotui-button[flat=true]:focus,
-button.slotui-button.flat:active,
-button.slotui-button.flat:focus,
-input[type=button].slotui-button[variant*=flat]:active,
-input[type=button].slotui-button[variant*=flat]:focus,
-input[type=button].slotui-button[flat=true]:active,
-input[type=button].slotui-button[flat=true]:focus,
-input[type=button].slotui-button.flat:active,
-input[type=button].slotui-button.flat:focus,
-input[type=submit].slotui-button[variant*=flat]:active,
-input[type=submit].slotui-button[variant*=flat]:focus,
-input[type=submit].slotui-button[flat=true]:active,
-input[type=submit].slotui-button[flat=true]:focus,
-input[type=submit].slotui-button.flat:active,
-input[type=submit].slotui-button.flat:focus {
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  color: inherit;
-}
-
-@keyframes button-spinner {
-  to {
-    transform: rotate(360deg);
-  }
+:root {
+  --sld-button-font-size: inherit;
+  --sld-button-radius: var(--sld-radius-small);
+  --sld-button-border-color: var(--sld-color-primary);
+  --sld-button-border-width: 1px;
+  --sld-button-text-align: center;
+  --sld-button-padding: 0;
+  --sld-button-background: var(--sld-color-foreground-alpha-high);
+  --sld-button-contained-background: var(--sld-color-primary-alpha-high);
+  --sld-button-hover-border-color: var(--sld-color-primary);
+  --sld-button-active-border-color: var(--sld-color-secondary);
+  --sld-button-focus-border-color: var(--sld-color-primary);
+  --sld-button-hover-shadow: var(--sld-elevation-3);
+  --sld-button-active-shadow: var(--sld-elevation-4);
+  --sld-button-focus-shadow: var(--sld-elevation-4);
+}
+
+.actionButton {
+  height: 100%;
+  width: var(--w-tiny);
+  cursor: pointer;
+}
+.actionButton:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
+  width: var(--sld-width-small);
+}
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
+  --preset-width: var(--sld-width-small);
+}
+.slotui-button[width=tiny], .slotui-button.width-tiny,
+button.slotui-button[width=tiny],
+button.slotui-button.width-tiny,
+input[type=button].slotui-button[width=tiny],
+input[type=button].slotui-button.width-tiny,
+input[type=submit].slotui-button[width=tiny],
+input[type=submit].slotui-button.width-tiny {
+  --preset-width: var(--sld-width-tiny);
+  width: var(--sld-width-tiny) !important;
+}
+.slotui-button[width=mini], .slotui-button.width-mini,
+button.slotui-button[width=mini],
+button.slotui-button.width-mini,
+input[type=button].slotui-button[width=mini],
+input[type=button].slotui-button.width-mini,
+input[type=submit].slotui-button[width=mini],
+input[type=submit].slotui-button.width-mini {
+  --preset-width: var(--sld-width-mini);
+  width: var(--sld-width-mini) !important;
+}
+.slotui-button[width=small], .slotui-button.width-small,
+button.slotui-button[width=small],
+button.slotui-button.width-small,
+input[type=button].slotui-button[width=small],
+input[type=button].slotui-button.width-small,
+input[type=submit].slotui-button[width=small],
+input[type=submit].slotui-button.width-small {
+  --preset-width: var(--sld-width-small);
+  width: var(--sld-width-small) !important;
+}
+.slotui-button[width=med], .slotui-button.width-med,
+button.slotui-button[width=med],
+button.slotui-button.width-med,
+input[type=button].slotui-button[width=med],
+input[type=button].slotui-button.width-med,
+input[type=submit].slotui-button[width=med],
+input[type=submit].slotui-button.width-med {
+  --preset-width: var(--sld-width-med);
+  width: var(--sld-width-med) !important;
+}
+.slotui-button[width=kind], .slotui-button.width-kind,
+button.slotui-button[width=kind],
+button.slotui-button.width-kind,
+input[type=button].slotui-button[width=kind],
+input[type=button].slotui-button.width-kind,
+input[type=submit].slotui-button[width=kind],
+input[type=submit].slotui-button.width-kind {
+  --preset-width: var(--sld-width-kind);
+  width: var(--sld-width-kind) !important;
+}
+.slotui-button[width=full], .slotui-button.width-full,
+button.slotui-button[width=full],
+button.slotui-button.width-full,
+input[type=button].slotui-button[width=full],
+input[type=button].slotui-button.width-full,
+input[type=submit].slotui-button[width=full],
+input[type=submit].slotui-button.width-full {
+  --preset-width: var(--sld-width-full);
+  width: var(--sld-width-full) !important;
+}
+.slotui-button[width=auto], .slotui-button.width-auto,
+button.slotui-button[width=auto],
+button.slotui-button.width-auto,
+input[type=button].slotui-button[width=auto],
+input[type=button].slotui-button.width-auto,
+input[type=submit].slotui-button[width=auto],
+input[type=submit].slotui-button.width-auto {
+  --preset-width: var(--sld-width-auto);
+  width: var(--sld-width-auto) !important;
+}
+.slotui-button[width=default], .slotui-button.width-default,
+button.slotui-button[width=default],
+button.slotui-button.width-default,
+input[type=button].slotui-button[width=default],
+input[type=button].slotui-button.width-default,
+input[type=submit].slotui-button[width=default],
+input[type=submit].slotui-button.width-default {
+  --preset-width: var(--sld-width-default);
+  width: var(--sld-width-default) !important;
+}
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
+  --preset-tall: var(--sld-tall-small);
+}
+.slotui-button[tall=tiny], .slotui-button.tall-tiny,
+button.slotui-button[tall=tiny],
+button.slotui-button.tall-tiny,
+input[type=button].slotui-button[tall=tiny],
+input[type=button].slotui-button.tall-tiny,
+input[type=submit].slotui-button[tall=tiny],
+input[type=submit].slotui-button.tall-tiny {
+  min-height: var(--sld-tall-tiny) !important;
+}
+.slotui-button[tall=mini], .slotui-button.tall-mini,
+button.slotui-button[tall=mini],
+button.slotui-button.tall-mini,
+input[type=button].slotui-button[tall=mini],
+input[type=button].slotui-button.tall-mini,
+input[type=submit].slotui-button[tall=mini],
+input[type=submit].slotui-button.tall-mini {
+  min-height: var(--sld-tall-mini) !important;
+}
+.slotui-button[tall=small], .slotui-button.tall-small,
+button.slotui-button[tall=small],
+button.slotui-button.tall-small,
+input[type=button].slotui-button[tall=small],
+input[type=button].slotui-button.tall-small,
+input[type=submit].slotui-button[tall=small],
+input[type=submit].slotui-button.tall-small {
+  min-height: var(--sld-tall-small) !important;
+}
+.slotui-button[tall=med], .slotui-button.tall-med,
+button.slotui-button[tall=med],
+button.slotui-button.tall-med,
+input[type=button].slotui-button[tall=med],
+input[type=button].slotui-button.tall-med,
+input[type=submit].slotui-button[tall=med],
+input[type=submit].slotui-button.tall-med {
+  min-height: var(--sld-tall-med) !important;
+}
+.slotui-button[tall=kind], .slotui-button.tall-kind,
+button.slotui-button[tall=kind],
+button.slotui-button.tall-kind,
+input[type=button].slotui-button[tall=kind],
+input[type=button].slotui-button.tall-kind,
+input[type=submit].slotui-button[tall=kind],
+input[type=submit].slotui-button.tall-kind {
+  min-height: var(--sld-tall-kind) !important;
+}
+.slotui-button[tall=auto], .slotui-button.tall-auto,
+button.slotui-button[tall=auto],
+button.slotui-button.tall-auto,
+input[type=button].slotui-button[tall=auto],
+input[type=button].slotui-button.tall-auto,
+input[type=submit].slotui-button[tall=auto],
+input[type=submit].slotui-button.tall-auto {
+  min-height: var(--sld-tall-auto) !important;
+}
+.slotui-button[tall=default], .slotui-button.tall-default,
+button.slotui-button[tall=default],
+button.slotui-button.tall-default,
+input[type=button].slotui-button[tall=default],
+input[type=button].slotui-button.tall-default,
+input[type=submit].slotui-button[tall=default],
+input[type=submit].slotui-button.tall-default {
+  min-height: var(--sld-tall-default) !important;
+}
+.slotui-button[variant*=square],
+button.slotui-button[variant*=square],
+input[type=button].slotui-button[variant*=square],
+input[type=submit].slotui-button[variant*=square] {
+  aspect-ratio: 1/1 !important;
+  height: auto;
+}
+.slotui-button[variant*=rounded],
+button.slotui-button[variant*=rounded],
+input[type=button].slotui-button[variant*=rounded],
+input[type=submit].slotui-button[variant*=rounded] {
+  border-radius: 50%;
+}
+.slotui-button.elevation-0, .slotui-button[elevation-0],
+button.slotui-button.elevation-0,
+button.slotui-button[elevation-0],
+input[type=button].slotui-button.elevation-0,
+input[type=button].slotui-button[elevation-0],
+input[type=submit].slotui-button.elevation-0,
+input[type=submit].slotui-button[elevation-0] {
+  box-shadow: var(--sld-elevation-0);
+}
+.slotui-button.elevation-through, .slotui-button[elevation-through],
+button.slotui-button.elevation-through,
+button.slotui-button[elevation-through],
+input[type=button].slotui-button.elevation-through,
+input[type=button].slotui-button[elevation-through],
+input[type=submit].slotui-button.elevation-through,
+input[type=submit].slotui-button[elevation-through] {
+  box-shadow: var(--sld-elevation-through);
+}
+.slotui-button.elevation-5, .slotui-button[elevation-5],
+button.slotui-button.elevation-5,
+button.slotui-button[elevation-5],
+input[type=button].slotui-button.elevation-5,
+input[type=button].slotui-button[elevation-5],
+input[type=submit].slotui-button.elevation-5,
+input[type=submit].slotui-button[elevation-5] {
+  box-shadow: var(--sld-elevation-5);
+}
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  text-align: var(--sld-button-text-align);
+  font-size: var(--sld-button-font-size);
+  border-radius: var(--sld-button-radius);
+  color: var(--sld-color-foreground);
+  padding: var(--sld-button-padding);
+  position: relative;
+  display: inline-flex;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  cursor: pointer;
+  align-content: center;
+  align-items: center;
+  background: var(--sld-button-background);
+}
+.slotui-button .start,
+button.slotui-button .start,
+input[type=button].slotui-button .start,
+input[type=submit].slotui-button .start {
+  position: relative;
+  top: 0;
+  left: 0;
+  max-height: 100%;
+  align-items: center;
+  align-content: center;
+  padding: 0 0.5rem;
+  display: block;
+}
+.slotui-button .start:empty,
+button.slotui-button .start:empty,
+input[type=button].slotui-button .start:empty,
+input[type=submit].slotui-button .start:empty {
+  display: none;
+}
+.slotui-button .central,
+button.slotui-button .central,
+input[type=button].slotui-button .central,
+input[type=submit].slotui-button .central {
+  --preset-ellipsis-line: 1;
+}
+.slotui-button .central[ellipsis], .slotui-button .central.ellipsis,
+button.slotui-button .central[ellipsis],
+button.slotui-button .central.ellipsis,
+input[type=button].slotui-button .central[ellipsis],
+input[type=button].slotui-button .central.ellipsis,
+input[type=submit].slotui-button .central[ellipsis],
+input[type=submit].slotui-button .central.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.slotui-button .central.ellipsis-line-1,
+button.slotui-button .central.ellipsis-line-1,
+input[type=button].slotui-button .central.ellipsis-line-1,
+input[type=submit].slotui-button .central.ellipsis-line-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  --preset-ellipsis-line: 1;
+}
+.slotui-button .central.ellipsis-line-2,
+button.slotui-button .central.ellipsis-line-2,
+input[type=button].slotui-button .central.ellipsis-line-2,
+input[type=submit].slotui-button .central.ellipsis-line-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  --preset-ellipsis-line: 2;
+}
+.slotui-button .central.ellipsis-line-3,
+button.slotui-button .central.ellipsis-line-3,
+input[type=button].slotui-button .central.ellipsis-line-3,
+input[type=submit].slotui-button .central.ellipsis-line-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  --preset-ellipsis-line: 3;
+}
+.slotui-button .central.ellipsis-line-4,
+button.slotui-button .central.ellipsis-line-4,
+input[type=button].slotui-button .central.ellipsis-line-4,
+input[type=submit].slotui-button .central.ellipsis-line-4 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  --preset-ellipsis-line: 4;
+}
+.slotui-button .central.ellipsis-line-5,
+button.slotui-button .central.ellipsis-line-5,
+input[type=button].slotui-button .central.ellipsis-line-5,
+input[type=submit].slotui-button .central.ellipsis-line-5 {
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  --preset-ellipsis-line: 5;
+}
+.slotui-button .central,
+button.slotui-button .central,
+input[type=button].slotui-button .central,
+input[type=submit].slotui-button .central {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  flex: 1;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  text-align: var(--sld-button-text-align, center);
+  overflow: hidden;
+}
+.slotui-button .central:empty,
+button.slotui-button .central:empty,
+input[type=button].slotui-button .central:empty,
+input[type=submit].slotui-button .central:empty {
+  display: none;
+}
+.slotui-button .end,
+button.slotui-button .end,
+input[type=button].slotui-button .end,
+input[type=submit].slotui-button .end {
+  position: relative;
+  align-items: center;
+  align-content: center;
+  padding: 0 0.5rem;
+  text-align: center;
+  cursor: pointer;
+}
+.slotui-button .end:empty,
+button.slotui-button .end:empty,
+input[type=button].slotui-button .end:empty,
+input[type=submit].slotui-button .end:empty {
+  display: none;
+}
+.slotui-button .end:hover,
+button.slotui-button .end:hover,
+input[type=button].slotui-button .end:hover,
+input[type=submit].slotui-button .end:hover {
+  background-color: var(--sld-button-action-hover-background);
+}
+.slotui-button.loading, .slotui-button[aria-busy=true],
+button.slotui-button.loading,
+button.slotui-button[aria-busy=true],
+input[type=button].slotui-button.loading,
+input[type=button].slotui-button[aria-busy=true],
+input[type=submit].slotui-button.loading,
+input[type=submit].slotui-button[aria-busy=true] {
+  position: relative;
+  color: transparent;
+  pointer-events: none;
+}
+.slotui-button.loading::after, .slotui-button[aria-busy=true]::after,
+button.slotui-button.loading::after,
+button.slotui-button[aria-busy=true]::after,
+input[type=button].slotui-button.loading::after,
+input[type=button].slotui-button[aria-busy=true]::after,
+input[type=submit].slotui-button.loading::after,
+input[type=submit].slotui-button[aria-busy=true]::after {
+  content: " ";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 50%;
+  left: 50%;
+  margin-top: -8px;
+  margin-left: -8px;
+  border: 2px solid var(--sld-color-secondary);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  animation: button-spinner 0.6s linear infinite;
+}
+.slotui-button[disabled], .slotui-button.disabled, .slotui-button[aria-disabled=true],
+button.slotui-button[disabled],
+button.slotui-button.disabled,
+button.slotui-button[aria-disabled=true],
+input[type=button].slotui-button[disabled],
+input[type=button].slotui-button.disabled,
+input[type=button].slotui-button[aria-disabled=true],
+input[type=submit].slotui-button[disabled],
+input[type=submit].slotui-button.disabled,
+input[type=submit].slotui-button[aria-disabled=true] {
+  color: var(--color-gray-800);
+  border-color: var(--color-gray-400);
+  opacity: 0.6;
+  cursor: not-allowed;
+  box-shadow: none;
+  pointer-events: none;
+}
+.slotui-button[aria-pressed=true], .slotui-button.selected,
+button.slotui-button[aria-pressed=true],
+button.slotui-button.selected,
+input[type=button].slotui-button[aria-pressed=true],
+input[type=button].slotui-button.selected,
+input[type=submit].slotui-button[aria-pressed=true],
+input[type=submit].slotui-button.selected {
+  box-shadow: var(--sld-elevation-3);
+  background-color: var(--sld-color-secondary);
+  font-weight: bold;
+}
+.slotui-button .chip,
+button.slotui-button .chip,
+input[type=button].slotui-button .chip,
+input[type=submit].slotui-button .chip {
+  position: absolute;
+  z-index: 2;
+  height: 3px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 50%;
+  background-color: var(--css-button-chip-color, var(--sld-color-primary));
+  border-radius: var(--sld-radius-large);
+  bottom: 2px;
+}
+.slotui-button .loadingButtonZone,
+button.slotui-button .loadingButtonZone,
+input[type=button].slotui-button .loadingButtonZone,
+input[type=submit].slotui-button .loadingButtonZone {
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 100%;
+  overflow: hidden;
+  align-content: center;
+  justify-content: space-around;
+}
+.slotui-button[variant*=bordered], .slotui-button[bordered=true], .slotui-button.bordered,
+button.slotui-button[variant*=bordered],
+button.slotui-button[bordered=true],
+button.slotui-button.bordered,
+input[type=button].slotui-button[variant*=bordered],
+input[type=button].slotui-button[bordered=true],
+input[type=button].slotui-button.bordered,
+input[type=submit].slotui-button[variant*=bordered],
+input[type=submit].slotui-button[bordered=true],
+input[type=submit].slotui-button.bordered {
+  color: var(--sld-color-foreground);
+  border: var(--sld-button-border-width) solid var(--sld-button-border-color);
+  box-shadow: var(--sld-elevation-1);
+  background-color: var(--sld-button-background);
+}
+.slotui-button[variant*=bordered]:hover, .slotui-button[bordered=true]:hover, .slotui-button.bordered:hover,
+button.slotui-button[variant*=bordered]:hover,
+button.slotui-button[bordered=true]:hover,
+button.slotui-button.bordered:hover,
+input[type=button].slotui-button[variant*=bordered]:hover,
+input[type=button].slotui-button[bordered=true]:hover,
+input[type=button].slotui-button.bordered:hover,
+input[type=submit].slotui-button[variant*=bordered]:hover,
+input[type=submit].slotui-button[bordered=true]:hover,
+input[type=submit].slotui-button.bordered:hover {
+  border-color: var(--sld-color-primary);
+  box-shadow: var(--sld-button-hover-shadow);
+}
+.slotui-button[variant*=bordered]:focus, .slotui-button[variant*=bordered]:active, .slotui-button[bordered=true]:focus, .slotui-button[bordered=true]:active, .slotui-button.bordered:focus, .slotui-button.bordered:active,
+button.slotui-button[variant*=bordered]:focus,
+button.slotui-button[variant*=bordered]:active,
+button.slotui-button[bordered=true]:focus,
+button.slotui-button[bordered=true]:active,
+button.slotui-button.bordered:focus,
+button.slotui-button.bordered:active,
+input[type=button].slotui-button[variant*=bordered]:focus,
+input[type=button].slotui-button[variant*=bordered]:active,
+input[type=button].slotui-button[bordered=true]:focus,
+input[type=button].slotui-button[bordered=true]:active,
+input[type=button].slotui-button.bordered:focus,
+input[type=button].slotui-button.bordered:active,
+input[type=submit].slotui-button[variant*=bordered]:focus,
+input[type=submit].slotui-button[variant*=bordered]:active,
+input[type=submit].slotui-button[bordered=true]:focus,
+input[type=submit].slotui-button[bordered=true]:active,
+input[type=submit].slotui-button.bordered:focus,
+input[type=submit].slotui-button.bordered:active {
+  border-color: var(--sld-button-active-border-color);
+  box-shadow: var(--sld-button-active-shadow);
+}
+.slotui-button[variant*=contained], .slotui-button[contained=true], .slotui-button.contained,
+button.slotui-button[variant*=contained],
+button.slotui-button[contained=true],
+button.slotui-button.contained,
+input[type=button].slotui-button[variant*=contained],
+input[type=button].slotui-button[contained=true],
+input[type=button].slotui-button.contained,
+input[type=submit].slotui-button[variant*=contained],
+input[type=submit].slotui-button[contained=true],
+input[type=submit].slotui-button.contained {
+  border: var(--sld-button-border-width) solid var(--sld-button-border-color);
+  color: var(--sld-color-on-primary);
+  background-color: var(--sld-button-contained-background);
+  background-clip: padding-box;
+  box-shadow: var(--sld-elevation-1);
+}
+.slotui-button[variant*=contained]:hover, .slotui-button[contained=true]:hover, .slotui-button.contained:hover,
+button.slotui-button[variant*=contained]:hover,
+button.slotui-button[contained=true]:hover,
+button.slotui-button.contained:hover,
+input[type=button].slotui-button[variant*=contained]:hover,
+input[type=button].slotui-button[contained=true]:hover,
+input[type=button].slotui-button.contained:hover,
+input[type=submit].slotui-button[variant*=contained]:hover,
+input[type=submit].slotui-button[contained=true]:hover,
+input[type=submit].slotui-button.contained:hover {
+  background-color: var(--sld-color-secondary);
+  color: var(--sld-color-on-secondary);
+}
+.slotui-button[variant*=contained]:focus, .slotui-button[variant*=contained]:active, .slotui-button[contained=true]:focus, .slotui-button[contained=true]:active, .slotui-button.contained:focus, .slotui-button.contained:active,
+button.slotui-button[variant*=contained]:focus,
+button.slotui-button[variant*=contained]:active,
+button.slotui-button[contained=true]:focus,
+button.slotui-button[contained=true]:active,
+button.slotui-button.contained:focus,
+button.slotui-button.contained:active,
+input[type=button].slotui-button[variant*=contained]:focus,
+input[type=button].slotui-button[variant*=contained]:active,
+input[type=button].slotui-button[contained=true]:focus,
+input[type=button].slotui-button[contained=true]:active,
+input[type=button].slotui-button.contained:focus,
+input[type=button].slotui-button.contained:active,
+input[type=submit].slotui-button[variant*=contained]:focus,
+input[type=submit].slotui-button[variant*=contained]:active,
+input[type=submit].slotui-button[contained=true]:focus,
+input[type=submit].slotui-button[contained=true]:active,
+input[type=submit].slotui-button.contained:focus,
+input[type=submit].slotui-button.contained:active {
+  background-color: var(--sld-color-tertiary);
+  color: var(--sld-color-on-tertiary);
+  box-shadow: var(--sld-button-active-shadow);
+}
+.slotui-button[variant*=link], .slotui-button.link, .slotui-button[role=link],
+button.slotui-button[variant*=link],
+button.slotui-button.link,
+button.slotui-button[role=link],
+input[type=button].slotui-button[variant*=link],
+input[type=button].slotui-button.link,
+input[type=button].slotui-button[role=link],
+input[type=submit].slotui-button[variant*=link],
+input[type=submit].slotui-button.link,
+input[type=submit].slotui-button[role=link] {
+  color: var(--sld-color-primary);
+  text-decoration: underline;
+  text-underline-offset: 0.35rem;
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+}
+.slotui-button[variant*=link]:hover, .slotui-button.link:hover, .slotui-button[role=link]:hover,
+button.slotui-button[variant*=link]:hover,
+button.slotui-button.link:hover,
+button.slotui-button[role=link]:hover,
+input[type=button].slotui-button[variant*=link]:hover,
+input[type=button].slotui-button.link:hover,
+input[type=button].slotui-button[role=link]:hover,
+input[type=submit].slotui-button[variant*=link]:hover,
+input[type=submit].slotui-button.link:hover,
+input[type=submit].slotui-button[role=link]:hover {
+  text-decoration: underline;
+}
+.slotui-button[variant*=link]:focus, .slotui-button[variant*=link]:active, .slotui-button.link:focus, .slotui-button.link:active, .slotui-button[role=link]:focus, .slotui-button[role=link]:active,
+button.slotui-button[variant*=link]:focus,
+button.slotui-button[variant*=link]:active,
+button.slotui-button.link:focus,
+button.slotui-button.link:active,
+button.slotui-button[role=link]:focus,
+button.slotui-button[role=link]:active,
+input[type=button].slotui-button[variant*=link]:focus,
+input[type=button].slotui-button[variant*=link]:active,
+input[type=button].slotui-button.link:focus,
+input[type=button].slotui-button.link:active,
+input[type=button].slotui-button[role=link]:focus,
+input[type=button].slotui-button[role=link]:active,
+input[type=submit].slotui-button[variant*=link]:focus,
+input[type=submit].slotui-button[variant*=link]:active,
+input[type=submit].slotui-button.link:focus,
+input[type=submit].slotui-button.link:active,
+input[type=submit].slotui-button[role=link]:focus,
+input[type=submit].slotui-button[role=link]:active {
+  text-decoration: underline;
+  outline: none;
+  box-shadow: none;
+}
+.slotui-button[variant*=naked]:hover, .slotui-button[naked=true]:hover, .slotui-button.naked:hover,
+button.slotui-button[variant*=naked]:hover,
+button.slotui-button[naked=true]:hover,
+button.slotui-button.naked:hover,
+input[type=button].slotui-button[variant*=naked]:hover,
+input[type=button].slotui-button[naked=true]:hover,
+input[type=button].slotui-button.naked:hover,
+input[type=submit].slotui-button[variant*=naked]:hover,
+input[type=submit].slotui-button[naked=true]:hover,
+input[type=submit].slotui-button.naked:hover {
+  border-color: var(--sld-hover-border-color);
+  background-color: var(--sld-background-disabled);
+}
+.slotui-button[variant*=naked], .slotui-button[naked=true], .slotui-button.naked,
+button.slotui-button[variant*=naked],
+button.slotui-button[naked=true],
+button.slotui-button.naked,
+input[type=button].slotui-button[variant*=naked],
+input[type=button].slotui-button[naked=true],
+input[type=button].slotui-button.naked,
+input[type=submit].slotui-button[variant*=naked],
+input[type=submit].slotui-button[naked=true],
+input[type=submit].slotui-button.naked {
+  color: inherit;
+  background-color: transparent;
+  border: 0px solid transparent;
+  cursor: pointer;
+}
+.slotui-button[variant*=naked]:hover, .slotui-button[naked=true]:hover, .slotui-button.naked:hover,
+button.slotui-button[variant*=naked]:hover,
+button.slotui-button[naked=true]:hover,
+button.slotui-button.naked:hover,
+input[type=button].slotui-button[variant*=naked]:hover,
+input[type=button].slotui-button[naked=true]:hover,
+input[type=button].slotui-button.naked:hover,
+input[type=submit].slotui-button[variant*=naked]:hover,
+input[type=submit].slotui-button[naked=true]:hover,
+input[type=submit].slotui-button.naked:hover {
+  background-color: var(--sld-button-hover-background);
+}
+.slotui-button[variant*=naked]:active, .slotui-button[variant*=naked]:focus, .slotui-button[naked=true]:active, .slotui-button[naked=true]:focus, .slotui-button.naked:active, .slotui-button.naked:focus,
+button.slotui-button[variant*=naked]:active,
+button.slotui-button[variant*=naked]:focus,
+button.slotui-button[naked=true]:active,
+button.slotui-button[naked=true]:focus,
+button.slotui-button.naked:active,
+button.slotui-button.naked:focus,
+input[type=button].slotui-button[variant*=naked]:active,
+input[type=button].slotui-button[variant*=naked]:focus,
+input[type=button].slotui-button[naked=true]:active,
+input[type=button].slotui-button[naked=true]:focus,
+input[type=button].slotui-button.naked:active,
+input[type=button].slotui-button.naked:focus,
+input[type=submit].slotui-button[variant*=naked]:active,
+input[type=submit].slotui-button[variant*=naked]:focus,
+input[type=submit].slotui-button[naked=true]:active,
+input[type=submit].slotui-button[naked=true]:focus,
+input[type=submit].slotui-button.naked:active,
+input[type=submit].slotui-button.naked:focus {
+  background-color: transparent;
+  border: 0.5px solid transparent;
+  color: inherit;
+}
+.slotui-button[variant*=flat], .slotui-button[flat=true], .slotui-button.flat,
+button.slotui-button[variant*=flat],
+button.slotui-button[flat=true],
+button.slotui-button.flat,
+input[type=button].slotui-button[variant*=flat],
+input[type=button].slotui-button[flat=true],
+input[type=button].slotui-button.flat,
+input[type=submit].slotui-button[variant*=flat],
+input[type=submit].slotui-button[flat=true],
+input[type=submit].slotui-button.flat {
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  cursor: pointer;
+}
+.slotui-button[variant*=flat]:hover, .slotui-button[flat=true]:hover, .slotui-button.flat:hover,
+button.slotui-button[variant*=flat]:hover,
+button.slotui-button[flat=true]:hover,
+button.slotui-button.flat:hover,
+input[type=button].slotui-button[variant*=flat]:hover,
+input[type=button].slotui-button[flat=true]:hover,
+input[type=button].slotui-button.flat:hover,
+input[type=submit].slotui-button[variant*=flat]:hover,
+input[type=submit].slotui-button[flat=true]:hover,
+input[type=submit].slotui-button.flat:hover {
+  background-color: var(--sld-button-hover-background);
+}
+.slotui-button[variant*=flat]:active, .slotui-button[variant*=flat]:focus, .slotui-button[flat=true]:active, .slotui-button[flat=true]:focus, .slotui-button.flat:active, .slotui-button.flat:focus,
+button.slotui-button[variant*=flat]:active,
+button.slotui-button[variant*=flat]:focus,
+button.slotui-button[flat=true]:active,
+button.slotui-button[flat=true]:focus,
+button.slotui-button.flat:active,
+button.slotui-button.flat:focus,
+input[type=button].slotui-button[variant*=flat]:active,
+input[type=button].slotui-button[variant*=flat]:focus,
+input[type=button].slotui-button[flat=true]:active,
+input[type=button].slotui-button[flat=true]:focus,
+input[type=button].slotui-button.flat:active,
+input[type=button].slotui-button.flat:focus,
+input[type=submit].slotui-button[variant*=flat]:active,
+input[type=submit].slotui-button[variant*=flat]:focus,
+input[type=submit].slotui-button[flat=true]:active,
+input[type=submit].slotui-button[flat=true]:focus,
+input[type=submit].slotui-button.flat:active,
+input[type=submit].slotui-button.flat:focus {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+}
+
+@keyframes button-spinner {
+  to {
+    transform: rotate(360deg);
+  }
 }