uikit 3.21.7 → 3.21.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 3.21.8 (July 25, 2024)
+
+### Fixed
+
+- Fix toggled hidden hover class to display elements on hover for touch devices using `tabindex` in  Visibility component
+- Fix offsetViewport calculation if window is passed as scrollElement
+
 ## 3.21.7 (July 17, 2024)
 
 ### Fixed

package/build/prefix.js

@@ -1,6 +1,6 @@
 import { glob } from 'glob';
 import inquirer from 'inquirer';
-import { args, read, replaceInFile, validClassName } from './util.js';
+import { args, read, replaceInFile } from './util.js';
 
 if (args.h || args.help) {
     console.log(`
@@ -29,7 +29,7 @@ await replacePrefix(currentPrefix, prefix);
 
 async function findExistingPrefix() {
     return (await read(`${path}/css/uikit.css`)).match(
-        new RegExp(`(${validClassName.source})(-[a-z]+)?-grid`),
+        /([a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*)(-[a-z]+)?-grid/,
     )?.[1];
 }
 
@@ -43,21 +43,22 @@ async function getPrefix() {
             await prompt({
                 name: 'prefix',
                 message: 'enter a prefix',
-                validate: (val, res) =>
-                    val.length && val.match(validClassName)
-                        ? !!(res.prefix = val)
-                        : 'invalid prefix',
+                validate: (val) => isValidPrefix(val) || 'invalid prefix',
             })
         ).prefix;
     }
 
-    if (validClassName.test(prefixFromInput)) {
+    if (isValidPrefix(prefixFromInput)) {
         return prefixFromInput;
     } else {
         throw `Illegal prefix: ${prefixFromInput}`;
     }
 }
 
+function isValidPrefix(prefix) {
+    return Boolean(prefix.match(/^[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*$/));
+}
+
 async function replacePrefix(from, to) {
     for (const file of await glob(`${path}/**/*.css`)) {
         await replaceInFile(file, (data) =>

package/build/scope.js

@@ -1,6 +1,6 @@
 import { glob } from 'glob';
 import stripCssComments from 'strip-css-comments';
-import { args, minify, read, renderLess, replaceInFile, validClassName } from './util.js';
+import { args, minify, read, renderLess, replaceInFile } from './util.js';
 
 if (args.h || args.help) {
     console.log(`
@@ -53,7 +53,7 @@ async function getScope(files) {
 function getNewScope() {
     const scopeFromInput = args.scope || args.s || 'uk-scope';
 
-    if (validClassName.test(scopeFromInput)) {
+    if (scopeFromInput.match(/^[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*$/)) {
         return scopeFromInput;
     } else {
         throw `Illegal scope-name: ${scopeFromInput}`;

package/build/util.js

@@ -15,7 +15,6 @@ import svgo from 'svgo';
 const limit = pLimit(Number(process.env.cpus || 2));
 
 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]*/;
 
 const argv = minimist(process.argv.slice(2));
 

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.21.7 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.21.8 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -9410,33 +9410,27 @@ iframe[data-uk-cover] {
 /*
  * Remove space when hidden.
  * 1. Remove from document flow.
- * 2. Hide element and shrink its dimension. Can't use zero dimensions together
- *    with `overflow: hidden` it would remove it from the accessibility tree.
- * 3. Hide the single rendered pixel.
- * 4. Prevent text wrapping caused by `width: 1px` because it has side effects on vocalisation
- *    by screen readers and the visual tracking indicator of other assistive technologies.
+ * 2. Hide element and shrink its dimension. Current browsers and screen readers
+ *    keep the element in the accessibility tree even with zero dimensions.
+ *    Using `tabindex="-1"` will show the element on touch devices.
+ *    Note: `clip-path` doesn't work with `tabindex` on touch devices.
  */
 .uk-hidden-visually:not(:focus):not(:active):not(:focus-within),
 .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
   /* 1 */
   position: absolute !important;
   /* 2 */
-  width: 1px !important;
-  height: 1px !important;
+  width: 0 !important;
+  height: 0 !important;
   padding: 0 !important;
   border: 0 !important;
   margin: 0 !important;
   overflow: hidden !important;
-  /* 3 */
-  clip-path: inset(50%) !important;
-  /* 4 */
-  white-space: nowrap !important;
 }
 /*
  * Keep space when hidden.
  * Hide element without shrinking its dimension.
- * Unfortunately, can't use `clip-path: inset(50%)` because hover won't work
- * if the element is positioned outside of the toggle box.
+ * Note: `clip-path` doesn't work with hover for elements outside of the toggle box.
  */
 .uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
   opacity: 0 !important;