@turnipxenon/pineapple 2.2.1 → 2.4.1

package/dev/update_all_repos.sh

@@ -0,0 +1,16 @@
+mapfile -t allRepos < ./dev/repo_list.txt
+
+for repo in ${allRepos[@]}; do
+    cd ..
+    cd $repo
+    git checkout main
+    git branch -D bot/pineapple-update
+    git pull origin main
+    git checkout -b bot/pineapple-update
+    npm install github:TurnipXenon/pineapple
+    git add package.json package-lock.json
+    # todo: update to also include the PR where the update was from
+    git commit -m "Auto-script: update to latest pineapple build"
+    git push origin bot/pineapple-update
+    cd ../pineapple
+done

package/dist/app.postcss

@@ -0,0 +1,153 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
+/* (all other styles below) */
+
+/*place global styles here */
+:root {
+    --default-card-max-width: calc(4rem + 4rem + 40rem);
+}
+
+html, body {
+    @apply h-full overflow-hidden;
+    @apply bg-surface-400 dark:bg-surface-800;
+    background-color: transparent;
+}
+
+/* font color */
+html, body {
+    color: rgb(var(--theme-font-color-base));
+}
+
+.accordion-panel {
+    color: rgb(var(--color-primary-1000));
+}
+
+.dark body,
+.dark .variant-filled-primary,
+.dark .turnip-button,
+.dark .turnip-button > span,
+.dark .accordion-panel,
+.dark button.accordion-control,
+.chip, .dark .chip {
+    color: rgb(var(--theme-font-color-dark));
+}
+
+.turnip-button, .turnip-button > span, button.accordion-control {
+    font-weight: bold;
+    color: rgb(var(--theme-font-color-base));
+}
+
+/* todo: add some hues to the icon that should be in sync with primary and make them not pure darkness */
+.turnip-button > img {
+    filter: grayscale(100%) brightness(0%) invert(25%);
+}
+
+.dark .turnip-button > img {
+    filter: grayscale(100%) brightness(0%) invert(100%);
+}
+
+/*
+
+//for reference left here
+
+.bg-surface-custom-token {
+    @apply bg-surface-200 dark:bg-surface-700;
+}
+
+.app-bar {
+    @apply bg-surface-custom-token;
+}
+*/
+
+
+.variant-ghost-primary {
+    background-color: rgb(var(--color-primary-500) / 0.8);
+}
+
+.dark .variant-ghost-primary {
+    background-color: rgb(var(--color-primary-400) / 0.8);
+}
+
+.default-card {
+    @apply variant-ghost-primary text-center p-16;
+    text-align: start;
+    padding-inline-end: clamp(0rem, 10vw, 8rem);
+    max-width: var(--default-card-max-width);
+}
+
+h1,
+h2,
+p {
+    margin-bottom: 0.5em;
+}
+
+ul {
+    list-style-type: circle;
+    padding-left: 1em;
+}
+
+.default-page-container {
+    @apply flex justify-center items-center;
+    margin-top: 4em;
+    margin-left: clamp(1em, 15vw, 10em);
+    margin-right: 1em;
+    flex-direction: column;
+    z-index: 0;
+}
+
+.footer-space {
+    width: 100%;
+    height: calc(var(--dialog-box-height) + 4em);
+}
+
+a.dialog-choice {
+    cursor: url("$lib/assets/icons/chat-cursor.svg"), auto;
+}
+
+a.external-link {
+    cursor: url("$lib/assets/icons/external-link.svg"), auto;
+}
+
+blockquote {
+    font-style: italic;
+    opacity: 60%;
+    font-weight: bold;
+}
+
+/* todo: add --tw-text-opacity division to add ambience based on bg better */
+a {
+    text-decoration: underline;
+    color: rgb(var(--color-secondary-500));
+}
+
+a:hover, a:hover:visited {
+    color: rgb(var(--color-secondary-400));
+}
+
+a:visited {
+    color: rgb(var(--color-secondary-800));
+}
+
+a:active {
+    color: rgb(var(--color-secondary-350));
+}
+
+.dark a {
+    text-decoration: underline;
+    color: rgb(var(--color-secondary-300));
+}
+
+.dark a:hover, .dark a:hover:visited {
+    color: rgb(var(--color-secondary-200));
+}
+
+.dark a:visited {
+    color: rgb(var(--color-secondary-350));
+}
+
+.dark a:active {
+    color: rgb(var(--color-secondary-100));
+}

