uikit 3.9.5-dev.e48c5e252 → 3.10.1-dev.6b26facf9

package/CHANGELOG.md

@@ -2,10 +2,22 @@
 
 ## WIP
 
+### Fixed
+
+- Fix vertical divider width in Divider component
+- Fix usage of `data-` prefix for Cover and Responsive component
+- Fix pointer events for iframes in Cover component
+- Fix Slideshow component no longer throws if items list does not exist
+- Fix space key no longer triggers Toggle on <input> elements
+
+## 3.10.0 (January 12, 2022)
+
 ### Added
 
-- Add support for <picture> element in Img component
+- Add intrinsic widths to Width component
 - Add 'aria-haspopup' attribute to Drop component's toggle
+- Add padding variable to search icon in Search component
+- Add position bottom variable to box-shadow bottom in Utility component
 
 ### Changed
 
@@ -15,6 +27,10 @@
 
 - Fix initial iframe width for `uk-responsive` which caused an expanded viewport on iOS devices
 - Fix link toggle style if not hovered
+- Fix compiling Slideshow css in rtl mode
+- Fix Sortable component no longer scrolls `overflow: hidden` containers
+- Fix 'yarn watch' not watching changes in less files
+- Fix `domPath()` for elements within forms that include inputs with name 'id'
 
 ## 3.9.4 (November 25, 2021)
 
@@ -32,7 +48,7 @@
 
 ### Fixed
 
-- Fix build scripts for windows users
+- Fix build scripts for Windows users
 - Fix css in Leader component
 - Fix division deprecation warnings in Sass source
 
@@ -57,7 +73,7 @@
 ### Changed
 
 - Make padding large a little bigger on small devices
-- Change logo color to emphasis
+- Change logo color to 'emphasis'
 
 ### Fixed
 
@@ -432,7 +448,7 @@
 
 ### Changed
 
-- Sorting starts after traversing half the items height/width in Sortable component
+- Sorting starts after traversing half the item's height/width in Sortable component
 
 ## 3.5.12 (December 7, 2020)
 
@@ -501,7 +517,7 @@
 
 ### Changed
 
-- Sticky component uses window.Date instead of window.performance
+- Sticky component uses 'window.Date' instead of 'window.performance'
 - Sticky component with sticky-on-up no longer hides when Dropdown shows
 
 ### Fixed
@@ -788,7 +804,7 @@
 
 ### Added
 
-- Parallax, Scroll, Scrollspy Nav components work inside of scrollable container
+- Parallax, Scroll, Scrollspy Nav components work inside scrollable container
 - Expose `scrollIntoView` utility function
 
 ### Fixed
@@ -1536,7 +1552,7 @@
 
 ### Added
 
-- Add support to center elements outside of a container to Position component
+- Add support to center elements outside a container to Position component
 
 ### Changed
 
@@ -1943,7 +1959,7 @@
 
 ### Changed
 
-- IMPORTANT: Offcanvas requires to wrap page in extra div
+- IMPORTANT: Offcanvas requires wrapping page in extra div
 - Refactored Offcanvas component
 - Update Instagram, Tumblr and Vimeo icons
 - Component Constructor initializes multiple components at once

package/CONTRIBUTING.md

