npm - @evance/evance-ui - Versions diffs - 1.0.3 → 1.0.4 - Mend

@evance/evance-ui 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1170) hide show

package/dist/esm/style.css CHANGED Viewed

@@ -12,9 +12,6 @@
 .ev-label {
   display: block;
 }
-.ev-label.is-clickable {
-  cursor: pointer;
-}
 .ev-label--title {
   font-weight: var(--font-weight-semibold);
@@ -166,6 +163,24 @@
   user-select: none;
 }
+.ev-checkbox.is-indeterminate .ev-checkbox--outer-box {
+  border-color: var(--color-primary);
+}
+.ev-checkbox.is-indeterminate .ev-checkbox--outer-box:after {
+  content: "";
+  position: absolute;
+  height: 2px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
+  background: var(--color-primary);
+  transition: background 0.25s ease-in-out;
+}
+.ev-checkbox.is-indeterminate.is-error .ev-checkbox--outer-box:after {
+  background: var(--input-border-color-error);
+}
 /** Error modifier */
 .ev-checkbox.is-error .ev-checkbox--outer-box {
   border-color: var(--input-border-color-error);
@@ -250,13 +265,6 @@ hr.ev-divider.is-vertical, .ev-divider.is-vertical .ev-divider--line {
   height: auto;
 }
-/**
-    ## Clickable
- */
-.ev-icon.is-clickable {
-  cursor: pointer;
-}
 /**
     ## Sizes
  */
@@ -366,7 +374,6 @@ hr.ev-divider.is-vertical, .ev-divider.is-vertical .ev-divider--line {
 .ev-button {
   --current-size: var(--input-height-medium);
   align-items: center;
-  border: 1px solid transparent;
   border-radius: var(--input-radius);
   display: inline-flex;
   font-size: var(--text-size-medium);
@@ -377,7 +384,7 @@ hr.ev-divider.is-vertical, .ev-divider.is-vertical .ev-divider--line {
   padding-inline: calc((var(--current-size) - var(--icon-size-medium)) / 2);
   position: relative;
   text-decoration: none !important;
-  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
+  transition: background 0.15s ease-in-out, color 0.15s ease-in-out, border 0.15s ease-in-out;
   user-select: none;
 }
 .ev-button:focus-visible {
@@ -442,252 +449,251 @@ hr.ev-divider.is-vertical, .ev-divider.is-vertical .ev-divider--line {
     - subtle
  */
 .ev-button {
-  color: currentColor;
+  background: var(--button-appearance-background);
+  border: var(--button-appearance-border);
+  color: var(--button-appearance-color, currentColor);
   /* Inverse */
   /** Link Variant */
 }
 .ev-button {
-  border: 1px solid transparent;
-}
-.ev-button.is-clickable {
-  cursor: pointer;
+  --button-appearance-border: 1px solid transparent;
 }
 .ev-button.is-appearance-default {
-  background: var(--background-neutral);
+  --button-appearance-background: var(--background-neutral);
 }
 .ev-button.is-appearance-default.is-clickable:hover {
-  background-color: var(--background-neutral-hovered);
+  --button-appearance-background: var(--background-neutral-hovered);
 }
 .ev-button.is-appearance-default.is-clickable:active {
-  background-color: var(--background-neutral-pressed);
+  --button-appearance-background: var(--background-neutral-pressed);
 }
 .ev-button.is-appearance-default.is-variant-bold {
-  background-color: var(--background-neutral-bold);
-  color: var(--text-inverse);
+  --button-appearance-background: var(--background-neutral-bold);
+  --button-appearnce-color: var(--text-inverse);
 }
 .ev-button.is-appearance-default.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-neutral-bold-hovered);
+  --button-appearance-background: var(--background-neutral-bold-hovered);
 }
 .ev-button.is-appearance-default.is-variant-bold.is-clickable:active {
-  background-color: var(--background-neutral-bold-pressed);
+  --button-appearance-background: var(--background-neutral-bold-pressed);
 }
 .ev-button.is-appearance-default.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-neutral-bold);
+  --button-appearance-background: transparent;
+  --button-appearance-border: 1px solid var(--background-neutral-bold);
 }
 .ev-button.is-appearance-default.is-variant-outlined.is-active {
-  background-color: var(--background-neutral);
+  --button-appearance-background: var(--background-neutral);
 }
 .ev-button.is-appearance-default.is-variant-subtle {
-  background-color: var(--background-neutral-subtle);
+  --button-appearance-background: var(--background-neutral-subtle);
 }
 .ev-button.is-appearance-default.is-variant-subtle.is-clickable:hover {
-  background-color: var(--background-neutral-subtle-hovered);
+  --button-appearance-background: var(--background-neutral-subtle-hovered);
 }
 .ev-button.is-appearance-default.is-variant-subtle.is-clickable:active {
-  background-color: var(--background-neutral-subtle-pressed);
+  --button-appearance-background: var(--background-neutral-subtle-pressed);
 }
 .ev-button.is-appearance-danger {
-  background-color: var(--background-danger);
-  color: var(--text-danger);
+  --button-appearance-background: var(--background-danger);
+  --button-appearance-color: var(--text-danger);
 }
 .ev-button.is-appearance-danger.is-clickable:hover {
-  background-color: var(--background-danger-hovered);
+  --button-appearance-background: var(--background-danger-hovered);
 }
 .ev-button.is-appearance-danger.is-clickable:active {
-  background-color: var(--background-danger-pressed);
+  --button-appearance-background: var(--background-danger-pressed);
 }
 .ev-button.is-appearance-danger.is-variant-bold {
-  background-color: var(--background-danger-bold);
-  color: var(--text-inverse);
+  --button-appearance-background: var(--background-danger-bold);
+  --button-appearance-color: var(--text-inverse);
 }
 .ev-button.is-appearance-danger.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-danger-bold-hovered);
+  --button-appearance-background: var(--background-danger-bold-hovered);
 }
 .ev-button.is-appearance-danger.is-variant-bold.is-clickable:active {
-  background-color: var(--background-danger-bold-pressed);
+  --button-appearance-background: var(--background-danger-bold-pressed);
 }
 .ev-button.is-appearance-danger.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-danger-bold);
+  --button-appearance-background: transparent;
+  --button-appearance-border: 1px solid var(--background-danger-bold);
 }
 .ev-button.is-appearance-danger.is-variant-outlined.is-active {
-  background-color: var(--background-danger);
+  --button-appearance-background: var(--background-danger);
 }
 .ev-button.is-appearance-danger.is-variant-subtle {
-  background-color: transparent;
+  --button-appearance-background: transparent;
 }
 .ev-button.is-appearance-information {
-  background-color: var(--background-information);
-  color: var(--text-information);
+  --button-appearance-background: var(--background-information);
+  --button-appearance-color: var(--text-information);
 }
 .ev-button.is-appearance-information.is-clickable:hover {
-  background-color: var(--background-information-hovered);
+  --button-appearance-background: var(--background-information-hovered);
 }
 .ev-button.is-appearance-information.is-clickable:active {
-  background-color: var(--background-information-pressed);
+  --button-appearance-background: var(--background-information-pressed);
 }
 .ev-button.is-appearance-information.is-variant-bold {
-  background-color: var(--background-information-bold);
-  color: var(--text-inverse);
+  --button-appearance-background: var(--background-information-bold);
+  --button-appearance-color: var(--text-inverse);
 }
 .ev-button.is-appearance-information.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-information-bold-hovered);
+  --button-appearance-background: var(--background-information-bold-hovered);
 }
 .ev-button.is-appearance-information.is-variant-bold.is-clickable:active {
-  background-color: var(--background-information-bold-pressed);
+  --button-appearance-background: var(--background-information-bold-pressed);
 }
 .ev-button.is-appearance-information.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-information-bold);
+  --button-appearance-background: transparent;
+  --button-appearance-border: 1px solid var(--background-information-bold);
 }
 .ev-button.is-appearance-information.is-variant-outlined.is-active {
-  background-color: var(--background-information);
+  --button-appearance-background: var(--background-information);
 }
 .ev-button.is-appearance-information.is-variant-subtle {
-  background-color: transparent;
+  --button-appearance-background: transparent;
 }
 .ev-button.is-appearance-notice {
-  background-color: var(--background-notice);
-  color: var(--text-notice);
+  --button-appearance-background: var(--background-notice);
+  --button-appearance-color: var(--text-notice);
 }
 .ev-button.is-appearance-notice.is-clickable:hover {
-  background-color: var(--background-notice-hovered);
+  --button-appearance-background: var(--background-notice-hovered);
 }
 .ev-button.is-appearance-notice.is-clickable:active {
-  background-color: var(--background-notice-pressed);
+  --button-appearance-background: var(--background-notice-pressed);
 }
 .ev-button.is-appearance-notice.is-variant-bold {
-  background-color: var(--background-notice-bold);
-  color: var(--text-inverse);
+  --button-appearance-background: var(--background-notice-bold);
+  --button-appearance-color: var(--text-inverse);
 }
 .ev-button.is-appearance-notice.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-notice-bold-hovered);
+  --button-appearance-background: var(--background-notice-bold-hovered);
 }
 .ev-button.is-appearance-notice.is-variant-bold.is-clickable:active {
-  background-color: var(--background-notice-bold-pressed);
+  --button-appearance-background: var(--background-notice-bold-pressed);
 }
 .ev-button.is-appearance-notice.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-notice-bold);
+  --button-appearance-background: transparent;
+  --button-appearance-border: 1px solid var(--background-notice-bold);
 }
 .ev-button.is-appearance-notice.is-variant-outlined.is-active {
-  background-color: var(--background-notice);
+  --button-appearance-background: var(--background-notice);
 }
 .ev-button.is-appearance-notice.is-variant-subtle {
-  background-color: transparent;
+  --button-appearance-background: transparent;
 }
 .ev-button.is-appearance-primary {
-  background-color: var(--background-brand);
-  color: var(--text-brand);
+  --button-appearance-background: var(--background-brand);
+  --button-appearance-color: var(--text-brand);
 }
 .ev-button.is-appearance-primary.is-clickable:hover {
-  background-color: var(--background-brand-hovered);
+  --button-appearance-background: var(--background-brand-hovered);
 }
 .ev-button.is-appearance-primary.is-clickable:active {
-  background-color: var(--background-brand-pressed);
+  --button-appearance-background: var(--background-brand-pressed);
 }
 .ev-button.is-appearance-primary.is-variant-bold {
-  background-color: var(--background-brand-bold);
-  color: var(--text-inverse);
+  --button-appearance-background: var(--background-brand-bold);
+  --button-appearance-color: var(--text-inverse);
 }
 .ev-button.is-appearance-primary.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-brand-bold-hovered);
+  --button-appearance-background: var(--background-brand-bold-hovered);
 }
 .ev-button.is-appearance-primary.is-variant-bold.is-clickable:active {
-  background-color: var(--background-brand-bold-pressed);
+  --button-appearance-background: var(--background-brand-bold-pressed);
 }
 .ev-button.is-appearance-primary.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-brand-bold);
+  --button-appearance-background: transparent;
+  --button-appearance-border: 1px solid var(--background-brand-bold);
 }
 .ev-button.is-appearance-primary.is-variant-outlined.is-active {
-  background-color: var(--background-brand);
+  --button-appearance-background: var(--background-brand);
 }
 .ev-button.is-appearance-primary.is-variant-subtle {
-  background-color: transparent;
+  --button-appearance-background: transparent;
 }
 .ev-button.is-appearance-success {
-  background-color: var(--background-success);
-  color: var(--text-success);
+  --button-appearance-background: var(--background-success);
+  --button-appearance-color: var(--text-success);
 }
 .ev-button.is-appearance-success.is-clickable:hover {
-  background-color: var(--background-success-hovered);
+  --button-appearance-background: var(--background-success-hovered);
 }
 .ev-button.is-appearance-success.is-clickable:active {
-  background-color: var(--background-success-pressed);
+  --button-appearance-background: var(--background-success-pressed);
 }
 .ev-button.is-appearance-success.is-variant-bold {
-  background-color: var(--background-success-bold);
-  color: var(--text-inverse);
+  --button-appearance-background: var(--background-success-bold);
+  --button-appearance-color: var(--text-inverse);
 }
 .ev-button.is-appearance-success.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-success-bold-hovered);
+  --button-appearance-background: var(--background-success-bold-hovered);
 }
 .ev-button.is-appearance-success.is-variant-bold.is-clickable:active {
-  background-color: var(--background-success-bold-pressed);
+  --button-appearance-background: var(--background-success-bold-pressed);
 }
 .ev-button.is-appearance-success.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-success-bold);
+  --button-appearance-background: transparent;
+  --button-appearance-border: 1px solid var(--background-success-bold);
 }
 .ev-button.is-appearance-success.is-variant-outlined.is-active {
-  background-color: var(--background-success);
+  --button-appearance-background: var(--background-success);
 }
 .ev-button.is-appearance-success.is-variant-subtle {
-  background-color: transparent;
+  --button-appearance-background: transparent;
 }
 .ev-button.is-appearance-warning {
-  background-color: var(--background-warning);
-  color: var(--text-warning);
+  --button-appearance-background: var(--background-warning);
+  --button-appearance-color: var(--text-warning);
 }
 .ev-button.is-appearance-warning.is-clickable:hover {
-  background-color: var(--background-warning-hovered);
+  --button-appearance-background: var(--background-warning-hovered);
 }
 .ev-button.is-appearance-warning.is-clickable:active {
-  background-color: var(--background-warning-pressed);
+  --button-appearance-background: var(--background-warning-pressed);
 }
 .ev-button.is-appearance-warning.is-variant-bold {
-  background-color: var(--background-warning-bold);
-  color: var(--text-inverse);
+  --button-appearance-background: var(--background-warning-bold);
+  --button-appearance-color: var(--text-inverse);
 }
 .ev-button.is-appearance-warning.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-warning-bold-hovered);
+  --button-appearance-background: var(--background-warning-bold-hovered);
 }
 .ev-button.is-appearance-warning.is-variant-bold.is-clickable:active {
-  background-color: var(--background-warning-bold-pressed);
+  --button-appearance-background: var(--background-warning-bold-pressed);
 }
 .ev-button.is-appearance-warning.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-warning-bold);
