@floegence/floe-webapp-core 0.56.2 → 0.56.3

package/dist/ui.css

@@ -478,30 +478,101 @@
      Text Animation Effects - Minimal and Professional
      ============================================================================= */
 
-  /* Shimmer - subtle light sweep effect */
-  @keyframes text-shimmer {
+  /* Opt-in progress only: text keeps one accessible copy and surface paint
+   * sits below content. The host owns operation state and removes the attribute
+   * on settlement. Both published CSS entries expose this contract. */
+  @keyframes floe-progress-shimmer {
     0% {
-      background-position: -200% center;
+      background-position: 100% center;
     }
     100% {
-      background-position: 200% center;
+      background-position: 0% center;
     }
   }
 
-  .processing-text-shimmer {
-    background: linear-gradient(
-      90deg,
-      currentColor 0%,
-      currentColor 40%,
-      color-mix(in srgb, var(--primary) 80%, white) 50%,
-      currentColor 60%,
-      currentColor 100%
-    );
-    background-size: 200% 100%;
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    animation: text-shimmer 2.5s ease-in-out infinite;
+  :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) {
+    --floe-progress-text-base: oklch(from var(--foreground) clamp(0.42, l, 0.46) min(c, 0.04) h);
+    --floe-progress-text-peak: oklch(from var(--floe-progress-text-base) calc(l - 0.16) c h);
+    color: var(--floe-progress-text-base);
+  }
+
+  .dark :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) {
+    --floe-progress-text-base: oklch(from var(--foreground) clamp(0.8, calc(l - 0.1), 0.82) min(c, 0.04) h);
+    --floe-progress-text-peak: oklch(from var(--floe-progress-text-base) calc(l + 0.16) c h);
+  }
+
+  :is([data-floe-progress-shimmer='text'], .processing-text-shimmer)::selection,
+  :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) ::selection {
+    -webkit-text-fill-color: var(--selection-fg);
+  }
+
+  @supports (background-clip: text) and (color: oklch(from red l c h)) {
+    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) {
+      background-image: linear-gradient(90deg, var(--floe-progress-text-base) 46%, var(--floe-progress-text-peak) 49%, var(--floe-progress-text-peak) 51%, var(--floe-progress-text-base) 54%);
+      background-size: 250% 100%;
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: floe-progress-shimmer 2.4s linear infinite;
+    }
+  }
+
+  [data-floe-progress-shimmer='surface'] {
+    --floe-progress-surface-base: var(--floe-progress-surface-background, var(--primary));
+    --floe-progress-surface-peak: oklch(from var(--floe-progress-surface-base) max(0, calc(l - 0.14)) c h);
+    position: relative;
+    isolation: isolate;
+  }
+
+  .dark [data-floe-progress-shimmer='surface'] {
+    --floe-progress-surface-peak: oklch(from var(--floe-progress-surface-base) min(1, calc(l + 0.14)) c h);
+  }
+
+  /* A busy control can be unavailable for a second submission while its
+   * progress remains fully legible. Disabled input semantics still apply. */
+  [data-floe-progress-shimmer='surface']:disabled {
+    opacity: 1 !important;
+  }
+
+  [data-floe-progress-shimmer='surface']::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    pointer-events: none;
+    background-image: linear-gradient(90deg, var(--floe-progress-surface-base) 46%, var(--floe-progress-surface-peak) 49%, var(--floe-progress-surface-peak) 51%, var(--floe-progress-surface-base) 54%);
+    background-size: 250% 100%;
+    animation: floe-progress-shimmer 2.4s linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce), (forced-colors: active) {
+    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) {
+      animation: none;
+      background-image: none;
+      -webkit-text-fill-color: currentColor;
+    }
+
+    [data-floe-progress-shimmer='surface']::before {
+      animation: none;
+      background-image: none;
+      background-color: var(--floe-progress-surface-base);
+    }
+  }
+
+  @media (forced-colors: active) {
+    [data-floe-progress-shimmer='surface']::before {
+      content: none;
+    }
+
+    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) {
+      color: CanvasText;
+    }
+
+    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer)::selection,
+    :is([data-floe-progress-shimmer='text'], .processing-text-shimmer) ::selection {
+      -webkit-text-fill-color: HighlightText;
+    }
   }
 
   /* Glow - subtle pulsing text */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.56.2",
+  "version": "0.56.3",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",