uikit 3.15.25-dev.ef4c64c1a → 3.16.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
+## 3.16.0 (February 23, 2023) (Feature Accessibility)
+
+### Added
+
+- Add WAI-ARIA roles, states and properties to interactive JavaScript components
+- Add WAI-ARIA keyboard interaction pattern to interactive JavaScript components
+- Add language internationalization (i18n) for interactive JavaScript components
+- Add `i18n` option to corresponding JavaScript components
+- Add Dropnav component
+- Add parent icon to Drop component
+- Add support for YouTube Shorts URLs in Lightbox component
+- Add Android, Android Robot, Apple and Microsoft icons
+- Add `uikit:init` event triggered on document before components initialize
+- Add `countdownstart`, `countdownstop` and `countdownend` events to Countdown component
+
+### Changed
+
+- IMPORTANT: Remove `.uk-dropdown-close` from Dropdown component. Use `uk-drop-close` instead
+- IMPORTANT: Remove `.uk-dropdown-grid` from Dropdown component. Use `uk-drop-grid` instead
+- IMPORTANT: Remove `.uk-navbar-dropdown-close` from Navbar component. Use `uk-drop-close` instead
+- IMPORTANT: Remove `.uk-navbar-dropdown-grid` from Navbar component. Use `uk-drop-grid` instead
+- IMPORTANT: Remove error message options in Upload component, use `i18n` option
+- IMPORTANT: Rename `labels` default property and option on `UIkit.modal` to `i18n`
+- Move functional CSS from Dropdown, Dropbar and Navbar component to Drop component
+
+### Removed
+
+- Remove `ajax()` util function, use native `fetch` instead
+- Remove `getImage()` util function
+
 # Changelog
 
+## 3.15.25 (February 23, 2023)
+
+### Fixed
+
+- Fix Dropbar partially closing before opening when switching between Navbar items
+- Fix Parallax component updating too late during slide animation in Filter component
+
 ## 3.15.24 (February 9, 2023)
 
 ### Fixed
@@ -9,10 +46,6 @@
 
 ## 3.15.23 (February 1, 2023)
 
-### Added
-
-- Add subnav parent icon to Subnav component
-
 ### Fixed
 
 - Fix prevent background scrolling in Safari

package/build/publishDev.js

@@ -12,13 +12,13 @@ if (args.f || args.force || (await isDevCommit())) {
     const hash = (await run('git rev-parse --short HEAD')).trim();
 
     // set version of package.json
-    await run(`npm version ${version}-dev.${hash} --git-tag-version false`);
+    await run(`pnpm version ${version}-dev.${hash} --no-git-tag-version`);
 
     // create dist files
-    await run('yarn compile && yarn compile-rtl && yarn build-scss');
+    await run('pnpm compile && pnpm compile-rtl && pnpm build-scss');
 
     // publish to dev tag
-    await run('npm publish --tag dev');
+    await run('pnpm publish --tag dev --no-git-checks');
 }
 
 async function isDevCommit() {

package/build/release.js

@@ -23,9 +23,9 @@ await Promise.all([
     ),
 ]);
 
-await run('yarn compile');
-await run('yarn compile-rtl');
-await run('yarn build-scss');
+await run('pnpm compile');
+await run('pnpm compile-rtl');
+await run('pnpm build-scss');
 
 await createPackage(version);
 

package/build/util.js

@@ -9,12 +9,11 @@ import CleanCSS from 'clean-css';
 import html from 'rollup-plugin-html';
 import alias from '@rollup/plugin-alias';
 import modify from 'rollup-plugin-modify';
-import { babel } from '@rollup/plugin-babel';
 import replace from '@rollup/plugin-replace';
 import { basename, dirname, join } from 'path';
 import { exec as execImport } from 'child_process';
 import { rollup, watch as rollupWatch } from 'rollup';
-import { minify as esbuildMinify } from 'rollup-plugin-esbuild';
+import { default as esbuild, minify as esbuildMinify } from 'rollup-plugin-esbuild';
 
 const limit = pLimit(Number(process.env.cpus || 2));
 
@@ -110,23 +109,13 @@ export async function compile(file, dest, { external, globals, name, aliases, re
                     },
                 },
             }),
