diff --git a/.examples/_data/citiesByState.js b/.examples/_data/citiesByState.js
new file mode 100644
index 00000000..55cb98c8
--- /dev/null
+++ b/.examples/_data/citiesByState.js
@@ -0,0 +1,630 @@
+export default [
+  {
+    group: 'Alabama',
+    options: [
+      { label: 'Birmingham', population: 209880, value: 'Birmingham, Alabama' },
+      { label: 'Montgomery', population: 198218, value: 'Montgomery, Alabama' },
+      { label: 'Mobile', population: 189572, value: 'Mobile, Alabama' },
+    ],
+  },
+  {
+    group: 'Alaska',
+    options: [
+      { label: 'Anchorage', population: 291247, value: 'Anchorage, Alaska' },
+      { label: 'Fairbanks', population: 31516, value: 'Fairbanks, Alaska' },
+      { label: 'Juneau', population: 32113, value: 'Juneau, Alaska' },
+    ],
+  },
+  {
+    group: 'Arizona',
+    options: [
+      { label: 'Phoenix', population: 1445632, value: 'Phoenix, Arizona' },
+      { label: 'Tucson', population: 548073, value: 'Tucson, Arizona' },
+      { label: 'Mesa', population: 518012, value: 'Mesa, Arizona' },
+    ],
+  },
+  {
+    group: 'Arkansas',
+    options: [
+      {
+        label: 'Little Rock',
+        population: 197312,
+        value: 'Little Rock, Arkansas',
+      },
+      { label: 'Fort Smith', population: 87818, value: 'Fort Smith, Arkansas' },
+      {
+        label: 'Fayetteville',
+        population: 87016,
+        value: 'Fayetteville, Arkansas',
+      },
+    ],
+  },
+  {
+    group: 'California',
+    options: [
+      {
+        label: 'Los Angeles',
+        population: 3976322,
+        value: 'Los Angeles, California',
+      },
+      {
+        label: 'San Diego',
+        population: 1394928,
+        value: 'San Diego, California',
+      },
+      { label: 'San Jose', population: 1026654, value: 'San Jose, California' },
+    ],
+  },
+  {
+    group: 'Colorado',
+    options: [
+      { label: 'Denver', population: 693060, value: 'Denver, Colorado' },
+      {
+        label: 'Colorado Springs',
+        population: 478221,
+        value: 'Colorado Springs, Colorado',
+      },
+      { label: 'Aurora', population: 366623, value: 'Aurora, Colorado' },
+    ],
+  },
+  {
+    group: 'Connecticut',
+    options: [
+      {
+        label: 'Bridgeport',
+        population: 148654,
+        value: 'Bridgeport, Connecticut',
+      },
+      {
+        label: 'New Haven',
+        population: 130250,
+        value: 'New Haven, Connecticut',
+      },
+      { label: 'Hartford', population: 123243, value: 'Hartford, Connecticut' },
+    ],
+  },
+  {
+    group: 'Delaware',
+    options: [
+      { label: 'Wilmington', population: 70676, value: 'Wilmington, Delaware' },
+      { label: 'Dover', population: 38458, value: 'Dover, Delaware' },
+      { label: 'Newark', population: 33387, value: 'Newark, Delaware' },
+    ],
+  },
+  {
+    group: 'Florida',
+    options: [
+      {
+        label: 'Jacksonville',
+        population: 892062,
+        value: 'Jacksonville, Florida',
+      },
+      { label: 'Miami', population: 470914, value: 'Miami, Florida' },
+      { label: 'Tampa', population: 399700, value: 'Tampa, Florida' },
+    ],
+  },
+  {
+    group: 'Georgia',
+    options: [
+      { label: 'Atlanta', population: 498044, value: 'Atlanta, Georgia' },
+      { label: 'Augusta', population: 197166, value: 'Augusta, Georgia' },
+      { label: 'Columbus', population: 195769, value: 'Columbus, Georgia' },
+    ],
+  },
+  {
+    group: 'Hawaii',
+    options: [
+      { label: 'Honolulu', population: 374658, value: 'Honolulu, Hawaii' },
+      {
+        label: 'East Honolulu',
+        population: 49105,
+        value: 'East Honolulu, Hawaii',
+      },
+      { label: 'Pearl City', population: 47698, value: 'Pearl City, Hawaii' },
+    ],
+  },
+  {
+    group: 'Idaho',
+    options: [
+      { label: 'Boise', population: 228959, value: 'Boise, Idaho' },
+      { label: 'Meridian', population: 106804, value: 'Meridian, Idaho' },
+      { label: 'Nampa', population: 106475, value: 'Nampa, Idaho' },
+    ],
+  },
+  {
+    group: 'Illinois',
+    options: [
+      { label: 'Chicago', population: 2705994, value: 'Chicago, Illinois' },
+      { label: 'Aurora', population: 199602, value: 'Aurora, Illinois' },
+      { label: 'Rockford', population: 147051, value: 'Rockford, Illinois' },
+    ],
+  },
+  {
+    group: 'Indiana',
+    options: [
+      {
+        label: 'Indianapolis',
+        population: 867125,
+        value: 'Indianapolis, Indiana',
+      },
+      { label: 'Fort Wayne', population: 270402, value: 'Fort Wayne, Indiana' },
+      { label: 'Evansville', population: 118930, value: 'Evansville, Indiana' },
+    ],
+  },
+  {
+    group: 'Iowa',
+    options: [
+      { label: 'Des Moines', population: 214778, value: 'Des Moines, Iowa' },
+      {
+        label: 'Cedar Rapids',
+        population: 132228,
+        value: 'Cedar Rapids, Iowa',
+      },
+      { label: 'Davenport', population: 101532, value: 'Davenport, Iowa' },
+    ],
+  },
+  {
+    group: 'Kansas',
+    options: [
+      { label: 'Wichita', population: 389938, value: 'Wichita, Kansas' },
+      {
+        label: 'Overland Park',
+        population: 195494,
+        value: 'Overland Park, Kansas',
+      },
+      {
+        label: 'Kansas City',
+        population: 152960,
+        value: 'Kansas City, Kansas',
+      },
+    ],
+  },
+  {
+    group: 'Kentucky',
+    options: [
+      {
+        label: 'Louisville',
+        population: 615366,
+        value: 'Louisville, Kentucky',
+      },
+      { label: 'Lexington', population: 314488, value: 'Lexington, Kentucky' },
+      {
+        label: 'Bowling Green',
+        population: 70846,
+        value: 'Bowling Green, Kentucky',
+      },
+    ],
+  },
+  {
+    group: 'Louisiana',
+    options: [
+      {
+        label: 'New Orleans',
+        population: 393292,
+        value: 'New Orleans, Louisiana',
+      },
+      {
+        label: 'Baton Rouge',
+        population: 227715,
+        value: 'Baton Rouge, Louisiana',
+      },
+      {
+        label: 'Shreveport',
+        population: 194920,
+        value: 'Shreveport, Louisiana',
+      },
+    ],
+  },
+  {
+    group: 'Maine',
+    options: [
+      { label: 'Portland', population: 66591, value: 'Portland, Maine' },
+      { label: 'Lewiston', population: 36136, value: 'Lewiston, Maine' },
+      { label: 'Bangor', population: 31666, value: 'Bangor, Maine' },
+    ],
+  },
+  {
+    group: 'Maryland',
+    options: [
+      { label: 'Baltimore', population: 611648, value: 'Baltimore, Maryland' },
+      { label: 'Columbia', population: 105162, value: 'Columbia, Maryland' },
+      { label: 'Germantown', population: 90601, value: 'Germantown, Maryland' },
+    ],
+  },
+  {
+    group: 'Massachusetts',
+    options: [
+      { label: 'Boston', population: 694583, value: 'Boston, Massachusetts' },
+      {
+        label: 'Worcester',
+        population: 185877,
+        value: 'Worcester, Massachusetts',
+      },
+      {
+        label: 'Springfield',
+        population: 154341,
+        value: 'Springfield, Massachusetts',
+      },
+    ],
+  },
+  {
+    group: 'Michigan',
+    options: [
+      { label: 'Detroit', population: 673104, value: 'Detroit, Michigan' },
+      {
+        label: 'Grand Rapids',
+        population: 200217,
+        value: 'Grand Rapids, Michigan',
+      },
+      { label: 'Warren', population: 134587, value: 'Warren, Michigan' },
+    ],
+  },
+  {
+    group: 'Minnesota',
+    options: [
+      {
+        label: 'Minneapolis',
+        population: 422331,
+        value: 'Minneapolis, Minnesota',
+      },
+      {
+        label: 'Saint Paul',
+        population: 306621,
+        value: 'Saint Paul, Minnesota',
+      },
+      { label: 'Rochester', population: 118935, value: 'Rochester, Minnesota' },
+    ],
+  },
+  {
+    group: 'Mississippi',
+    options: [
+      { label: 'Jackson', population: 153701, value: 'Jackson, Mississippi' },
+      { label: 'Gulfport', population: 71496, value: 'Gulfport, Mississippi' },
+      {
+        label: 'Southaven',
+        population: 54418,
+        value: 'Southaven, Mississippi',
+      },
+    ],
+  },
+  {
+    group: 'Missouri',
+    options: [
+      {
+        label: 'Kansas City',
+        population: 488943,
+        value: 'Kansas City, Missouri',
+      },
+      {
+        label: 'Saint Louis',
+        population: 302838,
+        value: 'Saint Louis, Missouri',
+      },
+      {
+        label: 'Springfield',
+        population: 167376,
+        value: 'Springfield, Missouri',
+      },
+    ],
+  },
+  {
+    group: 'Montana',
+    options: [
+      { label: 'Billings', population: 110263, value: 'Billings, Montana' },
+      { label: 'Missoula', population: 74727, value: 'Missoula, Montana' },
+      {
+        label: 'Great Falls',
+        population: 58402,
+        value: 'Great Falls, Montana',
+      },
+    ],
+  },
+  {
+    group: 'Nebraska',
+    options: [
+      { label: 'Omaha', population: 478192, value: 'Omaha, Nebraska' },
+      { label: 'Lincoln', population: 287401, value: 'Lincoln, Nebraska' },
+      { label: 'Bellevue', population: 54734, value: 'Bellevue, Nebraska' },
+    ],
+  },
+  {
+    group: 'Nevada',
+    options: [
+      { label: 'Las Vegas', population: 635628, value: 'Las Vegas, Nevada' },
+      { label: 'Henderson', population: 320189, value: 'Henderson, Nevada' },
+      { label: 'Reno', population: 255601, value: 'Reno, Nevada' },
+    ],
+  },
+  {
+    group: 'New Hampshire',
+    options: [
+      {
+        label: 'Manchester',
+        population: 112525,
+        value: 'Manchester, New Hampshire',
+      },
+      { label: 'Nashua', population: 89536, value: 'Nashua, New Hampshire' },
+      { label: 'Concord', population: 43172, value: 'Concord, New Hampshire' },
+    ],
+  },
+  {
+    group: 'New Jersey',
+    options: [
+      { label: 'Newark', population: 282011, value: 'Newark, New Jersey' },
+      {
+        label: 'Jersey City',
+        population: 265549,
+        value: 'Jersey City, New Jersey',
+      },
+      { label: 'Paterson', population: 145948, value: 'Paterson, New Jersey' },
+    ],
+  },
+  {
+    group: 'New Mexico',
+    options: [
+      {
+        label: 'Albuquerque',
+        population: 560218,
+        value: 'Albuquerque, New Mexico',
+      },
+      {
+        label: 'Las Cruces',
+        population: 102512,
+        value: 'Las Cruces, New Mexico',
+      },
+      {
+        label: 'Rio Rancho',
+        population: 99710,
+        value: 'Rio Rancho, New Mexico',
+      },
+    ],
+  },
+  {
+    group: 'New York',
+    options: [
+      {
+        label: 'New York City',
+        population: 8175133,
+        value: 'New York City, New York',
+      },
+      { label: 'Buffalo', population: 261310, value: 'Buffalo, New York' },
+      { label: 'Rochester', population: 210565, value: 'Rochester, New York' },
+    ],
+  },
+  {
+    group: 'North Carolina',
+    options: [
+      {
+        label: 'Charlotte',
+        population: 731424,
+        value: 'Charlotte, North Carolina',
+      },
+      {
+        label: 'Raleigh',
+        population: 474069,
+        value: 'Raleigh, North Carolina',
+      },
+      {
+        label: 'Greensboro',
+        population: 299035,
+        value: 'Greensboro, North Carolina',
+      },
+    ],
+  },
+  {
+    group: 'North Dakota',
+    options: [
+      { label: 'Fargo', population: 113658, value: 'Fargo, North Dakota' },
+      { label: 'Bismarck', population: 61272, value: 'Bismarck, North Dakota' },
+      {
+        label: 'Grand Forks',
+        population: 56791,
+        value: 'Grand Forks, North Dakota',
+      },
+    ],
+  },
+  {
+    group: 'Ohio',
+    options: [
+      { label: 'Columbus', population: 822553, value: 'Columbus, Ohio' },
+      { label: 'Cleveland', population: 396815, value: 'Cleveland, Ohio' },
+      { label: 'Cincinnati', population: 296943, value: 'Cincinnati, Ohio' },
+    ],
+  },
+  {
+    group: 'Oklahoma',
+    options: [
+      {
+        label: 'Oklahoma City',
+        population: 649021,
+        value: 'Oklahoma City, Oklahoma',
+      },
+      { label: 'Tulsa', population: 403505, value: 'Tulsa, Oklahoma' },
+      { label: 'Norman', population: 110925, value: 'Norman, Oklahoma' },
+    ],
+  },
+  {
+    group: 'Oregon',
+    options: [
+      { label: 'Portland', population: 647805, value: 'Portland, Oregon' },
+      { label: 'Salem', population: 154637, value: 'Salem, Oregon' },
+      { label: 'Eugene', population: 156185, value: 'Eugene, Oregon' },
+    ],
+  },
+  {
+    group: 'Pennsylvania',
+    options: [
+      {
+        label: 'Philadelphia',
+        population: 1584138,
+        value: 'Philadelphia, Pennsylvania',
+      },
+      {
+        label: 'Pittsburgh',
+        population: 303625,
+        value: 'Pittsburgh, Pennsylvania',
+      },
+      {
+        label: 'Allentown',
+        population: 120207,
+        value: 'Allentown, Pennsylvania',
+      },
+    ],
+  },
+  {
+    group: 'Rhode Island',
+    options: [
+      {
+        label: 'Providence',
+        population: 179883,
+        value: 'Providence, Rhode Island',
+      },
+      { label: 'Warwick', population: 82039, value: 'Warwick, Rhode Island' },
+      { label: 'Cranston', population: 80566, value: 'Cranston, Rhode Island' },
+    ],
+  },
+  {
+    group: 'South Carolina',
+    options: [
+      {
+        label: 'Charleston',
+        population: 130113,
+        value: 'Charleston, South Carolina',
+      },
+      {
+        label: 'Columbia',
+        population: 129272,
+        value: 'Columbia, South Carolina',
+      },
+      {
+        label: 'North Charleston',
+        population: 115382,
+        value: 'North Charleston, South Carolina',
+      },
+    ],
+  },
+  {
+    group: 'South Dakota',
+    options: [
+      {
+        label: 'Sioux Falls',
+        population: 153888,
+        value: 'Sioux Falls, South Dakota',
+      },
+      {
+        label: 'Rapid City',
+        population: 69030,
+        value: 'Rapid City, South Dakota',
+      },
+      { label: 'Aberdeen', population: 28489, value: 'Aberdeen, South Dakota' },
+    ],
+  },
+  {
+    group: 'Tennessee',
+    options: [
+      { label: 'Nashville', population: 689447, value: 'Nashville, Tennessee' },
+      { label: 'Memphis', population: 650618, value: 'Memphis, Tennessee' },
+      { label: 'Knoxville', population: 186239, value: 'Knoxville, Tennessee' },
+    ],
+  },
+  {
+    group: 'Texas',
+    options: [
+      { label: 'Houston', population: 2320268, value: 'Houston, Texas' },
+      {
+        label: 'San Antonio',
+        population: 1547253,
+        value: 'San Antonio, Texas',
+      },
+      { label: 'Dallas', population: 1317929, value: 'Dallas, Texas' },
+    ],
+  },
+  {
+    group: 'Utah',
+    options: [
+      {
+        label: 'Salt Lake City',
+        population: 200567,
+        value: 'Salt Lake City, Utah',
+      },
+      {
+        label: 'West Valley City',
+        population: 135248,
+        value: 'West Valley City, Utah',
+      },
+      { label: 'Provo', population: 115264, value: 'Provo, Utah' },
+    ],
+  },
+  {
+    group: 'Vermont',
+    options: [
+      { label: 'Burlington', population: 42284, value: 'Burlington, Vermont' },
+      {
+        label: 'South Burlington',
+        population: 18998,
+        value: 'South Burlington, Vermont',
+      },
+      { label: 'Essex', population: 21291, value: 'Essex, Vermont' },
+    ],
+  },
+  {
+    group: 'Virginia',
+    options: [
+      {
+        label: 'Virginia Beach',
+        population: 450435,
+        value: 'Virginia Beach, Virginia',
+      },
+      { label: 'Norfolk', population: 242742, value: 'Norfolk, Virginia' },
+      {
+        label: 'Chesapeake',
+        population: 240397,
+        value: 'Chesapeake, Virginia',
+      },
+    ],
+  },
+  {
+    group: 'Washington',
+    options: [
+      { label: 'Seattle', population: 744955, value: 'Seattle, Washington' },
+      { label: 'Spokane', population: 219190, value: 'Spokane, Washington' },
+      { label: 'Tacoma', population: 217827, value: 'Tacoma, Washington' },
+    ],
+  },
+  {
+    group: 'West Virginia',
+    options: [
+      {
+        label: 'Charleston',
+        population: 51400,
+        value: 'Charleston, West Virginia',
+      },
+      {
+        label: 'Huntington',
+        population: 46413,
+        value: 'Huntington, West Virginia',
+      },
+      {
+        label: 'Morgantown',
+        population: 30505,
+        value: 'Morgantown, West Virginia',
+      },
+    ],
+  },
+  {
+    group: 'Wisconsin',
+    options: [
+      { label: 'Milwaukee', population: 594833, value: 'Milwaukee, Wisconsin' },
+      { label: 'Madison', population: 233209, value: 'Madison, Wisconsin' },
+      { label: 'Green Bay', population: 104578, value: 'Green Bay, Wisconsin' },
+    ],
+  },
+  {
+    group: 'Wyoming',
+    options: [
+      { label: 'Cheyenne', population: 59466, value: 'Cheyenne, Wyoming' },
+      { label: 'Casper', population: 57913, value: 'Casper, Wyoming' },
+      { label: 'Laramie', population: 32959, value: 'Laramie, Wyoming' },
+    ],
+  },
+]
diff --git a/.examples/autocomplete-pro/autocomplete-option-groups.vue b/.examples/autocomplete-pro/autocomplete-option-groups.vue
new file mode 100644
index 00000000..e85eaa7b
--- /dev/null
+++ b/.examples/autocomplete-pro/autocomplete-option-groups.vue
@@ -0,0 +1,20 @@
+<script setup>
+import citiesByState from './citiesByState.js'
+</script>
+
+<template>
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <FormKit
+      type="autocomplete"
+      name="most_populous_cities"
+      label="Choose your favorite countries"
+      placeholder="New York, Los Angeles..."
+      :options="citiesByState"
+      multiple
+      popover
+    />
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
+
+<style></style>
diff --git a/.examples/colorpicker/alpha.vue b/.examples/colorpicker/alpha.vue
new file mode 100644
index 00000000..059777cb
--- /dev/null
+++ b/.examples/colorpicker/alpha.vue
@@ -0,0 +1,16 @@
+<template>
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <!-- %partial% -->
+    <FormKit
+      type="colorpicker"
+      name="color"
+      value="rgba(255, 0, 0, 0.5)"
+      alpha="false"
+      popover
+      value-format="rgba"
+    />
+    <!-- %partial% -->
+
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
diff --git a/.examples/currency/currency-default.vue b/.examples/currency/currency-default.vue
new file mode 100644
index 00000000..f960ada3
--- /dev/null
+++ b/.examples/currency/currency-default.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { ref } from 'vue'
+const value = ref(false)
+</script>
+
+<template>
+  <!--
+    FormKit forms auto-collect values of children inputs.
+    Wrap the example in a form so we can display the form values.
+  -->
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="currency"
+      name="currency"
+      value="12345678.90"
+    />
+    <!-- %partial%::html:: -->
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
diff --git a/.examples/currency/currency-props-explore.vue b/.examples/currency/currency-props-explore.vue
new file mode 100644
index 00000000..02923306
--- /dev/null
+++ b/.examples/currency/currency-props-explore.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue'
+const value = ref(false)
+</script>
+
+<template>
+  <!--
+    FormKit forms auto-collect values of children inputs.
+    Wrap the example in a form so we can display the form values.
+  -->
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="currency"
+      name="currency"
+      min="-10"
+      max="1000"
+      step="0.0001"
+      currency="USD"
+      displayLocale="en-US"
+      decimals="4"
+      minDecimals="2"
+      value="123.1234"
+    />
+    <!-- %partial%::html:: -->
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
diff --git a/.examples/currency/currency-simple-locale.vue b/.examples/currency/currency-simple-locale.vue
new file mode 100644
index 00000000..15fecbe3
--- /dev/null
+++ b/.examples/currency/currency-simple-locale.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { ref } from 'vue'
+const value = ref(false)
+</script>
+
+<template>
+  <!--
+    FormKit forms auto-collect values of children inputs.
+    Wrap the example in a form so we can display the form values.
+  -->
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="currency"
+      currency="USD"
+      display-locale="en"
+      name="usd"
+      value="12345678.90"
+    />
+
+    <FormKit
+      type="currency"
+      currency="EUR"
+      display-locale="de"
+      name="eur"
+      value="12345678.90"
+    />
+
+    <FormKit
+      type="currency"
+      currency="INR"
+      display-locale="en-IN"
+      name="inr"
+      value="12345678.90"
+    />
+
+    <FormKit
+      type="currency"
+      currency="CNY"
+      display-locale="zh-CN"
+      name="cny"
+      value="12345678.90"
+    />
+    <!-- %partial%::html:: -->
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
diff --git a/.examples/dropdown/dropdown-option-groups.vue b/.examples/dropdown/dropdown-option-groups.vue
new file mode 100644
index 00000000..0eee1743
--- /dev/null
+++ b/.examples/dropdown/dropdown-option-groups.vue
@@ -0,0 +1,20 @@
+<script setup>
+import citiesByState from './citiesByState.js'
+</script>
+
+<template>
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <FormKit
+      type="dropdown"
+      name="most_populous_cities"
+      label="Choose your favorite countries"
+      placeholder="New York, Los Angeles..."
+      :options="citiesByState"
+      multiple
+      popover
+    />
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
+
+<style></style>
diff --git a/.examples/rule-date-after-node/rule-date-after-node.vue b/.examples/rule-date-after-node/rule-date-after-node.vue
new file mode 100644
index 00000000..c7e6c649
--- /dev/null
+++ b/.examples/rule-date-after-node/rule-date-after-node.vue
@@ -0,0 +1,18 @@
+<template>
+  <FormKit type="group">
+    <FormKit
+      type="date"
+      name="startDate"
+      label="Start Date"
+      help="Select a start date"
+    />
+    <FormKit
+      type="date"
+      name="endDate"
+      label="End Date"
+      validation="date_after_node:startDate"
+      validation-label="End Date"
+      :help="`Select an end date after the start date`"
+    />
+  </FormKit>
+</template>
diff --git a/.examples/rule-date-after-or-equal/rule-date-after-or-equal.vue b/.examples/rule-date-after-or-equal/rule-date-after-or-equal.vue
new file mode 100644
index 00000000..e84fc3a0
--- /dev/null
+++ b/.examples/rule-date-after-or-equal/rule-date-after-or-equal.vue
@@ -0,0 +1,9 @@
+<template>
+  <FormKit
+    type="date"
+    label="Select a date after or equal to 2020-01-01"
+    validation="date_after_or_equal:2020-01-01"
+    validation-label="Date"
+    help="The selected date must be after or equal to 2020-01-01"
+  />
+</template>
diff --git a/.examples/rule-date-before-node/rule-date-before-node.vue b/.examples/rule-date-before-node/rule-date-before-node.vue
new file mode 100644
index 00000000..d6962b33
--- /dev/null
+++ b/.examples/rule-date-before-node/rule-date-before-node.vue
@@ -0,0 +1,18 @@
+<template>
+  <FormKit type="group">
+    <FormKit
+      type="date"
+      name="startDate"
+      label="Start Date"
+      help="Select a start date"
+    />
+    <FormKit
+      type="date"
+      name="endDate"
+      label="End Date"
+      validation="date_before_node:startDate"
+      validation-label="End Date"
+      :help="`Select an end date before the start date`"
+    />
+  </FormKit>
+</template>
diff --git a/.examples/rule-date-before-or-equal/rule-date-before-or-equal.vue b/.examples/rule-date-before-or-equal/rule-date-before-or-equal.vue
new file mode 100644
index 00000000..ffa96999
--- /dev/null
+++ b/.examples/rule-date-before-or-equal/rule-date-before-or-equal.vue
@@ -0,0 +1,9 @@
+<template>
+  <FormKit
+    type="date"
+    label="Select a date before or equal to 2020-01-01"
+    validation="date_before_or_equal:2020-01-01"
+    validation-label="Date"
+    help="The selected date must be before 2020-01-01"
+  />
+</template>
diff --git a/.examples/taglist/taglist-option-groups.vue b/.examples/taglist/taglist-option-groups.vue
new file mode 100644
index 00000000..fa9fd6c6
--- /dev/null
+++ b/.examples/taglist/taglist-option-groups.vue
@@ -0,0 +1,19 @@
+<script setup>
+import citiesByState from './citiesByState.js'
+</script>
+
+<template>
+  <FormKit type="form" #default="{ value }" :actions="false">
+    <FormKit
+      type="taglist"
+      name="most_populous_cities"
+      label="Choose your favorite countries"
+      placeholder="New York, Los Angeles..."
+      :options="citiesByState"
+      multiple
+    />
+    <pre wrap>{{ value }}</pre>
+  </FormKit>
+</template>
+
+<style></style>
diff --git a/.examples/unit/unit-decimals.vue b/.examples/unit/unit-decimals.vue
new file mode 100644
index 00000000..7ca25f4f
--- /dev/null
+++ b/.examples/unit/unit-decimals.vue
@@ -0,0 +1,27 @@
+<script setup>
+const initialValues = {
+  input_1: 100,
+  input_2: 100,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="liter"
+      name="input_1"
+      label="5 decimals allowed"
+      decimals="5"
+    />
+    <FormKit
+      type="unit"
+      unit="liter"
+      name="input_2"
+      label="Minimum of 2 decimals"
+      min-decimals="2"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>
diff --git a/.examples/unit/unit-display.vue b/.examples/unit/unit-display.vue
new file mode 100644
index 00000000..144494de
--- /dev/null
+++ b/.examples/unit/unit-display.vue
@@ -0,0 +1,36 @@
+<script setup>
+const initialValues = {
+  narrow: 100,
+  short: 100,
+  long: 100,
+  empty: 100,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="narrow"
+      unit-display="narrow"
+      label="Narrow"
+    />
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="short"
+      unit-display="short"
+      label="Short"
+    />
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="long"
+      unit-display="long"
+      label="Long"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>
diff --git a/.examples/unit/unit-locale.vue b/.examples/unit/unit-locale.vue
new file mode 100644
index 00000000..84308fb0
--- /dev/null
+++ b/.examples/unit/unit-locale.vue
@@ -0,0 +1,35 @@
+<script setup>
+const initialValues = {
+  input_1: 100,
+  input_2: 100,
+  input_3: 100,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="input_1"
+      unit-display="long"
+      display-locale="en-US"
+    />
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="input_2"
+      unit-display="long"
+      display-locale="de-DE"
+    />
+    <FormKit
+      type="unit"
+      unit="kilogram"
+      name="input_3"
+      unit-display="long"
+      display-locale="zh-CN"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>
diff --git a/.examples/unit/unit-min-max.vue b/.examples/unit/unit-min-max.vue
new file mode 100644
index 00000000..d7a49c65
--- /dev/null
+++ b/.examples/unit/unit-min-max.vue
@@ -0,0 +1,27 @@
+<script setup>
+const initialValues = {
+  input_1: 100,
+  input_2: 0,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="millisecond"
+      name="input_1"
+      label="Min of 100"
+      min="100"
+    />
+    <FormKit
+      type="unit"
+      unit="millisecond"
+      name="input_2"
+      label="Max of 100"
+      max="100"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>
diff --git a/.examples/unit/unit-step.vue b/.examples/unit/unit-step.vue
new file mode 100644
index 00000000..b0a65e9d
--- /dev/null
+++ b/.examples/unit/unit-step.vue
@@ -0,0 +1,19 @@
+<script setup>
+const initialValues = {
+  input_1: 0,
+}
+</script>
+
+<template>
+  <FormKit type="form" :actions="false" :value="initialValues">
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="centimeter"
+      name="input_1"
+      label="Step of 100"
+      step="100"
+    />
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>
diff --git a/.examples/unit/unit-value-format.vue b/.examples/unit/unit-value-format.vue
new file mode 100644
index 00000000..7bf3d0e4
--- /dev/null
+++ b/.examples/unit/unit-value-format.vue
@@ -0,0 +1,32 @@
+<script setup>
+const initialValues = {
+  input_1: 100,
+  input_2: 100,
+}
+</script>
+
+<template>
+  <FormKit
+    v-slot="{ value }"
+    type="form"
+    :actions="false"
+    :value="initialValues"
+  >
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="year"
+      name="input_1"
+      label="Default formatting"
+    />
+    <FormKit
+      type="unit"
+      unit="year"
+      name="input_2"
+      label="Formatting as string"
+      value-format="string"
+    />
+    <pre wrap>{{ value }}</pre>
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>
diff --git a/.examples/unit/unit.vue b/.examples/unit/unit.vue
new file mode 100644
index 00000000..fc3ea11c
--- /dev/null
+++ b/.examples/unit/unit.vue
@@ -0,0 +1,52 @@
+<script setup>
+const initialValues = {
+  distance: 100,
+  temperature: 100,
+  time: 100,
+  volume: 100,
+  'digital-unit': 100,
+}
+</script>
+
+<template>
+  <FormKit
+    v-slot="{ value }"
+    type="form"
+    :actions="false"
+    :value="initialValues"
+  >
+    <!-- %partial%::html:: -->
+    <FormKit
+      type="unit"
+      unit="kilometer"
+      name="distance"
+      label="Distance in meters"
+    />
+    <FormKit
+      type="unit"
+      unit="celsius"
+      name="temperature"
+      label="Temperature in Celsius"
+    />
+    <FormKit
+      type="unit"
+      unit="nanosecond"
+      name="time"
+      label="Time in nanoseconds"
+    />
+    <FormKit
+      type="unit"
+      unit="fluid-ounce"
+      name="volume"
+      label="Volume in fluid ounces"
+    />
+    <FormKit
+      type="unit"
+      unit="megabyte"
+      name="digital-unit"
+      label="Digital unit in megabytes"
+    />
+    <pre wrap>{{ value }}</pre>
+    <!-- %partial%::html:: -->
+  </FormKit>
+</template>
diff --git a/.examples/unit/unitless.vue b/.examples/unit/unitless.vue
new file mode 100644
index 00000000..57e2933a
--- /dev/null
+++ b/.examples/unit/unitless.vue
@@ -0,0 +1,6 @@
+<template>
+  <FormKit v-slot="{ value }" type="form" :actions="false">
+    <FormKit type="unit" label="No units" name="value" />
+    <pre wrap>{{ value && value.value }}</pre>
+  </FormKit>
+</template>
diff --git a/.examples/unit/value-unit.vue b/.examples/unit/value-unit.vue
new file mode 100644
index 00000000..3342cdb1
--- /dev/null
+++ b/.examples/unit/value-unit.vue
@@ -0,0 +1,12 @@
+<template>
+  <FormKit v-slot="{ value }" type="form" :actions="false">
+    <FormKit
+      type="unit"
+      unit="mile"
+      label="Miles"
+      name="value"
+      value-unit="kilometer"
+    />
+    <pre wrap>In kilometers: {{ value && value.value }}</pre>
+  </FormKit>
+</template>
diff --git a/_install/astro.md b/_install/astro.md
index 12547643..9955e1a0 100644
--- a/_install/astro.md
+++ b/_install/astro.md
@@ -40,7 +40,7 @@ label: "Vue Components"
 Astro does not let you use <code>FormKit</code> directly inside Astro files, so you should create a wrapper around your forms.
 ::
 
-Now you can add FormKit to your Astro Vue components, so that you can create a component inside the components folder:
+Now you can add FormKit to your Astro Vue components by creating a component inside the components folder:
 
 ```html
 <script setup>
diff --git a/_install/cli.md b/_install/cli.md
index d913dcfe..9019aed9 100644
--- a/_install/cli.md
+++ b/_install/cli.md
@@ -6,7 +6,7 @@ At your terminal, run `npx formkit@latest create-app` to start your new project:
 npx formkit@latest create-app
 ```
 
-`create-app` will ask you some questions about your project so it can determine what it needs to install and setup for you:
+`create-app` will ask you some questions about your project so it can determine what it needs to install and set up for you:
 
 ```sh
 ✔ Please enter a name for the project › <your-project-name>
diff --git a/_install/config.md b/_install/config.md
index 8954ff5a..30f19c4d 100644
--- a/_install/config.md
+++ b/_install/config.md
@@ -2,7 +2,7 @@
 
 To configure FormKit, create a FormKit config file in the root of your project and import it into your Vue App.
 
-If you would like to supply your own configuration, you can either extend `defaultConfig` by passing a [configuration object](/essentials/configuration#what-is-defaultconfig) to it, or replace with your own configuration object, which allows for improved tree-shaking (only include the rules and languages you need) and more fine-grained control:
+If you would like to supply your own configuration, you can either extend `defaultConfig` by passing a [configuration object](/essentials/configuration#what-is-defaultconfig) to it, or replace it with your own configuration object, which allows for improved tree-shaking (only include the rules and languages you need) and more fine-grained control:
 
 ::Callout
 ---
diff --git a/_install/nuxt.md b/_install/nuxt.md
index f580625e..8ad810a0 100644
--- a/_install/nuxt.md
+++ b/_install/nuxt.md
@@ -31,4 +31,4 @@ export default defineNuxtConfig({
 })
 ```
 
-Though unstyled, FormKit is now registered using the default config and you can start using the `<FormKit>` component.
+Though unstyled, FormKit is now registered using the default config, and you can start using the `<FormKit>` component.
diff --git a/_install/pro-nuxt.md b/_install/pro-nuxt.md
index de218f69..2aaee686 100644
--- a/_install/pro-nuxt.md
+++ b/_install/pro-nuxt.md
@@ -42,9 +42,9 @@ export default defineFormKitConfig({
 type: "warning"
 label: "Legacy Genesis Theme"
 ---
-If you are using the legacy Genesis CSS, theme then follow the instructions below. 
+If you are using the legacy Genesis CSS theme, then follow the instructions below. 
 
-Note: All Tailwind themes from [themes.formkit.com](https://themes.formkit.com) ship with support for Pro Inputs so the instructions below are not required for Tailwind users.
+Note: All Tailwind themes from [themes.formkit.com](https://themes.formkit.com) ship with support for Pro Inputs, so the instructions below are not required for Tailwind users.
 ::
 
 If you are using the legacy Genesis CSS theme, you will need to install the accompanying Pro CSS as well:
diff --git a/_install/pro.md b/_install/pro.md
index aa9de7a4..5089fd01 100644
--- a/_install/pro.md
+++ b/_install/pro.md
@@ -44,7 +44,7 @@ label: "Legacy Genesis Theme"
 ---
 If you are using the legacy Genesis CSS theme, then follow the instructions below. 
 
-Note: All Tailwind themes from [themes.formkit.com](https://themes.formkit.com) ship with support for Pro Inputs so the instructions below are not required for Tailwind users.
+Note: All Tailwind themes from [themes.formkit.com](https://themes.formkit.com) ship with support for Pro Inputs, so the instructions below are not required for Tailwind users.
 ::
 
 If you are using the legacy Genesis CSS theme, you will need to install the accompanying Pro CSS as well:
diff --git a/_install/styling-css.md b/_install/styling-css.md
index cc0189ca..49dc7829 100644
--- a/_install/styling-css.md
+++ b/_install/styling-css.md
@@ -10,7 +10,7 @@ FormKit now ships much more configurable Tailwind themes available at [themes.fo
 Eventually the legacy Genesis CSS theme will be deprecated and no longer supported by new Pro inputs.
 ::
 
-FormKit ships a (legacy) CSS theme called `genesis` which can be added by installed from the `@formkit/themes` package.
+FormKit ships a (legacy) CSS theme called `genesis` which can be added by installing from the `@formkit/themes` package.
 
 ### CDN Usage
 
@@ -39,7 +39,7 @@ import '@formkit/themes/genesis'
 
 ### Add required icons
 
-By default the icons required by the `genesis` theme will be loaded from CDN when requested. If you prefer to include the icons directly in your bundle for increased perfomance, to avoid any pop-in, or to alleviate possible SSR issues then import the `genesisIcons` set from `@formkit/icons` and spread them into the `icons` property of your FormKit config.
+By default the icons required by the `genesis` theme will be loaded from CDN when requested. If you prefer to include the icons directly in your bundle for increased performance, to avoid any pop-in, or to alleviate possible SSR issues, then import the `genesisIcons` set from `@formkit/icons` and spread them into the `icons` property of your FormKit config.
 
 ```js
 import { genesisIcons } from '@formkit/icons'
diff --git a/_install/styling-tailwind.md b/_install/styling-tailwind.md
index 8a380b48..ff44b29c 100644
--- a/_install/styling-tailwind.md
+++ b/_install/styling-tailwind.md
@@ -4,7 +4,7 @@
 
 ### Adding icons
 
-By default, the icons required by FormKit will be loaded from CDN when requested. If you prefer to include the icons directly in your bundle for increased perfomance, to avoid any pop-in, or to alleviate possible SSR issues, then import the `genesisIcons` set from `@formkit/icons` and spread them into the `icons` property of your FormKit config:
+By default, the icons required by FormKit will be loaded from CDN when requested. If you prefer to include the icons directly in your bundle for increased performance, to avoid any pop-in, or to alleviate possible SSR issues, then import the `genesisIcons` set from `@formkit/icons` and spread them into the `icons` property of your FormKit config:
 
 ```sh
 npm install @formkit/icons
diff --git a/_install/styling-uno.md b/_install/styling-uno.md
index 75225525..bcc8d75a 100644
--- a/_install/styling-uno.md
+++ b/_install/styling-uno.md
@@ -1,6 +1,6 @@
 ### For Tailwind
 
-FormKit ships with a Tailwind version of the Genesis theme. To use this pre-made Tailwind theme in your project import it from `@formkit/themes/tailwindcss/genesis` and add it to your `formkit.config.js`. You'll also want to include the neccessary `genesisIcons` import from `@formkit/icons`.
+FormKit ships with a Tailwind version of the Genesis theme. To use this pre-made Tailwind theme in your project, import it from `@formkit/themes/tailwindcss/genesis` and add it to your `formkit.config.js`. You'll also want to include the necessary `genesisIcons` import from `@formkit/icons`.
 
 ```js
 // formkit.config.js
@@ -18,7 +18,7 @@ export default {
 }
 ```
 
-The `genesis` theme import is nice for brevity, but the Tailwind parser will need to be provided the path to the full theme file in your `node_modules` in order to know which classes are being used. Additionally you should add the `FormKitVariants` plugin to your `tailwind.config.js` in order to make use of helpful FormKit variants such as `formkit-invalid:` in your project.
+The `genesis` theme import is nice for brevity, but the Tailwind parser will need to be provided the path to the full theme file in your `node_modules` in order to know which classes are being used. Additionally, you should add the `FormKitVariants` plugin to your `tailwind.config.js` in order to make use of helpful FormKit variants such as `formkit-invalid:` in your project.
 
 ```js
 // tailwind.config.js
diff --git a/_install/styling-windi.md b/_install/styling-windi.md
index 75225525..bcc8d75a 100644
--- a/_install/styling-windi.md
+++ b/_install/styling-windi.md
@@ -1,6 +1,6 @@
 ### For Tailwind
 
-FormKit ships with a Tailwind version of the Genesis theme. To use this pre-made Tailwind theme in your project import it from `@formkit/themes/tailwindcss/genesis` and add it to your `formkit.config.js`. You'll also want to include the neccessary `genesisIcons` import from `@formkit/icons`.
+FormKit ships with a Tailwind version of the Genesis theme. To use this pre-made Tailwind theme in your project, import it from `@formkit/themes/tailwindcss/genesis` and add it to your `formkit.config.js`. You'll also want to include the necessary `genesisIcons` import from `@formkit/icons`.
 
 ```js
 // formkit.config.js
@@ -18,7 +18,7 @@ export default {
 }
 ```
 
-The `genesis` theme import is nice for brevity, but the Tailwind parser will need to be provided the path to the full theme file in your `node_modules` in order to know which classes are being used. Additionally you should add the `FormKitVariants` plugin to your `tailwind.config.js` in order to make use of helpful FormKit variants such as `formkit-invalid:` in your project.
+The `genesis` theme import is nice for brevity, but the Tailwind parser will need to be provided the path to the full theme file in your `node_modules` in order to know which classes are being used. Additionally, you should add the `FormKitVariants` plugin to your `tailwind.config.js` in order to make use of helpful FormKit variants such as `formkit-invalid:` in your project.
 
 ```js
 // tailwind.config.js
diff --git a/_install/tailwind-install-instructions.md b/_install/tailwind-install-instructions.md
index 8a2b8913..36fd3e2f 100644
--- a/_install/tailwind-install-instructions.md
+++ b/_install/tailwind-install-instructions.md
@@ -19,7 +19,7 @@ Alternatively, you can use the FormKit CLI to select a theme for your project. R
 npx formkit@latest theme
 ```
 
-This command will create a `formkit.theme.{ts|js}` file in the root of your project. To complete the setup you will need use the `rootClasses` from this theme file in your `formkit.config.{ts|js}`:
+This command will create a `formkit.theme.{ts|js}` file in the root of your project. To complete the setup you will need to use the `rootClasses` from this theme file in your `formkit.config.{ts|js}`:
 
 ```js
 // formkit.config.ts
diff --git a/api-reference/context.md b/api-reference/context.md
index 255ab776..2fb1ea38 100644
--- a/api-reference/context.md
+++ b/api-reference/context.md
@@ -175,11 +175,26 @@ Current state of the input:
    * list, or form, this is true if any children have errors on them.
    */
   errors: boolean
+  /**
+   * Determines if the input should be considered "invalid" — note that this
+   * is not the opposite of the valid state. A valid input is one where the
+   * input is not loading, not pending validation, not unsettled, and
+   * passes all validation rules. An invalid input is one whose validation
+   * rules are not explicitly not passing, and those rules are visible to the user.
+   */
+  invalid: boolean | undefined
   /**
    * The loading state of the input or form. This property is only added while
    * the input is loading and is removed when loading is complete.
    */
   loading: true | undefined
+  /**
+   * If the input is passing all validation rules. This state will remain
+   * in its current state until validation has completed, so if the input
+   * is not passing, and you have a long running validation rule this will
+   * remaining not passing until that rule has resolved.
+   */
+  passing?: boolean
   /**
    * Indicates if the input is has the "required" validation rule.
    */
diff --git a/changelog-pro/100.v.0.126.12.md b/changelog-pro/100.v.0.126.12.md
new file mode 100644
index 00000000..2bb03c8a
--- /dev/null
+++ b/changelog-pro/100.v.0.126.12.md
@@ -0,0 +1,7 @@
+## 0.126.12
+
+### July 1, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where `loadOnCreated` prop would not verify `optionsLoader` before invoking [#1434](https://github.com/formkit/formkit/issues/1434).
\ No newline at end of file
diff --git a/changelog-pro/101.v.0.126.13.md b/changelog-pro/101.v.0.126.13.md
new file mode 100644
index 00000000..ac69e7e9
--- /dev/null
+++ b/changelog-pro/101.v.0.126.13.md
@@ -0,0 +1,7 @@
+## 0.126.13
+
+### July 11, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where querySelector in repeater drag and drop feature was used incorrectly [#1417](https://github.com/formkit/formkit/issues/1417).
\ No newline at end of file
diff --git a/changelog-pro/102.v.0.126.14.md b/changelog-pro/102.v.0.126.14.md
new file mode 100644
index 00000000..4a97c0db
--- /dev/null
+++ b/changelog-pro/102.v.0.126.14.md
@@ -0,0 +1,7 @@
+## 0.126.14
+
+### July 29, 2024
+
+### 🐛 Bug fixes
+
+- Fixes regression caused by performance update where date object was converted into tuple [#1439](https://github.com/formkit/formkit/issues/1439).
\ No newline at end of file
diff --git a/changelog-pro/103.v.0.126.15.md b/changelog-pro/103.v.0.126.15.md
new file mode 100644
index 00000000..8b9845f0
--- /dev/null
+++ b/changelog-pro/103.v.0.126.15.md
@@ -0,0 +1,11 @@
+## 0.126.15
+
+### August 1, 2024
+
+### 🐛 Bug fixes
+
+- Fixes mask issue where autofill on Chrome browser would not update the input's value [#1315](https://github.com/formkit/formkit/issues/1315).
+
+- Fixes issue where the repeater would not render its controls and base height when the default slot was empty [#1465](https://github.com/formkit/formkit/issues/1465).
+
+- Fixes issue where mask input type attribute was incorrect [#1467](https://github.com/formkit/formkit/issues/1467).
\ No newline at end of file
diff --git a/changelog-pro/104.v.0.126.16.md b/changelog-pro/104.v.0.126.16.md
new file mode 100644
index 00000000..d941bf0a
--- /dev/null
+++ b/changelog-pro/104.v.0.126.16.md
@@ -0,0 +1,7 @@
+## 0.126.16
+
+### August 1, 2024
+
+### 🐛 Bug fixes
+
+- Fixes mask issue related to [#1315](https://github.com/formkit/formkit/issues/1315) where autofill would work on the first time but not the second.
\ No newline at end of file
diff --git a/changelog-pro/105.v.0.127.0.md b/changelog-pro/105.v.0.127.0.md
new file mode 100644
index 00000000..00e7e84b
--- /dev/null
+++ b/changelog-pro/105.v.0.127.0.md
@@ -0,0 +1,9 @@
+## 0.127.0
+
+### August 20, 2024
+
+### 💪 New Features
+
+- Adds [`unit` input](/inputs/unit).
+
+
diff --git a/changelog-pro/106.v0.127.1.md b/changelog-pro/106.v0.127.1.md
new file mode 100644
index 00000000..cafec809
--- /dev/null
+++ b/changelog-pro/106.v0.127.1.md
@@ -0,0 +1,10 @@
+## 0.127.1
+
+### September 11, 2024
+
+### 💪 New Features
+
+- Makes `unit` property optional in [`unit` input](/inputs/unit) to allow for
+ unitless values.
+
+
diff --git a/changelog-pro/107.v0.127.2.md b/changelog-pro/107.v0.127.2.md
new file mode 100644
index 00000000..a87a8fc9
--- /dev/null
+++ b/changelog-pro/107.v0.127.2.md
@@ -0,0 +1,8 @@
+## 0.127.2
+
+### September 13, 2024
+
+### 🐛 Bug fixes
+
+- Fixes `unit` and `currency` input issue [#1315](https://github.com/formkit/formkit/issues/1315) formatting was not working correctly when
+`min-decimals` prop was set.
\ No newline at end of file
diff --git a/changelog-pro/108.v0.127.3.md b/changelog-pro/108.v0.127.3.md
new file mode 100644
index 00000000..1935f3ea
--- /dev/null
+++ b/changelog-pro/108.v0.127.3.md
@@ -0,0 +1,7 @@
+## 0.127.3
+
+### October 2, 2024
+
+### 🐛 Bug fixes
+
+- Fixes `togglebuttons` typing issue [#1513](https://github.com/formkit/formkit/issues/1513).
\ No newline at end of file
diff --git a/changelog-pro/109.v0.127.4.md b/changelog-pro/109.v0.127.4.md
new file mode 100644
index 00000000..f07ee24c
--- /dev/null
+++ b/changelog-pro/109.v0.127.4.md
@@ -0,0 +1,7 @@
+## 0.127.4
+
+### October 2, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue that caused inputs to disable when using a report-only content security policy.
\ No newline at end of file
diff --git a/changelog-pro/110.v0.127.5.md b/changelog-pro/110.v0.127.5.md
new file mode 100644
index 00000000..3c30d082
--- /dev/null
+++ b/changelog-pro/110.v0.127.5.md
@@ -0,0 +1,7 @@
+## 0.127.5
+
+### October 8, 2024
+
+### 🐛 Bug fixes
+
+- Fixes `autocomplete` typing issue [#1520](https://github.com/formkit/formkit/issues/1520).
\ No newline at end of file
diff --git a/changelog-pro/63.v.0.122.17.md b/changelog-pro/63.v.0.122.17.md
index 802dfd94..b779c62c 100644
--- a/changelog-pro/63.v.0.122.17.md
+++ b/changelog-pro/63.v.0.122.17.md
@@ -2,6 +2,6 @@
 
 ### April 22, 2024
 
-### 🐛 Features
+### 💪 New Features
 
 - Makes `optionsLoader` function available as a prop for dropdown family inputs.
\ No newline at end of file
diff --git a/changelog-pro/68.v.0.123.0.md b/changelog-pro/68.v.0.123.0.md
index 7c1bd9e8..ed04db22 100644
--- a/changelog-pro/68.v.0.123.0.md
+++ b/changelog-pro/68.v.0.123.0.md
@@ -2,9 +2,15 @@
 
 ### April 25, 2024
 
-### ⚠️ Breaking Changes
+::Callout
+---
+type: "warning"
+name: "Breaking Changes"
+---
 
-- The rating input has been rewritten to be based on a radio group to provide better accessibility. While the API remains the same, be sure to update your theme at `themes.formkit.com`.
+The rating input has been rewritten to be based on a radio group to provide better accessibility. While the API remains the same, be sure to update your theme at `themes.formkit.com`.
+
+::
 
 ### 💪 New Features
 
diff --git a/changelog-pro/69.v.0.123.1.md b/changelog-pro/69.v.0.123.1.md
new file mode 100644
index 00000000..11c23df5
--- /dev/null
+++ b/changelog-pro/69.v.0.123.1.md
@@ -0,0 +1,8 @@
+## 0.123.1
+
+### April 25, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue with `autocomplete` and `taglist` inputs where cloning during search prevented lookup of values with pojos.
+
diff --git a/changelog-pro/70.v.0.123.2.md b/changelog-pro/70.v.0.123.2.md
new file mode 100644
index 00000000..14ee125a
--- /dev/null
+++ b/changelog-pro/70.v.0.123.2.md
@@ -0,0 +1,7 @@
+## 0.123.2
+
+### April 26, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue [#1335](https://github.com/formkit/formkit/issues/1335) where the `options` prop typings for dropdown family inputs were incorrect.
diff --git a/changelog-pro/71.v.0.123.3.md b/changelog-pro/71.v.0.123.3.md
new file mode 100644
index 00000000..a91a05f9
--- /dev/null
+++ b/changelog-pro/71.v.0.123.3.md
@@ -0,0 +1,7 @@
+## 0.123.3
+
+### April 26, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where filtering option groups were not being filtered down via search to individual listitem.
diff --git a/changelog-pro/72.v.0.123.4.md b/changelog-pro/72.v.0.123.4.md
new file mode 100644
index 00000000..9829a932
--- /dev/null
+++ b/changelog-pro/72.v.0.123.4.md
@@ -0,0 +1,7 @@
+## 0.123.4
+
+### April 26, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where attempting to deselect a list item from the dropdown family inputs with a value of pojo was not working as expected.
diff --git a/changelog-pro/73.v.0.123.5.md b/changelog-pro/73.v.0.123.5.md
new file mode 100644
index 00000000..22beb265
--- /dev/null
+++ b/changelog-pro/73.v.0.123.5.md
@@ -0,0 +1,13 @@
+## 0.123.5
+
+### April 26, 2024
+
+### 🐛 Bug fixes
+
+- Fixes dropdown family issue where the loading state of all selections would end at the same time, even if their await times were different because the values were pojos.
+
+- Fixes dropdown family issue where value of pojo would sometimes cause issues with setting the active descendant.
+
+- Fixes dropdown family where active selection via. keyhandlers on taglist tags was not working properly.
+
+- Prevents focus state of tag via. keydown if text input is present.
diff --git a/changelog-pro/74.v.0.123.6.md b/changelog-pro/74.v.0.123.6.md
new file mode 100644
index 00000000..5d3d2566
--- /dev/null
+++ b/changelog-pro/74.v.0.123.6.md
@@ -0,0 +1,7 @@
+## 0.123.6
+
+### April 27, 2024
+
+### 🐛 Bug fixes
+
+- Fixes dropdown family issue where hydration mismatch occurs when loading option with value of pojo that can't be reduced to a string as temporary label.
diff --git a/changelog-pro/75.v.0.124.0.md b/changelog-pro/75.v.0.124.0.md
new file mode 100644
index 00000000..17e4d977
--- /dev/null
+++ b/changelog-pro/75.v.0.124.0.md
@@ -0,0 +1,7 @@
+## 0.124.0
+
+### May 7, 2024
+
+### 💪 New features
+
+- Adds [`currency` input](/inputs/currency).
diff --git a/changelog-pro/76.v.0.124.1.md b/changelog-pro/76.v.0.124.1.md
new file mode 100644
index 00000000..a1d37b0e
--- /dev/null
+++ b/changelog-pro/76.v.0.124.1.md
@@ -0,0 +1,7 @@
+## 0.124.1
+
+### May 7, 2024
+
+### 🐛 Bug fixes
+
+- Fixes max recursion bug in `currency` input in Safari.
diff --git a/changelog-pro/77.v.0.124.2.md b/changelog-pro/77.v.0.124.2.md
new file mode 100644
index 00000000..2f073a9e
--- /dev/null
+++ b/changelog-pro/77.v.0.124.2.md
@@ -0,0 +1,7 @@
+## 0.124.2
+
+### May 7, 2024
+
+### 🐛 Bug fixes
+
+- Removes type `tel` from `currency` input. Now uses attr `inputmode` instead.
diff --git a/changelog-pro/78.v.0.125.0.md b/changelog-pro/78.v.0.125.0.md
new file mode 100644
index 00000000..9df7f2af
--- /dev/null
+++ b/changelog-pro/78.v.0.125.0.md
@@ -0,0 +1,7 @@
+## 0.125.0
+
+### May 8, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue preventing tree shaking of FormKit Pro inputs.
diff --git a/changelog-pro/79.v.0.125.1.md b/changelog-pro/79.v.0.125.1.md
new file mode 100644
index 00000000..3bf4f57c
--- /dev/null
+++ b/changelog-pro/79.v.0.125.1.md
@@ -0,0 +1,8 @@
+## 0.125.1
+
+### May 9, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issues with dropdown family inputs introduced by 0.125.0 [#1346](https://github.com/formkit/formkit/issues/1346) and 
+[#1345](https://github.com/formkit/formkit/issues/1345)
diff --git a/changelog-pro/80.v.0.125.2.md b/changelog-pro/80.v.0.125.2.md
new file mode 100644
index 00000000..a8a9bee1
--- /dev/null
+++ b/changelog-pro/80.v.0.125.2.md
@@ -0,0 +1,7 @@
+## 0.125.2
+
+### May 9, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where Slider input `min` and `max` values were not being applied reactively to associated inputs when `show-inputs` prop was enabled. [#1341](https://github.com/formkit/formkit/issues/1341)
diff --git a/changelog-pro/81.v.0.125.3.md b/changelog-pro/81.v.0.125.3.md
new file mode 100644
index 00000000..05c80485
--- /dev/null
+++ b/changelog-pro/81.v.0.125.3.md
@@ -0,0 +1,7 @@
+## 0.125.3
+
+### May 10, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where Slider number inputs were unable to accept decimal input. [#1341](https://github.com/formkit/formkit/issues/1341)
diff --git a/changelog-pro/82.v.0.125.4.md b/changelog-pro/82.v.0.125.4.md
new file mode 100644
index 00000000..e7f920d8
--- /dev/null
+++ b/changelog-pro/82.v.0.125.4.md
@@ -0,0 +1,7 @@
+## 0.125.4
+
+### May 10, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where `currency` input when using either the `max` or `min` prop did not allow the use of decimal points [#1344](https://github.com/formkit/formkit/issues/1344).
diff --git a/changelog-pro/83.v.0.125.5.md b/changelog-pro/83.v.0.125.5.md
new file mode 100644
index 00000000..1c9a28ff
--- /dev/null
+++ b/changelog-pro/83.v.0.125.5.md
@@ -0,0 +1,13 @@
+## 0.125.5
+
+### May 14, 2024
+
+### 💪 New Features
+
+- The `colorpicker` input now has an `alpha` prop which allows users to disable the alpha channel in the color picker [#1302](https://github.com/formkit/formkit/issues/1302)
+
+### 🐛 Bug fixes
+
+- Fixes issue where `dropdown` family inputs' listbox position would be incorrect when opened, inverted, and filtered while in `popover` mode. [#1310](https://github.com/formkit/formkit/issues/1310)
+- Fixes issue where `dropdown` family inputs could trigger a javascript error due to having `id` attributes that were valid yet incompatible with `querySelector` syntax. [#1313](https://github.com/formkit/formkit/issues/1313)
+- Fixes issue where linked inputs for the `slider` would not have reactive `min` and `max` properties. [#1341](https://github.com/formkit/formkit/issues/1341)
diff --git a/changelog-pro/84.v.0.125.6.md b/changelog-pro/84.v.0.125.6.md
new file mode 100644
index 00000000..66b7cdcd
--- /dev/null
+++ b/changelog-pro/84.v.0.125.6.md
@@ -0,0 +1,7 @@
+## 0.125.6
+
+### May 14, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where schema sections in Pro inputs with existing `meta` keys were not being assigned programmatic `meta` values. This was preventing the `eachSection` helper function from being able access some sections — which in turn was preventing the AutoAnimate plugin from being able to be applied to repeater items. Whew... this one was a doozy. 😅
\ No newline at end of file
diff --git a/changelog-pro/85.v.0.125.7.md b/changelog-pro/85.v.0.125.7.md
new file mode 100644
index 00000000..518f85cc
--- /dev/null
+++ b/changelog-pro/85.v.0.125.7.md
@@ -0,0 +1,7 @@
+## 0.125.7
+
+### May 14, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where auto-animate plugin would conflict with drag and drop animations on repeater input.
\ No newline at end of file
diff --git a/changelog-pro/86.v.0.125.8.md b/changelog-pro/86.v.0.125.8.md
new file mode 100644
index 00000000..b8861707
--- /dev/null
+++ b/changelog-pro/86.v.0.125.8.md
@@ -0,0 +1,7 @@
+## 0.125.8
+
+### May 16, 2024
+
+### 🐛 Bug fixes
+
+- Checks that document contains popover element before attempting mutation on it to prevent possible unhandled exceptions with `datepicker` panel.
\ No newline at end of file
diff --git a/changelog-pro/87.v.0.125.9.md b/changelog-pro/87.v.0.125.9.md
new file mode 100644
index 00000000..326dae3a
--- /dev/null
+++ b/changelog-pro/87.v.0.125.9.md
@@ -0,0 +1,7 @@
+## 0.125.9
+
+### May 21, 2024
+
+### 🐛 Bug fixes
+
+- Fixes missing `label` slot in type definition of `currency` input.
\ No newline at end of file
diff --git a/changelog-pro/88.v.0.126.0.md b/changelog-pro/88.v.0.126.0.md
new file mode 100644
index 00000000..a70cf8e3
--- /dev/null
+++ b/changelog-pro/88.v.0.126.0.md
@@ -0,0 +1,12 @@
+## 0.126.0
+
+### May 24, 2024
+
+### 💪 New features
+
+- Adds ability to search and filter target options of the `transferlist` input [#1374](https://github.com/formkit/formkit/issues/1374).
+
+
+### 🐛 Bug fixes
+
+- Fixes `transferlist` accessibility issue [#1364](https://github.com/formkit/formkit/issues/1364).
\ No newline at end of file
diff --git a/changelog-pro/89.v.0.126.1.md b/changelog-pro/89.v.0.126.1.md
new file mode 100644
index 00000000..adea1339
--- /dev/null
+++ b/changelog-pro/89.v.0.126.1.md
@@ -0,0 +1,10 @@
+## 0.126.1
+
+### May 24, 2024
+
+
+### 🐛 Bug fixes
+
+- Fixes `transferlist` issue where target options that had been loaded by `option-loader` could not be filtered properly.
+
+- Fixes `transferlist` issue where occasionally the active-descendant was not set during filtration.
\ No newline at end of file
diff --git a/changelog-pro/90.v.0.126.2.md b/changelog-pro/90.v.0.126.2.md
new file mode 100644
index 00000000..32a0c4a7
--- /dev/null
+++ b/changelog-pro/90.v.0.126.2.md
@@ -0,0 +1,8 @@
+## 0.126.2
+
+### May 24, 2024
+
+
+### 🐛 Bug fixes
+
+- Fixes `datepicker` hydration attribute mismatch [#1152](https://github.com/formkit/formkit/issues/1152).
\ No newline at end of file
diff --git a/changelog-pro/91.v.0.126.3.md b/changelog-pro/91.v.0.126.3.md
new file mode 100644
index 00000000..a58e302d
--- /dev/null
+++ b/changelog-pro/91.v.0.126.3.md
@@ -0,0 +1,8 @@
+## 0.126.3
+
+### May 24, 2024
+
+
+### 🐛 Bug fixes
+
+- Fixes `datepicker` "selected" date issue related to usage of `max-date` being set before current date [#1355](https://github.com/formkit/formkit/issues/1355). 
\ No newline at end of file
diff --git a/changelog-pro/92.v.0.126.4.md b/changelog-pro/92.v.0.126.4.md
new file mode 100644
index 00000000..a7fdad25
--- /dev/null
+++ b/changelog-pro/92.v.0.126.4.md
@@ -0,0 +1,10 @@
+## 0.126.4
+
+### May 28, 2024
+
+
+### 🐛 Bug fixes
+
+- Fixes `datepicker` min-date and max-date display error issue [#1101](https://github.com/formkit/formkit/issues/1101). 
+
+- Fixes `autocomplete` of type multiple issue with tabindex of 1: [#1382](https://github.com/formkit/formkit/issues/1382).
\ No newline at end of file
diff --git a/changelog-pro/93.v.0.126.5.md b/changelog-pro/93.v.0.126.5.md
new file mode 100644
index 00000000..cdf50ccf
--- /dev/null
+++ b/changelog-pro/93.v.0.126.5.md
@@ -0,0 +1,8 @@
+## 0.126.5
+
+### June 3, 2024
+
+
+### 🏎 Performance
+
+- Performance improvement for `datepicker` input when hovering over day cells [#1360](https://github.com/formkit/formkit/issues/1360). 
\ No newline at end of file
diff --git a/changelog-pro/94.v.0.126.6.md b/changelog-pro/94.v.0.126.6.md
new file mode 100644
index 00000000..839adde8
--- /dev/null
+++ b/changelog-pro/94.v.0.126.6.md
@@ -0,0 +1,9 @@
+## 0.126.6
+
+### June 3, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where in certain cases datepicker would set parent form as `dirty` with initial value [#844](https://github.com/formkit/formkit/issues/844). 
+
+- Fixes issue where `datepicker` min-date prop was not reactive [#976](https://github.com/formkit/formkit/issues/976). 
\ No newline at end of file
diff --git a/changelog-pro/95.v.0.126.7.md b/changelog-pro/95.v.0.126.7.md
new file mode 100644
index 00000000..60deb8fb
--- /dev/null
+++ b/changelog-pro/95.v.0.126.7.md
@@ -0,0 +1,7 @@
+## 0.126.7
+
+### June 5, 2024
+
+### 🐛 Bug fixes
+
+- Fixes `datepicker` issue where navigating outside of the current month would close the datepicker [#1394](https://github.com/formkit/formkit/issues/1394). 
\ No newline at end of file
diff --git a/changelog-pro/96.v.0.126.8.md b/changelog-pro/96.v.0.126.8.md
new file mode 100644
index 00000000..da21e2a3
--- /dev/null
+++ b/changelog-pro/96.v.0.126.8.md
@@ -0,0 +1,7 @@
+## 0.126.8
+
+### June 5, 2024
+
+### 🐛 Bug fixes
+
+- Fixes `currency` issue where FormKit's DOM input event was not emitted [#1366](https://github.com/formkit/formkit/issues/1366). 
\ No newline at end of file
diff --git a/changelog-pro/97.v.0.126.9.md b/changelog-pro/97.v.0.126.9.md
new file mode 100644
index 00000000..a2633da3
--- /dev/null
+++ b/changelog-pro/97.v.0.126.9.md
@@ -0,0 +1,7 @@
+## 0.126.9
+
+### June 5, 2024
+
+### 🐛 Bug fixes
+
+- Fixes tabfocus issue for datepicker and mask where tabbing into input field would always select the last enum. [#999](https://github.com/formkit/formkit/issues/999).
\ No newline at end of file
diff --git a/changelog-pro/98.v.0.126.10.md b/changelog-pro/98.v.0.126.10.md
new file mode 100644
index 00000000..fb9d7590
--- /dev/null
+++ b/changelog-pro/98.v.0.126.10.md
@@ -0,0 +1,7 @@
+## 0.126.10
+
+### June 10, 2024
+
+### 🐛 Bug fixes
+
+- Fixes issue where programatically setting the value of the `autocomplete` input with type `multiple` would trigger a focus state on the input itself [#1400](https://github.com/formkit/formkit/issues/1400).
\ No newline at end of file
diff --git a/changelog-pro/99.v.0.126.11.md b/changelog-pro/99.v.0.126.11.md
new file mode 100644
index 00000000..8eec5f4c
--- /dev/null
+++ b/changelog-pro/99.v.0.126.11.md
@@ -0,0 +1,7 @@
+## 0.126.11
+
+### June 13, 2024
+
+### 🐛 Bug fixes
+
+- Fixes build issue with FormKit Pro legacy genesis styles.
\ No newline at end of file
diff --git a/changelog/32.v1.6.2.md b/changelog/32.v1.6.2.md
deleted file mode 100644
index 198eb653..00000000
--- a/changelog/32.v1.6.2.md
+++ /dev/null
@@ -1,9 +0,0 @@
-## 1.6.2
-
-### April 8, 2024
-
-### 🐛 Bug fixes
-
-- Widens unocss compatibility for the `@formkit/themes` package ([#1281](https://github.com/formkit/formkit/issues/1281)).
-- Small German translation fix ([#1293](https://github.com/formkit/formkit/issues/1293)).
-- Adds additional dependencies to the `create-app` cli command ([#1233](https://github.com/formkit/formkit/issues/1233)).
\ No newline at end of file
diff --git a/changelog/33.v1.6.2.md b/changelog/33.v1.6.2.md
new file mode 100644
index 00000000..c05215b1
--- /dev/null
+++ b/changelog/33.v1.6.2.md
@@ -0,0 +1,8 @@
+## 1.6.2
+
+### April 8, 2024
+
+### 🐛 Bug fixes
+- Widens unocss compatibility for the @formkit/themes package [#1281](https://github.com/formkit/formkit/pull/1281).
+- Small German translation fix [#1293](https://github.com/formkit/formkit/issues/1293).
+- Adds additional dependencies to the create-app cli command [#1233](https://github.com/formkit/formkit/issues/1233).
diff --git a/changelog/34.v1.6.3.md b/changelog/34.v1.6.3.md
new file mode 100644
index 00000000..479e1ca2
--- /dev/null
+++ b/changelog/34.v1.6.3.md
@@ -0,0 +1,12 @@
+## 1.6.3
+
+### May 14, 2024
+
+### 💪 New Features
+- New clear on submit option for local storage
+- New `context.state.passing` property indicates whether or not a given input is passing all its validation rules.
+
+### 🐛 Bug fixes
+- Fixes auto animate plugin for FormKit components ([#1354](https://github.com/formkit/formkit/issues/1354)).
+- On multi-step inputs `beforeStepChange` is no longer called when the step cannot be advanced ([#1191](https://github.com/formkit/formkit/issues/1191)).
+- Quickly typing into an input no longer causes an invalid state flicker ([#1324](https://github.com/formkit/formkit/issues/1324)).
\ No newline at end of file
diff --git a/changelog/35.v1.6.4.md b/changelog/35.v1.6.4.md
new file mode 100644
index 00000000..0cfe70a6
--- /dev/null
+++ b/changelog/35.v1.6.4.md
@@ -0,0 +1,8 @@
+## 1.6.4
+
+### May 28, 2024
+
+### 🐛 Bug fixes
+
+- Fixes a bug with validation rule observers that caused rules with external dependencies to stop firing when placed in a certain sequence ([#1371](https://github.com/formkit/formkit/issues/1371)).
+- Fixes a bug that caused inputs with no validation rules to receive the `data-invalid` attribute on reset (regression in 1.6.3) ([#1376](https://github.com/formkit/formkit/issues/1376))
\ No newline at end of file
diff --git a/changelog/36.v1.6.5.md b/changelog/36.v1.6.5.md
new file mode 100644
index 00000000..32960ec3
--- /dev/null
+++ b/changelog/36.v1.6.5.md
@@ -0,0 +1,7 @@
+## 1.6.5
+
+### May 28, 2024
+
+### 🐛 Bug fixes
+
+- Fixes a bug that causes the `data-invalid` attribute to not be removed when conditionally removing validation rules ([#1384](https://github.com/formkit/formkit/issues/1384)).
diff --git a/changelog/37.v1.6.6.md b/changelog/37.v1.6.6.md
new file mode 100644
index 00000000..acdf4e8a
--- /dev/null
+++ b/changelog/37.v1.6.6.md
@@ -0,0 +1,7 @@
+## 1.6.6
+
+### Sept 12, 2024
+
+### 🐛 Bug fixes
+
+- Fixes a bug that caused cleanup issues in Vue 3.5+ ([#1496](https://github.com/formkit/formkit/issues/1496)).
diff --git a/changelog/38.v1.6.7.md b/changelog/38.v1.6.7.md
new file mode 100644
index 00000000..bfae82d1
--- /dev/null
+++ b/changelog/38.v1.6.7.md
@@ -0,0 +1,13 @@
+## 1.6.7
+
+### Sept 18, 2024
+
+## 🐛 Bug Fixes
+* Fixes compatibility with Vue 3.5.6 ([#1501](https://github.com/formkit/formkit/pull/1501))
+* Indicates compatibility with new v4 nuxt ([#1418](https://github.com/formkit/formkit/pull/1418))
+* Fixes casing for the `type` prop of `datetime-local` input ([#1486](https://github.com/formkit/formkit/pull/1486))
+* Keeps placeholder for null or undefined as well ([#1474](https://github.com/formkit/formkit/pull/1474))
+
+## 💪 New features
+
+* New validation rules `date_before_or_equal`, `date_after_or_equal`, `date_before_node`, `date_after_node`
diff --git a/essentials/custom-inputs.md b/essentials/custom-inputs.md
index 5bc3a21b..950a2959 100644
--- a/essentials/custom-inputs.md
+++ b/essentials/custom-inputs.md
@@ -49,7 +49,7 @@ New inputs require an [input definition](#input-definition). Input definitions c
 
 ### Input definition
 
-Input definitions are objects that contain the necessary information to initialize an input — like which [props to accept](#adding-props), what [schema or component to render](#schema-vs-component), and if any additional [feature functions](#adding-features) should be included. The shape of the definition object is:
+Input definitions are objects that contain the necessary information to initialize an input — like which [props to accept](#adding-props), what [schema or component to render](#schema-vs-component), and any additional [feature functions](#adding-features) that should be included. The shape of the definition object is:
 
 ```js
 {
@@ -78,7 +78,7 @@ file: "_content/_examples/custom-input/custom-input.vue"
 ---
 ::
 
-Even though this simplistic example doesn’t contain any input/output mechanism, it still qualifies as a full input. It can have a value, run validation rules (they wont be displayed, but they can block form submissions), and execute plugins. Fundamentally, all inputs are [core nodes](/essentials/architecture#node) and the input’s definition provides the mechanisms to interact with that node.
+Even though this simple example doesn’t contain any input/output mechanism, it still qualifies as a full input. It can have a value, run validation rules (they won’t be displayed, but they can block form submissions), and execute plugins. Fundamentally, all inputs are [core nodes](/essentials/architecture#node) and the input’s definition provides the mechanisms to interact with that node.
 
 ### Global custom inputs
 
@@ -167,7 +167,7 @@ The primary takeaway is if you are planning to use a custom input on multiple pr
 
 ### Future proofing
 
-In the future, FormKit may expand to support additional frameworks (ex: React or Svelte. If this is something you are interested in, <a href="mailto:feedback@formkit.com">let us know!</a>.) Writing your inputs using schema means your inputs will be compatible (perhaps minimal changes) with those frameworks too.
+In the future, FormKit may expand to support additional frameworks (ex: React or Svelte. If this is something you are interested in, <a href="mailto:feedback@formkit.com">let us know!</a>.) Writing your inputs using schema means your inputs will be compatible (perhaps with minimal changes) with those frameworks too.
 
 ## Schema inputs
 
@@ -198,7 +198,7 @@ The `input` section in the diagram above is typically what you’ll swap out whe
 
 #### Using `createInput` to extend the base schema
 
-To create inputs using the base schema you can use the `createInput()` utility from the `@formkit/vue` package. This function accepts 3 arguments:
+To create inputs using the base schema, you can use the `createInput()` utility from the `@formkit/vue` package. This function accepts 3 arguments:
 
 - (required) A schema node _or_ a Vue component, which it inserts into the base schema at the `input` section (see diagram above).
 - (optional) An object of [input definition](#input-definition) properties to merge with an auto-generated one.
@@ -246,12 +246,12 @@ In the above example, we were able to re-create the same features as the `create
 type: "info"
 label: "Custom inputs vs Vue component wrappers"
 ---
-When writing a custom FormKit input while using Vue components it is recommended to not use the FormKit components inside, custom inputs are meant to be written like regular inputs with the advantage of using the FormKit context prop to add the functionality that FormKit requires, if your case is to use a FormKit component with default values, it is recommended instead to use a Vue component wrapper and directly call that component, FormKit inputs work in any level of nesting, or you can also consider using FormKit's <a href="/guides/export-and-restructure-inputs">input export feature</a> to add features and change attrs and props.
+When writing a custom FormKit input while using Vue components, it is recommended to not use the FormKit components inside. Custom inputs are meant to be written like regular inputs with the advantage of using the FormKit context prop to add the functionality that FormKit requires. If your case is to use a FormKit component with default values, it is recommended instead to use a Vue component wrapper and directly call that component because FormKit inputs work in any level of nesting. Alternatively, you could use FormKit's <a href="/guides/export-and-restructure-inputs">input export feature</a> to add features and change attrs and props.
 ::
 
 For most users, [passing a Vue component to `createInput`](#using-createinput-to-extend-the-base-schema) provides a good balance between customization and value-added features. If you’d like to completely eject from schema-based inputs all together, you can pass a component directly to an input definition.
 
-Component inputs receive a single prop — [the `context` object](/essentials/configuration). It’s then up to you to write a component to encompasses the desired features of FormKit (labels, help text, message display, etc.). Checkout the [input checklist](#input-checklist) for a list of what you’ll want to output.
+Component inputs receive a single prop — [the `context` object](/essentials/configuration). It’s then up to you to write a component that encompasses the desired features of FormKit (labels, help text, message display, etc.). Checkout the [input checklist](#input-checklist) for a list of what you’ll want to output.
 
 ## Input & output values
 
@@ -262,7 +262,7 @@ Inputs have two critical roles:
 
 ### Receiving input
 
-You can receive input from any user interaction and the input can set its value to any type of data. Inputs are _not_ limited to strings and numbers — they can happily store Arrays, Objects, or custom data structures.
+You can receive input from any user interaction, and the input can set its value to any type of data. Inputs are _not_ limited to strings and numbers — they can happily store Arrays, Objects, or custom data structures.
 
 Fundamentally, all an input needs to do is call `node.input(value)` with a value. The `node.input()` method is automatically debounced, so feel free to call it frequently — like every keystroke. Typically, this looks like binding to the `input` event.
 
@@ -372,7 +372,7 @@ file: [
 
 ### Add props method (`node.addProps()`)
 
-You can dynamically add props using the `node.addProps()` method in any runtime environment where you have access to the node. For custom inputs this is particularly helpful when used in a features. Both array notation and object notation are supported (see above).
+You can dynamically add props using the `node.addProps()` method in any runtime environment where you have access to the node. For custom inputs this is particularly helpful when used in a features array. Both array notation and object notation are supported (see above).
 
 ::Example
 ---
@@ -403,11 +403,11 @@ As an example, let's imagine you want to build an input that allows users to ent
 
 ## TypeScript support
 
-FormKit is written in TypeScript and includes type definitions for all of its core inputs. If you are writing your own inputs and would like to provide TypeScript support you can define your own inputs using two module augmentations:
+FormKit is written in TypeScript and includes type definitions for all of its core inputs. If you are writing your own inputs and would like to provide TypeScript support, you can define your own inputs using two module augmentations:
 
 ### Adding prop types
 
-The `type` prop of the `<FormKit>` component is a string that is used as the key of a discriminated union of props (`FormKitInputProps`). By augmenting this type your custom inputs can define their own prop types. To do so you must augment the `FormKitInputProps` type to add your own custom types:
+The `type` prop of the `<FormKit>` component is a string that is used as the key of a discriminated union of props (`FormKitInputProps`). By augmenting this type, your custom inputs can define their own prop types. To do so, you must augment the `FormKitInputProps` type to add your own custom types:
 
 ```ts
 declare module '@formkit/inputs' {
@@ -450,7 +450,7 @@ declare module '@formkit/inputs' {
 }
 ```
 
-In the example above, we use `FormKitBaseSlots` — a TypeScript utility to add all the "basic" slots that most custom inputs implement, like `outer`, `label`, `help`, `message`, etc. However you could also define your own slots entirely from scratch, or augment `FormKitBaseSlots` to add additional slots (`FormKitBaseSlots<Props> & YourCustomSlots`).
+In the example above, we use `FormKitBaseSlots` — a TypeScript utility to add all the "basic" slots that most custom inputs implement, like `outer`, `label`, `help`, `message`, etc. However, you could also define your own slots entirely from scratch, or augment `FormKitBaseSlots` to add additional slots (`FormKitBaseSlots<Props> & YourCustomSlots`).
 
 ```ts
 declare module '@formkit/inputs' {
@@ -484,7 +484,7 @@ Below are some examples of custom inputs. They are not intended to be comprehens
 
 ### Simple text input
 
-This is the simplest possible input and does not leverage any of FormKit’s built in DOM structure and only outputs a text input — however it is a fully functional member of the group it is nested inside of and able to read and write values.
+This is the simplest possible input and does not leverage any of FormKit’s built-in DOM structure. It only outputs a text input — however, it is a fully functional member of the group it is nested inside of and able to read and write values.
 
 ::Example
 ---
diff --git a/essentials/examples.md b/essentials/examples.md
index 67cb3923..3108381a 100644
--- a/essentials/examples.md
+++ b/essentials/examples.md
@@ -145,14 +145,6 @@ title: "Number input with custom step buttons"
 A custom input with +1 and -1 step buttons. Made using <code>createInput()</code>.
 ::
 
-::ExampleCard
----
-href: "https://formkit.link/68e51abc7431687edc8f9ff008477b3d"
-title: "A currency input with currency selector"
----
-A simple custom input that allows users to select a currency and enter a value. Made using <code>createInput()</code>.
-::
-
 ::ExampleCard
 ---
 href: "https://formkit.link/de8e6530b80717f5229813258e739e7b"
diff --git a/essentials/schema.md b/essentials/schema.md
index d1e71d8e..18bb6080 100644
--- a/essentials/schema.md
+++ b/essentials/schema.md
@@ -11,6 +11,17 @@ description: Harness all the power of FormKit in a serializable, JSON-compatible
 
 FormKit's schema is a JSON-serializable data format for storing DOM structures and component implementations, including FormKit forms. Although created specifically for implementing and generating forms, the format is capable of generating any HTML markup or using any third-party components.
 
+
+
+::Callout
+---
+type: "tip" 
+name: "Using FormKitSchema"
+---
+The `<FormKitSchema/>` component is globally available in Nuxt and ready to use like the FormKit component when autoImport: false.
+::
+
+
 Schemas are rendered using FormKit's `<FormKitSchema>` component, which is not registered globally by default. You will need to import it:
 
 ```js
diff --git a/essentials/validation.md b/essentials/validation.md
index c22c2157..16cabb3d 100644
--- a/essentials/validation.md
+++ b/essentials/validation.md
@@ -167,7 +167,7 @@ You can use rule hints together. To do so, just place multiple hints before the
 
 ## Available rules
 
-FormKit ships with over 20 production-ready validation rules, covering most validation needs. If you don’t find one that meets your exact requirement, you can add a [custom rule](#custom-rules) to suit your needs.
+FormKit ships with over 35 production-ready validation rules, covering most validation needs. If you don't find one that meets your exact requirement, you can add a [custom rule](#custom-rules) to suit your needs.
 
 - [accepted](#accepted)
 - [alpha](#alpha)
@@ -185,6 +185,10 @@ FormKit ships with over 20 production-ready validation rules, covering most vali
 - [date_after](#date-after)
 - [date_before](#date-before)
 - [date_between](#date-between)
+- [date_before_or_equal](#date-before-or-equal)
+- [date_after_or_equal](#date-after-or-equal)
+- [date_before_node](#date-before-node)
+- [date_after_node](#date-after-node)
 - [date_format](#date-format)
 - [email](#email)
 - [ends_with](#ends-with)
@@ -265,7 +269,7 @@ layout: "auto"
 
 ### Confirm
 
-Checks if the value of one input matches the value of another input — often used for password confirmations. There are two ways to specify which input to match:
+Checks if the value of one input matches the value of another input — often used for password confirmations. There are two ways to specify which input to match:
 
 - Append `_confirm` to the `name` attribute of the second input.
 - Pass the `name` of the first input as an argument to the confirm rule in the second input `confirm:name_of_input_1` (more specific).
@@ -400,9 +404,57 @@ layout: "auto"
 ---
 ::
 
+### Date before or equal
+
+Determines if a date is before or equal to the current date or a date supplied as the rule's argument. Dates used can either be JavaScript `Date` objects or strings that can be parsed by [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse).
+
+::Example
+---
+name: "Date before or equal"
+file: "_content/_examples/rule-date-before-or-equal/rule-date-before-or-equal.vue"
+layout: "auto"
+---
+::
+
+### Date after or equal
+
+Determines if a date is after or equal to the current date or a date supplied as the rule's argument. Dates used can either be JavaScript `Date` objects or strings that can be parsed by [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse).
+
+::Example
+---
+name: "Date after or equal"
+file: "_content/_examples/rule-date-after-or-equal/rule-date-after-or-equal.vue"
+layout: "auto"
+---
+::
+
+### Date before node
+
+Determines if a date is before the date in another node specified by its address. The address is provided as an argument to the rule. Dates used can either be JavaScript `Date` objects or strings that can be parsed by [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse).
+
+::Example
+---
+name: "Date before node"
+file: "_content/_examples/rule-date-before-node/rule-date-before-node.vue"
+layout: "auto"
+---
+::
+
+### Date after node
+
+Determines if a date is after the date in another node specified by its address. The address is provided as an argument to the rule. Dates used can either be JavaScript `Date` objects or strings that can be parsed by [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse).
+
+::Example
+---
+name: "Date after node"
+file: "_content/_examples/rule-date-after-node/rule-date-after-node.vue"
+layout: "auto"
+---
+::
+
 ### Date format
 
-Ensures the format of an input’s date matches a specific date format. The format should be specified using the following formatting tokens:
+Ensures the format of an input's date matches a specific date format. The format should be specified using the following formatting tokens:
 
 | Token | Valid values                                                  |
 | ----- | ------------------------------------------------------------- |
@@ -418,7 +470,7 @@ Ensures the format of an input’s date matches a specific date format. The form
 type: "warning"
 label: ""
 ---
-Native date inputs always output the same format <code>YYYY-MM-DD ...</code> even though they display dates according to the browser’s locale. Using this rule to specify a <em>different</em> format would result in an input that can never be valid.
+Native date inputs always output the same format <code>YYYY-MM-DD ...</code> even though they display dates according to the browser's locale. Using this rule to specify a <em>different</em> format would result in an input that can never be valid.
 ::
 
 ::Example
@@ -467,7 +519,7 @@ layout: "auto"
 
 ### Length
 
-Checks that the input’s value is over a given length, or between two length values. It works to validate arrays (like [lists](/inputs/list)), objects (like [groups](/inputs/group)), or string lengths. Can be used to simulate the native `maxlength` and `minlength` as well.
+Checks that the input's value is over a given length, or between two length values. It works to validate arrays (like [lists](/inputs/list)), objects (like [groups](/inputs/group)), or string lengths. Can be used to simulate the native `maxlength` and `minlength` as well.
 
 ::Example
 ---
@@ -892,4 +944,4 @@ file: "_content/_examples/submit-invalid/submit-invalid.vue"
 
 ## Triggering validation
 
-Trying to manually trigger validation is an anti-pattern in FormKit and should be avoided. Validation is continually computed via fine-grained reactivity. If a value or prop that is used in a validation rule changes, the validation will be automatically be re-run. This ensures validity state, settlement state, submission state and any other validation-related properties can always be trusted.
+Trying to manually trigger validation is an anti-pattern in FormKit and should be avoided. Validation is continually computed via fine-grained reactivity. If a value or prop that is used in a validation rule changes, the validation will be automatically be re-run. This ensures validity state, settlement state, submission state and any other validation-related properties can always be trusted.
\ No newline at end of file
diff --git a/getting-started/community.md b/getting-started/community.md
index 4f31b57b..8d7fcf27 100644
--- a/getting-started/community.md
+++ b/getting-started/community.md
@@ -39,25 +39,7 @@ Community involvement and contributions are one of the most important aspects of
     />
 </a>
 
-### Silver sponsors
-
-<a class="no-underline" href="https://www.peakcrypto.com?utm_source=formkit&utm_medium=web">
-    <img
-        class="docs-partner"
-        src="https://cdn.formk.it/web-assets/sponsors/peak-crypto.svg"
-        alt="Peak Crypto logo"
-        style="display:inline-block;vertical-align: middle;width: 135px;margin-right: 25px;margin-top: 10px;"
-    />
-</a>
-
-<a class="no-underline" href="https://surveyjs.io?utm_source=formkit&utm_medium=web">
-    <img
-        class="docs-partner"
-        src="https://cdn.formk.it/web-assets/sponsors/surveyjs.svg"
-        alt="SurveyJS logo"
-        style="display:inline-block;vertical-align: middle;width: 115px;margin-right: 25px;margin-top: 15px;"
-    />
-</a>
+<!-- ### Silver sponsors -->
 
 ### Bronze sponsors
 
@@ -79,6 +61,24 @@ Community involvement and contributions are one of the most important aspects of
     />
 </a>
 
+<a class="no-underline" href="https://wedgworth.com?utm_source=formkit&utm_medium=web">
+    <img
+        class="docs-partner"
+        src="https://cdn.formk.it/web-assets/sponsors/bronze-sponsor_wedgworth.png"
+        alt="Wedgworth's Inc logo"
+        style="display:inline-block;vertical-align: middle;width: 60px;margin-right: 25px;"
+    />
+</a>
+
+<a class="no-underline" href="https://www.usemast.com?utm_source=formkit&utm_medium=web">
+    <img
+        class="docs-partner"
+        src="https://cdn.formk.it/web-assets/sponsors/bronze-sponsor_mast.png"
+        alt="Masts's Inc logo"
+        style="display:inline-block;vertical-align: middle;width: 75px;margin-right: 25px;"
+    />
+</a>
+
 ### Backers
 
 [uscreen](https://uscreen.de), [gfenn08](https://github.com/gfenn08), [Ryan E](https://github.com/VikingDadMedic), [João Bondim](https://github.com/JesterIruka)
diff --git a/inputs/autocomplete.md b/inputs/autocomplete.md
index 771c9365..57616adb 100644
--- a/inputs/autocomplete.md
+++ b/inputs/autocomplete.md
@@ -353,6 +353,21 @@ file: [
 ---
 ::
 
+## Option groups
+
+If you would like the listitems in the listbox to be grouped, pass the `options` prop an array of objects and include the property `group`:
+
+::Example
+---
+name: "Autocomplete"
+min-height: 550
+file: [
+  "_content/_examples/autocomplete-pro/autocomplete-option-groups.vue",
+  "_content/_examples/_data/citiesByState.js"
+]
+---
+::
+
 
 ## Full example
 
@@ -838,14 +853,12 @@ schema: [
 ---
 ::
 
-### Inner listbox structure
-
-Below is the inner options list (`listbox`) structure from the diagrams above:
+### Listbox structure
 
 ::FormKitInputDiagram
 ---
 hide-on-small: true
-class: "input-diagram--autocomplete"
+class: "input-diagram--dropdown"
 schema: [
   {
     name: "dropdownWrapper",
@@ -865,20 +878,108 @@ schema: [
             ]
           },
           {
-            name: "listitem",
-            class: "flex flex-grow",
-            position: "right",
+            name: "listitems",
+            children: [{
+              name: 'listitem',
+              class: "flex flex-grow",
+              position: "right",
+              children: [
+                {
+                  name: "selectedIcon",
+                  content: "✔️"
+                },
+                {
+                  name: "option",
+                  content: "Gray",
+                  position: "right",
+                  class: "flex flex-grow"
+                },
+              ]
+            }]
+          },
+          {
+            name: "loadMore",
             children: [
               {
-                name: "selectedIcon",
-                content: "✔️"
+                name: "loadMoreInner",
+                children: [
+                  {
+                    name: "loaderIcon",
+                    content: "⏳",
+                    class: "text-center"
+                  }
+                ]
               },
+            ]
+          },
+        ]
+      },
+    ]
+  }
+]
+---
+::
+
+### Grouped Listbox Structure
+
+::FormKitInputDiagram
+---
+hide-on-small: true
+class: "input-diagram--dropdown"
+schema: [
+  {
+    name: "dropdownWrapper",
+    position: "right",
+    children: [
+      {
+        name: "listbox",
+        position: "right",
+        children: [
+        {
+            name: "emptyMessage",
+            children: [
               {
-                name: "option",
-                content: "Serena",
-                position: "right",
-                class: "flex flex-grow"
-              },
+                name: "emptyMessageInner",
+                content: "No options to display.",
+              }
+            ]
+          },
+          {
+            name: "listitems",
+            children: [
+              {
+                name: 'listitemGroup',
+                children: [
+                  {
+                    name: 'groupLabel'
+                  },
+                  {
+                    name: 'groupList',
+                    children: [
+                      {
+                        name: 'innerListitems',
+                        children: [{
+                          name: 'listitem',
+                          class: "flex flex-grow",
+                          position: "right",
+                          children: [
+                            {
+                              name: "selectedIcon",
+                              content: "✔️"
+                            },
+                            {
+                              name: "option",
+                              content: "Gray",
+                              position: "right",
+                              class: "flex flex-grow"
+                            },
+                          ]
+                        }]
+                      }
+                    ]
+                  }
+                ]
+              }
             ]
           },
           {
diff --git a/inputs/colorpicker.md b/inputs/colorpicker.md
index 92e06939..4805ef12 100644
--- a/inputs/colorpicker.md
+++ b/inputs/colorpicker.md
@@ -51,6 +51,18 @@ There may be times where you wish to show one format to users as a default but r
 ---
 ::
 
+### Disabling the alpha channel
+
+You can disable the alpha channel in the `colorpicker` by setting the `alpha` prop to `false`. This will enforce full opacity on values. Any values with an alpha channel will be converted to full opacity.
+
+::Example
+---
+  name: "Color input"
+  file: "_content/_examples/colorpicker/alpha.vue"
+  minHeight: 400
+---
+::
+
 ## Swatches
 
 Swatches are provided using the `options` prop and use the same `options` API as the `select`, `dropdown`, `autocomplete` and `taglist` inputs from FormKit.
@@ -138,6 +150,12 @@ data: [
     default: "hex",
     description: "The format that the <code>colorpicker</code> input should show in the input preview and be the default setting for the picker panel input. Can be set to <code>hex</code>, <code>hsla</code> or <code>rgba</code>.",
   },
+  {
+    prop: "alpha",
+    type: "boolean",
+    default: "true",
+    description: "When set to <code>false</code> the alpha channel will be disabled in the color picker.",
+  },
   {
     prop: "value-format",
     type: "string",
diff --git a/inputs/currency.md b/inputs/currency.md
new file mode 100644
index 00000000..c9011c33
--- /dev/null
+++ b/inputs/currency.md
@@ -0,0 +1,155 @@
+---
+title: Currency
+description: The currency input is used to create locale/currency specific parsed content
+---
+
+::InputPageHero
+---
+type: "Currency"
+---
+::
+
+:PageToc
+
+:ProInstallSnippet
+
+## Basic example
+
+The `currency` input allows for restricted input of values based on the provided currency and locale.
+
+::Example
+---
+name: "Currency input defaults"
+file: "_content/_examples/currency/currency-default.vue"
+---
+::
+
+## Props
+
+### Currency
+
+The `currency` prop is the three letter currency code and sets the proper formatting for the specified currency. For a full list of supported currency types check: https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes
+
+### Locale
+
+By default, the locale used will be that of what is set in your `formkit.config.ts`. This can be overriden with the `display-locale` prop. For example, `en`, `de`, `en-IN`, `zh-CN`, etc, etc.
+
+
+::Example
+---
+name: "Currency and Locale settings"
+file: "_content/_examples/currency/currency-simple-locale.vue"
+---
+::
+
+## Currency Additional Props
+
+### Decimals
+
+If you would like to prevent decimals from being displayed, set `decimals` to `false` or `0`.
+
+You can also choose to set a minimum number of decimals with the `min-decimals` prop. For example, setting the prop `min-decimals="2"` will always show 2 decimal points.
+
+### Minimum and Maximum Values
+
+Setting the props `min` or `max` will prevent entry of a higher or lower value.
+
+### Step
+
+Value scan be incremented and decremented by use of the up/down keys. The degree by which the value changes is determined by the `step` prop.
+
+::Example
+---
+name: "Currecy Prop Exploration"
+file: "_content/_examples/currency/currency-props-explore.vue"
+---
+::
+
+## Props & Attributes
+
+::ReferenceTable
+---
+input: "currency" 
+data: [
+  {
+    prop: "currency",
+    type: "string",
+    default: "USD",
+    description: "Set the specified currency to use for this input"
+  },
+  {
+    prop: "displayLocale",
+    type: "string",
+    default: "en-US",
+    description: "Set the desired display locale to use for this input"
+  },
+  {
+    prop: "decimals",
+    type: "boolean|number",
+    default: "null",
+    description: "Choose to either completely disallow decimals or override the maximum number of decimals for the input"
+  },
+  {
+    prop: "minDecimals",
+    type: "number",
+    default: "null",
+    description: "Choose to show a minimum number of decimals should your input require this"
+  },
+  {
+    prop: "min",
+    type: "number",
+    default: "null",
+    description: "Minimum numeric value allowed. If zero or above, negatives will not be allowed"
+  },
+  {
+    prop: "max",
+    type: "number",
+    default: "null",
+    description: "Maximum numeric value allowed for this input"
+  },
+  {
+    prop: "step",
+    type: "number",
+    default: "1",
+    description: "When using the up/down keys, how much to modify the current value."
+  },
+  {
+    prop: "valueFormat",
+    type: "string",
+    default: "number",
+    description: "Choose between <code>number</code> and <code>string</code> whether you want a numeric value or a parsed string value"
+  },
+]
+---
+::
+
+
+## Sections
+
+:SectionKeysIntro
+
+### Currency input diagram
+
+::FormKitInputDiagram
+---
+prefix-icon-content: ""
+suffix-icon-content: ""
+label-content: "Currency Input"
+input-content: "$1,234.56"
+help-content: "How much do you want to donate?"
+message-content: "That's a lot of money"
+---
+::
+### Keyboard Interactions
+
+::KeyboardEventsTable
+---
+data: [
+  {
+    event: ["up", "down"],
+    separator: '',
+    description: "Increments through input value by current step amount.",
+  },
+]
+---
+::
\ No newline at end of file
diff --git a/inputs/dropdown.md b/inputs/dropdown.md
index 53a92ea5..ebc026f2 100644
--- a/inputs/dropdown.md
+++ b/inputs/dropdown.md
@@ -306,6 +306,22 @@ file: [
 ---
 ::
 
+## Option groups
+
+If you would like the listitems in the listbox to be grouped, pass the `options` prop an array of objects and include the property `group`:
+
+::Example
+---
+name: "Dropdown"
+min-height: 550
+file: [
+  "_content/_examples/dropdown/dropdown-option-groups.vue",
+  "_content/_examples/_data/citiesByState.js"
+]
+---
+::
+
+
 ## Props & Attributes
 
 ::ReferenceTable
@@ -538,20 +554,108 @@ schema: [
             ]
           },
           {
-            name: "listitem",
-            class: "flex flex-grow",
-            position: "right",
+            name: "listitems",
+            children: [{
+              name: 'listitem',
+              class: "flex flex-grow",
+              position: "right",
+              children: [
+                {
+                  name: "selectedIcon",
+                  content: "✔️"
+                },
+                {
+                  name: "option",
+                  content: "Gray",
+                  position: "right",
+                  class: "flex flex-grow"
+                },
+              ]
+            }]
+          },
+          {
+            name: "loadMore",
             children: [
               {
-                name: "selectedIcon",
-                content: "✔️"
+                name: "loadMoreInner",
+                children: [
+                  {
+                    name: "loaderIcon",
+                    content: "⏳",
+                    class: "text-center"
+                  }
+                ]
               },
+            ]
+          },
+        ]
+      },
+    ]
+  }
+]
+---
+::
+
+### Grouped Listbox Structure
+
+::FormKitInputDiagram
+---
+hide-on-small: true
+class: "input-diagram--dropdown"
+schema: [
+  {
+    name: "dropdownWrapper",
+    position: "right",
+    children: [
+      {
+        name: "listbox",
+        position: "right",
+        children: [
+        {
+            name: "emptyMessage",
+            children: [
               {
-                name: "option",
-                content: "Gray",
-                position: "right",
-                class: "flex flex-grow"
-              },
+                name: "emptyMessageInner",
+                content: "No options to display.",
+              }
+            ]
+          },
+          {
+            name: "listitems",
+            children: [
+              {
+                name: 'listitemGroup',
+                children: [
+                  {
+                    name: 'groupLabel'
+                  },
+                  {
+                    name: 'groupList',
+                    children: [
+                      {
+                        name: 'innerListitems',
+                        children: [{
+                          name: 'listitem',
+                          class: "flex flex-grow",
+                          position: "right",
+                          children: [
+                            {
+                              name: "selectedIcon",
+                              content: "✔️"
+                            },
+                            {
+                              name: "option",
+                              content: "Gray",
+                              position: "right",
+                              class: "flex flex-grow"
+                            },
+                          ]
+                        }]
+                      }
+                    ]
+                  }
+                ]
+              }
             ]
           },
           {
diff --git a/inputs/mask.md b/inputs/mask.md
index 71fbee8b..fa1c433c 100644
--- a/inputs/mask.md
+++ b/inputs/mask.md
@@ -319,24 +319,6 @@ label: "Values can't match the mask"
   Your prefix and suffix content can't match the mask. For instance, if your mask has a digit token <code>#</code>, your prefix/suffix can't contain numbers.
 ::
 
-## Running the mask in reverse
-
-In specific circumstances, you may want to run your mask in reverse. The mask will test if user input fulfills the mask from right to left. This is common in currency-type inputs and can be applied by adding the `reverse` prop:
-
-::Example
----
-name: "Mask input"
-file: "_content/_examples/mask/reverse.vue"
----
-::
-
-::Callout
----
-type: "warning"
-label: "Shift mode requirement"
----
-Running a mask in reverse only works in shift mode.
-::
 
 ## Mask values
 
diff --git a/inputs/meta.md b/inputs/meta.md
index e631f332..9732f994 100644
--- a/inputs/meta.md
+++ b/inputs/meta.md
@@ -13,7 +13,7 @@ type: "Meta"
 
 The `meta` input is meant to store arbitrary data that is not intended for display to end users. This input is hidden by default and can be used to store data that is not part of the form's schema.
 
-Unlike the [hidden](/inputs/hidden) input (which renders an `<input type="hidden">` element), `meta` does not render *any* DOM elements so it’s value is in memory only and as such it can store any value type. In TypeScript its value is defined as `any`.
+Unlike the [hidden](/inputs/hidden) input (which renders an `<input type="hidden">` element), `meta` does not render *any* DOM elements so its value is in memory only and as such it can store any value type. In TypeScript its value is defined as `any`.
 
 ## Basic example
 
diff --git a/inputs/taglist.md b/inputs/taglist.md
index 1aa4afda..9cb4df61 100644
--- a/inputs/taglist.md
+++ b/inputs/taglist.md
@@ -266,6 +266,22 @@ file: [
 ---
 ::
 
+## Option groups
+
+If you would like the listitems in the listbox to be grouped, pass the `options` prop an array of objects and include the property `group`:
+
+::Example
+---
+name: "Taglist"
+min-height: 550
+file: [
+  "_content/_examples/taglist/taglist-option-groups.vue",
+  "_content/_examples/_data/citiesByState.js"
+]
+---
+::
+
+
 
 ## Full example
 
@@ -469,6 +485,229 @@ data: [
 ---
 ::
 
+## Sections
+
+:SectionKeysIntro
+
+### Listbox structure
+
+::FormKitInputDiagram
+---
+hide-on-small: true
+class: "input-diagram--dropdown"
+schema: [
+  {
+    name: "dropdownWrapper",
+    position: "right",
+    children: [
+      {
+        name: "listbox",
+        position: "right",
+        children: [
+        {
+            name: "emptyMessage",
+            children: [
+              {
+                name: "emptyMessageInner",
+                content: "No options to display.",
+              }
+            ]
+          },
+          {
+            name: "listitems",
+            children: [{
+              name: 'listitem',
+              class: "flex flex-grow",
+              position: "right",
+              children: [
+                {
+                  name: "selectedIcon",
+                  content: "✔️"
+                },
+                {
+                  name: "option",
+                  content: "Gray",
+                  position: "right",
+                  class: "flex flex-grow"
+                },
+              ]
+            }]
+          },
+          {
+            name: "loadMore",
+            children: [
+              {
+                name: "loadMoreInner",
+                children: [
+                  {
+                    name: "loaderIcon",
+                    content: "⏳",
+                    class: "text-center"
+                  }
+                ]
+              },
+            ]
+          },
+        ]
+      },
+    ]
+  }
+]
+---
+::
+
+### Grouped Listbox Structure
+
+::FormKitInputDiagram
+---
+hide-on-small: true
+class: "input-diagram--dropdown"
+schema: [
+  {
+    name: "dropdownWrapper",
+    position: "right",
+    children: [
+      {
+        name: "listbox",
+        position: "right",
+        children: [
+        {
+            name: "emptyMessage",
+            children: [
+              {
+                name: "emptyMessageInner",
+                content: "No options to display.",
+              }
+            ]
+          },
+          {
+            name: "listitems",
+            children: [
+              {
+                name: 'listitemGroup',
+                children: [
+                  {
+                    name: 'groupLabel'
+                  },
+                  {
+                    name: 'groupList',
+                    children: [
+                      {
+                        name: 'innerListitems',
+                        children: [{
+                          name: 'listitem',
+                          class: "flex flex-grow",
+                          position: "right",
+                          children: [
+                            {
+                              name: "selectedIcon",
+                              content: "✔️"
+                            },
+                            {
+                              name: "option",
+                              content: "Gray",
+                              position: "right",
+                              class: "flex flex-grow"
+                            },
+                          ]
+                        }]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            name: "loadMore",
+            children: [
+              {
+                name: "loadMoreInner",
+                children: [
+                  {
+                    name: "loaderIcon",
+                    content: "⏳",
+                    class: "text-center"
+                  }
+                ]
+              },
+            ]
+          },
+        ]
+      },
+    ]
+  }
+]
+---
+::
+
+#### Taglist selections
+
+::FormKitInputDiagram
+---
+hide-on-small: true
+class: "input-diagram--dropdown-outer"
+schema: [
+  {
+    name: "selector",
+    class: "flex flex-grow",
+    children: [
+      {
+        name: "tagsWrapper",
+        class: "flex flex-grow",
+        children: [
+          {
+            name: "tags",
+            class: "flex flex-grow border-solid",
+            children: [
+              {
+                name: "tagWrapper",
+                children: [
+                  {
+                    name: "tag",
+                    class: 'flex',
+                    children: [
+                      {
+                        name: "tagLabel",
+                        content: 'Gray'
+                      },
+                      {
+                        name: "removeSelection",
+                        content: '×'
+                      }
+                    ]
+                  },
+                ]
+              },
+              {
+                name: "tagWrapper",
+                children: [
+                  {
+                    name: "tag",
+                    class: 'flex',
+                    children: [
+                      {
+                        name: "tagLabel",
+                        content: 'Blue'
+                      },
+                      {
+                        name: "removeSelection",
+                        content: '×'
+                      }
+                    ]
+                  },
+                ]
+              }
+            ],
+          },
+        ]
+      },
+    ]
+  }
+]
+---
+::
+
 ## Accessibility
 
 All FormKit inputs are designed with the following accessibility considerations in mind. Help us continually improve accessibility for all by filing accessibility issues [here](https://github.com/formkit/formkit/issues/new?assignees=&labels=%F0%9F%90%9B+bug-report%2C%E2%9B%91+Needs+triage&projects=&template=bug-report.yml): 
diff --git a/inputs/transfer-list.md b/inputs/transfer-list.md
index 62813c11..daa4b0e9 100644
--- a/inputs/transfer-list.md
+++ b/inputs/transfer-list.md
@@ -379,7 +379,13 @@ data: [
     prop: "searchable",
     type: "boolean",
     default: "false",
-    description: "Enables the search input."
+    description: "Enables the search input for the source list."
+  },
+  {
+    prop: "target-searchable",
+    type: "boolean",
+    default: "false",
+    description: "Enables the search input for the target list."
   },
   {
     prop: "source-label",
@@ -666,6 +672,31 @@ schema: [
           }
         ]
       },
+      {
+        name: "targetControls",
+        children: [
+          {
+            name: "targetSearch",
+            class: "flex",
+            children: [
+              {
+                name: "targetSearchInput",
+                class: "large"
+              },
+              {
+                name: "targetSearchClear",
+                class: "small",
+                children: [
+                  {
+                    name: "closeIcon",
+                    content: "✕"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
       {
         name: "targetListItems",
         children: [
diff --git a/inputs/unit.md b/inputs/unit.md
new file mode 100644
index 00000000..8ed04b1d
--- /dev/null
+++ b/inputs/unit.md
@@ -0,0 +1,231 @@
+---
+title: Unit
+description: The unit input allows for restricted input of values based on the provided unit (distance, weight, temperature, etc.) and locale.
+---
+
+::InputPageHero
+---
+type: "Unit"
+---
+::
+
+:PageToc
+
+:ProInstallSnippet
+
+## Unit Input
+
+The `unit` input allows for restricted input of values based on the provided unit (distance, weight, temperature, etc.) and locale.
+
+::Example
+---
+name: "Unit input defaults"
+file: "_content/_examples/unit/unit.vue"
+---
+::
+
+## Props
+
+### Unit
+
+The `unit` prop is the type of unit you want to display. A full list of allowed unit types are listed below:
+
+::ColumnList
+---
+listItems: ['acre', 'bit', 'byte', 'celsius', 'centimeter', 'day', 'degree', 'fahrenheit', 'fluid-ounce', 'foot', 'gallon', 'gigabit', 'gigabyte', 'gram', 'hectare', 'hour', 'inch', 'kilobit', 'kilobyte', 'kilogram', 'kilometer', 'liter', 'megabit', 'megabyte', 'meter', 'microsecond', 'mile', 'mile-scandinavian', 'milliliter', 'millimeter', 'millisecond', 'minute', 'month', 'nanosecond', 'ounce', 'percent', 'petabyte', 'pound', 'second', 'stone', 'terabit', 'terabyte', 'week', 'yard', 'year']
+---
+::
+
+### Unit display
+
+The display length can be modified by the `unitDisplay` property. Accepted values are `short`, `narrow`, and `long`.
+
+::Example
+---
+name: "Unit input defaults"
+file: "_content/_examples/unit/unit-display.vue"
+---
+::
+
+### Locale
+
+By default the locale will use what you have set in your `formkit.config.ts` as the desired locale. However you can override this with the `displayLocale` prop. For example, `en-US`, `de-DE`, `en-IN`, `zh-CN`, etc, etc.
+
+::Example
+---
+name: "Unit input defaults"
+file: "_content/_examples/unit/unit-locale.vue"
+---
+::
+
+### Decimals
+
+By default the decimals will display when the value contains the unit/locale decimal separator and will show default formatting decimal places to display for the given unit, however you can override this. By setting `decimals` to `false` or `0`, the value will not allow decimals or setting decimals to a numeric value will limit the maximum decimal places to that value.
+
+You can also choose to set a minimum number of decimals with the `minDecimals` prop. For example, you always want to show 2 decimal places you would set `minDecimals="2"`.
+
+::Example
+---
+name: "Unit input defaults"
+file: "_content/_examples/unit/unit-decimals.vue"
+---
+::
+
+### Minimum and Maximum Values
+
+Similar to a number input, you can set a `min` and `max` value.
+
+::Example
+---
+name: "Unit input defaults"
+file: "_content/_examples/unit/unit-min-max.vue"
+---
+::
+
+### Step
+
+Again, similar to a number input you can use the up/down keys to step the value. By default the step is `1` but you can override that with this prop.
+
+::Example
+---
+name: "Unit input defaults"
+file: "_content/_examples/unit/unit-step.vue"
+---
+::
+
+### Value Formatting
+
+The value of the input itself defaults to a number but can be formatted as a string to include information about the unit itself.
+
+::Example
+---
+name: "Unit input defaults"
+file: "_content/_examples/unit/unit-value-format.vue"
+---
+::
+
+### Value unit
+
+The unit input also allows for first-party conversion of one unit type to another. In this example, we will use `unit` of type `mile`, but the value
+itself will be converted to `kilometers` when setting `value-unit` to `kilometer`.
+
+::Example
+---
+name: "Unit type examples"
+file: "_content/_examples/unit/value-unit.vue"
+---
+::
+
+### Unitless
+
+The `unit` prop is optional, allowing for unitless values.
+
+::Example
+---
+name: "Unit type examples"
+file: "_content/_examples/unit/unitless.vue"
+---
+::
+
+
+::Callout
+---
+type: "warning"
+label: "Mixed unit types"
+---
+In order to convert one unit to another, they must be in the same taxonomy (so for example, you can not convert kilometers to liters).
+::
+
+## Props & Attributes
+
+::ReferenceTable
+---
+input: "unit"
+data: [
+  {
+    prop: "unit",
+    type: "string | undefined",
+    description: "Set the specified unit to use for this input. If undefined, will
+    allow for unitless values."
+  },
+  {
+    prop: "displayLocale",
+    type: "string",
+    default: "en-US",
+    description: "Set the desired display locale to use for this input"
+  },
+  {
+    prop: "decimals",
+    type: "boolean|number",
+    default: "null",
+    description: "Choose to either completely disallow decimals or override the maximum number of decimals for the input"
+  },
+  {
+    prop: "minDecimals",
+    type: "number",
+    default: "null",
+    description: "Choose to show a minimum number of decimals should your input require this"
+  },
+  {
+    prop: "min",
+    type: "number",
+    default: "null",
+    description: "Minimum numeric value allowed. If zero or above, negatives will not be allowed"
+  },
+  {
+    prop: "max",
+    type: "number",
+    default: "null",
+    description: "Maximum numeric value allowed for this input"
+  },
+  {
+    prop: "step",
+    type: "number",
+    default: "1",
+    description: "When using the up/down keys, how much to modify the current value."
+  },
+  {
+    prop: "valueDecimals",
+    type: "string | number",
+    default: undefined,
+    description: "Determines the allowed number of decimals for the valueUnit."
+  },
+  {
+    prop: "valueFormat",
+    type: "string",
+    default: "number",
+    description: "Choose between <code>number</code> and <code>string</code> whether you want a numeric value or a parsed string value"
+  },
+  {
+    prop: "valueUnit",
+    type: "string",
+    default: "undefined",
+    description: "Used to convert the user-inputted value from one unit to another"
+  },
+  {
+    prop: "unitDisplay",
+    type: "string ('narrow' | 'short' | 'long')",
+    default: "short",
+    description: "Determines the length of the how the unit is represented."
+  },
+]
+---
+::
+
+
+## Sections
+
+:SectionKeysIntro
+
+### Unit input diagram
+
+::FormKitInputDiagram
+---
+prefix-icon-content: ""
+suffix-icon-content: ""
+label-content: "Unit Input"
+input-content: "100 mi"
+help-content: "Help text goes here"
+message-content: "Any messages would appear here"
+---
+::
diff --git a/plugins/multi-step.md b/plugins/multi-step.md
index ab9447e0..6abde285 100644
--- a/plugins/multi-step.md
+++ b/plugins/multi-step.md
@@ -197,7 +197,7 @@ file: [
 ---
 ::
 
-## Programatic Nagivation
+## Programmatic Navigation
 
 The multi-step node is equipped with convenient helper functions designed to facilitate programmatic navigation between any of its steps. These functions include: