@axel669/zephyr 0.2.0-beta.3 → 0.3.4-beta.0

package/src/spinner/circle-spinner.svelte

@@ -4,10 +4,10 @@
     import wsx from "../wsx.mjs"
 
     export let size = "100px"
-    export let color = "primary"
+    export let color = "@primary"
 
     $: wind = {
-        "&size": size,
+        "@size": size,
         "$color": color,
     }
 </script>

package/src/spinner/hexagon-spinner.svelte

@@ -4,10 +4,10 @@
     import wsx from "../wsx.mjs"
 
     export let size = "100px"
-    export let color = "primary"
+    export let color = "@primary"
 
     $: wind = {
-        "&size": size,
+        "@size": size,
         "$color": color,
     }
 </script>

package/src/spinner/spinners.md

@@ -1,3 +1,22 @@
 # Spinners
+Zephyr exports the CircleSpinner and HexagonSpinner components as wrappers for
+windstorms spinners of the same name. Both spinners are svgs with a bit of code
+setup as web components.
 
-Under construction.
+## Props
+
+### color
+Sets the $color macro.
+
+### size
+The size of the spinner (width and height). Uses css units.
+
+## Example
+```svelte
+<script>
+    import { HexagonSpinner } from "@axel669/zephyr"
+</script>
+
+<HexagonSpinner size="50px" />
+<HexagonSpinner size="500px" color="@secondary" />
+```

package/src/wsx.mjs

@@ -1,6 +1,6 @@
 import ws from "@axel669/windstorm"
 
-ws.custom("outline", (o) => ws.prop("outline", o))
+// ws.custom("outline", (o) => ws.prop("outline", o))
 
 export default (node, props) => {
     const update = (props) => {