Add Chips component

src/routes/_internal/components/Example.svelte

@@ -17,6 +17,8 @@
 
 <style lang="postcss">
     .example {
+        margin-bottom: 32px;
+
         &__preview {
             padding: 16px;
             border-radius: var(--rounded-sm-top);

src/routes/_internal/components/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar'].sort()
+    const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar', 'Chips'].sort()
 </script>
 
 <nav class="sidebar">

src/routes/components/Chips.md

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import Chips from "$lib/components/Chips.svelte";
+    import Example from "../_internal/components/Example.svelte"
+
+    let foo = 'modpack'
+</script>
+
+### Simple example
+
+<Example code={`
+<Chips options={[
+    {
+        label: 'One',
+        value: 'one'
+    },
+    {
+        label: 'Two',
+        value: 'two'
+    }]}
+/>
+`}>
+<Chips options={[
+{
+label: 'One',
+value: 'one'
+},
+{
+label: 'Two',
+value: 'two'
+}]}
+/>
+</Example>
+
+
+### Force an option to be selected with `neverEmpty`
+
+<Example code={`
+<script>
+    let foo = 'modpack';
+</script>
+
+<Chips neverEmpty bind:value={foo} options={[
+    {
+        label: 'Mod',
+        value: 'mod'
+    },
+    {
+        label: 'Modpack',
+        value: 'modpack'
+    },
+    {
+        label: 'World',
+        value: 'world'
+    }]}
+/>
+`}>
+<Chips neverEmpty bind:value={foo} options={[
+{
+label: 'Mod',
+value: 'mod'
+},
+{
+label: 'Modpack',
+value: 'modpack'
+},
+{
+label: 'World',
+value: 'world'
+}]}
+/>
+</Example>