cauthy-auth 0.34.0 → 0.35.1

package/dist/styles.css

@@ -183,6 +183,41 @@
   cursor: default;
 }
 
+/*
+ * Under way: the pressed button keeps its label with a spinner before it, in
+ * the button's own colour; a form still opening shows the spinner alone. An
+ * icon and never words: the application may be in any language. Without
+ * motion, the ring stays still and pulses nothing: it only shows.
+ */
+:where([data-cauthy] .cauthy-spinner) {
+  display: inline-block;
+  flex: none;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: cauthy-spin 0.7s linear infinite;
+}
+
+:where([data-cauthy] .cauthy-button[aria-busy="true"]),
+:where([data-cauthy] .cauthy-providerButton[aria-busy="true"]) {
+  cursor: progress;
+}
+
+@keyframes cauthy-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-cauthy] .cauthy-spinner) {
+    animation: none;
+    border-right-color: currentColor;
+    border-style: dotted;
+  }
+}
+
 :where(.cauthy-section) > :where(.cauthy-button, .cauthy-providerButton) {
   width: auto;
   align-self: flex-start;
@@ -222,6 +257,16 @@
   color: var(--cauthy-text-muted);
 }
 
+/* A form still opening: its spinner alone, in the middle. */
+:where([data-cauthy] .cauthy-pending) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 16px 0;
+  color: var(--cauthy-text-muted);
+}
+
 :where([data-cauthy] [role="status"].cauthy-notice) {
   padding: 8px 12px;
   color: var(--cauthy-success);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cauthy-auth",
-  "version": "0.34.0",
+  "version": "0.35.1",
   "description": "Sign in with Cauthy: one route to mount, getSession on the server, useSession in the browser. No database, no screens to build.",
   "license": "Apache-2.0",
   "main": "dist/index.js",