uikit 3.11.2-dev.bbaa4362f → 3.11.2-dev.c08a5b5f0

package/CHANGELOG.md

@@ -1,11 +1,27 @@
 # Changelog
 
+## WIP Picture element
+
+### Added
+
+- Add support for <picture> element in Img component
+- Add `sources` option to Image component to allow for multiple image sources for background images
+- Add `loading` option to Image component (Avoid lazy loading images that are in first visible viewport)
+
+### Changed
+
+- Using Image component is deprecated for image elements (use native loading="lazy" instead)
+- The placeholder image, set by the Image component, no longer has a width/height. `data-` prefixed height/width attributes are ignored. (Use height/width attributes instead for the browser to infer the intrinsic size of the image being loaded)
+- Image component no longer relies on session storage to check for cached images to immediately show an image
+- Slideshow removes native loading="lazy" attribute from adjacent slides (Previously handled by Img component and its `target` option)
+
 ## WIP
 
 ### Added
 
 - Add `position` option with `top`, `bottom` and `auto` values to Sticky component
 - Add support for basic math operands in `offset` option of Sticky component
+- Add object fit and position classes to Utility component
 
 ### Changed
 
@@ -16,6 +32,8 @@
 - Fix infinite sliding in Slider component with equally sized slides
 - Fix Sticky component setting wrong margin for placeholder
 - Fix dropdowns not closing in Navbar component when hovering dropbar and navigation with keyboard
+- Fix dropdown no longer closes if pointer is still moving towards it
+- Fix `fadein` not transformed correctly to `fade-in` in scss build
 
 ## 3.11.1 (February 7, 2022)
 

package/build/scss.js

@@ -92,7 +92,7 @@ for (const file of await glob('src/less/**/*.less')) {
         .replace(/\$(import|supports|media|font-face|page|-ms-viewport|keyframes|-webkit-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})`;}) // replace Less function fade with rgba
-        .replace(/fadeout\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2) => { return `fade-out(${p1}, ${p2 / 100})`;}) // replace Less function fadeout with fade-out
+        .replace(/fade(in|out)\((\$[\w-]*), ([0-9]+)%\)/g, (match, p1, p2, p3) => { return `fade-${p1}(${p2}, ${p3 / 100})`;}) // replace Less function fadeout with fade-out
         .replace(/\.svg-fill/g, '@include svg-fill') // include svg-fill mixin
         .replace(/(.*):extend\((\.[\w-\\@]*) all\) when \((\$[\w-]*) = ([\w]+)\) {}/g, '@if ( $3 == $4 ) { $1 { @extend $2 !optional;} }') // update conditional extend and add !optional to ignore warnings
         .replace(/(\.[\w-\\@]+)\s*when\s*\((\$[\w-]*)\s*=\s*(\w+)\)\s*{\s*@if\(mixin-exists\(([\w-]*)\)\) {@include\s([\w-]*)\(\);\s*}\s*}/g, '@if ($2 == $3) { $1 { @if (mixin-exists($4)) {@include $4();}}}') // update conditional hook

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.11.2-dev.bbaa4362f | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.2-dev.c08a5b5f0 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -4899,13 +4899,6 @@ ul.uk-nav-sub {
 .uk-navbar-container:not(.uk-navbar-transparent) {
   background: #f8f8f8;
 }
-/*
- * Remove pseudo elements created by micro clearfix as precaution (if Container component is used)
- */
-.uk-navbar-container > ::before,
-.uk-navbar-container > ::after {
-  display: none !important;
-}
 /* Groups
  ========================================================================== */
 /*
@@ -7628,6 +7621,47 @@ iframe[data-uk-cover] {
 [data-uk-responsive] {
   max-width: 100%;
 }
+/* Object
+ ========================================================================== */
+.uk-object-fit-none {
+  object-fit: none;
+}
+.uk-object-fit-cover {
+  object-fit: cover;
+}
+.uk-object-fit-contain {
+  object-fit: contain;
+}
+/* 
+ * Position
+ */
+.uk-object-top-right {
+  object-position: 100% 0;
+}
+.uk-object-top-center {
+  object-position: 50% 0;
+}
+.uk-object-top-left {
+  object-position: 0% 0;
+}
+.uk-object-center-right {
+  object-position: 100% 50%;
+}
+.uk-object-center-center {
+  object-position: 50% 50%;
+}
+.uk-object-center-left {
+  object-position: 0% 50%;
+}
+.uk-object-bottom-right {
+  object-position: 100% 100%;
+}
+.uk-object-bottom-center {
+  object-position: 50% 100%;
+}
+.uk-object-bottom-left {
+  object-position: 0% 100%;
+}
 /* Border
  ========================================================================== */
 .uk-border-circle {
@@ -7878,15 +7912,6 @@ iframe[data-uk-cover] {
 .uk-flex-inline {
   display: inline-flex;
 }
-/*
- * Remove pseudo elements created by micro clearfix as precaution
- */
-.uk-flex::before,
-.uk-flex::after,
-.uk-flex-inline::before,
-.uk-flex-inline::after {
-  display: none;
-}
 /* Alignment
  ========================================================================== */
 /*