@vectoriox/iox-ui 5.82.2 → 5.83.1

package/styles/iox-forms.css

@@ -33,10 +33,27 @@
 
 /* A submitted form hides its inputs: the success message REPLACES them, rather than sitting under a
    form the visitor might fill in and send a second time. An error leaves them alone — the visitor
-   has to be able to fix and retry. */
+   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,
-.iox-form[data-iox-state="success"] .iox-submit { display: none !important; }
+.iox-form[data-iox-state="success"] .iox-field-group:not(:has(.iox-submit, .iox-role-form-channel)) { 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
+   keeps the block in the flow until it has faded. Reduced motion: opacity only. */
+.iox-form-success,
+.iox-form-error {
+    transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1), translate 120ms cubic-bezier(0.23, 1, 0.32, 1), display 120ms allow-discrete;
+}
+.iox-form:not([data-iox-state="success"]) .iox-form-success,
+.iox-form:not([data-iox-state="error"]) .iox-form-error { opacity: 0; translate: 0 4px; }
+.iox-form[data-iox-state="success"] .iox-form-success,
+.iox-form[data-iox-state="error"] .iox-form-error { transition-duration: 200ms; }
+@starting-style {
+    .iox-form[data-iox-state="success"] .iox-form-success,
+    .iox-form[data-iox-state="error"] .iox-form-error { opacity: 0; translate: 0 4px; }
+}
 
 /* Structural base styles, shared by the string-rendered markup and both component paths. */
 .iox-form           { box-sizing: border-box; }
@@ -49,16 +66,230 @@
 .iox-field__error   { margin: 4px 0 0; }
 .iox-submit         { font: inherit; border: none; cursor: pointer; }
 
