uikit 3.25.20-dev.e4f47fc → 3.25.20

package/tests/video.html

@@ -55,12 +55,12 @@
             Lazy videos by removing preload none when entering the viewport
             -->
 
-            <h2>Autoplay</h2>
+            <h2>Inline Video</h2>
 
             <div class="uk-grid uk-child-width-1-3@s">
                 <div>
 
-                    <h3>Native</h3>
+                    <h3>Autoplay</h3>
                     <!--
                     # Native Autoplay
                     Chrome: `Out of view` + `Hidden`: Stops playing.
@@ -69,76 +69,62 @@
                     -->
 
                     <!-- `Out of view`: continous playing. `Hidden`: stops playing -->
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video></video>
-
+                    <video src="https://yootheme.com/assets/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video></video>
                 </div>
                 <div>
 
-                    <h3>YouTube</h3>
-                    <!--
-                    # Native Autoplay `autoplay=1`
-                    All browsers: `Out of view` + `Hidden`: Doesn't stop when hidden.
-                    -->
-
-                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video></iframe>
+                    <h3>Autoplay Inview</h3>
 
+                    <!-- `Out of view` + `Hidden`: stops playing -->
+                    <video src="https://yootheme.com/assets/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview"></video>
                 </div>
                 <div>
 
-                    <h3>Vimeo</h3>
-
-                    <iframe src="https://player.vimeo.com/video/1084537?background=1&amp;keyboard=0&amp;muted=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video></iframe>
+                    <h3>Autoplay Hover</h3>
 
+                    <video src="https://yootheme.com/assets/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: hover"></video>
                 </div>
             </div>
 
-            <h2>Autoplay Inview</h2>
+            <h2>Inline YouTube</h2>
 
             <div class="uk-grid uk-child-width-1-3@s">
                 <div>
 
-                    <h3>Native</h3>
+                    <h3>Autoplay</h3>
+                    <!--
+                    # Native Autoplay `autoplay=1`
+                    All browsers: `Out of view` + `Hidden`: Doesn't stop when hidden.
+                    -->
 
-                    <!-- `Out of view` + `Hidden`: stops playing -->
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview"></video>
+                    <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video></iframe>
 
                 </div>
                 <div>
 
-                    <h3>YouTube</h3>
+                    <h3>Autoplay Inview</h3>
 
                     <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?playsinline=1&amp;rel=0&amp;controls=0&amp;loop=1&amp;mute=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video="autoplay: inview"></iframe>
 
                 </div>
-                <div>
-
-                    <h3>Vimeo</h3>
-
-                    <iframe src="https://player.vimeo.com/video/1084537?background=1&amp;keyboard=0&amp;muted=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video="autoplay: inview"></iframe>
-
-                </div>
             </div>
 
-            <h2>Autoplay Hover</h2>
+            <h2>Inline Vimeo</h2>
 
             <div class="uk-grid uk-child-width-1-3@s">
                 <div>
 
-                    <h3>Autoplay Hover</h3>
-
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: hover"></video>
-                </div>
-                <div>
+                    <h3>Autoplay</h3>
 
-                    <h3>Autoplay Hover Target</h3>
+                    <iframe src="https://player.vimeo.com/video/1084537?background=1&amp;keyboard=0&amp;muted=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video></iframe>
 
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: hover; hover-target: !.uk-grid"></video>
                 </div>
                 <div>
 
-                    <h3>Autoplay Hover Rewind</h3>
+                    <h3>Autoplay Inview</h3>
+
+                    <iframe src="https://player.vimeo.com/video/1084537?background=1&amp;keyboard=0&amp;muted=1" width="1920" height="1080" allowfullscreen uk-responsive class="uk-disabled" uk-video="autoplay: inview"></iframe>
 
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: hover; hover-rewind: 3"></video>
                 </div>
             </div>
 
@@ -149,7 +135,7 @@
 
                     <h3>Video (Poster)</h3>
 
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" poster="images/photo.jpg" width="1920" height="1080" controls preload="none" uk-video="autoplay: false"></video>
+                    <video src="https://yootheme.com/assets/images/media/yootheme-pro.mp4" poster="images/photo.jpg" width="1920" height="1080" controls preload="none" uk-video="autoplay: false"></video>
 
 
                 </div>
