@vonage/vivid 3.43.0 → 3.44.0

package/style.css

@@ -1,13 +1,14 @@
 /**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
 }
 
 .base {
-  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);
+  --_text-field-gutter-start: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);
+  --_text-field-gutter-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);
   --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);
   display: inline-grid;
   width: 100%;
@@ -54,6 +55,26 @@
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: transparent;
 }
+.base:where(.error):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-alert-50);
+  --_appearance-color-outline: var(--vvd-color-alert-500);
+}
+.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-alert-50);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.success):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-success-50);
+  --_appearance-color-outline: var(--vvd-color-success-500);
+}
+.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-success-50);
+  --_appearance-color-outline: transparent;
+}
 .base.connotation-success {
   /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */
   --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));
@@ -110,8 +131,12 @@
 
 .label:not(slot),
 .label::slotted(label) {
-  color: var(--vvd-color-canvas-text);
-  contain: inline-size;
+  /* As label is in light dom, use !important and initial to prevent values getting overridden by global CSS resets etc. */
+  box-sizing: initial !important;
+  padding: initial !important;
+  margin: initial !important;
+  color: var(--vvd-color-canvas-text) !important;
+  contain: inline-size !important;
   font: var(--vvd-typography-base);
   grid-column: 1/4;
   grid-row: 1;
@@ -172,23 +197,25 @@
 }
 
 .control:not(slot), .control::slotted(input) {
-  width: 100%;
-  box-sizing: border-box;
-  border: 0 none;
-  appearance: none; /* for box-shadow visibility on IOS */
-  background-color: transparent;
-  block-size: 100%;
-  border-radius: inherit;
-  color: inherit;
+  /* As input is in light dom, use !important and initial to prevent values getting overridden by global CSS resets etc. */
+  width: 100% !important;
+  box-sizing: border-box !important;
+  border: 0 none !important;
+  margin: initial !important;
+  appearance: none !important; /* for box-shadow visibility on IOS */
+  background-color: transparent !important;
+  block-size: 100% !important;
+  border-radius: inherit !important;
+  color: inherit !important;
   font: inherit;
-  padding-block: 0;
-  padding-inline-end: var(--_text-field-gutter);
-  padding-inline-start: var(--_text-field-gutter);
+  padding-block: 0 !important;
+  padding-inline-end: var(--_text-field-gutter-end) !important;
+  padding-inline-start: var(--_text-field-gutter-start) !important;
 }
 .control:not(slot):disabled, .control::slotted(input:disabled) {
-  cursor: not-allowed;
-  opacity: 1; /* 2. correct opacity on iOS */
-  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */
+  cursor: not-allowed !important;
+  opacity: 1 !important; /* 2. correct opacity on iOS */
+  -webkit-text-fill-color: var(--_appearance-color-text) !important; /* 1. sets text fill to current `color` for safari */
 }
 .control:not(slot)::placeholder {
   opacity: 1 !important; /* 2. correct opacity on iOS */
@@ -198,7 +225,7 @@
   outline: none;
 }
 .has-icon .control:not(slot), .has-icon .control::slotted(input) {
-  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);
+  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2) !important;
 }
 
 .icon {
@@ -207,7 +234,7 @@
   color: var(--_low-ink-color);
   font-size: var(--_text-field-icon-size);
   inset-block-start: 50%;
-  inset-inline-start: calc(100% + var(--_text-field-gutter));
+  inset-inline-start: calc(100% + var(--_text-field-gutter-start));
   line-height: 1;
   transform: translateY(-50%);
 }
