@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/TreeChevron.svelte

@@ -1,24 +1,33 @@
-<script>import { onMount } from "svelte";
+<script>import { onMount } from 'svelte';
+// ----- Props ----- //
+/** When true, the chevron rotates to indicate children are visible. */
 export let expanded = false;
+/** When true, the chevron is displayed, otherwise a dot is displayed. */
 export let hasChildren = false;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let previousExpanded = expanded;
 let mounted = false;
+// ----- Event Handlers ----- //
 onMount(() => {
-  setTimeout(() => {
-    mounted = true;
-  }, 0);
+    setTimeout(() => {
+        mounted = true;
+    }, 0);
 });
+// ----- Animation ----- //
 let animate = false;
 $: {
-  if (expanded !== previousExpanded && mounted) {
-    animate = true;
-  }
-  previousExpanded = expanded;
+    if (expanded !== previousExpanded && mounted) {
+        animate = true;
+    }
+    previousExpanded = expanded;
 }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="tree-chevron"
+  class={`sterling-tree-chevron ${variant}`}
   class:leaf={!hasChildren}
   class:animate
   class:expanded
@@ -55,92 +64,3 @@ $: {
   on:wheel|passive
   {...$$restProps}
 />
-
-<style>
-  .tree-chevron {
-    position: relative;
-    border: none;
-    background: none;
-    height: 1em;
-    width: 1em;
-    transform-origin: 50% 50%;
-  }
-
-  .tree-chevron::after {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
-    width: 7px;
-    height: 7px;
-    border-right: 3px solid currentColor;
-    border-top: 3px solid currentColor;
-  }
-
-  :not(.expanded):not(.animate)::after {
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-
-  .expanded:not(.animate)::after {
-    transform: translate(-50%, -70%) rotate(135deg);
-  }
-
-  @keyframes rotate-collapse {
-    from {
-      transform: translate(-50%, -70%) rotate(135deg);
-    }
-    to {
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-  }
-
-  @keyframes rotate-expand {
-    from {
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-    to {
-      transform: translate(-50%, -70%) rotate(135deg);
-    }
-  }
-
-  :not(.expanded).animate::after {
-    animation-name: rotate-collapse;
-    animation-duration: 100ms;
-    animation-iteration-count: 1;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-  }
-
-  .expanded.animate::after {
-    animation-name: rotate-expand;
-    animation-duration: 100ms;
-    animation-iteration-count: 1;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-  }
-
-  .tree-chevron.leaf::after {
-    animation: none;
-    content: '';
-    position: absolute;
-    font: inherit;
-    left: 50%;
-    top: 50%;
-    width: 0.35em;
-    height: 0.35em;
-    background: currentColor;
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  @media (prefers-reduced-motion) {
-    :not(.expanded).animate::after {
-      animation: none;
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-    .expanded.animate::after {
-      animation: none;
-      transform: translate(-50%, -70%) rotate(135deg);
-    }
-  }
-</style>

package/TreeChevron.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         expanded?: boolean | undefined;
         hasChildren?: boolean | undefined;
+        variant?: string | undefined;
     };
     events: {
         blur: FocusEvent;

package/TreeItem.constants.d.ts

@@ -0,0 +1 @@
+export declare const TREE_ITEM_CONTEXT_KEY = "sterlingTreeItem";

package/TreeItem.constants.js

@@ -0,0 +1 @@
+export const TREE_ITEM_CONTEXT_KEY = 'sterlingTreeItem';