@@ -158,7 +144,7 @@
                     <h3>Video</h3>
 
                     <div class="uk-inline uk-light">
-                        <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" controls preload="none" hidden uk-video></video>
+                        <video src="https://yootheme.com/assets/images/media/yootheme-pro.mp4" width="1920" height="1080" controls preload="none" hidden uk-video></video>
                         <a href uk-toggle="target: ! > *">
                             <img src="images/photo.jpg" width="1800" height="1200" alt="">
                             <span class="uk-position-center uk-icon-overlay" uk-icon="icon: youtube; ratio: 3"></span>
@@ -181,144 +167,6 @@
                 </div>
             </div>
 
-            <h2>Autoplay Parallax</h2>
-
-            <div class="uk-grid uk-child-width-1-2@s">
-                <div>
-                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline muted uk-video="autoplay: parallax; parallax-start: 100%; parallax-end: 100%"></video>
-                </div>
-            </div>
-
-            <h2>Autoplay Inview Margin (-40 0)</h2>
-
-            <div class="uk-grid uk-child-width-1-3@s">
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675550/8675550-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675542/8675542-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675544/8675544-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675539/8675539-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675545/8675545-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675540/8675540-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675542/8675542-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675588/8675588-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675541/8675541-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675548/8675548-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675586/8675586-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675555/8675555-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-margin: -40% 0px -40% 0px"></video>
-
-                </div>
-            </div>
-
-            <h2>Autoplay Inview Queued (33%)</h2>
-
-            <div class="uk-grid uk-child-width-1-3@s">
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675550/8675550-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675542/8675542-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675544/8675544-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675539/8675539-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675545/8675545-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675540/8675540-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675542/8675542-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675588/8675588-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675541/8675541-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675548/8675548-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675586/8675586-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-                <div>
-
-                    <video src="https://videos.pexels.com/video-files/8675555/8675555-hd_1920_1080_30fps.mp4" width="1920" height="1080" playsinline loop muted uk-video="autoplay: inview; inview-queued: 0.3"></video>
-
-                </div>
-            </div>
-
             <h2>JavaScript Options</h2>
 
             <table class="uk-table uk-table-striped">
@@ -335,67 +183,19 @@
                         <td><code>autoplay</code></td>
                         <td>Boolean, String</td>
                         <td>true</td>
-                        <td>Disable or enable autoplay (`false`, `true`). Videos will stop when hidden and continue playing when leaving the viewport. Use `inview` to also stop the video when leaving the viewport. Use `hover` to play the video only on hover. Use `parallax` to connect video playback to scrolling. Note: `hover` and `parallax` do not work with iframes.</td>
+                        <td>Disable or enable autoplay (`false`, `true`). Videos will stop when hidden and continue playing when leaving the viewport. Use `inview` to also stop the video when leaving the viewport. Use `hover` to play the video only on hover. Note: Hover does not work with iframes.</td>
                     </tr>
                     <tr>
                         <td><code>restart</code></td>
                         <td>Boolean</td>
                         <td>false</td>
-                        <td>Seeks the video back to the beginning whenever autoplay pauses it.</td>
+                        <td>Video will seek to the beginning whenever video element's autoplay option pauses the video.</td>
                     </tr>
                     <tr>
                         <td><code>hover-target</code></td>
                         <td>CSS Selector</td>
                         <td>self</td>
