kuinetic 0.2.2 → 0.2.3

package/dist/kuinetic.css

@@ -209,16 +209,19 @@
     --kui-anchored-preview-ease: ease-out;
   }
   [data-kui-fx~=anchored-preview-bottom] {
+    --kui-anchored-preview-place: bottom;
     --kui-anchored-preview-duration: 220ms;
     --kui-anchored-preview-delay: 0ms;
     --kui-anchored-preview-ease: ease-out;
   }
   [data-kui-fx~=anchored-preview-left] {
+    --kui-anchored-preview-place: left;
     --kui-anchored-preview-duration: 220ms;
     --kui-anchored-preview-delay: 0ms;
     --kui-anchored-preview-ease: ease-out;
   }
   [data-kui-fx~=anchored-preview-right] {
+    --kui-anchored-preview-place: right;
     --kui-anchored-preview-duration: 220ms;
     --kui-anchored-preview-delay: 0ms;
     --kui-anchored-preview-ease: ease-out;
@@ -366,6 +369,18 @@
     --kui-spatial-ring-delay: 0ms;
     --kui-spatial-ring-ease: cubic-bezier(0.22, 1, 0.36, 1);
   }
+  [data-kui-fx~=carousel-orbit] {
+    --kui-ring-plane: screen;
+    --kui-facing: camera;
+    --kui-spatial-ring-duration: 620ms;
+    --kui-spatial-ring-delay: 0ms;
+    --kui-spatial-ring-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  [data-kui-fx~=carousel-stack] {
+    --kui-spatial-stack-duration: 620ms;
+    --kui-spatial-stack-delay: 0ms;
+    --kui-spatial-stack-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  }
   [data-kui-fx~=chart-area-fill] {
     --kui-shape-fill-duration: 900ms;
     --kui-shape-fill-delay: 0ms;
@@ -1372,6 +1387,9 @@
   [data-kui-fx~=swipe-x] {
     --kui-axis: x;
   }
+  [data-kui-fx~=swipe-y] {
+    --kui-axis: y;
+  }
   [data-kui-fx~=tab-indicator-slide] {
     --kui-flip-indicator-duration: 300ms;
     --kui-flip-indicator-delay: 0ms;
@@ -2197,64 +2215,124 @@
   [data-kui-fx~=carousel-3d],
   [data-kui-fx~=carousel-3d-high],
   [data-kui-fx~=carousel-3d-low],
-  [data-kui-fx~=carousel-3d-inside] {
+  [data-kui-fx~=carousel-3d-inside],
+  [data-kui-fx~=carousel-orbit] {
     display: grid;
     place-items: center;
     perspective: var(--kui-perspective, 1600px);
     transform-style: preserve-3d;
     --kui-ring-tilt: clamp(-80deg, calc(-1 * var(--kui-tilt, 0deg)), 80deg);
     --kui-ring-drift: calc(var(--kui-step-position, 0) - var(--kui-step, 0));
+    --kui-ring-fit: initial;
   }
   [data-kui-fx~=carousel-3d] [data-kui-step-offset],
   [data-kui-fx~=carousel-3d-high] [data-kui-step-offset],
   [data-kui-fx~=carousel-3d-low] [data-kui-step-offset],
-  [data-kui-fx~=carousel-3d-inside] [data-kui-step-offset] {
+  [data-kui-fx~=carousel-3d-inside] [data-kui-step-offset],
+  [data-kui-fx~=carousel-orbit] [data-kui-step-offset] {
     grid-area: 1 / 1;
     backface-visibility: hidden;
     --kui-ring-spacing: calc(var(--kui-arc, 360deg) / max(1, var(--kui-item-count, 1)));
     --kui-ring-angle: calc((var(--kui-offset, 0) - var(--kui-ring-drift)) * var(--kui-ring-spacing));
-    --kui-ring-radius: var( --kui-radius, calc( (var(--kui-item-width, 260px) + var(--kui-gap, 24px)) / (2 * tan(clamp(0.5deg, var(--kui-ring-spacing) / 2, 60deg))) ) );
+    --kui-ring-wanted: var( --kui-radius, calc( (var(--kui-item-width, 260px) + var(--kui-gap, 24px)) / (2 * tan(clamp(0.5deg, var(--kui-ring-spacing) / 2, 60deg))) ) );
+    --kui-ring-radius: min(var(--kui-ring-wanted), var(--kui-ring-fit, var(--kui-ring-wanted)));
     transform: rotateX(var(--kui-ring-tilt)) rotateY(var(--kui-ring-angle)) translateZ(var(--kui-ring-radius));
     transition: transform var(--kui-spatial-ring-duration, 620ms) var(--kui-spatial-ring-ease, cubic-bezier(0.22, 1, 0.36, 1)) var(--kui-spatial-ring-delay, 0ms);
   }
-  [data-kui-ring-dragging=true] [data-kui-step-offset] {
-    transition: none;
-  }
   [data-kui-ring-face=back] {
     pointer-events: none;
   }
   [data-kui-fx~=carousel-3d-inside] [data-kui-ring-face=back] {
     visibility: hidden;
   }
-  [data-kui-fx~=carousel-3d][data-kui-ring-facing=camera] [data-kui-step-offset],
-  [data-kui-fx~=carousel-3d-high][data-kui-ring-facing=camera] [data-kui-step-offset],
-  [data-kui-fx~=carousel-3d-low][data-kui-ring-facing=camera] [data-kui-step-offset],
-  [data-kui-fx~=carousel-3d-inside][data-kui-ring-facing=camera] [data-kui-step-offset] {
+  [data-kui-fx~=carousel-3d][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset],
+  [data-kui-fx~=carousel-3d-high][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset],
+  [data-kui-fx~=carousel-3d-low][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset],
+  [data-kui-fx~=carousel-3d-inside][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset],
+  [data-kui-fx~=carousel-orbit][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset] {
     transform-style: preserve-3d;
   }
-  [data-kui-fx~=carousel-3d][data-kui-ring-facing=camera] [data-kui-step-offset] > *,
-  [data-kui-fx~=carousel-3d-high][data-kui-ring-facing=camera] [data-kui-step-offset] > *,
-  [data-kui-fx~=carousel-3d-low][data-kui-ring-facing=camera] [data-kui-step-offset] > *,
-  [data-kui-fx~=carousel-3d-inside][data-kui-ring-facing=camera] [data-kui-step-offset] > * {
+  [data-kui-fx~=carousel-3d][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset] > *,
+  [data-kui-fx~=carousel-3d-high][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset] > *,
+  [data-kui-fx~=carousel-3d-low][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset] > *,
+  [data-kui-fx~=carousel-3d-inside][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset] > *,
+  [data-kui-fx~=carousel-orbit][data-kui-ring-facing=camera]:not([data-kui-ring-plane=screen]) [data-kui-step-offset] > * {
     transform: rotateY(calc(-1 * var(--kui-ring-angle))) rotateX(calc(-1 * var(--kui-ring-tilt)));
     transform-style: preserve-3d;
   }
   [data-kui-fx~=carousel-3d-inside] [data-kui-step-offset] {
     transform: rotateX(var(--kui-ring-tilt)) rotateY(var(--kui-ring-angle)) translateZ(calc(-1 * var(--kui-ring-radius)));
   }
+  [data-kui-ring-plane=screen] {
+    container-type: inline-size;
+    aspect-ratio: 1;
+    margin-inline: auto;
+    --kui-orbit-extent: max(var(--kui-item-width, 260px), var(--kui-item-height, 0px));
+    --kui-orbit-radius: var( --kui-radius, calc( (var(--kui-item-width, 260px) + var(--kui-gap, 24px)) / (2 * sin(clamp(0.5deg, var(--kui-arc, 360deg) / max(1, var(--kui-item-count, 1)) / 2, 90deg))) ) );
+    max-inline-size: calc(2 * var(--kui-orbit-radius) + var(--kui-orbit-extent));
+  }
+  [data-kui-ring-plane=screen] [data-kui-step-offset] {
+    --kui-ring-radius: max( 0px, min(var(--kui-orbit-radius), calc(50cqi - var(--kui-orbit-extent) / 2)) );
+    transform: rotate(var(--kui-ring-angle)) translateY(calc(-1 * var(--kui-ring-radius)));
+  }
+  [data-kui-ring-plane=screen][data-kui-ring-facing=camera] [data-kui-step-offset] {
+    transform: rotate(var(--kui-ring-angle)) translateY(calc(-1 * var(--kui-ring-radius))) rotate(calc(-1 * var(--kui-ring-angle)));
+  }
+  [data-kui-fx~=carousel-stack] {
+    display: grid;
+    place-items: center;
+    --kui-ring-drift: calc(var(--kui-step-position, 0) - var(--kui-step, 0));
+    --kui-stack-reach-x: calc(var(--kui-stack-depth, 3) * var(--kui-stack-shift, 48px));
+    --kui-stack-reach-y: calc(var(--kui-stack-depth, 3) * var(--kui-stack-rise, 36px));
+    padding-top: max(0px, var(--kui-stack-reach-y));
+    padding-bottom: max(0px, -1 * var(--kui-stack-reach-y));
+    padding-right: max(0px, var(--kui-stack-reach-x));
+    padding-left: max(0px, -1 * var(--kui-stack-reach-x));
+  }
+  [data-kui-fx~=carousel-stack] [data-kui-step-offset] {
+    grid-area: 1 / 1;
+    --kui-stack-place: calc( mod(var(--kui-offset, 0) + 1, max(1, var(--kui-item-count, 1))) - 1 - var(--kui-ring-drift) );
+    --kui-stack-behind: max(0, var(--kui-stack-place));
+    --kui-stack-gone: max(0, -1 * var(--kui-stack-place));
+    transform: translate(calc(var(--kui-stack-place) * var(--kui-stack-shift, 48px)), calc(-1 * var(--kui-stack-place) * var(--kui-stack-rise, 36px))) scale(max(0.05, 1 - var(--kui-stack-place) * var(--kui-stack-shrink, 0.08)));
+    filter: blur(calc(var(--kui-stack-behind) * var(--kui-stack-blur, 2px)));
+    opacity: clamp(0, min(1 - var(--kui-stack-behind) * var(--kui-stack-fade, 0.2), var(--kui-stack-depth, 3) + 1 - var(--kui-stack-place), 1 - 2 * var(--kui-stack-gone)), 1);
+    z-index: calc(100 - var(--kui-stack-place) * 10);
+    transition-property:
+      transform,
+      opacity,
+      filter,
+      z-index,
+      visibility;
+    transition-duration: var(--kui-spatial-stack-duration, 620ms);
+    transition-timing-function: var(--kui-spatial-stack-ease, cubic-bezier(0.22, 1, 0.36, 1));
+    transition-delay: var(--kui-spatial-stack-delay, 0ms);
+  }
+  [data-kui-fx~=carousel-stack] [data-kui-ring-face=back] {
+    visibility: hidden;
+  }
   [data-kui~=carousel-3d],
   [data-kui~=carousel-3d-high],
   [data-kui~=carousel-3d-low],
-  [data-kui~=carousel-3d-inside] {
+  [data-kui~=carousel-3d-inside],
+  [data-kui~=carousel-orbit],
+  [data-kui~=carousel-stack] {
     display: grid;
     place-items: center;
   }
   [data-kui~=carousel-3d] > *,
   [data-kui~=carousel-3d-high] > *,
   [data-kui~=carousel-3d-low] > *,
-  [data-kui~=carousel-3d-inside] > * {
+  [data-kui~=carousel-3d-inside] > *,
+  [data-kui~=carousel-orbit] > *,
+  [data-kui~=carousel-stack] > * {
     grid-area: 1 / 1;
   }
+  [data-kui-ring-dragging=true] [data-kui-step-offset],
+  [data-kui-ring-spinning=true] [data-kui-step-offset],
+  [data-kui-step-offset][data-kui-ring-wrap=true] {
+    transition: none;
+  }
 }
 
 /* src/css/media.css */
@@ -4130,6 +4208,19 @@
     position: relative;
     --kui-hover-intent-shown: 0;
     --kui-hover-intent-lag: 0ms;
+    --kui-hover-intent-top: auto;
+    --kui-hover-intent-bottom: 100%;
+    --kui-hover-intent-dir: 1;
+    --kui-hover-intent-shift: 0px;
+  }
+  [data-kui-fx][data-kui-hint-tease] {
+    --kui-hover-intent-shown: 1;
+    --kui-hover-intent-lag: 0ms;
+  }
+  [data-kui-fx][data-kui-hint-place=bottom] {
+    --kui-hover-intent-top: 100%;
+    --kui-hover-intent-bottom: auto;
+    --kui-hover-intent-dir: -1;
   }
   [data-kui-fx~=hover-intent]:focus-visible,
   [data-kui-fx~=hover-intent]:has(:focus-visible) {
@@ -4138,11 +4229,19 @@
   }
   [data-kui-hint] {
     position: absolute;
-    bottom: 100%;
+    top: var(--kui-hover-intent-top, auto);
+    bottom: var(--kui-hover-intent-bottom, 100%);
     left: 50%;
-    margin-bottom: var(--kui-hover-intent-gap, 8px);
+    z-index: 1;
+    inline-size: max-content;
+    max-inline-size: min(16rem, 70vw);
+    margin-block: var(--kui-hover-intent-gap, 8px);
+    padding: 0.5em 0.75em;
+    border-radius: var(--kui-hover-intent-radius, 12px);
+    background-color: var(--kui-hover-intent-bg-color, #111111);
+    color: var(--kui-hover-intent-color, #f4f4f0);
     opacity: var(--kui-hover-intent-shown, 0);
-    translate: -50% calc(var(--kui-hover-intent-distance, 4px) * (1 - var(--kui-hover-intent-shown, 0)));
+    translate: calc(-50% + var(--kui-hover-intent-shift, 0px)) calc(var(--kui-hover-intent-distance, 4px) * var(--kui-hover-intent-dir, 1) * (1 - var(--kui-hover-intent-shown, 0)));
     pointer-events: none;
     transition: opacity var(--kui-hover-intent-duration, 160ms) var(--kui-hover-intent-ease, ease-out) var(--kui-hover-intent-lag, 0ms), translate var(--kui-hover-intent-duration, 160ms) var(--kui-hover-intent-ease, ease-out) var(--kui-hover-intent-lag, 0ms);
   }
@@ -4303,22 +4402,27 @@
     position: relative;
     --kui-anchored-preview-shown: 0;
     --kui-anchored-preview-lag: 0ms;
+    --kui-anchored-preview-shift: 0px;
   }
-  [data-kui-fx~=anchored-preview] {
+  [data-kui-fx~=anchored-preview],
+  [data-kui-fx][data-kui-preview-place=top] {
     --kui-anchored-preview-inset: auto auto calc(100% + var(--kui-anchored-preview-gap, 10px)) 50%;
-    --kui-anchored-preview-travel: -50% calc(var(--kui-anchored-preview-distance, 10px) * (1 - var(--kui-anchored-preview-shown, 0)));
+    --kui-anchored-preview-travel: calc(-50% + var(--kui-anchored-preview-shift, 0px)) calc(var(--kui-anchored-preview-distance, 10px) * (1 - var(--kui-anchored-preview-shown, 0)));
   }
-  [data-kui-fx~=anchored-preview-bottom] {
+  [data-kui-fx~=anchored-preview-bottom],
+  [data-kui-fx][data-kui-preview-place=bottom] {
     --kui-anchored-preview-inset: calc(100% + var(--kui-anchored-preview-gap, 10px)) auto auto 50%;
-    --kui-anchored-preview-travel: -50% calc(-1 * var(--kui-anchored-preview-distance, 10px) * (1 - var(--kui-anchored-preview-shown, 0)));
+    --kui-anchored-preview-travel: calc(-50% + var(--kui-anchored-preview-shift, 0px)) calc(-1 * var(--kui-anchored-preview-distance, 10px) * (1 - var(--kui-anchored-preview-shown, 0)));
   }
-  [data-kui-fx~=anchored-preview-left] {
+  [data-kui-fx~=anchored-preview-left],
+  [data-kui-fx][data-kui-preview-place=left] {
     --kui-anchored-preview-inset: 50% calc(100% + var(--kui-anchored-preview-gap, 10px)) auto auto;
-    --kui-anchored-preview-travel: calc( var(--kui-anchored-preview-distance, 10px) * (1 - var(--kui-anchored-preview-shown, 0)) ) -50%;
+    --kui-anchored-preview-travel: calc( var(--kui-anchored-preview-distance, 10px) * (1 - var(--kui-anchored-preview-shown, 0)) ) calc(-50% + var(--kui-anchored-preview-shift, 0px));
   }
-  [data-kui-fx~=anchored-preview-right] {
+  [data-kui-fx~=anchored-preview-right],
+  [data-kui-fx][data-kui-preview-place=right] {
     --kui-anchored-preview-inset: 50% auto auto calc(100% + var(--kui-anchored-preview-gap, 10px));
-    --kui-anchored-preview-travel: calc( -1 * var(--kui-anchored-preview-distance, 10px) * (1 - var(--kui-anchored-preview-shown, 0)) ) -50%;
+    --kui-anchored-preview-travel: calc( -1 * var(--kui-anchored-preview-distance, 10px) * (1 - var(--kui-anchored-preview-shown, 0)) ) calc(-50% + var(--kui-anchored-preview-shift, 0px));
   }
   [data-kui-fx~=anchored-preview]:focus-visible,
   [data-kui-fx~=anchored-preview]:has(:focus-visible),
@@ -4331,9 +4435,16 @@
     --kui-anchored-preview-shown: 1;
     --kui-anchored-preview-lag: var(--kui-anchored-preview-delay, 0ms);
   }
+  [data-kui-fx][data-kui-preview-tease] {
+    --kui-anchored-preview-shown: 1;
+    --kui-anchored-preview-lag: 0ms;
+  }
   [data-kui-preview] {
     position: absolute;
     inset: var(--kui-anchored-preview-inset, auto);
+    border-radius: var(--kui-anchored-preview-radius, 0px);
+    background-color: var(--kui-anchored-preview-bg-color, transparent);
+    color: var(--kui-anchored-preview-color, currentcolor);
     translate: var(--kui-anchored-preview-travel, 0 0);
     opacity: var(--kui-anchored-preview-shown, 0);
     scale: calc(var(--kui-anchored-preview-scale, 0.85) + (1 - var(--kui-anchored-preview-scale, 0.85)) * var(--kui-anchored-preview-shown, 0));
@@ -5531,6 +5642,9 @@
     --kui-slideshow-duration: 500ms;
     --kui-slideshow-ease: ease;
   }
+  [data-kui-fx~=compare] {
+    --kui-compare-duration: 3s;
+  }
   [data-kui-fx~=lightbox] {
     --kui-lightbox-media: image;
     --kui-lightbox-duration: 280ms;
@@ -5545,6 +5659,7 @@
   }
   [data-kui-fx~=video-lightbox] {
     --kui-lightbox-media: video;
+    --kui-lightbox-caption: none;
     --kui-lightbox-duration: 280ms;
     --kui-lightbox-ease: cubic-bezier(0.22, 1, 0.36, 1);
   }
@@ -5570,25 +5685,42 @@
     outline-offset: 2px;
   }
   [data-kui-device] {
+    --kui-device-outer-top: var(--kui-device-radius, 18px);
+    --kui-device-outer-bottom: var(--kui-device-outer-top);
+    --kui-device-pad-top: 14px;
+    --kui-device-pad-bottom: 14px;
+    --kui-device-pad-side: 14px;
+    --kui-device-screen-floor: min(var(--kui-device-outer-top), 8px);
     position: relative;
     display: inline-block;
     box-sizing: border-box;
     overflow: hidden;
     border: 1px solid color-mix(in srgb, var(--kui-device-color, #111) 55%, transparent);
-    border-radius: var(--kui-device-radius, 18px);
-    padding: 14px;
+    border-radius: var(--kui-device-outer-top) var(--kui-device-outer-top) var(--kui-device-outer-bottom) var(--kui-device-outer-bottom);
+    padding: var(--kui-device-pad-top) var(--kui-device-pad-side) var(--kui-device-pad-bottom);
     background: var(--kui-device-color, #111);
   }
-  [data-kui-device] > img,
-  [data-kui-device] > video {
+  [data-kui-device] > * {
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: hidden;
+    border-radius: var( --kui-device-screen-radius, max( var(--kui-device-screen-floor), var(--kui-device-outer-top) - min(var(--kui-device-pad-side), var(--kui-device-pad-top)) - 1px ) max( var(--kui-device-screen-floor), var(--kui-device-outer-top) - min(var(--kui-device-pad-side), var(--kui-device-pad-top)) - 1px ) max( var(--kui-device-screen-floor), var(--kui-device-outer-bottom) - min(var(--kui-device-pad-side), var(--kui-device-pad-bottom)) - 1px ) max( var(--kui-device-screen-floor), var(--kui-device-outer-bottom) - min(var(--kui-device-pad-side), var(--kui-device-pad-bottom)) - 1px ) );
+  }
+  [data-kui-device] > :is(img, video, iframe, picture) {
+    display: block;
+    border: 0;
+    object-fit: cover;
+  }
+  [data-kui-device] > picture > img {
     display: block;
     inline-size: 100%;
     block-size: 100%;
     object-fit: cover;
   }
   [data-kui-device=browser] {
-    padding: 30px 14px 14px;
-    border-radius: var(--kui-device-radius, 10px);
+    --kui-device-outer-top: var(--kui-device-radius, 10px);
+    --kui-device-pad-top: 30px;
   }
   [data-kui-device=browser]::before {
     content: "";
@@ -5618,8 +5750,10 @@
     background-repeat: no-repeat;
   }
   [data-kui-device=phone] {
-    padding: 16px 8px;
-    border-radius: var(--kui-device-radius, 36px);
+    --kui-device-outer-top: var(--kui-device-radius, 36px);
+    --kui-device-pad-top: 16px;
+    --kui-device-pad-bottom: 16px;
+    --kui-device-pad-side: 8px;
     aspect-ratio: 9 / 19.5;
     max-inline-size: 20rem;
     margin-inline: auto;
@@ -5637,15 +5771,20 @@
     border-radius: 0 0 12px 12px;
   }
   [data-kui-device=tablet] {
-    padding: 18px;
-    border-radius: var(--kui-device-radius, 22px);
+    --kui-device-outer-top: var(--kui-device-radius, 22px);
+    --kui-device-pad-top: 18px;
+    --kui-device-pad-bottom: 18px;
+    --kui-device-pad-side: 18px;
     aspect-ratio: 3 / 4;
     max-inline-size: 28rem;
     margin-inline: auto;
   }
   [data-kui-device=laptop] {
-    padding: 10px 10px 34px;
-    border-radius: var(--kui-device-radius, 12px) var(--kui-device-radius, 12px) 4px 4px;
+    --kui-device-outer-top: var(--kui-device-radius, 12px);
+    --kui-device-outer-bottom: 4px;
+    --kui-device-pad-top: 10px;
+    --kui-device-pad-bottom: 34px;
+    --kui-device-pad-side: 10px;
     aspect-ratio: 16 / 10;
   }
   [data-kui-device=laptop]::after {
@@ -5757,6 +5896,20 @@
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
+  [data-kui-fx~=compare][data-kui-compare-dividers] > .kui-compare-range {
+    pointer-events: none;
+  }
+  [data-kui-fx~=compare] > .kui-compare-surface {
+    grid-area: 1 / 1;
+    position: relative;
+    z-index: 3;
+    cursor: ew-resize;
+    touch-action: pan-y;
+  }
+  [data-kui-fx~=compare][data-kui-compare-axis=y] > .kui-compare-surface {
+    cursor: ns-resize;
+    touch-action: pan-x;
+  }
   [data-kui-fx~=hotspots] {
     position: relative;
     display: inline-block;
@@ -6095,8 +6248,7 @@
   .kui-lightbox-slot {
     display: contents;
   }
-  .kui-lightbox-gallery,
-  .kui-lightbox-frame {
+  .kui-lightbox-gallery {
     opacity: 0;
     scale: var(--kui-from-scale, 0.965);
     translate: 0 8px;
@@ -6105,23 +6257,37 @@
       scale var(--kui-lightbox-duration, 280ms) var(--kui-lightbox-ease, ease),
       translate var(--kui-lightbox-duration, 280ms) var(--kui-lightbox-ease, ease);
   }
-  .kui-lightbox.is-open .kui-lightbox-gallery,
-  .kui-lightbox.is-open .kui-lightbox-frame {
+  .kui-lightbox.is-open .kui-lightbox-gallery {
     opacity: 1;
     scale: none;
     translate: none;
   }
   .kui-lightbox-gallery {
     display: grid;
-    place-items: center;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, auto);
+    align-content: center;
+    justify-items: center;
     gap: 0.75rem;
+    align-self: stretch;
+    justify-self: stretch;
+    min-block-size: 0;
+  }
+  .kui-lightbox-gallery:has(> figure > img.is-tall) {
+    align-self: safe center;
+  }
+  .kui-lightbox-gallery.is-swipeable {
+    touch-action: pan-y pinch-zoom;
   }
   .kui-lightbox-gallery figure {
     margin: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, auto);
+    justify-items: center;
     gap: 0.75rem;
+    justify-self: stretch;
+    min-block-size: 0;
   }
   .kui-lightbox-gallery img {
     display: block;
@@ -6131,7 +6297,7 @@
   }
   .kui-lightbox-gallery img.is-fit {
     max-inline-size: min(100%, 1400px);
-    max-block-size: 86dvh;
+    max-block-size: 100%;
     inline-size: auto;
     block-size: auto;
   }
@@ -6187,36 +6353,42 @@
     outline-offset: 2px;
   }
   .kui-lightbox-frame {
-    inline-size: min(92vw, 1100px);
-    aspect-ratio: 16 / 9;
-    border-radius: 12px;
-    overflow: clip;
-    box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
-    background: #000;
+    --kui-frame-w: 16;
+    --kui-frame-h: 9;
+    container-type: size;
+    display: grid;
+    place-items: center;
+    inline-size: min(100%, 1100px);
+    aspect-ratio: var(--kui-frame-w) / var(--kui-frame-h);
+    max-block-size: 100%;
   }
   .kui-lightbox-frame--tall {
-    inline-size: min(80vw, 420px);
-    aspect-ratio: 9 / 16;
+    --kui-frame-w: 9;
+    --kui-frame-h: 16;
+    inline-size: min(100%, 420px);
   }
   .kui-lightbox-frame--square {
-    inline-size: min(80vw, 720px);
-    aspect-ratio: 1;
+    --kui-frame-w: 1;
+    --kui-frame-h: 1;
+    inline-size: min(100%, 720px);
   }
   .kui-lightbox-frame iframe,
   .kui-lightbox-frame video {
     display: block;
-    inline-size: 100%;
-    block-size: 100%;
+    inline-size: min(100cqi, 100cqb * var(--kui-frame-w) / var(--kui-frame-h));
+    aspect-ratio: var(--kui-frame-w) / var(--kui-frame-h);
+    block-size: auto;
     border: 0;
+    border-radius: 12px;
+    box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
+    background: #000;
   }
   @media (prefers-reduced-motion: reduce) {
     dialog.kui-lightbox,
-    .kui-lightbox-gallery,
-    .kui-lightbox-frame {
+    .kui-lightbox-gallery {
       transition-duration: 1ms;
     }
-    .kui-lightbox-gallery,
-    .kui-lightbox-frame {
+    .kui-lightbox-gallery {
       scale: none;
       translate: none;
     }
@@ -6242,7 +6414,8 @@
       color: CanvasText;
       background: Canvas;
     }
-    .kui-lightbox-frame {
+    .kui-lightbox-frame iframe,
+    .kui-lightbox-frame video {
       border: 1px solid CanvasText;
     }
     [data-kui-fx~=scroll-story] > :first-child,