+  --button-appearance-background: transparent;
+  --button-appearance-border: 1px solid var(--background-warning-bold);
 }
 .ev-button.is-appearance-warning.is-variant-outlined.is-active {
-  background-color: var(--background-warning);
+  --button-appearance-background: var(--background-warning);
 }
 .ev-button.is-appearance-warning.is-variant-subtle {
-  background-color: transparent;
+  --button-appearance-background: transparent;
 }
 .ev-button.is-appearance-inverse {
-  background: var(--background-inverse);
+  --button-appearance-background: var(--background-inverse);
 }
 .ev-button.is-appearance-inverse:hover {
-  background: var(--background-inverse-hovered);
+  --button-appearance-background: var(--background-inverse-hovered);
 }
 .ev-button.is-appearance-inverse:active {
-  background: var(--background-inverse-pressed);
+  --button-appearance-background: var(--background-inverse-pressed);
 }
 .ev-button.is-appearance-inverse.is-variant-bold {
   color: var(--text-on-inverse);
-  background: var(--background-inverse-bold);
+  --button-appearance-background: var(--background-inverse-bold);
 }
 .ev-button.is-appearance-inverse.is-variant-bold:hover {
-  background: var(--background-inverse-bold-hovered);
+  --button-appearance-background: var(--background-inverse-bold-hovered);
 }
 .ev-button.is-appearance-inverse.is-variant-bold:active {
-  background: var(--background-inverse-bold-pressed);
+  --button-appearance-background: var(--background-inverse-bold-pressed);
 }
 .ev-button.is-variant-link {
-  background: transparent !important;
+  --button-appearance-background: transparent !important;
 }
 .ev-button.is-variant-link:hover .ev-button--text, .ev-button.is-variant-link:active .ev-button--text {
   text-decoration: underline;
@@ -744,12 +750,15 @@ hr.ev-divider.is-vertical, .ev-divider.is-vertical .ev-divider--line {
   vertical-align: middle;
   border-radius: var(--input-radius);
   --gap: var(--spacer-0, 0);
+  justify-content: flex-start;
 }
 .ev-button-group--container {
   border-radius: inherit;
-  display: inline-flex;
+  display: inherit;
+  justify-content: inherit;
   gap: var(--gap);
+  flex: 1;
 }
 /**
@@ -1096,100 +1105,590 @@ hr.ev-divider.is-vertical, .ev-divider.is-vertical .ev-divider--line {
 .ev-swatch--sample {
   /* background: rgba(240, 65, 65, 0.73); */
-}.ev-date-picker-month--days {
-  display: grid;
-  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
-  flex: 1 1;
-  justify-content: space-around;
+}.ev-heading.is-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ev-heading.is-truncate-lines {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--max-lines, 2);
+  line-clamp: var(--max-lines, 2);
+  -webkit-box-orient: vertical;
+}.ev-text.is-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
+.ev-text.is-truncate-lines {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--max-lines, 2);
+  line-clamp: var(--max-lines, 2);
+  -webkit-box-orient: vertical;
+}/**
+    # Breakpoint Min
+ */
+/*
+    # Breakpoint Infix
+ */
+/**
+    # Map Deep Get
+ */
+/**
+    # Map Deep Merge
-.ev-date-picker-month--day,
-.ev-date-picker-month--weekday {
-  align-items: center;
+    Adapted from https://gist.github.com/pentzzsolt/4949bbd7691d43d00616dc4f1451cae9#file-non-destructive-map-merge-4-scss
+ */
+/**
+    # Map Deep Set
+ */
+/**
+    # Round Even
+ */
+/**
+    # Scalable
+    Calculate a clamp() function to offer scaling between
+    the smallest size ($min) from the smallest screen size ($minAt)
+    and the largest size ($max) at the largest screen size ($maxAt).
+    The calculation should look like this:
+    clamp(min, calc(min + (max - min) * ((100vw - minAt) / divider)), max);
+ */
+/*
+    # Strip Unit
+    Remove units from a string like '10px', converting to a number (10).
+ */
+/**
+    # Colors
+    Note, HEXA values are quoted to prevent SASS outputting values as RGBA.
+ */
+/**
+    # token
+ */
+/*
+  # Variables
+  Includes the following sections:
+  - Breakpoints
+  - Spacers
+  - Text
+ */
+/*
+    ## Breakpoints
+    Breakpoints should always be defined in `px` units.
+    By default we have five breakpoints for:
+    - `xs` - Extra Small: phones in portrait
+    - `sm` - Small: Phones in landscape
+    - `md` - Medium: Tablets in portrait or small notebooks
+    - `lg` - Large: Desktops & tablets in landscape. More than accommodates scroll bars.
+    - `xl` - Extra Large - Large Desktops, including 1080p
+    - `xxl` - Extra Large - 4k and ultra-wide screens
+    Scaling, such as font-size scaling, is done between `sm-min` and `xl-min`.
+ */
+/**
+    ## Display Breakpoints
+    Avoid using '*-and-down' where possible
+ */
+/*
+    ## Spacers
+    Spacers in Evance are based on a percentage of `1rem` (based on `16px`).
+ */
+/**
+    ## Text
+ */
+.ev-card-content {
   display: flex;
-  justify-content: center;
-  position: relative;
-  width: 48px;
-  height: 48px;
+  flex-wrap: nowrap;
+  gap: var(--spacer-150);
 }
