uikit 3.12.1 → 3.12.3-dev.3c9ee4dfd

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## WIP
+
+### Added
+
+- Add support for `<img>` element to icon image class in Icon component
+
+### Changed
+
+- Drastically improve performance for large sites
+- Custom components have to listen for `resize` and `scroll` updates manually
+
+### Removed
+
+- Remove Edge Legacy (EdgeHTML) support
+- Remove Safari fallback for `focus-visible`
+
+### Fixed
+
+- Fix list bullet regression in List component
+- Fix Sticky component notices change in its offset parent's position
+- Fix Scrollspy component does not apply animation classes on hide
+
+## 3.12.2 (March 14, 2022)
+
+### Fixed
+
+- Fix regression in Slider/Slideshow touch gestures
+
 ## 3.12.1 (March 14, 2022)
 
 ### Fixed
@@ -34,7 +62,7 @@
 
 - Deprecate `uk-img` for `<img>` element: Use native `loading="lazy"` attribute instead
 
-## Removed
+### Removed
 
 - Remove IE11 support
 - Removed `data-width` and `data-height` for `<img>` element from Image component. Use native attributes instead.
@@ -1117,7 +1145,7 @@
 
 - Image Component uses IntersectionObserver now
 
-## Removed
+### Removed
 
 - Remove `isReady` function
 - Form Custom component no longer sets `uk-hover` and `uk-focus` classes

package/build/scss.js