-            !debug &&
-                babel({
-                    presets: [
-                        [
-                            '@babel/preset-env',
-                            {
-                                loose: true,
-                                targets: { safari: '12' },
-                                bugfixes: true,
-                            },
-                        ],
-                    ],
-                    extensions: ['.js'],
-                    babelHelpers: 'bundled',
-                    retainLines: true,
-                    compact: false,
-                }),
+
+            esbuild({
+                target: 'safari12',
+                sourceMap: !!debug,
+                minify: false,
+            }),
+
             !debug &&
                 modify({
                     find: /(>)\n\s+|\n\s+(<)/,

package/dist/css/uikit-core-rtl.css

@@ -1,4 +1,4 @@
-/*! UIkit 3.15.25-dev.ef4c64c1a | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
+/*! UIkit 3.16.0 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -3251,33 +3251,34 @@ select.uk-form-width-xsmall {
 .uk-drop-stack .uk-drop-grid > * {
   width: 100% !important;
 }
+/* Parent icon
+ ========================================================================== */
+.uk-drop-parent-icon {
+  margin-right: 0.25em;
+  transition: transform 0.3s ease-out;
+}
+[aria-expanded="true"] > .uk-drop-parent-icon {
+  transform: rotateX(180deg);
+}
 /* ========================================================================
    Component: Dropbar
  ========================================================================== */
 /*
- * 1. Hide by default
- * 2. Set position
- * 3. Style
+ * Adopts `uk-drop`
+ * 1. Reset drop
+ * 2. Style
  */
 .uk-dropbar {
   --uk-position-offset: 0;
   --uk-position-shift-offset: 0;
   --uk-position-viewport-offset: 0;
   /* 1 */
-  display: none;
+  width: auto;
   /* 2 */
-  position: absolute;
-  z-index: 1020;
-  /* 3 */
-  box-sizing: border-box;
   padding: 15px 15px 15px 15px;
   background: #f8f8f8;
   color: #666;
 }
-/* Show */
-.uk-dropbar.uk-open {
-  display: block;
-}
 /*
  * Remove margin from the last-child
  */
@@ -3306,6 +3307,24 @@ select.uk-form-width-xsmall {
 }
 /* Direction modifier
  ========================================================================== */
+/* ========================================================================
+   Component: Dropnav
+ ========================================================================== */
+/*
+ * 1. Position
+ * 2. Reset dropbar
+ * 3. Width
+ */
+.uk-dropnav-dropbar {
+  /* 1 */
+  position: absolute;
+  z-index: 980;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+  right: 0;
+  left: 0;
+}
 /* ========================================================================
    Component: Modal
  ========================================================================== */
@@ -4622,9 +4641,10 @@ ul.uk-nav-sub {
  ========================================================================== */
 .uk-nav-parent-icon {
   margin-right: auto;
+  transition: transform 0.3s ease-out;
 }
-.uk-nav > li > a[aria-expanded="true"] .uk-nav-parent-icon {
-  transform: rotate(-180deg);
+.uk-nav > li.uk-open > a .uk-nav-parent-icon {
+  transform: rotateX(180deg);
 }
 /* Header
  ========================================================================== */
@@ -4833,7 +4853,7 @@ ul.uk-nav-sub {
 }
 /* Parent icon  */
 .uk-nav-center .uk-nav-parent-icon {
-  margin-right: 4px;
+  margin-right: 0.25em;
 }
 /* Style modifier
  ========================================================================== */
@@ -4994,9 +5014,10 @@ ul.uk-nav-sub {
  ========================================================================== */
 .uk-navbar-parent-icon {
   margin-right: 4px;
+  transition: transform 0.3s ease-out;
 }
 .uk-navbar-nav > li > a[aria-expanded="true"] .uk-navbar-parent-icon {
-  transform: rotate(-180deg);
+  transform: rotateX(180deg);
 }
 /* Item
  ========================================================================== */
@@ -5046,33 +5067,21 @@ ul.uk-nav-sub {
 /* Dropdown
  ========================================================================== */
 /*
- * Adopts `uk-dropdown`
- * 1. Hide by default
- * 2. Set position
- * 3. Set a default width
- * 4. Style
+ * Adopts `uk-drop`
+ * 1. Set a default width
+ * 2. Style
  */
 .uk-navbar-dropdown {
-  /* 1 */
-  display: none;
-  /* 2 */
-  position: absolute;
-  z-index: 1020;
   --uk-position-offset: 0;
   --uk-position-shift-offset: 0;
   --uk-position-viewport-offset: 15px;
-  /* 3 */
-  box-sizing: border-box;
+  /* 1 */
   width: 200px;
-  /* 4 */
+  /* 2 */
   padding: 15px;
   background: #f8f8f8;
   color: #666;
 }
-/* Show */
-.uk-navbar-dropdown.uk-open {
-  display: block;
-}
 /*
  * Remove margin from the last-child
  */
@@ -5084,33 +5093,29 @@ ul.uk-nav-sub {
  * Adopts `uk-grid`
  */
 /* Gutter Horizontal */
-.uk-navbar-dropdown-grid {
+.uk-navbar-dropdown .uk-drop-grid {
   margin-right: -30px;
 }
-.uk-navbar-dropdown-grid > * {
+.uk-navbar-dropdown .uk-drop-grid > * {
   padding-right: 30px;
 }
 /* Gutter Vertical */
-.uk-navbar-dropdown-grid > .uk-grid-margin {
+.uk-navbar-dropdown .uk-drop-grid > .uk-grid-margin {
   margin-top: 30px;
 }
-/* Stack */
-.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * {
-  width: 100% !important;
-}
 /*
  * Width modifier
  */
-.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) {
+.uk-navbar-dropdown-width-2:not(.uk-drop-stack) {
   width: 400px;
 }
-.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) {
+.uk-navbar-dropdown-width-3:not(.uk-drop-stack) {
   width: 600px;
 }
-.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) {
+.uk-navbar-dropdown-width-4:not(.uk-drop-stack) {
   width: 800px;
 }
-.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) {
+.uk-navbar-dropdown-width-5:not(.uk-drop-stack) {
   width: 1000px;
 }
 /*
@@ -5204,18 +5209,8 @@ ul.uk-nav-sub {
 /* Dropbar
  ========================================================================== */
 /*
- * 1. Reset dropbar
- * 2. Width
+ * Adopts `uk-dropnav-dropbar`
  */
-.uk-navbar-dropbar {
-  /* 1 */
-  display: block !important;
-  z-index: 980;
-  padding: 0;
-  /* 2 */
-  right: 0;
-  left: 0;
-}
 /* ========================================================================
    Component: Subnav
  ========================================================================== */
@@ -5277,14 +5272,6 @@ ul.uk-nav-sub {
 .uk-subnav > .uk-active > a {
   color: #333;
 }
-/* Parent icon modifier
- ========================================================================== */
-.uk-subnav-parent-icon {
-  margin-right: 4px;
-}
-.uk-subnav > li > a[aria-expanded="true"] .uk-subnav-parent-icon {
-  transform: rotate(-180deg);
-}
 /* Divider modifier
  ========================================================================== */
 /*
@@ -5787,31 +5774,23 @@ ul.uk-nav-sub {
    Component: Dropdown
  ========================================================================== */
 /*
- * 1. Hide by default
- * 2. Set position
- * 3. Set a default width
- * 4. Style
+ * Adopts `uk-drop`
+ * 1. Reset drop and let text expand the width instead of wrapping
+ * 2. Set a default width
+ * 3. Style
  */
 .uk-dropdown {
-  /* 1 */
-  display: none;
-  /* 2 */
-  position: absolute;
-  z-index: 1020;
   --uk-position-offset: 10px;
   --uk-position-viewport-offset: 15px;
-  /* 3 */
-  box-sizing: border-box;
+  /* 1 */
+  width: auto;
+  /* 2 */
   min-width: 200px;
-  /* 4 */
+  /* 3 */
   padding: 15px;
   background: #f8f8f8;
   color: #666;
 }
-/* Show */
-.uk-dropdown.uk-open {
-  display: block;
-}
 /*
  * Remove margin from the last-child
  */
@@ -5823,6 +5802,38 @@ ul.uk-nav-sub {
 .uk-dropdown-large {
   padding: 40px;
 }
+/* Dropbar modifier
+ ========================================================================== */
+/*
+ * 1. Reset dropdown width to prevent to early shifting
+ * 2. Reset style
+ * 3. Padding
+ */
+.uk-dropdown-dropbar {
+  /* 1 */
+  width: auto;
+  /* 2 */
+  background: transparent;
+  /* 3 */
+  padding: 15px 0 15px 0;
+  --uk-position-viewport-offset: 15px;
+}
+/* Phone landscape and bigger */
+@media (min-width: 640px) {
+  .uk-dropdown-dropbar {
+    --uk-position-viewport-offset: 30px;
+  }
+}
+/* Tablet landscape and bigger */
+@media (min-width: 960px) {
+  .uk-dropdown-dropbar {
+    --uk-position-viewport-offset: 40px;
+  }
+}
+.uk-dropdown-dropbar-large {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
 /* Nav
  * Adopts `uk-nav`
  ========================================================================== */
@@ -5865,11 +5876,6 @@ ul.uk-nav-sub {
 .uk-dropdown-nav .uk-nav-sub li.uk-active > a {
   color: #666;
 }
-/* Grid modifiers
- ========================================================================== */
-.uk-dropdown-stack .uk-dropdown-grid > * {
-  width: 100% !important;
-}
 /* ========================================================================
    Component: Lightbox
  ========================================================================== */