package/dist/assets/icons/bitbucket-icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x34_4-bitbucket"><g><path d="M40.929,49.178c-8.108-0.092-14.835,6.358-14.928,14.559c0,0.829,0.093,1.75,0.186,2.58    l62.566,379.735c1.566,9.582,9.86,16.68,19.627,16.77h300.118c7.281,0.093,13.546-5.159,14.745-12.347L485.81,66.409    c1.29-8.016-4.146-15.572-12.163-16.862c-0.829-0.091-1.658-0.184-2.578-0.184L40.929,49.178L40.929,49.178z M304.375,323.59    h-95.831l-25.895-135.456h144.945L304.375,323.59L304.375,323.59z" style="fill:#2684FF;"/></g></g><g id="Layer_1"/></svg>

package/dist/assets/icons/chat-cursor.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   viewBox="0 -960 960 960"
+   width="48"
+   version="1.1"
+   id="svg384"
+   sodipodi:docname="chat_FILL0_wght400_GRAD0_opsz48.svg"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs388" />
+  <sodipodi:namedview
+     id="namedview386"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="true"
+     inkscape:zoom="6.1650873"
+     inkscape:cx="12.084176"
+     inkscape:cy="16.220371"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg384">
+    <inkscape:grid
+       type="xygrid"
+       id="grid390" />
+  </sodipodi:namedview>
+  <path
+     d="m 288.1745,-415.25889 h 250.17242 v -47.95638 H 288.1745 Z m 0,-103.90548 h 383.651 v -47.95638 h -383.651 z m 0,-103.90548 h 383.651 v -47.95638 h -383.651 z m -127.88367,462.77902 v -591.46196 q 0,-19.18255 14.38692,-33.56946 14.38691,-14.38692 33.56946,-14.38692 h 543.50558 q 19.18255,0 33.56946,14.38692 14.38692,14.38691 14.38692,33.56946 v 415.62191 q 0,19.18255 -14.38692,33.56947 -14.38691,14.38691 -33.56946,14.38691 H 288.1745 Z M 267.3934,-336.13088 H 751.75279 V -751.75279 H 208.24721 v 479.56375 z m -59.14619,0 v -415.62191 z"
+     id="path382"
+     style="stroke-width:0.799273" />
+  <path
+     style="fill:#000000;stroke-width:20"
+     d="m 99.34977,-880.52018 v 140.71172 l 140.71171,-140.71172 z"
+     id="path394" />
+</svg>

