@24vlh/vds 0.1.0

package/dist/components/forms.css

@@ -0,0 +1,1831 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Forms
+ *
+ *  Responsibilities:
+ *    - Provide two parallel form architectures:
+ *         A) Legacy VDS form controls: input, textarea, select,
+ *            segmented controls, toggles, switches, radio/checkbox, input groups
+ *         B) UFAL (Unified Form Abstraction Layer): form-control,
+ *            wrapper elements, adaptive surfaces, loading/error states,
+ *            prefix/suffix architecture, file/drop zones, and layout primitives
+ *
+ *    - Supply semantic/interactive states:
+ *         focus, hover, disabled, readonly, error, success, warning, info,
+ *         dirty, loading, validated, invalidated
+ *
+ *    - Define full visual contract for:
+ *         control sizing tokens, label/caption hierarchy,
+ *         density modes, inline/stack layouts, and responsive adaptations
+ *
+ *  System Notes:
+ *    - 100% token-driven: spacing, radii, borders, typography, motion
+ *    - No JS assumptions; all behaviours (loading shimmer, validation highlights)
+ *      are CSS-based
+ *    - Legacy and UFAL architectures MUST co-exist in v1; no cross-overwrites
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. FORM TOKEN DEFINITIONS
+--------------------------------------------------------- */
+
+[data-vds-form],
+.vds-form {
+    --form-flow-gap-xs: var(--space-1);
+    --form-flow-textarea-min-height: 5rem;
+
+    --size-9: 2.75rem;
+    --size-10: 3.00rem;
+    --size-11: 3.25rem;
+
+    --control-min-height: var(--size-10);
+
+    --control-height-md: 40px;
+}
+
+[data-vds-form] .form--a .form-control,
+.vds-form .form--a .form-control {
+    --control-min-height: var(--size-11);
+}
+
+[data-vds-form] .form--c .form-control,
+.vds-form .form--c .form-control {
+    --control-min-height: var(--size-9);
+}
+
+/* ---------------------------------------------------------
+   2. BASE FORM RESET
+--------------------------------------------------------- */
+
+input,
+select,
+textarea,
+button {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: inherit;
+    color: inherit;
+}
+
+input,
+select,
+textarea {
+    background-clip: padding-box;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: none;
+}
+
+/* ---------------------------------------------------------
+   3. DENSITY LAYERS (A/B/C)
+--------------------------------------------------------- */
+
+.form--a .input,
+.form--a .select,
+.form--a .textarea {
+    padding: var(--space-4);
+    font-size: var(--text-md);
+}
+
+.form--a .form-check {
+    font-size: var(--text-md);
+}
+
+.form--a .segmented__option {
+    padding: var(--space-3) var(--space-5);
+    font-size: var(--text-md);
+}
+
+.form--a .file-upload__control {
+    padding: var(--space-5);
+}
+
+.form--c .input,
+.form--c .select,
+.form--c .textarea {
+    padding: var(--space-2);
+    font-size: var(--text-xs);
+}
+
+.form--c .form-check {
+    font-size: var(--text-xs);
+}
+
+.form--c .segmented__option {
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-xs);
+}
+
+.form--c .file-upload__control {
+    padding: var(--space-3);
+}
+
+/* ---------------------------------------------------------
+   4. FIELD WRAPPER
+--------------------------------------------------------- */
+
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--form-flow-gap-xs);
+    width: 100%;
+}
+
+.form-field--disabled {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.form-label {
+    font-weight: 500;
+    color: var(--color-text);
+}
+
+.form-label--required::after {
+    content: " *";
+    color: var(--color-danger);
+    font-weight: 600;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+            appearance: none;
+}
+
+.form-label--sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.form-help {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.form-error {
+    font-size: var(--text-xs);
+    color: var(--color-danger);
+}
+
+.form-field--error .form-label {
+    color: var(--color-danger);
+}
+
+.form-field--error .input,
+.form-field--error .select,
+.form-field--error .textarea {
+    border-color: var(--color-danger);
+}
+
+.form-field--error .input-group {
+    border-color: var(--color-danger);
+}
+
+.form-field--error .segmented {
+    border-color: var(--color-danger);
+}
+
+.form-field--error .slider {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-soft);
+}
+
+.form-field--error .file-upload__control {
+    border-color: var(--color-danger);
+    background-color: var(--color-danger-soft);
+}
+
+/* ---------------------------------------------------------
+   5. BASE INPUT
+--------------------------------------------------------- */
+
+.input {
+    width: 100%;
+    padding: var(--space-3) var(--space-3);
+
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    color: var(--color-text);
+
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+.input:focus {
+    border-color: var(--color-accent);
+}
+
+.input:focus-visible {
+    border-color: var(--focus-ring-color);
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.input:hover {
+    border-color: var(--color-border-strong);
+}
+
+.input:disabled,
+.input--disabled {
+    background-color: var(--color-muted-bg);
+    color: var(--color-text-muted);
+    cursor: not-allowed;
+}
+
+.input[readonly],
+.input--readonly {
+    background-color: var(--color-surface-subtle);
+    color: var(--color-text-muted);
+    border-style: dashed;
+}
+
+.input::-moz-placeholder {
+    color: var(--color-placeholder);
+    opacity: 1;
+}
+
+.input::placeholder {
+    color: var(--color-placeholder);
+    opacity: 1;
+}
+
+/* ---------------------------------------------------------
+   5A. INPUT WITH ICONS
+   Pattern:
+   <div class="input-icon input-icon--left">
+     <span class="input-icon__icon">...</span>
+     <input class="input">
+   </div>
+--------------------------------------------------------- */
+
+.input-icon {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.input-icon .input {
+    width: 100%;
+}
+
+.input-icon--left .input {
+    padding-left: var(--space-8);
+}
+
+.input-icon--right .input {
+    padding-right: var(--space-8);
+}
+
+.input-icon--both .input {
+    padding-left: var(--space-8);
+    padding-right: var(--space-8);
+}
+
+.input-icon__icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    color: var(--color-text-muted);
+}
+
+.input-icon--left .input-icon__icon {
+    left: var(--space-3);
+}
+
+.input-icon--right .input-icon__icon {
+    right: var(--space-3);
+}
+
+/* ---------------------------------------------------------
+   6. TEXTAREA
+--------------------------------------------------------- */
+
+.textarea {
+    width: 100%;
+    resize: vertical;
+    min-height: var(--form-flow-textarea-min-height);
+    padding: var(--space-3);
+
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    color: var(--color-text);
+
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+.textarea:focus {
+    border-color: var(--color-accent);
+}
+
+.textarea:focus-visible {
+    border-color: var(--focus-ring-color);
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.textarea:hover {
+    border-color: var(--color-border-strong);
+}
+
+.textarea:disabled,
+.textarea--disabled {
+    background-color: var(--color-muted-bg);
+    color: var(--color-text-muted);
+    cursor: not-allowed;
+}
+
+.textarea[readonly],
+.textarea--readonly {
+    background-color: var(--color-surface-subtle);
+    color: var(--color-text-muted);
+    border-style: dashed;
+}
+
+.textarea::-moz-placeholder {
+    color: var(--color-placeholder);
+    opacity: 1;
+}
+
+.textarea::placeholder {
+    color: var(--color-placeholder);
+    opacity: 1;
+}
+
+/* ---------------------------------------------------------
+   7. SELECT (NATIVE + CUSTOM DROPDOWN ICON)
+--------------------------------------------------------- */
+
+.select {
+    width: 100%;
+    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
+
+    -webkit-appearance: none;
+
+       -moz-appearance: none;
+
+            appearance: none;
+    background-color: var(--color-surface);
+    color: var(--color-text);
+
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+
+    position: relative;
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+
+    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
+    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
+    background-position: calc(100% - var(--space-3)) center,
+    calc(100% - var(--space-2)) center;
+    background-size: 0.4rem 0.4rem;
+    background-repeat: no-repeat;
+    padding-right: var(--space-6);
+}
+
+.select:focus {
+    border-color: var(--color-accent);
+}
+
+.select:focus-visible {
+    border-color: var(--focus-ring-color);
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.select:hover {
+    border-color: var(--color-border-strong);
+}
+
+.select:disabled,
+.select--disabled {
+    background-color: var(--color-muted-bg);
+    color: var(--color-text-muted);
+    cursor: not-allowed;
+    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
+    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
+}
+
+/* ---------------------------------------------------------
+   8. CHECKBOXES & RADIOS
+--------------------------------------------------------- */
+
+.form-check {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
+    cursor: pointer;
+    font-size: var(--text-sm);
+}
+
+.form-check-group .form-check:last-child {
+    margin-bottom: 0;
+}
+
+.form-check--disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.form-check input {
+    width: 1.15rem;
+    height: 1.15rem;
+    cursor: pointer;
+}
+
+.checkbox {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-sm);
+    background-color: var(--color-surface);
+    cursor: pointer;
+    position: relative;
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+.checkbox:hover {
+    border-color: var(--color-border-strong);
+}
+
+.checkbox:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+    outline: none;
+}
+
+.checkbox:checked {
+    border-color: var(--color-accent);
+    background-color: var(--color-accent-soft);
+}
+
+.checkbox:checked::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.55rem;
+    height: 0.55rem;
+    transform: translate(-50%, -50%);
+    background-color: var(--color-accent);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
+            mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
+    -webkit-mask-size: cover;
+            mask-size: cover;
+}
+
+.checkbox:disabled {
+    background-color: var(--color-muted-bg);
+    border-color: var(--color-muted-border);
+    cursor: not-allowed;
+}
+
+.checkbox--error {
+    border-color: var(--color-danger);
+}
+
+.checkbox--warning {
+    border-color: var(--color-warning);
+}
+
+.checkbox--success {
+    border-color: var(--color-success);
+}
+
+.checkbox--info {
+    border-color: var(--color-info);
+}
+
+.radio {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: 50%;
+    background-color: var(--color-surface);
+    cursor: pointer;
+    position: relative;
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+.radio:hover {
+    border-color: var(--color-border-strong);
+}
+
+.radio:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+    outline: none;
+}
+
+.radio:checked {
+    border-color: var(--color-accent);
+    background-color: var(--color-accent-soft);
+}
+
+.radio:checked::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.55rem;
+    height: 0.55rem;
+    background-color: var(--color-accent);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.radio:disabled {
+    background-color: var(--color-muted-bg);
+    border-color: var(--color-muted-border);
+    cursor: not-allowed;
+}
+
+.radio--error {
+    border-color: var(--color-danger);
+}
+
+.radio--warning {
+    border-color: var(--color-warning);
+}
+
+.radio--success {
+    border-color: var(--color-success);
+}
+
+.radio--info {
+    border-color: var(--color-info);
+}
+
+/* ---------------------------------------------------------
+   9. SWITCHES
+   Pattern: <input type="checkbox" class="switch">
+--------------------------------------------------------- */
+
+.switch {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: 50%;
+    background-color: var(--color-surface);
+    cursor: pointer;
+    position: relative;
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    width: 1.15rem;
+    height: 1.15rem;
+}
+
+.switch::after {
+    content: "";
+    position: absolute;
+    top: 22%;
+    left: 22%;
+    width: 0.55rem;
+    height: 0.55rem;
+    background-color: var(--color-accent);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+}
+
+.switch:checked {
+    background-color: var(--color-accent-strong);
+    border: var(--border-width) solid var(--color-accent);
+}
+
+.switch:checked::after {
+    opacity: 1;
+    transform: scale(1);
+    background-color: var(--color-accent);
+}
+
+.switch:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.switch:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.switch--error {
+    background-color: var(--color-danger-soft);
+}
+
+.switch--warning {
+    background-color: var(--color-warning-soft);
+}
+
+.switch--success {
+    background-color: var(--color-success-soft);
+}
+
+.switch--info {
+    background-color: var(--color-info-soft);
+}
+
+.switch--error:checked {
+    background-color: var(--color-danger);
+}
+
+.switch--warning:checked {
+    background-color: var(--color-warning);
+}
+
+.switch--success:checked {
+    background-color: var(--color-success);
+}
+
+.switch--info:checked {
+    background-color: var(--color-info);
+}
+
+/* ---------------------------------------------------------
+   10. INPUT GROUPS (ICONS + ADDONS)
+--------------------------------------------------------- */
+
+.input-group {
+    display: flex;
+    align-items: center;
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    overflow: hidden;
+}
+
+.input-group .input {
+    border: none;
+    flex: 1;
+    box-shadow: none;
+}
+
+.input-group-addon {
+    padding: 0 var(--space-3);
+    display: flex;
+    align-items: center;
+    color: var(--color-text-muted);
+    background-color: var(--color-surface);
+    border-right: var(--border-width) solid var(--color-border-subtle);
+}
+
+.input-group-addon + .input {
+    padding-left: var(--space-2);
+}
+
+.input-group-icon {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-3);
+    color: var(--color-text-muted);
+}
+
+.input-group-icon .icon {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+}
+
+.input-group--error {
+    border-color: var(--color-danger);
+}
+
+.input-group--warning {
+    border-color: var(--color-warning);
+}
+
+.input-group--success {
+    border-color: var(--color-success);
+}
+
+.input-group--info {
+    border-color: var(--color-info);
+}
+
+.input-group--disabled {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.input-group:focus-within {
+    border-color: var(--focus-ring-color);
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.input-group:hover {
+    border-color: var(--color-border-strong);
+}
+
+/* ---------------------------------------------------------
+   11. SEGMENTED CONTROL
+--------------------------------------------------------- */
+
+.segmented {
+    display: flex;
+    width: 100%;
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    height: 2.5rem;
+    height: var(--control-height-md, 2.5rem);
+    background-color: var(--color-surface);
+}
+
+.segmented__option {
+    flex: 1 1 0;
+    text-align: center;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    border: none;
+    font: inherit;
+    line-height: inherit;
+    padding: var(--space-2) var(--space-4);
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    background: var(--color-surface);
+    height: 100%;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.segmented__option:not(:last-child) {
+    border-right: var(--border-width) solid var(--color-border-subtle);
+}
+
+.segmented__option:hover {
+    background-color: var(--color-surface-subtle);
+    color: var(--color-text);
+}
+
+.segmented__option:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.segmented__option--active {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+    font-weight: 600;
+    position: relative;
+    z-index: 1;
+}
+
+.segmented__option--active + .segmented__option {
+    border-left-color: transparent;
+}
+
+.segmented--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.segmented__option--disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+.segmented__option-icon {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    margin-right: var(--space-2);
+}
+
+.segmented--error {
+    border-color: var(--color-danger);
+}
+
+.segmented--warning {
+    border-color: var(--color-warning);
+}
+
+.segmented--success {
+    border-color: var(--color-success);
+}
+
+.segmented--info {
+    border-color: var(--color-info);
+}
+
+.segmented--loading .segmented__option {
+    position: relative;
+    overflow: hidden;
+}
+
+.segmented--loading .segmented__option::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-image: linear-gradient(
+            90deg,
+            var(--color-muted-bg),
+            var(--color-surface),
+            var(--color-muted-bg)
+    );
+    background-size: 200% 100%;
+    animation: input-loading-shimmer 1.5s infinite;
+}
+
+/* ---------------------------------------------------------
+   12. SLIDER
+--------------------------------------------------------- */
+
+.slider {
+    width: 100%;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    height: var(--border-width-strong);
+    background-color: var(--slider-track-bg);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+}
+
+.slider:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.slider:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+            appearance: none;
+    width: 1rem;
+    height: 1rem;
+    background: var(--slider-thumb-bg);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
+    background: var(--slider-thumb-bg);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.slider--error {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-soft);
+}
+
+.slider--error:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);
+    outline: none;
+}
+
+.slider--warning {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-warning-soft);
+}
+
+.slider--warning:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-warning);
+    outline: none;
+}
+
+.slider--success {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-success-soft);
+}
+
+.slider--success:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-success);
+    outline: none;
+}
+
+.slider--info {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-info-soft);
+}
+
+.slider--info:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-info);
+    outline: none;
+}
+
+/* ---------------------------------------------------------
+   13. FILE UPLOAD (CUSTOM)
+--------------------------------------------------------- */
+
+.file-upload {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.file-upload input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.file-upload__control {
+    border: var(--border-width) dashed var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    padding: var(--space-4);
+    text-align: center;
+    color: var(--color-text-soft);
+    cursor: pointer;
+    background-color: var(--color-surface);
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+.file-upload__control:hover {
+    border-color: var(--color-border-strong);
+    background-color: var(--color-surface-subtle);
+}
+
+.file-upload__control:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.file-upload__control--dragover {
+    border-color: var(--color-accent);
+    background-color: var(--color-accent-soft);
+}
+
+.file-upload__control--disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+.file-upload__control--error {
+    border-color: var(--color-danger);
+    background-color: var(--color-danger-soft);
+    color: var(--color-danger-strong);
+}
+
+.file-upload__control--warning {
+    border-color: var(--color-warning);
+    background-color: var(--color-warning-soft);
+    color: var(--color-warning-strong);
+}
+
+.file-upload__control--success {
+    border-color: var(--color-success);
+    background-color: var(--color-success-soft);
+    color: var(--color-success-strong);
+}
+
+.file-upload__control--info {
+    border-color: var(--color-info);
+    background-color: var(--color-info-soft);
+    color: var(--color-info-strong);
+}
+
+.file-upload__control--loading {
+    background-image: linear-gradient(
+            90deg,
+            var(--color-muted-bg),
+            var(--color-surface),
+            var(--color-muted-bg)
+    );
+    background-size: 200% 100%;
+    animation: input-loading-shimmer 1.5s infinite;
+}
+
+/* ---------------------------------------------------------
+   14. FORM GRID / FORM ROWS
+--------------------------------------------------------- */
+
+.form-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+}
+
+.form-row--two {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-gap: var(--space-4);
+    gap: var(--space-4);
+}
+
+.form-grid {
+    display: grid;
+    grid-gap: var(--space-4);
+    gap: var(--space-4);
+}
+
+.form-grid--two {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.form-grid--three {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.form-grid--four {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+@media (max-width: 768px) {
+    .form-grid--two,
+    .form-grid--three,
+    .form-grid--four {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ---------------------------------------------------------
+   15. VALIDATION STATES (INPUT / SELECT / TEXTAREA)
+--------------------------------------------------------- */
+
+.input--error,
+.select--error,
+.textarea--error {
+    border-color: var(--color-danger);
+}
+
+.input--error:focus-visible,
+.select--error:focus-visible,
+.textarea--error:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-soft);
+}
+
+.input--success,
+.select--success,
+.textarea--success {
+    border-color: var(--color-success);
+}
+
+.input--success:focus-visible,
+.select--success:focus-visible,
+.textarea--success:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-success-soft);
+}
+
+.input--warning,
+.select--warning,
+.textarea--warning {
+    border-color: var(--color-warning);
+}
+
+.input--warning:focus-visible,
+.select--warning:focus-visible,
+.textarea--warning:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-warning-soft);
+}
+
+.input--info,
+.select--info,
+.textarea--info {
+    border-color: var(--color-info);
+}
+
+.input--info:focus-visible,
+.select--info:focus-visible,
+.textarea--info:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-info-soft);
+}
+
+/* ---------------------------------------------------------
+   16. FIELD META (HELP, ERROR, COUNTER, ICONS, LAYOUT)
+--------------------------------------------------------- */
+
+.form-meta {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--form-flow-gap-xs);
+    margin-top: var(--space-1);
+}
+
+.form-meta--stacked {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.form-meta--inline {
+    flex-direction: row;
+    align-items: center;
+}
+
+.form-meta__messages {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+}
+
+.form-counter {
+    margin-left: auto;
+    font-size: var(--text-xs);
+    font-family: var(--font-family-mono), monospace;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+}
+
+.form-counter--warning {
+    color: var(--color-warning);
+}
+
+.form-counter--danger {
+    color: var(--color-danger);
+}
+
+.form-field--error .form-counter {
+    color: var(--color-danger);
+}
+
+.form-control-with-icon {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+}
+
+.form-control-with-icon .input,
+.form-control-with-icon .select,
+.form-control-with-icon .textarea {
+    width: 100%;
+    padding-right: calc(var(--space-8) + var(--space-1));
+}
+
+.form-status-icon {
+    position: absolute;
+    right: var(--space-3);
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    color: var(--color-text-muted);
+    pointer-events: none;
+}
+
+.form-field--error .form-status-icon {
+    color: var(--color-danger);
+}
+
+.form-field--success .form-status-icon {
+    color: var(--color-success);
+}
+
+.form-field--warning .form-status-icon {
+    color: var(--color-warning);
+}
+
+.form-field--info .form-status-icon {
+    color: var(--color-info);
+}
+
+.form-field--success .form-label {
+    color: var(--color-success);
+}
+
+.form-field--success .input,
+.form-field--success .select,
+.form-field--success .textarea,
+.form-field--success .input-group {
+    border-color: var(--color-success);
+}
+
+.form-field--warning .form-label {
+    color: var(--color-warning);
+}
+
+.form-field--warning .input,
+.form-field--warning .select,
+.form-field--warning .textarea,
+.form-field--warning .input-group {
+    border-color: var(--color-warning);
+}
+
+.form-field--info .form-label {
+    color: var(--color-info);
+}
+
+.form-field--info .input,
+.form-field--info .select,
+.form-field--info .textarea,
+.form-field--info .input-group {
+    border-color: var(--color-info);
+}
+
+.form-field--horizontal {
+    display: grid;
+    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
+    grid-column-gap: var(--space-4);
+    -moz-column-gap: var(--space-4);
+         column-gap: var(--space-4);
+    align-items: flex-start;
+}
+
+.form-field__label {
+    padding-top: var(--space-1);
+}
+
+.form-field__control {
+    display: flex;
+    flex-direction: column;
+    gap: var(--form-flow-gap-xs);
+}
+
+@media (max-width: 768px) {
+    .form-field--horizontal {
+        grid-template-columns: 1fr;
+    }
+
+    .form-field__label {
+        padding-top: 0;
+    }
+}
+
+.input--loading,
+.select--loading,
+.textarea--loading {
+    background-image: linear-gradient(
+            90deg,
+            var(--color-muted-bg),
+            var(--color-surface),
+            var(--color-muted-bg)
+    );
+    background-size: 200% 100%;
+    animation: input-loading-shimmer 1.5s infinite;
+}
+
+@keyframes input-loading-shimmer {
+    0% {
+        background-position: -150% 0;
+    }
+    100% {
+        background-position: 150% 0;
+    }
+}
+
+/* ---------------------------------------------------------
+   17. FORMS INSIDE MODALS / PANELS
+--------------------------------------------------------- */
+
+.modal .form-field {
+    margin-bottom: var(--space-3);
+}
+
+/* ---------------------------------------------------------
+   18. FORM-LEVEL MESSAGES (top of form)
+--------------------------------------------------------- */
+
+.form-message {
+    width: 100%;
+    padding: var(--space-4) var(--space-6);
+    border-radius: var(--radius-md);
+    border: var(--border-width) solid var(--color-border-subtle);
+    background-color: var(--color-surface-subtle);
+    font-size: var(--text-sm);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+}
+
+.form-message__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    stroke: currentColor;
+    fill: none;
+}
+
+.form-message__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.form-message--neutral {
+    border-color: var(--color-muted-border);
+    background-color: var(--color-muted-bg);
+    color: var(--color-text-muted);
+}
+
+.form-message--error {
+    background-color: var(--semantic-error-bg-strong, var(--color-danger-soft));
+    border-color: var(--semantic-error-border-strong, var(--color-danger));
+    color: var(--semantic-error-text-strong, var(--color-danger-strong));
+}
+
+.form-message--info {
+    background-color: var(--semantic-info-bg-strong, var(--color-info-soft));
+    border-color: var(--semantic-info-border-strong, var(--color-info));
+    color: var(--semantic-info-text-strong, var(--color-info-strong));
+}
+
+.form-message--success {
+    background-color: var(--semantic-success-bg-strong, var(--color-success-soft));
+    border-color: var(--semantic-success-border-strong, var(--color-success));
+    color: var(--semantic-success-text-strong, var(--color-success-strong));
+}
+
+.form-message--warning {
+    background-color: var(--semantic-warning-bg-strong, var(--color-warning-soft));
+    border-color: var(--semantic-warning-border-strong, var(--color-warning));
+    color: var(--semantic-warning-text-strong, var(--color-warning-strong));
+}
+
+/* ---------------------------------------------------------
+   19. FIELD-LEVEL STATE MESSAGES (below inputs)
+--------------------------------------------------------- */
+
+.form-field-message {
+    font-size: var(--text-xs);
+    margin-top: var(--space-1);
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+.form-field-message--neutral {
+    color: var(--color-text-muted);
+}
+
+.form-field-message--error {
+    color: var(--semantic-error-text-strong, var(--color-danger-strong));
+}
+
+.form-field-message--warning {
+    color: var(--semantic-warning-text-strong, var(--color-warning-strong));
+}
+
+.form-field-message--info {
+    color: var(--semantic-info-text-strong, var(--color-info-strong));
+}
+
+.form-field-message--success {
+    color: var(--semantic-success-text-strong, var(--color-success-strong));
+}
+
+.form-field-message__icon {
+    width: 1rem;
+    height: 1rem;
+    stroke: currentColor;
+    fill: none;
+    flex-shrink: 0;
+}
+
+/* ---------------------------------------------------------
+   20. HORIZONTAL CHECKBOXES / RADIOS
+--------------------------------------------------------- */
+
+.form-check-inline {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-right: var(--space-6);
+    cursor: pointer;
+}
+
+.form-check-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    align-items: flex-start;
+}
+
+.form-check-group--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--space-6);
+    align-items: center;
+}
+
+.form-check-group--horizontal .form-check {
+    margin-right: var(--space-6);
+    margin-bottom: var(--space-2);
+}
+
+/* -----------------------------------------------
+   21. FORM SECTION STATES
+   Add semantic state styling for entire sections.
+   Intended for wrapping form-row or form-grid.
+------------------------------------------------ */
+
+.form-section--error {
+    padding: var(--space-3);
+    border-left: var(--border-width-strong) solid var(--semantic-error-border-strong, var(--color-danger));
+    background-color: transparent;
+    background-color: var(--semantic-error-bg-strong, transparent);
+}
+
+.form-section--warning {
+    padding: var(--space-3);
+    border-left: var(--border-width-strong) solid var(--semantic-warning-border-strong, var(--color-warning));
+    background-color: transparent;
+    background-color: var(--semantic-warning-bg-strong, transparent);
+}
+
+.form-section--success {
+    padding: var(--space-3);
+    border-left: var(--border-width-strong) solid var(--semantic-success-border-strong, var(--color-success));
+    background-color: transparent;
+    background-color: var(--semantic-success-bg-strong, transparent);
+}
+
+.form-section--info {
+    padding: var(--space-3);
+    border-left: var(--border-width-strong) solid var(--semantic-info-border-strong, var(--color-info));
+    background-color: transparent;
+    background-color: var(--semantic-info-bg-strong, transparent);
+}
+
+.form-section--error:not(:last-child),
+.form-section--warning:not(:last-child),
+.form-section--success:not(:last-child),
+.form-section--info:not(:last-child) {
+    margin-bottom: var(--space-4);
+}
+
+/* -----------------------------------------------
+   22. ARIA hooks for validation
+------------------------------------------------ */
+
+.input[aria-invalid="true"],
+.select[aria-invalid="true"],
+.textarea[aria-invalid="true"] {
+    border-color: var(--color-danger);
+}
+
+.input[aria-invalid="true"]:focus-visible,
+.select[aria-invalid="true"]:focus-visible,
+.textarea[aria-invalid="true"]:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-soft);
+}
+
+/* ----------------------------------------------------------
+   23. Base form control primitive (UFAL)
+   ---------------------------------------------------------- */
+
+.form-control {
+    display: block;
+    width: 100%;
+    min-height: var(--control-min-height);
+
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.form-control-wrapper {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.form-control-wrapper > .form-control {
+    flex: 1 1 auto;
+}
+
+/* ----------------------------------------------------------
+   23A. State modifiers
+   ---------------------------------------------------------- */
+
+.form-control--loading {
+    cursor: progress;
+    opacity: 0.55;
+    pointer-events: none;
+}
+
+.form-control--disabled {
+    opacity: 0.45;
+    pointer-events: none;
+}
+
+.form-control--readonly {
+    opacity: 0.75;
+    cursor: default;
+}
+
+.form-control--error {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);
+}
+
+.form-control--warning {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-warning);
+}
+
+.form-control--success {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-success);
+}
+
+.form-control--info {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--color-info);
+}
+
+.form-control--password {
+    padding-right: calc(var(--space-8) + var(--space-2));
+}
+
+.form-control-wrapper[data-icon="right"] .form-control--password {
+    padding-right: calc(var(--space-8) + var(--space-2));
+}
+
+.form-control--password:focus {
+    border-color: var(--color-accent);
+}
+
+.form-control--password::-moz-placeholder {
+    color: var(--color-placeholder);
+}
+
+.form-control--password::placeholder {
+    color: var(--color-placeholder);
+}
+
+/* ----------------------------------------------------------
+   23B. Icon-inside-input patterns
+   ---------------------------------------------------------- */
+
+.form-control-wrapper[data-icon="left"] .form-control {
+    padding-left: calc(var(--space-7) + var(--space-2));
+}
+
+.form-control-wrapper[data-icon="left"] .form-control-icon {
+    position: absolute;
+    left: var(--space-2);
+    display: flex;
+    align-items: center;
+}
+
+.form-control-wrapper[data-icon="right"] .form-control {
+    padding-right: calc(var(--space-7) + var(--space-2));
+}
+
+.form-control-wrapper[data-icon="right"] .form-control-icon {
+    position: absolute;
+    right: var(--space-2);
+    display: flex;
+    align-items: center;
+}
+
+.form-control-icon {
+    font-size: var(--text-md);
+    color: var(--color-text-muted);
+    pointer-events: none;
+}
+
+/* ----------------------------------------------------------
+   23C. Loading overlay animation
+   ---------------------------------------------------------- */
+
+.form-control--loading::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: inherit;
+    background: var(--color-surface-subtle);
+    animation: formControlLoading 1.5s ease-in-out infinite;
+}
+
+@keyframes formControlLoading {
+    0% {
+        opacity: .35;
+    }
+    50% {
+        opacity: .6;
+    }
+    100% {
+        opacity: .35;
+    }
+}
+
+/* ----------------------------------------------------------
+   23D. File upload primitives (UFAL)
+   ---------------------------------------------------------- */
+
+/* Base dashed file control (rarely exposed directly; internal primitive) */
+
+.form-control--file {
+    position: relative;
+    padding: var(--space-3);
+    border: var(--border-width) dashed var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition: border-color .2s, background-color .2s;
+}
+
+.form-control--file[type="file"] {
+    padding: 0;
+    border: none;
+    background: none;
+    position: static;
+    opacity: 1;
+}
+
+/* ----------------------------------------------------------
+   23E. UFAL Drop Surface (corrected)
+   ---------------------------------------------------------- */
+
+.form-control-file-surface {
+    position: relative; /* ★ FIX: contain absolute input */
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-6);
+
+    border: var(--border-width) dashed var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    cursor: pointer;
+
+    transition: border-color .2s, background-color .2s;
+}
+
+.form-control-file-surface input[type="file"] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.form-control-file-surface:hover {
+    border-color: var(--color-border-strong);
+    background-color: var(--color-surface-subtle);
+}
+
+.form-control-file-surface--dragover {
+    border-color: var(--color-accent);
+    background-color: var(--color-accent-soft);
+}
+
+.form-control-file-surface--disabled {
+    opacity: .65;
+    cursor: not-allowed;
+}
+
+.form-control-file-surface--error {
+    border-color: var(--color-danger);
+    background-color: var(--color-danger-soft);
+}
+
+.form-control-file-surface--warning {
+    border-color: var(--color-warning);
+    background-color: var(--color-warning-soft);
+}
+
+.form-control-file-surface--success {
+    border-color: var(--color-success);
+    background-color: var(--color-success-soft);
+}
+
+.form-control-file-surface--info {
+    border-color: var(--color-info);
+    background-color: var(--color-info-soft);
+}
+
+/* ----------------------------------------------------------
+   23F. Inline “button-as-trigger” upload
+   ---------------------------------------------------------- */
+
+.file-upload-inline {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.file-upload-inline__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.file-upload-inline__label {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ----------------------------------------------------------
+   23G. Shared inner patterns
+   ---------------------------------------------------------- */
+
+.file-upload,
+.file-upload * {
+    box-sizing: border-box;
+}
+
+.file-upload {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    width: 100%;
+}
+
+/* Loading shimmer on drop surface */
+
+.form-control-file-surface.form-control--loading::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: inherit;
+    background-image: linear-gradient(
+            90deg,
+            var(--color-muted-bg),
+            var(--color-surface),
+            var(--color-muted-bg)
+    );
+    background-size: 200% 100%;
+    animation: input-loading-shimmer 1.5s infinite;
+}
+
+.form-control-file-icon {
+    font-size: var(--text-lg);
+    color: var(--color-text-muted);
+}
+
+.form-control-file-label {
+    font-size: var(--text-sm);
+    color: var(--color-text);
+}
+
+.form-control-file-hint {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.slider--error:focus-visible,
+.input[aria-invalid="true"]:focus-visible,
+.select[aria-invalid="true"]:focus-visible,
+.textarea[aria-invalid="true"]:focus-visible,
+.form-control--error:focus-visible {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--semantic-error-border-strong, var(--color-danger));
+}
+
+.checkbox:checked,
+.radio:checked,
+.switch:checked {
+    background-color: var(--accent-soft-surface, var(--color-accent-soft));
+    border-color: var(--accent-soft-border, var(--color-accent));
+    box-shadow: 0 0 0 1px transparent;
+    box-shadow: 0 0 0 1px var(--accent-soft-shadow, transparent);
+    color: var(--accent-soft-on, var(--color-on-accent));
+}
+
+.checkbox:checked::after,
+.radio:checked::after,
+.switch:checked::after {
+    background-color: var(--accent-soft-border, var(--color-accent));
+}
+
+.checkbox:checked:hover,
+.radio:checked:hover,
+.switch:checked:hover {
+    background-color: var(--accent-soft-surface-strong, var(--accent-soft-surface));
+    border-color: var(--accent-soft-border, var(--color-accent));
+}
+
+.checkbox:checked:disabled,
+.radio:checked:disabled,
+.switch:checked:disabled {
+    background-color: var(--color-surface-subtle);
+    border-color: var(--color-border-subtle);
+    opacity: 0.6;
+}