uikit 3.11.2-dev.2b60845fb → 3.11.2-dev.2f4ac8e16

package/CHANGELOG.md

@@ -4,18 +4,32 @@
 
 ### Added
 
+- Add support for `<picture>` element to Image component
+- Add `sources` option to emulate `<picture>` element for background images to Image component
+- Add `loading` option to avoid lazy loading background images in first visible viewport to Image component
+- Add support for `loading="lazy"` attribute to SVG component
 - 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 animation stop positions to Parallax component
 - Add object fit and position classes to Utility component
+- Add support for specifying location for steps in Parallax component
 
 ### Changed
 
+- Image elements need `width` and `height` attributes to prevent layout shifts
+- Image component no longer relies on session storage to check for cached images to immediately show an image
+- Slideshow and Slider remove native `loading="lazy"` attribute from adjacent slides
 - Improve sticky behavior if sticky content is larger than the viewport
 - Sticky component's `bottom` option checks for bottom padding if sticky element is within referenced element
 
+### Deprecated
+
+- Deprecate `uk-img` for `<img>` element: Use native `loading="lazy"` attribute instead
+
 ## Removed
 
-- Drop IE11 support from JavaScript
+- Remove IE11 support
+- Removed `data-width` and `data-height` for `<img>` element from Image component. Use native attributes instead.
 
 ### Fixed
 
@@ -62,7 +76,7 @@
 - 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
+- Fix space key no longer triggers Toggle on `<input>` element
 
 ## 3.10.0 (January 12, 2022)
 
@@ -379,7 +393,7 @@
 
 - Fix component update handling
 - Fix Tooltip position
-- Fix Tooltip component applied to button elements in iOS
+- Fix Tooltip component applied to `<button>` element in iOS
 - Fix regression in Switcher component
 
 ## 3.6.8 (January 5, 2021)
@@ -928,7 +942,7 @@
 ### Fixed
 
 - Fix Slideshow invisible after switching tabs in Switcher
-- Fix lazy loading images in Img component in UC Browser
+- Fix lazy loading images in Image component in UC Browser
 - Fix opening Offcanvas/Modal through buttons
 
 ## 3.1.8 (August 29, 2019)
@@ -1098,8 +1112,8 @@
 ### Fixed
 
 - Fix touch event detection
-- Fix background images are shown too large on retina displays in Img component
-- Fix correctly calculate offsetLeft in Img component
+- Fix background images are shown too large on retina displays in Image component
+- Fix correctly calculate offsetLeft in Image component
 - Fix autofocus elements not blurring within Toggable on hide
 
 ## 3.0.2 (January 15, 2019)
@@ -1108,7 +1122,7 @@
 
 - Fix offcanvas overlay transition
 - Fix active state in Switcher component
-- Fix background images on displays with higher devicePixelRatio in Img component
+- Fix background images on displays with higher devicePixelRatio in Image component
 
 ## 3.0.1 (January 14, 2019)
 
@@ -1141,7 +1155,7 @@
 ### Fixed
 
 - Fix visible toggle and its child elements not being focusable through keyboard navigation
-- Fix Img component correctly escapes urls on background images
+- Fix Image component correctly escapes urls on background images
 
 ## 3.0.0 rc 26 (January 3, 2019)
 
@@ -1160,8 +1174,8 @@
 - Fix `flex bug` mixin (IE 11)
 - Fix properly resolving css custom properties in scss
 - Fix order of variable assignments in scss
-- Fix background images are shown too large on retina displays in Img component
-- Fix lazy loading images in Img component in Safari
+- Fix background images are shown too large on retina displays in Image component
+- Fix lazy loading images in Image component in Safari
 - Limit positioned element to container width and margin in Position component
 
 ## 3.0.0 rc 25 (November 30, 2018)
@@ -1249,7 +1263,7 @@
 
 ### Fixed
 
-- Fix preserve color not working if class is set on svg element in Icon component
+- Fix preserve color not working if class is set on `<svg>` element in Icon component
 - Fix inverse hover color for accordion title
 - Fix close color being overwritten from toolbar in Lightbox component
 - Fix Modal not hiding upon being destroyed
