Merge branch 'adjust-spacing-utilities'

ngblaylock · Feb 25, 2025 · 7b51627 · 7b51627
2 parents dbf54c2 + 1cb789a
commit 7b51627
Show file tree

Hide file tree

Showing 29 changed files with 272 additions and 73 deletions.
diff --git a/dist/GDebug.svelte b/dist/GDebug.svelte
@@ -17,15 +17,15 @@ let show = $derived(showInProd || dev);
       />
     </div>
     {#await codeToHtml( JSON.stringify(data, null, 2), { lang: 'json', theme: 'material-theme' }, )}
-      <div class="m-n3 shiki-example bg-dark">
+      <div class="m-n4 shiki-example bg-dark">
         <pre style="background-color: #263238; color: #EEFFFF;">{JSON.stringify(
             data,
             null,
             2,
           )}</pre>
       </div>
     {:then value}
-      <div class="m-n3 shiki-example">{@html value}</div>
+      <div class="m-n4 shiki-example">{@html value}</div>
     {/await}
   </div>
 {/if}

diff --git a/dist/nathanblaylock.min.css b/dist/nathanblaylock.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "nathanblaylock.com",
-	"version": "2.3.3",
+	"version": "2.3.4",
 	"private": true,
 	"type": "module",
 	"exports": {

diff --git a/src/PACKAGE/components/GDebug.svelte b/src/PACKAGE/components/GDebug.svelte
@@ -24,15 +24,15 @@
       />
     </div>
     {#await codeToHtml( JSON.stringify(data, null, 2), { lang: 'json', theme: 'material-theme' }, )}
-      <div class="m-n3 shiki-example bg-dark">
+      <div class="m-n4 shiki-example bg-dark">
         <pre style="background-color: #263238; color: #EEFFFF;">{JSON.stringify(
             data,
             null,
             2,
           )}</pre>
       </div>
     {:then value}
-      <div class="m-n3 shiki-example">{@html value}</div>
+      <div class="m-n4 shiki-example">{@html value}</div>
     {/await}
   </div>
 {/if}

diff --git a/src/PACKAGE/examples/CheckboxGroup.svelte b/src/PACKAGE/examples/CheckboxGroup.svelte
@@ -18,6 +18,13 @@
 </script>
 
 <div class="vstack">
-  <GCheckboxGroup {items} bind:group legend="Car Brands" />
-  <GDebug data={group} showInProd />
+  <GCheckboxGroup
+    {items}
+    bind:group
+    legend="Car Brands"
+  />
+  <GDebug
+    data={group}
+    showInProd
+  />
 </div>
diff --git a/src/PACKAGE/examples/Checkboxes.svelte b/src/PACKAGE/examples/Checkboxes.svelte
@@ -7,14 +7,28 @@
   });
 </script>
 
-<GCheckbox bind:checked={checks.check1} label="Checkbox 1" />
+<GCheckbox
+  bind:checked={checks.check1}
+  label="Checkbox 1"
+/>
 <GCheckbox
   bind:checked={checks.check2}
   id="foo"
   label="Checkbox 2"
   hint="This is a hint for this selection."
 />
-<GCheckbox bind:checked={checks.check3} hideLabel label="Checkbox 3" />
-<GCheckbox bind:checked={checks.check4} disabled label="Disabled Checkbox" />
+<GCheckbox
+  bind:checked={checks.check3}
+  hideLabel
+  label="Checkbox 3"
+/>
+<GCheckbox
+  bind:checked={checks.check4}
+  disabled
+  label="Disabled Checkbox"
+/>
 
-<GDebug data={checks} showInProd />
+<GDebug
+  data={checks}
+  showInProd
+/>
diff --git a/src/PACKAGE/examples/Debug.svelte b/src/PACKAGE/examples/Debug.svelte
@@ -1,2 +1,10 @@
-<GDebug data={['one', 'two', 'three']} showInProd />
-<GDebug title="Custom Title" data={['one', 'two', 'three']} class="mb-0" showInProd />
+<GDebug
+  data={['one', 'two', 'three']}
+  showInProd
+/>
+<GDebug
+  title="Custom Title"
+  data={['one', 'two', 'three']}
+  class="mb-0"
+  showInProd
+/>
diff --git a/src/PACKAGE/examples/DebugProd.svelte b/src/PACKAGE/examples/DebugProd.svelte
@@ -1,2 +1,5 @@
 <GDebug data={['one', 'two', 'three']} />
-<GDebug data={['four', 'five', 'six']} showInProd />
+<GDebug
+  data={['four', 'five', 'six']}
+  showInProd
+/>
diff --git a/src/PACKAGE/examples/DebugUpdateData.svelte b/src/PACKAGE/examples/DebugUpdateData.svelte
@@ -7,4 +7,9 @@
   <GBtn onclick={() => data.pop()}>Remove Item</GBtn>
 </div>
 
-<GDebug title="Custom Title" {data} class="mb-0" showInProd />
+<GDebug
+  title="Custom Title"
+  {data}
+  class="mb-0"
+  showInProd
+/>
diff --git a/src/PACKAGE/examples/DevNote.svelte b/src/PACKAGE/examples/DevNote.svelte
@@ -2,6 +2,10 @@
   This is a note that only shows up in development mode.
 </GDevNote>
 
-<GDevNote title="Custom Title" class="mb-0" showInProd>
+<GDevNote
+  title="Custom Title"
+  class="mb-0"
+  showInProd
+>
   This one has a custom title.
 </GDevNote>
diff --git a/src/PACKAGE/examples/DevNoteProd.svelte b/src/PACKAGE/examples/DevNoteProd.svelte
@@ -1,2 +1,2 @@
 <GDevNote>This only shows up in Dev Mode.</GDevNote>
-<GDevNote showInProd>This shows up in Dev and Prod.</GDevNote>
+<GDevNote showInProd>This shows up in Dev and Prod.</GDevNote>
diff --git a/src/PACKAGE/examples/Icon.svelte b/src/PACKAGE/examples/Icon.svelte
@@ -1,7 +1,15 @@
 <div class="vstack">
   <GIcon name="home" />
 
-  <GIcon name="table" size={2} />
+  <GIcon
+    name="table"
+    size={2}
+  />
 
-  <span class="text-secondary"><GIcon name="poll" size={5.5} /></span>
+  <span class="text-secondary"
+    ><GIcon
+      name="poll"
+      size={5.5}
+    /></span
+  >
 </div>
diff --git a/src/PACKAGE/examples/IconBtn.svelte b/src/PACKAGE/examples/IconBtn.svelte
@@ -15,34 +15,53 @@
     <h3>Variants</h3>
     <div class="hstack">
       {#each variants as variant}
-        <GIconBtn title="Example Title" {variant} icon="home" />
+        <GIconBtn
+          title="Example Title"
+          {variant}
+          icon="home"
+        />
       {/each}
     </div>
   </div>
-  
+
   <div>
     <h3>Active</h3>
     <div class="hstack">
       {#each variants as variant}
-        <GIconBtn title="Example Title" {variant} icon="home" class="active" />
+        <GIconBtn
+          title="Example Title"
+          {variant}
+          icon="home"
+          class="active"
+        />
       {/each}
     </div>
   </div>
-  
+
   <div>
     <h3>Disabled</h3>
     <div class="hstack">
       {#each variants as variant}
-        <GIconBtn title="Example Title" {variant} icon="home" disabled />
+        <GIconBtn
+          title="Example Title"
+          {variant}
+          icon="home"
+          disabled
+        />
       {/each}
     </div>
   </div>
-  
+
   <div>
     <h3>Outline</h3>
     <div class="hstack">
       {#each variants as variant}
-        <GIconBtn title="Example Title" {variant} icon="home" outline />
+        <GIconBtn
+          title="Example Title"
+          {variant}
+          icon="home"
+          outline
+        />
       {/each}
     </div>
   </div>

diff --git a/src/PACKAGE/examples/RadioGroup.svelte b/src/PACKAGE/examples/RadioGroup.svelte
@@ -18,6 +18,13 @@
 </script>
 
 <div class="vstack">
-  <GRadioGroup {items} bind:group legend="Car Brands" />
-  <GDebug data={group} showInProd />
+  <GRadioGroup
+    {items}
+    bind:group
+    legend="Car Brands"
+  />
+  <GDebug
+    data={group}
+    showInProd
+  />
 </div>
diff --git a/src/PACKAGE/examples/SegmentedControl.svelte b/src/PACKAGE/examples/SegmentedControl.svelte
@@ -18,7 +18,13 @@
 
 <div class="vstack">
   <div>
-    <GSegmentedControl {items} bind:group />
+    <GSegmentedControl
+      {items}
+      bind:group
+    />
   </div>
-  <GDebug data={group} showInProd />
+  <GDebug
+    data={group}
+    showInProd
+  />
 </div>
diff --git a/src/PACKAGE/examples/SegmentedControlIcon.svelte b/src/PACKAGE/examples/SegmentedControlIcon.svelte
@@ -22,7 +22,13 @@
 
 <div class="vstack">
   <div>
-    <GSegmentedControl {items} bind:group />
+    <GSegmentedControl
+      {items}
+      bind:group
+    />
   </div>
-  <GDebug data={group} showInProd />
+  <GDebug
+    data={group}
+    showInProd
+  />
 </div>
diff --git a/src/PACKAGE/examples/SortableCards.svelte b/src/PACKAGE/examples/SortableCards.svelte
@@ -4,5 +4,8 @@
 
 <div class="vstack">
   <GSortableCards bind:items={data} />
-  <GDebug {data} showInProd />
+  <GDebug
+    {data}
+    showInProd
+  />
 </div>
diff --git a/src/PACKAGE/examples/SortableCardsSnippets.svelte b/src/PACKAGE/examples/SortableCardsSnippets.svelte
@@ -31,7 +31,10 @@
 </GSortableCards>
 
 <div class="hstack align-items-end mt-4">
-  <GTextInput label="Add Fruit" bind:value={newItem} />
+  <GTextInput
+    label="Add Fruit"
+    bind:value={newItem}
+  />
   <GBtn
     disabled={!newItem}
     onclick={() => {
@@ -41,4 +44,8 @@
   >
 </div>
 
-<GDebug class="mt-4" {data} showInProd />
+<GDebug
+  class="mt-4"
+  {data}
+  showInProd
+/>
diff --git a/src/PACKAGE/examples/TextInputValue.svelte b/src/PACKAGE/examples/TextInputValue.svelte
@@ -7,8 +7,21 @@
 </script>
 
 <div class="vstack">
-  <GTextInput label="Value 1" bind:value={myValues.value1} />
-  <GTextInput label="Value 2" bind:value={myValues.value2} />
-  <GTextInput label="Value 3" type="number" bind:value={myValues.value3} />
-  <GDebug data={myValues} showInProd />
+  <GTextInput
+    label="Value 1"
+    bind:value={myValues.value1}
+  />
+  <GTextInput
+    label="Value 2"
+    bind:value={myValues.value2}
+  />
+  <GTextInput
+    label="Value 3"
+    type="number"
+    bind:value={myValues.value3}
+  />
+  <GDebug
+    data={myValues}
+    showInProd
+  />
 </div>
diff --git a/src/PACKAGE/examples/TextInputs.svelte b/src/PACKAGE/examples/TextInputs.svelte
@@ -1,10 +1,32 @@
 <div class="vstack">
   <GTextInput label="Basic Input" />
-  <GTextInput label="Hidden Label" hideLabel />
-  <GTextInput label="Required" required />
-  <GTextInput label="Placeholder" placeholder="Here is a placeholder" />
-  <GTextInput label="Number" type="number" />
-  <GTextInput label="Disabled" disabled />
-  <GTextInput label="Readonly" readonly value="Foo" />
-  <GTextInput label="Hint" hint="This is helper text." />
-</div>
+  <GTextInput
+    label="Hidden Label"
+    hideLabel
+  />
+  <GTextInput
+    label="Required"
+    required
+  />
+  <GTextInput
+    label="Placeholder"
+    placeholder="Here is a placeholder"
+  />
+  <GTextInput
+    label="Number"
+    type="number"
+  />
+  <GTextInput
+    label="Disabled"
+    disabled
+  />
+  <GTextInput
+    label="Readonly"
+    readonly
+    value="Foo"
+  />
+  <GTextInput
+    label="Hint"
+    hint="This is helper text."
+  />
+</div>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div class="container">
-  <footer class="border-top hstack flex-wrap justify-content-center py-3">
+  <footer class="border-top hstack flex-wrap justify-content-center py-4">
     <div>© Nathan Blaylock {new Date().getFullYear()}</div>
     <div class="hstack flex-wrap justify-content-center">
       <a href="https://docs.nathanblaylock.com/" target="_blank">Documentation</a>

diff --git a/src/lib/components/Logos.svelte b/src/lib/components/Logos.svelte
@@ -8,7 +8,7 @@
 </script>
 
 {#if logos.length}
-  <div class="border-top pt-5 mt-5 text-center">
+  <div class="border-top pt-6 mt-6 text-center">
     <div class="hstack flex-wrap justify-content-center">
       {#each logos as logo}
         <Logo name={logo} />