@24vlh/vds 0.1.9 → 0.2.0

package/dist/components/forms.css

@@ -23,6 +23,8 @@
     --form-flow-textarea-min-height: 5rem;
     --size-10: 3.00rem;
     --control-min-height: var(--size-10);
+    --choice-size: var(--space-4);
+    --choice-gap: var(--space-2);
 }
 
 @keyframes input-loading-shimmer {
@@ -125,6 +127,247 @@ select.form-control:not([multiple]):not([size]) {
     box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger-soft);
 }
 
+/* ---------------------------------------------------------
+   2A. FIELD SHELL (LABEL + HELP)
+--------------------------------------------------------- */
+
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.form-field--inline {
+    display: grid;
+    grid-template-columns: minmax(10rem, 14rem) 1fr;
+    grid-gap: var(--space-4);
+    gap: var(--space-4);
+    align-items: start;
+}
+
+.form-field--inline .form-label-row {
+    justify-content: flex-start;
+}
+
+.form-field--inline .form-help {
+    grid-column: 2;
+}
+
+.form-label-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+}
+
+.form-label {
+    font-size: var(--text-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text);
+}
+
+.form-label-meta {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.form-label-meta--required {
+    color: var(--color-danger);
+    font-weight: var(--font-weight-semibold);
+}
+
+.form-help {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.form-help--error {
+    color: var(--color-danger);
+}
+
+.form-help--warning {
+    color: var(--color-warning);
+}
+
+.form-help--success {
+    color: var(--color-success);
+}
+
+.form-help--info {
+    color: var(--color-info);
+}
+
+/* ---------------------------------------------------------
+   2B. CHOICE CONTROLS (CHECKBOX / RADIO)
+--------------------------------------------------------- */
+
+.choice-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.choice-group--inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-4);
+}
+
+.choice-group--grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    grid-gap: var(--space-3);
+    gap: var(--space-3);
+}
+
+.choice {
+    --choice-accent: var(--color-accent);
+    --choice-on-accent: var(--color-on-accent);
+
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--choice-gap);
+    cursor: pointer;
+    font-size: var(--text-sm);
+    color: var(--color-text);
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+}
+
+.choice--success {
+    --choice-accent: var(--color-success);
+    --choice-on-accent: var(--color-on-success);
+}
+
+.choice--warning {
+    --choice-accent: var(--color-warning);
+    --choice-on-accent: var(--color-on-warning);
+}
+
+.choice--error {
+    --choice-accent: var(--color-danger);
+    --choice-on-accent: var(--color-on-danger);
+}
+
+.choice--info {
+    --choice-accent: var(--color-info);
+    --choice-on-accent: var(--color-on-accent);
+}
+
+.choice__input {
+    position: absolute;
+    opacity: 0;
+    width: var(--choice-size);
+    height: var(--choice-size);
+    margin: 0;
+    pointer-events: none;
+}
+
+.choice__indicator {
+    width: var(--choice-size);
+    height: var(--choice-size);
+    margin-top: var(--space-0_5);
+    flex-shrink: 0;
+
+    position: relative;
+    border-radius: var(--radius-sm);
+    border: var(--border-width) solid var(--color-border-subtle);
+    background-color: var(--color-surface);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: border-color .2s, background-color .2s, box-shadow .2s;
+}
+
+.choice__indicator::after {
+    content: "";
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    width: 0.45rem;
+    height: 0.75rem;
+    border-right: 2.5px solid var(--choice-on-accent);
+    border-bottom: 2.5px solid var(--choice-on-accent);
+    transform: translate(-50%, -40%) rotate(45deg);
+    opacity: 0;
+    transition: opacity .2s;
+}
+
+.choice__input:focus-visible + .choice__indicator {
+    border-color: var(--focus-ring-color);
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.choice__input:checked + .choice__indicator {
+    border-color: var(--choice-accent);
+    background-color: var(--choice-accent);
+}
+
+.choice__input:checked + .choice__indicator::after {
+    opacity: 1;
+}
+
+.choice--checkbox .choice__indicator {
+    border-radius: var(--radius-sm);
+}
+
+.choice--radio .choice__indicator {
+    border-radius: var(--radius-full);
+}
+
+.choice--radio .choice__indicator::after {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--radius-full);
+    border: none;
+    background-color: var(--choice-accent);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.choice--radio .choice__input:checked + .choice__indicator {
+    background-color: var(--color-surface);
+}
+
+.choice:hover .choice__indicator {
+    border-color: var(--color-border-strong);
+}
+
+.choice__input:disabled + .choice__indicator,
+.choice--disabled .choice__indicator {
+    background-color: var(--color-muted-bg);
+    border-color: var(--color-border-subtle);
+    box-shadow: none;
+    opacity: .7;
+}
+
+.choice__input:disabled + .choice__indicator::after,
+.choice--disabled .choice__indicator::after {
+    border-color: var(--color-text-muted);
+    background-color: var(--color-text-muted);
+}
+
+.choice__label {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+}
+
+.choice__label-text {
+    font-size: var(--text-sm);
+    color: var(--color-text);
+}
+
+.choice__hint {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
 /* ---------------------------------------------------------
    3. WRAPPERS & GROUPING
 --------------------------------------------------------- */
@@ -625,3 +868,4 @@ select.form-control:not([multiple]):not([size]) {
 .form-section--info:not(:last-child) {
     margin-bottom: var(--space-4);
 }
+

package/dist/components/forms.min.css

@@ -1 +1 @@
-.vds-form,[data-vds-form]{--form-flow-textarea-min-height:5rem;--size-10:3.00rem;--control-min-height:var(--size-10)}@keyframes input-loading-shimmer{0%{background-position:-150% 0}to{background-position:150% 0}}.form-control{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-sizing:border-box;color:var(--color-text);display:block;margin:0;min-height:var(--control-min-height);padding:var(--space-3);position:relative;transition:border-color .2s,background-color .2s,box-shadow .2s;width:100%;z-index:0}input.form-control,select.form-control,textarea.form-control{background-clip:padding-box;font:inherit;line-height:inherit}textarea.form-control{min-height:var(--form-flow-textarea-min-height);resize:vertical}select.form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control:not([multiple]):not([size]){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)) 50%,calc(100% - var(--space-2)) 50%;background-repeat:no-repeat;background-size:.4rem .4rem;padding-right:calc(var(--space-7) + var(--space-2))}.form-control::-moz-placeholder{color:var(--color-placeholder);opacity:1}.form-control::placeholder{color:var(--color-placeholder);opacity:1}.form-control:hover{border-color:var(--color-border-strong)}.form-control:focus{border-color:var(--color-accent);outline:none}.form-control:focus-visible{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.form-control[aria-invalid=true]{border-color:var(--color-danger)}.form-control[aria-invalid=true]:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-danger-soft)}.form-control-wrapper{align-items:center;display:flex;position:relative;width:100%}.form-control-wrapper>.form-control{flex:1 1 auto;width:auto}.form-control--loading{cursor:progress;opacity:.55;pointer-events:none}.form-control--disabled{opacity:.45;pointer-events:none}.form-control--readonly{cursor:default;opacity:.75}.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:disabled,.form-control[disabled]{background-color:var(--color-muted-bg);color:var(--color-text-muted);cursor:not-allowed}.form-control[readonly]{background-color:var(--color-surface-subtle);border-style:dashed;color:var(--color-text-muted)}.form-control--error:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--semantic-error-border-strong,var(--color-danger))}.form-control-wrapper[data-icon=left] .form-control{padding-left:calc(var(--space-7) + var(--space-2))}.form-control-wrapper[data-icon=right] .form-control{padding-right:calc(var(--space-7) + var(--space-2))}.form-control-wrapper[data-icon=left] .form-control-icon,.form-control-wrapper[data-icon=right] .form-control-icon{align-items:center;display:flex;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.form-control-wrapper[data-icon=left] .form-control-icon{left:var(--space-2)}.form-control-wrapper[data-icon=right] .form-control-icon{right:var(--space-2)}.form-control-icon{color:var(--color-text-muted);font-size:var(--text-md)}.form-control-icon,.form-control-prefix,.form-control-suffix{position:absolute;z-index:1}.form-control-prefix,.form-control-suffix{align-items:center;color:var(--color-text-muted);display:inline-flex;font-size:var(--text-sm);pointer-events:none;position:static;white-space:nowrap}.form-control-prefix{margin-left:var(--space-3);margin-right:var(--space-2)}.form-control-suffix{margin-left:var(--space-2);margin-right:var(--space-3)}.form-control-group{align-items:stretch;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;position:relative;width:100%}.form-control-group>*{background:transparent;border-radius:0;position:relative}.form-control-group>.form-control,.form-control-group>.form-control-wrapper{flex:1 1 auto}.form-control-group>.button{flex:0 0 auto}.form-control-group>:first-child{border-bottom-left-radius:var(--radius-md);border-top-left-radius:var(--radius-md)}.form-control-group>:last-child{border-bottom-right-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.form-control-group>*+*{box-shadow:inset var(--border-width) 0 0 var(--color-border-subtle)}.form-control-group .form-control:focus-visible{border-color:var(--focus-ring-color);box-shadow:inset var(--border-width) 0 0 var(--color-border-subtle),0 0 0 var(--border-width-strong) var(--focus-ring-color)}.form-control-group>.button,.form-control-group>.form-control,.form-control-group>.form-control-wrapper>.form-control{background:transparent;border:none}.form-control-group>.button{align-items:center;box-sizing:border-box;color:var(--color-text);display:inline-flex;height:var(--control-min-height);justify-content:center;line-height:1;padding:0 var(--space-3)}.form-control--loading:after{animation:formControlLoading 1.5s ease-in-out infinite;background:var(--color-surface-subtle);border-radius:inherit;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}@keyframes formControlLoading{0%{opacity:.35}50%{opacity:.6}to{opacity:.35}}.form-control--file{background-color:var(--color-surface);border:var(--border-width) dashed var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;padding:var(--space-3);position:relative}.form-control--file[type=file]{background:none;border:none;padding:0;position:static}.form-control-file-surface{align-items:center;background-color:var(--color-surface);border:var(--border-width) dashed var(--color-border-subtle);border-radius:var(--radius-md);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-2);justify-content:center;padding:var(--space-6);position:relative}.form-control-file-surface input[type=file]{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;right:0;top:0}.form-control-file-surface:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-strong)}.form-control-file-surface:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.form-control-file-surface--disabled{cursor:not-allowed;opacity:.65;pointer-events:none}.form-control-file-surface--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.form-control-file-surface--warning{background-color:var(--color-warning-soft);border-color:var(--color-warning)}.form-control-file-surface--success{background-color:var(--color-success-soft);border-color:var(--color-success)}.form-control-file-surface--info{background-color:var(--color-info-soft);border-color:var(--color-info)}.file-upload-inline{align-items:center;display:inline-flex;gap:var(--space-2)}.file-upload-inline__input{clip:rect(0,0,0,0);height:1px;overflow:hidden;position:absolute;width:1px}.file-upload-inline__label{cursor:pointer}.form-control-file-surface.form-control--loading:after{animation:input-loading-shimmer 1.5s infinite;background-image:linear-gradient(90deg,var(--color-muted-bg),var(--color-surface),var(--color-muted-bg));background-size:200% 100%;border-radius:inherit;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.form-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}.form-grid{grid-gap:var(--space-4);display:grid;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--four,.form-grid--three,.form-grid--two{grid-template-columns:1fr}}.form-message{align-items:flex-start;background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;font-size:var(--text-sm);gap:var(--space-3);padding:var(--space-4) var(--space-6);width:100%}.form-message__icon{flex-shrink:0;height:1.25rem;width:1.25rem}.form-message__content{display:flex;flex-direction:column;gap:var(--space-1)}.form-message--neutral{color:var(--color-text-muted)}.form-message--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.form-message--warning{background-color:var(--color-warning-soft);border-color:var(--color-warning)}.form-message--success{background-color:var(--color-success-soft);border-color:var(--color-success)}.form-message--info{background-color:var(--color-info-soft);border-color:var(--color-info)}.form-section--error,.form-section--info,.form-section--success,.form-section--warning{border-left:var(--border-width-strong) solid;padding:var(--space-3)}.form-section--error{border-color:var(--color-danger)}.form-section--warning{border-color:var(--color-warning)}.form-section--success{border-color:var(--color-success)}.form-section--info{border-color:var(--color-info)}.form-section--error:not(:last-child),.form-section--info:not(:last-child),.form-section--success:not(:last-child),.form-section--warning:not(:last-child){margin-bottom:var(--space-4)}
+.vds-form,[data-vds-form]{--form-flow-textarea-min-height:5rem;--size-10:3.00rem;--control-min-height:var(--size-10);--choice-size:var(--space-4);--choice-gap:var(--space-2)}@keyframes input-loading-shimmer{0%{background-position:-150% 0}to{background-position:150% 0}}.form-control{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-sizing:border-box;color:var(--color-text);display:block;margin:0;min-height:var(--control-min-height);padding:var(--space-3);position:relative;transition:border-color .2s,background-color .2s,box-shadow .2s;width:100%;z-index:0}input.form-control,select.form-control,textarea.form-control{background-clip:padding-box;font:inherit;line-height:inherit}textarea.form-control{min-height:var(--form-flow-textarea-min-height);resize:vertical}select.form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control:not([multiple]):not([size]){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)) 50%,calc(100% - var(--space-2)) 50%;background-repeat:no-repeat;background-size:.4rem .4rem;padding-right:calc(var(--space-7) + var(--space-2))}.form-control::-moz-placeholder{color:var(--color-placeholder);opacity:1}.form-control::placeholder{color:var(--color-placeholder);opacity:1}.form-control:hover{border-color:var(--color-border-strong)}.form-control:focus{border-color:var(--color-accent);outline:none}.form-control:focus-visible{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.form-control[aria-invalid=true]{border-color:var(--color-danger)}.form-control[aria-invalid=true]:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--color-danger-soft)}.form-field{display:flex;flex-direction:column;gap:var(--space-2)}.form-field--inline{grid-gap:var(--space-4);align-items:start;display:grid;gap:var(--space-4);grid-template-columns:minmax(10rem,14rem) 1fr}.form-field--inline .form-label-row{justify-content:flex-start}.form-field--inline .form-help{grid-column:2}.form-label-row{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.form-label{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-weight-semibold)}.form-label-meta{color:var(--color-text-muted);font-size:var(--text-xs)}.form-label-meta--required{color:var(--color-danger);font-weight:var(--font-weight-semibold)}.form-help{color:var(--color-text-muted);font-size:var(--text-xs)}.form-help--error{color:var(--color-danger)}.form-help--warning{color:var(--color-warning)}.form-help--success{color:var(--color-success)}.form-help--info{color:var(--color-info)}.choice-group{display:flex;flex-direction:column;gap:var(--space-2)}.choice-group--inline{align-items:center;flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}.choice-group--grid{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.choice{--choice-accent:var(--color-accent);--choice-on-accent:var(--color-on-accent);align-items:flex-start;color:var(--color-text);cursor:pointer;display:flex;font-size:var(--text-sm);gap:var(--choice-gap);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.choice--success{--choice-accent:var(--color-success);--choice-on-accent:var(--color-on-success)}.choice--warning{--choice-accent:var(--color-warning);--choice-on-accent:var(--color-on-warning)}.choice--error{--choice-accent:var(--color-danger);--choice-on-accent:var(--color-on-danger)}.choice--info{--choice-accent:var(--color-info);--choice-on-accent:var(--color-on-accent)}.choice__input{margin:0;opacity:0;pointer-events:none;position:absolute}.choice__indicator,.choice__input{height:var(--choice-size);width:var(--choice-size)}.choice__indicator{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-sm);display:inline-flex;flex-shrink:0;justify-content:center;margin-top:var(--space-0_5);position:relative;transition:border-color .2s,background-color .2s,box-shadow .2s}.choice__indicator:after{border-bottom:2.5px solid var(--choice-on-accent);border-right:2.5px solid var(--choice-on-accent);content:"";height:.75rem;left:50%;opacity:0;position:absolute;top:30%;transform:translate(-50%,-40%) rotate(45deg);transition:opacity .2s;width:.45rem}.choice__input:focus-visible+.choice__indicator{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.choice__input:checked+.choice__indicator{background-color:var(--choice-accent);border-color:var(--choice-accent)}.choice__input:checked+.choice__indicator:after{opacity:1}.choice--checkbox .choice__indicator{border-radius:var(--radius-sm)}.choice--radio .choice__indicator{border-radius:var(--radius-full)}.choice--radio .choice__indicator:after{background-color:var(--choice-accent);border:none;border-radius:var(--radius-full);height:.5rem;left:50%;top:50%;transform:translate(-50%,-50%);width:.5rem}.choice--radio .choice__input:checked+.choice__indicator{background-color:var(--color-surface)}.choice:hover .choice__indicator{border-color:var(--color-border-strong)}.choice--disabled .choice__indicator,.choice__input:disabled+.choice__indicator{background-color:var(--color-muted-bg);border-color:var(--color-border-subtle);box-shadow:none;opacity:.7}.choice--disabled .choice__indicator:after,.choice__input:disabled+.choice__indicator:after{background-color:var(--color-text-muted);border-color:var(--color-text-muted)}.choice__label{display:flex;flex-direction:column;gap:var(--space-1)}.choice__label-text{color:var(--color-text);font-size:var(--text-sm)}.choice__hint{color:var(--color-text-muted);font-size:var(--text-xs)}.form-control-wrapper{align-items:center;display:flex;position:relative;width:100%}.form-control-wrapper>.form-control{flex:1 1 auto;width:auto}.form-control--loading{cursor:progress;opacity:.55;pointer-events:none}.form-control--disabled{opacity:.45;pointer-events:none}.form-control--readonly{cursor:default;opacity:.75}.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:disabled,.form-control[disabled]{background-color:var(--color-muted-bg);color:var(--color-text-muted);cursor:not-allowed}.form-control[readonly]{background-color:var(--color-surface-subtle);border-style:dashed;color:var(--color-text-muted)}.form-control--error:focus-visible{box-shadow:0 0 0 var(--border-width-strong) var(--semantic-error-border-strong,var(--color-danger))}.form-control-wrapper[data-icon=left] .form-control{padding-left:calc(var(--space-7) + var(--space-2))}.form-control-wrapper[data-icon=right] .form-control{padding-right:calc(var(--space-7) + var(--space-2))}.form-control-wrapper[data-icon=left] .form-control-icon,.form-control-wrapper[data-icon=right] .form-control-icon{align-items:center;display:flex;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.form-control-wrapper[data-icon=left] .form-control-icon{left:var(--space-2)}.form-control-wrapper[data-icon=right] .form-control-icon{right:var(--space-2)}.form-control-icon{color:var(--color-text-muted);font-size:var(--text-md)}.form-control-icon,.form-control-prefix,.form-control-suffix{position:absolute;z-index:1}.form-control-prefix,.form-control-suffix{align-items:center;color:var(--color-text-muted);display:inline-flex;font-size:var(--text-sm);pointer-events:none;position:static;white-space:nowrap}.form-control-prefix{margin-left:var(--space-3);margin-right:var(--space-2)}.form-control-suffix{margin-left:var(--space-2);margin-right:var(--space-3)}.form-control-group{align-items:stretch;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;position:relative;width:100%}.form-control-group>*{background:transparent;border-radius:0;position:relative}.form-control-group>.form-control,.form-control-group>.form-control-wrapper{flex:1 1 auto}.form-control-group>.button{flex:0 0 auto}.form-control-group>:first-child{border-bottom-left-radius:var(--radius-md);border-top-left-radius:var(--radius-md)}.form-control-group>:last-child{border-bottom-right-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.form-control-group>*+*{box-shadow:inset var(--border-width) 0 0 var(--color-border-subtle)}.form-control-group .form-control:focus-visible{border-color:var(--focus-ring-color);box-shadow:inset var(--border-width) 0 0 var(--color-border-subtle),0 0 0 var(--border-width-strong) var(--focus-ring-color)}.form-control-group>.button,.form-control-group>.form-control,.form-control-group>.form-control-wrapper>.form-control{background:transparent;border:none}.form-control-group>.button{align-items:center;box-sizing:border-box;color:var(--color-text);display:inline-flex;height:var(--control-min-height);justify-content:center;line-height:1;padding:0 var(--space-3)}.form-control--loading:after{animation:formControlLoading 1.5s ease-in-out infinite;background:var(--color-surface-subtle);border-radius:inherit;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}@keyframes formControlLoading{0%{opacity:.35}50%{opacity:.6}to{opacity:.35}}.form-control--file{background-color:var(--color-surface);border:var(--border-width) dashed var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;padding:var(--space-3);position:relative}.form-control--file[type=file]{background:none;border:none;padding:0;position:static}.form-control-file-surface{align-items:center;background-color:var(--color-surface);border:var(--border-width) dashed var(--color-border-subtle);border-radius:var(--radius-md);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-2);justify-content:center;padding:var(--space-6);position:relative}.form-control-file-surface input[type=file]{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;right:0;top:0}.form-control-file-surface:hover{background-color:var(--color-surface-subtle);border-color:var(--color-border-strong)}.form-control-file-surface:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.form-control-file-surface--disabled{cursor:not-allowed;opacity:.65;pointer-events:none}.form-control-file-surface--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.form-control-file-surface--warning{background-color:var(--color-warning-soft);border-color:var(--color-warning)}.form-control-file-surface--success{background-color:var(--color-success-soft);border-color:var(--color-success)}.form-control-file-surface--info{background-color:var(--color-info-soft);border-color:var(--color-info)}.file-upload-inline{align-items:center;display:inline-flex;gap:var(--space-2)}.file-upload-inline__input{clip:rect(0,0,0,0);height:1px;overflow:hidden;position:absolute;width:1px}.file-upload-inline__label{cursor:pointer}.form-control-file-surface.form-control--loading:after{animation:input-loading-shimmer 1.5s infinite;background-image:linear-gradient(90deg,var(--color-muted-bg),var(--color-surface),var(--color-muted-bg));background-size:200% 100%;border-radius:inherit;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.form-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}.form-grid{grid-gap:var(--space-4);display:grid;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--four,.form-grid--three,.form-grid--two{grid-template-columns:1fr}}.form-message{align-items:flex-start;background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;font-size:var(--text-sm);gap:var(--space-3);padding:var(--space-4) var(--space-6);width:100%}.form-message__icon{flex-shrink:0;height:1.25rem;width:1.25rem}.form-message__content{display:flex;flex-direction:column;gap:var(--space-1)}.form-message--neutral{color:var(--color-text-muted)}.form-message--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.form-message--warning{background-color:var(--color-warning-soft);border-color:var(--color-warning)}.form-message--success{background-color:var(--color-success-soft);border-color:var(--color-success)}.form-message--info{background-color:var(--color-info-soft);border-color:var(--color-info)}.form-section--error,.form-section--info,.form-section--success,.form-section--warning{border-left:var(--border-width-strong) solid;padding:var(--space-3)}.form-section--error{border-color:var(--color-danger)}.form-section--warning{border-color:var(--color-warning)}.form-section--success{border-color:var(--color-success)}.form-section--info{border-color:var(--color-info)}.form-section--error:not(:last-child),.form-section--info:not(:last-child),.form-section--success:not(:last-child),.form-section--warning:not(:last-child){margin-bottom:var(--space-4)}