@@ -319,7 +346,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   inline-size: inherit;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: contents;
@@ -337,7 +364,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   outline-offset: -2px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .message {
   display: flex;
@@ -362,7 +389,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   color: var(--vvd-color-alert-500);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: contents;
@@ -499,7 +526,7 @@ p {
   font: var(--vvd-typography-base-condensed);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   display: flex;
@@ -550,7 +577,7 @@ p {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -673,7 +700,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
@@ -760,7 +787,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
@@ -824,7 +851,7 @@ label {
   margin-block: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .control {
   position: fixed;
@@ -927,7 +954,7 @@ label {
   padding-inline-start: 8px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
@@ -1296,7 +1323,7 @@ slot[name=icon] {
   filter: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   align-items: center;
@@ -1419,7 +1446,7 @@ slot[name=icon] {
   }
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   display: inline-flex;
@@ -1445,7 +1472,7 @@ slot[name=icon] {
   min-inline-size: 32px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   display: inline-flex;
@@ -1556,7 +1583,7 @@ slot[name=icon] {
   object-fit: cover;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
@@ -1746,7 +1773,7 @@ slot[name=icon] {
   order: 1;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: block;
@@ -1827,7 +1854,7 @@ slot[name=icon] {
   margin-inline-end: 8px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   display: flex;
@@ -1867,7 +1894,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: flex;
@@ -1968,7 +1995,7 @@ slot[name=icon] {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: block;
@@ -2017,7 +2044,7 @@ header {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .control {
   position: relative;
@@ -2095,7 +2122,7 @@ header {
   }
 }
 .control.size-expanded {
-  --_fab-border-radius: 30px;
+  --_fab-border-radius: 40px;
   --_fab-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));
 }
 .control:not(.size-expanded) {
@@ -2162,7 +2189,7 @@ slot[name=icon] {
   --focus-stroke-gap-color: transparent;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   z-index: 1;
@@ -2304,7 +2331,7 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .control {
   position: relative;
@@ -2407,7 +2434,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .control {
   position: relative;
@@ -2491,7 +2518,7 @@ slot[name=icon] {
   line-height: 1;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   display: flex;
@@ -2581,7 +2608,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .control {
   display: inline-flex;
@@ -2630,7 +2657,7 @@ slot[name=icon] {
   inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   height: 6px;
@@ -2687,7 +2714,7 @@ slot[name=icon] {
   background-color: var(--vvd-color-neutral-100);
 }
 .base:not(.shape-sharp) .progress {
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 .indeterminate {
@@ -2782,7 +2809,7 @@ slot[name=icon] {
   }
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 @supports selector(:focus-visible) {
   .base:focus-visible {
@@ -2871,8 +2898,16 @@ slot[name=icon] {
   inset-inline-end: var(--selectable-box-spacing, 16px);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
+:host {
+  display: block;
+}
+
+.side-drawer-app-content {
+  block-size: 100%;
+}
+
 .control {
   position: fixed;
   z-index: 1;
@@ -2918,7 +2953,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
@@ -3102,7 +3137,9 @@ slot[name=icon] {
 }
 
 .control {
+  border-bottom-left-radius: var(--_border-radius);
   border-inline-end: 0;
+  border-top-left-radius: var(--_border-radius);
   gap: var(--_split-button-icon-gap);
   isolation: isolate;
   /* Disabled */
@@ -3137,10 +3174,10 @@ slot[name=icon] {
   inline-size: inherit;
 }
 .control:not(.shape-pill) {
-  border-radius: 6px 0 0 6px;
+  --_border-radius: 6px;
 }
 .control.shape-pill {
-  border-radius: 24px 0 0 24px;
+  --_border-radius: 24px;
 }
 .control.size-super-condensed {
   --_split-button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -3182,7 +3219,9 @@ slot[name=icon] {
 }
 
 .indicator {
+  border-bottom-right-radius: var(--_border-radius);
   border-inline-start: 0;
+  border-top-right-radius: var(--_border-radius);
   inline-size: var(--_split-button-inline-size);
   /* Disabled */
   /* Shape */
@@ -3198,10 +3237,10 @@ slot[name=icon] {
   cursor: not-allowed;
 }
 .indicator:not(.shape-pill) {
-  border-radius: 0 6px 6px 0;
+  --_border-radius: 6px;
 }
 .indicator.shape-pill {
-  border-radius: 0 24px 24px 0;
+  --_border-radius: 24px;
 }
 .indicator::before {
   position: absolute;
@@ -3260,7 +3299,7 @@ slot[name=icon] {
   --focus-inset: -1px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -3419,7 +3458,7 @@ slot[name=icon] {
   gap: 8px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .control {
   display: inline-block;
@@ -3444,7 +3483,7 @@ slot[name=icon] {
   margin-block-start: 16px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .control {
   pointer-events: none;
@@ -3459,7 +3498,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base-bold);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3587,7 +3626,574 @@ slot[name=icon] {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
+ */
+.wrapper {
+  display: grid;
+  column-gap: 8px;
+  grid-template-columns: repeat(7, auto);
+}
+
+.base {
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--_appearance-color-fill);
+  block-size: 40px;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
+  color: var(--_appearance-color-text);
+  padding-inline: 16px;
+}
+.base.connotation-cta {
+  /* @cssprop [--vvd-appearanceUI-cta-faint=var(--vvd-color-cta-50)] */
+  --_connotation-color-faint: var(--vvd-appearanceUI-cta-faint, var(--vvd-color-cta-50));
+  /* @cssprop [--vvd-appearanceUI-cta-soft=var(--vvd-color-cta-100)] */
+  --_connotation-color-soft: var(--vvd-appearanceUI-cta-soft, var(--vvd-color-cta-100));
+  /* @cssprop [--vvd-appearanceUI-cta-dim=var(--vvd-color-cta-200)] */
+  --_connotation-color-dim: var(--vvd-appearanceUI-cta-dim, var(--vvd-color-cta-200));
+  /* @cssprop [--vvd-appearanceUI-cta-pale=var(--vvd-color-cta-300)] */
+  --_connotation-color-pale: var(--vvd-appearanceUI-cta-pale, var(--vvd-color-cta-300));
+  /* @cssprop [--vvd-appearanceUI-cta-light=var(--vvd-color-cta-400)] */
+  --_connotation-color-light: var(--vvd-appearanceUI-cta-light, var(--vvd-color-cta-400));
+  /* @cssprop [--vvd-appearanceUI-cta-primary=var(--vvd-color-cta-500)] */
+  --_connotation-color-primary: var(--vvd-appearanceUI-cta-primary, var(--vvd-color-cta-500));
+  /* @cssprop [--vvd-appearanceUI-cta-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-appearanceUI-cta-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-appearanceUI-cta-primary-increment=var(--vvd-color-cta-600)] */
+  --_connotation-color-primary-increment: var(--vvd-appearanceUI-cta-primary-increment, var(--vvd-color-cta-600));
+  /* @cssprop [--vvd-appearanceUI-cta-firm=var(--vvd-color-cta-600)] */
+  --_connotation-color-firm: var(--vvd-appearanceUI-cta-firm, var(--vvd-color-cta-600));
+  /* @cssprop [--vvd-appearanceUI-cta-fierce=var(--vvd-color-cta-700)] */
+  --_connotation-color-fierce: var(--vvd-appearanceUI-cta-fierce, var(--vvd-color-cta-700));
+  /* @cssprop [--vvd-appearanceUI-cta-contrast=var(--vvd-color-cta-800)] */
+  --_connotation-color-contrast: var(--vvd-appearanceUI-cta-contrast, var(--vvd-color-cta-800));
+  /* @cssprop [--vvd-appearanceUI-cta-backdrop=var(--vvd-color-cta-50)] */
+  --_connotation-color-backdrop: var(--vvd-appearanceUI-cta-backdrop, var(--vvd-color-cta-50));
+  /* @cssprop [--vvd-appearanceUI-cta-intermediate=var(--vvd-color-cta-500)] */
+  --_connotation-color-intermediate: var(--vvd-appearanceUI-cta-intermediate, var(--vvd-color-cta-500));
+}
+.base.connotation-success {
+  /* @cssprop [--vvd-appearanceUI-success-faint=var(--vvd-color-success-50)] */
+  --_connotation-color-faint: var(--vvd-appearanceUI-success-faint, var(--vvd-color-success-50));
+  /* @cssprop [--vvd-appearanceUI-success-soft=var(--vvd-color-success-100)] */
+  --_connotation-color-soft: var(--vvd-appearanceUI-success-soft, var(--vvd-color-success-100));
+  /* @cssprop [--vvd-appearanceUI-success-dim=var(--vvd-color-success-200)] */
+  --_connotation-color-dim: var(--vvd-appearanceUI-success-dim, var(--vvd-color-success-200));
+  /* @cssprop [--vvd-appearanceUI-success-pale=var(--vvd-color-success-300)] */
+  --_connotation-color-pale: var(--vvd-appearanceUI-success-pale, var(--vvd-color-success-300));
+  /* @cssprop [--vvd-appearanceUI-success-light=var(--vvd-color-success-400)] */
+  --_connotation-color-light: var(--vvd-appearanceUI-success-light, var(--vvd-color-success-400));
+  /* @cssprop [--vvd-appearanceUI-success-primary=var(--vvd-color-success-500)] */
+  --_connotation-color-primary: var(--vvd-appearanceUI-success-primary, var(--vvd-color-success-500));
+  /* @cssprop [--vvd-appearanceUI-success-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-appearanceUI-success-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-appearanceUI-success-primary-increment=var(--vvd-color-success-600)] */
+  --_connotation-color-primary-increment: var(--vvd-appearanceUI-success-primary-increment, var(--vvd-color-success-600));
+  /* @cssprop [--vvd-appearanceUI-success-firm=var(--vvd-color-success-600)] */
+  --_connotation-color-firm: var(--vvd-appearanceUI-success-firm, var(--vvd-color-success-600));
+  /* @cssprop [--vvd-appearanceUI-success-fierce=var(--vvd-color-success-700)] */
+  --_connotation-color-fierce: var(--vvd-appearanceUI-success-fierce, var(--vvd-color-success-700));
+  /* @cssprop [--vvd-appearanceUI-success-contrast=var(--vvd-color-success-800)] */
+  --_connotation-color-contrast: var(--vvd-appearanceUI-success-contrast, var(--vvd-color-success-800));
+  /* @cssprop [--vvd-appearanceUI-success-backdrop=var(--vvd-color-success-50)] */
+  --_connotation-color-backdrop: var(--vvd-appearanceUI-success-backdrop, var(--vvd-color-success-50));
+  /* @cssprop [--vvd-appearanceUI-success-intermediate=var(--vvd-color-success-500)] */
+  --_connotation-color-intermediate: var(--vvd-appearanceUI-success-intermediate, var(--vvd-color-success-500));
+}
+.base.connotation-alert {
+  /* @cssprop [--vvd-appearanceUI-alert-faint=var(--vvd-color-alert-50)] */
+  --_connotation-color-faint: var(--vvd-appearanceUI-alert-faint, var(--vvd-color-alert-50));
+  /* @cssprop [--vvd-appearanceUI-alert-soft=var(--vvd-color-alert-100)] */
+  --_connotation-color-soft: var(--vvd-appearanceUI-alert-soft, var(--vvd-color-alert-100));
+  /* @cssprop [--vvd-appearanceUI-alert-dim=var(--vvd-color-alert-200)] */
+  --_connotation-color-dim: var(--vvd-appearanceUI-alert-dim, var(--vvd-color-alert-200));
+  /* @cssprop [--vvd-appearanceUI-alert-pale=var(--vvd-color-alert-300)] */
+  --_connotation-color-pale: var(--vvd-appearanceUI-alert-pale, var(--vvd-color-alert-300));
+  /* @cssprop [--vvd-appearanceUI-alert-light=var(--vvd-color-alert-400)] */
+  --_connotation-color-light: var(--vvd-appearanceUI-alert-light, var(--vvd-color-alert-400));
+  /* @cssprop [--vvd-appearanceUI-alert-primary=var(--vvd-color-alert-500)] */
+  --_connotation-color-primary: var(--vvd-appearanceUI-alert-primary, var(--vvd-color-alert-500));
+  /* @cssprop [--vvd-appearanceUI-alert-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-appearanceUI-alert-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-appearanceUI-alert-primary-increment=var(--vvd-color-alert-600)] */
+  --_connotation-color-primary-increment: var(--vvd-appearanceUI-alert-primary-increment, var(--vvd-color-alert-600));
+  /* @cssprop [--vvd-appearanceUI-alert-firm=var(--vvd-color-alert-600)] */
+  --_connotation-color-firm: var(--vvd-appearanceUI-alert-firm, var(--vvd-color-alert-600));
+  /* @cssprop [--vvd-appearanceUI-alert-fierce=var(--vvd-color-alert-700)] */
+  --_connotation-color-fierce: var(--vvd-appearanceUI-alert-fierce, var(--vvd-color-alert-700));
+  /* @cssprop [--vvd-appearanceUI-alert-contrast=var(--vvd-color-alert-800)] */
+  --_connotation-color-contrast: var(--vvd-appearanceUI-alert-contrast, var(--vvd-color-alert-800));
+  /* @cssprop [--vvd-appearanceUI-alert-backdrop=var(--vvd-color-alert-50)] */
+  --_connotation-color-backdrop: var(--vvd-appearanceUI-alert-backdrop, var(--vvd-color-alert-50));
+  /* @cssprop [--vvd-appearanceUI-alert-intermediate=var(--vvd-color-alert-500)] */
+  --_connotation-color-intermediate: var(--vvd-appearanceUI-alert-intermediate, var(--vvd-color-alert-500));
+}
+.base.connotation-warning {
+  /* @cssprop [--vvd-appearanceUI-warning-faint=var(--vvd-color-warning-50)] */
+  --_connotation-color-faint: var(--vvd-appearanceUI-warning-faint, var(--vvd-color-warning-50));
+  /* @cssprop [--vvd-appearanceUI-warning-soft=var(--vvd-color-warning-100)] */
+  --_connotation-color-soft: var(--vvd-appearanceUI-warning-soft, var(--vvd-color-warning-100));
+  /* @cssprop [--vvd-appearanceUI-warning-dim=var(--vvd-color-warning-200)] */
+  --_connotation-color-dim: var(--vvd-appearanceUI-warning-dim, var(--vvd-color-warning-200));
+  /* @cssprop [--vvd-appearanceUI-warning-pale=var(--vvd-color-warning-300)] */
+  --_connotation-color-pale: var(--vvd-appearanceUI-warning-pale, var(--vvd-color-warning-300));
+  /* @cssprop [--vvd-appearanceUI-warning-light=var(--vvd-color-warning-400)] */
+  --_connotation-color-light: var(--vvd-appearanceUI-warning-light, var(--vvd-color-warning-400));
+  /* @cssprop [--vvd-appearanceUI-warning-primary=var(--vvd-color-warning-300)] */
+  --_connotation-color-primary: var(--vvd-appearanceUI-warning-primary, var(--vvd-color-warning-300));
+  /* @cssprop [--vvd-appearanceUI-warning-primary-text=var(--vvd-color-canvas-text)] */
+  --_connotation-color-primary-text: var(--vvd-appearanceUI-warning-primary-text, var(--vvd-color-canvas-text));
+  /* @cssprop [--vvd-appearanceUI-warning-primary-increment=var(--vvd-color-warning-600)] */
+  --_connotation-color-primary-increment: var(--vvd-appearanceUI-warning-primary-increment, var(--vvd-color-warning-600));
+  /* @cssprop [--vvd-appearanceUI-warning-firm=var(--vvd-color-warning-600)] */
+  --_connotation-color-firm: var(--vvd-appearanceUI-warning-firm, var(--vvd-color-warning-600));
+  /* @cssprop [--vvd-appearanceUI-warning-fierce=var(--vvd-color-warning-700)] */
+  --_connotation-color-fierce: var(--vvd-appearanceUI-warning-fierce, var(--vvd-color-warning-700));
+  /* @cssprop [--vvd-appearanceUI-warning-contrast=var(--vvd-color-warning-800)] */
+  --_connotation-color-contrast: var(--vvd-appearanceUI-warning-contrast, var(--vvd-color-warning-800));
+  /* @cssprop [--vvd-appearanceUI-warning-backdrop=var(--vvd-color-warning-50)] */
+  --_connotation-color-backdrop: var(--vvd-appearanceUI-warning-backdrop, var(--vvd-color-warning-50));
+  /* @cssprop [--vvd-appearanceUI-warning-intermediate=var(--vvd-color-warning-300)] */
+  --_connotation-color-intermediate: var(--vvd-appearanceUI-warning-intermediate, var(--vvd-color-warning-300));
+}
+.base.connotation-information {
+  /* @cssprop [--vvd-appearanceUI-information-faint=var(--vvd-color-information-50)] */
+  --_connotation-color-faint: var(--vvd-appearanceUI-information-faint, var(--vvd-color-information-50));
+  /* @cssprop [--vvd-appearanceUI-information-soft=var(--vvd-color-information-100)] */
+  --_connotation-color-soft: var(--vvd-appearanceUI-information-soft, var(--vvd-color-information-100));
+  /* @cssprop [--vvd-appearanceUI-information-dim=var(--vvd-color-information-200)] */
+  --_connotation-color-dim: var(--vvd-appearanceUI-information-dim, var(--vvd-color-information-200));
+  /* @cssprop [--vvd-appearanceUI-information-pale=var(--vvd-color-information-300)] */
+  --_connotation-color-pale: var(--vvd-appearanceUI-information-pale, var(--vvd-color-information-300));
+  /* @cssprop [--vvd-appearanceUI-information-light=var(--vvd-color-information-400)] */
+  --_connotation-color-light: var(--vvd-appearanceUI-information-light, var(--vvd-color-information-400));
+  /* @cssprop [--vvd-appearanceUI-information-primary=var(--vvd-color-information-500)] */
+  --_connotation-color-primary: var(--vvd-appearanceUI-information-primary, var(--vvd-color-information-500));
+  /* @cssprop [--vvd-appearanceUI-information-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-appearanceUI-information-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-appearanceUI-information-primary-increment=var(--vvd-color-information-600)] */
+  --_connotation-color-primary-increment: var(--vvd-appearanceUI-information-primary-increment, var(--vvd-color-information-600));
+  /* @cssprop [--vvd-appearanceUI-information-firm=var(--vvd-color-information-600)] */
+  --_connotation-color-firm: var(--vvd-appearanceUI-information-firm, var(--vvd-color-information-600));
+  /* @cssprop [--vvd-appearanceUI-information-fierce=var(--vvd-color-information-700)] */
+  --_connotation-color-fierce: var(--vvd-appearanceUI-information-fierce, var(--vvd-color-information-700));
+  /* @cssprop [--vvd-appearanceUI-information-contrast=var(--vvd-color-information-800)] */
+  --_connotation-color-contrast: var(--vvd-appearanceUI-information-contrast, var(--vvd-color-information-800));
+  /* @cssprop [--vvd-appearanceUI-information-backdrop=var(--vvd-color-information-50)] */
+  --_connotation-color-backdrop: var(--vvd-appearanceUI-information-backdrop, var(--vvd-color-information-50));
+  /* @cssprop [--vvd-appearanceUI-information-intermediate=var(--vvd-color-information-500)] */
+  --_connotation-color-intermediate: var(--vvd-appearanceUI-information-intermediate, var(--vvd-color-information-500));
+}
+.base.connotation-announcement {
+  /* @cssprop [--vvd-appearanceUI-announcement-faint=var(--vvd-color-announcement-50)] */
+  --_connotation-color-faint: var(--vvd-appearanceUI-announcement-faint, var(--vvd-color-announcement-50));
+  /* @cssprop [--vvd-appearanceUI-announcement-soft=var(--vvd-color-announcement-100)] */
+  --_connotation-color-soft: var(--vvd-appearanceUI-announcement-soft, var(--vvd-color-announcement-100));
+  /* @cssprop [--vvd-appearanceUI-announcement-dim=var(--vvd-color-announcement-200)] */
+  --_connotation-color-dim: var(--vvd-appearanceUI-announcement-dim, var(--vvd-color-announcement-200));
+  /* @cssprop [--vvd-appearanceUI-announcement-pale=var(--vvd-color-announcement-300)] */
+  --_connotation-color-pale: var(--vvd-appearanceUI-announcement-pale, var(--vvd-color-announcement-300));
+  /* @cssprop [--vvd-appearanceUI-announcement-light=var(--vvd-color-announcement-400)] */
+  --_connotation-color-light: var(--vvd-appearanceUI-announcement-light, var(--vvd-color-announcement-400));
+  /* @cssprop [--vvd-appearanceUI-announcement-primary=var(--vvd-color-announcement-500)] */
+  --_connotation-color-primary: var(--vvd-appearanceUI-announcement-primary, var(--vvd-color-announcement-500));
+  /* @cssprop [--vvd-appearanceUI-announcement-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-appearanceUI-announcement-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-appearanceUI-announcement-primary-increment=var(--vvd-color-announcement-600)] */
+  --_connotation-color-primary-increment: var(--vvd-appearanceUI-announcement-primary-increment, var(--vvd-color-announcement-600));
+  /* @cssprop [--vvd-appearanceUI-announcement-firm=var(--vvd-color-announcement-600)] */
+  --_connotation-color-firm: var(--vvd-appearanceUI-announcement-firm, var(--vvd-color-announcement-600));
+  /* @cssprop [--vvd-appearanceUI-announcement-fierce=var(--vvd-color-announcement-700)] */
+  --_connotation-color-fierce: var(--vvd-appearanceUI-announcement-fierce, var(--vvd-color-announcement-700));
+  /* @cssprop [--vvd-appearanceUI-announcement-contrast=var(--vvd-color-announcement-800)] */
+  --_connotation-color-contrast: var(--vvd-appearanceUI-announcement-contrast, var(--vvd-color-announcement-800));
+  /* @cssprop [--vvd-appearanceUI-announcement-backdrop=var(--vvd-color-announcement-50)] */
+  --_connotation-color-backdrop: var(--vvd-appearanceUI-announcement-backdrop, var(--vvd-color-announcement-50));
+  /* @cssprop [--vvd-appearanceUI-announcement-intermediate=var(--vvd-color-announcement-500)] */
+  --_connotation-color-intermediate: var(--vvd-appearanceUI-announcement-intermediate, var(--vvd-color-announcement-500));
+}
+.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information, .connotation-announcement) {
+  /* @cssprop [--vvd-appearanceUI-accent-faint=var(--vvd-color-neutral-50)] */
+  --_connotation-color-faint: var(--vvd-appearanceUI-accent-faint, var(--vvd-color-neutral-50));
+  /* @cssprop [--vvd-appearanceUI-accent-soft=var(--vvd-color-neutral-100)] */
+  --_connotation-color-soft: var(--vvd-appearanceUI-accent-soft, var(--vvd-color-neutral-100));
+  /* @cssprop [--vvd-appearanceUI-accent-dim=var(--vvd-color-neutral-200)] */
+  --_connotation-color-dim: var(--vvd-appearanceUI-accent-dim, var(--vvd-color-neutral-200));
+  /* @cssprop [--vvd-appearanceUI-accent-pale=var(--vvd-color-neutral-300)] */
+  --_connotation-color-pale: var(--vvd-appearanceUI-accent-pale, var(--vvd-color-neutral-300));
+  /* @cssprop [--vvd-appearanceUI-accent-light=var(--vvd-color-neutral-400)] */
+  --_connotation-color-light: var(--vvd-appearanceUI-accent-light, var(--vvd-color-neutral-400));
+  /* @cssprop [--vvd-appearanceUI-accent-primary=var(--vvd-color-canvas-text)] */
+  --_connotation-color-primary: var(--vvd-appearanceUI-accent-primary, var(--vvd-color-canvas-text));
+  /* @cssprop [--vvd-appearanceUI-accent-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-appearanceUI-accent-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-appearanceUI-accent-primary-increment=var(--vvd-color-neutral-800)] */
+  --_connotation-color-primary-increment: var(--vvd-appearanceUI-accent-primary-increment, var(--vvd-color-neutral-800));
+  /* @cssprop [--vvd-appearanceUI-accent-firm=var(--vvd-color-canvas-text)] */
+  --_connotation-color-firm: var(--vvd-appearanceUI-accent-firm, var(--vvd-color-canvas-text));
+  /* @cssprop [--vvd-appearanceUI-accent-fierce=var(--vvd-color-neutral-700)] */
+  --_connotation-color-fierce: var(--vvd-appearanceUI-accent-fierce, var(--vvd-color-neutral-700));
+  /* @cssprop [--vvd-appearanceUI-accent-contrast=var(--vvd-color-neutral-800)] */
+  --_connotation-color-contrast: var(--vvd-appearanceUI-accent-contrast, var(--vvd-color-neutral-800));
+  /* @cssprop [--vvd-appearanceUI-accent-backdrop=var(--vvd-color-canvas)] */
+  --_connotation-color-backdrop: var(--vvd-appearanceUI-accent-backdrop, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-appearanceUI-accent-intermediate=var(--vvd-color-neutral-500)] */
+  --_connotation-color-intermediate: var(--vvd-appearanceUI-accent-intermediate, var(--vvd-color-neutral-500));
+}
+.base {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary);
+  --_appearance-color-outline: transparent;
+}
+.base.appearance-ghost {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}
+.base.appearance-outlined {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: var(--_connotation-color-firm);
+}
+.base.appearance-duotone {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: var(--_connotation-color-pale);
+}
+.base.appearance-subtle {
+  --_appearance-color-text: var(--_connotation-color-contrast);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: transparent;
+}
+.base.appearance-fieldset {
+  --_appearance-color-text: var(--vvd-color-canvas-text);
+  --_appearance-color-fill: var(--_connotation-color-backdrop);
+  --_appearance-color-outline: var(--_connotation-color-intermediate);
+}
+.base.appearance-listitem {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}
+.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary-increment);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-outline: var(--_connotation-color-firm);
+}
+.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: var(--_connotation-color-firm);
+}
+.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {
+  --_appearance-color-text: var(--_connotation-color-contrast);
+  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {
+  --_appearance-color-text: var(--vvd-color-canvas-text);
+  --_appearance-color-fill: var(--_connotation-color-backdrop);
+  --_appearance-color-outline: var(--_connotation-color-firm);
+}
+.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:active, .active):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-fierce);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: var(--_connotation-color-firm);
+}
+.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-duotone {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-outline: var(--_connotation-color-pale);
+}
+.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-subtle {
+  --_appearance-color-text: var(--_connotation-color-contrast);
+  --_appearance-color-fill: var(--_connotation-color-dim);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-fieldset {
+  --_appearance-color-text: var(--vvd-color-canvas-text);
+  --_appearance-color-fill: var(--_connotation-color-backdrop);
+  --_appearance-color-outline: var(--_connotation-color-firm);
+}
+.base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-listitem {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-outlined {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-duotone {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: var(--_connotation-color-pale);
+}
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-subtle {
+  --_appearance-color-text: var(--_connotation-color-contrast);
+  --_appearance-color-fill: var(--_connotation-color-pale);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-fieldset {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary);
+  --_appearance-color-outline: var(--_connotation-color-primary);
+}
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-listitem {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-dim);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: transparent;
+}
+.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-outlined {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-duotone {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: var(--_connotation-color-pale);
+}
+.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-subtle {
+  --_appearance-color-text: var(--_connotation-color-contrast);
+  --_appearance-color-fill: var(--_connotation-color-pale);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-fieldset {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary);
+  --_appearance-color-outline: var(--_connotation-color-primary);
+}
+.base:where(:checked, .checked):where(:not(:disabled, .disabled)).appearance-listitem {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-dim);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary-increment);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-outline: var(--_connotation-color-firm);
+}
+.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {
+  --_appearance-color-text: var(--_connotation-color-contrast);
+  --_appearance-color-fill: var(--_connotation-color-pale);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary-increment);
+  --_appearance-color-outline: var(--_connotation-color-primary);
+}
+.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-pale);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary-increment);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-outline: var(--_connotation-color-firm);
+}
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-subtle {
+  --_appearance-color-text: var(--_connotation-color-contrast);
+  --_appearance-color-fill: var(--_connotation-color-pale);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-fieldset {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary-increment);
+  --_appearance-color-outline: var(--_connotation-color-primary);
+}
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-listitem {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-pale);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:disabled, .disabled) {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: var(--vvd-color-neutral-100);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:disabled, .disabled).appearance-ghost {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}
+.base:where(:disabled, .disabled).appearance-outlined {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: var(--vvd-color-neutral-300);
+}
+.base:where(:disabled, .disabled).appearance-duotone {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: var(--vvd-color-neutral-100);
+}
+.base:where(:disabled, .disabled).appearance-subtle {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: var(--vvd-color-neutral-100);
+  --_appearance-color-outline: transparent;
+}
+.base:where(:disabled, .disabled).appearance-fieldset {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: var(--vvd-color-neutral-100);
+  --_appearance-color-outline: var(--vvd-color-neutral-300);
+}
+.base:where(:disabled, .disabled).appearance-listitem {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:disabled, .disabled) {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: var(--vvd-color-neutral-100);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-ghost {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: var(--vvd-color-neutral-200);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-outlined {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-duotone {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-subtle {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-fieldset {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: var(--vvd-color-neutral-100);
+  --_appearance-color-outline: var(--vvd-color-neutral-300);
+}
+.base:where(.selected, [aria-current]):where(:disabled, .disabled).appearance-listitem {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: var(--vvd-color-neutral-200);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.readonly):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: var(--vvd-color-neutral-800);
+  --_appearance-color-fill: var(--vvd-color-neutral-500);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: var(--vvd-color-neutral-600);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}
+.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-outlined {
+  --_appearance-color-text: var(--vvd-color-neutral-600);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: var(--vvd-color-neutral-400);
+}
+.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-duotone {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-subtle {
+  --_appearance-color-text: notset;
+  --_appearance-color-fill: notset;
+  --_appearance-color-outline: notset;
+}
+.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-fieldset {
+  --_appearance-color-text: var(--vvd-color-canvas-text);
+  --_appearance-color-fill: var(--vvd-color-neutral-200);
+  --_appearance-color-outline: var(--vvd-color-neutral-400);
+}
+.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-listitem {
+  --_appearance-color-text: var(--vvd-color-neutral-600);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}/**
+ * Do not edit directly
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   display: flex;
@@ -3599,7 +4205,7 @@ slot[name=icon] {
   border-bottom: 1px solid var(--vvd-color-neutral-200);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: flex;
@@ -3716,7 +4322,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: flex;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host([disabled]) {
   cursor: not-allowed;
@@ -3853,7 +4459,7 @@ dialog.fixed {
   transform: translate(0, -50%);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   box-sizing: border-box;
@@ -3887,6 +4493,15 @@ dialog.fixed {
   background-color: var(--vvd-color-canvas-text, currentColor);
   opacity: 0.5;
 }
+.base:focus-visible {
+  outline: none;
+}
+.base .focus-indicator {
+  pointer-events: none;
+}
+.base:not(:focus-visible) .focus-indicator {
+  display: none;
+}
 
 .main-wrapper {
   display: flex;
@@ -3994,7 +4609,7 @@ slot[name=main] {
   border-radius: inherit;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .positioning-region {
   display: flex;
@@ -4013,7 +4628,7 @@ label {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4146,7 +4761,7 @@ slot[name=icon] {
   opacity: 0;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   display: grid;
@@ -4264,7 +4879,7 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-flex;
@@ -4365,7 +4980,7 @@ slot[name=icon] {
   justify-content: center;
   background-color: var(--_appearance-color-fill);
   block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
-  border-radius: 5px;
+  border-radius: 4px;
   box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);
   color: var(--_appearance-color-text);
   inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
@@ -4414,7 +5029,7 @@ label {
   --_low-ink-color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: block;
@@ -4433,14 +5048,15 @@ label {
   inline-size: 1px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
 }
 
 .base {
-  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);
+  --_text-field-gutter-start: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);
+  --_text-field-gutter-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);
   --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);
   display: inline-grid;
   width: 100%;
@@ -4487,6 +5103,26 @@ label {
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: transparent;
 }
+.base:where(.error):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-alert-50);
+  --_appearance-color-outline: var(--vvd-color-alert-500);
+}
+.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-alert-50);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.success):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-success-50);
+  --_appearance-color-outline: var(--vvd-color-success-500);
+}
+.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-success-50);
+  --_appearance-color-outline: transparent;
+}
 .base.connotation-success {
   /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */
   --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));
@@ -4543,8 +5179,12 @@ label {
 
 .label:not(slot),
 .label::slotted(label) {
-  color: var(--vvd-color-canvas-text);
-  contain: inline-size;
+  /* As label is in light dom, use !important and initial to prevent values getting overridden by global CSS resets etc. */
+  box-sizing: initial !important;
+  padding: initial !important;
+  margin: initial !important;
+  color: var(--vvd-color-canvas-text) !important;
+  contain: inline-size !important;
   font: var(--vvd-typography-base);
   grid-column: 1/4;
   grid-row: 1;
@@ -4605,23 +5245,25 @@ label {
 }
 
 .control:not(slot), .control::slotted(input) {
-  width: 100%;
-  box-sizing: border-box;
-  border: 0 none;
-  appearance: none; /* for box-shadow visibility on IOS */
-  background-color: transparent;
-  block-size: 100%;
-  border-radius: inherit;
-  color: inherit;
+  /* As input is in light dom, use !important and initial to prevent values getting overridden by global CSS resets etc. */
+  width: 100% !important;
+  box-sizing: border-box !important;
+  border: 0 none !important;
+  margin: initial !important;
+  appearance: none !important; /* for box-shadow visibility on IOS */
+  background-color: transparent !important;
+  block-size: 100% !important;
+  border-radius: inherit !important;
+  color: inherit !important;
   font: inherit;
-  padding-block: 0;
-  padding-inline-end: var(--_text-field-gutter);
-  padding-inline-start: var(--_text-field-gutter);
+  padding-block: 0 !important;
+  padding-inline-end: var(--_text-field-gutter-end) !important;
+  padding-inline-start: var(--_text-field-gutter-start) !important;
 }
 .control:not(slot):disabled, .control::slotted(input:disabled) {
-  cursor: not-allowed;
-  opacity: 1; /* 2. correct opacity on iOS */
-  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */
+  cursor: not-allowed !important;
+  opacity: 1 !important; /* 2. correct opacity on iOS */
+  -webkit-text-fill-color: var(--_appearance-color-text) !important; /* 1. sets text fill to current `color` for safari */
 }
 .control:not(slot)::placeholder {
   opacity: 1 !important; /* 2. correct opacity on iOS */
@@ -4631,7 +5273,7 @@ label {
   outline: none;
 }
 .has-icon .control:not(slot), .has-icon .control::slotted(input) {
-  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);
+  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2) !important;
 }
 
 .icon {
@@ -4640,7 +5282,7 @@ label {
   color: var(--_low-ink-color);
   font-size: var(--_text-field-icon-size);
   inset-block-start: 50%;
-  inset-inline-start: calc(100% + var(--_text-field-gutter));
+  inset-inline-start: calc(100% + var(--_text-field-gutter-start));
   line-height: 1;
   transform: translateY(-50%);
 }
@@ -4667,9 +5309,10 @@ label {
   display: none;
 }
 
-.control {
-  padding-inline-end: 70px !important;
+.base {
+  --_text-field-gutter-end: 70px;
 }
+
 .control::-webkit-outer-spin-button, .control::-webkit-inner-spin-button {
   appearance: none;
 }
@@ -4694,7 +5337,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4875,7 +5518,7 @@ label {
   --_select-control-border-radius: 6px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host(.disabled) {
   cursor: not-allowed;
@@ -5006,7 +5649,7 @@ label {
   align-items: center;
   background-color: var(--_appearance-color-fill);
   block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
-  border-radius: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / .5);
+  border-radius: 40px;
   box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
   inline-size: var(--_switch-inline-size);
   transition: all 0.2s ease-in-out 0s;
@@ -5058,15 +5701,14 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   position: relative;
 }
 
-.control {
-  display: flex;
-  padding-inline-end: 44px !important;
+.base {
+  --_text-field-gutter-end: 44px;
 }
 
 .icon {
@@ -5122,7 +5764,7 @@ label {
   inline-size: 100%;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: block;
@@ -5237,7 +5879,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
@@ -5289,6 +5931,26 @@ label {
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: transparent;
 }
+.base:where(.error):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-alert-50);
+  --_appearance-color-outline: var(--vvd-color-alert-500);
+}
+.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-alert-50);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.success):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-success-50);
+  --_appearance-color-outline: var(--vvd-color-success-500);
+}
+.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {
+  --_appearance-color-text: notSet;
+  --_appearance-color-fill: var(--vvd-color-success-50);
+  --_appearance-color-outline: transparent;
+}
 .base.connotation-success {
   /* @cssprop [--vvd-text-area-success-primary=var(--vvd-color-success-500)] */
   --_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));
@@ -5397,7 +6059,7 @@ label {
   resize: vertical;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
@@ -5593,7 +6255,7 @@ label {
   margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -5601,7 +6263,7 @@ label {
   }
 }
 :host([disabled]) {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .base {
@@ -5676,9 +6338,6 @@ label {
 .base:not(.disabled) {
   cursor: pointer;
 }
-.base.disabled {
-  pointer-events: none;
-}
 
 .focus-indicator {
   border-radius: 6px;
@@ -5774,7 +6433,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 .base {
   display: grid;
@@ -5843,7 +6502,7 @@ label {
   background-color: var(--_appearance-color-fill);
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   min-inline-size: 80px;
@@ -5940,7 +6599,7 @@ slot {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 ol {
   padding: 0;
@@ -6200,7 +6859,7 @@ ol {
   text-transform: uppercase;
 }/**
  * Do not edit directly
- * Generated on Mon, 11 Dec 2023 11:36:24 GMT
+ * Generated on Thu, 21 Dec 2023 10:43:18 GMT
  */
 :host {
   display: inline-block;
@@ -6393,8 +7052,8 @@ ol {
   --_appearance-color-outline: transparent;
 }
 .button:where(.selected, [aria-current]):where(:disabled, .disabled) {
-  --_appearance-color-text: var(--_connotation-color-pale);
-  --_appearance-color-fill: var(--_connotation-color-dim);
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: var(--vvd-color-neutral-200);
   --_appearance-color-outline: transparent;
 }
 .button .focus-indicator {