@24vlh/vds 0.1.0

package/dist/components/flows.min.css

@@ -0,0 +1 @@
+.vds-flow,[data-vds-flow]{--flow-component-disabled-opacity:0.48;--flow-step-bullet-sm:var(--space-5);--flow-step-bullet-md:var(--space-5_5);--flow-step-bullet-lg:var(--space-6);--flow-timeline-point-sm:var(--space-2);--flow-timeline-point-md:var(--space-3);--flow-timeline-point-xs:var(--space-1_5);--flow-node-min-width:var(--space-40);--flow-stage-min-width:var(--space-48);--flow-grid-min-md:var(--flow-stage-min-width);--flow-icon-size-sm:var(--space-3);--flow-icon-size-md:var(--space-4);--flow-icon-size-lg:var(--space-5);--flow-gap-xs:var(--space-1);--flow-gap-sm:var(--space-2);--flow-gap-md:var(--space-3);--flow-gap-lg:var(--space-4);--flow-gap-xl:var(--space-8);--flow-inset-xs:var(--space-2);--flow-inset-sm:var(--space-3);--flow-inset-md:var(--space-4);--flow-inset-lg:var(--space-6);--flow-progress-stripe-size:var(--space-3);--flow-progress-stripe-speed:1.2s}.flow--compact .flow{gap:var(--flow-gap-lg)}.flow--compact .flow__body{gap:var(--flow-gap-md)}.flow--compact .steps,.flow--compact .timeline{gap:var(--flow-gap-sm)}.flow--compact .journey{gap:var(--flow-gap-md)}.flow--compact .process-flow{gap:var(--flow-gap-sm)}.flow--compact .state-flow{gap:var(--flow-gap-xs)}.flow--compact .form-flow{gap:var(--flow-gap-md)}.steps__item--upcoming{color:var(--color-text-soft)}.flow-branch__option--upcoming,.journey__stage--upcoming,.process-flow__node--upcoming,.state-flow__item--upcoming{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle);color:var(--color-text-muted)}.flow-branch__option--clickable:focus-visible,.journey__stage--clickable:focus-visible,.process-flow__node--clickable:focus-visible,.steps__item--clickable:focus-visible,.steps__item:focus-visible{outline:var(--focus-ring-width) solid var(--color-accent);outline-offset:var(--focus-ring-offset)}.steps__item--disabled,.steps__item[aria-disabled=true]{cursor:not-allowed;opacity:var(--flow-component-disabled-opacity)}.flow-branch__option--disabled,.flow-branch__option[aria-disabled=true],.journey__stage--disabled,.journey__stage[aria-disabled=true],.process-flow__node--disabled,.process-flow__node[aria-disabled=true]{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow{gap:var(--space-8)}.flow,.flow__header{display:flex;flex-direction:column}.flow__header{gap:var(--space-2)}.flow__title{font-size:var(--text-lg);font-weight:600}.flow__subtitle{color:var(--color-text-muted);font-size:var(--text-sm)}.flow__body{display:flex;flex-direction:column;gap:var(--space-6)}.flow__nav{justify-content:flex-end}.flow__nav,.steps{display:flex;gap:var(--space-4)}.steps,.steps__item{align-items:center}.steps__item{color:var(--color-text-muted);display:flex;font-size:var(--text-xs);gap:var(--flow-gap-sm)}.steps__item--clickable{cursor:pointer}.steps__item--clickable:hover .steps__label{color:var(--color-text)}.steps__item--clickable:active{opacity:.95;transform:translateY(1px)}.steps__item--error{color:var(--color-danger-strong)}.steps__item--error .steps__bullet{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--danger-soft-border,var(--color-danger));color:var(--danger-soft-on,var(--color-on-danger))}.steps__item--warning{color:var(--color-warning-strong)}.steps__item--warning .steps__bullet{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning));color:var(--warning-soft-on,var(--color-on-warning))}.steps__item[aria-current=step],.steps__item[aria-current=step] .steps__label{color:var(--color-text)}.steps__bullet{align-items:center;background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);display:flex;flex-shrink:0;font-size:var(--text-xxs);height:var(--flow-step-bullet-md);justify-content:center;width:var(--flow-step-bullet-md)}.steps__label{white-space:nowrap}.steps__line{background-color:var(--color-border-subtle);flex:1;height:var(--border-width)}.steps__item--active .steps__bullet{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--accent-soft-border,var(--color-accent));color:var(--accent-soft-on,var(--color-on-accent))}.steps__item--complete .steps__bullet{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--success-soft-border,var(--color-success));color:var(--success-soft-on,var(--color-on-success));opacity:.7}.steps__item--active,.steps__item--complete{color:var(--color-text)}.steps--a .steps__bullet{height:var(--flow-step-bullet-lg);width:var(--flow-step-bullet-lg)}.steps--c .steps__bullet{font-size:var(--text-xxs);height:var(--flow-step-bullet-sm);width:var(--flow-step-bullet-sm)}.steps--vertical{flex-direction:column}.steps--vertical,.steps--vertical .steps__item{align-items:flex-start}.steps--vertical .steps__line{background-color:var(--color-border-subtle);flex:auto;height:auto;margin-left:calc(var(--flow-step-bullet-md)/2 - var(--border-width)/2);min-height:var(--flow-gap-xl);width:var(--border-width)}.flow-progress{border-radius:var(--radius-sm);height:var(--border-width-strong);overflow:hidden;width:100%}.flow-progress,.flow-progress__bar{background-color:var(--color-muted-bg)}.flow-progress__bar{height:100%;transition:width .2s ease;width:0}.flow-progress--striped .flow-progress__bar{animation:flow-progress-stripes var(--flow-progress-stripe-speed) linear infinite;background-image:repeating-linear-gradient(45deg,var(--color-text-soft) 0,var(--color-text-soft) var(--flow-progress-stripe-size),var(--color-muted-bg) var(--flow-progress-stripe-size),var(--color-muted-bg) calc(var(--flow-progress-stripe-size)*2))}.flow-progress--striped .flow-progress__bar--error{background-image:repeating-linear-gradient(45deg,var(--color-danger) 0,var(--color-danger) var(--flow-progress-stripe-size),var(--color-danger-soft) var(--flow-progress-stripe-size),var(--color-danger-soft) calc(var(--flow-progress-stripe-size)*2))}.flow-progress--striped .flow-progress__bar--warning{background-image:repeating-linear-gradient(45deg,var(--color-warning) 0,var(--color-warning) var(--flow-progress-stripe-size),var(--color-warning-soft) var(--flow-progress-stripe-size),var(--color-warning-soft) calc(var(--flow-progress-stripe-size)*2))}@keyframes flow-progress-stripes{0%{background-position:0 0}to{background-position:calc(var(--flow-progress-stripe-size)*-2.828) 0}}@media (prefers-reduced-motion:reduce){.flow-progress--striped .flow-progress__bar{animation:none;background-position:0 0}}.flow-progress--striped-right .flow-progress__bar{animation:flow-progress-stripes-right var(--flow-progress-stripe-speed) linear infinite}@keyframes flow-progress-stripes-right{0%{background-position:calc(var(--flow-progress-stripe-size)*-2.828) 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){.flow-progress--striped-right .flow-progress__bar{animation:none;background-position:0 0}}.flow-progress--segments{border-radius:var(--radius-sm);display:flex;height:var(--border-width-strong);overflow:hidden}.flow-progress__segment{background-color:var(--color-muted-bg);flex:1}.flow-progress__segment--complete{background-color:var(--color-success)}.flow-progress__segment--error{background-color:var(--color-danger)}.flow-progress__segment--warning{background-color:var(--color-warning)}.timeline{display:flex;flex-direction:column;gap:var(--flow-gap-md)}.timeline__item{align-items:stretch;display:flex;gap:var(--flow-gap-sm)}.timeline__point-wrap{align-items:center;display:flex;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__point{background-color:var(--color-surface);border:var(--border-width-strong) solid var(--color-accent);border-radius:999px;flex-shrink:0;height:var(--flow-timeline-point-sm);width:var(--flow-timeline-point-sm)}.timeline__point--upcoming{border-color:var(--color-border-subtle)}.timeline__point--error{background-color:var(--color-danger-soft);border-color:var(--color-danger)}.timeline__point--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning))}.timeline__point--success{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--danger-soft-border,var(--color-danger))}.timeline__point--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--info-soft-border,var(--color-info))}.timeline__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.timeline__icon--left{margin-right:var(--flow-gap-xs)}.timeline__icon--right{margin-left:var(--flow-gap-xs)}.timeline__icon--top{margin-bottom:var(--flow-gap-xs)}.timeline__line{background-color:var(--color-border-subtle);flex:1;width:var(--border-width-strong)}.timeline__content{display:flex;flex:1;flex-direction:column;gap:var(--flow-gap-xs)}.timeline__label{align-items:center;display:flex;font-size:var(--text-sm);font-weight:500;gap:var(--space-2)}.timeline__note{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline--horizontal{align-items:flex-start;flex-direction:row}.timeline--horizontal .timeline__item{align-items:center;flex-direction:column}.timeline--horizontal .timeline__point-wrap{flex-direction:row}.timeline--horizontal .timeline__line{height:var(--border-width-strong);width:var(--component-gap-xl)}.timeline--compact .timeline__item{gap:var(--flow-gap-xs)}.timeline--compact .timeline__note{font-size:var(--text-xxs)}.timeline--compact .timeline__point{height:var(--flow-timeline-point-xs);width:var(--flow-timeline-point-xs)}.timeline--compact .timeline__icon{height:var(--flow-icon-size-sm);width:var(--flow-icon-size-sm)}.timeline--rich{display:flex;flex-direction:column;gap:var(--flow-gap-lg)}.timeline--rich .timeline__item{align-items:stretch;background-color:var(--flow-zebra-bg-alt);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-sm);display:flex;gap:var(--flow-gap-md);padding:var(--flow-inset-sm)}.timeline--rich .timeline__item:nth-child(2n){background-color:var(--flow-zebra-bg)}.timeline--rich .timeline__item:nth-child(odd){background-color:var(--flow-zebra-bg-alt)}.timeline--rich .timeline__point-wrap{align-items:center;display:flex;flex-direction:column;flex-shrink:0;gap:var(--flow-gap-xs)}.timeline--rich .timeline__point{height:var(--flow-timeline-point-md);width:var(--flow-timeline-point-md)}.timeline--rich .timeline__line{background-color:var(--color-border-subtle);border-radius:var(--radius-sm);flex:1;width:var(--border-width-strong)}.timeline--rich .timeline__item:last-child .timeline__line{display:none}.timeline-events{display:flex;flex-direction:column;gap:var(--space-4)}.timeline-events .timeline__item{align-items:flex-start;gap:var(--space-4)}.timeline__timestamp{color:var(--color-text-soft);font-size:var(--text-xxs)}.timeline__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.timeline__body{color:var(--color-text);font-size:var(--text-sm);margin-top:var(--flow-gap-xs)}.timeline--audit .timeline__label{font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase}.timeline--audit .timeline__body{font-size:var(--text-xs)}.journey{display:flex;flex-wrap:wrap;gap:var(--flow-gap-lg)}.journey--compact{gap:var(--flow-gap-md)}.journey__stage{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex:1 1 var(--flow-stage-min-width);flex-direction:column;gap:var(--flow-gap-sm);min-width:var(--flow-stage-min-width);padding:var(--flow-inset-md)}.journey__stage--clickable{cursor:pointer}.journey__stage--clickable:hover{border-color:var(--color-accent)}.journey__stage--clickable:active{opacity:.96;transform:translateY(1px)}.journey__stage--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.journey__stage--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.journey__stage--complete,.journey__stage--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.journey__stage--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.journey__stage--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.journey__stage--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent);color:var(--info-soft-on,var(--color-on-info))}.journey__icon{color:var(--color-icon-muted);height:var(--flow-icon-size-lg);width:var(--flow-icon-size-lg)}.journey__marker{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase}.journey__title{font-size:var(--text-md);font-weight:600}.journey__details{color:var(--color-text-muted);font-size:var(--text-sm)}.process-flow{align-items:center;display:flex;flex-wrap:wrap;gap:var(--flow-gap-md)}.process-flow--compact{gap:var(--flow-gap-sm)}.process-flow__node{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-xs);min-width:var(--flow-node-min-width);padding:var(--flow-inset-sm) var(--flow-inset-md);text-align:center}.process-flow__node--clickable{cursor:pointer}.process-flow__node--clickable:hover{border-color:var(--color-accent)}.process-flow__node--clickable:active{opacity:.96;transform:translateY(1px)}.process-flow__node--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.process-flow__node--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent)}.process-flow__node--complete,.process-flow__node--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success)}.process-flow__node--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger)}.process-flow__node--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning)}.process-flow__node--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent)}.process-flow__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);margin-bottom:0;width:var(--flow-icon-size-md)}.process-flow__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);width:var(--space-6)}.process-flow__arrow--error{background-color:var(--color-danger)}.process-flow__arrow--warning{background-color:var(--color-warning)}.process-flow--vertical{align-items:flex-start;flex-direction:column}.process-flow--vertical .process-flow__arrow{height:var(--space-6);margin-left:calc(var(--flow-node-min-width)/2 - var(--border-width)/2);width:var(--border-width)}.state-flow{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--flow-gap-sm)}.state-flow__item{background-color:var(--color-surface-subtle);border:var(--border-width) solid var(--color-border-subtle);border-radius:999px;color:var(--color-text-muted);font-size:var(--text-xs);padding:var(--flow-inset-xs) var(--flow-inset-sm)}.state-flow__item--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.state-flow__item--complete{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.state-flow__item--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.state-flow__item--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.state-flow__item--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent);color:var(--info-soft-on,var(--color-on-info))}.form-flow{gap:var(--flow-gap-lg);justify-content:center}.form-flow,.form-flow__step{display:flex;flex-direction:column}.form-flow__step{gap:var(--flow-gap-md)}.form-flow__step--error{background-color:var(--color-danger-soft);border-left:var(--border-width-strong) solid var(--color-danger);padding-left:var(--flow-inset-sm)}.form-flow__step--warning{background-color:var(--color-warning-soft);border-left:var(--border-width-strong) solid var(--color-warning);padding-left:var(--flow-inset-sm)}.form-flow__step--success,.form-flow__step--valid{background-color:var(--color-success-soft);border-left:var(--border-width-strong) solid var(--color-success);padding-left:var(--flow-inset-sm)}.form-flow__actions{display:flex;gap:var(--flow-gap-md);justify-content:space-between}.form-flow__actions-right{display:inline-flex;gap:var(--flow-gap-md);margin-left:auto}.flow-branch{grid-gap:var(--flow-gap-lg);display:grid;gap:var(--flow-gap-lg);grid-template-columns:repeat(auto-fit,minmax(var(--flow-grid-min-md),1fr))}.flow-branch__icon{color:var(--color-icon-muted);flex-shrink:0;height:var(--flow-icon-size-md);width:var(--flow-icon-size-md)}.flow-branch__title{color:var(--color-text);font-size:var(--text-md);font-weight:600}.flow-branch__details{color:var(--color-text-muted);font-size:var(--text-sm);line-height:var(--line-height-normal)}.flow-branch--compact{gap:var(--flow-gap-md)}.flow-branch--compact .flow-branch__title{font-size:var(--text-sm)}.flow-branch--compact .flow-branch__details{font-size:var(--text-xs)}.flow-branch__option{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--flow-gap-sm);padding:var(--flow-inset-md)}.flow-branch__option--clickable{cursor:pointer}.flow-branch__option--clickable:hover{border-color:var(--color-accent)}.flow-branch__option--clickable:active{opacity:.96;transform:translateY(1px)}.flow-branch__option--disabled{opacity:var(--flow-component-disabled-opacity);pointer-events:none}.flow-branch__option--active{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--color-accent);color:var(--accent-soft-on,var(--color-on-accent))}.flow-branch__option--complete,.flow-branch__option--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--color-success);color:var(--success-soft-on,var(--color-on-success))}.flow-branch__option--error{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--color-danger);color:var(--danger-soft-on,var(--color-on-danger))}.flow-branch__option--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--color-warning);color:var(--warning-soft-on,var(--color-on-warning))}.flow-branch__option--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--color-accent);color:var(--info-soft-on,var(--color-on-info))}.flow-branch__arrow{background-color:var(--color-border-subtle);flex-shrink:0;height:var(--border-width);margin-left:auto;margin-right:auto;width:var(--space-6)}.flow-branch__arrow--error{background-color:var(--color-danger)}.flow-branch__arrow--warning{background-color:var(--color-warning)}@media (max-width:768px){.steps{flex-wrap:wrap}.process-flow{align-items:flex-start;flex-direction:column}.process-flow__arrow{height:var(--space-4);width:var(--border-width)}.journey{flex-direction:column}.journey__stage{width:100%}}

