complete story 9.5 with qa test

2026-01-03 00:19:21 +02:00
parent 1f2357fe5e
commit 67502af83d
12 changed files with 542 additions and 74 deletions
@@ -69,18 +69,88 @@
    }
 }

+/* ==========================================================================
+   Flux UI Form Component Styling (Story 9.5)
+   ========================================================================== */
+
+/* Field wrapper - grid layout with gap */
 [data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-2;
 }

+/* Label styling - semibold weight per specs */
 [data-flux-label] {
-    @apply  !mb-0 !leading-tight;
+    @apply !mb-0 !leading-tight font-semibold text-charcoal;
 }

+/* Input, Textarea, Select base styling */
+input[data-flux-control],
+textarea[data-flux-control],
+[data-flux-control] input,
+select[data-flux-control],
+[data-flux-select-button] {
+    @apply border-charcoal/30 rounded-md transition-colors;
+}
+
+/* Focus states - Gold border with subtle ring */
 input:focus[data-flux-control],
 textarea:focus[data-flux-control],
-select:focus[data-flux-control] {
-    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
+select:focus[data-flux-control],
+[data-flux-control] input:focus,
+[data-flux-select-button]:focus {
+    @apply outline-hidden border-gold ring-2 ring-gold/20;
+}
+
+/* Textarea minimum height */
+textarea[data-flux-control] {
+    @apply min-h-[120px] resize-y;
+}
+
+/* Checkbox styling - gold accent when checked */
+[data-flux-checkbox] input[type="checkbox"],
+input[type="checkbox"][data-flux-control] {
+    @apply w-5 h-5 rounded border-charcoal/30 text-gold focus:ring-gold focus:ring-offset-0;
+}
+
+/* Radio styling - gold accent when selected */
+[data-flux-radio] input[type="radio"],
+input[type="radio"][data-flux-control] {
+    @apply w-5 h-5 border-charcoal/30 text-gold focus:ring-gold focus:ring-offset-0;
+}
+
+/* Error state styling for Flux fields */
+[data-flux-field]:has([data-flux-error]) input[data-flux-control],
+[data-flux-field]:has([data-flux-error]) textarea[data-flux-control],
+[data-flux-field]:has([data-flux-error]) select[data-flux-control],
+[data-flux-field]:has([data-flux-error]) [data-flux-select-button] {
+    @apply border-danger;
+}
+
+[data-flux-field]:has([data-flux-error]) input:focus[data-flux-control],
+[data-flux-field]:has([data-flux-error]) textarea:focus[data-flux-control],
+[data-flux-field]:has([data-flux-error]) select:focus[data-flux-control],
+[data-flux-field]:has([data-flux-error]) [data-flux-select-button]:focus {
+    @apply border-danger ring-danger/20;
+}
+
+/* Error message styling */
+[data-flux-error] {
+    @apply text-sm text-danger mt-1;
+}
+
+/* RTL support for Flux components */
+[dir="rtl"] [data-flux-label] {
+    @apply text-right;
+}
+
+[dir="rtl"] [data-flux-error] {
+    @apply text-right;
+}
+
+[dir="rtl"] input[data-flux-control],
+[dir="rtl"] textarea[data-flux-control],
+[dir="rtl"] select[data-flux-control] {
+    @apply text-right;
 }

 /* \[:where(&)\]:size-4 {
@@ -250,3 +320,91 @@ button.btn-danger:disabled {
 [dir="rtl"] .btn-icon-right {
    @apply flex-row;
 }
+
+/* ==========================================================================
+   Form Styling System (Story 9.5)
+   ========================================================================== */
+
+/* Input field styling */
+.input-field {
+    @apply w-full border border-charcoal/30 rounded-md px-4 py-3
+           focus:border-gold focus:ring-2 focus:ring-gold/20
+           transition-colors outline-none bg-white;
+}
+
+/* Input error state */
+.input-error {
+    @apply border-danger focus:border-danger focus:ring-danger/20;
+}
+
+/* Form label styling */
+.form-label {
+    @apply block text-sm font-semibold text-charcoal mb-2;
+}
+
+/* Required field indicator - for manual class usage */
+.form-label-required::after {
+    content: ' *';
+    @apply text-danger;
+}
+
+/* Required indicator styling for Flux labels with .required class */
+[data-flux-label].required::after {
+    content: ' *';
+    @apply text-danger;
+}
+
+/* Error message styling */
+.error-message {
+    @apply text-sm text-danger mt-1;
+}
+
+/* Textarea specific styling */
+.textarea-field {
+    @apply w-full border border-charcoal/30 rounded-md px-4 py-3
+           focus:border-gold focus:ring-2 focus:ring-gold/20
+           transition-colors outline-none bg-white
+           min-h-[120px] resize-y;
+}
+
+/* Select dropdown styling */
+.select-field {
+    @apply w-full border border-charcoal/30 rounded-md px-4 py-3
+           focus:border-gold focus:ring-2 focus:ring-gold/20
+           transition-colors outline-none bg-white;
+}
+
+/* Custom checkbox styling */
+.checkbox-custom {
+    @apply w-5 h-5 rounded border-charcoal/30 text-gold
+           focus:ring-gold focus:ring-offset-0;
+}
+
+/* Custom radio styling */
+.radio-custom {
+    @apply w-5 h-5 border-charcoal/30 text-gold
+           focus:ring-gold focus:ring-offset-0;
+}
+
+/* Checkbox/Radio with error state */
+.checkbox-error,
+.radio-error {
+    @apply border-danger;
+}
+
+/* RTL support for form labels */
+[dir="rtl"] .form-label {
+    @apply text-right;
+}
+
+/* RTL support for error messages */
+[dir="rtl"] .error-message {
+    @apply text-right;
+}
+
+/* RTL support for form fields - use logical properties */
+[dir="rtl"] .input-field,
+[dir="rtl"] .textarea-field,
+[dir="rtl"] .select-field {
+    @apply text-right;
+}