@resira/ui 0.4.1 → 0.4.2

package/dist/styles.css

@@ -24,6 +24,31 @@
   padding: 0;
 }
 
+/* Global focus-visible ring for all interactive elements */
+.resira-root button:focus-visible,
+.resira-root a:focus-visible,
+.resira-root input:focus-visible,
+.resira-root select:focus-visible,
+.resira-root textarea:focus-visible,
+.resira-root [role="button"]:focus-visible,
+.resira-root [tabindex]:focus-visible {
+  outline: 2px solid var(--resira-primary);
+  outline-offset: 2px;
+}
+
+/* Reduced motion — respect user preference */
+@media (prefers-reduced-motion: reduce) {
+  .resira-root,
+  .resira-root *,
+  .resira-root *::before,
+  .resira-root *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* ─────────────────────────────────────────────────────────────── */
 /* Animations                                                      */
 /* ─────────────────────────────────────────────────────────────── */
@@ -38,12 +63,12 @@
 }
 
 @keyframes resira-slide-up {
-  from { opacity: 0; transform: translateY(12px); }
+  from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes resira-scale-in {
-  from { opacity: 0; transform: scale(0.96) translateY(8px); }
+  from { opacity: 0; transform: scale(0.97) translateY(6px); }
   to { opacity: 1; transform: scale(1) translateY(0); }
 }
 
@@ -108,6 +133,16 @@
   padding: 12px 24px 112px;
 }
 
+/* Step content fade-in on mount */
+.resira-widget-body > * {
+  animation: resira-step-enter 150ms ease both;
+}
+
+@keyframes resira-step-enter {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
 .resira-widget-footer {
   position: sticky;
   bottom: 0;
@@ -124,8 +159,9 @@
   justify-content: space-between;
 }
 
-.resira-widget-footer--single .resira-btn {
-  width: 100%;
+.resira-widget-footer .resira-btn {
+  flex: 1;
+  min-width: 0;
 }
 
 /* ─────────────────────────────────────────────────────────────── */
@@ -159,7 +195,7 @@
   border: none;
   cursor: default;
   white-space: nowrap;
-  transition: color 0.2s ease;
+  transition: color 150ms ease;
   flex: 1;
   min-width: 0;
 }
@@ -215,7 +251,7 @@
   background: var(--resira-surface);
   color: var(--resira-text);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: background 120ms ease, border-color 120ms ease;
 }
 
 .resira-calendar-nav-btn:hover { background: var(--resira-bg-subtle); border-color: var(--resira-muted); }
@@ -250,7 +286,7 @@
   background: transparent;
   color: var(--resira-text);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: background 120ms ease, color 120ms ease;
 }
 
 .resira-calendar-day:hover:not(:disabled):not(.resira-calendar-day--blocked) {
@@ -408,7 +444,7 @@
   background: var(--resira-surface);
   color: var(--resira-text);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: background 120ms ease, border-color 120ms ease;
 }
 
 .resira-mini-cal-nav-btn:hover { background: var(--resira-surface); border-color: var(--resira-muted); }
@@ -444,7 +480,7 @@
   background: transparent;
   color: var(--resira-text);
   cursor: pointer;
-  transition: all 0.12s ease;
+  transition: background 100ms ease, color 100ms ease;
   margin: 0 auto;
 }
 
@@ -534,7 +570,7 @@
   background: transparent;
   color: var(--resira-text);
   cursor: pointer;
-  transition: all 0.12s ease;
+  transition: background 100ms ease, color 100ms ease;
 }
 
 .resira-party-btn:hover:not(:disabled) {
@@ -576,7 +612,7 @@
   background: var(--resira-surface);
   color: var(--resira-text);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
   flex: 1;
   min-width: 70px;
 }
@@ -622,7 +658,7 @@
   border-radius: var(--resira-input-radius, 10px);
   background: var(--resira-surface);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 100ms ease;
   gap: 1px;
 }
 
@@ -764,6 +800,13 @@
   cursor: pointer;
   width: 100%;
   flex-shrink: 0;