-.ev-date-picker-month--day.is-adjacent {
-  opacity: 0.5;
+.ev-card-content--icon {
+  flex: 0;
 }
-.ev-date-picker-month--day.is-adjacent-hidden {
-  opacity: 0;
+.ev-card-content--detail {
+  flex: 1;
+  min-width: 0;
 }
-.ev-date-picker-month--day.is-range-start .ev-button, .ev-date-picker-month--day.is-range-within .ev-button, .ev-date-picker-month--day.is-range-end .ev-button {
-  width: calc(100% + 4px);
+.ev-card-content.is-size-small {
+  padding: var(--padding-small);
 }
-.ev-date-picker-month--day.is-range-start .ev-button {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+.ev-card-content.is-size-medium {
+  padding: var(--padding-medium);
 }
-.ev-date-picker-month--day.is-range-within .ev-button {
-  border-radius: 0;
+.ev-card-content.is-size-medium .ev-card-content--icon {
+  padding-top: clamp(0rem, calc(0rem + 0.125 * ((100vw - 600px) / 62.5)), 0.125rem);
 }
-.ev-date-picker-month--day.is-range-end .ev-button {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}/* Default */
-.ev-list-item {
-  align-items: center;
-  border-radius: var(--input-radius);
-  display: flex;
-  gap: 4px;
-  min-height: var(--input-height-medium);
-  outline: 0;
-  padding: 8px 12px;
-  position: relative;
-  margin: 2px;
-  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
+.ev-card-content.is-size-large {
+  padding: var(--padding-large);
 }
-a.ev-list-item {
-  color: inherit;
-  font-weight: var(--text-weight);
-  text-decoration: none;
+.ev-card-content.is-size-large .ev-card-content--icon {
+  padding-top: clamp(0rem, calc(0rem + 0.25 * ((100vw - 600px) / 62.5)), 0.25rem);
 }
-.ev-list-item > * {
+.ev-card-content.is-size-x-large {
+  padding: var(--padding-x-large);
+}
+.ev-card-content.is-size-x-large .ev-card-content--icon {
+  padding-top: clamp(0.125rem, calc(0.125rem + 0.375 * ((100vw - 600px) / 62.5)), 0.5rem);
+}
+.ev-text {
+    --max-lines: var(--1306c720);
+}
+.ev-card-actions {
   display: flex;
-  flex: 0 0 auto;
-  width: min-content;
 }
-.ev-list-item--content {
-  flex: 1 0 auto;
-  padding-inline: 4px;
-  width: max-content;
+.ev-card-actions .ev-button-group {
+  display: inherit;
+  flex: 1;
+  justify-content: inherit;
 }
-.ev-list-item.is-clickable {
-  cursor: pointer;
+.ev-card-actions.is-size-small {
+  padding: var(--padding-small);
 }
-.ev-list-item.is-clickable:focus-visible, .ev-list-item.is-clickable:hover {
-  color: inherit;
-  background: var(--background-neutral);
+.ev-card-actions.is-size-medium {
+  padding: var(--padding-medium);
 }
-.ev-list-item.is-clickable:focus-visible {
-  outline: 2px solid var(--border-focused);
-  outline-offset: 2px;
+.ev-card-actions.is-size-large {
+  padding: var(--padding-large);
 }
-.ev-list-item--indicator {
-  position: absolute;
-  width: 3px;
-  height: 100%;
-  border-top-left-radius: var(--input-radius);
-  border-bottom-left-radius: var(--input-radius);
-  left: 0;
-  opacity: 0;
-  overflow: hidden;
-  top: 0;
-  transition: opacity 0.25s ease-in-out;
-  will-change: opacity;
+.ev-card-actions.is-size-x-large {
+  padding: var(--padding-x-large);
+}.ev-surface {
+  box-shadow: none;
+  margin: 0 auto;
+  transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+  will-change: background-color, box-shadow;
 }
-.ev-list-item--indicator:before {
+.ev-surface.elevation-default {
+  background-color: var(--surface-default);
+}
+.ev-surface.elevation-overlay {
+  background-color: var(--surface-overlay);
+  box-shadow: var(--surface-overlay-shadow);
+}
+.ev-surface.elevation-panel {
+  background-color: var(--surface-panel);
+}
+.ev-surface.elevation-sunken {
+  background-color: var(--surface-sunken);
+}
+.is-rounded,
+.is-rounded-small {
+  border-radius: var(--rounded-small);
+}
+.is-rounded-medium {
+  border-radius: var(--rounded-medium);
+}
+.is-rounded-large {
+  border-radius: var(--rounded-large);
+}/* Default */
+.ev-card {
+  display: block;
+  font-weight: inherit;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+  color: inherit !important;
+  text-decoration: none !important;
+}
+.ev-card.is-clickable:focus-visible {
+  outline: 2px solid var(--border-focused);
+  outline-offset: 2px;
+}
+.ev-card--underlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  z-index: -1;
+}
+.ev-card {
+  --card-appearance-border: 1px solid transparent;
+}
+.ev-card.is-appearance-default {
+  --card-appearance-background: var(--background-neutral);
+}
+.ev-card.is-appearance-default.is-clickable:hover {
+  --card-appearance-background: var(--background-neutral-hovered);
+}
+.ev-card.is-appearance-default.is-clickable:active {
+  --card-appearance-background: var(--background-neutral-pressed);
+}
+.ev-card.is-appearance-default.is-variant-bold {
+  --card-appearance-background: var(--background-neutral-bold);
+  --card-appearnce-color: var(--text-inverse);
+}
+.ev-card.is-appearance-default.is-variant-bold.is-clickable:hover {
+  --card-appearance-background: var(--background-neutral-bold-hovered);
+}
+.ev-card.is-appearance-default.is-variant-bold.is-clickable:active {
+  --card-appearance-background: var(--background-neutral-bold-pressed);
+}
+.ev-card.is-appearance-default.is-variant-outlined {
+  --card-appearance-background: transparent;
+  --card-appearance-border: 1px solid var(--background-neutral-bold);
+}
+.ev-card.is-appearance-default.is-variant-outlined.is-active {
+  --card-appearance-background: var(--background-neutral);
+}
+.ev-card.is-appearance-default.is-variant-subtle {
+  --card-appearance-background: var(--background-neutral-subtle);
+}
+.ev-card.is-appearance-default.is-variant-subtle.is-clickable:hover {
+  --card-appearance-background: var(--background-neutral-subtle-hovered);
+}
+.ev-card.is-appearance-default.is-variant-subtle.is-clickable:active {
+  --card-appearance-background: var(--background-neutral-subtle-pressed);
+}
+.ev-card.is-appearance-danger {
+  --card-appearance-background: var(--background-danger);
+  --card-appearance-color: var(--text-danger);
+}
+.ev-card.is-appearance-danger.is-clickable:hover {
+  --card-appearance-background: var(--background-danger-hovered);
+}
+.ev-card.is-appearance-danger.is-clickable:active {
+  --card-appearance-background: var(--background-danger-pressed);
+}
+.ev-card.is-appearance-danger.is-variant-bold {
+  --card-appearance-background: var(--background-danger-bold);
+  --card-appearance-color: var(--text-inverse);
+}
+.ev-card.is-appearance-danger.is-variant-bold.is-clickable:hover {
+  --card-appearance-background: var(--background-danger-bold-hovered);
+}
+.ev-card.is-appearance-danger.is-variant-bold.is-clickable:active {
+  --card-appearance-background: var(--background-danger-bold-pressed);
+}
+.ev-card.is-appearance-danger.is-variant-outlined {
+  --card-appearance-background: transparent;
+  --card-appearance-border: 1px solid var(--background-danger-bold);
+}
+.ev-card.is-appearance-danger.is-variant-outlined.is-active {
+  --card-appearance-background: var(--background-danger);
+}
+.ev-card.is-appearance-danger.is-variant-subtle {
+  --card-appearance-background: transparent;
+}
+.ev-card.is-appearance-information {
+  --card-appearance-background: var(--background-information);
+  --card-appearance-color: var(--text-information);
+}
+.ev-card.is-appearance-information.is-clickable:hover {
+  --card-appearance-background: var(--background-information-hovered);
+}
+.ev-card.is-appearance-information.is-clickable:active {
+  --card-appearance-background: var(--background-information-pressed);
+}
+.ev-card.is-appearance-information.is-variant-bold {
+  --card-appearance-background: var(--background-information-bold);
+  --card-appearance-color: var(--text-inverse);
+}
+.ev-card.is-appearance-information.is-variant-bold.is-clickable:hover {
+  --card-appearance-background: var(--background-information-bold-hovered);
+}
+.ev-card.is-appearance-information.is-variant-bold.is-clickable:active {
+  --card-appearance-background: var(--background-information-bold-pressed);
+}
+.ev-card.is-appearance-information.is-variant-outlined {
+  --card-appearance-background: transparent;
+  --card-appearance-border: 1px solid var(--background-information-bold);
+}
+.ev-card.is-appearance-information.is-variant-outlined.is-active {
+  --card-appearance-background: var(--background-information);
+}
+.ev-card.is-appearance-information.is-variant-subtle {
+  --card-appearance-background: transparent;
+}
+.ev-card.is-appearance-notice {
+  --card-appearance-background: var(--background-notice);
+  --card-appearance-color: var(--text-notice);
+}
+.ev-card.is-appearance-notice.is-clickable:hover {
+  --card-appearance-background: var(--background-notice-hovered);
+}
+.ev-card.is-appearance-notice.is-clickable:active {
+  --card-appearance-background: var(--background-notice-pressed);
+}
+.ev-card.is-appearance-notice.is-variant-bold {
+  --card-appearance-background: var(--background-notice-bold);
+  --card-appearance-color: var(--text-inverse);
+}
+.ev-card.is-appearance-notice.is-variant-bold.is-clickable:hover {
+  --card-appearance-background: var(--background-notice-bold-hovered);
+}
+.ev-card.is-appearance-notice.is-variant-bold.is-clickable:active {
+  --card-appearance-background: var(--background-notice-bold-pressed);
+}
+.ev-card.is-appearance-notice.is-variant-outlined {
+  --card-appearance-background: transparent;
+  --card-appearance-border: 1px solid var(--background-notice-bold);
+}
+.ev-card.is-appearance-notice.is-variant-outlined.is-active {
+  --card-appearance-background: var(--background-notice);
+}
+.ev-card.is-appearance-notice.is-variant-subtle {
+  --card-appearance-background: transparent;
+}
+.ev-card.is-appearance-primary {
+  --card-appearance-background: var(--background-brand);
+  --card-appearance-color: var(--text-brand);
+}
+.ev-card.is-appearance-primary.is-clickable:hover {
+  --card-appearance-background: var(--background-brand-hovered);
+}
+.ev-card.is-appearance-primary.is-clickable:active {
+  --card-appearance-background: var(--background-brand-pressed);
+}
+.ev-card.is-appearance-primary.is-variant-bold {
+  --card-appearance-background: var(--background-brand-bold);
+  --card-appearance-color: var(--text-inverse);
+}
+.ev-card.is-appearance-primary.is-variant-bold.is-clickable:hover {
+  --card-appearance-background: var(--background-brand-bold-hovered);
+}
+.ev-card.is-appearance-primary.is-variant-bold.is-clickable:active {
+  --card-appearance-background: var(--background-brand-bold-pressed);
+}
+.ev-card.is-appearance-primary.is-variant-outlined {
+  --card-appearance-background: transparent;
+  --card-appearance-border: 1px solid var(--background-brand-bold);
+}
+.ev-card.is-appearance-primary.is-variant-outlined.is-active {
+  --card-appearance-background: var(--background-brand);
+}
+.ev-card.is-appearance-primary.is-variant-subtle {
+  --card-appearance-background: transparent;
+}
+.ev-card.is-appearance-success {
+  --card-appearance-background: var(--background-success);
+  --card-appearance-color: var(--text-success);
+}
+.ev-card.is-appearance-success.is-clickable:hover {
+  --card-appearance-background: var(--background-success-hovered);
+}
+.ev-card.is-appearance-success.is-clickable:active {
+  --card-appearance-background: var(--background-success-pressed);
+}
+.ev-card.is-appearance-success.is-variant-bold {
+  --card-appearance-background: var(--background-success-bold);
+  --card-appearance-color: var(--text-inverse);
+}
+.ev-card.is-appearance-success.is-variant-bold.is-clickable:hover {
+  --card-appearance-background: var(--background-success-bold-hovered);
+}
+.ev-card.is-appearance-success.is-variant-bold.is-clickable:active {
+  --card-appearance-background: var(--background-success-bold-pressed);
+}
+.ev-card.is-appearance-success.is-variant-outlined {
+  --card-appearance-background: transparent;
+  --card-appearance-border: 1px solid var(--background-success-bold);
+}
+.ev-card.is-appearance-success.is-variant-outlined.is-active {
+  --card-appearance-background: var(--background-success);
+}
+.ev-card.is-appearance-success.is-variant-subtle {
+  --card-appearance-background: transparent;
+}
+.ev-card.is-appearance-warning {
+  --card-appearance-background: var(--background-warning);
+  --card-appearance-color: var(--text-warning);
+}
+.ev-card.is-appearance-warning.is-clickable:hover {
+  --card-appearance-background: var(--background-warning-hovered);
+}
+.ev-card.is-appearance-warning.is-clickable:active {
+  --card-appearance-background: var(--background-warning-pressed);
+}
+.ev-card.is-appearance-warning.is-variant-bold {
+  --card-appearance-background: var(--background-warning-bold);
+  --card-appearance-color: var(--text-inverse);
+}
+.ev-card.is-appearance-warning.is-variant-bold.is-clickable:hover {
+  --card-appearance-background: var(--background-warning-bold-hovered);
+}
+.ev-card.is-appearance-warning.is-variant-bold.is-clickable:active {
+  --card-appearance-background: var(--background-warning-bold-pressed);
+}
+.ev-card.is-appearance-warning.is-variant-outlined {
+  --card-appearance-background: transparent;
+  --card-appearance-border: 1px solid var(--background-warning-bold);
+}
+.ev-card.is-appearance-warning.is-variant-outlined.is-active {
+  --card-appearance-background: var(--background-warning);
+}
+.ev-card.is-appearance-warning.is-variant-subtle {
+  --card-appearance-background: transparent;
+}
+.ev-card .ev-card--underlay {
+  background: var(--card-appearance-background);
+  border: var(--card-appearance-border);
+  transition: background 0.15s ease-in-out, border 0.15s ease-in-out;
+}
+/**
+    ## Disabled
+ */
+.ev-card[disabled], .ev-card.is-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  filter: grayscale(0.5);
+  user-select: none;
+}
+.ev-card {
+  display: grid;
+  grid-template-columns: max-content auto max-content; /* Define 3 columns: prefix, core, suffix */
+  grid-template-rows: auto; /* The header takes up one row */
+  grid-template-areas: "header header header" "prefix body suffix"; /* Prefix, core, and suffix in their respective columns */
+  align-items: center;
+}
+.ev-card--header {
+  grid-area: header;
+}
+.ev-card--prefix {
+  grid-area: prefix;
+}
+.ev-card--body {
+  grid-area: body;
+}
+.ev-card--suffix {
+  grid-area: suffix;
+}
+.ev-card-content + .ev-card-actions {
+  padding-top: 0;
+}.ev-code {
+  background: var(--background-neutral);
+  font-family: var(--monospace-font), monospace;
+  font-size: 0.875em;
+  border-radius: var(--rounded-small);
+  padding: 0.25em 0.75ch;
+  overflow: auto;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  -webkit-box-decoration-break: clone;
+  font-weight: normal;
+}.ev-date-picker-month--days {
+  display: grid;
+  grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
+  flex: 1 1;
+  justify-content: space-around;
+}
+.ev-date-picker-month--day,
+.ev-date-picker-month--weekday {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+.ev-date-picker-month--day.is-adjacent {
+  opacity: 0.5;
+}
+.ev-date-picker-month--day.is-adjacent-hidden {
+  opacity: 0;
+}
+.ev-date-picker-month--day.is-range-start .ev-button, .ev-date-picker-month--day.is-range-within .ev-button, .ev-date-picker-month--day.is-range-end .ev-button {
+  width: calc(100% + 4px);
+}
+.ev-date-picker-month--day.is-range-start .ev-button {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.ev-date-picker-month--day.is-range-within .ev-button {
+  border-radius: 0;
+}
+.ev-date-picker-month--day.is-range-end .ev-button {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}/* Default */
+.ev-list-item {
+  align-items: center;
+  border-radius: var(--input-radius);
+  display: flex;
+  gap: 4px;
+  min-height: var(--input-height-medium);
+  outline: 0;
+  padding: 8px 12px;
+  position: relative;
+  margin: 2px;
+  transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+a.ev-list-item {
+  color: inherit;
+  font-weight: var(--text-weight);
+  text-decoration: none;
+}
+.ev-list-item > * {
+  display: flex;
+  flex: 0 0 auto;
+  width: min-content;
+}
+.ev-list-item--content {
+  flex: 1 0 auto;
+  padding-inline: 4px;
+  width: max-content;
+}
+.ev-list-item.is-clickable {
+  cursor: pointer;
+}
+.ev-list-item.is-clickable:focus-visible, .ev-list-item.is-clickable:hover {
+  color: inherit;
+  background: var(--background-neutral);
+}
+.ev-list-item.is-clickable:focus-visible {
+  outline: 2px solid var(--border-focused);
+  outline-offset: 2px;
+}
+.ev-list-item--indicator {
+  position: absolute;
+  width: 3px;
+  height: 100%;
+  border-top-left-radius: var(--input-radius);
+  border-bottom-left-radius: var(--input-radius);
+  left: 0;
+  opacity: 0;
+  overflow: hidden;
+  top: 0;
+  transition: opacity 0.25s ease-in-out;
+  will-change: opacity;
+}
+.ev-list-item--indicator:before {
   content: "";
   position: absolute;
   display: block;
@@ -1497,37 +1996,6 @@ html.ev-overlay-scroll-blocked {
   height: 100%;
   overflow: auto;
   width: 100%;
-}.ev-surface {
-  box-shadow: none;
-  margin: 0 auto;
-  transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
-  will-change: background-color, box-shadow;
-}
-.ev-surface.elevation-default {
-  background-color: var(--surface-default);
-}
-.ev-surface.elevation-overlay {
-  background-color: var(--surface-overlay);
-  box-shadow: var(--surface-overlay-shadow);
-}
-.ev-surface.elevation-panel {
-  background-color: var(--surface-panel);
-}
-.ev-surface.elevation-sunken {
-  background-color: var(--surface-sunken);
-}
-.is-rounded,
-.is-rounded-small {
-  border-radius: var(--rounded-small);
-}
-.is-rounded-medium {
-  border-radius: var(--rounded-medium);
-}
-.is-rounded-large {
-  border-radius: var(--rounded-large);
 }.ev-surface.ev-date-field--surface {
   margin: 0;
   width: fit-content;
@@ -1591,20 +2059,21 @@ html.ev-overlay-scroll-blocked {
 .ev-form-help.is-visible {
   margin-right: var(--form-help-width);
 }.ev-kbd {
-  background: var(--background-neutral);
-  border: 1px solid var(--border-muted);
   border-radius: var(--input-radius);
   display: inline-flex;
-  font-family: var(--monospace-font);
+  font-family: var(--monospace-font), monospace;
   font-weight: var(--font-weight-regular);
-  padding: 0.125em 0.425em;
+  padding: 0.2em 0.425em;
+  font-size: 85%;
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
 }
 .ev-kbd.is-size-small {
-  font-size: 0.85em;
+  font-size: 0.75em;
 }
 .ev-kbd.is-size-large {
-  font-size: 1.15em;
+  font-size: 1em;
 }/* Default */
 .ev-link {
   display: inline-flex;
@@ -1646,356 +2115,137 @@ html.ev-overlay-scroll-blocked {
     ## Appearance
  */
 .ev-lozenge {
-  border: 1px solid transparent;
+  background: var(--lozenge-appearance-background);
+  border: var(--lozenge-appearance-border);
+  color: var(--lozenge-appearance-color, currentColor);
 }
-.ev-lozenge.is-clickable {
-  cursor: pointer;
+.ev-lozenge {
+  --lozenge-appearance-border: 1px solid transparent;
 }
 .ev-lozenge.is-appearance-default {
-  background: var(--background-neutral);
+  --lozenge-appearance-background: var(--background-neutral);
 }
 .ev-lozenge.is-appearance-default.is-variant-bold {
-  background-color: var(--background-neutral-bold);
-  color: var(--text-inverse);
+  --lozenge-appearance-background: var(--background-neutral-bold);
+  --lozenge-appearnce-color: var(--text-inverse);
 }
 .ev-lozenge.is-appearance-default.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-neutral-bold);
+  --lozenge-appearance-background: transparent;
+  --lozenge-appearance-border: 1px solid var(--background-neutral-bold);
 }
 .ev-lozenge.is-appearance-default.is-variant-outlined.is-active {
-  background-color: var(--background-neutral);
+  --lozenge-appearance-background: var(--background-neutral);
 }
 .ev-lozenge.is-appearance-default.is-variant-subtle {
-  background-color: var(--background-neutral-subtle);
+  --lozenge-appearance-background: var(--background-neutral-subtle);
 }
 .ev-lozenge.is-appearance-danger {
-  background-color: var(--background-danger);
-  color: var(--text-danger);
+  --lozenge-appearance-background: var(--background-danger);
+  --lozenge-appearance-color: var(--text-danger);
 }
 .ev-lozenge.is-appearance-danger.is-variant-bold {
-  background-color: var(--background-danger-bold);
-  color: var(--text-inverse);
+  --lozenge-appearance-background: var(--background-danger-bold);
+  --lozenge-appearance-color: var(--text-inverse);
 }
 .ev-lozenge.is-appearance-danger.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-danger-bold);
+  --lozenge-appearance-background: transparent;
+  --lozenge-appearance-border: 1px solid var(--background-danger-bold);
 }
 .ev-lozenge.is-appearance-danger.is-variant-outlined.is-active {
-  background-color: var(--background-danger);
+  --lozenge-appearance-background: var(--background-danger);
 }
 .ev-lozenge.is-appearance-danger.is-variant-subtle {
-  background-color: transparent;
+  --lozenge-appearance-background: transparent;
 }
 .ev-lozenge.is-appearance-information {
-  background-color: var(--background-information);
-  color: var(--text-information);
+  --lozenge-appearance-background: var(--background-information);
+  --lozenge-appearance-color: var(--text-information);
 }
 .ev-lozenge.is-appearance-information.is-variant-bold {
-  background-color: var(--background-information-bold);
-  color: var(--text-inverse);
+  --lozenge-appearance-background: var(--background-information-bold);
+  --lozenge-appearance-color: var(--text-inverse);
 }
 .ev-lozenge.is-appearance-information.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-information-bold);
+  --lozenge-appearance-background: transparent;
+  --lozenge-appearance-border: 1px solid var(--background-information-bold);
 }
 .ev-lozenge.is-appearance-information.is-variant-outlined.is-active {
-  background-color: var(--background-information);
+  --lozenge-appearance-background: var(--background-information);
 }
 .ev-lozenge.is-appearance-information.is-variant-subtle {
-  background-color: transparent;
+  --lozenge-appearance-background: transparent;
 }
 .ev-lozenge.is-appearance-notice {
-  background-color: var(--background-notice);
-  color: var(--text-notice);
+  --lozenge-appearance-background: var(--background-notice);
+  --lozenge-appearance-color: var(--text-notice);
 }
 .ev-lozenge.is-appearance-notice.is-variant-bold {
-  background-color: var(--background-notice-bold);
-  color: var(--text-inverse);
+  --lozenge-appearance-background: var(--background-notice-bold);
+  --lozenge-appearance-color: var(--text-inverse);
 }
 .ev-lozenge.is-appearance-notice.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-notice-bold);
+  --lozenge-appearance-background: transparent;
+  --lozenge-appearance-border: 1px solid var(--background-notice-bold);
 }
 .ev-lozenge.is-appearance-notice.is-variant-outlined.is-active {
-  background-color: var(--background-notice);
+  --lozenge-appearance-background: var(--background-notice);
 }
 .ev-lozenge.is-appearance-notice.is-variant-subtle {
-  background-color: transparent;
+  --lozenge-appearance-background: transparent;
 }
 .ev-lozenge.is-appearance-primary {
-  background-color: var(--background-brand);
-  color: var(--text-brand);
+  --lozenge-appearance-background: var(--background-brand);
+  --lozenge-appearance-color: var(--text-brand);
 }
 .ev-lozenge.is-appearance-primary.is-variant-bold {
-  background-color: var(--background-brand-bold);
-  color: var(--text-inverse);
+  --lozenge-appearance-background: var(--background-brand-bold);
+  --lozenge-appearance-color: var(--text-inverse);
 }
 .ev-lozenge.is-appearance-primary.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-brand-bold);
+  --lozenge-appearance-background: transparent;
+  --lozenge-appearance-border: 1px solid var(--background-brand-bold);
 }
 .ev-lozenge.is-appearance-primary.is-variant-outlined.is-active {
-  background-color: var(--background-brand);
-}
-.ev-lozenge.is-appearance-primary.is-variant-subtle {
-  background-color: transparent;
-}
-.ev-lozenge.is-appearance-success {
-  background-color: var(--background-success);
-  color: var(--text-success);
-}
-.ev-lozenge.is-appearance-success.is-variant-bold {
-  background-color: var(--background-success-bold);
-  color: var(--text-inverse);
-}
-.ev-lozenge.is-appearance-success.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-success-bold);
-}
-.ev-lozenge.is-appearance-success.is-variant-outlined.is-active {
-  background-color: var(--background-success);
-}
-.ev-lozenge.is-appearance-success.is-variant-subtle {
-  background-color: transparent;
-}
-.ev-lozenge.is-appearance-warning {
-  background-color: var(--background-warning);
-  color: var(--text-warning);
-}
-.ev-lozenge.is-appearance-warning.is-variant-bold {
-  background-color: var(--background-warning-bold);
-  color: var(--text-inverse);
-}
-.ev-lozenge.is-appearance-warning.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-warning-bold);
-}
-.ev-lozenge.is-appearance-warning.is-variant-outlined.is-active {
-  background-color: var(--background-warning);
-}
-.ev-lozenge.is-appearance-warning.is-variant-subtle {
-  background-color: transparent;
-}.ev-heading.is-truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ev-heading.is-truncate-lines {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: var(--max-lines, 2);
-  line-clamp: var(--max-lines, 2);
-  -webkit-box-orient: vertical;
-}.ev-message {
-  align-items: flex-start;
-  border-radius: var(--sheet-radius, 4px);
-  display: flex;
-  flex-wrap: nowrap;
-  gap: var(--spacer-200);
-  padding: var(--spacer-200);
-  background-color: var(--message-background);
-  color: var(--message-text);
-}
-.ev-message > * {
-  flex: 0 0 auto;
-}
-.ev-message--title {
-  margin-bottom: 0;
-  color: var(--message-title, var(--heading-default));
-}
-.ev-message--icon {
-  color: var(--message-icon);
-}
-/** Appearance - Tonal */
-.ev-message.is-variant-tonal.is-appearance-default {
-  --message-icon: var(--icon-color);
-  --message-background: var(--background-neutral);
-  --message-title: var(--heading-on-muted);
-}
-.ev-message.is-variant-tonal.is-appearance-primary {
-  --message-icon: var(--text-brand);
-  --message-background: var(--background-brand);
-  --message-text: var(--text-on-brand);
-  --message-title: var(--heading-on-brand);
-}
-.ev-message.is-variant-tonal.is-appearance-danger {
-  --message-icon: var(--text-danger);
-  --message-background: var(--background-danger);
-  --message-text: var(--text-on-danger);
-  --message-title: var(--heading-on-danger);
-}
-.ev-message.is-variant-tonal.is-appearance-information {
-  --message-icon: var(--text-information);
-  --message-background: var(--background-information);
-  --message-text: var(--text-on-information);
-  --message-title: var(--heading-on-information);
-}
-.ev-message.is-variant-tonal.is-appearance-notice {
-  --message-icon: var(--text-notice);
-  --message-background: var(--background-notice);
-  --message-text: var(--text-on-notice);
-  --message-title: var(--heading-on-notice);
-}
-.ev-message.is-variant-tonal.is-appearance-success {
-  --message-icon: var(--text-success);
-  --message-background: var(--background-success);
-  --message-text: var(--text-on-success);
-  --message-title: var(--heading-on-success);
-}
-.ev-message.is-variant-tonal.is-appearance-warning {
-  --message-icon: var(--text-warning);
-  --message-background: var(--background-warning);
-  --message-text: var(--text-on-warning);
-  --message-title: var(--heading-on-warning);
-}
-/** Appearance - Bold */
-.ev-message.is-variant-bold.is-appearance-default {
-  --message-background: var(--background-neutral-bold);
-  --message-text: var(--text-on-muted-bold);
-  --message-title: var(--heading-on-muted-bold);
-  --message-icon: var(--heading-on-muted-bold);
-}
-.ev-message.is-variant-bold.is-appearance-primary {
-  --message-background: var(--background-brand-bold);
-  --message-text: var(--text-on-brand-bold);
-  --message-title: var(--heading-on-brand-bold);
-  --message-icon: var(--heading-on-brand-bold);
-}
-.ev-message.is-variant-bold.is-appearance-danger {
-  --message-background: var(--background-danger-bold);
-  --message-text: var(--text-on-danger-bold);
-  --message-title: var(--heading-on-danger-bold);
-  --message-icon: var(--heading-on-danger-bold);
-}
-.ev-message.is-variant-bold.is-appearance-information {
-  --message-background: var(--background-information-bold);
-  --message-text: var(--text-on-information-bold);
-  --message-title: var(--heading-on-information-bold);
-  --message-icon: var(--heading-on-information-bold);
-}
-.ev-message.is-variant-bold.is-appearance-notice {
-  --message-background: var(--background-notice-bold);
-  --message-text: var(--text-on-notice-bold);
-  --message-title: var(--heading-on-notice-bold);
-  --message-icon: var(--heading-on-notice-bold);
-}
-.ev-message.is-variant-bold.is-appearance-success {
-  --message-background: var(--background-success-bold);
-  --message-text: var(--text-on-success-bold);
-  --message-title: var(--heading-on-success-bold);
-  --message-icon: var(--heading-on-success-bold);
-}
-.ev-message.is-variant-bold.is-appearance-warning {
-  --message-background: var(--background-warning-bold);
-  --message-text: var(--text-on-warning-bold);
-  --message-title: var(--heading-on-warning-bold);
-  --message-icon: var(--heading-on-warning-bold);
-}
-/** Appearance - Subtle */
-.ev-message.is-variant-subtle {
-  --message-action-link: var(--link-default);
-}
-.ev-message.is-variant-subtle.is-appearance-default {
-  --message-icon: var(--icon-color);
-}
-.ev-message.is-variant-subtle.is-appearance-primary {
-  --message-icon: var(--text-brand);
-}
-.ev-message.is-variant-subtle.is-appearance-danger {
-  --message-icon: var(--text-danger);
-}
-.ev-message.is-variant-subtle.is-appearance-information {
-  --message-icon: var(--text-information);
-}
-.ev-message.is-variant-subtle.is-appearance-notice {
-  --message-icon: var(--text-notice);
-}
-.ev-message.is-variant-subtle.is-appearance-success {
-  --message-icon: var(--text-success);
-}
-.ev-message.is-variant-subtle.is-appearance-warning {
-  --message-icon: var(--text-warning);
-}
-.ev-message--content {
-  flex: 1 0 auto;
-  padding-top: 2px;
-  width: min-content;
-}
-.ev-message--icon {
-  display: inline-flex;
-}
-.ev-message--dismiss,
-.ev-message--expand {
-  display: inline-flex;
-}
-.ev-message--dismiss button,
-.ev-message--expand button {
-  margin: -6px;
-}
-.ev-message--expandable {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacer-100, 0.5rem);
-}
-.ev-message--description {
-  padding-top: var(--spacer-100);
+  --lozenge-appearance-background: var(--background-brand);
 }
-.ev-message--actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacer-200);
+.ev-lozenge.is-appearance-primary.is-variant-subtle {
+  --lozenge-appearance-background: transparent;
 }
-.ev-message--actions .ev-button.is-variant-link {
-  padding: 0;
+.ev-lozenge.is-appearance-success {
+  --lozenge-appearance-background: var(--background-success);
+  --lozenge-appearance-color: var(--text-success);
 }
-.ev-message--actions .ev-button.is-variant-link .ev-button--text {
-  padding: 0;
+.ev-lozenge.is-appearance-success.is-variant-bold {
+  --lozenge-appearance-background: var(--background-success-bold);
+  --lozenge-appearance-color: var(--text-inverse);
 }
-.ev-message--expand .ev-button .ev-icon {
-  transition: transform 0.25s var(--easing-standard);
-  transform: rotate(0);
+.ev-lozenge.is-appearance-success.is-variant-outlined {
+  --lozenge-appearance-background: transparent;
+  --lozenge-appearance-border: 1px solid var(--background-success-bold);
 }
-.ev-message--expand .ev-button.is-expanded .ev-icon {
-  transform: rotate(-180deg);
+.ev-lozenge.is-appearance-success.is-variant-outlined.is-active {
+  --lozenge-appearance-background: var(--background-success);
 }
-.transition-message-enter-from, .transition-message-leave-to {
-  opacity: 0;
-  height: 0;
+.ev-lozenge.is-appearance-success.is-variant-subtle {
+  --lozenge-appearance-background: transparent;
 }
-.transition-message-enter-active, .transition-message-leave-active {
-  transition: height 0.25s var(--easing-standard), opacity 0.25s var(--easing-standard) 0.1s;
-  overflow: hidden;
+.ev-lozenge.is-appearance-warning {
+  --lozenge-appearance-background: var(--background-warning);
+  --lozenge-appearance-color: var(--text-warning);
 }
-.transition-message-leave-active {
-  transition: height 0.25s var(--easing-standard) 0.1s, opacity 0.25s var(--easing-standard);
-}.ev-notification .ev-message--title {
-  font-weight: var(--font-weight-semibold);
-}.ev-number-field--minus {
-  margin-left: -0.5rem;
+.ev-lozenge.is-appearance-warning.is-variant-bold {
+  --lozenge-appearance-background: var(--background-warning-bold);
+  --lozenge-appearance-color: var(--text-inverse);
 }
-.ev-number-field--plus {
-  margin-right: -0.5rem;
+.ev-lozenge.is-appearance-warning.is-variant-outlined {
+  --lozenge-appearance-background: transparent;
+  --lozenge-appearance-border: 1px solid var(--background-warning-bold);
 }
-.ev-number-field--currency {
-  display: flex;
-  align-items: center;
-  font-size: var(--input-font-size);
+.ev-lozenge.is-appearance-warning.is-variant-outlined.is-active {
+  --lozenge-appearance-background: var(--background-warning);
+}
+.ev-lozenge.is-appearance-warning.is-variant-subtle {
+  --lozenge-appearance-background: transparent;
 }/**
     # Breakpoint Min
  */
@@ -3968,15 +4218,225 @@ html.ev-overlay-scroll-blocked {
   filter: blur(4px);
 }
-.ev-img--img.is-object-cover {
-  object-fit: cover;
-}
-.ev-img--img.is-object-contain {
-  object-fit: contain;
+.ev-img--img.is-object-cover {
+  object-fit: cover;
+}
+.ev-img--img.is-object-contain {
+  object-fit: contain;
+}
+.ev-img--gradient {
+  background-repeat: no-repeat;
+}.ev-message {
+  align-items: flex-start;
+  border-radius: var(--sheet-radius, 4px);
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--spacer-200);
+  padding: var(--spacer-200);
+  background-color: var(--message-background);
+  color: var(--message-text);
+}
+.ev-message > * {
+  flex: 0 0 auto;
+}
+.ev-message--title {
+  margin-bottom: 0;
+  color: var(--message-title, var(--heading-default));
+}
+.ev-message--icon {
+  color: var(--message-icon);
+}
+/** Appearance - Tonal */
+.ev-message.is-variant-tonal.is-appearance-default {
+  --message-icon: var(--icon-color);
+  --message-background: var(--background-neutral);
+  --message-title: var(--heading-on-muted);
+}
+.ev-message.is-variant-tonal.is-appearance-primary {
+  --message-icon: var(--text-brand);
+  --message-background: var(--background-brand);
+  --message-text: var(--text-on-brand);
+  --message-title: var(--heading-on-brand);
+}
+.ev-message.is-variant-tonal.is-appearance-danger {
+  --message-icon: var(--text-danger);
+  --message-background: var(--background-danger);
+  --message-text: var(--text-on-danger);
+  --message-title: var(--heading-on-danger);
+}
+.ev-message.is-variant-tonal.is-appearance-information {
+  --message-icon: var(--text-information);
+  --message-background: var(--background-information);
+  --message-text: var(--text-on-information);
+  --message-title: var(--heading-on-information);
+}
+.ev-message.is-variant-tonal.is-appearance-notice {
+  --message-icon: var(--text-notice);
+  --message-background: var(--background-notice);
+  --message-text: var(--text-on-notice);
+  --message-title: var(--heading-on-notice);
+}
+.ev-message.is-variant-tonal.is-appearance-success {
+  --message-icon: var(--text-success);
+  --message-background: var(--background-success);
+  --message-text: var(--text-on-success);
+  --message-title: var(--heading-on-success);
+}
+.ev-message.is-variant-tonal.is-appearance-warning {
+  --message-icon: var(--text-warning);
+  --message-background: var(--background-warning);
+  --message-text: var(--text-on-warning);
+  --message-title: var(--heading-on-warning);
+}
+/** Appearance - Bold */
+.ev-message.is-variant-bold.is-appearance-default {
+  --message-background: var(--background-neutral-bold);
+  --message-text: var(--text-on-muted-bold);
+  --message-title: var(--heading-on-muted-bold);
+  --message-icon: var(--heading-on-muted-bold);
+}
+.ev-message.is-variant-bold.is-appearance-primary {
+  --message-background: var(--background-brand-bold);
+  --message-text: var(--text-on-brand-bold);
+  --message-title: var(--heading-on-brand-bold);
+  --message-icon: var(--heading-on-brand-bold);
+}
+.ev-message.is-variant-bold.is-appearance-danger {
+  --message-background: var(--background-danger-bold);
+  --message-text: var(--text-on-danger-bold);
+  --message-title: var(--heading-on-danger-bold);
+  --message-icon: var(--heading-on-danger-bold);
+}
+.ev-message.is-variant-bold.is-appearance-information {
+  --message-background: var(--background-information-bold);
+  --message-text: var(--text-on-information-bold);
+  --message-title: var(--heading-on-information-bold);
+  --message-icon: var(--heading-on-information-bold);
+}
+.ev-message.is-variant-bold.is-appearance-notice {
+  --message-background: var(--background-notice-bold);
+  --message-text: var(--text-on-notice-bold);
+  --message-title: var(--heading-on-notice-bold);
+  --message-icon: var(--heading-on-notice-bold);
+}
+.ev-message.is-variant-bold.is-appearance-success {
+  --message-background: var(--background-success-bold);
+  --message-text: var(--text-on-success-bold);
+  --message-title: var(--heading-on-success-bold);
+  --message-icon: var(--heading-on-success-bold);
+}
+.ev-message.is-variant-bold.is-appearance-warning {
+  --message-background: var(--background-warning-bold);
+  --message-text: var(--text-on-warning-bold);
+  --message-title: var(--heading-on-warning-bold);
+  --message-icon: var(--heading-on-warning-bold);
+}
+/** Appearance - Subtle */
+.ev-message.is-variant-subtle {
+  --message-action-link: var(--link-default);
+}
+.ev-message.is-variant-subtle.is-appearance-default {
+  --message-icon: var(--icon-color);
+}
+.ev-message.is-variant-subtle.is-appearance-primary {
+  --message-icon: var(--text-brand);
+}
+.ev-message.is-variant-subtle.is-appearance-danger {
+  --message-icon: var(--text-danger);
+}
+.ev-message.is-variant-subtle.is-appearance-information {
+  --message-icon: var(--text-information);
+}
+.ev-message.is-variant-subtle.is-appearance-notice {
+  --message-icon: var(--text-notice);
+}
+.ev-message.is-variant-subtle.is-appearance-success {
+  --message-icon: var(--text-success);
+}
+.ev-message.is-variant-subtle.is-appearance-warning {
+  --message-icon: var(--text-warning);
+}
+.ev-message--content {
+  flex: 1 0 auto;
+  padding-top: 2px;
+  width: min-content;
+}
+.ev-message--icon {
+  display: inline-flex;
+}
+.ev-message--dismiss,
+.ev-message--expand {
+  display: inline-flex;
+}
+.ev-message--dismiss button,
+.ev-message--expand button {
+  margin: -6px;
+}
+.ev-message--expandable {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-100, 0.5rem);
+}
+.ev-message--description {
+  padding-top: var(--spacer-100);
+}
+.ev-message--actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacer-200);
+}
+.ev-message--actions .ev-button.is-variant-link {
+  padding: 0;
+}
+.ev-message--actions .ev-button.is-variant-link .ev-button--text {
+  padding: 0;
+}
+.ev-message--expand .ev-button .ev-icon {
+  transition: transform 0.25s var(--easing-standard);
+  transform: rotate(0);
+}
+.ev-message--expand .ev-button.is-expanded .ev-icon {
+  transform: rotate(-180deg);
+}
+.transition-message-enter-from, .transition-message-leave-to {
+  opacity: 0;
+  height: 0;
+}
+.transition-message-enter-active, .transition-message-leave-active {
+  transition: height 0.25s var(--easing-standard), opacity 0.25s var(--easing-standard) 0.1s;
+  overflow: hidden;
+}
+.transition-message-leave-active {
+  transition: height 0.25s var(--easing-standard) 0.1s, opacity 0.25s var(--easing-standard);
+}.ev-notification .ev-message--title {
+  font-weight: var(--font-weight-semibold);
+}.ev-number-field--minus {
+  margin-left: -0.5rem;
+}
+.ev-number-field--plus {
+  margin-right: -0.5rem;
 }
-.ev-img--gradient {
-  background-repeat: no-repeat;
+.ev-number-field--currency {
+  display: flex;
+  align-items: center;
+  font-size: var(--input-font-size);
 }/* Default */
 /**
     # EvRadio
@@ -4291,135 +4751,137 @@ html.ev-overlay-scroll-blocked {
 /** Appearance */
 .ev-avatar {
-  border: 1px solid transparent;
+  background: var(--avatar-appearance-background);
+  border: var(--avatar-appearance-border);
+  color: var(--avatar-appearance-color);
 }
-.ev-avatar.is-clickable {
-  cursor: pointer;
+.ev-avatar {
+  --avatar-appearance-border: 1px solid transparent;
 }
 .ev-avatar.is-appearance-default {
-  background: var(--background-neutral);
+  --avatar-appearance-background: var(--background-neutral);
 }
 .ev-avatar.is-appearance-default.is-variant-bold {
-  background-color: var(--background-neutral-bold);
-  color: var(--text-inverse);
+  --avatar-appearance-background: var(--background-neutral-bold);
+  --avatar-appearnce-color: var(--text-inverse);
 }
 .ev-avatar.is-appearance-default.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-neutral-bold);
+  --avatar-appearance-background: transparent;
+  --avatar-appearance-border: 1px solid var(--background-neutral-bold);
 }
 .ev-avatar.is-appearance-default.is-variant-outlined.is-active {
-  background-color: var(--background-neutral);
+  --avatar-appearance-background: var(--background-neutral);
 }
 .ev-avatar.is-appearance-default.is-variant-subtle {
-  background-color: var(--background-neutral-subtle);
+  --avatar-appearance-background: var(--background-neutral-subtle);
 }
 .ev-avatar.is-appearance-danger {
-  background-color: var(--background-danger);
-  color: var(--text-danger);
+  --avatar-appearance-background: var(--background-danger);
+  --avatar-appearance-color: var(--text-danger);
 }
 .ev-avatar.is-appearance-danger.is-variant-bold {
-  background-color: var(--background-danger-bold);
-  color: var(--text-inverse);
+  --avatar-appearance-background: var(--background-danger-bold);
+  --avatar-appearance-color: var(--text-inverse);
 }
 .ev-avatar.is-appearance-danger.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-danger-bold);
+  --avatar-appearance-background: transparent;
+  --avatar-appearance-border: 1px solid var(--background-danger-bold);
 }
 .ev-avatar.is-appearance-danger.is-variant-outlined.is-active {
-  background-color: var(--background-danger);
+  --avatar-appearance-background: var(--background-danger);
 }
 .ev-avatar.is-appearance-danger.is-variant-subtle {
-  background-color: transparent;
+  --avatar-appearance-background: transparent;
 }
 .ev-avatar.is-appearance-information {
-  background-color: var(--background-information);
-  color: var(--text-information);
+  --avatar-appearance-background: var(--background-information);
+  --avatar-appearance-color: var(--text-information);
 }
 .ev-avatar.is-appearance-information.is-variant-bold {
-  background-color: var(--background-information-bold);
-  color: var(--text-inverse);
+  --avatar-appearance-background: var(--background-information-bold);
+  --avatar-appearance-color: var(--text-inverse);
 }
 .ev-avatar.is-appearance-information.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-information-bold);
+  --avatar-appearance-background: transparent;
+  --avatar-appearance-border: 1px solid var(--background-information-bold);
 }
 .ev-avatar.is-appearance-information.is-variant-outlined.is-active {
-  background-color: var(--background-information);
+  --avatar-appearance-background: var(--background-information);
 }
 .ev-avatar.is-appearance-information.is-variant-subtle {
-  background-color: transparent;
+  --avatar-appearance-background: transparent;
 }
 .ev-avatar.is-appearance-notice {
-  background-color: var(--background-notice);
-  color: var(--text-notice);
+  --avatar-appearance-background: var(--background-notice);
+  --avatar-appearance-color: var(--text-notice);
 }
 .ev-avatar.is-appearance-notice.is-variant-bold {
-  background-color: var(--background-notice-bold);
-  color: var(--text-inverse);
+  --avatar-appearance-background: var(--background-notice-bold);
+  --avatar-appearance-color: var(--text-inverse);
 }
 .ev-avatar.is-appearance-notice.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-notice-bold);
+  --avatar-appearance-background: transparent;
+  --avatar-appearance-border: 1px solid var(--background-notice-bold);
 }
 .ev-avatar.is-appearance-notice.is-variant-outlined.is-active {
-  background-color: var(--background-notice);
+  --avatar-appearance-background: var(--background-notice);
 }
 .ev-avatar.is-appearance-notice.is-variant-subtle {
-  background-color: transparent;
+  --avatar-appearance-background: transparent;
 }
 .ev-avatar.is-appearance-primary {
-  background-color: var(--background-brand);
-  color: var(--text-brand);
+  --avatar-appearance-background: var(--background-brand);
+  --avatar-appearance-color: var(--text-brand);
 }
 .ev-avatar.is-appearance-primary.is-variant-bold {
-  background-color: var(--background-brand-bold);
-  color: var(--text-inverse);
+  --avatar-appearance-background: var(--background-brand-bold);
+  --avatar-appearance-color: var(--text-inverse);
 }
 .ev-avatar.is-appearance-primary.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-brand-bold);
+  --avatar-appearance-background: transparent;
+  --avatar-appearance-border: 1px solid var(--background-brand-bold);
 }
 .ev-avatar.is-appearance-primary.is-variant-outlined.is-active {
-  background-color: var(--background-brand);
+  --avatar-appearance-background: var(--background-brand);
 }
 .ev-avatar.is-appearance-primary.is-variant-subtle {
-  background-color: transparent;
+  --avatar-appearance-background: transparent;
 }
 .ev-avatar.is-appearance-success {
-  background-color: var(--background-success);
-  color: var(--text-success);
+  --avatar-appearance-background: var(--background-success);
+  --avatar-appearance-color: var(--text-success);
 }
 .ev-avatar.is-appearance-success.is-variant-bold {
-  background-color: var(--background-success-bold);
-  color: var(--text-inverse);
+  --avatar-appearance-background: var(--background-success-bold);
+  --avatar-appearance-color: var(--text-inverse);
 }
 .ev-avatar.is-appearance-success.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-success-bold);
+  --avatar-appearance-background: transparent;
+  --avatar-appearance-border: 1px solid var(--background-success-bold);
 }
 .ev-avatar.is-appearance-success.is-variant-outlined.is-active {
-  background-color: var(--background-success);
+  --avatar-appearance-background: var(--background-success);
 }
 .ev-avatar.is-appearance-success.is-variant-subtle {
-  background-color: transparent;
+  --avatar-appearance-background: transparent;
 }
 .ev-avatar.is-appearance-warning {
-  background-color: var(--background-warning);
-  color: var(--text-warning);
+  --avatar-appearance-background: var(--background-warning);
+  --avatar-appearance-color: var(--text-warning);
 }
 .ev-avatar.is-appearance-warning.is-variant-bold {
-  background-color: var(--background-warning-bold);
-  color: var(--text-inverse);
+  --avatar-appearance-background: var(--background-warning-bold);
+  --avatar-appearance-color: var(--text-inverse);
 }
 .ev-avatar.is-appearance-warning.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-warning-bold);
