From 1c059279de5f04bb100e6aa7199853a98d000937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 10:52:58 +0100
Subject: [PATCH 01/24] Setting line-height for large size in class instead of
 inline style

---
 src/fa-layers-text.svelte | 11 ++++++++++-
 src/fa-layers.svelte      |  5 +++++
 src/fa.svelte             |  5 +++++
 src/utils.js              |  3 ---
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index f05b659..9910d52 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -35,8 +35,17 @@ $: s = getStyles(
 );
 </script>
 
+<style>
+.size-lg {
+  line-height: .75em;
+}
+</style>
+
 <span id={id} class="svelte-fa-layers-text {clazz}">
-  <span style={s}>
+  <span
+    class:size-lg={size=='lg'}
+    style={s}
+  >
     <slot></slot>
   </span>
 </span>
diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index eaaba92..4feafb2 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -17,6 +17,10 @@ $: s = getStyles(style, size, pull, true);
 </script>
 
 <style>
+.size-lg {
+  line-height: .75em;
+}
+
 .svelte-fa-layers {
   display: inline-block;
   position: relative;
@@ -47,6 +51,7 @@ $: s = getStyles(style, size, pull, true);
 <span
   id={id}
   class="svelte-fa-layers {clazz}"
+  class:size-lg={size=='lg'}
   style={s}
 >
   <slot></slot>
diff --git a/src/fa.svelte b/src/fa.svelte
index 8171ce0..51a6d38 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -45,6 +45,10 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 </script>
 
 <style>
+.size-lg {
+  line-height: .75em;
+}
+
 .spin {
   animation: spin 2s 0s infinite linear;
 }
@@ -68,6 +72,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
     id={id || undefined}
     class="svelte-fa {clazz}"
     class:pulse
+    class:size-lg={size=='lg'}
     class:spin
     style={s}
     viewBox="0 0 {i[0]} {i[1]}"
diff --git a/src/utils.js b/src/utils.js
index f2e1ef5..9292bac 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -19,7 +19,6 @@ export function getStyles(style, size, pull, fw) {
   let float;
   let width;
   const height = '1em';
-  let lineHeight;
   let fontSize;
   let textAlign;
   let verticalAlign = '-.125em';
@@ -37,7 +36,6 @@ export function getStyles(style, size, pull, fw) {
   if (size) {
     if (size == 'lg') {
       fontSize = '1.33333em';
-      lineHeight = '.75em';
       verticalAlign = '-.225em';
     } else if (size == 'xs') {
       fontSize = '.75em';
@@ -53,7 +51,6 @@ export function getStyles(style, size, pull, fw) {
       float,
       width,
       height,
-      'line-height': lineHeight,
       'font-size': fontSize,
       'text-align': textAlign,
       'vertical-align': verticalAlign,

From 5a2cf92d0ab9daf44f64f46776ede060ecae0a5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 11:11:30 +0100
Subject: [PATCH 02/24] Moved size-lg to be global and shared between elements

---
 src/fa-layers-text.svelte | 6 ------
 src/fa-layers.svelte      | 4 ----
 src/fa.svelte             | 2 +-
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index 9910d52..f2d24c9 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -35,12 +35,6 @@ $: s = getStyles(
 );
 </script>
 
-<style>
-.size-lg {
-  line-height: .75em;
-}
-</style>
-
 <span id={id} class="svelte-fa-layers-text {clazz}">
   <span
     class:size-lg={size=='lg'}
diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index 4feafb2..d5213c2 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -17,10 +17,6 @@ $: s = getStyles(style, size, pull, true);
 </script>
 
 <style>
-.size-lg {
-  line-height: .75em;
-}
-
 .svelte-fa-layers {
   display: inline-block;
   position: relative;
diff --git a/src/fa.svelte b/src/fa.svelte
index 51a6d38..6be515b 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -45,7 +45,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 </script>
 
 <style>
-.size-lg {
+:global(.size-lg) {
   line-height: .75em;
 }
 

From 36786eccd5ee3e27be006668960f5ec4b5b4c1fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 11:20:59 +0100
Subject: [PATCH 03/24] Renamed global size-lg class

---
 src/fa-layers-text.svelte | 2 +-
 src/fa-layers.svelte      | 2 +-
 src/fa.svelte             | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index f2d24c9..05205db 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -37,7 +37,7 @@ $: s = getStyles(
 
 <span id={id} class="svelte-fa-layers-text {clazz}">
   <span
-    class:size-lg={size=='lg'}
+    class:svelte-fa-lg={size=='lg'}
     style={s}
   >
     <slot></slot>
diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index d5213c2..dc90386 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -47,7 +47,7 @@ $: s = getStyles(style, size, pull, true);
 <span
   id={id}
   class="svelte-fa-layers {clazz}"
-  class:size-lg={size=='lg'}
+  class:svelte-fa-lg={size=='lg'}
   style={s}
 >
   <slot></slot>
diff --git a/src/fa.svelte b/src/fa.svelte
index 6be515b..da0def2 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -45,7 +45,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 </script>
 
 <style>
-:global(.size-lg) {
+:global(.svelte-fa-lg) {
   line-height: .75em;
 }
 
@@ -72,7 +72,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
     id={id || undefined}
     class="svelte-fa {clazz}"
     class:pulse
-    class:size-lg={size=='lg'}
+    class:svelte-fa-lg={size=='lg'}
     class:spin
     style={s}
     viewBox="0 0 {i[0]} {i[1]}"

From 0b394947d95f7730c0d594b003729ee1c776073a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 11:21:28 +0100
Subject: [PATCH 04/24] Setting vertical-align in class instead of inline style

---
 src/fa-layers-text.svelte | 1 +
 src/fa-layers.svelte      | 2 +-
 src/fa.svelte             | 7 ++++++-
 src/utils.js              | 3 ---
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index 05205db..b291485 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -37,6 +37,7 @@ $: s = getStyles(
 
 <span id={id} class="svelte-fa-layers-text {clazz}">
   <span
+    class="svelte-fa-base"
     class:svelte-fa-lg={size=='lg'}
     style={s}
   >
diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index dc90386..8f95830 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -46,7 +46,7 @@ $: s = getStyles(style, size, pull, true);
 
 <span
   id={id}
-  class="svelte-fa-layers {clazz}"
+  class="svelte-fa-layers svelte-fa-base {clazz}"
   class:svelte-fa-lg={size=='lg'}
   style={s}
 >
diff --git a/src/fa.svelte b/src/fa.svelte
index da0def2..4431249 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -47,12 +47,17 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 <style>
 :global(.svelte-fa-lg) {
   line-height: .75em;
+  vertical-align: -.225em;
 }
 
 .spin {
   animation: spin 2s 0s infinite linear;
 }
 
+:global(.svelte-fa-base) {
+  vertical-align: -.125em;
+}
+
 .pulse {
   animation: spin 1s infinite steps(8);
 }
@@ -70,7 +75,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 {#if i[4]}
   <svg
     id={id || undefined}
-    class="svelte-fa {clazz}"
+    class="svelte-fa svelte-fa-base {clazz}"
     class:pulse
     class:svelte-fa-lg={size=='lg'}
     class:spin
diff --git a/src/utils.js b/src/utils.js
index 9292bac..a4802ad 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -21,7 +21,6 @@ export function getStyles(style, size, pull, fw) {
   const height = '1em';
   let fontSize;
   let textAlign;
-  let verticalAlign = '-.125em';
   const overflow = 'visible';
 
   if (fw) {
@@ -36,7 +35,6 @@ export function getStyles(style, size, pull, fw) {
   if (size) {
     if (size == 'lg') {
       fontSize = '1.33333em';
-      verticalAlign = '-.225em';
     } else if (size == 'xs') {
       fontSize = '.75em';
     } else if (size == 'sm') {
@@ -53,7 +51,6 @@ export function getStyles(style, size, pull, fw) {
       height,
       'font-size': fontSize,
       'text-align': textAlign,
-      'vertical-align': verticalAlign,
       'transform-origin': 'center',
       overflow,
     }),

From e2179eb9678e2fe74a07fddeadf04a319054182d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 11:22:27 +0100
Subject: [PATCH 05/24] Setting transform-origin in class instead of inline
 style

---
 src/fa.svelte | 1 +
 src/utils.js  | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fa.svelte b/src/fa.svelte
index 4431249..f20991c 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -55,6 +55,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 }
 
 :global(.svelte-fa-base) {
+  transform-origin: center;
   vertical-align: -.125em;
 }
 
diff --git a/src/utils.js b/src/utils.js
index a4802ad..7ab0e7d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -51,7 +51,6 @@ export function getStyles(style, size, pull, fw) {
       height,
       'font-size': fontSize,
       'text-align': textAlign,
-      'transform-origin': 'center',
       overflow,
     }),
     style,

From 06a6c5624baa5048e84a31e9df8d88705271e65d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 11:27:19 +0100
Subject: [PATCH 06/24] Setting origin in class instead of inline style

---
 src/fa.svelte | 1 +
 src/utils.js  | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/fa.svelte b/src/fa.svelte
index f20991c..a1a83f5 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -55,6 +55,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 }
 
 :global(.svelte-fa-base) {
+  overflow: visible;
   transform-origin: center;
   vertical-align: -.125em;
 }
diff --git a/src/utils.js b/src/utils.js
index 7ab0e7d..779ac1c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -21,7 +21,6 @@ export function getStyles(style, size, pull, fw) {
   const height = '1em';
   let fontSize;
   let textAlign;
-  const overflow = 'visible';
 
   if (fw) {
     textAlign = 'center';
@@ -51,7 +50,6 @@ export function getStyles(style, size, pull, fw) {
       height,
       'font-size': fontSize,
       'text-align': textAlign,
-      overflow,
     }),
     style,
   ]);

From 37d7abe1c5d7d4fccf96dd4b7ecfb78979442ef2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 11:47:14 +0100
Subject: [PATCH 07/24] Added class for fixed-width

---
 src/fa-layers.svelte |  2 +-
 src/fa.svelte        | 16 ++++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index 8f95830..fd3cc47 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -46,7 +46,7 @@ $: s = getStyles(style, size, pull, true);
 
 <span
   id={id}
-  class="svelte-fa-layers svelte-fa-base {clazz}"
+  class="svelte-fa-layers svelte-fa-base svelte-fa-fw {clazz}"
   class:svelte-fa-lg={size=='lg'}
   style={s}
 >
diff --git a/src/fa.svelte b/src/fa.svelte
index a1a83f5..ab267aa 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -45,6 +45,15 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 </script>
 
 <style>
+:global(.svelte-fa-base) {
+  overflow: visible;
+  transform-origin: center;
+  vertical-align: -.125em;
+}
+
+:global(.svelte-fa-fw) {
+}
+
 :global(.svelte-fa-lg) {
   line-height: .75em;
   vertical-align: -.225em;
@@ -54,12 +63,6 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
   animation: spin 2s 0s infinite linear;
 }
 
-:global(.svelte-fa-base) {
-  overflow: visible;
-  transform-origin: center;
-  vertical-align: -.125em;
-}
-
 .pulse {
   animation: spin 1s infinite steps(8);
 }
@@ -80,6 +83,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
     class="svelte-fa svelte-fa-base {clazz}"
     class:pulse
     class:svelte-fa-lg={size=='lg'}
+    class:svelte-fa-fw={fw}
     class:spin
     style={s}
     viewBox="0 0 {i[0]} {i[1]}"

From 6360433886f01bb99e1985f89cac175c10210bcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 11:49:16 +0100
Subject: [PATCH 08/24] fw styles in a class

---
 src/fa-layers.svelte |  2 +-
 src/fa.svelte        |  4 +++-
 src/utils.js         | 11 +----------
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index fd3cc47..561f9d9 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -13,7 +13,7 @@ export let pull = '';
 
 let s;
 
-$: s = getStyles(style, size, pull, true);
+$: s = getStyles(style, size, pull);
 </script>
 
 <style>
diff --git a/src/fa.svelte b/src/fa.svelte
index ab267aa..9b52a09 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -39,7 +39,7 @@ let transform;
 
 $: i = (icon && icon.icon) || [0, 0, '', [], ''];
 
-$: s = getStyles(style, size, pull, fw);
+$: s = getStyles(style, size, pull);
 
 $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 </script>
@@ -52,6 +52,8 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 }
 
 :global(.svelte-fa-fw) {
+  text-align: center;
+  width: 1.25em;
 }
 
 :global(.svelte-fa-lg) {
diff --git a/src/utils.js b/src/utils.js
index 779ac1c..5e7876d 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -15,17 +15,10 @@ export function joinCss(obj, separator = ';') {
   return texts.join(separator);
 }
 
-export function getStyles(style, size, pull, fw) {
+export function getStyles(style, size, pull) {
   let float;
-  let width;
   const height = '1em';
   let fontSize;
-  let textAlign;
-
-  if (fw) {
-    textAlign = 'center';
-    width = '1.25em';
-  }
 
   if (pull) {
     float = pull;
@@ -46,10 +39,8 @@ export function getStyles(style, size, pull, fw) {
   return joinCss([
     joinCss({
       float,
-      width,
       height,
       'font-size': fontSize,
-      'text-align': textAlign,
     }),
     style,
   ]);

From 7c1181087dfbcff3503b298725dbee58ec2cc4e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 11:51:28 +0100
Subject: [PATCH 09/24] Setting height in class instead of inline style

---
 src/fa.svelte | 1 +
 src/utils.js  | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/fa.svelte b/src/fa.svelte
index 9b52a09..1415bcd 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -46,6 +46,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 
 <style>
 :global(.svelte-fa-base) {
+  height: 1em;
   overflow: visible;
   transform-origin: center;
   vertical-align: -.125em;
diff --git a/src/utils.js b/src/utils.js
index 5e7876d..05d09c6 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -17,7 +17,6 @@ export function joinCss(obj, separator = ';') {
 
 export function getStyles(style, size, pull) {
   let float;
-  const height = '1em';
   let fontSize;
 
   if (pull) {
@@ -39,7 +38,6 @@ export function getStyles(style, size, pull) {
   return joinCss([
     joinCss({
       float,
-      height,
       'font-size': fontSize,
     }),
     style,

From 80d85edbbe4ba39133ac9a06446164c373bbf4d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 11:57:45 +0100
Subject: [PATCH 10/24] Setting pull in class instead of inline style

---
 src/fa-layers.svelte |  6 ++++--
 src/fa.svelte        | 14 ++++++++++++--
 src/utils.js         |  8 +-------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index 561f9d9..a8fd51e 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -13,7 +13,7 @@ export let pull = '';
 
 let s;
 
-$: s = getStyles(style, size, pull);
+$: s = getStyles(style, size);
 </script>
 
 <style>
@@ -47,7 +47,9 @@ $: s = getStyles(style, size, pull);
 <span
   id={id}
   class="svelte-fa-layers svelte-fa-base svelte-fa-fw {clazz}"
-  class:svelte-fa-lg={size=='lg'}
+  class:svelte-fa-lg={size === 'lg'}
+  class:svelte-fa-pull-left={pull === 'left'}
+  class:svelte-fa-pull-right={pull === 'right'}
   style={s}
 >
   <slot></slot>
diff --git a/src/fa.svelte b/src/fa.svelte
index 1415bcd..4bf12a3 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -39,7 +39,7 @@ let transform;
 
 $: i = (icon && icon.icon) || [0, 0, '', [], ''];
 
-$: s = getStyles(style, size, pull);
+$: s = getStyles(style, size);
 
 $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 </script>
@@ -62,6 +62,14 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
   vertical-align: -.225em;
 }
 
+:global(.svelte-fa-pull-left) {
+  float: left;
+}
+
+:global(.svelte-fa-pull-right) {
+  float: right;
+}
+
 .spin {
   animation: spin 2s 0s infinite linear;
 }
@@ -85,8 +93,10 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
     id={id || undefined}
     class="svelte-fa svelte-fa-base {clazz}"
     class:pulse
-    class:svelte-fa-lg={size=='lg'}
+    class:svelte-fa-lg={size === 'lg'}
     class:svelte-fa-fw={fw}
+    class:svelte-fa-pull-left={pull === 'left'}
+    class:svelte-fa-pull-right={pull === 'right'}
     class:spin
     style={s}
     viewBox="0 0 {i[0]} {i[1]}"
diff --git a/src/utils.js b/src/utils.js
index 05d09c6..8ae86d6 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -15,14 +15,9 @@ export function joinCss(obj, separator = ';') {
   return texts.join(separator);
 }
 
-export function getStyles(style, size, pull) {
-  let float;
+export function getStyles(style, size) {
   let fontSize;
 
-  if (pull) {
-    float = pull;
-  }
-
   if (size) {
     if (size == 'lg') {
       fontSize = '1.33333em';
@@ -37,7 +32,6 @@ export function getStyles(style, size, pull) {
 
   return joinCss([
     joinCss({
-      float,
       'font-size': fontSize,
     }),
     style,

From 41da1786fc129d0a9cc39825a4e56cb9bc860900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 13:06:10 +0100
Subject: [PATCH 11/24] Setting icon sizes in class instead of inline style

---
 src/fa-layers-text.svelte |  4 +++-
 src/fa-layers.svelte      |  4 +++-
 src/fa.svelte             | 23 +++++++++++++++++------
 src/utils.js              | 12 ++----------
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index b291485..8badd2b 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -38,7 +38,9 @@ $: s = getStyles(
 <span id={id} class="svelte-fa-layers-text {clazz}">
   <span
     class="svelte-fa-base"
-    class:svelte-fa-lg={size=='lg'}
+    class:svelte-fa-size-lg={size === 'lg'}
+    class:svelte-fa-size-sm={size === 'sm'}
+    class:svelte-fa-size-xs={size === 'xs'}
     style={s}
   >
     <slot></slot>
diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index a8fd51e..422d4d2 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -47,7 +47,9 @@ $: s = getStyles(style, size);
 <span
   id={id}
   class="svelte-fa-layers svelte-fa-base svelte-fa-fw {clazz}"
-  class:svelte-fa-lg={size === 'lg'}
+  class:svelte-fa-size-lg={size === 'lg'}
+  class:svelte-fa-size-sm={size === 'sm'}
+  class:svelte-fa-size-xs={size === 'xs'}
   class:svelte-fa-pull-left={pull === 'left'}
   class:svelte-fa-pull-right={pull === 'right'}
   style={s}
diff --git a/src/fa.svelte b/src/fa.svelte
index 4bf12a3..17de19a 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -57,11 +57,6 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
   width: 1.25em;
 }
 
-:global(.svelte-fa-lg) {
-  line-height: .75em;
-  vertical-align: -.225em;
-}
-
 :global(.svelte-fa-pull-left) {
   float: left;
 }
@@ -70,6 +65,20 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
   float: right;
 }
 
+:global(.svelte-fa-size-lg) {
+  font-size: 1.33333em;
+  line-height: .75em;
+  vertical-align: -.225em;
+}
+
+:global(.svelte-fa-size-sm) {
+  font-size: .875em;
+}
+
+:global(.svelte-fa-size-xs) {
+  font-size: .75em;
+}
+
 .spin {
   animation: spin 2s 0s infinite linear;
 }
@@ -93,7 +102,9 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
     id={id || undefined}
     class="svelte-fa svelte-fa-base {clazz}"
     class:pulse
-    class:svelte-fa-lg={size === 'lg'}
+    class:svelte-fa-size-lg={size === 'lg'}
+    class:svelte-fa-size-sm={size === 'sm'}
+    class:svelte-fa-size-xs={size === 'xs'}
     class:svelte-fa-fw={fw}
     class:svelte-fa-pull-left={pull === 'left'}
     class:svelte-fa-pull-right={pull === 'right'}
diff --git a/src/utils.js b/src/utils.js
index 8ae86d6..f501907 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -18,16 +18,8 @@ export function joinCss(obj, separator = ';') {
 export function getStyles(style, size) {
   let fontSize;
 
-  if (size) {
-    if (size == 'lg') {
-      fontSize = '1.33333em';
-    } else if (size == 'xs') {
-      fontSize = '.75em';
-    } else if (size == 'sm') {
-      fontSize = '.875em';
-    } else {
-      fontSize = size.replace('x', 'em');
-    }
+  if (size && size !== 'lg' && size !== 'xs' && size !== 'sm') {
+    fontSize = size.replace('x', 'em');
   }
 
   return joinCss([

From 44328da49a3c7fbd50bf5de766485e5155c6c1d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 13:18:09 +0100
Subject: [PATCH 12/24] Replaced static inline styles with a class

---
 src/fa-layers-text.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index 8badd2b..89f409a 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -25,8 +25,6 @@ $: s = getStyles(
   joinCss([
     joinCss({
       color,
-      display: 'inline-block',
-      height: 'auto',
       transform: getTransform(scale, translateX, translateY, rotate, flip, undefined, 'em', 'deg'),
     }),
     style,
@@ -35,9 +33,16 @@ $: s = getStyles(
 );
 </script>
 
+<style>
+.inner {
+  display: inline-block;
+  height: auto;
+}
+</style>
+
 <span id={id} class="svelte-fa-layers-text {clazz}">
   <span
-    class="svelte-fa-base"
+    class="svelte-fa-base inner"
     class:svelte-fa-size-lg={size === 'lg'}
     class:svelte-fa-size-sm={size === 'sm'}
     class:svelte-fa-size-xs={size === 'xs'}

From c78684a6bc437f1630a50a63a5a754dd670740d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Thu, 16 Nov 2023 13:48:36 +0100
Subject: [PATCH 13/24] Setting custom sizes with direct JS element
 manipulation

---
 src/fa-layers-text.svelte | 29 ++++++++++++++++-------------
 src/fa-layers.svelte      | 11 +++++++----
 src/fa.svelte             | 13 ++++++++-----
 src/utils.js              | 18 ++++++------------
 4 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index 89f409a..ae624a1 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -1,8 +1,10 @@
 <script>
+import { onMount } from 'svelte';
+
 import {
   joinCss,
-  getStyles,
   getTransform,
+  setCustomSize,
 } from './utils';
 
 let clazz = '';
@@ -20,21 +22,21 @@ export let rotate = '';
 export let flip = false;
 
 let s;
+let containerElement;
+
+onMount(setCustomSize(containerElement, size));
 
-$: s = getStyles(
-  joinCss([
-    joinCss({
-      color,
-      transform: getTransform(scale, translateX, translateY, rotate, flip, undefined, 'em', 'deg'),
-    }),
-    style,
-  ]),
-  size,
-);
+$: s = joinCss([
+  joinCss({
+    color,
+    transform: getTransform(scale, translateX, translateY, rotate, flip, undefined, 'em', 'deg'),
+  }),
+  style,
+]);
 </script>
 
 <style>
-.inner {
+.container {
   display: inline-block;
   height: auto;
 }
@@ -42,7 +44,8 @@ $: s = getStyles(
 
 <span id={id} class="svelte-fa-layers-text {clazz}">
   <span
-    class="svelte-fa-base inner"
+    bind:this={containerElement}
+    class="svelte-fa-base container"
     class:svelte-fa-size-lg={size === 'lg'}
     class:svelte-fa-size-sm={size === 'sm'}
     class:svelte-fa-size-xs={size === 'xs'}
diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index 422d4d2..3ff35cb 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -1,6 +1,8 @@
 <script>
+import { onMount } from 'svelte';
+
 import {
-  getStyles,
+  setCustomSize,
 } from './utils';
 
 let clazz = '';
@@ -11,9 +13,9 @@ export let style = '';
 export let size = '';
 export let pull = '';
 
-let s;
+let containerElement;
 
-$: s = getStyles(style, size);
+onMount(setCustomSize(containerElement, size));
 </script>
 
 <style>
@@ -46,13 +48,14 @@ $: s = getStyles(style, size);
 
 <span
   id={id}
+  bind:this={containerElement}
   class="svelte-fa-layers svelte-fa-base svelte-fa-fw {clazz}"
   class:svelte-fa-size-lg={size === 'lg'}
   class:svelte-fa-size-sm={size === 'sm'}
   class:svelte-fa-size-xs={size === 'xs'}
   class:svelte-fa-pull-left={pull === 'left'}
   class:svelte-fa-pull-right={pull === 'right'}
-  style={s}
+  {style}
 >
   <slot></slot>
 </span>
diff --git a/src/fa.svelte b/src/fa.svelte
index 17de19a..cb6ae14 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -1,7 +1,9 @@
 <script>
+import { onMount } from 'svelte';
+
 import {
-  getStyles,
   getTransform,
+  setCustomSize,
 } from './utils';
 
 let clazz = '';
@@ -34,12 +36,12 @@ export let secondaryOpacity = 0.4;
 export let swapOpacity = false;
 
 let i;
-let s;
 let transform;
+let svgElement;
 
-$: i = (icon && icon.icon) || [0, 0, '', [], ''];
+onMount(setCustomSize(svgElement, size));
 
-$: s = getStyles(style, size);
+$: i = (icon && icon.icon) || [0, 0, '', [], ''];
 
 $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 </script>
@@ -100,6 +102,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
 {#if i[4]}
   <svg
     id={id || undefined}
+    bind:this={svgElement}
     class="svelte-fa svelte-fa-base {clazz}"
     class:pulse
     class:svelte-fa-size-lg={size === 'lg'}
@@ -109,7 +112,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
     class:svelte-fa-pull-left={pull === 'left'}
     class:svelte-fa-pull-right={pull === 'right'}
     class:spin
-    style={s}
+    {style}
     viewBox="0 0 {i[0]} {i[1]}"
     aria-hidden="true"
     role="img"
diff --git a/src/utils.js b/src/utils.js
index f501907..17af0be 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -15,19 +15,13 @@ export function joinCss(obj, separator = ';') {
   return texts.join(separator);
 }
 
-export function getStyles(style, size) {
-  let fontSize;
-
-  if (size && size !== 'lg' && size !== 'xs' && size !== 'sm') {
-    fontSize = size.replace('x', 'em');
+export function setCustomSize(element, size) {
+  if (!size || size === 'lg' || size === 'sm' || size === 'xs') {
+    return () => {};
   }
-
-  return joinCss([
-    joinCss({
-      'font-size': fontSize,
-    }),
-    style,
-  ]);
+  return () => {
+    element.style.fontSize = size.replace('x', 'em');
+  };
 }
 
 export function getTransform(

From 7cff0fac60b7a5267095f841e876661b41314778 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Wed, 22 Nov 2023 17:48:04 +0100
Subject: [PATCH 14/24] Fixed use of undefined bound element in custom size
 setting

---
 docs/.htaccess            | 2 ++
 src/fa-layers-text.svelte | 2 +-
 src/fa-layers.svelte      | 2 +-
 src/fa.svelte             | 2 +-
 src/utils.js              | 7 ++-----
 5 files changed, 7 insertions(+), 8 deletions(-)
 create mode 100644 docs/.htaccess

diff --git a/docs/.htaccess b/docs/.htaccess
new file mode 100644
index 0000000..04d4816
--- /dev/null
+++ b/docs/.htaccess
@@ -0,0 +1,2 @@
+Header always set Content-Security-Policy "upgrade-insecure-requests; default-src 'none'; script-src 'self' https://cdn.jsdelivr.net/; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/; img-src 'self' https://img.shields.io/"
+#Header always set Content-Security-Policy "upgrade-insecure-requests; default-src 'none'; script-src 'self' https://cdn.jsdelivr.net/; style-src 'self' https://cdn.jsdelivr.net/; img-src 'self' https://img.shields.io/"
diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index ae624a1..4e6fa5b 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -24,7 +24,7 @@ export let flip = false;
 let s;
 let containerElement;
 
-onMount(setCustomSize(containerElement, size));
+onMount(() => { setCustomSize(containerElement, size); });
 
 $: s = joinCss([
   joinCss({
diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index 3ff35cb..bbe8383 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -15,7 +15,7 @@ export let pull = '';
 
 let containerElement;
 
-onMount(setCustomSize(containerElement, size));
+onMount(() => { setCustomSize(containerElement, size); });
 </script>
 
 <style>
diff --git a/src/fa.svelte b/src/fa.svelte
index cb6ae14..60aa35c 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -39,7 +39,7 @@ let i;
 let transform;
 let svgElement;
 
-onMount(setCustomSize(svgElement, size));
+onMount(() => { setCustomSize(svgElement, size); });
 
 $: i = (icon && icon.icon) || [0, 0, '', [], ''];
 
diff --git a/src/utils.js b/src/utils.js
index 17af0be..04e5ed5 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -16,12 +16,9 @@ export function joinCss(obj, separator = ';') {
 }
 
 export function setCustomSize(element, size) {
-  if (!size || size === 'lg' || size === 'sm' || size === 'xs') {
-    return () => {};
-  }
-  return () => {
+  if (size && size !== 'lg' && size !== 'sm' && size !== 'xs') {
     element.style.fontSize = size.replace('x', 'em');
-  };
+  }
 }
 
 export function getTransform(

From a65663cdc1709f3b0e72620fea5b8ea7ac1043fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Wed, 22 Nov 2023 18:09:20 +0100
Subject: [PATCH 15/24] Setting text color with direct JS element manipulation

---
 src/fa-layers-text.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index 4e6fa5b..67aebad 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -24,11 +24,13 @@ export let flip = false;
 let s;
 let containerElement;
 
-onMount(() => { setCustomSize(containerElement, size); });
+onMount(() => {
+  containerElement.style.color = color;
+  setCustomSize(containerElement, size);
+});
 
 $: s = joinCss([
   joinCss({
-    color,
     transform: getTransform(scale, translateX, translateY, rotate, flip, undefined, 'em', 'deg'),
   }),
   style,

From 5ec35062545d06846f08c26ca3dc6ad439bde889 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Wed, 22 Nov 2023 18:15:08 +0100
Subject: [PATCH 16/24] Setting text transform with direct JS element
 manipulation

---
 src/fa-layers-text.svelte | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index 67aebad..979bee1 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -2,7 +2,6 @@
 import { onMount } from 'svelte';
 
 import {
-  joinCss,
   getTransform,
   setCustomSize,
 } from './utils';
@@ -21,20 +20,13 @@ export let translateY = 0;
 export let rotate = '';
 export let flip = false;
 
-let s;
 let containerElement;
 
 onMount(() => {
   containerElement.style.color = color;
+  containerElement.style.transform = getTransform(scale, translateX, translateY, rotate, flip, undefined, 'em', 'deg');
   setCustomSize(containerElement, size);
 });
-
-$: s = joinCss([
-  joinCss({
-    transform: getTransform(scale, translateX, translateY, rotate, flip, undefined, 'em', 'deg'),
-  }),
-  style,
-]);
 </script>
 
 <style>
@@ -51,7 +43,7 @@ $: s = joinCss([
     class:svelte-fa-size-lg={size === 'lg'}
     class:svelte-fa-size-sm={size === 'sm'}
     class:svelte-fa-size-xs={size === 'xs'}
-    style={s}
+    {style}
   >
     <slot></slot>
   </span>

From fd591369819bf9da96811c35d99d8d1f380cc95d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Wed, 22 Nov 2023 21:44:23 +0100
Subject: [PATCH 17/24] Removed obsolete joinCss function

---
 src/utils.js | 28 +++++-----------------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/src/utils.js b/src/utils.js
index 04e5ed5..b7058f3 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,20 +1,5 @@
 const parseNumber = parseFloat;
 
-export function joinCss(obj, separator = ';') {
-  let texts;
-  if (Array.isArray(obj)) {
-    texts = obj.filter((text) => text);
-  } else {
-    texts = [];
-    for (const prop in obj) {
-      if (obj[prop]) {
-        texts.push(`${prop}:${obj[prop]}`);
-      }
-    }
-  }
-  return texts.join(separator);
-}
-
 export function setCustomSize(element, size) {
   if (size && size !== 'lg' && size !== 'sm' && size !== 'xs') {
     element.style.fontSize = size.replace('x', 'em');
@@ -44,12 +29,9 @@ export function getTransform(
     }
   }
 
-  return joinCss(
-    [
-      `translate(${parseNumber(translateX) * translateTimes}${translateUnit},${parseNumber(translateY) * translateTimes}${translateUnit})`,
-      `scale(${flipX * parseNumber(scale)},${flipY * parseNumber(scale)})`,
-      rotate && `rotate(${rotate}${rotateUnit})`,
-    ],
-    ' ',
-  );
+  let output = `translate(${parseNumber(translateX) * translateTimes}${translateUnit},${parseNumber(translateY) * translateTimes}${translateUnit}) scale(${flipX * parseNumber(scale)},${flipY * parseNumber(scale)})`;
+  if (rotate) {
+    output += ` rotate(${rotate}${rotateUnit})`;
+  }
+  return output;
 }

From acbdb083141366c3aab98a69a57ef6753aa63f93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Sun, 26 Nov 2023 10:55:20 +0100
Subject: [PATCH 18/24] Extracting styles in docs

---
 docs/index.html        | 1 +
 docs/rollup.config.mjs | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index e156441..6dfb49e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="dist/index.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/bootstrap@4/dist/css/bootstrap.min.css,npm/prismjs@1/themes/prism-okaidia.min.css">
     <title>svelte-fa - Tiny FontAwesome 5 component for Svelte</title>
   </head>
diff --git a/docs/rollup.config.mjs b/docs/rollup.config.mjs
index 77e20d0..b3d4d96 100644
--- a/docs/rollup.config.mjs
+++ b/docs/rollup.config.mjs
@@ -17,10 +17,9 @@ export default {
   external: ['svelte-fa'],
   plugins: [
     svelte({
-      emitCss: false,
+      emitCss: true,
       compilerOptions: {
         legacy: true,
-        css: true,
       },
     }),
     resolve({
@@ -33,6 +32,7 @@ export default {
       extensions: ['.js', '.jsx', '.es6', '.es', '.mjs', '.svelte'],
     }),
     postcss({
+      extract: true,
       extensions: ['.css'],
     }),
   ],

From ed2c8fe0d2cb7eba2860bc66442dcfae43bd771c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Sun, 26 Nov 2023 11:32:03 +0100
Subject: [PATCH 19/24] docs build artifact sync

---
 docs/dist/index.css |  3 +++
 docs/dist/index.js  | 36 +++---------------------------------
 2 files changed, 6 insertions(+), 33 deletions(-)
 create mode 100644 docs/dist/index.css

diff --git a/docs/dist/index.css b/docs/dist/index.css
new file mode 100644
index 0000000..aaa006a
--- /dev/null
+++ b/docs/dist/index.css
@@ -0,0 +1,3 @@
+.hue.svelte-1a2mimh{color:#238ae6;animation:svelte-1a2mimh-hue 30s infinite linear}@keyframes svelte-1a2mimh-hue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(-360deg)}}
+a.svelte-1yrtkpv.svelte-1yrtkpv,a.svelte-1yrtkpv.svelte-1yrtkpv:visited{color:currentColor}small.svelte-1yrtkpv.svelte-1yrtkpv{visibility:hidden}a.svelte-1yrtkpv:hover+small.svelte-1yrtkpv{visibility:visible}
+img.svelte-tdv3q3{max-width:100%;max-height:48px}small.svelte-tdv3q3{position:absolute;right:1rem;bottom:.1rem;color:#ddd;z-index:-1}
\ No newline at end of file
diff --git a/docs/dist/index.js b/docs/dist/index.js
index adc98a1..e8eaa2e 100644
--- a/docs/dist/index.js
+++ b/docs/dist/index.js
@@ -55,27 +55,6 @@
   function append(target, node) {
     target.appendChild(node);
   }
-  function append_styles(target, style_sheet_id, styles) {
-    var append_styles_to = get_root_for_style(target);
-    if (!append_styles_to.getElementById(style_sheet_id)) {
-      var style = element('style');
-      style.id = style_sheet_id;
-      style.textContent = styles;
-      append_stylesheet(append_styles_to, style);
-    }
-  }
-  function get_root_for_style(node) {
-    if (!node) return document;
-    var root = node.getRootNode ? node.getRootNode() : node.ownerDocument;
-    if (root && root.host) {
-      return root;
-    }
-    return node.ownerDocument;
-  }
-  function append_stylesheet(node, style) {
-    append(node.head || node, style);
-    return style.sheet;
-  }
   function insert(target, node, anchor) {
     target.insertBefore(node, anchor || null);
   }
@@ -598,9 +577,6 @@
 
   var faInfo={prefix:'fas',iconName:'info',icon:[192,512,[],"f129","M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32H96c17.7 0 32 14.3 32 32V448h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V256H32c-17.7 0-32-14.3-32-32z"]};var faPencil={prefix:'fas',iconName:'pencil',icon:[512,512,[9999,61504,"pencil-alt"],"f303","M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"]};var faPencilAlt=faPencil;var faCircleNotch={prefix:'fas',iconName:'circle-notch',icon:[512,512,[],"f1ce","M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"]};var faFlag={prefix:'fas',iconName:'flag',icon:[448,512,[127988,61725],"f024","M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z"]};var faBookmark={prefix:'fas',iconName:'bookmark',icon:[384,512,[128278,61591],"f02e","M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z"]};var faStar={prefix:'fas',iconName:'star',icon:[576,512,[11088,61446],"f005","M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"]};var faStroopwafel={prefix:'fas',iconName:'stroopwafel',icon:[512,512,[],"f551","M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM312.6 63.7c-6.2-6.2-16.4-6.2-22.6 0L256 97.6 222.1 63.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l33.9 33.9-45.3 45.3-56.6-56.6c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l56.6 56.6-45.3 45.3L86.3 199.4c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L97.6 256 63.7 289.9c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l33.9-33.9 45.3 45.3-56.6 56.6c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l56.6-56.6 45.3 45.3-33.9 33.9c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L256 414.4l33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 45.3-45.3 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 45.3-45.3 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L414.4 256l33.9-33.9c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-33.9 33.9-45.3-45.3 56.6-56.6c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0l-56.6 56.6-45.3-45.3 33.9-33.9c6.2-6.2 6.2-16.4 0-22.6zM142.9 256l45.3-45.3L233.4 256l-45.3 45.3L142.9 256zm67.9 67.9L256 278.6l45.3 45.3L256 369.1l-45.3-45.3zM278.6 256l45.3-45.3L369.1 256l-45.3 45.3L278.6 256zm22.6-67.9L256 233.4l-45.3-45.3L256 142.9l45.3 45.3z"]};var faCertificate={prefix:'fas',iconName:'certificate',icon:[512,512,[],"f0a3","M211 7.3C205 1 196-1.4 187.6 .8s-14.9 8.9-17.1 17.3L154.7 80.6l-62-17.5c-8.4-2.4-17.4 0-23.5 6.1s-8.5 15.1-6.1 23.5l17.5 62L18.1 170.6c-8.4 2.1-15 8.7-17.3 17.1S1 205 7.3 211l46.2 45L7.3 301C1 307-1.4 316 .8 324.4s8.9 14.9 17.3 17.1l62.5 15.8-17.5 62c-2.4 8.4 0 17.4 6.1 23.5s15.1 8.5 23.5 6.1l62-17.5 15.8 62.5c2.1 8.4 8.7 15 17.1 17.3s17.3-.2 23.4-6.4l45-46.2 45 46.2c6.1 6.2 15 8.7 23.4 6.4s14.9-8.9 17.1-17.3l15.8-62.5 62 17.5c8.4 2.4 17.4 0 23.5-6.1s8.5-15.1 6.1-23.5l-17.5-62 62.5-15.8c8.4-2.1 15-8.7 17.3-17.1s-.2-17.3-6.4-23.4l-46.2-45 46.2-45c6.2-6.1 8.7-15 6.4-23.4s-8.9-14.9-17.3-17.1l-62.5-15.8 17.5-62c2.4-8.4 0-17.4-6.1-23.5s-15.1-8.5-23.5-6.1l-62 17.5L341.4 18.1c-2.1-8.4-8.7-15-17.1-17.3S307 1 301 7.3L256 53.5 211 7.3z"]};var faSeedling={prefix:'fas',iconName:'seedling',icon:[512,512,[127793,"sprout"],"f4d8","M512 32c0 113.6-84.6 207.5-194.2 222c-7.1-53.4-30.6-101.6-65.3-139.3C290.8 46.3 364 0 448 0h32c17.7 0 32 14.3 32 32zM0 96C0 78.3 14.3 64 32 64H64c123.7 0 224 100.3 224 224v32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V320C100.3 320 0 219.7 0 96z"]};var faArrowsRotate={prefix:'fas',iconName:'arrows-rotate',icon:[512,512,[128472,"refresh","sync"],"f021","M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V448c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H176c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"]};var faSync=faArrowsRotate;var faHeart={prefix:'fas',iconName:'heart',icon:[512,512,[128153,128154,128155,128156,128420,129293,129294,129505,9829,10084,61578],"f004","M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"]};var faCircle={prefix:'fas',iconName:'circle',icon:[512,512,[128308,128309,128992,128993,128994,128995,128996,9679,9898,9899,11044,61708,61915],"f111","M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"]};var faQuoteRight={prefix:'fas',iconName:'quote-right',icon:[448,512,[8221,"quote-right-alt"],"f10e","M448 296c0 66.3-53.7 120-120 120h-8c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H320c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72zm-256 0c0 66.3-53.7 120-120 120H64c-17.7 0-32-14.3-32-32s14.3-32 32-32h8c30.9 0 56-25.1 56-56v-8H64c-35.3 0-64-28.7-64-64V160c0-35.3 28.7-64 64-64h64c35.3 0 64 28.7 64 64v32 32 72z"]};var faEnvelope={prefix:'fas',iconName:'envelope',icon:[512,512,[128386,9993,61443],"f0e0","M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"]};var faGear={prefix:'fas',iconName:'gear',icon:[512,512,[9881,"cog"],"f013","M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"]};var faCog=faGear;var faHouse={prefix:'fas',iconName:'house',icon:[576,512,[127968,63498,63500,"home","home-alt","home-lg-alt"],"f015","M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"]};var faHome=faHouse;var faSun={prefix:'fas',iconName:'sun',icon:[512,512,[9728],"f185","M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"]};var faLink={prefix:'fas',iconName:'link',icon:[640,512,[128279,"chain"],"f0c1","M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"]};var faPlay={prefix:'fas',iconName:'play',icon:[384,512,[9654],"f04b","M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"]};var faXmark={prefix:'fas',iconName:'xmark',icon:[384,512,[128473,10005,10006,10060,215,"close","multiply","remove","times"],"f00d","M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"]};var faTimes=faXmark;var faQuoteLeft={prefix:'fas',iconName:'quote-left',icon:[448,512,[8220,"quote-left-alt"],"f10d","M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z"]};var faSpinner={prefix:'fas',iconName:'spinner',icon:[512,512,[],"f110","M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"]};var faMoon={prefix:'fas',iconName:'moon',icon:[384,512,[127769,9214],"f186","M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"]};var faCalendar={prefix:'fas',iconName:'calendar',icon:[448,512,[128197,128198],"f133","M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z"]};var faBook={prefix:'fas',iconName:'book',icon:[448,512,[128212],"f02d","M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"]};
 
-  function add_css$2(target) {
-    append_styles(target, "svelte-1a2mimh", ".hue.svelte-1a2mimh{color:#238ae6;animation:svelte-1a2mimh-hue 30s infinite linear}@keyframes svelte-1a2mimh-hue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(-360deg)}}");
-  }
   function get_each_context(ctx, list, i) {
     var child_ctx = ctx.slice();
     child_ctx[10] = list[i];
@@ -1132,7 +1108,7 @@
     function Showcase(options) {
       var _this;
       _this = _SvelteComponent.call(this) || this;
-      init(_assertThisInitialized(_this), options, instance$3, create_fragment$c, safe_not_equal, {}, add_css$2);
+      init(_assertThisInitialized(_this), options, instance$3, create_fragment$c, safe_not_equal, {});
       return _this;
     }
     return Showcase;
@@ -1219,9 +1195,6 @@
   }(SvelteComponent);
   var DocsCode = Docs_code;
 
-  function add_css$1(target) {
-    append_styles(target, "svelte-1yrtkpv", "a.svelte-1yrtkpv.svelte-1yrtkpv,a.svelte-1yrtkpv.svelte-1yrtkpv:visited{color:currentColor}small.svelte-1yrtkpv.svelte-1yrtkpv{visibility:hidden}a.svelte-1yrtkpv:hover+small.svelte-1yrtkpv{visibility:visible}");
-  }
   function create_fragment$a(ctx) {
     var h4;
     var a;
@@ -1313,7 +1286,7 @@
       init(_assertThisInitialized(_this), options, instance$1, create_fragment$a, safe_not_equal, {
         level: 0,
         title: 1
-      }, add_css$1);
+      });
       return _this;
     }
     return Docs_title;
@@ -2041,9 +2014,6 @@
   }(SvelteComponent);
   var BasicUse = Basic_use;
 
-  function add_css(target) {
-    append_styles(target, "svelte-tdv3q3", "img.svelte-tdv3q3{max-width:100%;max-height:48px}small.svelte-tdv3q3{position:absolute;right:1rem;bottom:.1rem;color:#ddd;z-index:-1}");
-  }
   function create_fragment$6(ctx) {
     var div;
     var img;
@@ -2096,7 +2066,7 @@
     function Docs_img(options) {
       var _this;
       _this = _SvelteComponent.call(this) || this;
-      init(_assertThisInitialized(_this), options, instance, create_fragment$6, safe_not_equal, {}, add_css);
+      init(_assertThisInitialized(_this), options, instance, create_fragment$6, safe_not_equal, {});
       return _this;
     }
     return Docs_img;

From 9d896a9656924a03f93ac533b499cd5af0740678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Sun, 26 Nov 2023 11:37:16 +0100
Subject: [PATCH 20/24] Not including style attribute without styles to not
 trigger CSP

---
 src/fa-layers-text.svelte | 2 +-
 src/fa-layers.svelte      | 2 +-
 src/fa.svelte             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index 979bee1..a4fd304 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -43,7 +43,7 @@ onMount(() => {
     class:svelte-fa-size-lg={size === 'lg'}
     class:svelte-fa-size-sm={size === 'sm'}
     class:svelte-fa-size-xs={size === 'xs'}
-    {style}
+    style={style !== '' ? style : null}
   >
     <slot></slot>
   </span>
diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index bbe8383..037ea46 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -55,7 +55,7 @@ onMount(() => { setCustomSize(containerElement, size); });
   class:svelte-fa-size-xs={size === 'xs'}
   class:svelte-fa-pull-left={pull === 'left'}
   class:svelte-fa-pull-right={pull === 'right'}
-  {style}
+  style={style !== '' ? style : null}
 >
   <slot></slot>
 </span>
diff --git a/src/fa.svelte b/src/fa.svelte
index 60aa35c..81eabfb 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -112,7 +112,7 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
     class:svelte-fa-pull-left={pull === 'left'}
     class:svelte-fa-pull-right={pull === 'right'}
     class:spin
-    {style}
+    style={style !== '' ? style : null}
     viewBox="0 0 {i[0]} {i[1]}"
     aria-hidden="true"
     role="img"

From c54a43e455ac2e2a8270bf6f6d2072650e45df53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Sun, 26 Nov 2023 13:35:13 +0100
Subject: [PATCH 21/24] Updated tests to use computed styles

---
 test/basic.test.js  |  79 +++++++------
 test/layers.test.js | 270 +++++++++++++++++++++++++++-----------------
 2 files changed, 212 insertions(+), 137 deletions(-)

diff --git a/test/basic.test.js b/test/basic.test.js
index 7cd3f3d..7641ec2 100644
--- a/test/basic.test.js
+++ b/test/basic.test.js
@@ -83,15 +83,16 @@ test('fw', async () => {
   mountFa({
     fw: true,
   });
-  let style = getFa().getAttribute('style');
-  expect(style).toContain('text-align:center');
+  let style = getComputedStyle(getFa());
+  expect(style['text-align']).toBe('center');
   expect(style).toContain('width');
 
   await setProps({
     fw: null,
   });
   style = getFa().getAttribute('style');
-  expect(style).not.toContain('text-align:center');
+  style = getComputedStyle(getFa());
+  expect(style).not.toContain('text-align');
   expect(style).not.toContain('width');
 });
 
@@ -99,42 +100,56 @@ test('pull', async () => {
   mountFa({
     pull: 'left',
   });
-  let style = getFa().getAttribute('style');
-  expect(style).toContain('float:left');
+  let style = getComputedStyle(getFa());
+  expect(style.float).toBe('left');
 
   await setProps({
     pull: 'right',
   });
-  style = getFa().getAttribute('style');
-  expect(style).toContain('float:right');
+  style = getComputedStyle(getFa());
+  expect(style.float).toBe('right');
 });
 
-test('size', async () => {
-  mountFa({
-    size: '2x',
-  });
-  let style = getFa().getAttribute('style');
-  expect(style).toContain('font-size:2em');
-
-  await setProps({
-    size: 'lg',
-  });
-  style = getFa().getAttribute('style');
-  expect(style).toContain('font-size:1.33333em');
-  expect(style).toContain('line-height:.75em');
-  expect(style).toContain('vertical-align:-.225em');
-
-  await setProps({
-    size: 'xs',
+describe('size', () => {
+  test('2x', async () => {
+    mountFa({
+      size: '2x',
+    });
+    const style = getComputedStyle(getFa());
+    expect(style['font-size']).toBe('2em');
+    expect(style['line-height']).toBe('');
+    expect(style['vertical-align']).toBe('-.125em');
+  });
+
+  test('lg', async () => {
+    mountFa({
+      size: 'lg',
+    });
+    const style = getComputedStyle(getFa());
+    expect(style['font-size']).toBe('1.33333em');
+    expect(style['line-height']).toBe('.75em');
+    expect(style['vertical-align']).toBe('-.225em');
+  });
+
+  test('xs', async () => {
+    mountFa({
+      size: 'xs',
+    });
+    const style = getComputedStyle(getFa());
+    expect(style['font-size']).toBe('.75em');
+    expect(style['line-height']).toBe('');
+    expect(style['vertical-align']).toBe('-.125em');
+  });
+
+  test('sm', async () => {
+    mountFa({
+      size: 'sm',
+    });
+    const style = getComputedStyle(getFa());
+    expect(style['font-size']).toBe('.875em');
+    expect(style['line-height']).toBe('');
+    expect(style['vertical-align']).toBe('-.125em');
   });
-  style = getFa().getAttribute('style');
-  expect(style).toContain('font-size:.75em');
-
-  await setProps({
-    size: 'sm',
-  });
-  style = getFa().getAttribute('style');
-  expect(style).toContain('font-size:.875em');
 });
 
 test('scale', async () => {
diff --git a/test/layers.test.js b/test/layers.test.js
index 649ae74..67c5a67 100644
--- a/test/layers.test.js
+++ b/test/layers.test.js
@@ -72,7 +72,8 @@ test('color', async () => {
       color: 'red',
     },
   );
-  expect(getFaLayersText().querySelector('span').getAttribute('style')).toContain('color:red');
+  const style = getComputedStyle(getFaLayersText().querySelector('span'));
+  expect(style.color).toBe('red');
 
   await setProps(faLayersText, {
     color: undefined,
@@ -84,8 +85,8 @@ test('pull', async () => {
   mountFaLayers({
     pull: 'left',
   });
-  let style = getFaLayers().getAttribute('style');
-  expect(style).toContain('float:left');
+  let style = getComputedStyle(getFaLayers());
+  expect(style.float).toBe('left');
 
   await setProps(faLayers, {
     pull: 'right',
@@ -94,129 +95,188 @@ test('pull', async () => {
   expect(style).toContain('float:right');
 });
 
-test('size', async () => {
-  mountFaLayers(
-    {
-      size: '2x',
-    },
-    {
-      size: '2x',
-    },
-  );
-  let style = getFaLayers().getAttribute('style');
-  let styleText = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(style).toContain('font-size:2em');
-  expect(styleText).toContain('font-size:2em');
-
-  await setProps(faLayers, {
-    size: 'lg',
-  });
-  await setProps(faLayersText, {
-    size: 'lg',
+describe('size', () => {
+  test('2x', async () => {
+    mountFaLayers(
+      {
+        size: '2x',
+      },
+      {
+        size: '2x',
+      },
+    );
+    const style = getComputedStyle(getFaLayers());
+    const styleText = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style['font-size']).toBe('2em');
+    expect(style['line-height']).toBe('');
+    expect(style['vertical-align']).toBe('');
+    expect(styleText['font-size']).toBe('2em');
+    expect(styleText['line-height']).toBe('');
+    expect(styleText['vertical-align']).toBe('');
   });
-  style = getFaLayers().getAttribute('style');
-  styleText = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(style).toContain('font-size:1.33333em');
-  expect(style).toContain('line-height:.75em');
-  expect(style).toContain('vertical-align:-.225em');
-  expect(styleText).toContain('font-size:1.33333em');
-  expect(styleText).toContain('line-height:.75em');
-  expect(styleText).toContain('vertical-align:-.225em');
 
-  await setProps(faLayers, {
-    size: 'xs',
+  test('lg', async () => {
+    mountFaLayers(
+      {
+        size: 'lg',
+      },
+      {
+        size: 'lg',
+      },
+    );
+    const style = getComputedStyle(getFaLayers());
+    const styleText = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style['font-size']).toBe('1.33333em');
+    expect(style['line-height']).toBe('.75em');
+    expect(style['vertical-align']).toBe('-.225em');
+    expect(styleText['font-size']).toBe('1.33333em');
+    expect(styleText['line-height']).toBe('.75em');
+    expect(styleText['vertical-align']).toBe('-.225em');
   });
-  await setProps(faLayersText, {
-    size: 'xs',
-  });
-  style = getFaLayers().getAttribute('style');
-  styleText = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(style).toContain('font-size:.75em');
-  expect(styleText).toContain('font-size:.75em');
 
-  await setProps(faLayers, {
-    size: 'sm',
+  test('xs', async () => {
+    mountFaLayers(
+      {
+        size: 'xs',
+      },
+      {
+        size: 'xs',
+      },
+    );
+    const style = getComputedStyle(getFaLayers());
+    const styleText = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style['font-size']).toBe('.75em');
+    expect(style['line-height']).toBe('');
+    expect(style['vertical-align']).toBe('');
+    expect(styleText['font-size']).toBe('.75em');
+    expect(styleText['line-height']).toBe('');
+    expect(styleText['vertical-align']).toBe('');
   });
-  await setProps(faLayersText, {
-    size: 'sm',
+
+  test('sm', async () => {
+    mountFaLayers(
+      {
+        size: 'sm',
+      },
+      {
+        size: 'sm',
+      },
+    );
+    const style = getComputedStyle(getFaLayers());
+    const styleText = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style['font-size']).toBe('.875em');
+    expect(style['line-height']).toBe('');
+    expect(style['vertical-align']).toBe('');
+    expect(styleText['font-size']).toBe('.875em');
+    expect(styleText['line-height']).toBe('');
+    expect(styleText['vertical-align']).toBe('');
   });
-  style = getFaLayers().getAttribute('style');
-  styleText = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(style).toContain('font-size:.875em');
-  expect(styleText).toContain('font-size:.875em');
 });
 
-test('scale', async () => {
-  mountFaLayers(
-    {},
-    {
-      scale: 0.5,
-    },
-  );
-  let transform = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(transform).toContain('scale(0.5,0.5)');
+describe('scale', () => {
+  test('half', async () => {
+    mountFaLayers(
+      {},
+      {
+        scale: 0.5,
+      },
+    );
+    const style = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style.transform).toContain('scale(0.5,0.5)');
+  });
 
-  await setProps(faLayersText, {
-    scale: 2,
+  test('double', async () => {
+    mountFaLayers(
+      {},
+      {
+        scale: 2,
+      },
+    );
+    const style = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style.transform).toContain('scale(2,2)');
   });
-  transform = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(transform).toContain('scale(2,2)');
 });
 
-test('translate', async () => {
-  mountFaLayers(
-    {},
-    {
-      translateX: 1,
-    },
-  );
-  let transform = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(transform).toContain('translate(1em,0em)');
+describe('translate', () => {
+  test('X', async () => {
+    mountFaLayers(
+      {},
+      {
+        translateX: 1,
+      },
+    );
+    const style = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style.transform).toContain('translate(1em,0em)');
+  });
 
-  await setProps(faLayersText, {
-    translateX: 0,
-    translateY: 1,
+  test('Y', async () => {
+    mountFaLayers(
+      {},
+      {
+        translateX: 0,
+        translateY: 1,
+      },
+    );
+
+    const style = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style.transform).toContain('translate(0em,1em)');
   });
-  transform = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(transform).toContain('translate(0em,1em)');
 });
 
-test('flip', async () => {
-  mountFaLayers(
-    {},
-    {
-      flip: 'both',
-    },
-  );
-  let transform = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(transform).toContain('scale(-1,-1)');
-
-  await setProps(faLayersText, {
-    flip: 'horizontal',
+describe('flip', () => {
+  test('both', async () => {
+    mountFaLayers(
+      {},
+      {
+        flip: 'both',
+      },
+    );
+    const style = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style.transform).toContain('scale(-1,-1)');
+  });
+  test('horizontal', async () => {
+    mountFaLayers(
+      {},
+      {
+        flip: 'horizontal',
+      },
+    );
+    const style = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style.transform).toContain('scale(-1,1)');
   });
-  transform = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(transform).toContain('scale(-1,1)');
 
-  await setProps(faLayersText, {
-    flip: 'vertical',
+  test('vertical', async () => {
+    mountFaLayers(
+      {},
+      {
+        flip: 'vertical',
+      },
+    );
+    const style = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style.transform).toContain('scale(1,-1)');
   });
-  transform = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(transform).toContain('scale(1,-1)');
 });
 
-test('rotate', async () => {
-  mountFaLayers(
-    {},
-    {
-      rotate: 90,
-    },
-  );
-  let transform = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(transform).toContain('rotate(90deg)');
+describe('rotate', () => {
+  test('90', async () => {
+    mountFaLayers(
+      {},
+      {
+        rotate: 90,
+      },
+    );
+    const style = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style.transform).toContain('rotate(90deg)');
+  });
 
-  await setProps(faLayersText, {
-    rotate: null,
+  test('null', async () => {
+    mountFaLayers(
+      {},
+      {
+        rotate: null,
+      },
+    );
+    const style = getComputedStyle(getFaLayersText().querySelector('span'));
+    expect(style.transform).not.toContain('rotate');
   });
-  transform = getFaLayersText().querySelector('span').getAttribute('style');
-  expect(transform).not.toContain('rotate');
 });

From d5ae23bdf88112ad9d27e61a4df74c1a6f971992 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Sun, 26 Nov 2023 13:38:43 +0100
Subject: [PATCH 22/24] Made toggled classes not global

---
 src/fa-layers-text.svelte | 14 ++++++++++++++
 src/fa-layers.svelte      | 26 ++++++++++++++++++++++++--
 src/fa.svelte             | 10 +++++-----
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/fa-layers-text.svelte b/src/fa-layers-text.svelte
index a4fd304..2502f92 100644
--- a/src/fa-layers-text.svelte
+++ b/src/fa-layers-text.svelte
@@ -34,6 +34,20 @@ onMount(() => {
   display: inline-block;
   height: auto;
 }
+
+.svelte-fa-size-lg {
+  font-size: 1.33333em;
+  line-height: .75em;
+  vertical-align: -.225em;
+}
+
+.svelte-fa-size-sm {
+  font-size: .875em;
+}
+
+.svelte-fa-size-xs {
+  font-size: .75em;
+}
 </style>
 
 <span id={id} class="svelte-fa-layers-text {clazz}">
diff --git a/src/fa-layers.svelte b/src/fa-layers.svelte
index 037ea46..ac96fc1 100644
--- a/src/fa-layers.svelte
+++ b/src/fa-layers.svelte
@@ -44,17 +44,39 @@ onMount(() => { setCustomSize(containerElement, size); });
 .svelte-fa-layers :global(.svelte-fa-layers-text span) {
   display: inline-block;
 }
+
+.svelte-fa-pull-left {
+  float: left;
+}
+
+.svelte-fa-pull-right {
+  float: right;
+}
+
+.svelte-fa-size-lg {
+  font-size: 1.33333em;
+  line-height: .75em;
+  vertical-align: -.225em;
+}
+
+.svelte-fa-size-sm {
+  font-size: .875em;
+}
+
+.svelte-fa-size-xs {
+  font-size: .75em;
+}
 </style>
 
 <span
   id={id}
   bind:this={containerElement}
   class="svelte-fa-layers svelte-fa-base svelte-fa-fw {clazz}"
+  class:svelte-fa-pull-left={pull === 'left'}
+  class:svelte-fa-pull-right={pull === 'right'}
   class:svelte-fa-size-lg={size === 'lg'}
   class:svelte-fa-size-sm={size === 'sm'}
   class:svelte-fa-size-xs={size === 'xs'}
-  class:svelte-fa-pull-left={pull === 'left'}
-  class:svelte-fa-pull-right={pull === 'right'}
   style={style !== '' ? style : null}
 >
   <slot></slot>
diff --git a/src/fa.svelte b/src/fa.svelte
index 81eabfb..00eb8af 100644
--- a/src/fa.svelte
+++ b/src/fa.svelte
@@ -59,25 +59,25 @@ $: transform = getTransform(scale, translateX, translateY, rotate, flip, 512);
   width: 1.25em;
 }
 
-:global(.svelte-fa-pull-left) {
+.svelte-fa-pull-left {
   float: left;
 }
 
-:global(.svelte-fa-pull-right) {
+.svelte-fa-pull-right {
   float: right;
 }
 
-:global(.svelte-fa-size-lg) {
+.svelte-fa-size-lg {
   font-size: 1.33333em;
   line-height: .75em;
   vertical-align: -.225em;
 }
 
-:global(.svelte-fa-size-sm) {
+.svelte-fa-size-sm {
   font-size: .875em;
 }
 
-:global(.svelte-fa-size-xs) {
+.svelte-fa-size-xs {
   font-size: .75em;
 }
 

From d253597fb4077e4afa20257d721101b1f0b39554 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Sun, 26 Nov 2023 13:40:42 +0100
Subject: [PATCH 23/24] Fixed test typo

---
 test/layers.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/layers.test.js b/test/layers.test.js
index 67c5a67..d29b714 100644
--- a/test/layers.test.js
+++ b/test/layers.test.js
@@ -91,8 +91,8 @@ test('pull', async () => {
   await setProps(faLayers, {
     pull: 'right',
   });
-  style = getFaLayers().getAttribute('style');
-  expect(style).toContain('float:right');
+  style = getComputedStyle(getFaLayers());
+  expect(style.float).toBe('right');
 });
 
 describe('size', () => {

From 25866fba037b76c2f85f8770eb29604c1916fef7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= <developer@dedic.eu>
Date: Sun, 26 Nov 2023 13:49:14 +0100
Subject: [PATCH 24/24] Removed docs htaccess, shouldn't have been commited in
 the first place

---
 docs/.htaccess | 2 --
 1 file changed, 2 deletions(-)
 delete mode 100644 docs/.htaccess

diff --git a/docs/.htaccess b/docs/.htaccess
deleted file mode 100644
index 04d4816..0000000
--- a/docs/.htaccess
+++ /dev/null
@@ -1,2 +0,0 @@
-Header always set Content-Security-Policy "upgrade-insecure-requests; default-src 'none'; script-src 'self' https://cdn.jsdelivr.net/; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/; img-src 'self' https://img.shields.io/"
-#Header always set Content-Security-Policy "upgrade-insecure-requests; default-src 'none'; script-src 'self' https://cdn.jsdelivr.net/; style-src 'self' https://cdn.jsdelivr.net/; img-src 'self' https://img.shields.io/"