package/dist/assets/icons/external-link.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="48"
+   viewBox="0 -960 960 960"
+   width="48"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="external_link.svg"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     id="namedview14"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="true"
+     inkscape:zoom="4.359375"
+     inkscape:cx="-21.677419"
+     inkscape:cy="73.175627"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12">
+    <inkscape:grid
+       type="xygrid"
+       id="grid362" />
+  </sodipodi:namedview>
+  <path
+     d="m 595.00431,-626.20279 128.00001,-128.00001 -103.00001,-10e-6 10e-6,-59.99998 h 205.99999 l 2e-5,205.99999 -60.00002,-10e-6 V -712.2028 l -127.99999,128 z"
+     id="path301" />
+  <path
+     id="path10"
+     d="m 394,-789 q -26,40 -43,82.5 -17,42.5 -28,96.5 H 172 q 35,-70 91,-115 56,-45 131,-64 z m -242,239 h 160 q -3,24 -4,43.5 -1,19.5 -1,44.5 0,21 0.5,42.5 0.5,21.5 3.5,48.5 H 152 q -7,-24 -9.5,-44.5 -2.5,-20.5 -2.5,-46.5 0,-26 2.5,-45 2.5,-19 9.5,-43 z m 20,239 h 150 q 12,55 30,99 18,44 43,82 -85,-29 -135,-69.5 Q 210,-240 172,-311 Z m 212,0 h 193 q -15,64 -38.5,110.5 Q 515,-154 480,-118 445,-155 421.5,-203 398,-251 384,-311 Z m 255,0 h 149 q -35,65 -92.5,111 -57.5,46 -129.5,69 25,-38 42.5,-82 17.5,-44 30.5,-98 z M 480,-860 q -84,0 -157,30.5 -73,30.5 -127,84.5 -54,54 -85,126.5 -31,72.5 -31,156.5 0,84 31,157.5 31,73.5 85,127.5 54,54 127,85.5 73,31.5 157,31.5 84,0 157,-31.5 73,-31.5 127,-85.5 54,-54 85,-127.5 31,-73.5 31,-157.5 0,-17 -1,-34 -1,-17 -4,-34 h -62 q 4,17 5.5,32.5 1.5,15.5 1.5,35.5 0,26 -2.5,46.5 Q 815,-395 808,-371 H 648 q 3,-30 4.5,-49.5 1.5,-19.5 1.5,-41.5 0,-14 -0.5,-28.5 Q 653,-505 651,-530 h -61 q 2,21 3,36 1,15 1,32 0,21 -1,40.5 -1,19.5 -5,50.5 H 373 q -4,-31 -5,-50.5 -1,-19.5 -1,-40.5 0,-20 1,-38.5 1,-18.5 5,-49.5 h 177 v -60 H 384 q 20,-75 42,-119 22,-44 54,-71 21,22 38.5,49 17.5,27 31.5,56 v -159 q -17,-3 -34.5,-4.5 Q 498,-860 480,-860 Z"
+     style="display:inline" />
+  <path
+     style="display:inline;fill:#000000;stroke-width:26.5796"
+     d="m 80.286738,-860.28674 v 161.55451 L 239.7891,-859.71249 Z"
+     id="path364" />
+</svg>

package/dist/assets/icons/github-mark.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

package/dist/assets/icons/link-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/></svg>

package/dist/assets/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>

package/dist/assets/icons/mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>

package/dist/components/Card.svelte

@@ -0,0 +1,31 @@
+<script>
+	export let margin = "0";
+	export let marginBottom = "3em";
+	export let overrideStyle = "";
+
+	// warning: don't forget the semi-colon when adding new style!
+	const style = `
+		--turnip-card-margin: ${margin};
+		--turnip-card-margin-bottom: ${marginBottom};
+		${overrideStyle};
+	`;
+</script>
+
+<div class="card" style={style}>
+	<slot name="content" class="card" />
+</div>
+
+<style>
+    .card {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
+}
+:is(.dark .card) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
+}
+    .card {
+        margin: var(--turnip-card-margin);
+        margin-bottom: var(--turnip-card-margin-bottom);
+    }
+</style>

package/dist/components/Card.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  CardProps */
+/** @typedef {typeof __propDef.events}  CardEvents */
+/** @typedef {typeof __propDef.slots}  CardSlots */
+export default class Card extends SvelteComponent<{
+    margin?: string | undefined;
+    marginBottom?: string | undefined;
+    overrideStyle?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    content: {
+        class: string;
+    };
+}> {
+}
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        margin?: string | undefined;
+        marginBottom?: string | undefined;
+        overrideStyle?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        content: {
+            class: string;
+        };
+    };
+};
+export {};

package/dist/components/CarouselElement.svelte