+  --avatar-appearance-background: transparent;
+  --avatar-appearance-border: 1px solid var(--background-warning-bold);
 }
 .ev-avatar.is-appearance-warning.is-variant-outlined.is-active {
-  background-color: var(--background-warning);
+  --avatar-appearance-background: var(--background-warning);
 }
 .ev-avatar.is-appearance-warning.is-variant-subtle {
-  background-color: transparent;
+  --avatar-appearance-background: transparent;
 }/* Default */
 .ev-tag {
   --current-size: 36px;
@@ -4492,225 +4954,227 @@ html.ev-overlay-scroll-blocked {
     ## Appearance
  */
 .ev-tag {
-  border: 1px solid transparent;
+  background: var(--tag-appearance-background);
+  border: var(--tag-appearance-border);
+  color: var(--tag-appearance-color, currentColor);
 }
-.ev-tag.is-clickable {
-  cursor: pointer;
+.ev-tag {
+  --tag-appearance-border: 1px solid transparent;
 }
 .ev-tag.is-appearance-default {
-  background: var(--background-neutral);
+  --tag-appearance-background: var(--background-neutral);
 }
 .ev-tag.is-appearance-default.is-clickable:hover {
-  background-color: var(--background-neutral-hovered);
+  --tag-appearance-background: var(--background-neutral-hovered);
 }
 .ev-tag.is-appearance-default.is-clickable:active {
-  background-color: var(--background-neutral-pressed);
+  --tag-appearance-background: var(--background-neutral-pressed);
 }
 .ev-tag.is-appearance-default.is-variant-bold {
-  background-color: var(--background-neutral-bold);
-  color: var(--text-inverse);
+  --tag-appearance-background: var(--background-neutral-bold);
+  --tag-appearnce-color: var(--text-inverse);
 }
 .ev-tag.is-appearance-default.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-neutral-bold-hovered);
+  --tag-appearance-background: var(--background-neutral-bold-hovered);
 }
 .ev-tag.is-appearance-default.is-variant-bold.is-clickable:active {
-  background-color: var(--background-neutral-bold-pressed);
+  --tag-appearance-background: var(--background-neutral-bold-pressed);
 }
 .ev-tag.is-appearance-default.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-neutral-bold);