@@ -1493,7 +1507,7 @@
 
 ### Added
 
-- Add Img component to lazy load images
+- Add Image component to lazy load images
 - Add Filter component to filter and sort any kind of layout
 - Add `masonry` option to Grid component
 - Add inverse style for form icon
@@ -1656,7 +1670,7 @@
 
 ### Changed
 
-- IMPORTANT: Use `a` element instead of headings for the accordion title
+- IMPORTANT: Use `<a>` element instead of headings for the accordion title
 - Calling a component constructor with data on an already initialized component will reset the component
 - Dropbar no longer repositions Dropdowns in DOM upon opening
 
@@ -1757,7 +1771,7 @@
 - Fix slide animations stacking when tab is not focused in Slideshow component
 - Fix overlay not showing in Offcanvas component
 - Fix Slideshow Parallax in Slideshow component for IE11
-- Fix default border-radius for button elements in Chrome 62.
+- Fix default border-radius for `<button>` element in Chrome 62.
 
 ## 3.0.0 beta 31 (October 20, 2017)
 
@@ -1866,7 +1880,7 @@
 
 - Offcanvas will keep scroll position if anchor link was clicked
 - Fix margin modifier in Position component for IE11
-- Fix divider-small text alignment for `hr` elements Edge and IE
+- Fix divider-small text alignment for `<hr>` element Edge and IE
 - Fix setting the ratio of Spinner component
 - Fix event handling in Sortable component
 - Fix grid calculation (Firefox)
@@ -1902,7 +1916,7 @@
 
 ### Changed
 
-- Make Icon component work with button elements
+- Make Icon component work with `<button>` element
 
 ### Fixed
 
@@ -2232,7 +2246,7 @@
 
 ### Changed
 
-- UIkit observes `body` element too now
+- UIkit observes `<body>` element too now
 - Performance improvements
 
 ### Fixed
@@ -2278,7 +2292,7 @@
 
 ### Fixed
 
-- Fix Icon component on canvas elements (Safari)
+- Fix Icon component on `<canvas>` elements (Safari)
 
 ## 3.0.0 beta 1 (January 09, 2017)
 

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

@@ -1,10 +1,9 @@
-/*! UIkit 3.11.2-dev.2b60845fb | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
+/*! UIkit 3.11.2-dev.2f4ac8e16 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
 /*
  * 1. Set `font-size` to support `rem` units
- *    Not using `font` property because a leading hyphen (e.g. -apple-system) causes the font to break in IE11 and Edge
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  * 3. Style
  */
