feat(layer): first pass at Layer component (#1932)

Closes #1892

src/Layer/Layer.svelte

@@ -0,0 +1,37 @@
+<script>
+  import { getContext, setContext } from "svelte";
+
+  /**
+   * Specify the layer level to override any existing levels based on hierarchy.
+   * @type {0 | 1 | 2 }
+   */
+  export let level = undefined;
+
+  /** Specify the HTML element to render. */
+  export let as = "div";
+
+  /**
+   * Specify the Layer HTML element props
+   * @type {import('svelte/elements').HTMLElementAttributes}
+   */
+  export let layerProps = {};
+
+  // If there is no level override, determine the Level based on the hierarchy
+  const parentLevel = getContext("LAYER_CONTEXT");
+
+  if (level === undefined) {
+    level = typeof parentLevel === "number" ? parentLevel + 1 : 0;
+  }
+
+  setContext("LAYER_CONTEXT", level);
+</script>
+
+<svelte:element
+  this="{as}"
+  class:bx--layer-one="{level === 0}"
+  class:bx--layer-two="{level === 1}"
+  class:bx--layer-three="{level === 2}"
+  {...layerProps}
+>
+  <slot />
+</svelte:element>

src/Layer/index.js

@@ -0,0 +1 @@
+export { default as Layer } from "./Layer.svelte";

src/index.js

@@ -58,6 +58,7 @@ export { FormLabel } from "./FormLabel";
 export { Grid, Row, Column } from "./Grid";
 export { ImageLoader } from "./ImageLoader";
 export { InlineLoading } from "./InlineLoading";
+export { Layer } from "./Layer";
 export { Link, OutboundLink } from "./Link";
 export {
   ListBox,