+  --tag-appearance-background: transparent;
+  --tag-appearance-border: 1px solid var(--background-neutral-bold);
 }
 .ev-tag.is-appearance-default.is-variant-outlined.is-active {
-  background-color: var(--background-neutral);
+  --tag-appearance-background: var(--background-neutral);
 }
 .ev-tag.is-appearance-default.is-variant-subtle {
-  background-color: var(--background-neutral-subtle);
+  --tag-appearance-background: var(--background-neutral-subtle);
 }
 .ev-tag.is-appearance-default.is-variant-subtle.is-clickable:hover {
-  background-color: var(--background-neutral-subtle-hovered);
+  --tag-appearance-background: var(--background-neutral-subtle-hovered);
 }
 .ev-tag.is-appearance-default.is-variant-subtle.is-clickable:active {
-  background-color: var(--background-neutral-subtle-pressed);
+  --tag-appearance-background: var(--background-neutral-subtle-pressed);
 }
 .ev-tag.is-appearance-danger {
-  background-color: var(--background-danger);
-  color: var(--text-danger);
+  --tag-appearance-background: var(--background-danger);
+  --tag-appearance-color: var(--text-danger);
 }
 .ev-tag.is-appearance-danger.is-clickable:hover {
-  background-color: var(--background-danger-hovered);
+  --tag-appearance-background: var(--background-danger-hovered);
 }
 .ev-tag.is-appearance-danger.is-clickable:active {
-  background-color: var(--background-danger-pressed);
+  --tag-appearance-background: var(--background-danger-pressed);
 }
 .ev-tag.is-appearance-danger.is-variant-bold {
-  background-color: var(--background-danger-bold);
-  color: var(--text-inverse);
+  --tag-appearance-background: var(--background-danger-bold);
+  --tag-appearance-color: var(--text-inverse);
 }
 .ev-tag.is-appearance-danger.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-danger-bold-hovered);
