uikit 3.16.7 → 3.16.8-dev.dc18e16fb

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.16.7",
+  "version": "3.16.8-dev.dc18e16fb",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/mixin/slider-nav.js

@@ -21,10 +21,12 @@ export default {
         previous: 'Previous slide',
         slideX: 'Slide %s',
         slideLabel: '%s of %s',
+        role: 'String',
     },
 
     data: {
         selNav: false,
+        role: 'region',
     },
 
     computed: {
@@ -61,7 +63,7 @@ export default {
 
     connected() {
         attr(this.$el, {
-            role: 'region',
+            role: this.role,
             ariaRoleDescription: 'carousel',
         });
     },

package/src/less/components/base.less

@@ -703,7 +703,6 @@ template { display: none; }
     // Focus
     //
 
-    :focus { outline-color: @inverse-base-focus-outline; }
     :focus-visible { outline-color: @inverse-base-focus-outline; }
 
 }

package/src/less/components/dropbar.less

@@ -24,6 +24,7 @@
 @dropbar-background:                            @global-muted-background;
 @dropbar-color:                                 @global-color;
 @dropbar-color-mode:                            none;
+@dropbar-focus-outline:                         @base-focus-outline;
 
 @dropbar-large-padding-top:                     40px;
 @dropbar-large-padding-bottom:                  @dropbar-large-padding-top;
@@ -82,6 +83,11 @@
 .uk-dropbar:extend(.uk-light all) when (@dropbar-color-mode = light) {}
 .uk-dropbar:extend(.uk-dark all) when (@dropbar-color-mode = dark) {}
 
+.uk-dropbar :focus-visible {
+    outline-color: @dropbar-focus-outline !important;
+}
+
+
 /* Size modifier
  ========================================================================== */
 

package/src/less/components/dropdown.less

@@ -22,6 +22,7 @@
 @dropdown-background:                           @global-muted-background;
 @dropdown-color:                                @global-color;
 @dropdown-color-mode:                           none;
+@dropdown-focus-outline:                        @base-focus-outline;
 
 @dropdown-large-padding:                        40px;
 
@@ -79,6 +80,10 @@
 .uk-dropdown:extend(.uk-light all) when (@dropdown-color-mode = light) {}
 .uk-dropdown:extend(.uk-dark all) when (@dropdown-color-mode = dark) {}
 
+.uk-dropdown :focus-visible {
+    outline-color: @dropdown-focus-outline !important;
+}
+
 
 /* Size modifier
  ========================================================================== */

package/src/less/components/navbar.less

@@ -67,6 +67,7 @@
 @navbar-dropdown-background:                    @global-muted-background;
 @navbar-dropdown-color:                         @global-color;
 @navbar-dropdown-color-mode:                    none;
+@navbar-dropdown-focus-outline:                 @base-focus-outline;
 @navbar-dropdown-grid-gutter-horizontal:        @global-gutter;
 @navbar-dropdown-grid-gutter-vertical:          @navbar-dropdown-grid-gutter-horizontal;
 
@@ -401,6 +402,10 @@
 .uk-navbar-dropdown:extend(.uk-light all) when (@navbar-dropdown-color-mode = light) {}
 .uk-navbar-dropdown:extend(.uk-dark all) when (@navbar-dropdown-color-mode = dark) {}
 
+.uk-navbar-dropdown :focus-visible {
+    outline-color: @navbar-dropdown-focus-outline !important;
+}
+
 /*
  * Grid
  * Adopts `uk-grid`

package/src/scss/components/dropbar.scss

@@ -24,6 +24,7 @@ $dropbar-padding-horizontal-m:                   $global-medium-gutter !default;
 $dropbar-background:                             $global-muted-background !default;
 $dropbar-color:                                  $global-color !default;
 $dropbar-color-mode:                             none !default;
+$dropbar-focus-outline:                          $base-focus-outline !default;
 
 $dropbar-large-padding-top:                      40px !default;
 $dropbar-large-padding-bottom:                   $dropbar-large-padding-top !default;
@@ -82,6 +83,11 @@ $dropbar-large-padding-bottom:                   $dropbar-large-padding-top !def
 @if ( $dropbar-color-mode == light ) { .uk-dropbar { @extend .uk-light !optional;} }
 @if ( $dropbar-color-mode == dark ) { .uk-dropbar { @extend .uk-dark !optional;} }
 
+.uk-dropbar :focus-visible {
+    outline-color: $dropbar-focus-outline !important;
+}
+
+
 /* Size modifier
  ========================================================================== */
 

package/src/scss/components/dropdown.scss

@@ -22,6 +22,7 @@ $dropdown-padding:                               15px !default;
 $dropdown-background:                            $global-muted-background !default;
 $dropdown-color:                                 $global-color !default;
 $dropdown-color-mode:                            none !default;
+$dropdown-focus-outline:                         $base-focus-outline !default;
 
 $dropdown-large-padding:                         40px !default;
 
@@ -79,6 +80,10 @@ $dropdown-nav-sublist-item-hover-color:          $global-color !default;
 @if ( $dropdown-color-mode == light ) { .uk-dropdown { @extend .uk-light !optional;} }
 @if ( $dropdown-color-mode == dark ) { .uk-dropdown { @extend .uk-dark !optional;} }
 
+.uk-dropdown :focus-visible {
+    outline-color: $dropdown-focus-outline !important;
+}
+
 
 /* Size modifier
  ========================================================================== */

package/src/scss/components/navbar.scss

@@ -67,6 +67,7 @@ $navbar-dropdown-padding:                        15px !default;
 $navbar-dropdown-background:                     $global-muted-background !default;
 $navbar-dropdown-color:                          $global-color !default;
 $navbar-dropdown-color-mode:                     none !default;
+$navbar-dropdown-focus-outline:                  $base-focus-outline !default;
 $navbar-dropdown-grid-gutter-horizontal:         $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical:           $navbar-dropdown-grid-gutter-horizontal !default;
 
@@ -401,6 +402,10 @@ $navbar-dropdown-nav-sublist-item-active-color:  $global-emphasis-color !default
 @if ( $navbar-dropdown-color-mode == light ) { .uk-navbar-dropdown { @extend .uk-light !optional;} }
 @if ( $navbar-dropdown-color-mode == dark ) { .uk-navbar-dropdown { @extend .uk-dark !optional;} }
 
+.uk-navbar-dropdown :focus-visible {
+    outline-color: $navbar-dropdown-focus-outline !important;
+}
+
 /*
  * Grid
  * Adopts `uk-grid`

package/src/scss/mixins-theme.scss

@@ -273,7 +273,6 @@
     // Focus
     //
 
-    :focus { outline-color: $inverse-base-focus-outline; }
     :focus-visible { outline-color: $inverse-base-focus-outline; }
 
 }

package/src/scss/mixins.scss

@@ -210,7 +210,6 @@
     // Focus
     //
 
-    :focus { outline-color: $inverse-base-focus-outline; }
     :focus-visible { outline-color: $inverse-base-focus-outline; }
 
 }

package/src/scss/variables-theme.scss

@@ -379,6 +379,7 @@ $dropbar-padding-horizontal-m: $global-medium-gutter !default;
 $dropbar-background: $global-background !default;
 $dropbar-color: $global-color !default;
 $dropbar-color-mode: none !default;
+$dropbar-focus-outline: $base-focus-outline !default;
 $dropbar-large-padding-top: 40px !default;
 $dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
 $dropdown-margin: $global-small-margin !default;
@@ -388,6 +389,7 @@ $dropdown-padding: 25px !default;
 $dropdown-background: $global-background !default;
 $dropdown-color: $global-color !default;
 $dropdown-color-mode: none !default;
+$dropdown-focus-outline: $base-focus-outline !default;
 $dropdown-large-padding: 40px !default;
 $dropdown-dropbar-padding-top: 5px !default;
 $dropdown-dropbar-padding-bottom: $dropdown-padding !default;
@@ -811,6 +813,7 @@ $navbar-dropdown-padding: 25px !default;
 $navbar-dropdown-background: $global-background !default;
 $navbar-dropdown-color: $global-color !default;
 $navbar-dropdown-color-mode: none !default;
+$navbar-dropdown-focus-outline: $base-focus-outline !default;
 $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-large-shift-margin: 0 !default;

package/src/scss/variables.scss

@@ -378,6 +378,7 @@ $dropbar-padding-horizontal-m: $global-medium-gutter !default;
 $dropbar-background: $global-muted-background !default;
 $dropbar-color: $global-color !default;
 $dropbar-color-mode: none !default;
+$dropbar-focus-outline: $base-focus-outline !default;
 $dropbar-large-padding-top: 40px !default;
 $dropbar-large-padding-bottom: $dropbar-large-padding-top !default;
 $dropdown-margin: $global-small-margin !default;
@@ -387,6 +388,7 @@ $dropdown-padding: 15px !default;
 $dropdown-background: $global-muted-background !default;
 $dropdown-color: $global-color !default;
 $dropdown-color-mode: none !default;
+$dropdown-focus-outline: $base-focus-outline !default;
 $dropdown-large-padding: 40px !default;
 $dropdown-dropbar-padding-top: $dropdown-padding !default;
 $dropdown-dropbar-padding-bottom: $dropdown-padding !default;
@@ -809,6 +811,7 @@ $navbar-dropdown-padding: 15px !default;
 $navbar-dropdown-background: $global-muted-background !default;
 $navbar-dropdown-color: $global-color !default;
 $navbar-dropdown-color-mode: none !default;
+$navbar-dropdown-focus-outline: $base-focus-outline !default;
 $navbar-dropdown-grid-gutter-horizontal: $global-gutter !default;
 $navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default;
 $navbar-dropdown-large-shift-margin: 0 !default;

package/tests/js/index.js

@@ -1,5 +1,5 @@
 /* global TESTS */
-import { addClass, css, on, prepend, removeClass, ucfirst } from 'uikit-util';
+import { $$, addClass, css, on, prepend, removeClass, ucfirst } from 'uikit-util';
 
 const tests = TESTS;
 const storage = window.sessionStorage;
@@ -125,8 +125,7 @@ on(window, 'load', () =>
 
                 if ($inverse.value) {
                     removeClass(
-                        document.querySelectorAll('*'),
-                        'uk-navbar-container',
+                        $$('*'),
                         'uk-card-default',
                         'uk-card-muted',
                         'uk-card-primary',
@@ -143,6 +142,8 @@ on(window, 'load', () =>
                         'uk-overlay-primary'
                     );
 
+                    addClass($$('.uk-navbar-container'), 'uk-navbar-transparent');
+
                     css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
                     addClass($body, `uk-${$inverse.value}`);
                 }