@usefillo/dom 0.4.0 → 0.5.0

package/dist/styles.css

@@ -328,6 +328,11 @@
   }
   .fillo-star:hover { transform: scale(1.15); }
   .fillo-star--active { color: var(--fillo-primary); }
+  .fillo-star:focus-visible {
+    outline: none;
+    border-radius: calc(var(--fillo-radius) * 0.5);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 30%, transparent);
+  }
 
   /* ---------- Linear scale ---------- */
   /* Steps share one row and shrink to fit — an 11-step NPS scale must never
@@ -348,6 +353,11 @@
     transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
   }
   .fillo-scale-step:hover { border-color: var(--fillo-primary); }
+  .fillo-scale-step:focus-visible {
+    outline: none;
+    border-color: var(--fillo-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
+  }
   .fillo-scale-step--active {
     background: var(--fillo-primary);
     border-color: var(--fillo-primary);
@@ -450,6 +460,21 @@
   }
   .fillo-signature-clear:hover { color: var(--fillo-error); border-color: var(--fillo-error); }
 
+  /* Type-to-sign: the keyboard/screen-reader path under the canvas. */
+  .fillo-signature-type {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    margin-top: 0.55rem;
+  }
+  .fillo-signature-type-label {
+    color: var(--fillo-muted);
+    font-size: 0.8rem;
+  }
+  .fillo-signature-type-input {
+    margin-top: 0;
+  }
+
   /* ---------- File upload ---------- */
   .fillo-dropzone {
     display: flex;
@@ -469,6 +494,11 @@
     border-color: var(--fillo-primary);
     background: color-mix(in srgb, var(--fillo-primary) 4%, var(--fillo-control-bg));
   }
+  .fillo-dropzone:focus-visible {
+    outline: none;
+    border-color: var(--fillo-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 15%, transparent);
+  }
   .fillo-dropzone--disabled { cursor: not-allowed; opacity: 0.6; }
   .fillo-dropzone-title { font-weight: 550; font-size: 0.95rem; }
   .fillo-dropzone-hint { color: var(--fillo-muted); font-size: 0.82rem; }
@@ -526,6 +556,10 @@
   }
   .fillo-button:active { transform: translateY(1px); }
   .fillo-button:disabled { opacity: 0.55; cursor: not-allowed; }
+  .fillo-button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fillo-primary) 30%, transparent);
+  }
   .fillo-button--primary { background: var(--fillo-primary); color: var(--fillo-primary-contrast); }
   .fillo-button--ghost { background: transparent; color: var(--fillo-text); border-color: var(--fillo-border); }
 
@@ -574,6 +608,20 @@
     pointer-events: none;
   }
 
+  /* Visually hidden but exposed to assistive tech — for aria-live narration. */
+  .fillo-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
   /* ---------- Loading skeleton ---------- */
   .fillo-form--loading { gap: 0.9rem; }
   .fillo-skeleton {
@@ -588,6 +636,22 @@
     to { background-position: -200% 0; }
   }
 
+  /* Respect a reduced-motion preference: drop transitions, the press nudge,
+     the rating hover scale, and the skeleton shimmer. */
+  @media (prefers-reduced-motion: reduce) {
+    .fillo-form *,
+    .fillo-form *::before,
+    .fillo-form *::after {
+      animation-duration: 0.001ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.001ms !important;
+      scroll-behavior: auto !important;
+    }
+    .fillo-button:active { transform: none; }
+    .fillo-star:hover { transform: none; }
+    .fillo-skeleton { animation: none; }
+  }
+
   /* ---------- "Powered by Fillo" badge ---------- */
   .fillo-powered {
     display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefillo/dom",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Framework-agnostic DOM renderer and web component for embedding Fillo forms.",
   "license": "MIT",
   "keywords": [
@@ -34,7 +34,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@usefillo/core": "^0.4.0"
+    "@usefillo/core": "^0.5.0"
   },
   "devDependencies": {
     "jsdom": "^25.0.1",