+  border-radius: var(--resira-card-radius, 14px);
+}
+
+.resira-service-card-btn:focus-visible {
+  outline: 2px solid var(--resira-primary);
+  outline-offset: 3px;
+  border-radius: var(--resira-card-radius, 14px);
 }
 
 .resira-service-list--horizontal .resira-service-card-btn {
@@ -778,7 +821,7 @@
   border-radius: var(--resira-card-radius, 14px);
   overflow: hidden;
   background: var(--resira-surface);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
   font-family: var(--resira-font);
   color: var(--resira-text);
 }
@@ -789,6 +832,10 @@
   transform: translateY(-1px);
 }
 
+.resira-service-card:active {
+  transform: scale(0.98);
+}
+
 .resira-service-card--selected {
   border-color: var(--resira-primary) !important;
   background: color-mix(in srgb, var(--resira-primary) 3%, var(--resira-surface)) !important;
@@ -981,13 +1028,17 @@
   cursor: pointer;
   display: flex;
   flex-direction: column;
-  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  transition: transform 120ms ease, box-shadow 120ms ease;
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);
 }
 
 .resira-category-tile:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
+}
+
+.resira-category-tile:active {
+  transform: scale(0.97);
 }
 
 .resira-category-tile-image {
@@ -1079,18 +1130,23 @@
   flex-direction: column;
   justify-content: flex-end;
   cursor: pointer;
-  transition: transform 0.18s ease, box-shadow 0.18s ease;
+  transition: transform 120ms ease, box-shadow 120ms ease;
   box-shadow: 0 2px 8px rgba(0,0,0,0.08);
 }
 
 .resira-service-overlay-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
+}
+
+.resira-service-overlay-card:active {
+  transform: scale(0.98);
 }
 
 .resira-service-overlay-card--selected {
   outline: 2.5px solid var(--resira-primary);
   outline-offset: -2.5px;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--resira-primary) 15%, transparent);
 }
 
 .resira-service-overlay-card-bg {
@@ -1239,7 +1295,7 @@
   background: var(--resira-surface);
   color: var(--resira-text);
   outline: none;
-  transition: all 0.2s ease;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
   width: 100%;
 }
 
@@ -1321,12 +1377,17 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   border-radius: 10px;
   border: none;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background 150ms ease, box-shadow 150ms ease, transform 100ms ease;
   white-space: nowrap;
 }
 
 .resira-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
 
+.resira-btn:focus-visible {
+  outline: 2px solid var(--resira-primary);
+  outline-offset: 3px;
+}
+
 .resira-btn--primary {
   background: var(--resira-primary);
   color: var(--resira-primary-fg);
@@ -1336,7 +1397,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
 
 .resira-btn--primary:hover:not(:disabled) {
   background: var(--resira-primary-hover);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--resira-primary) 30%, transparent);
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--resira-primary) 30%, transparent);
   transform: translateY(-1px);
 }
 
@@ -1623,7 +1684,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   overflow: hidden;
   background: var(--resira-surface);
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
   text-align: left;
   font-family: var(--resira-font);
   color: var(--resira-text);
@@ -1636,6 +1697,10 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   transform: translateY(-1px);
 }
 
+.resira-resource-card:active {
+  transform: scale(0.98);
+}
+
 .resira-resource-card--selected {
   border-color: var(--resira-primary) !important;
   background: color-mix(in srgb, var(--resira-primary) 3%, var(--resira-surface)) !important;
@@ -1823,7 +1888,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   background: var(--resira-bg-subtle);
   border-radius: 8px;
   border: 1.5px solid var(--resira-border);
-  transition: all 0.2s ease;
+  transition: border-color 150ms ease, background 150ms ease;
 }
 
 .resira-waiver-row--compact {
@@ -2093,9 +2158,9 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   align-items: center !important;
   justify-content: center !important;
   background: rgba(0, 0, 0, 0.45) !important;
-  backdrop-filter: blur(6px) !important;
-  -webkit-backdrop-filter: blur(6px) !important;
-  animation: resira-fade-in 0.15s ease;
+  backdrop-filter: blur(8px) !important;
+  -webkit-backdrop-filter: blur(8px) !important;
+  animation: resira-fade-in 0.12s ease;
 }
 
 .resira-modal-container {
@@ -2111,7 +2176,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   box-shadow:
     0 24px 80px -12px rgba(0, 0, 0, 0.25),
     0 0 0 1px rgba(0, 0, 0, 0.05) !important;
-  animation: resira-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  animation: resira-scale-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   margin: 16px !important;
   overscroll-behavior: contain;
 }
