@24vlh/vds 0.1.2 → 0.1.3

package/dist/components/forms-advanced.css

@@ -1,462 +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);
-}
+/************************************************************
+ * 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);
+}