uikit 3.16.27 → 3.17.1-dev.7c0766a6f

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## WIP
+
+### Fixed
+
+- Fix icon alignment in Pagination component
+- Fix Sticky component overflow scrolling position on resize
+
+## 3.17.0 (September 28, 2023)
+
+### Added
+
+- Add modes `pack` (default) and `next` to Grid component's `masonry` option
+- Add `parallax-start`, `parallax-end`, `parallax-justify` option to Grid component
+- Add `close-on-scroll` option to Drop and Dropdown component
+- Add transparent Navbar gets its color modifier from underlying section 
+- Add support for `<td>` and `<tr>` elements to `fragment()` function
+- Add 3XL size modifier to Heading component
+- Add support for a CSS Selector in `offsetTop` option in Height Viewport component
+
+### Change
+
+- Scroll component scrolls beneath elements covering its target 
+- The `closest()` function no longer accepts an array of elements
+- Reset fieldset min-width
+
 ## 3.16.27 (September 28, 2023)
 
 ### Fixed

package/build/less.js

@@ -1,7 +1,8 @@
+import fs from 'fs-extra';
 import { glob } from 'glob';
 import path from 'path';
 import rtlcss from 'rtlcss';
-import { args, banner, minify, pathExists, read, readJson, renderLess, write } from './util.js';
+import { args, banner, minify, read, renderLess, write } from './util.js';
 
 const { rtl } = args;
 const develop = args.develop || args.debug || args.d || args.nominify;
@@ -10,7 +11,7 @@ const sources = [
     { src: 'src/less/uikit.theme.less', dist: `dist/css/uikit${rtl ? '-rtl' : ''}.css` },
 ];
 