package/dist/components/forms-advanced.css

@@ -0,0 +1,462 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Advanced Form Controls
+ *
+ *  Responsibilities:
+ *    - Provide advanced form patterns on top of the core form system:
+ *      multi-select with chips + dropdown, freeform tag-input, numeric
+ *      stepper controls, normalised native date/time inputs, and calendar
+ *      scaffolding for JS-driven date pickers
+ *    - Extend form density (A / default / C) to multi-select, tag-input,
+ *      stepper, and calendar day cells
+ *    - Maintain visual + behavioural consistency with core forms, feedback,
+ *      and layout primitives
+ *
+ *  System Notes:
+ *    - Depends on: base.css, typography.css, layout.css, forms.css
+ *    - All open/close behaviour is JS-controlled; CSS provides only structure
+ *      and visual states
+ *    - All colours, radii, borders, and motion are token-driven and align
+ *      with active theme + UFAL/legacy form systems
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. FORM CONTROL VARIABLES
+--------------------------------------------------------- */
+
+[data-vds-form-advanced],
+.vds-form-advanced {
+    --control-height-md: 40px;
+}
+
+/* ---------------------------------------------------------
+   2. MULTI-SELECT (chips + dropdown)
+--------------------------------------------------------- */
+
+.multi-select {
+    position: relative;
+    width: 100%;
+}
+
+.multi-select__control {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    min-height: 2.5rem;
+    min-height: var(--control-height-md, 2.5rem);
+
+    background-color: var(--color-surface);
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+
+    cursor: pointer;
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.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 {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.multi-select--error .multi-select__control {
+    border-color: var(--color-danger);
+}
+
+.multi-select--loading .multi-select__control {
+    background-image: linear-gradient(
+            90deg,
+            var(--color-muted-bg),
+            var(--color-surface),
+            var(--color-muted-bg)
+    );
+    background-size: 200% 100%;
+    animation: input-loading-shimmer 1.5s infinite;
+}
+
+.multi-select__input {
+    border: none;
+    outline: none;
+    font: inherit;
+    color: inherit;
+    min-width: 6ch;
+    background: transparent;
+    padding: 0;
+}
+
+.multi-select__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+
+    background-color: var(--color-surface-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    font-size: var(--text-xs);
+}
+
+.multi-select__chip-remove {
+    cursor: pointer;
+    width: var(--icon-xs);
+    height: var(--icon-xs);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+}
+
+.multi-select__chip-remove:hover {
+    color: var(--color-text);
+}
+
+.multi-select__list {
+    position: absolute;
+    top: calc(100% + var(--space-2));
+    left: 0;
+    width: 100%;
+    z-index: 20;
+
+    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;
+    overflow: hidden;
+}
+
+.multi-select--open .multi-select__list {
+    display: block;
+}
+
+.multi-select__option {
+    padding: var(--space-3) var(--space-4);
+    cursor: pointer;
+    color: var(--color-text);
+    transition: background-color 0.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));
+}
+
+/* ---------------------------------------------------------
+   3. TAG INPUT (chip builder)
+--------------------------------------------------------- */
+
+.tag-input {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+
+    background-color: var(--color-surface);
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    cursor: text;
+
+    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.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 {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.tag-input--error {
+    border-color: var(--color-danger);
+}
+
+.tag-input__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+
+    background-color: var(--color-surface-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    font-size: var(--text-xs);
+}
+
+.tag-input__chip-remove {
+    cursor: pointer;
+    width: var(--icon-xs);
+    height: var(--icon-xs);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+}
+
+.tag-input__chip-remove:hover {
+    color: var(--color-text);
+}
+
+.tag-input__input {
+    border: none;
+    outline: none;
+    font: inherit;
+    color: inherit;
+    min-width: 10ch;
+    background: transparent;
+    padding: 0;
+}
+
+/* ---------------------------------------------------------
+   4. STEPPER CONTROL
+--------------------------------------------------------- */
+
+.stepper {
+    display: inline-flex;
+    width: 100%;
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    overflow: hidden;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.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: 0.6;
+    pointer-events: none;
+}
+
+.stepper--error {
+    border-color: var(--color-danger);
+}
+
+.stepper__button {
+    width: 2.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    border: none;
+    background-color: var(--color-surface);
+    color: var(--color-text-muted);
+    cursor: pointer;
+
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.stepper__button:hover {
+    background-color: var(--color-surface-subtle);
+    color: var(--color-text);
+}
+
+.stepper__button:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);
+}
+
+.stepper__input {
+    flex: 1;
+    border: none;
+    padding: var(--space-3);
+    text-align: center;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+}
+
+.stepper__input:focus {
+    outline: none;
+}
+
+/* ---------------------------------------------------------
+   5. NATIVE DATE/TIME INPUT NORMALIZATION
+--------------------------------------------------------- */
+
+.input[type="date"],
+.input[type="time"],
+.input[type="datetime-local"] {
+    padding-right: var(--space-7);
+}
+
+.input[type="date"]::-webkit-calendar-picker-indicator {
+    color: transparent;
+    background: none;
+    cursor: pointer;
+}
+
+/* ---------------------------------------------------------
+   6. CALENDAR BASE STRUCTURE (JS-driven scaffold)
+--------------------------------------------------------- */
+
+.calendar {
+    width: 100%;
+    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;
+}
+
+.calendar--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.calendar--error {
+    border-color: var(--color-danger);
+}
+
+.calendar__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: var(--border-width) solid var(--color-border-subtle);
+}
+
+.calendar__nav {
+    display: inline-flex;
+    gap: var(--space-2);
+}
+
+.calendar__nav-button {
+    width: 2rem;
+    height: 2rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    color: var(--color-text-muted);
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.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 {
+    padding: var(--space-2);
+    text-align: center;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    color: var(--color-text-soft);
+    transition: background-color 0.15s, color 0.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-start,
+.calendar__day--range-end {
+    background-color: var(--color-accent-soft);
+    color: var(--color-accent-strong);
+}
+
+.calendar__day--disabled {
+    opacity: 0.4;
+    pointer-events: none;
+}
+
+.calendar__popover {
+    position: absolute;
+    z-index: 20;
+    width: -moz-max-content;
+    width: max-content;
+    min-width: 16rem;
+
+    background-color: var(--color-surface);
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+
+    padding: var(--space-3);
+}
+
+/* ---------------------------------------------------------
+   7. DENSITY LAYER OVERRIDES (A and C)
+--------------------------------------------------------- */
+
+.form--a .multi-select__control,
+.form--a .tag-input,
+.form--a .stepper {
+    padding: var(--space-4);
+    font-size: var(--text-md);
+}
+
+.form--c .multi-select__control,
+.form--c .tag-input,
+.form--c .stepper {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+}
+
+.form--a .multi-select__option,
+.form--a .calendar__day {
+    padding: var(--space-4);
+}
+
+.form--c .multi-select__option,
+.form--c .calendar__day {
+    padding: var(--space-1);
+}

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

@@ -0,0 +1 @@
+.vds-form-advanced,[data-vds-form-advanced]{--control-height-md:40px}.multi-select{position:relative;width:100%}.multi-select__control{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);cursor:pointer;display:flex;flex-wrap:wrap;gap:var(--space-2);min-height:2.5rem;min-height:var(--control-height-md,2.5rem);padding:var(--space-2) var(--space-3);transition:border-color .2s,background-color .2s,box-shadow .2s}.multi-select__control:hover{border-color:var(--color-border-strong)}.multi-select__control:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.multi-select--disabled .multi-select__control{cursor:not-allowed;opacity:.6}.multi-select--error .multi-select__control{border-color:var(--color-danger)}.multi-select--loading .multi-select__control{animation:input-loading-shimmer 1.5s infinite;background-image:linear-gradient(90deg,var(--color-muted-bg),var(--color-surface),var(--color-muted-bg));background-size:200% 100%}.multi-select__input{background:transparent;border:none;color:inherit;font:inherit;min-width:6ch;outline:none;padding:0}.multi-select__chip{align-items:center;background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.multi-select__chip-remove{align-items:center;color:var(--color-text-muted);cursor:pointer;display:inline-flex;height:var(--icon-xs);justify-content:center;width:var(--icon-xs)}.multi-select__chip-remove:hover{color:var(--color-text)}.multi-select__list{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:none;left:0;overflow:hidden;position:absolute;top:calc(100% + var(--space-2));width:100%;z-index:20}.multi-select--open .multi-select__list{display:block}.multi-select__option{color:var(--color-text);cursor:pointer;padding:var(--space-3) var(--space-4);transition:background-color .15s}.multi-select__option:hover{background-color:var(--color-surface-subtle)}.multi-select__option--selected{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--accent-soft-border,var(--color-accent));box-shadow:0 0 0 1px var(--accent-soft-shadow);color:var(--accent-soft-on,var(--color-on-accent))}.multi-select__option--selected:hover{background-color:var(--accent-soft-surface-strong,var(--accent-soft-surface))}.tag-input{align-items:center;background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);cursor:text;display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3);transition:border-color .2s,background-color .2s,box-shadow .2s}.tag-input:hover{border-color:var(--color-border-strong)}.tag-input:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.tag-input--disabled{cursor:not-allowed;opacity:.6}.tag-input--error{border-color:var(--color-danger)}.tag-input__chip{align-items:center;background-color:var(--color-surface-subtle);border-radius:var(--radius-sm);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);padding:var(--space-1) var(--space-2)}.tag-input__chip-remove{align-items:center;color:var(--color-text-muted);cursor:pointer;display:inline-flex;height:var(--icon-xs);justify-content:center;width:var(--icon-xs)}.tag-input__chip-remove:hover{color:var(--color-text)}.tag-input__input{background:transparent;border:none;color:inherit;font:inherit;min-width:10ch;outline:none;padding:0}.stepper{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:inline-flex;overflow:hidden;transition:border-color .2s,box-shadow .2s;width:100%}.stepper:hover{border-color:var(--color-border-strong)}.stepper:focus-within{border-color:var(--focus-ring-color);box-shadow:0 0 0 var(--border-width-strong) var(--focus-ring-color)}.stepper--disabled{opacity:.6;pointer-events:none}.stepper--error{border-color:var(--color-danger)}.stepper__button{align-items:center;background-color:var(--color-surface);border:none;color:var(--color-text-muted);cursor:pointer;display:inline-flex;justify-content:center;transition:background-color .2s,color .2s;width:2.5rem}.stepper__button:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.stepper__button:focus-visible{box-shadow:inset 0 0 0 var(--border-width-strong) var(--focus-ring-color);outline:none}.stepper__input{background:transparent;border:none;color:inherit;flex:1;font:inherit;padding:var(--space-3);text-align:center}.stepper__input:focus{outline:none}.input[type=date],.input[type=datetime-local],.input[type=time]{padding-right:var(--space-7)}.input[type=date]::-webkit-calendar-picker-indicator{background:none;color:transparent;cursor:pointer}.calendar{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.calendar--disabled{opacity:.6;pointer-events:none}.calendar--error{border-color:var(--color-danger)}.calendar__header{align-items:center;border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;justify-content:space-between;padding:var(--space-3) var(--space-4)}.calendar__nav{display:inline-flex;gap:var(--space-2)}.calendar__nav-button{align-items:center;border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;display:inline-flex;height:2rem;justify-content:center;transition:background-color .2s,color .2s;width:2rem}.calendar__nav-button:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.calendar__grid{grid-gap:var(--space-1);display:grid;gap:var(--space-1);grid-template-columns:repeat(7,1fr);padding:var(--space-2)}.calendar__day{border-radius:var(--radius-sm);color:var(--color-text-soft);cursor:pointer;padding:var(--space-2);text-align:center;transition:background-color .15s,color .15s}.calendar__day:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.calendar__day--today{color:var(--color-accent);font-weight:600}.calendar__day--selected{background-color:var(--color-accent);color:var(--color-on-accent);font-weight:600}.calendar__day--range-end,.calendar__day--range-start{background-color:var(--color-accent-soft);color:var(--color-accent-strong)}.calendar__day--disabled{opacity:.4;pointer-events:none}.calendar__popover{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:16rem;padding:var(--space-3);position:absolute;width:-moz-max-content;width:max-content;z-index:20}.form--a .multi-select__control,.form--a .stepper,.form--a .tag-input{font-size:var(--text-md);padding:var(--space-4)}.form--c .multi-select__control,.form--c .stepper,.form--c .tag-input{font-size:var(--text-xs);padding:var(--space-1) var(--space-2)}.form--a .calendar__day,.form--a .multi-select__option{padding:var(--space-4)}.form--c .calendar__day,.form--c .multi-select__option{padding:var(--space-1)}