@vectoriox/iox-ui 5.81.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

@@ -225,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);
 }