+  --tag-appearance-background: var(--background-danger-bold-hovered);
 }
 .ev-tag.is-appearance-danger.is-variant-bold.is-clickable:active {
-  background-color: var(--background-danger-bold-pressed);
+  --tag-appearance-background: var(--background-danger-bold-pressed);
 }
 .ev-tag.is-appearance-danger.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-danger-bold);
+  --tag-appearance-background: transparent;
+  --tag-appearance-border: 1px solid var(--background-danger-bold);
 }
 .ev-tag.is-appearance-danger.is-variant-outlined.is-active {
-  background-color: var(--background-danger);
+  --tag-appearance-background: var(--background-danger);
 }
 .ev-tag.is-appearance-danger.is-variant-subtle {
-  background-color: transparent;
+  --tag-appearance-background: transparent;
 }
 .ev-tag.is-appearance-information {
-  background-color: var(--background-information);
-  color: var(--text-information);
+  --tag-appearance-background: var(--background-information);
+  --tag-appearance-color: var(--text-information);
 }
 .ev-tag.is-appearance-information.is-clickable:hover {
-  background-color: var(--background-information-hovered);
+  --tag-appearance-background: var(--background-information-hovered);
 }
 .ev-tag.is-appearance-information.is-clickable:active {
-  background-color: var(--background-information-pressed);
+  --tag-appearance-background: var(--background-information-pressed);
 }
 .ev-tag.is-appearance-information.is-variant-bold {
-  background-color: var(--background-information-bold);
-  color: var(--text-inverse);
+  --tag-appearance-background: var(--background-information-bold);
+  --tag-appearance-color: var(--text-inverse);
 }
 .ev-tag.is-appearance-information.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-information-bold-hovered);
+  --tag-appearance-background: var(--background-information-bold-hovered);
 }
 .ev-tag.is-appearance-information.is-variant-bold.is-clickable:active {
-  background-color: var(--background-information-bold-pressed);
+  --tag-appearance-background: var(--background-information-bold-pressed);
 }
 .ev-tag.is-appearance-information.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-information-bold);
+  --tag-appearance-background: transparent;
+  --tag-appearance-border: 1px solid var(--background-information-bold);
 }
 .ev-tag.is-appearance-information.is-variant-outlined.is-active {
-  background-color: var(--background-information);
+  --tag-appearance-background: var(--background-information);
 }
 .ev-tag.is-appearance-information.is-variant-subtle {
-  background-color: transparent;
+  --tag-appearance-background: transparent;
 }
 .ev-tag.is-appearance-notice {
-  background-color: var(--background-notice);
-  color: var(--text-notice);
+  --tag-appearance-background: var(--background-notice);
+  --tag-appearance-color: var(--text-notice);
 }
 .ev-tag.is-appearance-notice.is-clickable:hover {
-  background-color: var(--background-notice-hovered);
+  --tag-appearance-background: var(--background-notice-hovered);
 }
 .ev-tag.is-appearance-notice.is-clickable:active {
-  background-color: var(--background-notice-pressed);
+  --tag-appearance-background: var(--background-notice-pressed);
 }
 .ev-tag.is-appearance-notice.is-variant-bold {
-  background-color: var(--background-notice-bold);
-  color: var(--text-inverse);
+  --tag-appearance-background: var(--background-notice-bold);
+  --tag-appearance-color: var(--text-inverse);
 }
 .ev-tag.is-appearance-notice.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-notice-bold-hovered);
+  --tag-appearance-background: var(--background-notice-bold-hovered);
 }
 .ev-tag.is-appearance-notice.is-variant-bold.is-clickable:active {
-  background-color: var(--background-notice-bold-pressed);
+  --tag-appearance-background: var(--background-notice-bold-pressed);
 }
 .ev-tag.is-appearance-notice.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-notice-bold);
+  --tag-appearance-background: transparent;
+  --tag-appearance-border: 1px solid var(--background-notice-bold);
 }
 .ev-tag.is-appearance-notice.is-variant-outlined.is-active {
-  background-color: var(--background-notice);
+  --tag-appearance-background: var(--background-notice);
 }
 .ev-tag.is-appearance-notice.is-variant-subtle {
-  background-color: transparent;
+  --tag-appearance-background: transparent;
 }
 .ev-tag.is-appearance-primary {
-  background-color: var(--background-brand);
-  color: var(--text-brand);
+  --tag-appearance-background: var(--background-brand);
+  --tag-appearance-color: var(--text-brand);
 }
 .ev-tag.is-appearance-primary.is-clickable:hover {
-  background-color: var(--background-brand-hovered);
+  --tag-appearance-background: var(--background-brand-hovered);
 }
 .ev-tag.is-appearance-primary.is-clickable:active {
-  background-color: var(--background-brand-pressed);
+  --tag-appearance-background: var(--background-brand-pressed);
 }
 .ev-tag.is-appearance-primary.is-variant-bold {
-  background-color: var(--background-brand-bold);
-  color: var(--text-inverse);
+  --tag-appearance-background: var(--background-brand-bold);
+  --tag-appearance-color: var(--text-inverse);
 }
 .ev-tag.is-appearance-primary.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-brand-bold-hovered);
+  --tag-appearance-background: var(--background-brand-bold-hovered);
 }
 .ev-tag.is-appearance-primary.is-variant-bold.is-clickable:active {
-  background-color: var(--background-brand-bold-pressed);
+  --tag-appearance-background: var(--background-brand-bold-pressed);
 }
 .ev-tag.is-appearance-primary.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-brand-bold);
+  --tag-appearance-background: transparent;
+  --tag-appearance-border: 1px solid var(--background-brand-bold);
 }
 .ev-tag.is-appearance-primary.is-variant-outlined.is-active {
-  background-color: var(--background-brand);
+  --tag-appearance-background: var(--background-brand);
 }
 .ev-tag.is-appearance-primary.is-variant-subtle {
-  background-color: transparent;
+  --tag-appearance-background: transparent;
 }
 .ev-tag.is-appearance-success {
-  background-color: var(--background-success);
-  color: var(--text-success);
+  --tag-appearance-background: var(--background-success);
+  --tag-appearance-color: var(--text-success);
 }
 .ev-tag.is-appearance-success.is-clickable:hover {
-  background-color: var(--background-success-hovered);
+  --tag-appearance-background: var(--background-success-hovered);
 }
 .ev-tag.is-appearance-success.is-clickable:active {
-  background-color: var(--background-success-pressed);
+  --tag-appearance-background: var(--background-success-pressed);
 }
 .ev-tag.is-appearance-success.is-variant-bold {
-  background-color: var(--background-success-bold);
-  color: var(--text-inverse);
+  --tag-appearance-background: var(--background-success-bold);
+  --tag-appearance-color: var(--text-inverse);
 }
 .ev-tag.is-appearance-success.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-success-bold-hovered);
+  --tag-appearance-background: var(--background-success-bold-hovered);
 }
 .ev-tag.is-appearance-success.is-variant-bold.is-clickable:active {
-  background-color: var(--background-success-bold-pressed);
+  --tag-appearance-background: var(--background-success-bold-pressed);
 }
 .ev-tag.is-appearance-success.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-success-bold);
+  --tag-appearance-background: transparent;
+  --tag-appearance-border: 1px solid var(--background-success-bold);
 }
 .ev-tag.is-appearance-success.is-variant-outlined.is-active {
-  background-color: var(--background-success);
+  --tag-appearance-background: var(--background-success);
 }
 .ev-tag.is-appearance-success.is-variant-subtle {
-  background-color: transparent;
+  --tag-appearance-background: transparent;
 }
 .ev-tag.is-appearance-warning {
-  background-color: var(--background-warning);
-  color: var(--text-warning);
+  --tag-appearance-background: var(--background-warning);
+  --tag-appearance-color: var(--text-warning);
 }
 .ev-tag.is-appearance-warning.is-clickable:hover {
-  background-color: var(--background-warning-hovered);
+  --tag-appearance-background: var(--background-warning-hovered);
 }
 .ev-tag.is-appearance-warning.is-clickable:active {
-  background-color: var(--background-warning-pressed);
+  --tag-appearance-background: var(--background-warning-pressed);
 }
 .ev-tag.is-appearance-warning.is-variant-bold {
-  background-color: var(--background-warning-bold);
-  color: var(--text-inverse);
+  --tag-appearance-background: var(--background-warning-bold);
+  --tag-appearance-color: var(--text-inverse);
 }
 .ev-tag.is-appearance-warning.is-variant-bold.is-clickable:hover {
-  background-color: var(--background-warning-bold-hovered);
+  --tag-appearance-background: var(--background-warning-bold-hovered);
 }
 .ev-tag.is-appearance-warning.is-variant-bold.is-clickable:active {
-  background-color: var(--background-warning-bold-pressed);
+  --tag-appearance-background: var(--background-warning-bold-pressed);
 }
 .ev-tag.is-appearance-warning.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-warning-bold);
+  --tag-appearance-background: transparent;
+  --tag-appearance-border: 1px solid var(--background-warning-bold);
 }
 .ev-tag.is-appearance-warning.is-variant-outlined.is-active {
-  background-color: var(--background-warning);
+  --tag-appearance-background: var(--background-warning);
 }
 .ev-tag.is-appearance-warning.is-variant-subtle {
-  background-color: transparent;
+  --tag-appearance-background: transparent;
 }
 /**
@@ -4718,17 +5182,6 @@ html.ev-overlay-scroll-blocked {
 */
 .ev-tag.is-rounded {
   border-radius: 999px;
-}.ev-text.is-truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ev-text.is-truncate-lines {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: var(--max-lines, 2);
-  line-clamp: var(--max-lines, 2);
-  -webkit-box-orient: vertical;
 }/* Default */
 /**
     # EvTextarea
@@ -5111,135 +5564,137 @@ html.ev-overlay-scroll-blocked {
     ## Appearance
  */
 .ev-badge--content {
-  border: 1px solid transparent;
+  background: var(--badge-appearance-background);
+  border: var(--badge-appearance-border);
+  color: var(--badge-appearance-color);
 }
-.ev-badge--content.is-clickable {
-  cursor: pointer;
+.ev-badge--content {
+  --badge-appearance-border: 1px solid transparent;
 }
 .ev-badge--content.is-appearance-default {
-  background: var(--background-neutral);
+  --badge-appearance-background: var(--background-neutral);
 }
 .ev-badge--content.is-appearance-default.is-variant-bold {
-  background-color: var(--background-neutral-bold);
-  color: var(--text-inverse);
+  --badge-appearance-background: var(--background-neutral-bold);
+  --badge-appearnce-color: var(--text-inverse);
 }
 .ev-badge--content.is-appearance-default.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-neutral-bold);
+  --badge-appearance-background: transparent;
+  --badge-appearance-border: 1px solid var(--background-neutral-bold);
 }
 .ev-badge--content.is-appearance-default.is-variant-outlined.is-active {
-  background-color: var(--background-neutral);
+  --badge-appearance-background: var(--background-neutral);
 }
 .ev-badge--content.is-appearance-default.is-variant-subtle {
-  background-color: var(--background-neutral-subtle);
+  --badge-appearance-background: var(--background-neutral-subtle);
 }
 .ev-badge--content.is-appearance-danger {
-  background-color: var(--background-danger);
-  color: var(--text-danger);
+  --badge-appearance-background: var(--background-danger);
+  --badge-appearance-color: var(--text-danger);
 }
 .ev-badge--content.is-appearance-danger.is-variant-bold {
-  background-color: var(--background-danger-bold);
-  color: var(--text-inverse);
+  --badge-appearance-background: var(--background-danger-bold);
+  --badge-appearance-color: var(--text-inverse);
 }
 .ev-badge--content.is-appearance-danger.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-danger-bold);
+  --badge-appearance-background: transparent;
+  --badge-appearance-border: 1px solid var(--background-danger-bold);
 }
 .ev-badge--content.is-appearance-danger.is-variant-outlined.is-active {
-  background-color: var(--background-danger);
+  --badge-appearance-background: var(--background-danger);
 }
 .ev-badge--content.is-appearance-danger.is-variant-subtle {
-  background-color: transparent;
+  --badge-appearance-background: transparent;
 }
 .ev-badge--content.is-appearance-information {
-  background-color: var(--background-information);
-  color: var(--text-information);
+  --badge-appearance-background: var(--background-information);
+  --badge-appearance-color: var(--text-information);
 }
 .ev-badge--content.is-appearance-information.is-variant-bold {
-  background-color: var(--background-information-bold);
-  color: var(--text-inverse);
+  --badge-appearance-background: var(--background-information-bold);
+  --badge-appearance-color: var(--text-inverse);
 }
 .ev-badge--content.is-appearance-information.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-information-bold);
+  --badge-appearance-background: transparent;
+  --badge-appearance-border: 1px solid var(--background-information-bold);
 }
 .ev-badge--content.is-appearance-information.is-variant-outlined.is-active {
-  background-color: var(--background-information);
+  --badge-appearance-background: var(--background-information);
 }
 .ev-badge--content.is-appearance-information.is-variant-subtle {
-  background-color: transparent;
+  --badge-appearance-background: transparent;
 }
 .ev-badge--content.is-appearance-notice {
-  background-color: var(--background-notice);
-  color: var(--text-notice);
+  --badge-appearance-background: var(--background-notice);
+  --badge-appearance-color: var(--text-notice);
 }
 .ev-badge--content.is-appearance-notice.is-variant-bold {
-  background-color: var(--background-notice-bold);
-  color: var(--text-inverse);
+  --badge-appearance-background: var(--background-notice-bold);
+  --badge-appearance-color: var(--text-inverse);
 }
 .ev-badge--content.is-appearance-notice.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-notice-bold);
+  --badge-appearance-background: transparent;
+  --badge-appearance-border: 1px solid var(--background-notice-bold);
 }
 .ev-badge--content.is-appearance-notice.is-variant-outlined.is-active {
-  background-color: var(--background-notice);
+  --badge-appearance-background: var(--background-notice);
 }
 .ev-badge--content.is-appearance-notice.is-variant-subtle {
-  background-color: transparent;
+  --badge-appearance-background: transparent;
 }
 .ev-badge--content.is-appearance-primary {
-  background-color: var(--background-brand);
-  color: var(--text-brand);
+  --badge-appearance-background: var(--background-brand);
+  --badge-appearance-color: var(--text-brand);
 }
 .ev-badge--content.is-appearance-primary.is-variant-bold {
-  background-color: var(--background-brand-bold);
-  color: var(--text-inverse);
+  --badge-appearance-background: var(--background-brand-bold);
+  --badge-appearance-color: var(--text-inverse);
 }
 .ev-badge--content.is-appearance-primary.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-brand-bold);
