@24vlh/vds 0.1.9 → 0.2.0

package/dist/components/forms-advanced.css

@@ -234,7 +234,514 @@
 }
 
 /* ---------------------------------------------------------
-   4. STEPPER CONTROL
+   4. CHOICE BUTTON GROUPS
+--------------------------------------------------------- */
+
+.choice-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+.choice-buttons--grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    grid-gap: var(--space-2);
+    gap: var(--space-2);
+}
+
+.choice-buttons--grid .choice-button__surface {
+    width: 100%;
+}
+
+.choice-button {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+}
+
+.choice-button__input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    pointer-events: none;
+}
+
+.choice-button__surface {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-4);
+
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    font-size: var(--text-sm);
+
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, color 0.2s;
+}
+
+.choice-button:hover .choice-button__surface {
+    border-color: var(--color-border-strong);
+}
+
+.choice-button__input:focus-visible + .choice-button__surface {
+    border-color: var(--focus-ring-color);
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.choice-button__input:checked + .choice-button__surface {
+    border-color: var(--accent-soft-border, var(--color-accent));
+    background-color: var(--accent-soft-surface, var(--color-accent-soft));
+    color: var(--accent-soft-on, var(--color-on-accent));
+    box-shadow: 0 0 0 1px var(--accent-soft-shadow);
+}
+
+.choice-button__input:disabled + .choice-button__surface {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background-color: var(--color-muted-bg);
+}
+
+/* ---------------------------------------------------------
+   5. CHOICE CARDS
+--------------------------------------------------------- */
+
+.choice-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+    grid-gap: var(--space-3);
+    gap: var(--space-3);
+}
+
+.choice-card {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+}
+
+.choice-card__input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    pointer-events: none;
+}
+
+.choice-card__surface {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-3) var(--space-4);
+
+    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, color 0.2s;
+}
+
+.choice-card:hover .choice-card__surface {
+    border-color: var(--color-border-strong);
+}
+
+.choice-card__input:focus-visible + .choice-card__surface {
+    border-color: var(--focus-ring-color);
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.choice-card__input:checked + .choice-card__surface {
+    border-color: var(--accent-soft-border, var(--color-accent));
+    background-color: var(--accent-soft-surface, var(--color-accent-soft));
+    color: var(--accent-soft-on, var(--color-on-accent));
+    box-shadow: 0 0 0 1px var(--accent-soft-shadow);
+}
+
+.choice-card__input:disabled + .choice-card__surface {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background-color: var(--color-muted-bg);
+}
+
+.choice-card__title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+}
+
+.choice-card__meta {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   6. CHOICE CHIPS (CHECKBOX / RADIO)
+--------------------------------------------------------- */
+
+.choice-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+.choice-chip {
+    --choice-chip-accent: var(--color-accent);
+    --choice-chip-on: var(--color-on-accent);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-3);
+
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-pill);
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    font-size: var(--text-xs);
+
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, color 0.2s;
+}
+
+.choice-chip__input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    pointer-events: none;
+}
+
+.choice-chip__indicator {
+    width: 1.1rem;
+    height: 1.1rem;
+    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 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+.choice-chip__indicator::after {
+    content: "";
+    position: absolute;
+    top: 30%;
+    width: 0.3rem;
+    height: 0.55rem;
+    border-right: 2px solid var(--choice-chip-on);
+    border-bottom: 2px solid var(--choice-chip-on);
+    transform: rotate(45deg);
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.choice-chip__label {
+    color: inherit;
+}
+
+.choice-chip__input:focus-visible + .choice-chip__indicator {
+    border-color: var(--focus-ring-color);
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.choice-chip__input:checked + .choice-chip__indicator {
+    border-color: var(--choice-chip-accent);
+    background-color: var(--choice-chip-accent);
+}
+
+.choice-chip__input:checked + .choice-chip__indicator::after {
+    opacity: 1;
+}
+
+.choice-chip__input:checked ~ .choice-chip__label {
+    color: var(--choice-chip-accent);
+}
+
+.choice-chip--radio .choice-chip__indicator {
+    border-radius: var(--radius-full);
+    position: relative;
+}
+
+.choice-chip--radio .choice-chip__indicator::after {
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: var(--radius-full);
+    border: none;
+    background-color: var(--choice-chip-accent);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.choice-chip--radio .choice-chip__input:checked + .choice-chip__indicator {
+    background-color: var(--color-surface);
+}
+
+.choice-chip:hover {
+    border-color: var(--color-border-strong);
+}
+
+.choice-chip__input:disabled ~ .choice-chip__label,
+.choice-chip__input:disabled + .choice-chip__indicator {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.choice-chip--success {
+    --choice-chip-accent: var(--color-success);
+    --choice-chip-on: var(--color-on-success);
+}
+
+.choice-chip--warning {
+    --choice-chip-accent: var(--color-warning);
+    --choice-chip-on: var(--color-on-warning);
+}
+
+.choice-chip--danger {
+    --choice-chip-accent: var(--color-danger);
+    --choice-chip-on: var(--color-on-danger);
+}
+
+.choice-chip--info {
+    --choice-chip-accent: var(--color-info);
+    --choice-chip-on: var(--color-on-accent);
+}
+
+/* ---------------------------------------------------------
+   7. CHIP CHOICE (SELECTED)
+--------------------------------------------------------- */
+
+.chip-choice {
+    --chip-choice-bg: var(--color-surface);
+    --chip-choice-border: var(--color-border-subtle);
+    --chip-choice-text: var(--color-text);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-3);
+
+    border: var(--border-width) solid var(--chip-choice-border);
+    border-radius: var(--radius-pill);
+    background-color: var(--chip-choice-bg);
+    color: var(--chip-choice-text);
+    font-size: var(--text-xs);
+
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.chip-choice:hover {
+    border-color: var(--color-border-strong);
+}
+
+.chip-choice--selected {
+    --chip-choice-bg: var(--accent-soft-surface, var(--color-accent-soft));
+    --chip-choice-border: var(--accent-soft-border, var(--color-accent));
+    --chip-choice-text: var(--accent-soft-on, var(--color-on-accent));
+    box-shadow: 0 0 0 1px var(--accent-soft-shadow);
+}
+
+.chip-choice--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.chip-choice__check,
+.chip-choice__remove {
+    width: var(--icon-xs);
+    height: var(--icon-xs);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+}
+
+.chip-choice__remove {
+    margin-left: var(--space-1);
+}
+
+.chip-choice--transfer .chip-choice__check {
+    display: none;
+}
+
+.chip-choice__label {
+    color: inherit;
+}
+
+/* ---------------------------------------------------------
+   8. CHIP FIELD LAYOUT
+--------------------------------------------------------- */
+
+.chip-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.chip-field__row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+.chip-field__label {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+.chip-field__items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+.chip-field__input {
+    width: 100%;
+}
+
+/* ---------------------------------------------------------
+   9. SEGMENTED CONTROL
+--------------------------------------------------------- */
+
+.segmented-control {
+    display: inline-flex;
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    overflow: hidden;
+}
+
+.segmented-control__option {
+    position: relative;
+    display: inline-flex;
+}
+
+.segmented-control__input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    pointer-events: none;
+}
+
+.segmented-control__label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.segmented-control__option + .segmented-control__option {
+    border-left: var(--border-width) solid var(--color-border-subtle);
+}
+
+.segmented-control__input:checked + .segmented-control__label {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+}
+
+.segmented-control__input:focus-visible + .segmented-control__label {
+    box-shadow: inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+/* ---------------------------------------------------------
+   10. TOGGLE SWITCH
+--------------------------------------------------------- */
+
+.toggle {
+    --toggle-width: 2.75rem;
+    --toggle-height: 1.5rem;
+    --toggle-thumb: 1.1rem;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+}
+
+.toggle--sm {
+    --toggle-width: 2.25rem;
+    --toggle-height: 1.25rem;
+    --toggle-thumb: 0.9rem;
+}
+
+.toggle__input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    pointer-events: none;
+}
+
+.toggle__track {
+    width: var(--toggle-width);
+    height: var(--toggle-height);
+    border-radius: var(--radius-full);
+    border: var(--border-width) solid var(--color-border-subtle);
+    background-color: var(--color-muted-bg);
+
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--space-0_5);
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+}
+
+.toggle__thumb {
+    width: var(--toggle-thumb);
+    height: var(--toggle-thumb);
+    border-radius: var(--radius-full);
+    background-color: var(--color-surface);
+    box-shadow: var(--shadow-xs);
+    transform: translateX(0);
+    transition: transform 0.2s, background-color 0.2s;
+}
+
+.toggle__input:checked + .toggle__track {
+    border-color: var(--color-accent);
+    background-color: var(--color-accent);
+}
+
+.toggle__input:checked + .toggle__track .toggle__thumb {
+    transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb) - var(--space-1)));
+    background-color: var(--color-on-accent);
+}
+
+.toggle__input:focus-visible + .toggle__track {
+    box-shadow: 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.toggle__input:disabled + .toggle__track {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* ---------------------------------------------------------
+   11. STEPPER CONTROL
 --------------------------------------------------------- */
 
 .stepper {
@@ -304,7 +811,7 @@
 }
 
 /* ---------------------------------------------------------
-   5. NATIVE DATE/TIME INPUT NORMALIZATION
+   12. NATIVE DATE/TIME INPUT NORMALIZATION
 --------------------------------------------------------- */
 
 .input[type="date"],
@@ -320,7 +827,7 @@
 }
 
 /* ---------------------------------------------------------
-   6. CALENDAR BASE STRUCTURE (JS-driven scaffold)
+   13. CALENDAR BASE STRUCTURE (JS-driven scaffold)
 --------------------------------------------------------- */
 
 .calendar {
@@ -434,7 +941,7 @@
 }
 
 /* ---------------------------------------------------------
-   7. DENSITY LAYER OVERRIDES (A and C)
+   14. DENSITY LAYER OVERRIDES (A and C)
 --------------------------------------------------------- */
 
 .form--a .multi-select__control,
@@ -444,6 +951,37 @@
     font-size: var(--text-md);
 }
 
+.form--a .choice-buttons,
+.form--a .choice-chips {
+    gap: var(--space-3);
+}
+
+.form--a .choice-button__surface,
+.form--a .segmented-control__label {
+    padding: var(--space-3) var(--space-5);
+    font-size: var(--text-md);
+}
+
+.form--a .choice-card__surface {
+    padding: var(--space-4) var(--space-5);
+}
+
+.form--a .choice-chip {
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-sm);
+}
+
+.form--a .chip-choice {
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--text-sm);
+}
+
+.form--a .toggle {
+    --toggle-width: 3rem;
+    --toggle-height: 1.7rem;
+    --toggle-thumb: 1.2rem;
+}
+
 .form--c .multi-select__control,
 .form--c .tag-input,
 .form--c .stepper {
@@ -451,6 +989,37 @@
     font-size: var(--text-xs);
 }
 
