sveltacular 0.0.74 → 0.0.76

package/dist/generic/phone/phone.svelte

@@ -22,21 +22,21 @@ $:
   protocol = type === "sms" ? "sms:" : "tel:";
 $:
   isCellPhone = type == "mobile" || type == "sms";
-</script>
-
-<a href="{protocol}:{phoneNumberDigits}" title={capitalize(type)}>
-	<span class="icon">
-		{#if isCellPhone}
-			<MobilePhoneIcon />
-		{:else}
-			<PhoneIcon />
-		{/if}
-	</span>
-	<span class="number">
-		{formattedPhoneNumber}
-	</span>
-</a>
-
+</script>
+
+<a href="{protocol}:{phoneNumberDigits}" title={capitalize(type)}>
+	<span class="icon">
+		{#if isCellPhone}
+			<MobilePhoneIcon />
+		{:else}
+			<PhoneIcon />
+		{/if}
+	</span>
+	<span class="number">
+		{formattedPhoneNumber}
+	</span>
+</a>
+
 <style>a {
   color: inherit;
   text-decoration: none;
@@ -53,4 +53,4 @@ a .icon {
 }
 a:hover .number {
   text-decoration: underline;
-}</style>
+}</style>

package/dist/generic/phone/phone.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value: string;
-        type?: "home" | "mobile" | "work" | "sms" | "fax" | "other" | undefined;
+        type?: "sms" | "mobile" | "home" | "work" | "fax" | "other" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/generic/pill/pill.svelte

@@ -3,12 +3,12 @@ export let style = "standard";
 export let shape = "rounded";
 export let fill = "solid";
 export let compact = false;
-</script>
-
-<div class="pill {size} {style} {shape} {fill}" class:compact>
-	<span><slot /></span>
-</div>
-
+</script>
+
+<div class="pill {size} {style} {shape} {fill}" class:compact>
+	<span><slot /></span>
+</div>
+
 <style>.pill {
   display: inline-block;
   padding: 0.25rem 0.5rem;
@@ -90,4 +90,4 @@ export let compact = false;
   background-color: transparent;
   border: 1px solid #570000;
   color: #570000;
-}</style>
+}</style>

package/dist/generic/scorecard/scorecard.svelte

@@ -17,15 +17,15 @@ $:
   formattedValue = typeof value === "number" ? value.toLocaleString() : value;
 $:
   isLink = !!href;
-</script>
-
-<button on:click={onClick} class:isLink {id}>
-	<figure class={caption}>
-		<span class="value">{formattedValue}</span>
-		<figcaption><slot /></figcaption>
-	</figure>
-</button>
-
+</script>
+
+<button on:click={onClick} class:isLink {id}>
+	<figure class={caption}>
+		<span class="value">{formattedValue}</span>
+		<figcaption><slot /></figcaption>
+	</figure>
+</button>
+
 <style>button {
   display: inline-block;
   margin-right: 1rem;
@@ -95,4 +95,4 @@ button figure.right {
   justify-content: center;
   text-align: right;
   gap: 0.5rem;
-}</style>
+}</style>

package/dist/generic/section/section.svelte

@@ -6,15 +6,15 @@ export let size = "full";
 export let hidden = false;
 export let align = "left";
 setContext("section", { level, title });
-</script>
-
-<section class="level-{level} {size} {align}" class:hidden>
-	{#if title}
-		<Header {level} />
-	{/if}
-	<slot />
-</section>
-
+</script>
+
+<section class="level-{level} {size} {align}" class:hidden>
+	{#if title}
+		<Header {level} />
+	{/if}
+	<slot />
+</section>
+
 <style>section {
   padding: 0;
   margin-top: 1rem;
@@ -44,4 +44,4 @@ section.xl {
 }
 section.full {
   width: 100%;
-}</style>
+}</style>

package/dist/generic/toaster/toaster.svelte

@@ -1,9 +1,9 @@
-<script></script>
-
-<section>
-    <slot />
-</section>
-
+<script></script>
+
+<section>
+    <slot />
+</section>
+
 <style>section {
   display: flex;
   flex-direction: column-reverse;

package/dist/icons/angle-right-icon.svelte

@@ -1,12 +1,12 @@
 <script>import SvgIcon from "./svg-icon.svelte";
-</script>
-
-<SvgIcon>
-	<path
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-		d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1"
-	/>
-</SvgIcon>
+</script>
+
+<SvgIcon>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="m1 13 5.7-5.326a.909.909 0 0 0 0-1.348L1 1"
+	/>
+</SvgIcon>

package/dist/icons/angle-up-icon.svelte

@@ -1,9 +1,9 @@
-<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8">
-	<path
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-		d="M13 7 7.674 1.3a.91.91 0 0 0-1.348 0L1 7"
-	/>
-</svg>
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M13 7 7.674 1.3a.91.91 0 0 0-1.348 0L1 7"
+	/>
+</svg>

package/dist/icons/check-icon.svelte

@@ -1,17 +1,17 @@
-
-
-<svg
-	class="w-6 h-6 text-gray-800 dark:text-white"
-	aria-hidden="true"
-	xmlns="http://www.w3.org/2000/svg"
-	fill="none"
-	viewBox="0 0 16 12"
->
-	<path
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-		d="M1 5.917 5.724 10.5 15 1.5"
-	/>
-</svg>
+
+
+<svg
+	class="w-6 h-6 text-gray-800 dark:text-white"
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 16 12"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M1 5.917 5.724 10.5 15 1.5"
+	/>
+</svg>

package/dist/icons/envelope-icon.svelte

@@ -1,8 +1,8 @@
-<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-	<path
-		d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"
-	/>
-	<path
-		d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"
-	/>
-</svg>
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+	<path
+		d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"
+	/>
+	<path
+		d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"
+	/>
+</svg>

package/dist/icons/folder-open-icon.svelte

@@ -1,12 +1,12 @@
-<svg
-	class="w-6 h-6 text-gray-800 dark:text-white"
-	aria-hidden="true"
-	xmlns="http://www.w3.org/2000/svg"
-	fill="currentColor"
-	viewBox="0 0 20 18"
->
-	<path
-		d="M4.09 7.586A1 1 0 0 1 5 7h13V6a2 2 0 0 0-2-2h-4.557L9.043.8a2.009 2.009 0 0 0-1.6-.8H2a2 2 0 0 0-2 2v14c.001.154.02.308.058.457L4.09 7.586Z"
-	/>
-	<path d="M6.05 9 2 17.952c.14.031.281.047.424.048h12.95a.992.992 0 0 0 .909-.594L20 9H6.05Z" />
-</svg>
+<svg
+	class="w-6 h-6 text-gray-800 dark:text-white"
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="currentColor"
+	viewBox="0 0 20 18"
+>
+	<path
+		d="M4.09 7.586A1 1 0 0 1 5 7h13V6a2 2 0 0 0-2-2h-4.557L9.043.8a2.009 2.009 0 0 0-1.6-.8H2a2 2 0 0 0-2 2v14c.001.154.02.308.058.457L4.09 7.586Z"
+	/>
+	<path d="M6.05 9 2 17.952c.14.031.281.047.424.048h12.95a.992.992 0 0 0 .909-.594L20 9H6.05Z" />
+</svg>

package/dist/icons/hamburger-icon.svelte

@@ -1,15 +1,15 @@
-<svg
-	class="w-6 h-6 text-gray-800 dark:text-white"
-	aria-hidden="true"
-	xmlns="http://www.w3.org/2000/svg"
-	fill="none"
-	viewBox="0 0 17 14"
->
-	<path
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-		d="M1 1h15M1 7h15M1 13h15"
-	/>
-</svg>
+<svg
+	class="w-6 h-6 text-gray-800 dark:text-white"
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 17 14"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M1 1h15M1 7h15M1 13h15"
+	/>
+</svg>

package/dist/icons/home-icon.svelte

@@ -1,8 +1,8 @@
 <script>import SvgIcon from "./svg-icon.svelte";
-</script>
-
-<SvgIcon width={20} height={20} fill="currentColor">
-	<path
-		d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
-	/>
-</SvgIcon>
+</script>
+
+<SvgIcon width={20} height={20} fill="currentColor">
+	<path
+		d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+	/>
+</SvgIcon>

package/dist/icons/link-icon.svelte

@@ -1,15 +1,15 @@
-<svg
-	class="w-6 h-6 text-gray-800 dark:text-white"
-	aria-hidden="true"
-	xmlns="http://www.w3.org/2000/svg"
-	fill="none"
-	viewBox="0 0 19 19"
->
-	<path
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-		d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"
-	/>
-</svg>
+<svg
+	class="w-6 h-6 text-gray-800 dark:text-white"
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 19 19"
+>
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"
+	/>
+</svg>

package/dist/icons/mobile-phone-icon.svelte

@@ -1,5 +1,5 @@
-<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-	<path
-		d="M12 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM7.5 17.5h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2ZM12 13H2V4h10v9Z"
-	/>
-</svg>
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+	<path
+		d="M12 0H2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM7.5 17.5h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2ZM12 13H2V4h10v9Z"
+	/>
+</svg>

package/dist/icons/phone-icon.svelte

@@ -1,9 +1,9 @@
-<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-	<path
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-		d="m16.344 12.168-1.4-1.4a1.98 1.98 0 0 0-2.8 0l-.7.7a1.98 1.98 0 0 1-2.8 0l-2.1-2.1a1.98 1.98 0 0 1 0-2.8l.7-.7a1.981 1.981 0 0 0 0-2.8l-1.4-1.4a1.828 1.828 0 0 0-2.8 0C-.638 5.323 1.1 9.542 4.78 13.22c3.68 3.678 7.9 5.418 11.564 1.752a1.828 1.828 0 0 0 0-2.804Z"
-	/>
-</svg>
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="m16.344 12.168-1.4-1.4a1.98 1.98 0 0 0-2.8 0l-.7.7a1.98 1.98 0 0 1-2.8 0l-2.1-2.1a1.98 1.98 0 0 1 0-2.8l.7-.7a1.981 1.981 0 0 0 0-2.8l-1.4-1.4a1.828 1.828 0 0 0-2.8 0C-.638 5.323 1.1 9.542 4.78 13.22c3.68 3.678 7.9 5.418 11.564 1.752a1.828 1.828 0 0 0 0-2.804Z"
+	/>
+</svg>

package/dist/icons/svg-icon.svelte

@@ -9,8 +9,8 @@ $:
   viewBox = `${x} ${y} ${width} ${height}`;
 $:
   preserveAspectRatio = `${aspectRatioAlign} ${aspectRatioBehavior}`;
-</script>
-
-<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" {fill} {viewBox} {preserveAspectRatio}>
-	<slot />
-</svg>
+</script>
+
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" {fill} {viewBox} {preserveAspectRatio}>
+	<slot />
+</svg>

package/dist/icons/upload-icon.svelte

@@ -1,9 +1,9 @@
-<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 19">
-	<path
-		stroke="currentColor"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		stroke-width="2"
-		d="M15 15h.01M4 12H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-3m-5.5 0V1.07M5.5 5l4-4 4 4"
-	/>
-</svg>
+<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 19">
+	<path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M15 15h.01M4 12H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-3m-5.5 0V1.07M5.5 5l4-4 4 4"
+	/>
+</svg>

package/dist/images/icon.svelte

@@ -1,9 +1,9 @@
 <script>export let href;
 export let color = "rgb(0, 0, 0)";
-</script>
-
-<span style={`--icon-path: url("${href}"); --icon-color: ${color};`} />
-
+</script>
+
+<span style={`--icon-path: url("${href}"); --icon-color: ${color};`} />
+
 <style>span {
   display: block;
   background-color: var(--icon-color, rgb(0, 0, 0));
@@ -25,4 +25,4 @@ export let color = "rgb(0, 0, 0)";
   mask-image: var(--icon-path);
   mask-repeat: no-repeat;
   mask-position: center;
-}</style>
+}</style>

package/dist/images/image.svelte

@@ -6,33 +6,33 @@ $:
   sources = Array.isArray(src) ? src : typeof src === "string" ? [{ url: src }] : [src];
 $:
   finalSource = sources[sources.length - 1];
-</script>
-
-<div class="image {align}">
-	{#if href}
-		<a {href}>
-			<picture>
-				{#each sources as source}
-					<source srcset={source.url} media={source.media} />
-				{/each}
-				<img src={finalSource.url} {alt} />
-			</picture>
-		</a>
-	{:else}
-		<picture>
-			{#each sources as source}
-				<source srcset={source.url} media={source.media} />
-			{/each}
-			<img src={finalSource.url} {alt} />
-		</picture>
-	{/if}
-	{#if $$slots.default}
-		<div class="caption">
-			<slot />
-		</div>
-	{/if}
-</div>
-
+</script>
+
+<div class="image {align}">
+	{#if href}
+		<a {href}>
+			<picture>
+				{#each sources as source}
+					<source srcset={source.url} media={source.media} />
+				{/each}
+				<img src={finalSource.url} {alt} />
+			</picture>
+		</a>
+	{:else}
+		<picture>
+			{#each sources as source}
+				<source srcset={source.url} media={source.media} />
+			{/each}
+			<img src={finalSource.url} {alt} />
+		</picture>
+	{/if}
+	{#if $$slots.default}
+		<div class="caption">
+			<slot />
+		</div>
+	{/if}
+</div>
+
 <style>.image {
   position: relative;
   width: 100%;
@@ -73,4 +73,4 @@ $:
 .image.right picture,
 .image.right img {
   object-position: right;
-}</style>
+}</style>

package/dist/index.d.ts

@@ -69,6 +69,7 @@ export { default as AppBranding } from './navigation/app-bar/app-branding.svelte
 export { default as Wizard } from './navigation/wizard/wizard.svelte';
 export { default as WizardStep } from './navigation/wizard/wizard-step.svelte';
 export { default as Pagination } from './navigation/pagination/pagination.svelte';
+export { default as DropdownItem } from './generic/dropdown-item/dropdown-item.svelte';
 export { default as DataGrid } from './tables/data-grid.svelte';
 export { default as Table } from './tables/table.svelte';
 export { default as TableBody } from './tables/table-body.svelte';
@@ -108,3 +109,15 @@ export * from './helpers/transform.js';
 export * from './helpers/ucfirst.js';
 export * from './helpers/unique-id.js';
 export * from './data/index.js';
+export { default as AngleRightIcon } from './icons/angle-right-icon.svelte';
+export { default as AngleUpIcon } from './icons/angle-up-icon.svelte';
+export { default as CheckIcon } from './icons/check-icon.svelte';
+export { default as EnvelopIcon } from './icons/envelope-icon.svelte';
+export { default as FolderOpenIcon } from './icons/folder-open-icon.svelte';
+export { default as HambugerIcon } from './icons/hamburger-icon.svelte';
+export { default as HomeIcon } from './icons/home-icon.svelte';
+export { default as LinkIcon } from './icons/link-icon.svelte';
+export { default as MobilePhoneIcon } from './icons/mobile-phone-icon.svelte';
+export { default as PhoneIcon } from './icons/phone-icon.svelte';
+export { default as SvgIcon } from './icons/svg-icon.svelte';
+export { default as UploadIcon } from './icons/upload-icon.svelte';

package/dist/index.js

@@ -74,6 +74,7 @@ export { default as AppBranding } from './navigation/app-bar/app-branding.svelte
 export { default as Wizard } from './navigation/wizard/wizard.svelte';
 export { default as WizardStep } from './navigation/wizard/wizard-step.svelte';
 export { default as Pagination } from './navigation/pagination/pagination.svelte';
+export { default as DropdownItem } from './generic/dropdown-item/dropdown-item.svelte';
 // Tables
 export { default as DataGrid } from './tables/data-grid.svelte';
 export { default as Table } from './tables/table.svelte';
@@ -120,3 +121,16 @@ export * from './helpers/ucfirst.js';
 export * from './helpers/unique-id.js';
 // Data
 export * from './data/index.js';
+// Icons
+export { default as AngleRightIcon } from './icons/angle-right-icon.svelte';
+export { default as AngleUpIcon } from './icons/angle-up-icon.svelte';
+export { default as CheckIcon } from './icons/check-icon.svelte';
+export { default as EnvelopIcon } from './icons/envelope-icon.svelte';
+export { default as FolderOpenIcon } from './icons/folder-open-icon.svelte';
+export { default as HambugerIcon } from './icons/hamburger-icon.svelte';
+export { default as HomeIcon } from './icons/home-icon.svelte';
+export { default as LinkIcon } from './icons/link-icon.svelte';
+export { default as MobilePhoneIcon } from './icons/mobile-phone-icon.svelte';
+export { default as PhoneIcon } from './icons/phone-icon.svelte';
+export { default as SvgIcon } from './icons/svg-icon.svelte';
+export { default as UploadIcon } from './icons/upload-icon.svelte';

package/dist/layout/flex-col.svelte

@@ -16,17 +16,17 @@ $:
   _alignItems = ["start", "end"].includes(alignItems) ? `flex-${alignItems}` : alignItems;
 $:
   _gap = typeof gap === "number" ? `${gap}px` : gap;
-</script>
-
-<div style={`
-	margin-top: ${_marginTop}; margin-bottom: ${_marginBottom}; 
-	gap: ${_gap}; jusify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent}
-`}>
-	<slot />
-</div>
-
+</script>
+
+<div style={`
+	margin-top: ${_marginTop}; margin-bottom: ${_marginBottom}; 
+	gap: ${_gap}; jusify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent}
+`}>
+	<slot />
+</div>
+
 <style>div {
   display: flex;
   flex-direction: column;
   width: 100%;
-}</style>
+}</style>

package/dist/layout/flex-item.svelte

@@ -1,7 +1,7 @@
 <script>export let grow = false;
 export let align = "auto";
-</script>
-
-<div style={`flex: ${grow ? 1 : 0}; align-self: ${align}`}>
-	<slot />
-</div>
+</script>
+
+<div style={`flex: ${grow ? 1 : 0}; align-self: ${align}`}>
+	<slot />
+</div>

package/dist/layout/flex-row.svelte

@@ -18,18 +18,18 @@ $:
   _alignItems = ["start", "end"].includes(alignItems) ? `flex-${alignItems}` : alignItems;
 $:
   _gap = typeof gap === "number" ? `${gap}px` : gap;
-</script>
-
-<div
-	style={`
-		margin-top: ${_marginTop}; margin-bottom: ${_marginBottom}; gap: ${_gap}; 
-		justify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent};
-	`}
-	class="size-{size} {wrap ? 'wrap' : 'nowrap'}"
->
-	<slot />
-</div>
-
+</script>
+
+<div
+	style={`
+		margin-top: ${_marginTop}; margin-bottom: ${_marginBottom}; gap: ${_gap}; 
+		justify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent};
+	`}
+	class="size-{size} {wrap ? 'wrap' : 'nowrap'}"
+>
+	<slot />
+</div>
+
 <style>div {
   display: flex;
   width: 100%;
@@ -41,4 +41,4 @@ div.size-auto {
 }
 div.wrap {
   flex-wrap: wrap;
-}</style>
+}</style>