@@ -2132,7 +2197,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   background: var(--resira-bg-subtle, #f3f4f6) !important;
   color: var(--resira-muted, #6b7280) !important;
   cursor: pointer !important;
-  transition: all 0.15s ease;
+  transition: background 120ms ease, color 120ms ease;
   flex-shrink: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
@@ -2203,23 +2268,23 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   align-items: center;
   justify-content: center;
   gap: 10px;
-  padding: 16px 36px;
+  padding: 14px 32px;
   font-size: 16px;
   font-weight: 700;
   font-family: var(--resira-font, system-ui, -apple-system, sans-serif);
   border: none;
-  border-radius: 14px;
+  border-radius: 12px;
   background: var(--resira-primary, #2563eb);
   color: var(--resira-primary-fg, #ffffff);
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 2px 12px color-mix(in srgb, var(--resira-primary, #2563eb) 35%, transparent);
+  transition: background 150ms ease, box-shadow 150ms ease, transform 100ms ease;
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--resira-primary, #2563eb) 30%, transparent);
   letter-spacing: -0.01em;
 }
 
 .resira-book-now-btn:hover {
   background: var(--resira-primary-hover, #1d4ed8);
-  box-shadow: 0 6px 24px color-mix(in srgb, var(--resira-primary, #2563eb) 40%, transparent);
+  box-shadow: 0 6px 20px color-mix(in srgb, var(--resira-primary, #2563eb) 35%, transparent);
   transform: translateY(-2px);
 }
 
@@ -2227,6 +2292,11 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   transform: translateY(0);
 }
 
+.resira-book-now-btn:focus-visible {
+  outline: 2px solid var(--resira-primary, #2563eb);
+  outline-offset: 3px;
+}
+
 /* ─────────────────────────────────────────────────────────────── */
 /* Responsive                                                      */
 /* ─────────────────────────────────────────────────────────────── */
@@ -2349,7 +2419,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   background: transparent;
   color: var(--resira-primary, #2563eb);
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
   letter-spacing: -0.01em;
 }
 
@@ -2393,7 +2463,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   box-shadow:
     0 24px 80px -12px rgba(0, 0, 0, 0.3),
     0 0 0 1px rgba(0, 0, 0, 0.06) !important;
-  animation: resira-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+  animation: resira-scale-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   margin: 16px !important;
   overscroll-behavior: contain;
   scrollbar-width: thin;
@@ -2424,7 +2494,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   background: var(--resira-bg-subtle, #f3f4f6) !important;
   color: var(--resira-muted, #6b7280) !important;
   cursor: pointer !important;
-  transition: all 0.15s ease;
+  transition: background 120ms ease, color 120ms ease;
   flex-shrink: 0 !important;
   padding: 0 !important;
 }
@@ -2513,7 +2583,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   background: var(--resira-surface, #ffffff);
   overflow: hidden;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
   padding: 0;
   text-align: left;
   font-family: inherit;
@@ -2622,7 +2692,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   background: transparent;
   color: var(--resira-muted, #64748b);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: border-color 120ms ease, color 120ms ease;
   flex-shrink: 0;
 }
 
@@ -2752,7 +2822,7 @@ textarea.resira-field-input { resize: vertical; min-height: 52px; }
   border: none;
   border-radius: var(--resira-btn-radius, 10px);
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
 }
 
 .resira-dish-action--3d {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resira/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "React UI components for the Resira booking platform",
   "license": "MIT",
   "type": "module",