@@ -0,0 +1,21 @@
+<script>export let activeGameIndex;
+export let selfIndex;
+import { fly, slide, scale } from "svelte/transition";
+</script>
+
+{#if (activeGameIndex === selfIndex)}
+	<!--todo: make section consistent size for all-->
+	<section class="game-showcase"
+	         in:fly={{x: '100%'}} out:fly={{x: '-100%'}}>
+		<slot/>
+	</section>
+{/if}
+
+<style>
+    .game-showcase {
+        scroll-snap-align: center;
+        border-radius: var(--theme-rounded-container);
+        margin: auto;
+        width: 100%
+}
+</style>

package/dist/components/CarouselElement.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        activeGameIndex: number;
+        selfIndex: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CarouselElementProps = typeof __propDef.props;
+export type CarouselElementEvents = typeof __propDef.events;
+export type CarouselElementSlots = typeof __propDef.slots;
+export default class CarouselElement extends SvelteComponent<CarouselElementProps, CarouselElementEvents, CarouselElementSlots> {
+}
+export {};

package/dist/components/Chip.svelte

@@ -0,0 +1,12 @@
+<span class="chip variant-filled-tertiary">
+<slot />
+</span>
+
+<style>
+    .chip {
+        border-radius: 1em;
+        margin: 0.25em;
+        font-weight: bold;
+        pointer-events: none;
+    }
+</style>

package/dist/components/Chip.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ChipProps */
+/** @typedef {typeof __propDef.events}  ChipEvents */
+/** @typedef {typeof __propDef.slots}  ChipSlots */
+export default class Chip extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ChipProps = typeof __propDef.props;
+export type ChipEvents = typeof __propDef.events;
+export type ChipSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/components/DialogOverlay.svelte

@@ -0,0 +1,95 @@
+<script>import AresHappy from "../assets/characters/ares/ares_happy.webp";
+import { onMount } from "svelte";
+import { dialogManager } from "./dialog_manager/DialogManagerStore";
+let currentMessage = "";
+dialogManager.currentMessage.subscribe((value) => {
+  currentMessage = value;
+});
+let currentPortrait = AresHappy;
+dialogManager.currentPortrait.subscribe((value) => {
+  if (value) {
+    currentPortrait = value;
+  }
+});
+onMount(() => {
+  dialogManager.update(0);
+});
+let hidePercent = 100;
+dialogManager.hidePercent.subscribe((value) => {
+  hidePercent = value * 0.4;
+});
+const onDialogClick = () => {
+  dialogManager.skipAnimation();
+};
+</script>
+
+<div class="dialog-elements" style="--hidePercentWidth: -{hidePercent}vw; --hidePercentHeight: {hidePercent}vh">
+	<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
+	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
+		<div class="card dialog-name">
+			<p><b>Turnip</b></p>
+		</div>
+		<section class="dialog-padding">
+			<!-- Made for 140 characters, like the original tweets -->
+			{@html currentMessage}
+		</section>
+	</div>
+</div>
+
+<style>
+	.dialog-elements {
+		position: absolute;
+		z-index: 10;
+	}
+
+	.dialog-elements > img {
+		transform: translateX(var(--hidePercentWidth));
+	}
+
+	.dialog-elements > div {
+		transform: translateY(var(--hidePercentHeight));
+	}
+
+	.dialog-box {
+		background-color: rgb(var(--color-surface-500) / 0.9);
+		position: fixed;
+		bottom: 0;
+		left: var(--dialog-left-pad);
+
+		width: var(--dialog-box-width); /*75em + 4em padding*/
+		height: var(--dialog-box-height);
+	}
+
+	.dialog-box *,
+	.dialog-name * {
+		font-size: clamp(1em, 5vw, 1.3em);
+		line-height: 1.5em;
+	}
+
+	.dialog-padding :global(p) {
+		font-size: clamp(1em, 5vw, 1.3em) !important;
+		line-height: 1.5em !important;
+	}
+
+	.dialog-padding {
+		padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
+	}
+
+	.dialog-name {
+		padding-left: 1rem;
+		padding-right: 1rem;
+		padding-top: 0.5rem;
+		position: fixed;
+
+		/* for centering vertically */
+		transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
+}
+
+	.dialog-portrait {
+		position: fixed;
+		bottom: 0;
+		left: clamp(-4rem, calc(5vw - 5em), 0rem);
+		height: clamp(30rem, 75vw, 40rem);
+		width: auto;
+	}
+</style>

package/dist/components/DialogOverlay.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DialogOverlayProps = typeof __propDef.props;
+export type DialogOverlayEvents = typeof __propDef.events;
+export type DialogOverlaySlots = typeof __propDef.slots;
+export default class DialogOverlay extends SvelteComponent<DialogOverlayProps, DialogOverlayEvents, DialogOverlaySlots> {
+}
+export {};

package/dist/components/ElementVisbilityDetector.svelte

@@ -0,0 +1,18 @@
+<script>import { onMount } from "svelte";
+export let isVisible = true;
+let stickyElem;
+let observer;
+onMount(() => {
+  observer = new IntersectionObserver(
+    ([e]) => {
+      isVisible = e.intersectionRatio >= 1;
+    },
+    { threshold: [1] }
+  );
+  observer.observe(stickyElem);
+});
+</script>
+
+<span bind:this={stickyElem}>
+	<slot/>
+</span>