@@ -92,10 +92,7 @@ for (const file of await glob('src/less/**/*.less')) {
         .replace(/(\$[\w-]*)\s*:(.*);/g, '$1: $2 !default;') // make variables optional
         .replace(/@mixin ([\w-]*)\s*\((.*)\)\s*{\s*}/g, '// @mixin $1($2){}') // comment empty mixins
         .replace(/\.(hook[a-zA-Z\-\d]+)(\(\))?;/g, '@if(mixin-exists($1)) {@include $1();}') // hook calls surrounded by a mixin-exists
-        .replace(
-            /\$(import|supports|media|font-face|page|-ms-viewport|keyframes|-webkit-keyframes|-moz-document)/g,
-            '@$1'
-        ) // replace valid '@' statements
+        .replace(/\$(import|supports|media|font-face|page|keyframes|-moz-document)/g, '@$1') // replace valid '@' statements
         .replace(/tint\((\$[\w-]+),\s([^)]*)\)/g, 'mix(white, $1, $2)') // replace Less function tint with mix
         .replace(/fade\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2) => {
             return `rgba(${p1}, ${p2 / 100})`;
@@ -191,19 +188,14 @@ await write('src/scss/variables-theme.scss', Array.from(compactThemeVar).join('\
  * @return Set with all the dependencies.
  */
 function getAllDependencies(allVariables, currentKey, dependencies = new Set()) {
-    if (!allVariables[currentKey].dependencies.length) {
-        dependencies.add(`${currentKey}: ${allVariables[currentKey].value}`);
-        return Array.from(dependencies);
-    } else {
-        allVariables[currentKey].dependencies.forEach((dependecy) => {
-            getAllDependencies(allVariables, dependecy, dependencies).forEach((newDependency) =>
-                dependencies.add(newDependency)
-            );
-        });
-
-        dependencies.add(`${currentKey}: ${allVariables[currentKey].value}`);
-        return Array.from(dependencies);
-    }
+    allVariables[currentKey].dependencies?.forEach((dependency) =>
+        getAllDependencies(allVariables, dependency, dependencies).forEach((newDependency) =>
+            dependencies.add(newDependency)
+        )
+    );
+
+    dependencies.add(`${currentKey}: ${allVariables[currentKey].value}`);
+    return Array.from(dependencies);
 }
 
 /*

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.12.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.12.3-dev.3c9ee4dfd | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -380,27 +380,9 @@ pre code {
 }
 /* Focus
  ========================================================================== */
-/*
- * Safari doesn't support `:focus-visible` yet. It also doesn't set focus if clicking a button or anchor.
- * 1. Fallback: Remove `:focus` for a negative tabindexes.
- * 2. Fallback: Set `:focus` style but not for negative tabindexes.
- * 3. Fallback: Remove `:focus` style for browsers which support `:focus-visible`.
- * 4. Set `:focus-visible` style for browsers which support it.
- */
-/* 1 */
 :focus {
   outline: none;
 }
-/* 2 */
-:focus:not([tabindex^='-']) {
-  outline: 2px dotted #333;
-  outline-offset: 1px;
-}
-/* 3 */
-:focus:not(:focus-visible) {
-  outline: none;
-}
-/* 4 */
 :focus-visible {
   outline: 2px dotted #333;
 }
@@ -797,6 +779,7 @@ a.uk-link-reset,
 }
 .uk-list-bullet > ::before {
   content: "";
+  display: list-item;
   position: relative;
   right: -30px;
   width: 30px;
@@ -1134,14 +1117,20 @@ button.uk-icon:not(:disabled) {
  ========================================================================== */
 /*
  * Display images in icon dimensions
+ * 1. Required for `span` with background image
+ * 2. Required for `image`
  */
 .uk-icon-image {
   width: 20px;
   height: 20px;
+  /* 1 */
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: contain;
   vertical-align: middle;
+  /* 2 */
+  object-fit: scale-down;
+  max-width: none;
 }
 /* Style modifiers
  ========================================================================== */
@@ -1453,15 +1442,9 @@ button.uk-icon:not(:disabled) {
 /*
  * Placeholder
  */
-.uk-input::-ms-input-placeholder {
-  color: #999 !important;
-}
 .uk-input::placeholder {
   color: #999;
 }
-.uk-textarea::-ms-input-placeholder {
-  color: #999 !important;
-}
 .uk-textarea::placeholder {
   color: #999;
 }
@@ -1557,8 +1540,7 @@ select.uk-form-width-xsmall {
 /*
  * 1. Remove default style. Also works in Firefox
  * 2. Style
- * 3. Remove default style in IE 10/11
- * 4. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
+ * 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
  */
 .uk-select:not([multiple]):not([size]) {
   /* 1 */
@@ -1571,10 +1553,6 @@ select.uk-form-width-xsmall {
   background-position: 0% 50%;
 }
 /* 3 */
-.uk-select:not([multiple]):not([size])::-ms-expand {
-  display: none;
-}
-/* 4 */
 .uk-select:not([multiple]):not([size]) option {
   color: #666;
 }
@@ -3064,9 +3042,6 @@ select.uk-form-width-xsmall {
   outline: none;
 }
 /* Placeholder */
-.uk-search-input:-ms-input-placeholder {
-  color: #999 !important;
-}
 .uk-search-input::placeholder {
   color: #999;
 }
@@ -3575,6 +3550,7 @@ select.uk-form-width-xsmall {
  * 2. Reset list
  * 3. Clip child elements
  * 4. Prevent displaying the callout information on iOS.
+ * 5. Disable horizontal panning gestures
  */
 .uk-slideshow-items {
   /* 1 */
@@ -3588,6 +3564,8 @@ select.uk-form-width-xsmall {
   overflow: hidden;
   /* 4 */
   -webkit-touch-callout: none;
+  /* 5 */
+  touch-action: pan-y;
 }
 /* Item
  ========================================================================== */
@@ -3646,12 +3624,15 @@ select.uk-form-width-xsmall {
 /*
  * 1. Optimize animation
  * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
+ * 3. Disable horizontal panning gestures
  */
 .uk-slider-items {
   /* 1 */
   will-change: transform;
   /* 2 */
   position: relative;
+  /* 3 */
+  touch-action: pan-y;
 }
 /*
  * 1. Reset list style without interfering with grid
@@ -7661,8 +7642,6 @@ iframe[data-uk-cover] {
  *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
  * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
  *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
- * 3. Caused by 1.: Edge creates two nested `::first-letter` containers, one for each selector
- *    This doubles the `font-size` exponential when using the `em` unit.
  */
 .uk-dropcap::first-letter,
 .uk-dropcap > p:first-of-type::first-letter {
@@ -7679,12 +7658,6 @@ iframe[data-uk-cover] {
     margin-top: 1.1%;
   }
 }
-/* 3 */
-@supports (-ms-ime-align: auto) {
-  .uk-dropcap > p:first-of-type::first-letter {
-    font-size: 1em;
-  }
-}
 /* Logo
  ========================================================================== */
 /*
@@ -9791,19 +9764,6 @@ iframe[data-uk-cover] {
   background-color: rgba(255, 255, 255, 0.15);
   color: rgba(255, 255, 255, 0.7);
 }
-.uk-light .uk-input::-ms-input-placeholder,
-.uk-section-primary:not(.uk-preserve-color) .uk-input::-ms-input-placeholder,
-.uk-section-secondary:not(.uk-preserve-color) .uk-input::-ms-input-placeholder,
-.uk-tile-primary:not(.uk-preserve-color) .uk-input::-ms-input-placeholder,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-input::-ms-input-placeholder,
-.uk-card-primary.uk-card-body .uk-input::-ms-input-placeholder,
-.uk-card-primary > :not([class*='uk-card-media']) .uk-input::-ms-input-placeholder,
-.uk-card-secondary.uk-card-body .uk-input::-ms-input-placeholder,
-.uk-card-secondary > :not([class*='uk-card-media']) .uk-input::-ms-input-placeholder,
-.uk-overlay-primary .uk-input::-ms-input-placeholder,
-.uk-offcanvas-bar .uk-input::-ms-input-placeholder {
-  color: rgba(255, 255, 255, 0.5) !important;
-}
 .uk-light .uk-input::placeholder,
 .uk-section-primary:not(.uk-preserve-color) .uk-input::placeholder,
 .uk-section-secondary:not(.uk-preserve-color) .uk-input::placeholder,
@@ -9817,19 +9777,6 @@ iframe[data-uk-cover] {
 .uk-offcanvas-bar .uk-input::placeholder {
   color: rgba(255, 255, 255, 0.5);
 }
-.uk-light .uk-textarea::-ms-input-placeholder,
-.uk-section-primary:not(.uk-preserve-color) .uk-textarea::-ms-input-placeholder,
-.uk-section-secondary:not(.uk-preserve-color) .uk-textarea::-ms-input-placeholder,
-.uk-tile-primary:not(.uk-preserve-color) .uk-textarea::-ms-input-placeholder,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-textarea::-ms-input-placeholder,
-.uk-card-primary.uk-card-body .uk-textarea::-ms-input-placeholder,
-.uk-card-primary > :not([class*='uk-card-media']) .uk-textarea::-ms-input-placeholder,
-.uk-card-secondary.uk-card-body .uk-textarea::-ms-input-placeholder,
-.uk-card-secondary > :not([class*='uk-card-media']) .uk-textarea::-ms-input-placeholder,
-.uk-overlay-primary .uk-textarea::-ms-input-placeholder,
-.uk-offcanvas-bar .uk-textarea::-ms-input-placeholder {
-  color: rgba(255, 255, 255, 0.5) !important;
-}
 .uk-light .uk-textarea::placeholder,
 .uk-section-primary:not(.uk-preserve-color) .uk-textarea::placeholder,
 .uk-section-secondary:not(.uk-preserve-color) .uk-textarea::placeholder,
@@ -10447,19 +10394,6 @@ iframe[data-uk-cover] {
 .uk-offcanvas-bar .uk-search-input {
   color: rgba(255, 255, 255, 0.7);
 }
-.uk-light .uk-search-input:-ms-input-placeholder,
-.uk-section-primary:not(.uk-preserve-color) .uk-search-input:-ms-input-placeholder,
-.uk-section-secondary:not(.uk-preserve-color) .uk-search-input:-ms-input-placeholder,
-.uk-tile-primary:not(.uk-preserve-color) .uk-search-input:-ms-input-placeholder,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-search-input:-ms-input-placeholder,
-.uk-card-primary.uk-card-body .uk-search-input:-ms-input-placeholder,
-.uk-card-primary > :not([class*='uk-card-media']) .uk-search-input:-ms-input-placeholder,
-.uk-card-secondary.uk-card-body .uk-search-input:-ms-input-placeholder,
-.uk-card-secondary > :not([class*='uk-card-media']) .uk-search-input:-ms-input-placeholder,
-.uk-overlay-primary .uk-search-input:-ms-input-placeholder,
-.uk-offcanvas-bar .uk-search-input:-ms-input-placeholder {
-  color: rgba(255, 255, 255, 0.5) !important;
-}
 .uk-light .uk-search-input::placeholder,
 .uk-section-primary:not(.uk-preserve-color) .uk-search-input::placeholder,
 .uk-section-secondary:not(.uk-preserve-color) .uk-search-input::placeholder,