@vectoriox/iox-ui 5.80.0 → 5.82.0

package/styles/iox-design.css

@@ -121,6 +121,33 @@ iox-gallery.iox-es-media[data-iox-empty] > .iox-gallery {
     box-shadow: var(--iox-focus-ring);
 }
 
+/* ── Card hover — lift and picture zoom ONLY where the whole card is the action (decision D3, Emil 93/143) ──────────
+   A card whose whole surface links (Card v2's "Link the whole card", or a LinkedContainer wearing `card`) lifts and its
+   picture zooms on hover; every other card answers with its border and colour only. The card style's hover map stays
+   as it is on every node — the lift, the shadow growth and the zoom read tokens that a NON-linked card zeroes here.
+   The picture zooms with the CARD's hover (its own hover is under the stretched link): `scale` composes with the
+   picture's own transform, on the look's slow duration; hover devices only (G1). */
+.iox-es-card:not(a):not(:has(.iox-card-link)) {
+    --iox-card-lift: 0px;
+    --iox-card-hover-x: 0px;
+    --iox-card-shadow-hover: var(--iox-card-shadow);
+}
+.iox-es-card {
+    --card-media-zoom: var(--iox-image-hover-scale);
+}
+.iox-es-card .iox-es-media,
+.iox-es-media:not(a *) {
+    --iox-image-hover-scale: 1;
+}
+.iox-es-card .iox-es-media {
+    transition: transform var(--iox-dur-slow) var(--iox-ease-standard), scale var(--iox-dur-slow) var(--iox-ease-standard);
+}
+@media (hover: hover) and (pointer: fine) {
+    :is(a.iox-es-card, .iox-es-card:has(.iox-card-link)):hover .iox-es-media {
+        scale: var(--card-media-zoom);
+    }
+}
+
 /* ── CC1: mobile navigation (complex-components plan §7a, R1; boards 1–2) ─────────────────────── */
 
 /* The DRAWER (board 1, board-8 Q9): a Dialog wearing an element style, placed at the start or end edge, is
@@ -197,17 +224,12 @@ dialog[data-iox-dialog].iox-es:is([data-iox-closing], :not([open]))::backdrop {
 @starting-style {
     dialog[data-iox-dialog].iox-es[open]::backdrop { opacity: 0; }
 }
-/* The drawer's pages follow it in, a beat apart (board 1) — a quarter of dur-fast per link, so they collapse
-   with the tokens under reduced motion. They leave with the sheet, not one by one. */
-dialog[data-iox-dialog].iox-es[open]:not([data-iox-closing]) .iox-role-nav-drawer-links > * {
-    animation: iox-drawer-link-in var(--iox-dur-base) var(--iox-ease-enter) both;
-}
-dialog[data-iox-dialog].iox-es[open] .iox-role-nav-drawer-links > :nth-child(2) { animation-delay: calc(var(--iox-dur-fast) * 0.25); }
-dialog[data-iox-dialog].iox-es[open] .iox-role-nav-drawer-links > :nth-child(3) { animation-delay: calc(var(--iox-dur-fast) * 0.5); }
-dialog[data-iox-dialog].iox-es[open] .iox-role-nav-drawer-links > :nth-child(4) { animation-delay: calc(var(--iox-dur-fast) * 0.75); }
-dialog[data-iox-dialog].iox-es[open] .iox-role-nav-drawer-links > :nth-child(n + 5) { animation-delay: var(--iox-dur-fast); }
-@keyframes iox-drawer-link-in {
-    from { opacity: 0; translate: 0 8px; }
+/* The drawer's pages arrive WITH it (decision D1 — Emil 64/65/110: one entrance per container, no menu-row stagger):
+   the sheet slides in carrying its links, and they leave with it. */
+
+/* The drawer scrolls on its own (M6): a flick at its end never scrolls the page under the scrim. */
+dialog[data-iox-dialog] {
+    overscroll-behavior: contain;
 }
 
 /* A navigation's link lists (board 1): no underline at rest — the current page's link is the one

package/styles/iox-forms.css

@@ -49,6 +49,21 @@
 .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. */
+.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[aria-busy="true"] { cursor: progress; }
+
+/* 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. */
+.iox-form__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
+
 /* Visually hidden, still announced — a label may be hidden, never deleted. */
 .iox-field__label--hidden {
     position: absolute; width: 1px; height: 1px; margin: -1px;
@@ -210,16 +225,21 @@
   border-radius: 50%;
   transform: scale(0);
 }
+/* Hover, on hover devices only (G1 — a tap must not leave a box outlined). */
+@media (hover: hover) and (pointer: fine) {
 .iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):hover {
   border-color: var(--iox-accent-text);
 }
+}
 .iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked {
   background: var(--iox-accent);
   border-color: var(--iox-accent-text);
 }
+@media (hover: hover) and (pointer: fine) {
 .iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked:hover {
   background: var(--iox-accent-hover);
 }
+}
 .iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked::before {
   transform: translateY(-0.08em) rotate(45deg) scale(1);
 }