@@ -130,7 +129,7 @@ sub {
 /* Embedded content
  ========================================================================== */
 /*
- * Remove the gap between embedded content and the bottom of their containers.
+ * Remove the gap between the element and the bottom of its parent container.
  */
 audio,
 canvas,
@@ -141,13 +140,13 @@ video {
   vertical-align: middle;
 }
 /*
- * 1. Add responsiveness.
- * 2. Auto-scale the height. Only needed if `height` attribute is present.
- * 3. Corrects responsive `max-width` behavior if padding and border are used.
- * 4. Exclude SVGs for IE11 because they don't preserve their aspect ratio.
+ * 1. Constrain the element to its parent width.
+ * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
+ * 3. Take border and padding into account.
  */
 canvas,
 img,
+svg,
 video {
   /* 1 */
   max-width: 100%;
@@ -156,30 +155,16 @@ video {
   /* 3 */
   box-sizing: border-box;
 }
-/* 4 */
-@supports (display: block) {
-  svg {
-    max-width: 100%;
-    height: auto;
-    box-sizing: border-box;
-  }
-}
-/*
- * Hide the overflow in IE.
- */
-svg:not(:root) {
-  overflow: hidden;
-}
 /*
- * 1. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
- * 2. Hide `alt` text for lazy loading images.
- * Note: Selector for background while loading img[data-src*='.jpg'][src*='data:image'] { background: grey; }
+ * Deprecated: only needed for `img` elements with `uk-img`
+ * 1. Hide `alt` text for lazy load images.
+ * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
  */
 img:not([src]) {
   /* 1 */
-  min-width: 1px;
-  /* 2 */
   visibility: hidden;
+  /* 2 */
+  min-width: 1px;
 }
 /*
  * Iframe
@@ -454,18 +439,6 @@ template {
 /*
  * Breakpoints
  */
-.uk-breakpoint-s::before {
-  content: '640px';
-}
-.uk-breakpoint-m::before {
-  content: '960px';
-}
-.uk-breakpoint-l::before {
-  content: '1200px';
-}
-.uk-breakpoint-xl::before {
-  content: '1600px';
-}
 :root {
   --uk-breakpoint-s: 640px;
   --uk-breakpoint-m: 960px;
@@ -1214,28 +1187,29 @@ button.uk-icon:not(:disabled) {
    Component: Form Range
  ========================================================================== */
 /*
- * 1. Normalize and defaults
- * 2. Prevent content overflow if a fixed width is used
- * 3. Take the full width
- * 4. Remove default style
- * 5. Remove white background in Chrome
- * 6. Remove padding in IE11
+ * 1. Remove default style.
+ * 2. Define consistent box sizing.
+ * 3. Remove `margin` in all browsers.
+ * 4. Align to the center of the line box.
+ * 5. Prevent content overflow if a fixed width is used.
+ * 6. Take the full width.
+ * 7. Remove white background in Chrome.
  */
 .uk-range {
   /* 1 */
+  -webkit-appearance: none;
+  /* 2 */
   box-sizing: border-box;
+  /* 3 */
   margin: 0;
+  /* 4 */
   vertical-align: middle;
-  /* 2 */
+  /* 5 */
   max-width: 100%;
-  /* 3 */
+  /* 6 */
   width: 100%;
-  /* 4 */
-  -webkit-appearance: none;
-  /* 5 */
+  /* 7 */
   background: transparent;
-  /* 6 */
-  padding: 0;
 }
 /* Focus */
 .uk-range:focus {
@@ -1244,13 +1218,6 @@ button.uk-icon:not(:disabled) {
 .uk-range::-moz-focus-outer {
   border: none;
 }
-/* IE11 Reset */
-.uk-range::-ms-track {
-  height: 15px;
-  background: transparent;
-  border-color: transparent;
-  color: transparent;
-}
 /*
  * Improves consistency of cursor style for clickable elements
  */
@@ -1260,12 +1227,33 @@ button.uk-icon:not(:disabled) {
 .uk-range:not(:disabled)::-moz-range-thumb {
   cursor: pointer;
 }
-.uk-range:not(:disabled)::-ms-thumb {
-  cursor: pointer;
+/*
+ * Track
+ * 1. Center thumb vertically in Webkit
+ * 2. Safari doesn't have a focus state. Using active instead.
+ */
+/* Webkit */
+.uk-range::-webkit-slider-runnable-track {
+  height: 3px;
+  background: #ebebeb;
+  /* 1 */
+  display: flex;
+  align-items: center;
+}
+.uk-range:focus::-webkit-slider-runnable-track,
+.uk-range:active::-webkit-slider-runnable-track {
+  background: #dedede;
+}
+/* Firefox */
+.uk-range::-moz-range-track {
+  height: 3px;
+  background: #ebebeb;
+}
+.uk-range:focus::-moz-range-track {
+  background: #dedede;
 }
-/* Thumb
- ========================================================================== */
 /*
+ * Thumb
  * 1. Reset
  * 2. Style
  */
@@ -1273,7 +1261,6 @@ button.uk-icon:not(:disabled) {
 .uk-range::-webkit-slider-thumb {
   /* 1 */
   -webkit-appearance: none;
-  margin-top: -7px;
   /* 2 */
   height: 15px;
   width: 15px;
@@ -1290,57 +1277,6 @@ button.uk-icon:not(:disabled) {
   border-radius: 500px;
   background: #666;
 }
-/* Edge */
-.uk-range::-ms-thumb {
-  /* 1 */
-  margin-top: 0;
-}
-/* IE11 */
-.uk-range::-ms-thumb {
-  /* 1 */
-  border: none;
-  /* 2 */
-  height: 15px;
-  width: 15px;
-  border-radius: 500px;
-  background: #666;
-}
-/* Edge + IE11 */
-.uk-range::-ms-tooltip {
-  display: none;
-}
-/* Track
- ========================================================================== */
-/*
- * 1. Safari doesn't have a focus state. Using active instead.
- */
-/* Webkit */
-.uk-range::-webkit-slider-runnable-track {
-  height: 3px;
-  background: #ebebeb;
-}
-.uk-range:focus::-webkit-slider-runnable-track,
-.uk-range:active::-webkit-slider-runnable-track {
-  background: #dedede;
-}
-/* Firefox */
-.uk-range::-moz-range-track {
-  height: 3px;
-  background: #ebebeb;
-}
-.uk-range:focus::-moz-range-track {
-  background: #dedede;
-}
-/* Edge */
-.uk-range::-ms-fill-lower,
-.uk-range::-ms-fill-upper {
-  height: 3px;
-  background: #ebebeb;
-}
-.uk-range:focus::-ms-fill-lower,
-.uk-range:focus::-ms-fill-upper {
-  background: #dedede;
-}
 /* ========================================================================
    Component: Form
  ========================================================================== */
@@ -1665,7 +1601,6 @@ select.uk-form-width-xsmall {
   display: none !important;
 }
 /* Radio and checkbox
- * Note: Does not work in IE11
  ========================================================================== */
 /*
  * 1. Style
@@ -2124,27 +2059,23 @@ select.uk-form-width-xsmall {
    Component: Progress
  ========================================================================== */
 /*
- * 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- * 2. Remove default style
- * 3. Behave like a block element
- * 4. Remove borders in Firefox and Edge
- * 5. Set background color for progress container in Firefox, IE11 and Edge
- * 6. Style
+ * 1. Add the correct vertical alignment in all browsers.
+ * 2. Behave like a block element.
+ * 3. Remove borders in Firefox.
+ * 4. Remove default style in Chrome, Safari and Edge.
+ * 5. Style
  */
 .uk-progress {
   /* 1 */
   vertical-align: baseline;
   /* 2 */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  /* 3 */
   display: block;
   width: 100%;
-  /* 4 */
+  /* 3 */
   border: 0;
-  /* 5 */
+  /* 4 */
   background-color: #f8f8f8;
-  /* 6 */
+  /* 5 */
   margin-bottom: 20px;
   height: 15px;
 }
@@ -2153,25 +2084,15 @@ select.uk-form-width-xsmall {
   margin-top: 20px;
 }
 /*
- * Remove animated circles for indeterminate state in IE11 and Edge
- */
-.uk-progress:indeterminate {
-  color: transparent;
-}
-/*
- * Progress container
- * 2. Remove progress bar for indeterminate state in Firefox
+ * Show background color set on `uk-progress` in Chrome, Safari and Edge.
  */
 .uk-progress::-webkit-progress-bar {
-  background-color: #f8f8f8;
-}
-/* 2 */
-.uk-progress:indeterminate::-moz-progress-bar {
-  width: 0;
+  background-color: transparent;
 }
 /*
- * Progress bar
- * 1. Remove right border in IE11 and Edge
+ * Progress Bar
+ * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
+ *    https://bugzilla.mozilla.org/show_bug.cgi?id=662351
  */
 .uk-progress::-webkit-progress-value {
   background-color: #1e87f0;
@@ -2179,12 +2100,8 @@ select.uk-form-width-xsmall {
 }
 .uk-progress::-moz-progress-bar {
   background-color: #1e87f0;
-}
-.uk-progress::-ms-fill {
-  background-color: #1e87f0;
-  transition: width 0.6s ease;
   /* 1 */
-  border: 0;
+  transition: width 0.6s ease;
 }
 /* ========================================================================
    Component: Section
@@ -3511,10 +3428,8 @@ select.uk-form-width-xsmall {
 /*
  * 1. Create position context for spinner and close button
  * 2. Dimensions
- * 3. Fix `max-width: 100%` not working in combination with flex and responsive images in IE11
- *    `!important` needed to overwrite `uk-width-auto`. See `#modal-media-image` in tests
- * 4. Style
- * 5. Slide-in transition
+ * 3. Style
+ * 4. Slide-in transition
  */
 .uk-modal-dialog {
   /* 1 */
@@ -3524,10 +3439,8 @@ select.uk-form-width-xsmall {
   margin: 0 auto;
   width: 600px;
   /* 3 */
-  max-width: calc(100% - 0.01px) !important;
-  /* 4 */
   background: #fff;
-  /* 5 */
+  /* 4 */
   opacity: 0;
   transform: translateY(-100px);
   transition: 0.3s linear;
@@ -3681,7 +3594,6 @@ select.uk-form-width-xsmall {
  * 2. Take the full width
  * 3. Clip child elements, e.g. for `uk-cover`
  * 4. Optimize animation
- * 5. Disable horizontal panning gestures in IE11 and Edge
  */
 .uk-slideshow-items > * {
   /* 1 */
@@ -3695,8 +3607,6 @@ select.uk-form-width-xsmall {
   overflow: hidden;
   /* 4 */
   will-change: transform, opacity;
-  /* 5 */
-  touch-action: pan-y;
 }
 /*
  * Hide not active items
@@ -3763,7 +3673,6 @@ select.uk-form-width-xsmall {
  * 1. Let items take content dimensions (0 0 auto)
  *    `max-width` needed to keep image responsiveness and prevent content overflow
  * 3. Create position context
- * 4. Disable horizontal panning gestures in IE11 and Edge
  */
 .uk-slider-items > * {
   /* 1 */
@@ -3771,8 +3680,6 @@ select.uk-form-width-xsmall {
   max-width: 100%;
   /* 3 */
   position: relative;
-  /* 4 */
-  touch-action: pan-y;
 }
 /* ========================================================================
    Component: Sticky
@@ -4075,9 +3982,6 @@ select.uk-form-width-xsmall {
 /*
  * Pass fill character to JS
  */
-.uk-leader-fill-content::before {
-  content: '.';
-}
 :root {
   --uk-leader-fill-content: '.';
 }
@@ -5825,7 +5729,6 @@ ul.uk-nav-sub {
  * 4. Optimize animation
  * 5. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
- *    Using `vh` and `vw` to make responsive image work in IE11
  */
 .uk-lightbox-items > * {
   /* 1 */
@@ -6860,24 +6763,20 @@ ul.uk-nav-sub {
 /* Background modifier
  ========================================================================== */
 /*
- * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
- *    Default color is set to transparent
- * 2. Container fits the text
- * 3. Fallback color for IE11
+ * 1. The background clips to the foreground text. Works in all browsers.
+ * 2. Default color is set to transparent.
+ * 3. Container fits the text
+ * 4. Style
  */
 .uk-text-background {
   /* 1 */
   -webkit-background-clip: text;
   /* 2 */
-  display: inline-block;
+  color: transparent !important;
   /* 3 */
-  color: #1e87f0 !important;
-}
-@supports (-webkit-background-clip: text) {
-  .uk-text-background {
-    background-color: #1e87f0;
-    color: transparent !important;
-  }
+  display: inline-block;
+  /* 4 */
+  background-color: #1e87f0;
 }
 /* Alignment modifiers
  ========================================================================== */
@@ -6983,22 +6882,17 @@ td.uk-text-truncate {
   max-width: 0;
 }
 /*
- * 1. Wrap long words onto the next line and break them if they are too long to fit
- * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
- * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
- *    Must use `break-all` to support IE11 and Edge
- * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed
+ * Wrap long words onto the next line and break them if they are too long to fit.
+ * 1. Make it work with table cells in all browsers.
+ * Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
  */
 .uk-text-break {
-  /* 1 */
   overflow-wrap: break-word;
-  /* 2 */
-  word-wrap: break-word;
 }
-/* 3 */
+/* 1 */
 th.uk-text-break,
 td.uk-text-break {
-  word-break: break-all;
+  word-break: break-word;
 }
 /* ========================================================================
    Component: Column