@lavalogic/scoria 0.2.1 → 0.3.1

package/dist/Components/Button.svelte

@@ -282,7 +282,7 @@ button {
   padding-right: var(--button-padding-right, var(--button-padding-horizontal, var(--button-padding, var(--fallback-padding-horizontal, 0))));
   padding-top: var(--button-padding-top, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0))));
   padding-bottom: var(--button-padding-bottom, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0))));
-  font-size: var(--font-size, 0.9375rem);
+  font-size: var(--font-size, 0.875rem);
 }
 button.noninteractive {
   cursor: not-allowed !important;
@@ -414,7 +414,7 @@ button.info {
 button.card-inner {
   height: 34px;
   box-sizing: border-box;
-  font-size: var(--font-size, 0.9375rem);
+  font-size: var(--font-size, 0.875rem);
   border: solid 1px #cbd4da;
   font-weight: 600;
   border-radius: 4px;
@@ -468,7 +468,7 @@ button.call-to-action:not([disabled]):focus {
   outline-offset: -2px;
 }
 button.toolbar {
-  font-size: var(--font-size, 0.9375rem);
+  font-size: var(--font-size, 0.875rem);
   font-weight: 600;
   border-radius: 0;
   border: none;

package/dist/Components/DateInput.svelte

@@ -149,7 +149,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -212,12 +212,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -229,16 +230,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -327,7 +327,7 @@ label.for-modal {
 label.for-modal span.top-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   z-index: 1;
   position: absolute;
   top: 0.45rem;

package/dist/Components/DesktopModal.svelte

@@ -164,7 +164,7 @@
   gap: 0.1875rem;
   fill: #647d8e;
   color: #647d8e;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 
 .footer {

package/dist/Components/DimensionInput.svelte

@@ -208,7 +208,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -271,12 +271,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -288,16 +289,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -386,7 +386,7 @@ label.for-modal {
 label.for-modal span.top-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   z-index: 1;
   position: absolute;
   top: 0.45rem;

package/dist/Components/DragMenu/DragMenuHolder.svelte

@@ -0,0 +1,115 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface Draggable<T> {
+		id: string;
+		name: string;
+		original: T;
+	}
+
+	export interface DragMenuHolder<T> {
+		items: Draggable<T>[];
+		consider: (items: Draggable<T>[]) => void;
+		finalise: (items: Draggable<T>[]) => void;
+		snippet: Snippet<[Draggable<T>, number]>;
+
+		label?: string;
+		flipDurationMS?: number;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	import { dndzone } from 'svelte-dnd-action';
+	import { flip } from 'svelte/animate';
+
+	const {
+		items,
+		consider,
+		finalise,
+		snippet,
+		flipDurationMS = 60,
+		label
+	}: DragMenuHolder<T> = $props();
+</script>
+
+<div class="wrapper">
+	{#if label}
+		<span class="top-label">{label}</span>
+		<span class="top-label-border">{label}</span>
+	{/if}
+	<div
+		class="dnd"
+		use:dndzone={{ items, flipDurationMs: flipDurationMS, delayTouchStart: 30 }}
+		onconsider={(e) => {
+			consider(e.detail.items);
+		}}
+		onfinalize={(e) => {
+			finalise(e.detail.items);
+		}}
+	>
+		{#each items as item, index (item.id)}
+			<div class="contents" animate:flip={{ duration: flipDurationMS }}>
+				{@render snippet(item, index)}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>.top-label {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.875rem;
+  user-select: none;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
+  z-index: 2;
+  color: #647d8e;
+  white-space: nowrap;
+}
+.top-label.invalid {
+  color: #aa1414;
+}
+
+.top-label-border {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.875rem;
+  user-select: none;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  z-index: 1;
+  white-space: nowrap;
+  top: 0px;
+  line-height: 0px;
+  color: transparent;
+  border-bottom: solid 1px #ffffff;
+}
+.top-label-border.invalid {
+  border-bottom-color: #f9e9e9;
+}
+
+div.wrapper {
+  display: flex;
+  flex: 1;
+  position: relative;
+  border: solid 1px #cbd4da;
+}
+
+div.dnd {
+  border: none;
+  display: flex;
+  flex-flow: column nowrap;
+  outline: none !important;
+  /* this will allow the dragged element to scroll the list although starting in version 0.9.41 the lib would detect any scrollable parent*/
+  overflow: scroll;
+  flex: 1;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  outline-color: red;
+}</style>

package/dist/Components/DragMenu/DragMenuHolder.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+export interface Draggable<T> {
+    id: string;
+    name: string;
+    original: T;
+}
+export interface DragMenuHolder<T> {
+    items: Draggable<T>[];
+    consider: (items: Draggable<T>[]) => void;
+    finalise: (items: Draggable<T>[]) => void;
+    snippet: Snippet<[Draggable<T>, number]>;
+    label?: string;
+    flipDurationMS?: number;
+}
+declare function $$render<T>(): any;
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DragMenuHolder: $$IsomorphicComponent;
+type DragMenuHolder<T> = InstanceType<typeof DragMenuHolder<T>>;
+export default DragMenuHolder;

package/dist/Components/DragMenu/DraggableCard.svelte

@@ -0,0 +1,111 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface DraggableCardProps {
+		selectable: boolean;
+		title: string;
+		subtitle: string;
+		index: number;
+
+		selected?: boolean; // default false
+		disabled?: boolean; // default false
+	}
+</script>
+
+<script lang="ts">
+	import Checkbox from '../Checkbox.svelte';
+
+	let {
+		selectable,
+		title,
+		subtitle,
+		index,
+		selected = $bindable(false),
+		disabled = false
+	}: DraggableCardProps = $props();
+</script>
+
+<div class="card">
+	{#if selectable}
+		<Checkbox value={selected} onchange={() => (selected = !selected)} />
+	{/if}
+	<div class="text">
+		<span class="title">{title}</span>
+		<span class="subtitle">{subtitle}</span>
+	</div>
+	<span class="row">{index + 1}</span>
+</div>
+
+<style>.card {
+  color: #3a4952;
+  fill: #3a4952;
+  padding: var(--padding-size, 0.76rem);
+  border-radius: var(--border-radius, 0);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  border: solid 1px #cbd4da;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  align-items: stretch;
+  cursor: pointer;
+}
+.card:disabled {
+  background-color: var(--background-colour, #e9ecf1);
+  color: #8096a5;
+  --colour: #8096a5;
+  cursor: default;
+}
+.card:not([disabled]):hover {
+  background-color: var(--hover-background-colour, rgba(0, 0, 0, 0.1));
+  --background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+}
+.card:not([disabled]):focus, .card:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+}
+.card:not([disabled]).ticked, .card:not([disabled]).primary {
+  color: #ffffff;
+  background-color: var(--background-colour, #259fc7);
+  border-color: var(--border-colour, #259fc7);
+}
+.card:not([disabled]).ticked:focus, .card:not([disabled]).ticked:focus-visible, .card:not([disabled]).primary:focus, .card:not([disabled]).primary:focus-visible {
+  outline-color: #259fc7;
+}
+.card:not([disabled]).ticked:hover, .card:not([disabled]).primary:hover {
+  background-color: var(--hover-background-colour, #1f81a0);
+}
+.card * {
+  user-select: none;
+}
+.card {
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.5rem;
+}
+.card .text {
+  display: flex;
+  gap: 0.5rem;
+  flex-flow: column nowrap;
+}
+.card .title {
+  font-weight: 500;
+  color: #455661;
+}
+.card .subtitle {
+  color: #718a9b;
+}
+.card span.row {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  height: 1.75rem;
+  width: 1.75rem;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: 1rem;
+  border: solid 3px #cbd4da;
+  border-radius: 50%;
+}</style>

package/dist/Components/DragMenu/DraggableCard.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface DraggableCardProps {
+    selectable: boolean;
+    title: string;
+    subtitle: string;
+    index: number;
+    selected?: boolean;
+    disabled?: boolean;
+}
+declare const DraggableCard: import("svelte").Component<DraggableCardProps, {}, "selected">;
+type DraggableCard = ReturnType<typeof DraggableCard>;
+export default DraggableCard;

package/dist/Components/FileUpload.svelte

@@ -211,7 +211,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -274,12 +274,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -291,16 +292,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }

package/dist/Components/MultiSelect.svelte

@@ -255,19 +255,20 @@
   position: absolute;
   left: 0.5rem;
   z-index: 1;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   padding: 0.05rem 0.4rem;
   color: #647d8e;
 }
 .select-wrapper label span:not(.border) {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -278,16 +279,15 @@
 .select-wrapper label span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -301,7 +301,7 @@
   box-sizing: border-box;
 }
 .select-wrapper :global(.sv-item--content) {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper :global(.sv-item--wrap.in-dropdown) {
   cursor: pointer;
@@ -323,7 +323,7 @@
 .select-wrapper :global .sv-control {
   width: 100%;
   height: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper :global .sv-control--selection {
   flex-flow: row nowrap;
@@ -333,7 +333,7 @@
   margin: -1px;
 }
 .select-wrapper :global .sv-control--selection span.sv-input--sizer input {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper :global .svelecte.svelecte-control {
   cursor: pointer;
@@ -361,7 +361,7 @@
 }
 .select-wrapper .dropdown-item,
 .select-wrapper .selection {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper .selection {
   padding-left: 0.5rem;

package/dist/Components/NumberInput.svelte

@@ -169,7 +169,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -232,12 +232,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -249,16 +250,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -347,7 +347,7 @@ label.for-modal {
 label.for-modal span.top-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   z-index: 1;
   position: absolute;
   top: 0.45rem;

package/dist/Components/PasswordInput.svelte

@@ -92,7 +92,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -155,12 +155,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -172,16 +173,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -270,7 +270,7 @@ label.for-modal {
 label.for-modal span.top-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   z-index: 1;
   position: absolute;
   top: 0.45rem;

package/dist/Components/QuerySelect.svelte

@@ -412,19 +412,20 @@
   position: absolute;
   left: 0.5rem;
   z-index: 1;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   padding: 0.05rem 0.4rem;
   color: #647d8e;
 }
 .select-wrapper label span:not(.border) {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -435,16 +436,15 @@
 .select-wrapper label span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -458,7 +458,7 @@
   box-sizing: border-box;
 }
 .select-wrapper :global(.sv-item--content) {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper :global(.sv-item--wrap.in-dropdown) {
   cursor: pointer;
@@ -480,7 +480,7 @@
 .select-wrapper :global .sv-control {
   width: 100%;
   height: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper :global .sv-control--selection {
   flex-flow: row nowrap;
@@ -490,7 +490,7 @@
   margin: -1px;
 }
 .select-wrapper :global .sv-control--selection span.sv-input--sizer input {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper :global .svelecte.svelecte-control {
   cursor: pointer;
@@ -518,7 +518,7 @@
 }
 .select-wrapper .dropdown-item,
 .select-wrapper .selection {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper .selection {
   padding-left: 0.5rem;

package/dist/Components/SingleSelect.svelte

@@ -324,19 +324,20 @@
   position: absolute;
   left: 0.5rem;
   z-index: 1;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   padding: 0.05rem 0.4rem;
   color: #647d8e;
 }
 .select-wrapper label span:not(.border) {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -347,16 +348,15 @@
 .select-wrapper label span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -370,7 +370,7 @@
   box-sizing: border-box;
 }
 .select-wrapper :global(.sv-item--content) {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper :global(.sv-item--wrap.in-dropdown) {
   cursor: pointer;
@@ -392,7 +392,7 @@
 .select-wrapper :global .sv-control {
   width: 100%;
   height: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper :global .sv-control--selection {
   flex-flow: row nowrap;
@@ -402,7 +402,7 @@
   margin: -1px;
 }
 .select-wrapper :global .sv-control--selection span.sv-input--sizer input {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper :global .svelecte.svelecte-control {
   cursor: pointer;
@@ -430,7 +430,7 @@
 }
 .select-wrapper .dropdown-item,
 .select-wrapper .selection {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .select-wrapper .selection {
   padding-left: 0.5rem;

package/dist/Components/Table/Body/TableBody.svelte

@@ -79,7 +79,7 @@ tr {
 }
 
 tbody {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 
 tr.sticky {

package/dist/Components/Table/Headers/TableHead.svelte

@@ -299,7 +299,7 @@ div.th {
   cursor: pointer;
   user-select: none;
   font-weight: 700;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   justify-content: center;
   box-sizing: border-box;
   width: calc(100% - 1rem);

package/dist/Components/TextArea.svelte

@@ -137,7 +137,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -190,7 +190,7 @@ label.for-modal {
 label.for-modal span.top-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   z-index: 1;
   position: absolute;
   top: 0.45rem;
@@ -267,12 +267,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -284,16 +285,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }

package/dist/Components/TextInput.svelte

@@ -175,7 +175,7 @@
   box-sizing: border-box;
   height: 100%;
   width: 100%;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   padding-top: var(--input-padding-top, 0.65rem);
   padding-bottom: var(--input-padding-bottom, 0.55rem);
@@ -238,12 +238,13 @@ span.right-label.for-modal {
 span.for-default {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -255,16 +256,15 @@ span.for-default.invalid {
 span.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -353,7 +353,7 @@ label.for-modal {
 label.for-modal span.top-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   z-index: 1;
   position: absolute;
   top: 0.45rem;

package/dist/Components/Touch/BoolCard.svelte

@@ -126,7 +126,7 @@ button.card.pad-right {
 button.card .card-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 button.card .value {
   flex-grow: 1;

package/dist/Components/Touch/EditCard.svelte

@@ -141,7 +141,7 @@
 .card .card-label {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 .card .value {
   flex-grow: 1;
@@ -183,12 +183,13 @@
 .card.desktop .card-label.label {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -199,16 +200,15 @@
 .card.desktop .card-label.border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }

package/dist/Components/Touch/InfoCard.svelte

@@ -65,7 +65,7 @@
   --colour: #647d8e;
 }
 .card .card-label {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
 }
 .card .value {

package/dist/Components/Touch/SummaryCard.svelte

@@ -91,12 +91,13 @@
 span.desktop-heading {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding: 0.1rem 0.4rem;
-  top: -0.6rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
   z-index: 2;
   color: #647d8e;
   white-space: nowrap;
@@ -108,16 +109,15 @@ span.desktop-heading.invalid {
 span.desktop-heading-border {
   position: absolute;
   left: 0.5rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   user-select: none;
-  padding-left: 0.4rem;
-  padding-right: 0.4rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
   z-index: 1;
   white-space: nowrap;
-  top: 0%;
-  height: 0;
+  top: 0px;
+  line-height: 0px;
   color: transparent;
   border-bottom: solid 1px #ffffff;
 }
@@ -149,7 +149,7 @@ li .card-row.detail,
 .summary-card .card-row.detail {
   color: #647d8e;
   --colour: #8096a5;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
 }
 li .card-row.detail span,
 .summary-card .card-row.detail span {

package/dist/Components/VerticalTabGroup.svelte

@@ -88,7 +88,7 @@
 .wrapper .tabs .tab {
   color: #3a4952;
   cursor: pointer;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   padding: 0;
   background-color: transparent;
   border: none;

package/dist/Components/VerticalTabGroupButton.svelte

@@ -65,7 +65,7 @@
 
 <style>.tab {
   cursor: pointer;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 600;
   padding: 0;
   border: none;

package/dist/scss/_mixins.scss

@@ -872,18 +872,21 @@
 	left: 0.5rem;
 	font-size: sizing.$text-small-small-medium;
 	user-select: none;
-	padding-left: 0.4rem;
-	padding-right: 0.4rem;
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	line-height: 1rem;
 }
 
 @mixin absolute-label {
 	@include absolute-label-shared;
 
-	padding: 0.1rem 0.4rem;
-	top: -0.6rem;
+	padding: 0rem 0.5rem;
+	top: calc(-#{sizing.$text-small-small-medium}/ 2 - 2px);
+	// top: -0.6rem;
 	z-index: 2;
 	color: colours.$font-secondary;
 	white-space: nowrap;
+	// border-bottom: solid 1px green;
 
 	&.invalid {
 		color: colours.$error-border;
@@ -893,12 +896,12 @@
 @mixin absolute-label-border {
 	@include absolute-label-shared;
 
-	padding-top: 0;
-	padding-bottom: 0;
 	z-index: 1;
 	white-space: nowrap;
-	top: 0%;
-	height: 0;
+
+	top: 0px;
+	line-height: 0px;
+
 	color: transparent;
 	border-bottom: solid 1px colours.$ui-white;
 

package/dist/scss/_sizing.scss

@@ -11,7 +11,7 @@ $text-medium: 1.16rem;
 $text-small-medium: 1.12rem;
 $text-medium-small-medium: 1.08rem;
 $text-regular: 1rem;
-$text-small-small-medium: 0.9375rem;
+$text-small-small-medium: 0.875rem;
 // $text-small: 0.84rem;
 $text-small: 0.8125rem;
 $text-extra-small: 0.75rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "publishConfig": {
     "access": "restricted"
   },
@@ -73,7 +73,8 @@
     "svelte"
   ],
   "dependencies": {
-    "svelecte": "^5.3.0"
+    "svelecte": "^5.3.0",
+    "svelte-dnd-action": "^0.9.67"
   },
   "scripts": {
     "dev": "vite dev",