@24vlh/vds 0.3.4 → 0.3.6

package/dist/components/forms-advanced.css

@@ -31,7 +31,6 @@
 /* ---------------------------------------------------------
    2. MULTI-SELECT (chips + dropdown)
 --------------------------------------------------------- */
-
 .multi-select {
     position: relative;
     width: 100%;
@@ -163,7 +162,6 @@
 /* ---------------------------------------------------------
    3. TAG INPUT (chip builder)
 --------------------------------------------------------- */
-
 .tag-input {
     display: flex;
     flex-wrap: wrap;
@@ -236,7 +234,6 @@
 /* ---------------------------------------------------------
    4. CHOICE BUTTON GROUPS
 --------------------------------------------------------- */
-
 .choice-buttons {
     display: flex;
     flex-wrap: wrap;
@@ -310,7 +307,6 @@
 /* ---------------------------------------------------------
    5. CHOICE CARDS
 --------------------------------------------------------- */
-
 .choice-cards {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
@@ -383,7 +379,6 @@
 /* ---------------------------------------------------------
    6. CHOICE CHIPS (CHECKBOX / RADIO)
 --------------------------------------------------------- */
-
 .choice-chips {
     display: flex;
     flex-wrap: wrap;
@@ -524,7 +519,6 @@
 /* ---------------------------------------------------------
    7. CHIP CHOICE (SELECTED)
 --------------------------------------------------------- */
-
 .chip-choice {
     --chip-choice-bg: var(--color-surface);
     --chip-choice-border: var(--color-border-subtle);
@@ -589,7 +583,6 @@
 /* ---------------------------------------------------------
    8. CHIP FIELD LAYOUT
 --------------------------------------------------------- */
-
 .chip-field {
     display: flex;
     flex-direction: column;
@@ -620,7 +613,6 @@
 /* ---------------------------------------------------------
    9. SEGMENTED CONTROL
 --------------------------------------------------------- */
-
 .segmented-control {
     display: inline-flex;
     border: var(--border-width) solid var(--color-border-subtle);
@@ -670,7 +662,6 @@
 /* ---------------------------------------------------------
    10. TOGGLE SWITCH
 --------------------------------------------------------- */
-
 .toggle {
     --toggle-width: 2.75rem;
     --toggle-height: 1.5rem;
@@ -743,7 +734,6 @@
 /* ---------------------------------------------------------
    11. STEPPER CONTROL
 --------------------------------------------------------- */
-
 .stepper {
     display: inline-flex;
     width: 100%;
@@ -813,7 +803,6 @@
 /* ---------------------------------------------------------
    12. NATIVE DATE/TIME INPUT NORMALIZATION
 --------------------------------------------------------- */
-
 .input[type="date"],
 .input[type="time"],
 .input[type="datetime-local"] {
@@ -829,7 +818,6 @@
 /* ---------------------------------------------------------
    13. CALENDAR BASE STRUCTURE (JS-driven scaffold)
 --------------------------------------------------------- */
-
 .calendar {
     width: 100%;
     background-color: var(--color-surface);
@@ -943,7 +931,6 @@
 /* ---------------------------------------------------------
    14. DENSITY LAYER OVERRIDES (A and C)
 --------------------------------------------------------- */
-
 .form--a .multi-select__control,
 .form--a .tag-input,
 .form--a .stepper {

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}.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)}
+.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{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{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{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));grid-gap:var(--space-3);gap:var(--space-3)}.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{display:grid;grid-template-columns:repeat(7,1fr);padding:var(--space-2);grid-gap:var(--space-1);gap:var(--space-1)}.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)}

package/dist/components/forms.css

@@ -17,7 +17,6 @@
 /* ---------------------------------------------------------
    1. TOKENS & SHARED ANIMATIONS
 --------------------------------------------------------- */
-
 [data-vds-form],
 .vds-form {
     --form-flow-textarea-min-height: 5rem;
@@ -39,7 +38,6 @@
 /* ---------------------------------------------------------
    2. BASE CONTROL PRIMITIVE
 --------------------------------------------------------- */
-
 .form-control {
     position: relative;
     z-index: 0;
@@ -60,7 +58,6 @@
 }
 
 /* Native control normalization (only when used as UFAL control) */
-
 input.form-control,
 select.form-control,
 textarea.form-control {
@@ -81,7 +78,6 @@ select.form-control {
 }
 
 /* Select dropdown affordance */
-
 select.form-control:not([multiple]):not([size]) {
     padding-right: calc(var(--space-7) + var(--space-2));
     background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
@@ -118,7 +114,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* ARIA validation */
-
 .form-control[aria-invalid="true"] {
     border-color: var(--color-danger);
 }
@@ -130,7 +125,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    2A. FIELD SHELL (LABEL + HELP)
 --------------------------------------------------------- */
-
 .form-field {
     display: flex;
     flex-direction: column;
@@ -213,7 +207,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    2B. CHOICE CONTROLS (CHECKBOX / RADIO)
 --------------------------------------------------------- */
-
 .choice-group {
     display: flex;
     flex-direction: column;
@@ -384,7 +377,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    3. WRAPPERS & GROUPING
 --------------------------------------------------------- */
-
 .form-control-wrapper {
     position: relative;
     width: 100%;
@@ -400,7 +392,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    4. STATE MODIFIERS
 --------------------------------------------------------- */
-
 .form-control--loading {
     cursor: progress;
     opacity: .55;
@@ -434,7 +425,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Native disabled / readonly */
-
 .form-control:disabled,
 .form-control[disabled] {
     background-color: var(--color-muted-bg);
@@ -455,7 +445,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    5. ICONS / PREFIX / SUFFIX
 --------------------------------------------------------- */
-
 .form-control-wrapper[data-icon="left"] .form-control {
     padding-left: calc(var(--space-7) + var(--space-2));
 }
@@ -495,7 +484,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Prefix / suffix */
-
 .form-control-prefix,
 .form-control-suffix {
     position: static;
@@ -524,7 +512,6 @@ select.form-control:not([multiple]):not([size]) {
    - Group draws internal dividers (always present, any child type)
    - Works for: .form-control, .form-control-wrapper (icons), .button
 --------------------------------------------------------- */
-
 .form-control-group {
     position: relative;
     display: flex;
@@ -537,7 +524,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Outer rounding is applied to slots, to preserve radius even when children are wrappers */
-
 .form-control-group > * {
     position: relative;
     border-radius: 0;
@@ -545,7 +531,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Default flex behavior: controls/wrappers flex, buttons stay auto-sized below */
-
 .form-control-group > .form-control,
 .form-control-group > .form-control-wrapper {
     flex: 1 1 auto;
@@ -556,7 +541,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Edge radii */
-
 .form-control-group > :first-child {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
@@ -568,13 +552,11 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Internal divider (single source of truth) */
-
 .form-control-group > * + * {
     box-shadow: inset var(--border-width) 0 0 var(--color-border-subtle);
 }
 
 /* Suppress per-control focus ring inside groups (prevents double focus visuals) */
-
 .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),
@@ -582,7 +564,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Children inside group should not draw their own outer borders */
-
 .form-control-group > .form-control,
 .form-control-group > .form-control-wrapper > .form-control {
     border: none;
@@ -590,7 +571,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Action button integration inside groups */
-
 .form-control-group > .button {
     border: none;
     background: transparent;
@@ -609,7 +589,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    6. LOADING OVERLAYS
 --------------------------------------------------------- */
-
 .form-control--loading::after {
     content: "";
     position: absolute;
@@ -638,7 +617,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    7. FILE UPLOAD PRIMITIVES
 --------------------------------------------------------- */
-
 .form-control--file {
     position: relative;
     padding: var(--space-3);
@@ -657,7 +635,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Drop surface */
-
 .form-control-file-surface {
     position: relative;
     display: flex;
@@ -720,7 +697,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Inline upload */
-
 .file-upload-inline {
     display: inline-flex;
     align-items: center;
@@ -740,7 +716,6 @@ select.form-control:not([multiple]):not([size]) {
 }
 
 /* Loading shimmer on surface */
-
 .form-control-file-surface.form-control--loading::after {
     content: "";
     position: absolute;
@@ -762,7 +737,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    8. LAYOUT PRIMITIVES
 --------------------------------------------------------- */
-
 .form-row {
     display: flex;
     flex-wrap: wrap;
@@ -798,7 +772,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    9. FORM-LEVEL MESSAGES
 --------------------------------------------------------- */
-
 .form-message {
     width: 100%;
     padding: var(--space-4) var(--space-6);
@@ -850,7 +823,6 @@ select.form-control:not([multiple]):not([size]) {
 /* ---------------------------------------------------------
    10. FORM SECTION STATES
 --------------------------------------------------------- */
-
 .form-section--error,
 .form-section--warning,
 .form-section--success,

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);--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-row{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:space-between}.form-help-row__counter{margin-left:auto;text-align:right}.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)}
+.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{display:grid;grid-template-columns:minmax(10rem,14rem) 1fr;grid-gap:var(--space-4);align-items:start;gap:var(--space-4)}.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-row{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:space-between}.form-help-row__counter{margin-left:auto;text-align:right}.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{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);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{height:1px;overflow:hidden;position:absolute;width:1px;clip:rect(0,0,0,0)}.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{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--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)}

package/dist/components/guidance.css

@@ -15,7 +15,6 @@
 /* ---------------------------------------------------------
    1. TOKENS
 --------------------------------------------------------- */
-
 [data-vds-guidance],
 .vds-guidance {
     --guidance-padding-sm: var(--space-3);
@@ -50,7 +49,6 @@
 }
 
 /* Semantic variants (shared) */
-
 :where(.guidance,
 .guidance-card,
 .guidance-strip,
@@ -144,7 +142,6 @@
 /* ---------------------------------------------------------
    2. GUIDANCE PANEL (DO / DO NOT / HOW / WHY)
 --------------------------------------------------------- */
-
 .guidance {
     position: relative;
     display: flex;
@@ -291,7 +288,6 @@
 /* ---------------------------------------------------------
    3. GUIDANCE GRID
 --------------------------------------------------------- */
-
 .guidance-grid {
     display: grid;
     grid-gap: var(--space-3);
@@ -302,7 +298,6 @@
 /* ---------------------------------------------------------
    4. GUIDANCE CARD (EDUCATION BLOCK)
 --------------------------------------------------------- */
-
 .guidance-card {
     display: flex;
     flex-direction: column;
@@ -350,7 +345,6 @@
 /* ---------------------------------------------------------
    5. GUIDANCE STRIP (INLINE CALLOUT)
 --------------------------------------------------------- */
-
 .guidance-strip {
     position: relative;
     display: grid;
@@ -414,7 +408,6 @@
 /* ---------------------------------------------------------
    6. GUIDANCE STEPS (INSTRUCTION)
 --------------------------------------------------------- */
-
 .guidance-steps {
     display: grid;
     grid-gap: var(--space-3);
@@ -468,7 +461,6 @@
 /* ---------------------------------------------------------
    7. GUIDANCE BRIEF (DECISION SUMMARY)
 --------------------------------------------------------- */
-
 .guidance-brief {
     position: relative;
     display: grid;
@@ -605,7 +597,6 @@
 /* ---------------------------------------------------------
    8. GUIDANCE COMPARE (CONTRAST)
 --------------------------------------------------------- */
-
 .guidance-compare {
     display: grid;
     grid-gap: var(--space-3);
@@ -679,7 +670,6 @@
 /* ---------------------------------------------------------
    9. GUIDANCE ROW (INBOX STYLE)
 --------------------------------------------------------- */
-
 .guidance-row {
     position: relative;
     display: grid;
@@ -782,7 +772,6 @@
 /* ---------------------------------------------------------
    10. GUIDANCE FIELD (FORM EDUCATION)
 --------------------------------------------------------- */
-
 .guidance-field {
     display: grid;
     grid-gap: 0;
@@ -877,7 +866,6 @@
 /* ---------------------------------------------------------
    11. GUIDANCE SCOPE (IN / OUT)
 --------------------------------------------------------- */
-
 .guidance-scope {
     display: grid;
     grid-gap: var(--space-3);
@@ -938,7 +926,6 @@
 /* ---------------------------------------------------------
    12. GUIDANCE CHECKLIST
 --------------------------------------------------------- */
-
 .guidance-checklist {
     list-style: none;
     margin: 0;
@@ -974,7 +961,6 @@
 /* ---------------------------------------------------------
    12. DENSITY
 --------------------------------------------------------- */
-
 [data-density="compact"] .guidance,
 [data-density="compact"] .guidance-card,
 [data-density="compact"] .guidance-strip,

package/dist/components/guidance.min.css

@@ -1 +1 @@
-.vds-guidance,[data-vds-guidance]{--guidance-padding-sm:var(--space-3);--guidance-padding-md:var(--space-4);--guidance-padding-lg:var(--space-6);--guidance-gap:var(--space-3);--guidance-radius:var(--radius-md);--guidance-border-width:var(--border-width-strong);--guidance-shadow:var(--shadow-xs)}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat){--guidance-bg:var(--color-surface);--guidance-outline:var(--color-border-subtle);--guidance-rail:var(--color-accent);--guidance-tint:var(--color-surface-subtle);--guidance-text:var(--color-text);--guidance-title:var(--color-text);--guidance-muted:var(--color-text-muted);--guidance-icon:var(--color-accent);--guidance-on:var(--color-on-accent);color:var(--guidance-text)}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=info]{--guidance-rail:var(--semantic-info-border-strong,var(--color-info));--guidance-icon:var(--semantic-info-border-strong,var(--color-info));--guidance-tint:var(--semantic-info-bg-strong,var(--color-info-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=success]{--guidance-rail:var(--semantic-success-border-strong,var(--color-success));--guidance-icon:var(--semantic-success-border-strong,var(--color-success));--guidance-tint:var(--semantic-success-bg-strong,var(--color-success-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=warning]{--guidance-rail:var(--semantic-warning-border-strong,var(--color-warning));--guidance-icon:var(--semantic-warning-border-strong,var(--color-warning));--guidance-tint:var(--semantic-warning-bg-strong,var(--color-warning-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=danger]{--guidance-rail:var(--semantic-error-border-strong,var(--color-danger));--guidance-icon:var(--semantic-error-border-strong,var(--color-danger));--guidance-tint:var(--semantic-error-bg-strong,var(--color-danger-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=accent]{--guidance-rail:var(--color-accent);--guidance-icon:var(--color-accent);--guidance-tint:var(--color-accent-soft)}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=neutral]{--guidance-rail:var(--color-border-strong);--guidance-icon:var(--color-text-muted);--guidance-tint:var(--color-muted-bg)}.guidance{background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-left:var(--guidance-border-width) solid var(--guidance-rail);border-radius:var(--radius-md);box-shadow:var(--guidance-shadow);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--space-2);line-height:1.4;line-height:var(--line-height-relaxed,1.4);padding:var(--guidance-padding-md,var(--space-4)) var(--guidance-padding-lg,var(--space-6));position:relative}.guidance--compact{padding:var(--guidance-padding-sm,var(--space-3)) var(--guidance-padding-md,var(--space-4))}.guidance--tint{background-color:var(--guidance-tint)}.guidance__header{align-items:flex-start;display:flex;gap:var(--space-2)}.guidance__icon{align-items:center;color:var(--guidance-icon);display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.guidance__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600;line-height:1.2;line-height:var(--line-height-tight,1.2)}.guidance__meta{color:var(--guidance-muted);font-size:var(--text-xs)}.guidance__tag{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--guidance-outline);border-radius:var(--radius-pill);color:var(--guidance-muted);display:inline-flex;font-size:var(--text-xxs);gap:var(--space-1);letter-spacing:.08em;padding:0 var(--space-2);text-transform:uppercase;white-space:nowrap}.guidance__body{color:var(--guidance-text);font-size:var(--text-sm)}.guidance__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance__list li{padding-left:var(--space-4);position:relative}.guidance__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance__footer{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.guidance--do{--guidance-rail:var(--semantic-success-border-strong,var(--color-success));--guidance-icon:var(--semantic-success-border-strong,var(--color-success));--guidance-tint:var(--semantic-success-bg-strong,var(--color-success-soft))}.guidance--dont{--guidance-rail:var(--semantic-error-border-strong,var(--color-danger));--guidance-icon:var(--semantic-error-border-strong,var(--color-danger));--guidance-tint:var(--semantic-error-bg-strong,var(--color-danger-soft))}.guidance--how{--guidance-rail:var(--semantic-info-border-strong,var(--color-info));--guidance-icon:var(--semantic-info-border-strong,var(--color-info));--guidance-tint:var(--semantic-info-bg-strong,var(--color-info-soft))}.guidance--why{--guidance-rail:var(--color-accent);--guidance-icon:var(--color-accent);--guidance-tint:var(--color-accent-soft)}.guidance--expect{--guidance-rail:var(--semantic-warning-border-strong,var(--color-warning));--guidance-icon:var(--semantic-warning-border-strong,var(--color-warning));--guidance-tint:var(--semantic-warning-bg-strong,var(--color-warning-soft))}.guidance--recommend{--guidance-rail:var(--color-border-strong);--guidance-icon:var(--color-text);--guidance-tint:var(--color-surface-subtle)}.guidance-grid{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.guidance-card{background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--guidance-radius);box-shadow:var(--guidance-shadow);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--guidance-padding-md,var(--space-4))}.guidance-card--tint{background-color:var(--guidance-tint)}.guidance-card--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-card__eyebrow{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-card__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600}.guidance-card__body{font-size:var(--text-sm)}.guidance-card__footer{align-items:center;color:var(--guidance-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2)}.guidance-strip{grid-gap:var(--space-3);align-items:start;background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);display:grid;gap:var(--space-3);grid-template-columns:auto 1fr auto;padding:var(--guidance-padding-sm,var(--space-3)) var(--guidance-padding-md,var(--space-4));padding-left:calc(var(--guidance-padding-md, var(--space-4)) + var(--space-1));position:relative}.guidance-strip:before{background:var(--guidance-rail);bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:4px}.guidance-strip--tint{background-color:var(--guidance-tint)}.guidance-strip__label{align-items:center;background-color:var(--color-surface);border:1px solid var(--guidance-rail);border-radius:var(--radius-pill);color:var(--guidance-title);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);letter-spacing:.06em;padding:0 var(--space-2);text-transform:uppercase}.guidance-strip__body{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-strip__actions{align-items:center;display:inline-flex;gap:var(--space-2)}@media (max-width:720px){.guidance-strip{grid-template-columns:1fr}}.guidance-steps{grid-gap:var(--space-3);margin:0;padding:0}.guidance-step,.guidance-steps{display:grid;gap:var(--space-3)}.guidance-step{grid-gap:var(--space-3);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--guidance-radius);grid-template-columns:auto 1fr;padding:var(--guidance-padding-md,var(--space-4))}.guidance-step--tint{background-color:var(--guidance-tint)}.guidance-step--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-step__index{align-items:center;background-color:var(--guidance-rail);border-radius:var(--radius-full);color:var(--guidance-on);display:inline-flex;font-weight:600;height:var(--space-7);justify-content:center;width:var(--space-7)}.guidance-step__title{color:var(--guidance-title);font-size:var(--text-sm);font-weight:600}.guidance-step__body{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-brief{grid-gap:var(--space-4);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-lg);box-shadow:var(--guidance-shadow);display:grid;gap:var(--space-4);padding:var(--guidance-padding-lg,var(--space-6));position:relative}.guidance-brief--tint{background-color:var(--guidance-tint)}.guidance-brief--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-brief__header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}.guidance-brief__kicker{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-brief__title{color:var(--guidance-title);font-size:var(--text-lg);font-weight:600}.guidance-brief__meta{color:var(--guidance-muted);font-size:var(--text-sm)}.guidance-brief__grid{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.guidance-brief__block{grid-gap:var(--space-2);background:var(--color-surface-subtle);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);display:grid;gap:var(--space-2);padding:var(--space-3)}.guidance-brief__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-brief__text{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-brief__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance-brief__list li{font-size:var(--text-sm);padding-left:var(--space-4);position:relative}.guidance-brief__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-stats{display:flex;flex-wrap:wrap;gap:var(--space-3)}.guidance-stat{grid-gap:var(--space-1);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);display:grid;gap:var(--space-1);padding:var(--space-2) var(--space-3)}.guidance-stat--tint{background-color:var(--guidance-tint)}.guidance-stat__value{color:var(--guidance-title);font-size:var(--text-lg);font-weight:600}.guidance-stat__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-compare{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.guidance-compare__item{grid-gap:var(--space-2);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);box-shadow:var(--guidance-shadow);display:grid;gap:var(--space-2);overflow:hidden;padding:var(--guidance-padding-md,var(--space-4));position:relative}.guidance-compare__item:before{background:var(--guidance-rail);bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:4px}.guidance-compare__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-compare__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600}.guidance-compare__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance-compare__list li{font-size:var(--text-sm);padding-left:var(--space-4);position:relative}.guidance-compare__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-row{grid-gap:var(--space-3);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-lg);box-shadow:var(--guidance-shadow);display:grid;gap:var(--space-3);overflow:hidden;padding:var(--guidance-padding-md,var(--space-4));position:relative}.guidance-row:before{background:var(--guidance-rail);bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:4px}.guidance-row--tint{background-color:var(--guidance-tint)}.guidance-row__header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);justify-content:space-between}.guidance-row__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600}.guidance-row__meta{color:var(--guidance-muted);font-size:var(--text-xs)}.guidance-row__labels{display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}.guidance-row__label{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--guidance-outline);border-radius:var(--radius-pill);color:var(--guidance-muted);display:inline-flex;font-size:var(--text-xxs);gap:var(--space-1);letter-spacing:.06em;padding:0 var(--space-2);text-transform:uppercase}.guidance-row__glance{color:var(--guidance-muted);font-size:var(--text-sm);line-height:1.4;line-height:var(--line-height-relaxed,1.4)}.guidance-row__details{display:flex;flex-wrap:wrap;gap:var(--space-2)}.guidance-row__detail{align-items:center;background:var(--color-surface);border:1px solid var(--guidance-outline);border-radius:var(--radius-pill);color:var(--guidance-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.guidance-row__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.guidance-field{grid-gap:0;background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-left:var(--guidance-border-width) solid var(--guidance-rail);border-radius:var(--guidance-radius);box-shadow:var(--guidance-shadow);display:grid;gap:0;overflow:hidden}.guidance-field--plain{border-left:1px solid var(--guidance-outline)}.guidance-field__frame,.guidance-field__hint{padding:var(--guidance-padding-md,var(--space-4))}.guidance-field__frame{background-color:var(--guidance-bg)}.guidance-field__hint{grid-gap:var(--space-2);background-color:var(--guidance-tint);display:grid;gap:var(--space-2)}.guidance-field__hint--plain{background-color:var(--guidance-bg)}.guidance-field__frame+.guidance-field__hint,.guidance-field__hint+.guidance-field__frame{border-top:1px solid var(--guidance-outline)}.guidance-field__kicker{color:var(--guidance-muted);font-size:var(--text-xxs);letter-spacing:.12em;text-transform:uppercase}.guidance-field__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600;line-height:1.2;line-height:var(--line-height-tight,1.2)}.guidance-field__text{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-field__meta{color:var(--guidance-muted);font-size:var(--text-xs)}.guidance-field__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance-field__list li{padding-left:var(--space-4);position:relative}.guidance-field__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-scope{grid-gap:var(--space-3);display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.guidance-scope__item{background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--guidance-radius);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--guidance-padding-md,var(--space-4))}.guidance-scope__item--tint{background-color:var(--guidance-tint)}.guidance-scope__item--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-scope__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-scope__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.guidance-scope__list li{padding-left:var(--space-4);position:relative}.guidance-scope__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-checklist{grid-gap:var(--space-2);display:grid;gap:var(--space-2);list-style:none;margin:0;padding:0}.guidance-checklist li{font-size:var(--text-sm);padding-left:var(--space-5);position:relative}.guidance-checklist li:before{background-color:var(--color-surface);border:var(--border-width) solid var(--guidance-rail);border-radius:var(--radius-xs);content:"";height:.8rem;left:0;position:absolute;top:.2rem;width:.8rem}.guidance-checklist li.is-done:before{background-color:var(--guidance-rail);box-shadow:inset 0 0 0 2px var(--color-surface)}[data-density=compact] .guidance,[data-density=compact] .guidance-brief,[data-density=compact] .guidance-card,[data-density=compact] .guidance-compare__item,[data-density=compact] .guidance-field,[data-density=compact] .guidance-row,[data-density=compact] .guidance-scope__item,[data-density=compact] .guidance-stat,[data-density=compact] .guidance-step,[data-density=compact] .guidance-strip{padding:var(--guidance-padding-sm,var(--space-3))!important}
+.vds-guidance,[data-vds-guidance]{--guidance-padding-sm:var(--space-3);--guidance-padding-md:var(--space-4);--guidance-padding-lg:var(--space-6);--guidance-gap:var(--space-3);--guidance-radius:var(--radius-md);--guidance-border-width:var(--border-width-strong);--guidance-shadow:var(--shadow-xs)}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat){--guidance-bg:var(--color-surface);--guidance-outline:var(--color-border-subtle);--guidance-rail:var(--color-accent);--guidance-tint:var(--color-surface-subtle);--guidance-text:var(--color-text);--guidance-title:var(--color-text);--guidance-muted:var(--color-text-muted);--guidance-icon:var(--color-accent);--guidance-on:var(--color-on-accent);color:var(--guidance-text)}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=info]{--guidance-rail:var(--semantic-info-border-strong,var(--color-info));--guidance-icon:var(--semantic-info-border-strong,var(--color-info));--guidance-tint:var(--semantic-info-bg-strong,var(--color-info-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=success]{--guidance-rail:var(--semantic-success-border-strong,var(--color-success));--guidance-icon:var(--semantic-success-border-strong,var(--color-success));--guidance-tint:var(--semantic-success-bg-strong,var(--color-success-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=warning]{--guidance-rail:var(--semantic-warning-border-strong,var(--color-warning));--guidance-icon:var(--semantic-warning-border-strong,var(--color-warning));--guidance-tint:var(--semantic-warning-bg-strong,var(--color-warning-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=danger]{--guidance-rail:var(--semantic-error-border-strong,var(--color-danger));--guidance-icon:var(--semantic-error-border-strong,var(--color-danger));--guidance-tint:var(--semantic-error-bg-strong,var(--color-danger-soft))}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=accent]{--guidance-rail:var(--color-accent);--guidance-icon:var(--color-accent);--guidance-tint:var(--color-accent-soft)}:where(.guidance,.guidance-card,.guidance-strip,.guidance-step,.guidance-field,.guidance-scope__item,.guidance-brief,.guidance-row,.guidance-compare__item,.guidance-stat)[data-variant=neutral]{--guidance-rail:var(--color-border-strong);--guidance-icon:var(--color-text-muted);--guidance-tint:var(--color-muted-bg)}.guidance{background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-left:var(--guidance-border-width) solid var(--guidance-rail);border-radius:var(--radius-md);box-shadow:var(--guidance-shadow);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--space-2);line-height:1.4;line-height:var(--line-height-relaxed,1.4);padding:var(--guidance-padding-md,var(--space-4)) var(--guidance-padding-lg,var(--space-6));position:relative}.guidance--compact{padding:var(--guidance-padding-sm,var(--space-3)) var(--guidance-padding-md,var(--space-4))}.guidance--tint{background-color:var(--guidance-tint)}.guidance__header{align-items:flex-start;display:flex;gap:var(--space-2)}.guidance__icon{align-items:center;color:var(--guidance-icon);display:flex;flex-shrink:0;height:var(--space-5);justify-content:center;width:var(--space-5)}.guidance__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600;line-height:1.2;line-height:var(--line-height-tight,1.2)}.guidance__meta{color:var(--guidance-muted);font-size:var(--text-xs)}.guidance__tag{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--guidance-outline);border-radius:var(--radius-pill);color:var(--guidance-muted);display:inline-flex;font-size:var(--text-xxs);gap:var(--space-1);letter-spacing:.08em;padding:0 var(--space-2);text-transform:uppercase;white-space:nowrap}.guidance__body{color:var(--guidance-text);font-size:var(--text-sm)}.guidance__list{display:grid;list-style:none;margin:0;padding:0;grid-gap:var(--space-1);gap:var(--space-1)}.guidance__list li{padding-left:var(--space-4);position:relative}.guidance__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance__footer{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.guidance--do{--guidance-rail:var(--semantic-success-border-strong,var(--color-success));--guidance-icon:var(--semantic-success-border-strong,var(--color-success));--guidance-tint:var(--semantic-success-bg-strong,var(--color-success-soft))}.guidance--dont{--guidance-rail:var(--semantic-error-border-strong,var(--color-danger));--guidance-icon:var(--semantic-error-border-strong,var(--color-danger));--guidance-tint:var(--semantic-error-bg-strong,var(--color-danger-soft))}.guidance--how{--guidance-rail:var(--semantic-info-border-strong,var(--color-info));--guidance-icon:var(--semantic-info-border-strong,var(--color-info));--guidance-tint:var(--semantic-info-bg-strong,var(--color-info-soft))}.guidance--why{--guidance-rail:var(--color-accent);--guidance-icon:var(--color-accent);--guidance-tint:var(--color-accent-soft)}.guidance--expect{--guidance-rail:var(--semantic-warning-border-strong,var(--color-warning));--guidance-icon:var(--semantic-warning-border-strong,var(--color-warning));--guidance-tint:var(--semantic-warning-bg-strong,var(--color-warning-soft))}.guidance--recommend{--guidance-rail:var(--color-border-strong);--guidance-icon:var(--color-text);--guidance-tint:var(--color-surface-subtle)}.guidance-grid{display:grid;grid-gap:var(--space-3);gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.guidance-card{background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--guidance-radius);box-shadow:var(--guidance-shadow);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--guidance-padding-md,var(--space-4))}.guidance-card--tint{background-color:var(--guidance-tint)}.guidance-card--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-card__eyebrow{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-card__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600}.guidance-card__body{font-size:var(--text-sm)}.guidance-card__footer{align-items:center;color:var(--guidance-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2)}.guidance-strip{display:grid;grid-template-columns:auto 1fr auto;position:relative;grid-gap:var(--space-3);align-items:start;background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);gap:var(--space-3);padding:var(--guidance-padding-sm,var(--space-3)) var(--guidance-padding-md,var(--space-4));padding-left:calc(var(--guidance-padding-md, var(--space-4)) + var(--space-1))}.guidance-strip:before{background:var(--guidance-rail);bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:4px}.guidance-strip--tint{background-color:var(--guidance-tint)}.guidance-strip__label{align-items:center;background-color:var(--color-surface);border:1px solid var(--guidance-rail);border-radius:var(--radius-pill);color:var(--guidance-title);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);letter-spacing:.06em;padding:0 var(--space-2);text-transform:uppercase}.guidance-strip__body{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-strip__actions{align-items:center;display:inline-flex;gap:var(--space-2)}@media (max-width:720px){.guidance-strip{grid-template-columns:1fr}}.guidance-steps{grid-gap:var(--space-3);margin:0;padding:0}.guidance-step,.guidance-steps{display:grid;gap:var(--space-3)}.guidance-step{grid-template-columns:auto 1fr;grid-gap:var(--space-3);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--guidance-radius);padding:var(--guidance-padding-md,var(--space-4))}.guidance-step--tint{background-color:var(--guidance-tint)}.guidance-step--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-step__index{align-items:center;background-color:var(--guidance-rail);border-radius:var(--radius-full);color:var(--guidance-on);display:inline-flex;font-weight:600;height:var(--space-7);justify-content:center;width:var(--space-7)}.guidance-step__title{color:var(--guidance-title);font-size:var(--text-sm);font-weight:600}.guidance-step__body{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-brief{display:grid;position:relative;grid-gap:var(--space-4);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-lg);box-shadow:var(--guidance-shadow);gap:var(--space-4);padding:var(--guidance-padding-lg,var(--space-6))}.guidance-brief--tint{background-color:var(--guidance-tint)}.guidance-brief--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-brief__header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}.guidance-brief__kicker{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-brief__title{color:var(--guidance-title);font-size:var(--text-lg);font-weight:600}.guidance-brief__meta{color:var(--guidance-muted);font-size:var(--text-sm)}.guidance-brief__grid{display:grid;grid-gap:var(--space-3);gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}.guidance-brief__block{display:grid;grid-gap:var(--space-2);background:var(--color-surface-subtle);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);gap:var(--space-2);padding:var(--space-3)}.guidance-brief__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-brief__text{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-brief__list{display:grid;list-style:none;margin:0;padding:0;grid-gap:var(--space-1);gap:var(--space-1)}.guidance-brief__list li{font-size:var(--text-sm);padding-left:var(--space-4);position:relative}.guidance-brief__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-stats{display:flex;flex-wrap:wrap;gap:var(--space-3)}.guidance-stat{display:grid;grid-gap:var(--space-1);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);gap:var(--space-1);padding:var(--space-2) var(--space-3)}.guidance-stat--tint{background-color:var(--guidance-tint)}.guidance-stat__value{color:var(--guidance-title);font-size:var(--text-lg);font-weight:600}.guidance-stat__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-compare{display:grid;grid-gap:var(--space-3);gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.guidance-compare__item{display:grid;position:relative;grid-gap:var(--space-2);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-md);box-shadow:var(--guidance-shadow);gap:var(--space-2);overflow:hidden;padding:var(--guidance-padding-md,var(--space-4))}.guidance-compare__item:before{background:var(--guidance-rail);bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:4px}.guidance-compare__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-compare__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600}.guidance-compare__list{display:grid;list-style:none;margin:0;padding:0;grid-gap:var(--space-1);gap:var(--space-1)}.guidance-compare__list li{font-size:var(--text-sm);padding-left:var(--space-4);position:relative}.guidance-compare__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-row{display:grid;position:relative;grid-gap:var(--space-3);background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--radius-lg);box-shadow:var(--guidance-shadow);gap:var(--space-3);overflow:hidden;padding:var(--guidance-padding-md,var(--space-4))}.guidance-row:before{background:var(--guidance-rail);bottom:0;content:"";left:0;position:absolute;right:auto;top:0;width:4px}.guidance-row--tint{background-color:var(--guidance-tint)}.guidance-row__header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);justify-content:space-between}.guidance-row__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600}.guidance-row__meta{color:var(--guidance-muted);font-size:var(--text-xs)}.guidance-row__labels{display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}.guidance-row__label{align-items:center;background:var(--color-surface-subtle);border:1px solid var(--guidance-outline);border-radius:var(--radius-pill);color:var(--guidance-muted);display:inline-flex;font-size:var(--text-xxs);gap:var(--space-1);letter-spacing:.06em;padding:0 var(--space-2);text-transform:uppercase}.guidance-row__glance{color:var(--guidance-muted);font-size:var(--text-sm);line-height:1.4;line-height:var(--line-height-relaxed,1.4)}.guidance-row__details{display:flex;flex-wrap:wrap;gap:var(--space-2)}.guidance-row__detail{align-items:center;background:var(--color-surface);border:1px solid var(--guidance-outline);border-radius:var(--radius-pill);color:var(--guidance-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.guidance-row__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.guidance-field{display:grid;grid-gap:0;background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-left:var(--guidance-border-width) solid var(--guidance-rail);border-radius:var(--guidance-radius);box-shadow:var(--guidance-shadow);gap:0;overflow:hidden}.guidance-field--plain{border-left:1px solid var(--guidance-outline)}.guidance-field__frame,.guidance-field__hint{padding:var(--guidance-padding-md,var(--space-4))}.guidance-field__frame{background-color:var(--guidance-bg)}.guidance-field__hint{display:grid;grid-gap:var(--space-2);background-color:var(--guidance-tint);gap:var(--space-2)}.guidance-field__hint--plain{background-color:var(--guidance-bg)}.guidance-field__frame+.guidance-field__hint,.guidance-field__hint+.guidance-field__frame{border-top:1px solid var(--guidance-outline)}.guidance-field__kicker{color:var(--guidance-muted);font-size:var(--text-xxs);letter-spacing:.12em;text-transform:uppercase}.guidance-field__title{color:var(--guidance-title);font-size:var(--text-md);font-weight:600;line-height:1.2;line-height:var(--line-height-tight,1.2)}.guidance-field__text{color:var(--guidance-text);font-size:var(--text-sm)}.guidance-field__meta{color:var(--guidance-muted);font-size:var(--text-xs)}.guidance-field__list{display:grid;list-style:none;margin:0;padding:0;grid-gap:var(--space-1);gap:var(--space-1)}.guidance-field__list li{padding-left:var(--space-4);position:relative}.guidance-field__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-scope{display:grid;grid-gap:var(--space-3);gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.guidance-scope__item{background-color:var(--guidance-bg);border:1px solid var(--guidance-outline);border-radius:var(--guidance-radius);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--guidance-padding-md,var(--space-4))}.guidance-scope__item--tint{background-color:var(--guidance-tint)}.guidance-scope__item--rail{border-left:var(--guidance-border-width) solid var(--guidance-rail)}.guidance-scope__label{color:var(--guidance-muted);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.guidance-scope__list{display:grid;list-style:none;margin:0;padding:0;grid-gap:var(--space-1);gap:var(--space-1)}.guidance-scope__list li{padding-left:var(--space-4);position:relative}.guidance-scope__list li:before{background-color:var(--guidance-rail);border-radius:var(--radius-full);content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.guidance-checklist{display:grid;list-style:none;margin:0;padding:0;grid-gap:var(--space-2);gap:var(--space-2)}.guidance-checklist li{font-size:var(--text-sm);padding-left:var(--space-5);position:relative}.guidance-checklist li:before{background-color:var(--color-surface);border:var(--border-width) solid var(--guidance-rail);border-radius:var(--radius-xs);content:"";height:.8rem;left:0;position:absolute;top:.2rem;width:.8rem}.guidance-checklist li.is-done:before{background-color:var(--guidance-rail);box-shadow:inset 0 0 0 2px var(--color-surface)}[data-density=compact] .guidance,[data-density=compact] .guidance-brief,[data-density=compact] .guidance-card,[data-density=compact] .guidance-compare__item,[data-density=compact] .guidance-field,[data-density=compact] .guidance-row,[data-density=compact] .guidance-scope__item,[data-density=compact] .guidance-stat,[data-density=compact] .guidance-step,[data-density=compact] .guidance-strip{padding:var(--guidance-padding-sm,var(--space-3))!important}