diff --git a/ex/html_spinner_examples.html b/ex/html_spinner_examples.html
index 246bc9c..5212df7 100644
--- a/ex/html_spinner_examples.html
+++ b/ex/html_spinner_examples.html
@@ -842,7 +842,7 @@ <h2 style="text-align:center">Special Case: A Workaround for List Bullets</h2>
         rtr:           '101',
         color:         'red',
         bgclr:         'gold',
-        tclr:          'green'
+        tclr:          'blue'
       };
       listItems.forEach(function(item) {
         const spinner = new SpinnerElement( spinOpts );
diff --git a/package.json b/package.json
index 5bf870b..f0d8482 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "HTML-SpinnerElem",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A Javascript class for creating a custom web component to insert a spinner with options.",
   "main": "spinnerComponent.js",
   "scripts": {
diff --git a/src/spinnerComponent.js b/src/spinnerComponent.js
index 0feb03c..2b85c0f 100644
--- a/src/spinnerComponent.js
+++ b/src/spinnerComponent.js
@@ -11,6 +11,7 @@ class SpinnerElement extends HTMLElement {
     this.rendered = false;
   }
 
+  // setting up attributes the spinner will observe
   static observedAttributes = [
       'rotor',              'rtr',
       'rotor-style',        'rstyle',
@@ -38,6 +39,7 @@ class SpinnerElement extends HTMLElement {
       'role'
   ];
 
+  // capture changes to attributes after instantiation
   attributeChangedCallback(name, oldValue, newValue) {
     if (this.observedAttributesSet.has(name)) {
       this.latestAttributes[name] = newValue || '';
@@ -45,6 +47,7 @@ class SpinnerElement extends HTMLElement {
     }
   }
 
+  // incorporate one or more observed attributes
   setAttributes( options = {} ) {
     this.latestAttributes = {};
     Object.entries(options).forEach(([key, value]) => {
@@ -57,12 +60,15 @@ class SpinnerElement extends HTMLElement {
     });
   }
 
+  // shortcut for setting style properties
   setStyle( style = {} ) {
     Object.entries(style).forEach(([property, value]) => {
       this.style.setProperty(property, value);
     });
   }
 
+  // enables deep modification of the default defaults
+  // rarely needed!
   setDefaults( alts = {} ) {
     const defaults = {
       rotor      :  alts.rotor     || '1000',
@@ -112,12 +118,14 @@ class SpinnerElement extends HTMLElement {
     this.setAttribute('rstatus', newStatus);
   }
 
+  // show and hide cause layout shifts
   show() {
     this.style.setProperty('display', 'inline-block')
   }
   hide() {
     this.style.setProperty('display', 'none')
   }
+  // veil and unveil don't change layout
   veil() {
     this.style.setProperty('visibility', 'hidden')
   }
@@ -206,7 +214,7 @@ class SpinnerElement extends HTMLElement {
     const ariaAtomic      = newAttributes['aria-atomic']                                  || spAttributes['aria-atomic']      || defaults.ariaAtomic;
     const ariaRelevant    = newAttributes['aria-relevant']                                || spAttributes['aria-relevant']    || defaults.ariaRelevant;
 
-    // using weight to get the rotor weight
+    // using `weight` to get the rotor thickness
     let rWeight;
     if (weight <= .5 && weight > 0) {
       rWeight  = weight;
@@ -218,14 +226,14 @@ class SpinnerElement extends HTMLElement {
       rWeight  = defaults.weight;
     }
 
-    // using rotor to get the border coloring
+    // using `rotor` to get the border coloring
     const rtr_pat     = rotor.split('');
     const top_color   = rtr_pat[0] == 1 ? rtrcolor : tracecolor;
     const left_color  = rtr_pat[1] == 1 ? rtrcolor : tracecolor;
     const bottom_color= rtr_pat[2] == 1 ? rtrcolor : tracecolor;
     const right_color = rtr_pat[3] == 1 ? rtrcolor : tracecolor;
 
-    // using direction to get clockwise/counter-clockwise
+    // using `direction` to get clockwise/counter-clockwise
     const rtFrom      = '0deg';
     const rtTo        = direction === 'cw' ? '360deg' : '-360deg';
 
@@ -238,15 +246,17 @@ class SpinnerElement extends HTMLElement {
         aria-atomic="${ariaAtomic}" aria-relevant="${ariaRelevant}" aria-label="${ariaLabel}"
         aria-labelledby="${ariaLabelledBy}" aria-description="${ariaDescription}">${spinnerHTML}</div>`;
 
-    // option back with arbitrary properties
+    // optional back with arbitrary properties
     const backStyle = bkcolor
-      ? `  background-color: ${bkcolor};
+      ? `
+  background-color: ${bkcolor};
   padding:           .191em .38em .191em .38em;
   border-radius:     .33em;
   color:             ${rtrcolor};
 `
-      : `  background-color: transparent;
-color:            inherit;
+      : `
+  background-color: transparent;
+  color:            inherit;
 `;
 
     // check whether cap units are available; fake it if not
@@ -342,6 +352,8 @@ function createSpinnerElement(tagName, defaultOptions = {}) {
   return CustomSpinnerElement;
 }
 
+// see if an object or name resolves to a spinner;
+// return it if so
 function getSpinner( trySpinner ) {
   if (trySpinner instanceof SpinnerElement) {
     return trySpinner;
@@ -357,6 +369,8 @@ function getSpinner( trySpinner ) {
   }
 }
 
+// see if an object reference resolves to one or more spinners;
+// return them if so
 function getSpinners( spinnerRef = 'x-spinner') {
   const maybeSpinners = document.querySelectorAll(spinnerRef);
   let GoodSpinners = [];