uikit 3.22.3-dev.73b0d86b9 → 3.22.4-dev.992e11cd5

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.22.3-dev.73b0d86b9",
+  "version": "3.22.4-dev.992e11cd5",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/dropnav.js

@@ -15,6 +15,7 @@ import {
     noop,
     observeResize,
     offset,
+    once,
     parents,
     query,
     remove,
@@ -156,9 +157,21 @@ export default {
                 const { current, keyCode } = e;
                 const active = this.getActive();
 
-                if (keyCode === keyMap.DOWN && active?.targetEl === current) {
-                    e.preventDefault();
-                    $(selFocusable, active.$el)?.focus();
+                if (keyCode === keyMap.DOWN) {
+                    if (active?.targetEl === current) {
+                        e.preventDefault();
+                        $(selFocusable, active.$el)?.focus();
+                    } else {
+                        const dropdown = this.dropdowns.find(
+                            (el) => this.getDropdown(el)?.targetEl === current,
+                        );
+
+                        if (dropdown) {
+                            e.preventDefault();
+                            current.click();
+                            once(dropdown, 'show', (e) => $(selFocusable, e.target)?.focus());
+                        }
+                    }
                 }
 
                 handleNavItemNavigation(e, this.items, active);
@@ -204,6 +217,7 @@ export default {
                             findIndex(elements, (el) => matches(el, ':focus')),
                         )
                     ].focus();
+                    return;
                 }
 
                 handleNavItemNavigation(e, this.items, active);

package/src/less/components/dropdown.less

@@ -26,6 +26,7 @@
 
 @dropdown-large-padding:                        40px;
 
+@dropdown-dropbar-margin:                       @dropdown-margin;
 @dropdown-dropbar-padding-top:                  @dropdown-padding;
 @dropdown-dropbar-padding-bottom:               @dropdown-padding;
 @dropdown-dropbar-viewport-margin:              15px;
@@ -33,7 +34,7 @@
 @dropdown-dropbar-viewport-margin-m:            @global-medium-gutter;
 
 @dropdown-dropbar-large-padding-top:            @dropdown-large-padding;
-@dropdown-dropbar-large-padding-bottom:         @dropdown-dropbar-large-padding-top;
+@dropdown-dropbar-large-padding-bottom:         @dropdown-large-padding;
 
 @dropdown-nav-item-color:                       @global-muted-color;
 @dropdown-nav-item-hover-color:                 @global-color;
@@ -102,6 +103,7 @@
  */
 
 .uk-dropdown-dropbar {
+    --uk-position-offset: @dropdown-dropbar-margin;
     /* 1 */
     width: auto;
     /* 2 */

package/src/scss/components/dropdown.scss

@@ -80,6 +80,7 @@
  */
 
 .uk-dropdown-dropbar {
+    --uk-position-offset: #{$dropdown-dropbar-margin};
     /* 1 */
     width: auto;
     /* 2 */

package/src/scss/variables-theme.scss

@@ -392,13 +392,14 @@ $dropdown-color: $global-color !default;
 $dropdown-color-mode: dark !default;
 $dropdown-focus-outline: $base-focus-outline !default;
 $dropdown-large-padding: 40px !default;
+$dropdown-dropbar-margin: $dropdown-margin !default;
 $dropdown-dropbar-padding-top: 5px !default;
 $dropdown-dropbar-padding-bottom: $dropdown-padding !default;
 $dropdown-dropbar-viewport-margin: 15px !default;
 $dropdown-dropbar-viewport-margin-s: $global-gutter !default;
 $dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
 $dropdown-dropbar-large-padding-top: $dropdown-large-padding !default;
-$dropdown-dropbar-large-padding-bottom: $dropdown-dropbar-large-padding-top !default;
+$dropdown-dropbar-large-padding-bottom: $dropdown-large-padding !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
 $dropdown-nav-subtitle-font-size: 12px !default;

package/src/scss/variables.scss

@@ -391,13 +391,14 @@ $dropdown-color: $global-color !default;
 $dropdown-color-mode: dark !default;
 $dropdown-focus-outline: $base-focus-outline !default;
 $dropdown-large-padding: 40px !default;
+$dropdown-dropbar-margin: $dropdown-margin !default;
 $dropdown-dropbar-padding-top: $dropdown-padding !default;
 $dropdown-dropbar-padding-bottom: $dropdown-padding !default;
 $dropdown-dropbar-viewport-margin: 15px !default;
 $dropdown-dropbar-viewport-margin-s: $global-gutter !default;
 $dropdown-dropbar-viewport-margin-m: $global-medium-gutter !default;
 $dropdown-dropbar-large-padding-top: $dropdown-large-padding !default;
-$dropdown-dropbar-large-padding-bottom: $dropdown-dropbar-large-padding-top !default;
+$dropdown-dropbar-large-padding-bottom: $dropdown-large-padding !default;
 $dropdown-nav-item-color: $global-muted-color !default;
 $dropdown-nav-item-hover-color: $global-color !default;
 $dropdown-nav-subtitle-font-size: $global-small-font-size !default;

package/tests/countdown.html

@@ -106,7 +106,7 @@
                             <td><code>reload</code></td>
                             <td>Boolean</td>
                             <td>false</td>
-                            <td>Reload page after countdown reaches end. The page is only reloaded, if the timer has previously been started once.</td>
+                            <td>Reload page after countdown expires. Initially expired countdowns won't reload the page.</td>
                         </tr>
                     </tbody>
                 </table>

package/tests/sticky.html

@@ -352,7 +352,7 @@
                             <td>The offset the Sticky should be fixed to. The value can be in vh, % and px. It supports basic mathematics operands + and -.</td>
                         </tr>
                         <tr>
-                            <td><code>offset-bottom</code></td>
+                            <td><code>offset-end</code></td>
                             <td>Length</td>
                             <td>0</td>
                             <td>The offset the Sticky should be fixed to if the element overflows the viewport. The value can be in vh, % and px. It supports basic mathematics operands + and -.</td>