Create listbox component

packages/bbui/src/ListBox/Checkbox.svelte

@@ -0,0 +1,62 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let text
+  export let disabled = false
+
+  $: indeterminate = value === "partial"
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event)
+  }
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--emphasized spectrum-Checkbox--sizeM {indeterminate
+    ? 'is-indeterminate'
+    : ''}"
+  class:checked={value}
+>
+  <input
+    checked={value}
+    {disabled}
+    on:change={onChange}
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    value={text}
+  />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+
+  <span class="spectrum-Checkbox-label">{text}</span>
+</label>
+
+<style>
+  .spectrum-Checkbox {
+    display: flex;
+    flex-grow: 1;
+    padding: 4px 16px;
+  }
+  .spectrum-Checkbox-input {
+    opacity: 0;
+    display: none;
+  }
+</style>

packages/bbui/src/ListBox/ListBox.svelte

@@ -0,0 +1,99 @@
+<script>
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import "@spectrum-css/radio/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+  import Checkbox from "./Checkbox.svelte"
+
+  export let value = []
+  export let options = []
+  export let disabled = false
+
+  export let showSelectAll = true
+  export let selectAllText = "Select all"
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    const target = e.detail.target
+    let tempValue = value
+    let isChecked = target.checked
+
+    const isIncluded = tempValue.includes(target.value)
+
+    if (!isIncluded && isChecked) {
+      tempValue.push(target.value)
+    } else if (!isChecked && isIncluded) {
+      tempValue.splice(tempValue.indexOf(target.value), 1)
+    }
+    value = tempValue
+  }
+
+  $: dispatch("change", value)
+
+  let allSelected = false
+  $: {
+    if (value.length === options.length) {
+      allSelected = true
+    } else if (value.length === 0) {
+      allSelected = false
+    } else {
+      allSelected = "partial"
+    }
+  }
+
+  const toggleSelectAll = () => {
+    if (allSelected === true) {
+      value = []
+    } else {
+      value = [...options]
+    }
+  }
+</script>
+
+<div class={`spectrum-FieldGroup spectrum-FieldGroup--vertical`}>
+  {#if options && Array.isArray(options)}
+    {#if showSelectAll}
+      <div class="CheckBoxItem">
+        <Checkbox
+          value={allSelected}
+          on:change={toggleSelectAll}
+          {disabled}
+          text={selectAllText}
+        />
+      </div>
+    {/if}
+    {#each options as option}
+      <div
+        title={option}
+        class={`spectrum-Checkbox spectrum-FieldGroup-item CheckBoxItem`}
+      >
+        <Checkbox
+          on:change={onChange}
+          {disabled}
+          value={value.includes(option)}
+          text={option}
+          dispatchFullEvent
+        />
+      </div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .spectrum-FieldGroup {
+    width: 100%;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+  }
+
+  .spectrum-Checkbox-input {
+    opacity: 0;
+  }
+
+  .CheckBoxGroup {
+    width: 100%;
+  }
+
+  .CheckBoxItem:hover {
+    background-color: rgba(255, 255, 255, 0.01);
+  }
+</style>

packages/bbui/src/index.js

@@ -78,6 +78,7 @@ export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte
 export { default as Slider } from "./Form/Slider.svelte"
 export { default as Accordion } from "./Accordion/Accordion.svelte"
 export { default as File } from "./Form/File.svelte"
+export { default as ListBox } from "./ListBox/ListBox.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"