chore: lift components folder

src/ListBox/ListBox.svelte

@@ -0,0 +1,33 @@
+<script>
+  export let size = undefined; // "sm" | "xl"
+  export let type = "default"; // "default" | "inline"
+  export let disabled = false;
+  export let invalid = false;
+  export let invalidText = "";
+  export let light = false;
+  export let open = false;
+</script>
+
+<div
+  role="listbox"
+  tabindex="-1"
+  data-invalid={invalid || undefined}
+  class:bx--list-box={true}
+  class:bx--list-box--inline={type === 'inline'}
+  class:bx--list-box--disabled={disabled}
+  class:bx--list-box--expanded={open}
+  class:bx--list-box--light={light}
+  class={size && `bx--list-box--${size}`}
+  {...$$restProps}
+  on:keydown
+  on:keydown={e => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+    }
+  }}
+  on:click|preventDefault|stopPropagation>
+  <slot />
+</div>
+{#if invalid}
+  <div class:bx--form-requirement={true}>{invalidText}</div>
+{/if}

src/ListBox/ListBoxField.svelte

@@ -0,0 +1,44 @@
+<script>
+  export const translationIds = { close: "close", open: "open" };
+  export let disabled = false;
+  export let id = "ccs-" + Math.random().toString(36);
+  export let role = "combobox";
+  export let tabindex = "-1";
+  export let translateWithId = id => defaultTranslations[id];
+  export let ref = null;
+
+  import { getContext } from "svelte";
+
+  const defaultTranslations = {
+    [translationIds.close]: "Close menu",
+    [translationIds.open]: "Open menu"
+  };
+  const ctx = getContext("MultiSelect");
+
+  $: if (ctx && ref) {
+    ctx.declareRef({ key: "field", ref });
+  }
+
+  $: ariaExpanded = $$props["aria-expanded"];
+  $: menuId = `menu-${id}`;
+</script>
+
+<div
+  bind:this={ref}
+  role={ariaExpanded ? 'combobox' : role}
+  aria-expanded={ariaExpanded}
+  aria-owns={(ariaExpanded && menuId) || undefined}
+  aria-controls={(ariaExpanded && menuId) || undefined}
+  aria-disabled={disabled}
+  aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
+  tabindex={disabled ? '-1' : tabindex}
+  class:bx--list-box__field={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown|preventDefault|stopPropagation
+  on:blur>
+  <slot />
+</div>

src/ListBox/ListBoxMenu.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let id = "ccs-" + Math.random().toString(36);
+
+  $: menuId = `menu-${id}`;
+</script>
+
+<div
+  role="listbox"
+  id={menuId}
+  class:bx--list-box__menu={true}
+  {...$$restProps}>
+  <slot />
+</div>

src/ListBox/ListBoxMenuIcon.svelte

@@ -0,0 +1,22 @@
+<script>
+  export const translationIds = { close: "close", open: "open" };
+  export let open = false;
+  export let translateWithId = id => defaultTranslations[id];
+
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+
+  const defaultTranslations = {
+    [translationIds.close]: "Close menu",
+    [translationIds.open]: "Open menu"
+  };
+
+  $: description = open ? translateWithId("close") : translateWithId("open");
+</script>
+
+<div
+  class:bx--list-box__menu-icon={true}
+  class:bx--list-box__menu-icon--open={open}
+  {...$$restProps}
+  on:click|preventDefault|stopPropagation>
+  <ChevronDown16 aria-label={description} title={description} />
+</div>

src/ListBox/ListBoxMenuItem.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let active = false;
+  export let highlighted = false;
+</script>
+
+<div
+  class:bx--list-box__menu-item={true}
+  class:bx--list-box__menu-item--active={active}
+  class:bx--list-box__menu-item--highlighted={highlighted}
+  {...$$restProps}
+  on:click
+  on:mouseenter
+  on:mouseleave>
+  <div class:bx--list-box__menu-item__option={true}>
+    <slot />
+  </div>
+</div>

src/ListBox/ListBoxSelection.svelte

@@ -0,0 +1,52 @@
+<script>
+  export const translationIds = {
+    clearAll: "clearAll",
+    clearSelection: "clearSelection"
+  };
+  export let disabled = false;
+  export let selectionCount = undefined;
+  export let translateWithId = id => defaultTranslations[id];
+  export let ref = null;
+
+  import { createEventDispatcher, getContext } from "svelte";
+  import Close16 from "carbon-icons-svelte/lib/Close16";
+
+  const defaultTranslations = {
+    [translationIds.clearAll]: "Clear all selected items",
+    [translationIds.clearSelection]: "Clear selected item"
+  };
+  const dispatch = createEventDispatcher();
+  const ctx = getContext("MultiSelect");
+
+  $: if (ctx && ref) {
+    ctx.declareRef({ key: "selection", ref });
+  }
+
+  $: description = selectionCount
+    ? translateWithId("clearAll")
+    : translateWithId("clearSelection");
+</script>
+
+<div
+  bind:this={ref}
+  role="button"
+  aria-label="Clear Selection"
+  tabindex={disabled ? '-1' : '0'}
+  title={description}
+  class:bx--list-box__selection={true}
+  class:bx--tag--filter={selectionCount}
+  class:bx--list-box__selection--multi={selectionCount}
+  {...$$restProps}
+  on:click|preventDefault|stopPropagation={e => {
+    if (!disabled) {
+      dispatch('clear', e);
+    }
+  }}
+  on:keydown|stopPropagation={e => {
+    if (!disabled && e.key === 'Enter') {
+      dispatch('clear', e);
+    }
+  }}>
+  {#if selectionCount}{selectionCount}{/if}
+  <Close16 />
+</div>

src/ListBox/index.js

@@ -0,0 +1,6 @@
+export { default as ListBox } from "./ListBox.svelte";
+export { default as ListBoxField } from "./ListBoxField.svelte";
+export { default as ListBoxMenu } from "./ListBoxMenu.svelte";
+export { default as ListBoxMenuIcon } from "./ListBoxMenuIcon.svelte";
+export { default as ListBoxMenuItem } from "./ListBoxMenuItem.svelte";
+export { default as ListBoxSelection } from "./ListBoxSelection.svelte";