-/* The submit button follows its FORM's state (vectoriox/iox-ui#42). Its two labels (forms-core
-   submitButtonLabelsHtml / IoxSubmitButtonComponent) share one grid cell, so the button keeps the longer one's
-   width and never jumps; the form's data-iox-state picks the one that shows — the canvas's Sending state, the
-   component path and the string path alike. `visibility` (not display) keeps the hidden one out of the
-   accessible name. Busy and disabled are written by syncSubmitButtons. */
+/* ── Choices (premium N1): a fieldset whose legend is the label; chips or the look's radio / checkbox rows ── */
+.iox-field__choices { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
+.iox-field__choices > legend { padding: 0; }
+.iox-field__chips   { display: flex; flex-wrap: wrap; gap: 8px; }
+/* A chip IS the label of its native input: tapped anywhere, it toggles; arrow keys move between one-answer chips
+   (a radio group) with no script. 44px tall (Apple's target — M2), never selectable as text (M8), the input inside
+   visually hidden, never removed (it carries the value, the keyboard and the screen reader). Its colours change by
+   TRANSITIONS on the properties that change (Emil 52/137 — never keyframes, never the catch-all `all`). */
+.iox-field__chip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 44px;
+    box-sizing: border-box;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    padding: 6px 14px;
+    border: 1px solid #c9c4bf;
+    border-radius: 999px;
+    color: #1f1d1b;
+    transition: background-color 150ms cubic-bezier(0.23, 1, 0.32, 1), border-color 150ms cubic-bezier(0.23, 1, 0.32, 1), color 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.iox-field__chip:has(:checked) { background-color: #1f1d1b; border-color: #1f1d1b; color: #ffffff; }
+.iox-field__chip:has(:focus-visible) { outline: 2px solid #1f1d1b; outline-offset: 2px; }
+.iox-field__chip:has(:disabled) { opacity: 0.55; cursor: not-allowed; }
+/* Press on pointer-down (Emil 84/85, G7). */
+.iox-field__chip:active:not(:has(:disabled)) { transform: scale(0.97); }
+@media (hover: hover) and (pointer: fine) {
+    .iox-field__chip:hover:not(:has(:checked)) { border-color: #1f1d1b; }
+}
+.iox-field__control.iox-field__control--chip {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+/* ── Date (premium N8): the field is a BUTTON saying the date in words; the browser's date box is never shown (it
+   cannot take the look — its icon was black on a dark flavor — and on an iPhone it is an empty box until tapped). ── */
+/* As wide as a text box beside it (the browser's own ~20 characters), wider for longer words — never the whole row
+   while its neighbours are not; an author's part width still wins (the node's rule out-specifies this one). */
+.iox-field__control--date {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    min-inline-size: 15em;
+    max-inline-size: 100%;
+    text-align: start;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.iox-field__date-value { min-inline-size: 0; overflow-wrap: anywhere; }
+.iox-field__date-value[data-iox-empty] { color: #6b6661; }
+.iox-field__date-icon { flex: none; }
+
+/* ── The calendar (N8). Its sizes are here; its colours are the look's (the contract's `calendar` and `calendar-day`,
+   below the marker) — these literals only dress a Field saved before element styles. Six rows always: the panel never
+   changes size between months, and changing month is instant (no motion on rapid UI — Emil 2/65). ── */
+.iox-cal {
+    box-sizing: border-box;
+    inline-size: 328px;
+    max-inline-size: calc(100vw - 24px);
+    padding: 14px;
+    color: #1f1d1b;
+    background: #ffffff;
+    border: 0;
+    border-radius: 16px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.08);
+    overscroll-behavior: contain;
+}
+.iox-cal:focus { outline: none; }
+.iox-cal[data-iox-cal-design] { margin-block-start: 8px; }
+.iox-cal__grab { display: none; }
+.iox-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 6px; }
+.iox-cal__title { margin: 0; font-size: 1.125em; line-height: 1.2; font-weight: 600; }
+.iox-cal__nav { display: flex; gap: 2px; }
+.iox-cal__nav button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 40px;
+    block-size: 40px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1), opacity 120ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.iox-cal__nav button:disabled { opacity: 0.35; cursor: default; }
+.iox-cal__nav button:not(:disabled):active { transform: scale(0.97); }
+[dir='rtl'] .iox-cal__nav svg, .iox-cal[dir='rtl'] .iox-cal__nav svg { transform: scaleX(-1); }
+.iox-cal__grid { inline-size: 100%; border-collapse: collapse; table-layout: fixed; }
+.iox-cal__weekday { padding: 6px 0; text-align: center; font-size: 0.75em; font-weight: 500; color: #6b6661; }
+.iox-cal__cell { padding: 2px; text-align: center; }
+.iox-cal__day {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    max-inline-size: 42px;
+    block-size: 40px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: background-color 120ms cubic-bezier(0.23, 1, 0.32, 1), color 120ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.iox-cal__day[aria-current="date"] { box-shadow: inset 0 0 0 1px #8a847e; }
+.iox-cal__cell[aria-selected="true"] > .iox-cal__day { background: #1f1d1b; color: #ffffff; box-shadow: none; }
+.iox-cal__day[aria-disabled="true"] { opacity: 0.4; cursor: default; }
+.iox-cal__day:not([aria-disabled="true"]):active { transform: scale(0.97); }
+.iox-cal__day:focus-visible, .iox-cal__nav button:focus-visible { outline: 2px solid #1f1d1b; outline-offset: 2px; }
+@media (hover: hover) and (pointer: fine) {
+    .iox-cal__cell:not([aria-selected="true"]) > .iox-cal__day:not([aria-disabled="true"]):hover,
+    .iox-cal__nav button:not(:disabled):hover { background: rgba(0, 0, 0, 0.06); }
+}
+/* LIVE, on a laptop: a popover under the field (placeFloating writes top / left / transform-origin), growing from it —
+   scale .96 → 1 with the fade over 160ms, out in 120ms (Emil 123/30/47); the backdrop is clear. */
+dialog.iox-cal {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+@starting-style { dialog.iox-cal[open] { opacity: 0; transform: scale(0.96); } }
+dialog.iox-cal[data-iox-closing] { opacity: 0; transform: scale(0.96); transition-duration: 120ms; }
+dialog.iox-cal::backdrop { background: transparent; }
+/* On a phone: a bottom sheet on the drawer curve (Emil 107 — 500ms in, 280ms out), the page dimmed behind it, the
+   home indicator's safe area kept (M7), 44px targets (M2). */
+@media (max-width: 767px) {
+    dialog.iox-cal {
+        inset: auto 0 0 0;
+        inline-size: 100%;
+        max-inline-size: none;
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
+        padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
+        transform: none;
+        transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1);
+    }
+    @starting-style { dialog.iox-cal[open] { opacity: 1; transform: translateY(100%); } }
+    dialog.iox-cal[data-iox-closing] { opacity: 1; transform: translateY(100%); transition-duration: 280ms; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
+    dialog.iox-cal::backdrop { background: rgba(0, 0, 0, 0.45); transition: opacity 500ms cubic-bezier(0.32, 0.72, 0, 1); }
+    @starting-style { dialog.iox-cal[open]::backdrop { opacity: 0; } }
+    dialog.iox-cal[data-iox-closing]::backdrop { opacity: 0; transition-duration: 280ms; }
+    .iox-cal__grab { display: block; inline-size: 36px; block-size: 4px; border-radius: 999px; background: #c9c4bf; margin: 0 auto 12px; }
+    .iox-cal__day { max-inline-size: 48px; block-size: 44px; }
+    .iox-cal__nav button { inline-size: 44px; block-size: 44px; }
+}
+/* Reduced motion: it fades — gentler, not zero (Emil 192); nothing scales or slides. */
+@media (prefers-reduced-motion: reduce) {
+    dialog.iox-cal, dialog.iox-cal[data-iox-closing] { transform: none !important; transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1); }
+    @starting-style { dialog.iox-cal[open] { opacity: 0; transform: none; } }
+    dialog.iox-cal[data-iox-closing] { opacity: 0; transition-duration: 120ms; }
+}
+/* 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],
+dialog.iox-cal[data-iox-instant]::backdrop { transition: none !important; }
+
+/* The submit button follows its FORM's state (vectoriox/iox-ui#42, premium N2). Its three labels (forms-core
+   submitButtonLabelsHtml / IoxSubmitButtonComponent) share one grid cell, so the button keeps the longest one's width
+   and never jumps; the form's data-iox-state picks the one that shows — the canvas's states, the component path and
+   the string path alike. The swap is an in-place CROSSFADE masked by a 2px blur (Emil 87/139): the label that comes
+   in takes 160ms, the one that leaves 120ms (exits faster — Emil 30), both ease-out (Emil 18). Transitions, not
+   keyframes: a quick second submit turns from the live value (Emil 52). `visibility` follows so a hidden label leaves
+   the accessible name. Busy and disabled are written by syncSubmitButtons. */
 .iox-submit__labels      { display: inline-grid; }
 .iox-submit__labels > *  { grid-area: 1 / 1; }
-.iox-form:not([data-iox-state="submitting"]) .iox-submit__busy,
-.iox-form[data-iox-state="submitting"] .iox-submit__idle { visibility: hidden; }
+.iox-submit__labels > * {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4em;
+    transition: opacity 120ms cubic-bezier(0.23, 1, 0.32, 1), filter 120ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 120ms;
+}
+.iox-submit__busy,
+.iox-submit__sent,
+.iox-form[data-iox-state="submitting"] .iox-submit__idle,
+.iox-form[data-iox-state="success"] .iox-submit__idle { visibility: hidden; opacity: 0; filter: blur(2px); }
+.iox-form[data-iox-state="submitting"] .iox-submit__busy,
+.iox-form[data-iox-state="success"] .iox-submit__sent {
+    visibility: visible;
+    opacity: 1;
+    filter: none;
+    transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), filter 160ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
+}
 .iox-submit[aria-busy="true"] { cursor: progress; }
+/* Sent is final: the button stays as the confirmation, and no longer says it can be pressed. */
+.iox-form[data-iox-state="success"] .iox-submit { cursor: default; }
+/* Sent draws its check ONCE (the rare-tier beat — Emil 135/136: stroke-dashoffset over 400ms on the check-draw
+   curve), a beat after the label arrives. Leaving Sent resets it at once, so the next success draws it again. */
+.iox-submit__check { flex: none; }
+.iox-submit__check path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0s; }
+.iox-form[data-iox-state="success"] .iox-submit__check path {
+    stroke-dashoffset: 0;
+    transition: stroke-dashoffset 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 80ms;
+}
+/* Reduced motion: gentler, not zero (Emil 192) — the labels still cross by opacity, without the blur; the check is
+   simply there; the blocks fade without rising. */
+@media (prefers-reduced-motion: reduce) {
+    .iox-submit__labels > * { filter: none !important; }
+    .iox-submit__check path { stroke-dashoffset: 0; transition: none !important; }
+    .iox-form-success, .iox-form-error { translate: none !important; }
+}
 
 /* The honeypot and the failure announcer (forms-core `formChromeHtml`, IoxFormComponent's template): off-screen
    rather than display:none — some bots skip hidden inputs, and a live region must stay in the tree. */
@@ -314,3 +545,120 @@
 .iox-es-field .iox-field__control--switch:checked {
   background: var(--iox-accent-text);
 }
+
+/* ── 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). ── */
+.iox-es-field .iox-field__chip {
+  background-color: transparent;
+  color: var(--iox-text);
+  border-style: solid;
+  border-width: var(--iox-border-width);
+  border-color: var(--iox-chip-border);
+  border-radius: var(--iox-badge-radius);
+  padding: var(--iox-badge-pad);
+  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);
+}
+.iox-es-field .iox-field__chip:active:not(:has(:disabled)) {
+  transform: scale(var(--iox-press-scale));
+}
+@media (hover: hover) and (pointer: fine) {
+.iox-es-field .iox-field__chip:hover:not(:has(:disabled)) {
+  border-color: var(--iox-text);
+}
+}
+.iox-es-field .iox-field__chip:has(:checked) {
+  background-color: var(--iox-accent-text);
+  color: var(--iox-bg);
+  border-color: var(--iox-accent-text);
+}
+.iox-es-field .iox-field__chip:has(:focus-visible) {
+  box-shadow: var(--iox-focus-ring);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.iox-es-field .iox-field__chip:has(:disabled) {
+  opacity: 0.55;
+}
+.iox-es-field .iox-field__date-value[data-iox-empty] {
+  color: var(--iox-text-muted);
+}
+.iox-es-field .iox-field__date-icon {
+  color: var(--iox-text-muted);
+}
+.iox-es-field .iox-field__control--date[aria-expanded='true'] {
+  border-color: var(--iox-accent-text);
+  box-shadow: var(--iox-field-focus);
+}
+.iox-es-field .iox-cal {
+  background-color: var(--iox-surface);
+  color: var(--iox-text);
+  border-radius: var(--iox-dialog-radius);
+  box-shadow: var(--iox-dialog-shadow), 0 0 0 var(--iox-border-width) var(--iox-line);
+  font-family: var(--iox-font-body);
+}
+.iox-es-field .iox-cal .iox-cal__title {
+  font-family: var(--iox-font-display);
+  font-weight: var(--iox-weight-heading);
+  color: var(--iox-text);
+}
+.iox-es-field .iox-cal .iox-cal__weekday {
+  font-family: var(--iox-font-label);
+  font-size: var(--iox-size-label);
+  font-weight: var(--iox-weight-label);
+  color: var(--iox-text-muted);
+}
+.iox-es-field .iox-cal .iox-cal__grab {
+  background: var(--iox-line-strong);
+}
+@media (hover: hover) and (pointer: fine) {
+.iox-es-field .iox-cal .iox-cal__nav button:hover:not(:disabled) {
+  background-color: var(--iox-surface-2);
+}
+}
+.iox-es-field .iox-cal .iox-cal__nav button:focus-visible {
+  box-shadow: var(--iox-focus-ring);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.iox-es-field .iox-cal .iox-cal__day {
+  background-color: transparent;
+  color: var(--iox-text);
+  border-style: solid;
+  border-width: var(--iox-border-width);
+  border-color: transparent;
+  border-radius: var(--iox-radius-pill);
+  font-family: var(--iox-font-body);
+  font-size: var(--iox-size-body);
+  font-variant-numeric: tabular-nums;
+  transition: background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), border-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);
+}
+.iox-es-field .iox-cal .iox-cal__day:active:not([aria-disabled='true']) {
+  transform: scale(var(--iox-press-scale));
+}
+@media (hover: hover) and (pointer: fine) {
+.iox-es-field .iox-cal .iox-cal__day:hover:not([aria-disabled='true']) {
+  background-color: var(--iox-surface-2);
+}
+}
+.iox-es-field .iox-cal .iox-cal__day[aria-current='date'] {
+  border-color: var(--iox-line-strong);
+}
+.iox-es-field .iox-cal .iox-cal__cell[aria-selected='true'] > .iox-cal__day {
+  background-color: var(--iox-accent-text);
+  color: var(--iox-bg);
+  border-color: var(--iox-accent-text);
+}
+.iox-es-field .iox-cal .iox-cal__day[aria-disabled='true'] {
+  color: var(--iox-text-muted);
+  opacity: 0.4;
+}
+.iox-es-field .iox-cal .iox-cal__day:focus-visible {
+  box-shadow: var(--iox-focus-ring);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}