@@ -83,7 +83,7 @@ UIkit adapts the [Vue's commit convention](https://github.com/vuejs/vue/blob/dev
 - `fix:` A bug fix
 - `perf:` A code change that improves performance
 - `refactor:` A code change that neither fixes a bug nor adds a feature
-- `style:` Changes that do not affect the meaning of the code (white-space, formatting, etc)
+- `style:` Changes that do not affect the meaning of the code (white-space, formatting, etc.)
 - `test:` Adding missing tests or correcting existing tests
 
 ## Versioning

package/README.md

@@ -3,6 +3,8 @@
 # UIkit
 
 [![Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/NEt4Pv7)
+[![Build](https://circleci.com/gh/uikit/uikit.svg?style=shield)](https://circleci.com/gh/uikit/uikit)
+[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/uikit/badge?style=rounded)](https://www.jsdelivr.com/package/npm/uikit)
 
 UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
 
@@ -51,8 +53,8 @@ UIkit is maintained by using the [Semantic Versioning Specification (SemVer)](ht
 ## Browser Support
 
 | ![Firefox](https://raw.github.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/main/src/safari/safari_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/main/src/edge/edge_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/main/src/opera/opera_48x48.png) |
-| -------- | -------- | -------- | -------- | -------- |
-| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
+|-------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|
+| Latest ✔                                                                                  | Latest ✔                                                                               | Latest ✔                                                                               | Latest ✔                                                                         | Latest ✔                                                                            |
 
 Tested With<br>[![BrowserStack](https://user-images.githubusercontent.com/355427/27389060-9f716c82-569d-11e7-923c-bd5fe7f1c55a.png)](https://www.browserstack.com)
 

package/build/.eslintrc.json

@@ -11,5 +11,14 @@
     ],
     "parserOptions": {
         "ecmaVersion": 2022
-    }
+    },
+    "overrides": [
+        {
+            "files": ["wrapper/*.js"],
+            "env": {
+                "browser": true,
+                "node": false
+            }
+        }
+    ]
 }

package/build/build.js

@@ -4,9 +4,9 @@ import {args, compile, glob, icons} from './util.js';
 
 const bundles = getBundleTasks();
 const components = await getComponentTasks();
-const buildAll = args.all || Object.keys(args).filter(name =>
-    ['d', 'debug', 'nominify', 'watch'].includes(name)
-).length <= 1;
+const buildAll = args.all || !Object.keys(args).filter(name =>
+    !['d', 'debug', 'nominify', 'watch', '_'].includes(name)
+).length;
 
 if (args.h || args.help) {
     console.log(`
@@ -16,8 +16,8 @@ if (args.h || args.help) {
 
         examples:
 
-        build.js // builds all of uikit, including icons and does minification (implies 'all')
-        build.js uikit icons -d // builds all of uikit and the icons, skipping the minification
+        build.js // builds all of uikit, including icons, components and does minification (implies 'all')
+        build.js uikit icons -d // builds uikit and the icons, skipping the minification and components
         build.js core lightbox -d // builds uikit-core and the lightbox, skipping the minification
 
         available components:

package/build/less.js

@@ -1,5 +1,4 @@
 import rtlcss from 'rtlcss';
-import postcss from 'postcss';
 import {basename} from 'path';
 import {args, banner, glob, minify, pathExists, read, readJson, renderLess, write} from './util.js';
 
@@ -42,12 +41,9 @@ async function compile(file, dist, develop, rtl) {
     })).replace(/\.\.\/dist\//g, '');
 
     if (rtl) {
-        output = postcss([
-            css => {
-                css.insertBefore(css.nodes[0], postcss.comment({text: 'rtl:begin:rename'}));
-                css.insertAfter(css.nodes[css.nodes.length - 1], postcss.comment({text: 'rtl:end:rename'}));
-            },
-            rtlcss({
+        output = rtlcss.process(
+            output,
+            {
                 stringMap: [{
                     name: 'previous-next',
                     priority: 100,
@@ -58,10 +54,32 @@ async function compile(file, dist, develop, rtl) {
                         ignoreCase: false
                     }
                 }]
-            })
-        ]).process(output).css;
-
-        output = output.replace(/stroke-dashoffset: (\d+)px/g, 'stroke-dashoffset: -$1px');
+            },
+            [
+                {
+                    name: 'customNegate',
+                    priority: 50,
+                    directives: {
+                        control: {},
+                        value: []
+                    },
+                    processors: [
+                        {
+                            expr: ['--uk-position-translate-x', 'stroke-dashoffset'].join('|'),
+                            action(prop, value, context) {
+                                return {prop, value: context.util.negate(value)};
+                            }
+                        }
+                    ]
+                }
+            ],
+            {
+                pre(root, postcss) {
+                    root.prepend(postcss.comment({text: 'rtl:begin:rename'}));
+                    root.append(postcss.comment({text: 'rtl:end:rename'}));
+                }
+            }
+        );
     }
 
     await write(dist, banner + output);

package/build/publishDev.js

@@ -28,7 +28,8 @@ async function isDevCommit() {
     // check for changes to publish (%B: raw body (unwrapped subject and body)
     const message = await run('git log -1 --pretty=%B');
 
-    const type = message.match(/^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?: .{1,50}/);
+    // https://www.conventionalcommits.org/en/v1.0.0/
+    const type = message.match(/^(revert: )?(feat|fix|polish|docs|style|refactor|perf|test|workflow|ci|chore|types|build)(\(.+\))?: .{1,50}/);
 
     return type && ['feat', 'fix', 'refactor', 'perf'].includes(type[2]);
 

package/build/scss.js

@@ -236,7 +236,7 @@ async function getVariablesFromFile(file, data) {
 
     while (match) {
 
-        /* check if variable is an background icon, if so replace it directly by the SVG */
+        /* check if variable is a background icon, if so replace it directly by the SVG */
         if (match[0].indexOf('../../images/backgrounds') >= 0) {
 
             const iconregex = /(\$[\w-]+)\s*:\s*"\.\.\/\.\.\/images\/backgrounds\/([\w./-]+)" !default;/g;

package/build/util.js

@@ -1,7 +1,6 @@
 import less from 'less';
 import fs from 'fs-extra';
 import pLimit from 'p-limit';
-import postcss from 'postcss';
 import globImport from 'glob';
 import {optimize} from 'svgo';
 import {promisify} from 'util';
@@ -75,25 +74,7 @@ export async function minify(file) {
 }
 
 export function renderLess(data, options) {
-    return limit(async () => postcss()
-        .use({
-            postcssPlugin: 'calc',
-            Once(root) {
-                root.walk(node => {
-                    const {type} = node;
-                    if (type === 'decl') {
-                        node.value = postcss.list.space(node.value).map(value =>
-                            value.startsWith('calc(')
-                                ? value.replace(/(.)calc/g, '$1')
-                                : value
-                        ).join(' ');
-                    }
-                });
-            }
-        })
-        .process((await less.render(data, options)).css)
-        .css
-    );
+    return limit(async () => (await less.render(data, options)).css);
 }
 
 export async function compile(file, dest, {external, globals, name, aliases, replaces} = {}) {

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.9.5-dev.e48c5e252 | https://www.getuikit.com | (c) 2014 - 2021 YOOtheme | MIT License */
+/*! UIkit 3.10.1-dev.6b26facf9 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -648,7 +648,7 @@ a.uk-link-reset,
   content: "";
   /* 1 */
   position: absolute;
-  top: calc(50% - ((0.2px + 0.05em) / 2));
+  top: calc(50% - (calc(0.2px + 0.05em) / 2));
   /* 2 */
   width: 2000px;
   /* 3 */
@@ -726,7 +726,7 @@ a.uk-link-reset,
 /* Vertical
  ========================================================================== */
 .uk-divider-vertical {
-  width: 1px;
+  width: max-content;
   height: 100px;
   margin-right: auto;
   margin-left: auto;
@@ -773,7 +773,7 @@ a.uk-link-reset,
   counter-increment: decimal;
 }
 [class*='uk-list'] > ::before {
-  content: '';
+  content: "";
   position: relative;
   right: -30px;
   width: 30px;
@@ -6720,6 +6720,14 @@ ul.uk-nav-sub {
     min-width: 1px;
   }
 }
+/* Intrinsic Widths
+ ========================================================================== */
+.uk-width-max-content {
+  width: max-content;
+}
+.uk-width-min-content {
+  width: min-content;
+}
 /* ========================================================================
    Component: Height
  ========================================================================== */
@@ -7127,25 +7135,27 @@ td.uk-text-break {
  ========================================================================== */
 /*
  * Works with iframes and embedded content
- * 1. Apply transform instantly. Needed if transform is transitioned.
+ * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
  * 2. Reset responsiveness for embedded content
  * 3. Center object
  * Note: Percent values on the `top` property only works if this element
  *       is absolute positioned or if the container has a height
  */
-.uk-cover,
-[uk-cover] {
+/* 1 */
+[uk-cover],
+[data-uk-cover] {
   /* 2 */
   max-width: none;
   /* 3 */
   position: absolute;
   right: 50%;
   top: 50%;
-  --uk-position-translate-x: -50%;
+  --uk-position-translate-x: 50%;
   --uk-position-translate-y: -50%;
   transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
 }
-iframe.uk-cover {
+iframe[uk-cover],
+iframe[data-uk-cover] {
   pointer-events: none;
 }
 /* Container
@@ -7608,7 +7618,8 @@ iframe.uk-cover {
 /*
  * Fix initial iframe width. Without the viewport is expanded on iOS devices
  */
-[uk-responsive] {
+[uk-responsive],
+[data-uk-responsive] {
   max-width: 100%;
 }
 /* Border
@@ -7676,7 +7687,7 @@ iframe.uk-cover {
     vertical-align: middle;
   }
   .uk-box-shadow-bottom::after {
-    content: '';
+    content: "";
     /* 1 */
     position: absolute;
     bottom: -30px;
@@ -8509,7 +8520,7 @@ iframe.uk-cover {
 .uk-position-center {
   top: calc(50% - var(--uk-position-margin-offset));
   right: calc(50% - var(--uk-position-margin-offset));
-  --uk-position-translate-x: -50%;
+  --uk-position-translate-x: 50%;
   --uk-position-translate-y: -50%;
   transform: translate(var(--uk-position-translate-x), var(--uk-position-translate-y));
   /* 1 */
@@ -8540,7 +8551,7 @@ iframe.uk-cover {
 .uk-position-top-center,
 .uk-position-bottom-center {
   right: calc(50% - var(--uk-position-margin-offset));
-  --uk-position-translate-x: -50%;
+  --uk-position-translate-x: 50%;
   transform: translate(var(--uk-position-translate-x), 0);
   /* 1 */
   width: max-content;