@vectoriox/iox-ui 5.84.0 → 5.86.0

package/styles/iox-forms.css

@@ -36,8 +36,11 @@
    has to be able to fix and retry. The submit button STAYS (premium N2: it reads "Sent" with its check,
    disabled — the success in place), and so does the row holding it or the second channel (the WhatsApp
    button beside Send is how a visitor reaches you AFTER sending too). */
-.iox-form[data-iox-state="success"] .iox-field,
-.iox-form[data-iox-state="success"] .iox-field-group:not(:has(.iox-submit, .iox-role-form-channel)) { display: none !important; }
+.iox-form[data-iox-state="success"]:not([data-iox-after-send="toast"]) .iox-field,
+.iox-form[data-iox-state="success"]:not([data-iox-after-send="toast"]) .iox-field-group:not(:has(.iox-submit, .iox-role-form-channel)) { display: none !important; }
+/* A form that KEEPS its fields after sending (premium M5 — After sending ▸ "Keep the fields and show a toast") never
+   shows its Success block: a toast says the Sent words and the fields stay, cleared for the next answer. */
+.iox-form[data-iox-after-send="toast"] .iox-form-success { display: none !important; }
 
 /* The Success and Error blocks ENTER (premium N2 — Emil 139/30): opacity and a 4px rise over 200ms, out in 120ms,
    transitions (a fast retry interrupts from the live value, never a restart). `display` is discrete, so the exit
@@ -240,6 +243,25 @@ dialog.iox-cal::backdrop { background: transparent; }
     @starting-style { dialog.iox-cal[open] { opacity: 0; transform: none; } }
     dialog.iox-cal[data-iox-closing] { opacity: 0; transition-duration: 120ms; }
 }
+/* A Date field that wears the design system is timed by the LOOK (premium M5 — the calendar is a popover, and a sheet on
+   a phone): the popover tokens on a laptop, the sheet's on a phone, so a look whose motion is Off opens it with no motion
+   at all (vectoriox/iox-ui#44). Reduced motion keeps the fade (the tokens survive it) and drops the movement. */
+.iox-es-field dialog.iox-cal {
+    transition: opacity var(--iox-popover-dur-in) var(--iox-popover-ease), transform var(--iox-popover-dur-in) var(--iox-popover-ease);
+}
+@starting-style { .iox-es-field dialog.iox-cal[open] { transform: scale(var(--iox-popover-scale)); } }
+.iox-es-field dialog.iox-cal[data-iox-closing] { transform: scale(var(--iox-popover-scale)); transition-duration: var(--iox-popover-dur-out); }
+@media (max-width: 767px) {
+    .iox-es-field dialog.iox-cal { transform: none; transition: transform var(--iox-sheet-dur-in) var(--iox-sheet-ease); }
+    @starting-style { .iox-es-field dialog.iox-cal[open] { transform: translateY(100%); } }
+    .iox-es-field dialog.iox-cal[data-iox-closing] { transform: translateY(100%); transition-duration: var(--iox-sheet-dur-out); transition-timing-function: var(--iox-sheet-ease); }
+    .iox-es-field dialog.iox-cal::backdrop { transition: opacity var(--iox-sheet-dur-in) var(--iox-sheet-ease); }
+    .iox-es-field dialog.iox-cal[data-iox-closing]::backdrop { transition-duration: var(--iox-sheet-dur-out); }
+}
+@media (prefers-reduced-motion: reduce) {
+    .iox-es-field dialog.iox-cal, .iox-es-field dialog.iox-cal[data-iox-closing] { transform: none !important; transition: opacity var(--iox-popover-dur-in) var(--iox-popover-ease); }
+    .iox-es-field dialog.iox-cal[data-iox-closing] { transition-duration: var(--iox-popover-dur-out); }
+}
 /* Opened from the KEYBOARD (Enter / Space on the date button): it simply appears, and Esc or Enter on a day closes it
    at once — keyboard-initiated actions never animate (Emil 2). The pointer gets the motion above. */
 dialog.iox-cal[data-iox-instant],
@@ -549,7 +571,8 @@ dialog.iox-cal[data-iox-instant]::backdrop { transition: none !important; }
 /* ── Premium M3, under the field marker: a Choices field's chips wear the `chip` element style (N1); a Date's words,
    glyph and open box, its calendar the `calendar` style and every day `calendar-day` (N8). These rules ARE the
    contract's fieldClassBaseline entries, verbatim (generated from the element styles by build-spec.mjs; pinned by
-   token-names.spec). Hover is gated to hover devices (G1). ── */
+   token-names.spec). Hover is gated to hover devices (G1). M4: a chip's colour moves on the hover timing (dur-hover,
+   ≤150ms on `ease` — Emil 92); a chip and a day press on dur-press and release on the slower dur-fast (Emil 55/85). ── */
 .iox-es-field .iox-field__chip {
   background-color: transparent;
   color: var(--iox-text);
@@ -561,10 +584,11 @@ dialog.iox-cal[data-iox-instant]::backdrop { transition: none !important; }
   font-family: var(--iox-font-label);
   font-size: var(--iox-badge-size);
   font-weight: var(--iox-weight-label);
-  transition: border-color var(--iox-dur-fast) var(--iox-ease-standard), background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard);
+  transition: border-color var(--iox-dur-hover) var(--iox-ease-hover), background-color var(--iox-dur-hover) var(--iox-ease-hover), color var(--iox-dur-hover) var(--iox-ease-hover), box-shadow var(--iox-dur-hover) var(--iox-ease-hover), opacity var(--iox-dur-hover) var(--iox-ease-hover), transform var(--iox-dur-fast) var(--iox-ease-standard);
 }
 .iox-es-field .iox-field__chip:active:not(:has(:disabled)) {
   transform: scale(var(--iox-press-scale));
+  transition-duration: var(--iox-dur-press);
 }
 @media (hover: hover) and (pointer: fine) {
 .iox-es-field .iox-field__chip:hover:not(:has(:disabled)) {
@@ -639,6 +663,7 @@ dialog.iox-cal[data-iox-instant]::backdrop { transition: none !important; }
 }
 .iox-es-field .iox-cal .iox-cal__day:active:not([aria-disabled='true']) {
   transform: scale(var(--iox-press-scale));
+  transition-duration: var(--iox-dur-press);
 }
 @media (hover: hover) and (pointer: fine) {
 .iox-es-field .iox-cal .iox-cal__day:hover:not([aria-disabled='true']) {