-                        <td>Element used as the hover trigger when `autoplay` is set to `hover`.</td>
-                    </tr>
-                    <tr>
-                        <td><code>hover-rewind</code></td>
-                        <td>Number</td>
-                        <td>0</td>
-                        <td>The rate at which the video is being rewound once the element is no longer hovered, when autoplay option is set to `hover`. The rewind speed accelerates after 5 seconds of playback.</td>
-                    </tr>
-                    <tr>
-                        <td><code>inview-margin</code></td>
-                        <td>String</td>
-                        <td>0px</td>
-                        <td>Margin added to the viewport when determining whether the element is in view.</td>
-                    </tr>
-                    <tr>
-                        <td><code>inview-queued</code></td>
-                        <td>Number</td>
-                        <td>0</td>
-                        <td>Limits the number of simultaneously playing videos when multiple videos are in view. The value is a ratio (0–1) of videos that may play at once relative to all queued in-view videos.</td>
-                    </tr>
-                    <tr>
-                        <td><code>parallax-target</code></td>
-                        <td>CSS selector</td>
-                        <td>false</td>
-                        <td>Element dimension reference for the parallax duration. Defaults to the video element.</td>
-                    </tr>
-                    <tr>
-                        <td><code>parallax-start</code></td>
-                        <td>Length</td>
-                        <td>0</td>
-                        <td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's top border and viewport's bottom border intersect.</td>
-                    </tr>
-                    <tr>
-                        <td><code>parallax-end</code></td>
-                        <td>Length</td>
-                        <td>0</td>
-                        <td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the target's bottom border and the viewport's top border intersect.</td>
-                    </tr>
-                    <tr>
-                        <td><code>parallax-easing</code></td>
-                        <td>Number</td>
-                        <td>0</td>
-                        <td>Animation easing during scrolling.</td>
-                    </tr>
-                    <tr>
-                        <td><code>reduced-motion-time</code></td>
-                        <td>Number</td>
-                        <td>0</td>
-                        <td>The time in seconds to seek to when autoplay is prevented by the `prefers-reduced-motion` media query. The video is paused at this position to display a still frame.</td>
+                        <td>The element that functions as hover toggle when autoplay option is set to `hover`.</td>
                     </tr>
                 </tbody>
             </table>

package/tests/visibility.html

@@ -16,7 +16,7 @@
 
             <h2>Hidden</h2>
 
-            <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center">
+            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
                 <div>
                     <div class="uk-panel">
                         <div class="uk-alert uk-margin-remove uk-alert-success">✔ Small<br>(Phone Landscape)</div>
@@ -45,7 +45,7 @@
 
             <h2>Visible</h2>
 
-            <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center">
+            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
                 <div>
                     <div class="uk-panel">
                         <div class="uk-alert uk-margin-remove">Small<br>(Phone Landscape)</div>
@@ -74,7 +74,7 @@
 
             <h2>Toggle (Hover + Focus)</h2>
 
-            <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center">
+            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
                 <div>
                     <div class="uk-panel uk-visible-toggle" tabindex="0">
                         <div class="uk-alert uk-margin-remove">Hidden Hover<br><br></div>
@@ -91,7 +91,7 @@
 
             <h2>Touch</h2>
 
-            <div class="uk-grid uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center">
+            <div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-text-center" uk-grid>
                 <div>
                     <div class="uk-panel">
                         <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden Touch</div>

package/tests/width.html

@@ -35,7 +35,7 @@
 
             <h2>Child Widths</h2>
 
-            <div class="uk-grid uk-grid-match uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l uk-child-width-1-6@xl">
+            <div class="uk-grid-match uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l uk-child-width-1-6@xl" uk-grid>
                 <div><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
                 <div><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
                 <div><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
@@ -46,7 +46,7 @@
 
             <h2>Single Widths</h2>
 
-            <div class="uk-grid uk-grid-match">
+            <div class="uk-grid-match" uk-grid>
                 <div class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
                 <div class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
                 <div class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
@@ -57,7 +57,7 @@
 
             <h2>Mixed</h2>
 
-            <div class="uk-grid uk-grid-match uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l uk-child-width-1-6@xl">
+            <div class="uk-grid-match uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l uk-child-width-1-6@xl" uk-grid>
                 <div class="uk-width-expand"><div class="uk-panel">Expand</div></div>
                 <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
                 <div><div class="uk-panel">1-2<br>1-3-S<br>1-4-M<br>1-5-L<br>1-6-XL</div></div>
@@ -67,7 +67,7 @@
 
             <h2>Expand</h2>
 
-            <div class="uk-grid uk-grid-match uk-child-width-expand">
+            <div class="uk-grid-match uk-child-width-expand" uk-grid>
                 <div><div class="uk-panel">Expand with some more text</div></div>
                 <div><div class="uk-panel uk-width-large">Panel Width Large</div></div>
                 <div><div class="uk-panel">Expand</div></div>