-const themes = (await pathExists('themes.json')) ? await readJson('themes.json') : {};
+const themes = (await fs.pathExists('themes.json')) ? await fs.readJson('themes.json') : {};
 
 for (const src of await glob('custom/*.less')) {
     const theme = path.basename(src, '.less');
@@ -18,7 +19,7 @@ for (const src of await glob('custom/*.less')) {
 
     themes[theme] = { css: `../${dist}` };
 
-    if (await pathExists(`dist/js/uikit-icons-${theme}.js`)) {
+    if (await fs.pathExists(`dist/js/uikit-icons-${theme}.js`)) {
         themes[theme].icons = `../dist/js/uikit-icons-${theme}.js`;
     }
 
@@ -27,7 +28,7 @@ for (const src of await glob('custom/*.less')) {
 
 await Promise.all(sources.map(({ src, dist }) => compile(src, dist, develop, rtl)));
 
-if (!rtl && (Object.keys(themes).length || !(await pathExists('themes.json')))) {
+if (!rtl && (Object.keys(themes).length || !(await fs.pathExists('themes.json')))) {
     await write('themes.json', JSON.stringify(themes));
 }
 

package/build/util.js

@@ -14,8 +14,6 @@ import svgo from 'svgo';
 
 const limit = pLimit(Number(process.env.cpus || 2));
 
-export const { pathExists, readJson } = fs;
-
 export const banner = `/*! UIkit ${await getVersion()} | https://www.getuikit.com | (c) 2014 - ${new Date().getFullYear()} YOOtheme | MIT License */\n`;
 export const validClassName = /[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/;
 
@@ -46,8 +44,8 @@ export async function write(dest, data) {
 }
 
 export async function logFile(file) {
-    const data = await read(file);
-    console.log(`${cyan(file)} ${getSize(data)}`);
+    const { size } = await fs.stat(file);
+    console.log(`${cyan(file)} ${formatSize(size)}`);
 }
 
 export async function minify(file) {
@@ -107,8 +105,8 @@ export async function compile(file, dest, { external, globals, name, aliases, re
 
             !debug &&
                 modify({
-                    find: /(>)\n\s+|\n\s+(<)/,
-                    replace: (m, m1, m2) => `${m1 || ''} ${m2 || ''}`,
+                    find: /(?<=>)\n\s+|\n\s+(?=<)/,
+                    replace: ' ',
                 }),
         ],
     };
@@ -198,7 +196,7 @@ export function ucfirst(str) {
 }
 
 export async function getVersion() {
-    return (await readJson('package.json')).version;
+    return (await fs.readJson('package.json')).version;
 }
 
 export async function replaceInFile(file, fn) {
@@ -209,8 +207,8 @@ function cyan(str) {
     return `\x1b[1m\x1b[36m${str}\x1b[39m\x1b[22m`;
 }
 
-function getSize(data) {
-    return `${(data.length / 1024).toFixed(2)}kb`;
+function formatSize(bytes) {
+    return `${(bytes / 1024).toFixed(2)}kb`;
 }
 
 async function optimizeSvg(svg) {

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.16.27 | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
+/*! UIkit 3.17.1-dev.7c0766a6f | https://www.getuikit.com | (c) 2014 - 2023 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -217,7 +217,8 @@ h6,
 .uk-heading-medium,
 .uk-heading-large,
 .uk-heading-xlarge,
-.uk-heading-2xlarge {
+.uk-heading-2xlarge,
+.uk-heading-3xlarge {
   margin: 0 0 20px 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-weight: normal;
@@ -241,7 +242,8 @@ h6,
 * + .uk-heading-medium,
 * + .uk-heading-large,
 * + .uk-heading-xlarge,
-* + .uk-heading-2xlarge {
+* + .uk-heading-2xlarge,
+* + .uk-heading-3xlarge {
   margin-top: 40px;
 }
 /*
@@ -506,6 +508,10 @@ a.uk-link-reset,
   font-size: 6rem;
   line-height: 1;
 }
+.uk-heading-3xlarge {
+  font-size: 8rem;
+  line-height: 1;
+}
 /* Tablet Landscape and bigger */
 @media (min-width: 960px) {
   .uk-heading-small {
@@ -523,6 +529,9 @@ a.uk-link-reset,
   .uk-heading-2xlarge {
     font-size: 8rem;
   }
+  .uk-heading-3xlarge {
+    font-size: 11rem;
+  }
 }
 /* Laptop and bigger */
 @media (min-width: 1200px) {
@@ -538,6 +547,9 @@ a.uk-link-reset,
   .uk-heading-2xlarge {
     font-size: 11rem;
   }
+  .uk-heading-3xlarge {
+    font-size: 15rem;
+  }
 }
 /* Primary
    Deprecated: Use `uk-heading-medium` instead
@@ -1363,11 +1375,14 @@ button.uk-icon:not(:disabled) {
 }
 /*
  * Define consistent border, margin, and padding.
+ * 1. Reset `min-width`
  */
 .uk-fieldset {
   border: none;
   margin: 0;
   padding: 0;
+  /* 1 */
+  min-width: 0;
 }
 /* Input, select and textarea
  * Allowed: `text`, `password`, `datetime-local`, `date`,  `month`,
@@ -2169,24 +2184,28 @@ select.uk-form-width-xsmall {
  */
 .uk-section-default {
   background: #fff;
+  --uk-navbar-color: dark;
 }
 /*
  * Muted
  */
 .uk-section-muted {
   background: #f8f8f8;
+  --uk-navbar-color: dark;
 }
 /*
  * Primary
  */
 .uk-section-primary {
   background: #1e87f0;
+  --uk-navbar-color: light;
 }
 /*
  * Secondary
  */
 .uk-section-secondary {
   background: #222;
+  --uk-navbar-color: light;
 }
 /* Overlap modifier
  ========================================================================== */
@@ -4879,11 +4898,14 @@ ul.uk-nav-sub {
  ========================================================================== */
 /*
  * 1. Create position context to center navbar group
+ * 2. Pass dropbar behind color to JS
  */
 .uk-navbar {
   display: flex;
   /* 1 */
   position: relative;
+  /* 2 */
+  --uk-navbar-dropbar-behind-color: dark;
 }
 /* Container
  ========================================================================== */
@@ -5222,14 +5244,6 @@ ul.uk-nav-sub {
 /*
  * Adopts `uk-dropnav-dropbar`
  */
-/*
- * Create navbar placeholder space if dropbar is behind navbar
- */
-.uk-navbar-dropbar-behind::before {
-  content: "";
-  display: block;
-  height: 80px;
-}
 /* ========================================================================
    Component: Subnav
  ========================================================================== */
@@ -5402,16 +5416,19 @@ ul.uk-nav-sub {
  ========================================================================== */
 /*
  * 1. Allow items to wrap into the next line
- * 2. Gutter
- * 3. Reset list
+ * 2. Center items vertically if they have a different height
+ * 3. Gutter
+ * 4. Reset list
  */
 .uk-pagination {
   display: flex;
   /* 1 */
   flex-wrap: wrap;
   /* 2 */
-  margin-right: 0;
+  align-items: center;
   /* 3 */
+  margin-right: 0;
+  /* 4 */
   padding: 0;
   list-style: none;
 }
@@ -5431,13 +5448,17 @@ ul.uk-nav-sub {
 /* Items
  ========================================================================== */
 /*
- * 1. Prevent gap if child element is `inline-block`, e.g. an icon
- * 2. Style
+ * 1. Center content vertically, e.g. an icon
+ * 2. Imitate white space gap when using flexbox
+ * 3. Style
  */
 .uk-pagination > * > * {
   /* 1 */
-  display: block;
+  display: flex;
+  align-items: center;
   /* 2 */
+  column-gap: 0.25em;
+  /* 3 */
   padding: 5px 10px;
   color: #999;
 }
@@ -8798,6 +8819,9 @@ iframe[data-uk-cover] {
 .uk-position-z-index-negative {
   z-index: -1;
 }
+.uk-position-z-index-high {
+  z-index: 990;
+}
 /* ========================================================================
    Component: Transition
  ========================================================================== */
@@ -9199,6 +9223,7 @@ iframe[data-uk-cover] {
 .uk-light .uk-heading-large,
 .uk-light .uk-heading-xlarge,
 .uk-light .uk-heading-2xlarge,
+.uk-light .uk-heading-3xlarge,
 .uk-section-primary:not(.uk-preserve-color) h1,
 .uk-section-primary:not(.uk-preserve-color) .uk-h1,
 .uk-section-primary:not(.uk-preserve-color) h2,
@@ -9216,6 +9241,7 @@ iframe[data-uk-cover] {
 .uk-section-primary:not(.uk-preserve-color) .uk-heading-large,
 .uk-section-primary:not(.uk-preserve-color) .uk-heading-xlarge,
 .uk-section-primary:not(.uk-preserve-color) .uk-heading-2xlarge,
+.uk-section-primary:not(.uk-preserve-color) .uk-heading-3xlarge,
 .uk-section-secondary:not(.uk-preserve-color) h1,
 .uk-section-secondary:not(.uk-preserve-color) .uk-h1,
 .uk-section-secondary:not(.uk-preserve-color) h2,
@@ -9233,6 +9259,7 @@ iframe[data-uk-cover] {
 .uk-section-secondary:not(.uk-preserve-color) .uk-heading-large,
 .uk-section-secondary:not(.uk-preserve-color) .uk-heading-xlarge,
 .uk-section-secondary:not(.uk-preserve-color) .uk-heading-2xlarge,
+.uk-section-secondary:not(.uk-preserve-color) .uk-heading-3xlarge,
 .uk-tile-primary:not(.uk-preserve-color) h1,
 .uk-tile-primary:not(.uk-preserve-color) .uk-h1,
 .uk-tile-primary:not(.uk-preserve-color) h2,
@@ -9250,6 +9277,7 @@ iframe[data-uk-cover] {
 .uk-tile-primary:not(.uk-preserve-color) .uk-heading-large,
 .uk-tile-primary:not(.uk-preserve-color) .uk-heading-xlarge,
 .uk-tile-primary:not(.uk-preserve-color) .uk-heading-2xlarge,
+.uk-tile-primary:not(.uk-preserve-color) .uk-heading-3xlarge,
 .uk-tile-secondary:not(.uk-preserve-color) h1,
 .uk-tile-secondary:not(.uk-preserve-color) .uk-h1,
 .uk-tile-secondary:not(.uk-preserve-color) h2,
@@ -9267,6 +9295,7 @@ iframe[data-uk-cover] {
 .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-large,
 .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-xlarge,
 .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-2xlarge,
+.uk-tile-secondary:not(.uk-preserve-color) .uk-heading-3xlarge,
 .uk-card-primary.uk-card-body h1,
 .uk-card-primary.uk-card-body .uk-h1,
 .uk-card-primary.uk-card-body h2,
@@ -9284,6 +9313,7 @@ iframe[data-uk-cover] {
 .uk-card-primary.uk-card-body .uk-heading-large,
 .uk-card-primary.uk-card-body .uk-heading-xlarge,
 .uk-card-primary.uk-card-body .uk-heading-2xlarge,
+.uk-card-primary.uk-card-body .uk-heading-3xlarge,
 .uk-card-primary > :not([class*='uk-card-media']) h1,
 .uk-card-primary > :not([class*='uk-card-media']) .uk-h1,
 .uk-card-primary > :not([class*='uk-card-media']) h2,
@@ -9301,6 +9331,7 @@ iframe[data-uk-cover] {
 .uk-card-primary > :not([class*='uk-card-media']) .uk-heading-large,
 .uk-card-primary > :not([class*='uk-card-media']) .uk-heading-xlarge,
 .uk-card-primary > :not([class*='uk-card-media']) .uk-heading-2xlarge,
+.uk-card-primary > :not([class*='uk-card-media']) .uk-heading-3xlarge,
 .uk-card-secondary.uk-card-body h1,
 .uk-card-secondary.uk-card-body .uk-h1,
 .uk-card-secondary.uk-card-body h2,
@@ -9318,6 +9349,7 @@ iframe[data-uk-cover] {
 .uk-card-secondary.uk-card-body .uk-heading-large,
 .uk-card-secondary.uk-card-body .uk-heading-xlarge,
 .uk-card-secondary.uk-card-body .uk-heading-2xlarge,
+.uk-card-secondary.uk-card-body .uk-heading-3xlarge,
 .uk-card-secondary > :not([class*='uk-card-media']) h1,
 .uk-card-secondary > :not([class*='uk-card-media']) .uk-h1,
 .uk-card-secondary > :not([class*='uk-card-media']) h2,
@@ -9335,6 +9367,7 @@ iframe[data-uk-cover] {
 .uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-large,
 .uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-xlarge,
 .uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-2xlarge,
+.uk-card-secondary > :not([class*='uk-card-media']) .uk-heading-3xlarge,
 .uk-overlay-primary h1,
 .uk-overlay-primary .uk-h1,
 .uk-overlay-primary h2,
@@ -9352,6 +9385,7 @@ iframe[data-uk-cover] {
 .uk-overlay-primary .uk-heading-large,
 .uk-overlay-primary .uk-heading-xlarge,
 .uk-overlay-primary .uk-heading-2xlarge,
+.uk-overlay-primary .uk-heading-3xlarge,
 .uk-offcanvas-bar h1,
 .uk-offcanvas-bar .uk-h1,
 .uk-offcanvas-bar h2,
@@ -9368,7 +9402,8 @@ iframe[data-uk-cover] {
 .uk-offcanvas-bar .uk-heading-medium,
 .uk-offcanvas-bar .uk-heading-large,
 .uk-offcanvas-bar .uk-heading-xlarge,
-.uk-offcanvas-bar .uk-heading-2xlarge {
+.uk-offcanvas-bar .uk-heading-2xlarge,
+.uk-offcanvas-bar .uk-heading-3xlarge {
   color: #fff;
 }
 .uk-light hr,