Crossing (#180)

* element crossing

* dependencies

* prepare for release

* formatting

.changeset/tame-balloons-beam.md

@@ -0,0 +1,5 @@
+---
+'astro-vtbot': minor
+---
+
+Integrates `@vtbag/element-crossing` to transfer selected HTML state to the next page on CSS-only cross-deocument view transitions

README.md

@@ -15,7 +15,9 @@ A current deployment of tech demos and the documentation can be found at https:/
 
 ## !!! NEW TRICKS ✨ IN THE BAG 👜 !!!
 
-None. This version includes minor enhancements to stabilize existing features. For details, see the [CHANGELOG](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md)
+This release integrates `@vtbag/element-crossing` as `<ElementCrossing/>` This is a component for those of you who experiment with CSS-only cross-document view transitions and miss a way to preserve state of HTML elements across navigation: Transfer selected element state to the other side!
+
+For details, see the [CHANGELOG](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md)
 
 ## Recently Learned Tricks ##
 

components/ElementCrossing.astro

@@ -0,0 +1,12 @@
+---
+export interface Props {
+	experimentalFeatures?: boolean;
+}
+import crossingURL from '@vtbag/element-crossing?url';
+import experimentalURL from '@vtbag/element-crossing/experimental?url';
+const { experimentalFeatures = false } = Astro.props;
+console.log(`"${experimentalFeatures}":${typeof experimentalFeatures}`);
+---
+
+{experimentalFeatures && <script is:inline data-astro-rerun src={experimentalURL} />}
+<script is:inline data-astro-rerun src={crossingURL}></script>

components/ElementCrossing.d.ts

@@ -0,0 +1 @@
+export default function ElementCrossing(_props: import('./ElementCrossing.astro').Props): any;