+  --badge-appearance-background: transparent;
+  --badge-appearance-border: 1px solid var(--background-brand-bold);
 }
 .ev-badge--content.is-appearance-primary.is-variant-outlined.is-active {
-  background-color: var(--background-brand);
+  --badge-appearance-background: var(--background-brand);
 }
 .ev-badge--content.is-appearance-primary.is-variant-subtle {
-  background-color: transparent;
+  --badge-appearance-background: transparent;
 }
 .ev-badge--content.is-appearance-success {
-  background-color: var(--background-success);
-  color: var(--text-success);
+  --badge-appearance-background: var(--background-success);
+  --badge-appearance-color: var(--text-success);
 }
 .ev-badge--content.is-appearance-success.is-variant-bold {
-  background-color: var(--background-success-bold);
-  color: var(--text-inverse);
+  --badge-appearance-background: var(--background-success-bold);
+  --badge-appearance-color: var(--text-inverse);
 }
 .ev-badge--content.is-appearance-success.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-success-bold);
+  --badge-appearance-background: transparent;
+  --badge-appearance-border: 1px solid var(--background-success-bold);
 }
 .ev-badge--content.is-appearance-success.is-variant-outlined.is-active {
-  background-color: var(--background-success);
+  --badge-appearance-background: var(--background-success);
 }
 .ev-badge--content.is-appearance-success.is-variant-subtle {
-  background-color: transparent;
+  --badge-appearance-background: transparent;
 }
 .ev-badge--content.is-appearance-warning {
-  background-color: var(--background-warning);
-  color: var(--text-warning);
+  --badge-appearance-background: var(--background-warning);
+  --badge-appearance-color: var(--text-warning);
 }
 .ev-badge--content.is-appearance-warning.is-variant-bold {
-  background-color: var(--background-warning-bold);
-  color: var(--text-inverse);
+  --badge-appearance-background: var(--background-warning-bold);
+  --badge-appearance-color: var(--text-inverse);
 }
 .ev-badge--content.is-appearance-warning.is-variant-outlined {
-  background: transparent;
-  border-color: var(--background-warning-bold);
+  --badge-appearance-background: transparent;
+  --badge-appearance-border: 1px solid var(--background-warning-bold);
 }
 .ev-badge--content.is-appearance-warning.is-variant-outlined.is-active {
-  background-color: var(--background-warning);
+  --badge-appearance-background: var(--background-warning);
 }
 .ev-badge--content.is-appearance-warning.is-variant-subtle {
-  background-color: transparent;
+  --badge-appearance-background: transparent;
 }
 /* Inline */