@@ -76,14 +76,14 @@
                 <div><div class="uk-panel"><img src="images/photo.jpg" width="1800" height="1200" alt=""></div></div>
             </div>
 
-            <div class="uk-grid uk-grid-collapse uk-grid-match uk-child-width-expand uk-margin">
+            <div class="uk-grid-collapse uk-grid-match uk-child-width-expand uk-margin" uk-grid>
                 <div class="uk-width-1-1"><div class="uk-panel">1-1</div></div>
                 <div><div class="uk-panel">Expand</div></div>
             </div>
 
             <h2>Auto</h2>
 
-            <div class="uk-grid uk-grid-match uk-child-width-auto">
+            <div class="uk-grid-match uk-child-width-auto" uk-grid>
                 <div><div class="uk-panel">Auto with some more text</div></div>
                 <div><div class="uk-panel">Auto</div></div>
                 <div><div class="uk-panel">Auto</div></div>
@@ -92,34 +92,34 @@
                 <div><div class="uk-panel">Auto</div></div>
             </div>
 
-            <div class="uk-grid uk-grid-match uk-child-width-auto uk-flex-between">
+            <div class="uk-grid-match uk-child-width-auto uk-flex-between" uk-grid>
                 <div><div class="uk-panel">Auto with some more text and space between the two items</div></div>
                 <div><div class="uk-panel">Auto with some more text</div></div>
             </div>
 
             <h2>Pixel</h2>
 
-            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
+            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
                 <li class="uk-width-small"><div class="uk-panel">Small</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>
 
-            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
+            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
                 <li class="uk-width-medium@s"><div class="uk-panel">Medium</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>
 
-            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
+            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
                 <li class="uk-width-large@s"><div class="uk-panel">Large</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>
 
-            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
+            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
                 <li class="uk-width-xlarge@m"><div class="uk-panel">X-Large</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>
 
-            <ul class="uk-grid uk-grid-small uk-grid-match uk-child-width-expand">
+            <ul class="uk-grid-small uk-grid-match uk-child-width-expand" uk-grid>
                 <li class="uk-width-2xlarge@l"><div class="uk-panel">2X-Large</div></li>
                 <li><div class="uk-panel">Expand with some more text</div></li>
             </ul>

package/dist/js/components/marquee.js