+.form--c .choice-buttons,
+.form--c .choice-chips {
+    gap: var(--space-1);
+}
+
+.form--c .choice-button__surface,
+.form--c .segmented-control__label {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+}
+
+.form--c .choice-card__surface {
+    padding: var(--space-2) var(--space-3);
+}
+
+.form--c .choice-chip {
+    padding: var(--space-0_5) var(--space-2);
+    font-size: var(--text-xxs);
+}
+
+.form--c .chip-choice {
+    padding: var(--space-0_5) var(--space-2);
+    font-size: var(--text-xxs);
+}
+
+.form--c .toggle {
+    --toggle-width: 2.25rem;
+    --toggle-height: 1.2rem;
+    --toggle-thumb: 0.85rem;
+}
+
 .form--a .multi-select__option,
 .form--a .calendar__day {
     padding: var(--space-4);
@@ -460,3 +1029,5 @@
 .form--c .calendar__day {
     padding: var(--space-1);
 }
+
+

package/dist/components/forms-advanced.min.css

@@ -1 +1 @@
-.vds-form-advanced,[data-vds-form-advanced]{--control-height-md:40px}.multi-select{position:relative;width:100%}.multi-select__control{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);cursor:pointer;display:flex;flex-wrap:wrap;gap:var(--space-2);min-height:2.5rem;min-height:var(--control-height-md,2.5rem);padding:var(--space-2) var(--space-3);transition:border-color .2s,background-color .2s,box-shadow .2s}.multi-select__control:hover{border-color:var(--color-border-strong)}.multi-select__control:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.multi-select--disabled .multi-select__control{cursor:not-allowed;opacity:.6}.multi-select--error .multi-select__control{border-color:var(--color-danger)}.multi-select--loading .multi-select__control{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%}.multi-select__input{background:transparent;border:none;color:inherit;font:inherit;min-width:6ch;outline:none;padding:0}.multi-select__chip{align-items:center;background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.multi-select__chip-remove{align-items:center;color:var(--color-text-muted);cursor:pointer;display:inline-flex;height:var(--icon-xs);justify-content:center;width:var(--icon-xs)}.multi-select__chip-remove:hover{color:var(--color-text)}.multi-select__list{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:none;left:0;overflow:hidden;position:absolute;top:calc(100% + var(--space-2));width:100%;z-index:20}.multi-select--open .multi-select__list{display:block}.multi-select__option{color:var(--color-text);cursor:pointer;padding:var(--space-3) var(--space-4);transition:background-color .15s}.multi-select__option:hover{background-color:var(--color-surface-subtle)}.multi-select__option--selected{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 var(--accent-soft-shadow);color:var(--accent-soft-on,var(--color-on-accent))}.multi-select__option--selected:hover{background-color:var(--accent-soft-surface-strong,var(--accent-soft-surface))}.tag-input{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);cursor:text;display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3);transition:border-color .2s,background-color .2s,box-shadow .2s}.tag-input:hover{border-color:var(--color-border-strong)}.tag-input:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.tag-input--disabled{cursor:not-allowed;opacity:.6}.tag-input--error{border-color:var(--color-danger)}.tag-input__chip{align-items:center;background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.tag-input__chip-remove{align-items:center;color:var(--color-text-muted);cursor:pointer;display:inline-flex;height:var(--icon-xs);justify-content:center;width:var(--icon-xs)}.tag-input__chip-remove:hover{color:var(--color-text)}.tag-input__input{background:transparent;border:none;color:inherit;font:inherit;min-width:10ch;outline:none;padding:0}.stepper{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:inline-flex;overflow:hidden;transition:border-color .2s,box-shadow .2s;width:100%}.stepper:hover{border-color:var(--color-border-strong)}.stepper:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.stepper--disabled{opacity:.6;pointer-events:none}.stepper--error{border-color:var(--color-danger)}.stepper__button{align-items:center;background-color:var(--color-surface);border:none;color:var(--color-text-muted);cursor:pointer;display:inline-flex;justify-content:center;transition:background-color .2s,color .2s;width:2.5rem}.stepper__button:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.stepper__button:focus-visible{box-shadow:inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.stepper__input{background:transparent;border:none;color:inherit;flex:1;font:inherit;padding:var(--space-3);text-align:center}.stepper__input:focus{outline:none}.input[type=date],.input[type=datetime-local],.input[type=time]{padding-right:var(--space-7)}.input[type=date]::-webkit-calendar-picker-indicator{background:none;color:transparent;cursor:pointer}.calendar{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.calendar--disabled{opacity:.6;pointer-events:none}.calendar--error{border-color:var(--color-danger)}.calendar__header{align-items:center;border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;justify-content:space-between;padding:var(--space-3) var(--space-4)}.calendar__nav{display:inline-flex;gap:var(--space-2)}.calendar__nav-button{align-items:center;border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;display:inline-flex;height:2rem;justify-content:center;transition:background-color .2s,color .2s;width:2rem}.calendar__nav-button:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.calendar__grid{grid-gap:var(--space-1);display:grid;gap:var(--space-1);grid-template-columns:repeat(7,1fr);padding:var(--space-2)}.calendar__day{border-radius:var(--radius-sm);color:var(--color-text-soft);cursor:pointer;padding:var(--space-2);text-align:center;transition:background-color .15s,color .15s}.calendar__day:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.calendar__day--today{color:var(--color-accent);font-weight:600}.calendar__day--selected{background-color:var(--color-accent);color:var(--color-on-accent);font-weight:600}.calendar__day--range-end,.calendar__day--range-start{background-color:var(--color-accent-soft);color:var(--color-accent-strong)}.calendar__day--disabled{opacity:.4;pointer-events:none}.calendar__popover{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:16rem;padding:var(--space-3);position:absolute;width:-moz-max-content;width:max-content;z-index:20}.form--a .multi-select__control,.form--a .stepper,.form--a .tag-input{font-size:var(--text-md);padding:var(--space-4)}.form--c .multi-select__control,.form--c .stepper,.form--c .tag-input{font-size:var(--text-xs);padding:var(--space-1) var(--space-2)}.form--a .calendar__day,.form--a .multi-select__option{padding:var(--space-4)}.form--c .calendar__day,.form--c .multi-select__option{padding:var(--space-1)}
+.vds-form-advanced,[data-vds-form-advanced]{--control-height-md:40px}.multi-select{position:relative;width:100%}.multi-select__control{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);cursor:pointer;display:flex;flex-wrap:wrap;gap:var(--space-2);min-height:2.5rem;min-height:var(--control-height-md,2.5rem);padding:var(--space-2) var(--space-3);transition:border-color .2s,background-color .2s,box-shadow .2s}.multi-select__control:hover{border-color:var(--color-border-strong)}.multi-select__control:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.multi-select--disabled .multi-select__control{cursor:not-allowed;opacity:.6}.multi-select--error .multi-select__control{border-color:var(--color-danger)}.multi-select--loading .multi-select__control{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%}.multi-select__input{background:transparent;border:none;color:inherit;font:inherit;min-width:6ch;outline:none;padding:0}.multi-select__chip{align-items:center;background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.multi-select__chip-remove{align-items:center;color:var(--color-text-muted);cursor:pointer;display:inline-flex;height:var(--icon-xs);justify-content:center;width:var(--icon-xs)}.multi-select__chip-remove:hover{color:var(--color-text)}.multi-select__list{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:none;left:0;overflow:hidden;position:absolute;top:calc(100% + var(--space-2));width:100%;z-index:20}.multi-select--open .multi-select__list{display:block}.multi-select__option{color:var(--color-text);cursor:pointer;padding:var(--space-3) var(--space-4);transition:background-color .15s}.multi-select__option:hover{background-color:var(--color-surface-subtle)}.multi-select__option--selected{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 var(--accent-soft-shadow);color:var(--accent-soft-on,var(--color-on-accent))}.multi-select__option--selected:hover{background-color:var(--accent-soft-surface-strong,var(--accent-soft-surface))}.tag-input{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);cursor:text;display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3);transition:border-color .2s,background-color .2s,box-shadow .2s}.tag-input:hover{border-color:var(--color-border-strong)}.tag-input:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.tag-input--disabled{cursor:not-allowed;opacity:.6}.tag-input--error{border-color:var(--color-danger)}.tag-input__chip{align-items:center;background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.tag-input__chip-remove{align-items:center;color:var(--color-text-muted);cursor:pointer;display:inline-flex;height:var(--icon-xs);justify-content:center;width:var(--icon-xs)}.tag-input__chip-remove:hover{color:var(--color-text)}.tag-input__input{background:transparent;border:none;color:inherit;font:inherit;min-width:10ch;outline:none;padding:0}.choice-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2)}.choice-buttons--grid{grid-gap:var(--space-2);display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.choice-buttons--grid .choice-button__surface{width:100%}.choice-button{cursor:pointer;display:inline-flex;position:relative}.choice-button__input{height:1px;margin:0;opacity:0;pointer-events:none;position:absolute;width:1px}.choice-button__surface{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:inline-flex;font-size:var(--text-sm);gap:var(--space-2);justify-content:center;padding:var(--space-2) var(--space-4);transition:border-color .2s,background-color .2s,box-shadow .2s,color .2s}.choice-button:hover .choice-button__surface{border-color:var(--color-border-strong)}.choice-button__input:focus-visible+.choice-button__surface{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.choice-button__input:checked+.choice-button__surface{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 var(--accent-soft-shadow);color:var(--accent-soft-on,var(--color-on-accent))}.choice-button__input:disabled+.choice-button__surface{background-color:var(--color-muted-bg);cursor:not-allowed;opacity:.6}.choice-cards{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.choice-card{cursor:pointer;display:inline-flex;position:relative}.choice-card__input{height:1px;margin:0;opacity:0;pointer-events:none;position:absolute;width:1px}.choice-card__surface{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-4);transition:border-color .2s,background-color .2s,box-shadow .2s,color .2s;width:100%}.choice-card:hover .choice-card__surface{border-color:var(--color-border-strong)}.choice-card__input:focus-visible+.choice-card__surface{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.choice-card__input:checked+.choice-card__surface{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 var(--accent-soft-shadow);color:var(--accent-soft-on,var(--color-on-accent))}.choice-card__input:disabled+.choice-card__surface{background-color:var(--color-muted-bg);cursor:not-allowed;opacity:.6}.choice-card__title{font-size:var(--text-sm);font-weight:600}.choice-card__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.choice-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}.choice-chip{--choice-chip-accent:var(--color-accent);--choice-chip-on:var(--color-on-accent);align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-pill);color:var(--color-text);cursor:pointer;display:inline-flex;font-size:var(--text-xs);gap:var(--space-2);padding:var(--space-1) var(--space-3);position:relative;transition:border-color .2s,background-color .2s,box-shadow .2s,color .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.choice-chip__input{height:1px;margin:0;opacity:0;pointer-events:none;position:absolute;width:1px}.choice-chip__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;height:1.1rem;justify-content:center;transition:border-color .2s,background-color .2s,box-shadow .2s;width:1.1rem}.choice-chip__indicator:after{border-bottom:2px solid var(--choice-chip-on);border-right:2px solid var(--choice-chip-on);content:"";height:.55rem;opacity:0;position:absolute;top:30%;transform:rotate(45deg);transition:opacity .2s;width:.3rem}.choice-chip__label{color:inherit}.choice-chip__input:focus-visible+.choice-chip__indicator{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.choice-chip__input:checked+.choice-chip__indicator{background-color:var(--choice-chip-accent);border-color:var(--choice-chip-accent)}.choice-chip__input:checked+.choice-chip__indicator:after{opacity:1}.choice-chip__input:checked~.choice-chip__label{color:var(--choice-chip-accent)}.choice-chip--radio .choice-chip__indicator{border-radius:var(--radius-full);position:relative}.choice-chip--radio .choice-chip__indicator:after{background-color:var(--choice-chip-accent);border:none;border-radius:var(--radius-full);height:.45rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:.45rem}.choice-chip--radio .choice-chip__input:checked+.choice-chip__indicator{background-color:var(--color-surface)}.choice-chip:hover{border-color:var(--color-border-strong)}.choice-chip__input:disabled+.choice-chip__indicator,.choice-chip__input:disabled~.choice-chip__label{cursor:not-allowed;opacity:.6}.choice-chip--success{--choice-chip-accent:var(--color-success);--choice-chip-on:var(--color-on-success)}.choice-chip--warning{--choice-chip-accent:var(--color-warning);--choice-chip-on:var(--color-on-warning)}.choice-chip--danger{--choice-chip-accent:var(--color-danger);--choice-chip-on:var(--color-on-danger)}.choice-chip--info{--choice-chip-accent:var(--color-info);--choice-chip-on:var(--color-on-accent)}.chip-choice{--chip-choice-bg:var(--color-surface);--chip-choice-border:var(--color-border-subtle);--chip-choice-text:var(--color-text);align-items:center;background-color:var(--chip-choice-bg);border:var(--border-width) solid var(--chip-choice-border);border-radius:var(--radius-pill);color:var(--chip-choice-text);cursor:pointer;display:inline-flex;font-size:var(--text-xs);gap:var(--space-2);padding:var(--space-1) var(--space-3);transition:border-color .2s,background-color .2s,color .2s,box-shadow .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.chip-choice:hover{border-color:var(--color-border-strong)}.chip-choice--selected{--chip-choice-bg:var(--accent-soft-surface,var(--color-accent-soft));--chip-choice-border:var(--accent-soft-border,var(--color-accent));--chip-choice-text:var(--accent-soft-on,var(--color-on-accent));box-shadow:0 0 0 1px var(--accent-soft-shadow)}.chip-choice--disabled{cursor:not-allowed;opacity:.6}.chip-choice__check,.chip-choice__remove{align-items:center;color:inherit;display:inline-flex;height:var(--icon-xs);justify-content:center;width:var(--icon-xs)}.chip-choice__remove{margin-left:var(--space-1)}.chip-choice--transfer .chip-choice__check{display:none}.chip-choice__label{color:inherit}.chip-field{gap:var(--space-3)}.chip-field,.chip-field__row{display:flex;flex-direction:column}.chip-field__row{gap:var(--space-2)}.chip-field__label{color:var(--color-text-muted);font-size:var(--text-xs)}.chip-field__items{display:flex;flex-wrap:wrap;gap:var(--space-2)}.chip-field__input{width:100%}.segmented-control{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:inline-flex;overflow:hidden}.segmented-control__option{display:inline-flex;position:relative}.segmented-control__input{height:1px;margin:0;opacity:0;pointer-events:none;position:absolute;width:1px}.segmented-control__label{align-items:center;color:var(--color-text-muted);cursor:pointer;display:inline-flex;font-size:var(--text-sm);justify-content:center;padding:var(--space-2) var(--space-4);transition:background-color .2s,color .2s}.segmented-control__option+.segmented-control__option{border-left:var(--border-width) solid var(--color-border-subtle)}.segmented-control__input:checked+.segmented-control__label{background-color:var(--color-accent);color:var(--color-on-accent)}.segmented-control__input:focus-visible+.segmented-control__label{box-shadow:inset 0 0 0 var(--border-width-strong) var(--focus-ring-color)}.toggle{--toggle-width:2.75rem;--toggle-height:1.5rem;--toggle-thumb:1.1rem;align-items:center;cursor:pointer;display:inline-flex;gap:var(--space-2);position:relative}.toggle--sm{--toggle-width:2.25rem;--toggle-height:1.25rem;--toggle-thumb:0.9rem}.toggle__input{height:1px;margin:0;opacity:0;pointer-events:none;position:absolute;width:1px}.toggle__track{align-items:center;background-color:var(--color-muted-bg);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-full);display:inline-flex;height:var(--toggle-height);padding:0 var(--space-0_5);transition:border-color .2s,background-color .2s,box-shadow .2s;width:var(--toggle-width)}.toggle__thumb{background-color:var(--color-surface);border-radius:var(--radius-full);box-shadow:var(--shadow-xs);height:var(--toggle-thumb);transform:translateX(0);transition:transform .2s,background-color .2s;width:var(--toggle-thumb)}.toggle__input:checked+.toggle__track{background-color:var(--color-accent);border-color:var(--color-accent)}.toggle__input:checked+.toggle__track .toggle__thumb{background-color:var(--color-on-accent);transform:translateX(calc(var(--toggle-width) - var(--toggle-thumb) - var(--space-1)))}.toggle__input:focus-visible+.toggle__track{box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.toggle__input:disabled+.toggle__track{cursor:not-allowed;opacity:.6}.stepper{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:inline-flex;overflow:hidden;transition:border-color .2s,box-shadow .2s;width:100%}.stepper:hover{border-color:var(--color-border-strong)}.stepper:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.stepper--disabled{opacity:.6;pointer-events:none}.stepper--error{border-color:var(--color-danger)}.stepper__button{align-items:center;background-color:var(--color-surface);border:none;color:var(--color-text-muted);cursor:pointer;display:inline-flex;justify-content:center;transition:background-color .2s,color .2s;width:2.5rem}.stepper__button:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.stepper__button:focus-visible{box-shadow:inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.stepper__input{background:transparent;border:none;color:inherit;flex:1;font:inherit;padding:var(--space-3);text-align:center}.stepper__input:focus{outline:none}.input[type=date],.input[type=datetime-local],.input[type=time]{padding-right:var(--space-7)}.input[type=date]::-webkit-calendar-picker-indicator{background:none;color:transparent;cursor:pointer}.calendar{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.calendar--disabled{opacity:.6;pointer-events:none}.calendar--error{border-color:var(--color-danger)}.calendar__header{align-items:center;border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;justify-content:space-between;padding:var(--space-3) var(--space-4)}.calendar__nav{display:inline-flex;gap:var(--space-2)}.calendar__nav-button{align-items:center;border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;display:inline-flex;height:2rem;justify-content:center;transition:background-color .2s,color .2s;width:2rem}.calendar__nav-button:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.calendar__grid{grid-gap:var(--space-1);display:grid;gap:var(--space-1);grid-template-columns:repeat(7,1fr);padding:var(--space-2)}.calendar__day{border-radius:var(--radius-sm);color:var(--color-text-soft);cursor:pointer;padding:var(--space-2);text-align:center;transition:background-color .15s,color .15s}.calendar__day:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.calendar__day--today{color:var(--color-accent);font-weight:600}.calendar__day--selected{background-color:var(--color-accent);color:var(--color-on-accent);font-weight:600}.calendar__day--range-end,.calendar__day--range-start{background-color:var(--color-accent-soft);color:var(--color-accent-strong)}.calendar__day--disabled{opacity:.4;pointer-events:none}.calendar__popover{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:16rem;padding:var(--space-3);position:absolute;width:-moz-max-content;width:max-content;z-index:20}.form--a .multi-select__control,.form--a .stepper,.form--a .tag-input{font-size:var(--text-md);padding:var(--space-4)}.form--a .choice-buttons,.form--a .choice-chips{gap:var(--space-3)}.form--a .choice-button__surface,.form--a .segmented-control__label{font-size:var(--text-md);padding:var(--space-3) var(--space-5)}.form--a .choice-card__surface{padding:var(--space-4) var(--space-5)}.form--a .chip-choice,.form--a .choice-chip{font-size:var(--text-sm);padding:var(--space-2) var(--space-4)}.form--a .toggle{--toggle-width:3rem;--toggle-height:1.7rem;--toggle-thumb:1.2rem}.form--c .multi-select__control,.form--c .stepper,.form--c .tag-input{font-size:var(--text-xs);padding:var(--space-1) var(--space-2)}.form--c .choice-buttons,.form--c .choice-chips{gap:var(--space-1)}.form--c .choice-button__surface,.form--c .segmented-control__label{font-size:var(--text-xs);padding:var(--space-1) var(--space-2)}.form--c .choice-card__surface{padding:var(--space-2) var(--space-3)}.form--c .chip-choice,.form--c .choice-chip{font-size:var(--text-xxs);padding:var(--space-0_5) var(--space-2)}.form--c .toggle{--toggle-width:2.25rem;--toggle-height:1.2rem;--toggle-thumb:0.85rem}.form--a .calendar__day,.form--a .multi-select__option{padding:var(--space-4)}.form--c .calendar__day,.form--c .multi-select__option{padding:var(--space-1)}