Touch up dots1

examples/admin/src/app/index.tsx

@@ -9,7 +9,7 @@ function App(): JSX.Element {
         Admin <br />
         <span>Kitchen Sink</span>
       </h1>
-      <Dots1 />
+      <Dots1 color="#00f" width={60} />
       <Dots2 color="#00f" width={50} dotSize={8} />
     </div>
   );

lib/src/server/dots/dots1/dots1.module.scss

@@ -1,8 +1,10 @@
 /* HTML: <div class="loader"></div> */
 .loader {
+  --c: #000;
   width: 60px;
   aspect-ratio: 4;
-  background: radial-gradient(circle closest-side, #000 90%, #0000) 0 / calc(100% / 3) 100% space;
+  background: radial-gradient(circle closest-side, var(--c) 90%, #0000) 0 / calc(100% / 3) 100%
+    space;
   clip-path: inset(0 100% 0 0);
   animation: anim 1s steps(4) infinite;
 }

lib/src/server/dots/dots1/dots1.tsx

@@ -1,14 +1,25 @@
 import * as React from "react";
 import styles from "./dots1.module.scss";
 
-interface Dots1Props {
-  children?: React.ReactNode;
+interface Dots1Props extends React.HTMLAttributes<HTMLDivElement> {
+  /** width of the loader element in pixels or a string with a length unit. */
+  width?: number | string;
+  /** Color of the dots - CSS compatible color */
+  color?: string;
 }
 
 /**
- * # Dots1
  * A simple loader with 3 dots.
+ *
+ * @example
+ * <Dots1 />
+ *
+ * @source
  */
-export function Dots1({ children }: Dots1Props) {
-  return <div className={styles.loader} data-testid="dots1" />;
+export function Dots1({ width, color = "#000", ...props }: Dots1Props) {
+  let w = props.style?.width ?? width ?? 32;
+  w = typeof width === "string" ? width : `${width}px`;
+  const className = [styles.loader, props.className].filter(Boolean).join(" ");
+  const style = { ...(props.style ?? {}), width: w, "--c": color };
+  return <div className={className} style={style} />;
 }