@@ -1,179 +0,0 @@
-/*! UIkit 3.25.20-dev.e4f47fc | https://www.getuikit.com | (c) 2014 - 2026 YOOtheme | MIT License */
-
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('uikit-util')) :
-    typeof define === 'function' && define.amd ? define('uikitmarquee', ['uikit-util'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.UIkitMarquee = factory(global.UIkit.util));
-})(this, (function (uikitUtil) { 'use strict';
-
-    function callUpdate(instance, e = "update") {
-      if (!instance._connected) {
-        return;
-      }
-      if (!instance._updates.length) {
-        return;
-      }
-      if (!instance._updateCount) {
-        instance._updateCount = 0;
-        requestAnimationFrame(() => instance._updateCount = 0);
-      }
-      if (!instance._queued) {
-        instance._queued = /* @__PURE__ */ new Set();
-        uikitUtil.fastdom.read(() => {
-          if (instance._connected) {
-            runUpdates(instance, instance._queued);
-          }
-          instance._queued = null;
-        });
-      }
-      if (instance._updateCount++ < 20) {
-        instance._queued.add(e.type || e);
-      }
-    }
-    function runUpdates(instance, types) {
-      for (const { read, write, events = [] } of instance._updates) {
-        if (!types.has("update") && !events.some((type) => types.has(type))) {
-          continue;
-        }
-        let result;
-        if (read) {
-          result = read.call(instance, instance._data, types);
-          if (result && uikitUtil.isPlainObject(result)) {
-            uikitUtil.assign(instance._data, result);
-          }
-        }
-        if (write && result !== false) {
-          uikitUtil.fastdom.write(() => {
-            if (instance._connected) {
-              write.call(instance, instance._data, types);
-            }
-          });
-        }
-      }
-    }
-
-    function resize(options) {
-      return observe(uikitUtil.observeResize, options, "resize");
-    }
-    function intersection(options) {
-      return observe(uikitUtil.observeIntersection, options);
-    }
-    function observe(observe2, options, emit) {
-      return {
-        observe: observe2,
-        handler() {
-          callUpdate(this, emit);
-        },
-        ...options
-      };
-    }
-
-    var Class = {
-      connected() {
-        this._cmpCls = uikitUtil.hasClass(this.$el, this.$options.id);
-        uikitUtil.addClass(this.$el, this.$options.id);
-      },
-      disconnected() {
-        if (!this._cmpCls) {
-          uikitUtil.removeClass(this.$el, this.$options.id);
-        }
-      }
-    };
-
-    const hasAnimationApi = uikitUtil.inBrowser && window.Animation;
-    var Component = {
-      mixins: [Class],
-      props: {
-        velocity: Number,
-        start: Number,
-        reverse: Boolean,
-        pause: Boolean,
-        pauseVelocity: Number,
-        fadeSize: null
-      },
-      data: {
-        velocity: 25,
-        start: 0,
-        reverse: false,
-        pause: false,
-        pauseVelocity: 10,
-        selList: ".uk-marquee-items",
-        fadeSize: 0
-      },
-      computed: {
-        list: ({ selList }, $el) => uikitUtil.$(selList, $el),
-        items() {
-          return uikitUtil.children(this.list);
-        }
-      },
-      observe: [
-        resize({
-          target: ({ $el, items }) => [$el, ...items]
-        }),
-        intersection({
-          handler(entries) {
-            for (const entry of entries) {
-              entry.target.inert = !entry.isIntersecting;
-            }
-          },
-          target: ({ items }) => items,
-          args: { intersecting: false },
-          options: ({ $el }) => ({ root: $el })
-        })
-      ],
-      events: {
-        name: [uikitUtil.pointerEnter, uikitUtil.pointerLeave],
-        el: ({ $el }) => $el,
-        self: true,
-        filter: ({ pause }) => hasAnimationApi && pause,
-        handler(e) {
-          for (const el of this.items) {
-            for (const animation of el.getAnimations()) {
-              animation.playbackRate = e.type === uikitUtil.pointerEnter ? this.pauseVelocity / this.velocity : 1;
-            }
-          }
-        }
-      },
-      update: {
-        write() {
-          const prefix = this.$options.id;
-          const items = this.items;
-          const vertical = uikitUtil.hasClass(this.$el, `${prefix}-vertical`);
-          uikitUtil.css(items, "offset", "none");
-          const dir = vertical ? ["top", "bottom"] : ["left", "right"];
-          if (!vertical && uikitUtil.isRtl) {
-            dir.reverse();
-          }
-          const listStart = uikitUtil.dimensions(this.list)[dir[0]];
-          const listEnd = Math[!vertical && uikitUtil.isRtl ? "min" : "max"](
-            ...items.map((el) => uikitUtil.dimensions(el)[dir[1]])
-          );
-          for (const el of items) {
-            const elEnd = uikitUtil.dimensions(el)[dir[1]];
-            const line1 = listEnd - elEnd;
-            const line2 = elEnd - listStart;
-            const path = vertical ? `"M0 0 v${line1}M0 ${-line2} v${line2}"` : `"M0 0 h${line1}M${-line2} 0 h${line2}"`;
-            uikitUtil.css(el, `--${prefix}-path`, path);
-          }
-          uikitUtil.css(this.$el, {
-            [`--${prefix}-duration`]: `${Math.abs(listStart - listEnd) / this.velocity}s`,
-            [`--${prefix}-start`]: this.start,
-            [`--${prefix}-direction`]: this.reverse ? "reverse" : "normal",
-            "--uk-overflow-fade-size": this.fadeSize ? `${uikitUtil.toPx(this.fadeSize, vertical ? "height" : "width", this.$el, true)}px` : ""
-          });
-          uikitUtil.toggleClass(this.$el, `${prefix}-fade`, this.fadeSize);
-          uikitUtil.css(items, "offset", "");
-        },
-        events: ["resize"]
-      }
-    };
-
-    var name = 'marquee';
-
-    if (typeof window !== "undefined" && window.UIkit) {
-      window.UIkit.component(name, Component);
-    }
-
-    return Component;
-
-}));