@@ -5471,126 +5926,32 @@ html.ev-overlay-scroll-blocked {
 .transition-notification-leave-active {
   position: absolute;
   width: 400px;
-}/**
-    # Breakpoint Min
- */
-/*
-    # Breakpoint Infix
- */
-/**
-    # Map Deep Get
- */
-/**
-    # Map Deep Merge
-    Adapted from https://gist.github.com/pentzzsolt/4949bbd7691d43d00616dc4f1451cae9#file-non-destructive-map-merge-4-scss
- */
-/**
-    # Map Deep Set
- */
-/**
-    # Round Even
- */
-/**
-    # Scalable
-    Calculate a clamp() function to offer scaling between
-    the smallest size ($min) from the smallest screen size ($minAt)
-    and the largest size ($max) at the largest screen size ($maxAt).
-    The calculation should look like this:
-    clamp(min, calc(min + (max - min) * ((100vw - minAt) / divider)), max);
- */
-/*
-    # Strip Unit
-    Remove units from a string like '10px', converting to a number (10).
- */
-/**
-    # Colors
-    Note, HEXA values are quoted to prevent SASS outputting values as RGBA.
- */
-/**
-    # token
- */
-/*
-  # Variables
-  Includes the following sections:
-  - Breakpoints
-  - Spacers
-  - Text
- */
-/*
-    ## Breakpoints
-    Breakpoints should always be defined in `px` units.
-    By default we have five breakpoints for:
-    - `xs` - Extra Small: phones in portrait
-    - `sm` - Small: Phones in landscape
-    - `md` - Medium: Tablets in portrait or small notebooks
-    - `lg` - Large: Desktops & tablets in landscape. More than accommodates scroll bars.
-    - `xl` - Extra Large - Large Desktops, including 1080p
-    - `xxl` - Extra Large - 4k and ultra-wide screens
-    Scaling, such as font-size scaling, is done between `sm-min` and `xl-min`.
- */
-/**
-    ## Display Breakpoints
-    Avoid using '*-and-down' where possible
- */
-/*
-    ## Spacers
-    Spacers in Evance are based on a percentage of `1rem` (based on `16px`).
- */
-/**
-    ## Text
- */
-.ev-card-content {
+}.ev-infinite-scroll {
   display: flex;
-  flex-wrap: nowrap;
-  gap: var(--spacer-150);
-}
-.ev-card-content--icon {
-  flex: 0;
-}
-.ev-card-content--detail {
-  flex: 1;
-  min-width: 0;
-}
-.ev-card-content.is-size-small {
-  padding: var(--padding-small);
-}
-.ev-card-content.is-size-medium {
-  padding: var(--padding-medium);
-}
-.ev-card-content.is-size-medium .ev-card-content--icon {
-  padding-top: clamp(0rem, calc(0rem + 0.125 * ((100vw - 600px) / 62.5)), 0.125rem);
-}
-.ev-card-content.is-size-large {
-  padding: var(--padding-large);
 }
-.ev-card-content.is-size-large .ev-card-content--icon {
-  padding-top: clamp(0rem, calc(0rem + 0.25 * ((100vw - 600px) / 62.5)), 0.25rem);
+.ev-infinite-scroll--horizontal {
+  flex-direction: row;
+  overflow-x: auto;
 }
-.ev-card-content.is-size-x-large {
-  padding: var(--padding-x-large);
+.ev-infinite-scroll--horizontal .ev-infinite-scroll-intersect {
+  height: 100%;
+  width: 1px;
 }
-.ev-card-content.is-size-x-large .ev-card-content--icon {
-  padding-top: clamp(0.125rem, calc(0.125rem + 0.375 * ((100vw - 600px) / 62.5)), 0.5rem);
+.ev-infinite-scroll--vertical {
+  flex-direction: column;
+  overflow-y: auto;
 }
-.ev-text {
-    --max-lines: var(--1306c720);
+.ev-infinite-scroll--vertical .ev-infinite-scroll-intersect {
+  height: 1px;
+  width: 100%;
 }
-.ev-select .ev-textfield--input {
+.ev-infinite-scroll-side {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: var(--padding-medium);
+}.ev-select .ev-textfield--input {
   padding-block: 6px;
 }
 .ev-select .ev-textfield--input > input {
@@ -17260,7 +17621,7 @@ table {
  */
 :root {
   /* Font Stacks */
-  --system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
+  --system-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
   --monospace-font: ui-monospace, Menlo, Monaco, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", "Ubuntu Monospace", "Courier New", monospace;
   /* Font weights */
   --font-weight-regular: 400;
@@ -17472,63 +17833,63 @@ table {
     /* General */
     --color-primary: #814EFA;
     /* Surfaces */
-    --surface-default: #EFF2F9 /* neutral.100 */;
-    --surface-overlay: #FFFFFF /* neutral.0 */;
+    --surface-default: #EFF2F9 /* neutral-100 */;
+    --surface-overlay: #FFFFFF /* neutral-0 */;
     --surface-overlay-shadow: 0px 8px 12px #091E4226, 0px 0px 1px #091E424F;
-    --surface-panel: #FFFFFF /* neutral.0 */;
-    --surface-sunken: #D8DCE6 /* neutral.200 */;
+    --surface-panel: #FFFFFF /* neutral-0 */;
+    --surface-sunken: #D8DCE6 /* neutral-200 */;
     /* Backgrounds */
-    --background-brand: #7C4EFA26 /* purple.200A */;
-    --background-brand-hovered: #7C4EFA40 /* purple.300A */;
-    --background-brand-pressed: #7C4EFA54 /* purple.400A */;
-    --background-brand-bold: #814EFA /* purple.600 */;
-    --background-brand-bold-hovered: #7647E4 /* purple.700 */;
-    --background-brand-bold-pressed: #5C37B2 /* purple.800 */;
-    --background-danger: #F0414126 /* red.200A */;
-    --background-danger-hovered: #F0414140 /* red.300A */;
-    --background-danger-pressed: #F0414154 /* red.400A */;
-    --background-danger-bold: #F04141 /* red.600 */;
-    --background-danger-bold-hovered: #DA3B3B /* red.700 */;
-    --background-danger-bold-pressed: #AA2E2E /* red.800 */;
-    --background-information: #2A63EA26;
-    --background-information-hovered: #2A63EA40;
-    --background-information-pressed: #2A63EA54;
-    --background-information-bold: #2A82EA;
-    --background-information-bold-hovered: #265BD5;
-    --background-information-bold-pressed: #1E47A6;
-    --background-neutral: #0A14330F;
-    --background-neutral-hovered: #0A14331F;
-    --background-neutral-pressed: #0A14333D;
-    --background-neutral-bold: #959BAD;
-    --background-neutral-bold-hovered: #7B829A;
-    --background-neutral-bold-pressed: #696F87;
+    --background-brand: #7C4EFA26 /* purple-200A */;
+    --background-brand-hovered: #7C4EFA40 /* purple-300A */;
+    --background-brand-pressed: #7C4EFA54 /* purple-400A */;
+    --background-brand-bold: #814EFA /* purple-600 */;
+    --background-brand-bold-hovered: #7647E4 /* purple-700 */;
+    --background-brand-bold-pressed: #5C37B2 /* purple-800 */;
+    --background-danger: #F0414126 /* red-200A */;
+    --background-danger-hovered: #F0414140 /* red-300A */;
+    --background-danger-pressed: #F0414154 /* red-400A */;
+    --background-danger-bold: #F04141 /* red-600 */;
+    --background-danger-bold-hovered: #DA3B3B /* red-700 */;
+    --background-danger-bold-pressed: #AA2E2E /* red-800 */;
+    --background-information: #2A63EA26 /* blue-200A */;
+    --background-information-hovered: #2A63EA40 /* blue-300A */;
+    --background-information-pressed: #2A63EA54 /* blue-400A */;
+    --background-information-bold: #2A63EA /* blue-600 */;
+    --background-information-bold-hovered: #265BD5 /* blue-700 */;
+    --background-information-bold-pressed: #1E47A6 /* blue-800 */;
+    --background-neutral: #052A800D /* neutral-200A */;
+    --background-neutral-hovered: #0421661C /* neutral-300A */;
+    --background-neutral-pressed: #03194D3B /* neutral-400A */;
+    --background-neutral-bold: #959BAD /* neutral-500 */;
+    --background-neutral-bold-hovered: #7B829A /* neutral-600 */;
+    --background-neutral-bold-pressed: #696F87 /* neutral-700 */;
     --background-neutral-subtle: transparent;
-    --background-neutral-subtle-hovered: #0A14330F;
-    --background-neutral-subtle-pressed: #0A14331F;
-    --background-notice: #7C4EFA26;
-    --background-notice-hovered: #7C4EFA40;
-    --background-notice-pressed: #7C4EFA54;
-    --background-notice-bold: #814EFA;
-    --background-notice-bold-hovered: #7647E4;
-    --background-notice-bold-pressed: #5C37B2;
-    --background-selected: #7C4EFA26;
-    --background-selected-hovered: #7C4EFA40;
-    --background-selected-pressed: #7C4EFA54;
-    --background-selected-bold: #814EFA;
-    --background-selected-bold-hovered: #7647E4;
-    --background-selected-bold-pressed: #5C37B2;
-    --background-success: #13AE8426;
-    --background-success-hovered: #13AE8440;
-    --background-success-pressed: #13AE8454;
-    --background-success-bold: #13AE84;
-    --background-success-bold-hovered: #119E78;
-    --background-success-bold-pressed: #0D7C5E;
-    --background-warning: #FF8C2126;
-    --background-warning-hovered: #FF8C2140;
-    --background-warning-pressed: #FF8C2154;
-    --background-warning-bold: #FF8C21;
-    --background-warning-bold-hovered: #E87F1E;
-    --background-warning-bold-pressed: #B56317;
+    --background-neutral-subtle-hovered: #052A800D /* neutral-200A */;
+    --background-neutral-subtle-pressed: #0421661C /* neutral-300A */;
+    --background-notice: #7C4EFA26 /* purple-200A */;
+    --background-notice-hovered: #7C4EFA40 /* purple-300A */;
+    --background-notice-pressed: #7C4EFA54 /* purple-400A */;
+    --background-notice-bold: #814EFA /* purple-600 */;
+    --background-notice-bold-hovered: #7647E4 /* purple-700 */;
+    --background-notice-bold-pressed: #5C37B2 /* purple-800 */;
+    --background-selected: #7C4EFA26 /* purple-200A */;
+    --background-selected-hovered: #7C4EFA40 /* purple-300A */;
+    --background-selected-pressed: #7C4EFA54 /* purple-400A */;
+    --background-selected-bold: #814EFA /* purple-600 */;
+    --background-selected-bold-hovered: #7647E4 /* purple-700 */;
+    --background-selected-bold-pressed: #5C37B2 /* purple-800 */;
+    --background-success: #13AE8426 /* green-200A */;
+    --background-success-hovered: #13AE8440 /* green-300A */;
+    --background-success-pressed: #13AE8454 /* green-400A */;
+    --background-success-bold: #13AE84 /* green-600 */;
+    --background-success-bold-hovered: #119E78 /* green-700 */;
+    --background-success-bold-pressed: #0D7C5E /* green-800 */;
+    --background-warning: #FF8C2126 /* orange-200A */;
+    --background-warning-hovered: #FF8C2140 /* orange-300A */;
+    --background-warning-pressed: #FF8C2154 /* orange-400A */;
+    --background-warning-bold: #FF8C21 /* orange-600 */;
+    --background-warning-bold-hovered: #E87F1E /* orange-700 */;
+    --background-warning-bold-pressed: #B56317 /* orange-800 */;
     --background-veil: #0A14337D;
     --background-inverse: #EFF2F926;
     --background-inverse-hovered: #EFF2F940;
@@ -17537,8 +17898,8 @@ table {
     --background-inverse-bold-hovered: #EFF2F9E6;
     --background-inverse-bold-pressed: #EFF2F9;
     /* Text */
-    --eyebrow-default: #A4ABC1;
-    --heading-default: #212945;
+    --eyebrow-default: #696F87 /* neutral-700 */;
+    --heading-default: #13121C /* neutral-1100 */;
     --heading-on-brand: #212945;
     --heading-on-brand-bold: #FFFFFF;
     --heading-on-danger: #212945;
@@ -17553,41 +17914,44 @@ table {
     --heading-on-success-bold: #FFFFFF;
     --heading-on-warning: #212945;
     --heading-on-warning-bold: #FFFFFF;
-    --text-default: #535A74;
-    --text-brand: #7647E4;
+    --text-default: #353B4E /* neutral-900 */;
+    --text-brand: #814EFA /* purple-600 */;
     --text-on-brand: #5D6788;
     --text-on-brand-bold: #F3F5F9;
-    --text-subtle: #8B8DA7;
-    --text-danger: #F04141;
+    --text-subtle: #353B4E /* neutral-900 */;
+    --text-danger: #DA3B3B /* red-700 */;
     --text-on-danger: #5D6788;
     --text-on-danger-bold: #F3F5F9;
-    --text-information: #2A82EA;
+    --text-information: #265BD5 /* blue-700 */;
     --text-on-information: #5D6788;
     --text-on-information-bold: #F3F5F9;
     --text-muted: #747794;
     --text-on-muted: #5D6788;
     --text-on-muted-bold: #F3F5F9;
-    --text-notice: #814EFA;
+    --text-notice: #7647E4 /* purple-700 */;
     --text-on-notice: #5D6788;
     --text-on-notice-bold: #F3F5F9;
-    --text-selected: #814EFA;
-    --text-success: #13AE84;
+    --text-selected: #7647E4 /* purple-700 */;
+    --text-success: #119E78 /* green-700 */;
     --text-on-success: #5D6788;
     --text-on-success-bold: #F3F5F9;
-    --text-warning: #FF7A00;
+    --text-warning: #E87F1E /* orange-700 */;
     --text-on-warning: #5D6788;
     --text-on-warning-bold: #F3F5F9;
-    --link-default: #814EFA;
-    --link-default-hover: #9772FF;
-    --text-inverse: #EFF2F9;
+    --text-inverse: #EFF2F9 /* neutral-100 */;
     --text-on-inverse: #535A74;
+    --link-default: #814EFA /* purple-600 */;
+    --link-default-hover: #9873FF /* purple-500 */;
+    --link-default-pressed: #7647E4 /* purple-700 */;
+    --link-default-visited: #5C37B2 /* purple-800 */;
     /* Borders */
-    --border: #0A14331F;
-    --border-danger: #F04141;
-    --border-focused: #814EFA;
-    --border-input: #0A14331F;
+    --border: #0421661C /* neutral-300A */;
+    --border-danger: #F04141 /* red-600 */;
+    --border-focused: #814EFA /* purple-600 */;
+    --border-input: #0421661C /* neutral-300A */;
     --border-muted: #091E4226;
-    --border-selected: #814EFA;
+    --border-selected: #814EFA /* purple-600 */;
+    --border-success: #13AE84 /* green-600 */;
     /* Input */
     --input-background: transparent;
     --input-border-color: #C4C5D4;
@@ -17748,63 +18112,63 @@ table {
   /* General */
   --color-primary: #814EFA;
   /* Surfaces */
-  --surface-default: #EFF2F9 /* neutral.100 */;
-  --surface-overlay: #FFFFFF /* neutral.0 */;
+  --surface-default: #EFF2F9 /* neutral-100 */;
+  --surface-overlay: #FFFFFF /* neutral-0 */;
   --surface-overlay-shadow: 0px 8px 12px #091E4226, 0px 0px 1px #091E424F;
-  --surface-panel: #FFFFFF /* neutral.0 */;
-  --surface-sunken: #D8DCE6 /* neutral.200 */;
+  --surface-panel: #FFFFFF /* neutral-0 */;
+  --surface-sunken: #D8DCE6 /* neutral-200 */;
   /* Backgrounds */
-  --background-brand: #7C4EFA26 /* purple.200A */;
-  --background-brand-hovered: #7C4EFA40 /* purple.300A */;
-  --background-brand-pressed: #7C4EFA54 /* purple.400A */;
-  --background-brand-bold: #814EFA /* purple.600 */;
-  --background-brand-bold-hovered: #7647E4 /* purple.700 */;
-  --background-brand-bold-pressed: #5C37B2 /* purple.800 */;
-  --background-danger: #F0414126 /* red.200A */;
-  --background-danger-hovered: #F0414140 /* red.300A */;
-  --background-danger-pressed: #F0414154 /* red.400A */;
-  --background-danger-bold: #F04141 /* red.600 */;
-  --background-danger-bold-hovered: #DA3B3B /* red.700 */;
-  --background-danger-bold-pressed: #AA2E2E /* red.800 */;
-  --background-information: #2A63EA26;
-  --background-information-hovered: #2A63EA40;
-  --background-information-pressed: #2A63EA54;
-  --background-information-bold: #2A82EA;
-  --background-information-bold-hovered: #265BD5;
-  --background-information-bold-pressed: #1E47A6;
-  --background-neutral: #0A14330F;
-  --background-neutral-hovered: #0A14331F;
-  --background-neutral-pressed: #0A14333D;
-  --background-neutral-bold: #959BAD;
-  --background-neutral-bold-hovered: #7B829A;
-  --background-neutral-bold-pressed: #696F87;
+  --background-brand: #7C4EFA26 /* purple-200A */;
+  --background-brand-hovered: #7C4EFA40 /* purple-300A */;
+  --background-brand-pressed: #7C4EFA54 /* purple-400A */;
+  --background-brand-bold: #814EFA /* purple-600 */;
+  --background-brand-bold-hovered: #7647E4 /* purple-700 */;
+  --background-brand-bold-pressed: #5C37B2 /* purple-800 */;
+  --background-danger: #F0414126 /* red-200A */;
+  --background-danger-hovered: #F0414140 /* red-300A */;
+  --background-danger-pressed: #F0414154 /* red-400A */;
+  --background-danger-bold: #F04141 /* red-600 */;
+  --background-danger-bold-hovered: #DA3B3B /* red-700 */;
+  --background-danger-bold-pressed: #AA2E2E /* red-800 */;
+  --background-information: #2A63EA26 /* blue-200A */;
+  --background-information-hovered: #2A63EA40 /* blue-300A */;
+  --background-information-pressed: #2A63EA54 /* blue-400A */;
+  --background-information-bold: #2A63EA /* blue-600 */;
+  --background-information-bold-hovered: #265BD5 /* blue-700 */;
+  --background-information-bold-pressed: #1E47A6 /* blue-800 */;
+  --background-neutral: #052A800D /* neutral-200A */;
+  --background-neutral-hovered: #0421661C /* neutral-300A */;
+  --background-neutral-pressed: #03194D3B /* neutral-400A */;
+  --background-neutral-bold: #959BAD /* neutral-500 */;
+  --background-neutral-bold-hovered: #7B829A /* neutral-600 */;
+  --background-neutral-bold-pressed: #696F87 /* neutral-700 */;
   --background-neutral-subtle: transparent;
-  --background-neutral-subtle-hovered: #0A14330F;
-  --background-neutral-subtle-pressed: #0A14331F;
-  --background-notice: #7C4EFA26;
-  --background-notice-hovered: #7C4EFA40;
-  --background-notice-pressed: #7C4EFA54;
-  --background-notice-bold: #814EFA;
-  --background-notice-bold-hovered: #7647E4;
-  --background-notice-bold-pressed: #5C37B2;
-  --background-selected: #7C4EFA26;
-  --background-selected-hovered: #7C4EFA40;
-  --background-selected-pressed: #7C4EFA54;
-  --background-selected-bold: #814EFA;
-  --background-selected-bold-hovered: #7647E4;
-  --background-selected-bold-pressed: #5C37B2;
-  --background-success: #13AE8426;
-  --background-success-hovered: #13AE8440;
-  --background-success-pressed: #13AE8454;
-  --background-success-bold: #13AE84;
-  --background-success-bold-hovered: #119E78;
-  --background-success-bold-pressed: #0D7C5E;
-  --background-warning: #FF8C2126;
-  --background-warning-hovered: #FF8C2140;
-  --background-warning-pressed: #FF8C2154;
-  --background-warning-bold: #FF8C21;
-  --background-warning-bold-hovered: #E87F1E;
-  --background-warning-bold-pressed: #B56317;
+  --background-neutral-subtle-hovered: #052A800D /* neutral-200A */;
+  --background-neutral-subtle-pressed: #0421661C /* neutral-300A */;
+  --background-notice: #7C4EFA26 /* purple-200A */;
+  --background-notice-hovered: #7C4EFA40 /* purple-300A */;
+  --background-notice-pressed: #7C4EFA54 /* purple-400A */;
+  --background-notice-bold: #814EFA /* purple-600 */;
+  --background-notice-bold-hovered: #7647E4 /* purple-700 */;
+  --background-notice-bold-pressed: #5C37B2 /* purple-800 */;
+  --background-selected: #7C4EFA26 /* purple-200A */;
+  --background-selected-hovered: #7C4EFA40 /* purple-300A */;
+  --background-selected-pressed: #7C4EFA54 /* purple-400A */;
+  --background-selected-bold: #814EFA /* purple-600 */;
+  --background-selected-bold-hovered: #7647E4 /* purple-700 */;
+  --background-selected-bold-pressed: #5C37B2 /* purple-800 */;
+  --background-success: #13AE8426 /* green-200A */;
+  --background-success-hovered: #13AE8440 /* green-300A */;
+  --background-success-pressed: #13AE8454 /* green-400A */;
+  --background-success-bold: #13AE84 /* green-600 */;
+  --background-success-bold-hovered: #119E78 /* green-700 */;
+  --background-success-bold-pressed: #0D7C5E /* green-800 */;
+  --background-warning: #FF8C2126 /* orange-200A */;
+  --background-warning-hovered: #FF8C2140 /* orange-300A */;
+  --background-warning-pressed: #FF8C2154 /* orange-400A */;
+  --background-warning-bold: #FF8C21 /* orange-600 */;
+  --background-warning-bold-hovered: #E87F1E /* orange-700 */;
+  --background-warning-bold-pressed: #B56317 /* orange-800 */;
   --background-veil: #0A14337D;
   --background-inverse: #EFF2F926;
   --background-inverse-hovered: #EFF2F940;
@@ -17813,8 +18177,8 @@ table {
   --background-inverse-bold-hovered: #EFF2F9E6;
   --background-inverse-bold-pressed: #EFF2F9;
   /* Text */
-  --eyebrow-default: #A4ABC1;
-  --heading-default: #212945;
+  --eyebrow-default: #696F87 /* neutral-700 */;
+  --heading-default: #13121C /* neutral-1100 */;
   --heading-on-brand: #212945;
   --heading-on-brand-bold: #FFFFFF;
   --heading-on-danger: #212945;
@@ -17829,41 +18193,44 @@ table {
   --heading-on-success-bold: #FFFFFF;
   --heading-on-warning: #212945;
   --heading-on-warning-bold: #FFFFFF;
-  --text-default: #535A74;
-  --text-brand: #7647E4;
+  --text-default: #353B4E /* neutral-900 */;
+  --text-brand: #814EFA /* purple-600 */;
   --text-on-brand: #5D6788;
   --text-on-brand-bold: #F3F5F9;
-  --text-subtle: #8B8DA7;
-  --text-danger: #F04141;
+  --text-subtle: #353B4E /* neutral-900 */;
+  --text-danger: #DA3B3B /* red-700 */;
   --text-on-danger: #5D6788;
   --text-on-danger-bold: #F3F5F9;
-  --text-information: #2A82EA;
+  --text-information: #265BD5 /* blue-700 */;
   --text-on-information: #5D6788;
   --text-on-information-bold: #F3F5F9;
   --text-muted: #747794;
   --text-on-muted: #5D6788;
   --text-on-muted-bold: #F3F5F9;
-  --text-notice: #814EFA;
+  --text-notice: #7647E4 /* purple-700 */;
   --text-on-notice: #5D6788;
   --text-on-notice-bold: #F3F5F9;
-  --text-selected: #814EFA;
-  --text-success: #13AE84;
+  --text-selected: #7647E4 /* purple-700 */;
+  --text-success: #119E78 /* green-700 */;
   --text-on-success: #5D6788;
   --text-on-success-bold: #F3F5F9;
-  --text-warning: #FF7A00;
+  --text-warning: #E87F1E /* orange-700 */;
   --text-on-warning: #5D6788;
   --text-on-warning-bold: #F3F5F9;
-  --link-default: #814EFA;
-  --link-default-hover: #9772FF;
-  --text-inverse: #EFF2F9;
+  --text-inverse: #EFF2F9 /* neutral-100 */;
   --text-on-inverse: #535A74;
+  --link-default: #814EFA /* purple-600 */;
+  --link-default-hover: #9873FF /* purple-500 */;
+  --link-default-pressed: #7647E4 /* purple-700 */;
+  --link-default-visited: #5C37B2 /* purple-800 */;
   /* Borders */
-  --border: #0A14331F;
-  --border-danger: #F04141;
-  --border-focused: #814EFA;
-  --border-input: #0A14331F;
+  --border: #0421661C /* neutral-300A */;
+  --border-danger: #F04141 /* red-600 */;
+  --border-focused: #814EFA /* purple-600 */;
+  --border-input: #0421661C /* neutral-300A */;
   --border-muted: #091E4226;
-  --border-selected: #814EFA;
+  --border-selected: #814EFA /* purple-600 */;
+  --border-success: #13AE84 /* green-600 */;
   /* Input */
   --input-background: transparent;
   --input-border-color: #C4C5D4;
@@ -18051,6 +18418,12 @@ body ::-webkit-scrollbar:hover {
   background-color: transparent;
   box-shadow: none;
 }
+/**
+    # Is Clickable
+ */
+.is-clickable {
+  cursor: pointer;
+}
 /**
     # Is Scrollable
@@ -18150,6 +18523,15 @@ body {
   font-family: var(--system-font);
   font-size: var(--text-size-medium);
   line-height: 1.5;
+  -webkit-tap-highlight-color: transparent;
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  tab-size: 4;
+  text-rendering: geometricPrecision;
 }
 .ev-theme, body {
   background-color: var(--surface-default);
@@ -18243,12 +18625,12 @@ h6, .heading-6 {
 .text-eyebrow {
   color: var(--eyebrow-default);
   font-family: var(--text-eyebrow-typeface);
-  font-size: var(--text-eyebrow-size);
+  font-size: var(--text-size-eyebrow);
   font-style: normal;
   font-weight: var(--text-eyebrow-weight);
   text-transform: var(--text-eyebrow-transform);
-  margin-bottom: 0.5em;
-  letter-spacing: 0.0625rem;
+  margin-bottom: 0;
+  letter-spacing: 0.1em;
 }
 /**
     # Text sizes