uikit 3.21.14-dev.df667ac16 → 3.21.14

package/CHANGELOG.md

@@ -1,36 +1,15 @@
 # Changelog
 
-## WIP Lightbox
-
-### Added
-
-- Add `slidnav` option to disable slidenav to Lightbox component
-- Add `nav` option to show a vertical thumbnav or dotnav to Lightbox component
-- Add `counter` option to show counter with current item number and total number of items to Lightbox component
-- Add `video-autoplay: inline` option to autoplay video without controls and muted to Lightbox component
-- Add zoom behavior to images and inline videos if they are higher than the viewport to Lightbox component
-- Allow `template` option to reference a `template` element in the DOM for the lightbox layout in Lightbox component
-- Add hidden class to hide empty elements to Visibility component
-- Add inverse style for form rang to Form component
-- Add close-circle and arrow-down-arrow-up icons
-
-### Changed
-
-- IMPORTANT: Remove `@lightbox-toolbar-icon-*` and `@lightbox-button-*`from Lightbox component
-- IMPORTANT: Rename `@lightbox-toolbar-*` to `@lightbox-caption-*` in Lightbox component
-- IMPORTANT: Rename `@lightbox-item-color` to `@lightbox-color` in Lightbox component
-- Set `delay-controls: 0` prevents hiding controls in Lightbox component
-- Update default lightbox template in Lightbox component
-- Change padding calculation of search box and search icon in Search component
-- Change search style medium and large to look the same as default in Search component
+## 3.21.14 (November 21, 2024)
 
 ### Fixed
 
+- Fix child components in Dropdown components toggling transparency in Navbar component
+- Fix Navbar toggles Dropdown component when hovering with mouse on initial page load
+- Fix Scrollspy Nav component checks if targets exists before activating state
+- Fix Slideshow component list does not fill available space in Safari
 - Fix hidden class keep showing elements on hover if a link is clicked in Visibility component
-- Fix spaces in the markup affecting the horizontal divider margin in Breadcrumb component
 - Fix showing elements if an element has focus within in Transition component
-- Fix Slideshow component list does not fill available space in Safari
-- Fix Scrollspy Nav component checks if targets exists before activating state
 
 ## 3.21.13 (September 26, 2024)
 

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

@@ -1,4 +1,4 @@
-/*! UIkit 3.21.14-dev.df667ac16 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.21.14 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */
@@ -1727,7 +1727,7 @@ select.uk-form-width-xsmall {
  * 1. Position and resize the form control to always cover its container
  * 2. Required for Firefox for positioning to the left
  * 3. Required for Webkit to make `height` work
- * 4. Hide controls and show cursor
+ * 4. Hide controle and show cursor
  * 5. Needed for the cursor
  * 6. Clip height caused by 5. Needed for Webkit only
  */
@@ -2047,7 +2047,7 @@ select.uk-form-width-xsmall {
 /* Group
  ========================================================================== */
 /*
- * 1. Using `flex` instead of `inline-block` to prevent whitespace between child elements
+ * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
  * 2. Behave like button
  * 3. Create position context
  */
@@ -2696,7 +2696,7 @@ select.uk-form-width-xsmall {
    Component: Totop
  ========================================================================== */
 /*
- * Adopts `uk-icon`
+ * Addopts `uk-icon`
  */
 .uk-totop {
   padding: 5px;
@@ -3144,8 +3144,7 @@ select.uk-form-width-xsmall {
  * Icon
  */
 .uk-search-default .uk-search-icon {
-  padding-right: 10px;
-  padding-left: 10px;
+  width: 40px;
 }
 .uk-search-default:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
   padding-right: 40px;
@@ -3175,8 +3174,7 @@ select.uk-form-width-xsmall {
  * Icon
  */
 .uk-search-navbar .uk-search-icon {
-  padding-right: 10px;
-  padding-left: 10px;
+  width: 40px;
 }
 .uk-search-navbar:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
   padding-right: 40px;
@@ -3193,28 +3191,22 @@ select.uk-form-width-xsmall {
  * Input
  */
 .uk-search-medium .uk-search-input {
-  height: 55px;
-  padding-right: 12px;
-  padding-left: 12px;
-  background: #f8f8f8;
+  height: 40px;
+  background: transparent;
   font-size: 1.5rem;
 }
 /* Focus */
-.uk-search-medium .uk-search-input:focus {
-  background-color: #f3f3f3;
-}
 /*
  * Icon
  */
 .uk-search-medium .uk-search-icon {
-  padding-right: 12px;
-  padding-left: 12px;
+  width: 24px;
 }
 .uk-search-medium:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
-  padding-right: 48px;
+  padding-right: 34px;
 }
 .uk-search-medium:has(.uk-search-icon-flip) .uk-search-input {
-  padding-left: 48px;
+  padding-left: 34px;
 }
 /* Large modifier
  ========================================================================== */
@@ -3225,28 +3217,22 @@ select.uk-form-width-xsmall {
  * Input
  */
 .uk-search-large .uk-search-input {
-  height: 90px;
-  padding-right: 20px;
-  padding-left: 20px;
-  background: #f8f8f8;
+  height: 80px;
+  background: transparent;
   font-size: 2.625rem;
 }
 /* Focus */
-.uk-search-large .uk-search-input:focus {
-  background-color: #f3f3f3;
-}
 /*
  * Icon
  */
 .uk-search-large .uk-search-icon {
-  padding-right: 20px;
-  padding-left: 20px;
+  width: 40px;
 }
 .uk-search-large:has(.uk-search-icon:not(.uk-search-icon-flip)) .uk-search-input {
-  padding-right: 80px;
+  padding-right: 60px;
 }
 .uk-search-large:has(.uk-search-icon-flip) .uk-search-input {
-  padding-left: 80px;
+  padding-left: 60px;
 }
 /* Toggle
  ========================================================================== */
@@ -5586,15 +5572,11 @@ ul.uk-nav-sub {
    Component: Breadcrumb
  ========================================================================== */
 /*
- * 1. Reset list
- * 2. Remove space between elements
+ * Reset list
  */
 .uk-breadcrumb {
-  /* 1 */
   padding: 0;
   list-style: none;
-  /* 2 */
-  font-size: 0;
 }
 /*
  * 1. Doesn't generate any box and replaced by child boxes
@@ -5629,7 +5611,7 @@ ul.uk-nav-sub {
   content: "/";
   display: inline-block;
   /* 1 */
-  margin: 0 20px;
+  margin: 0 calc(20px - 4px) 0 20px;
   /* 2 */
   font-size: 0.875rem;
   color: #999;
@@ -6023,10 +6005,8 @@ ul.uk-nav-sub {
  * 5. Mask the background page
  * 6. Fade-in transition
  * 7. Prevent cancellation of pointer events while dragging
- * 8. Style for count and spinner icon
  */
 .uk-lightbox {
-  --uk-inverse: light;
   /* 1 */
   display: none;
   /* 2 */
@@ -6043,8 +6023,6 @@ ul.uk-nav-sub {
   transition: opacity 0.15s linear;
   /* 7 */
   touch-action: pinch-zoom;
-  /* 8 */
-  color: rgba(255, 255, 255, 0.7);
 }
 /*
  * Open
@@ -6070,21 +6048,14 @@ ul.uk-nav-sub {
 .uk-lightbox-page {
   overflow: hidden;
 }
-/* Items
+/* Item
  ========================================================================== */
-/*
- * Reset list
- */
-.uk-lightbox-items {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
 /*
  * 1. Center child within the viewport
  * 2. Not visible by default
- * 3. Optimize animation
- * 4. Responsiveness
+ * 3. Color needed for spinner icon
+ * 4. Optimize animation
+ * 5. Responsiveness
  *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
  */
 .uk-lightbox-items > * {
@@ -6097,63 +6068,70 @@ ul.uk-nav-sub {
   /* 2 */
   display: none;
   justify-content: center;
-  align-items: flex-start;
+  align-items: center;
   /* 3 */
-  will-change: transform, opacity;
+  color: rgba(255, 255, 255, 0.7);
   /* 4 */
-  overflow: auto;
-}
-/* 2 */
-.uk-lightbox-items > .uk-active {
-  display: flex;
-}
-.uk-lightbox-items-fit > * {
-  align-items: center;
+  will-change: transform, opacity;
 }
-/* 4 */
-.uk-lightbox-items-fit > * > * {
+/* 5 */
+.uk-lightbox-items > * > * {
   max-width: 100vw;
   max-height: 100vh;
 }
-.uk-lightbox-items-fit > * > :not(iframe) {
+.uk-lightbox-items > * > :not(iframe) {
   width: auto;
   height: auto;
 }
-/* Zoom Cursor */
-.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover {
-  cursor: zoom-in;
-}
-.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover {
-  cursor: zoom-out;
+.uk-lightbox-items > .uk-active {
+  display: flex;
 }
-/* Navs
+/* Toolbar
  ========================================================================== */
-.uk-lightbox-thumbnav-vertical :where(img, video) {
-  max-width: 100px;
-}
-.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video) {
-  max-height: 100px;
+.uk-lightbox-toolbar {
+  padding: 10px 10px;
+  background: rgba(0, 0, 0, 0.3);
+  color: rgba(255, 255, 255, 0.7);
 }
-.uk-lightbox-thumbnav:empty,
-.uk-lightbox-dotnav:empty {
-  display: none;
+.uk-lightbox-toolbar > * {
+  color: rgba(255, 255, 255, 0.7);
 }
-/* Caption
+/* Toolbar Icon (Close)
  ========================================================================== */
-.uk-lightbox-caption:empty {
-  display: none;
+.uk-lightbox-toolbar-icon {
+  padding: 5px;
+  color: rgba(255, 255, 255, 0.7);
 }
-.uk-lightbox-caption {
-  padding: 10px 10px;
+/*
+ * Hover
+ */
+.uk-lightbox-toolbar-icon:hover {
+  color: #fff;
+}
+/* Button (Slidenav)
+ ========================================================================== */
+/*
+ * 1. Center icon vertically and horizontally
+ */
+.uk-lightbox-button {
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
   background: rgba(0, 0, 0, 0.3);
   color: rgba(255, 255, 255, 0.7);
+  /* 1 */
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
-.uk-lightbox-caption > * {
-  color: rgba(255, 255, 255, 0.7);
+/* Hover */
+.uk-lightbox-button:hover {
+  color: #fff;
 }
-/* Counter
+/* OnClick */
+/* Caption
  ========================================================================== */
-.uk-lightbox-counter:empty {
+.uk-lightbox-caption:empty {
   display: none;
 }
 /* Iframe
@@ -9350,8 +9328,7 @@ iframe[data-uk-cover] {
  * `hidden` attribute also set here to make it stronger
  */
 [hidden],
-.uk-hidden,
-.uk-hidden-empty:empty {
+.uk-hidden {
   display: none !important;
 }
 /* Phone landscape and bigger */
@@ -9484,10 +9461,6 @@ iframe[data-uk-cover] {
 .uk-overlay-primary,
 .uk-offcanvas-bar {
   color: rgba(255, 255, 255, 0.7);
-  /* Webkit */
-  /* Firefox */
-  /* Webkit */
-  /* Firefox */
 }
 .uk-light a,
 .uk-light .uk-link,
@@ -10391,95 +10364,6 @@ iframe[data-uk-cover] {
   background-color: rgba(255, 255, 255, 0.2);
   color: rgba(255, 255, 255, 0.7);
 }
-.uk-light .uk-range::-webkit-slider-runnable-track,
-.uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
-.uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
-.uk-tile-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-runnable-track,
-.uk-card-primary.uk-card-body .uk-range::-webkit-slider-runnable-track,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-runnable-track,
-.uk-card-secondary.uk-card-body .uk-range::-webkit-slider-runnable-track,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-runnable-track,
-.uk-overlay-primary .uk-range::-webkit-slider-runnable-track,
-.uk-offcanvas-bar .uk-range::-webkit-slider-runnable-track {
-  background: rgba(242, 242, 242, 0.1);
-}
-.uk-light .uk-range:focus::-webkit-slider-runnable-track,
-.uk-light .uk-range:active::-webkit-slider-runnable-track,
-.uk-section-primary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
-.uk-section-primary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
-.uk-section-secondary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
-.uk-section-secondary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
-.uk-tile-primary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
-.uk-tile-primary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-range:focus::-webkit-slider-runnable-track,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-range:active::-webkit-slider-runnable-track,
-.uk-card-primary.uk-card-body .uk-range:focus::-webkit-slider-runnable-track,
-.uk-card-primary.uk-card-body .uk-range:active::-webkit-slider-runnable-track,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:focus::-webkit-slider-runnable-track,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:active::-webkit-slider-runnable-track,
-.uk-card-secondary.uk-card-body .uk-range:focus::-webkit-slider-runnable-track,
-.uk-card-secondary.uk-card-body .uk-range:active::-webkit-slider-runnable-track,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:focus::-webkit-slider-runnable-track,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:active::-webkit-slider-runnable-track,
-.uk-overlay-primary .uk-range:focus::-webkit-slider-runnable-track,
-.uk-overlay-primary .uk-range:active::-webkit-slider-runnable-track,
-.uk-offcanvas-bar .uk-range:focus::-webkit-slider-runnable-track,
-.uk-offcanvas-bar .uk-range:active::-webkit-slider-runnable-track {
-  background: rgba(242, 242, 242, 0.15);
-}
-.uk-light .uk-range::-moz-range-track,
-.uk-section-primary:not(.uk-preserve-color) .uk-range::-moz-range-track,
-.uk-section-secondary:not(.uk-preserve-color) .uk-range::-moz-range-track,
-.uk-tile-primary:not(.uk-preserve-color) .uk-range::-moz-range-track,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-moz-range-track,
-.uk-card-primary.uk-card-body .uk-range::-moz-range-track,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-moz-range-track,
-.uk-card-secondary.uk-card-body .uk-range::-moz-range-track,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-moz-range-track,
-.uk-overlay-primary .uk-range::-moz-range-track,
-.uk-offcanvas-bar .uk-range::-moz-range-track {
-  background: rgba(242, 242, 242, 0.1);
-}
-.uk-light .uk-range:focus::-moz-range-track,
-.uk-section-primary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
-.uk-section-secondary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
-.uk-tile-primary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-range:focus::-moz-range-track,
-.uk-card-primary.uk-card-body .uk-range:focus::-moz-range-track,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-range:focus::-moz-range-track,
-.uk-card-secondary.uk-card-body .uk-range:focus::-moz-range-track,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range:focus::-moz-range-track,
-.uk-overlay-primary .uk-range:focus::-moz-range-track,
-.uk-offcanvas-bar .uk-range:focus::-moz-range-track {
-  background: rgba(242, 242, 242, 0.15);
-}
-.uk-light .uk-range::-webkit-slider-thumb,
-.uk-section-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
-.uk-section-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
-.uk-tile-primary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-webkit-slider-thumb,
-.uk-card-primary.uk-card-body .uk-range::-webkit-slider-thumb,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-thumb,
-.uk-card-secondary.uk-card-body .uk-range::-webkit-slider-thumb,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-webkit-slider-thumb,
-.uk-overlay-primary .uk-range::-webkit-slider-thumb,
-.uk-offcanvas-bar .uk-range::-webkit-slider-thumb {
-  background: #ffffff;
-}
-.uk-light .uk-range::-moz-range-thumb,
-.uk-section-primary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
-.uk-section-secondary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
-.uk-tile-primary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-range::-moz-range-thumb,
-.uk-card-primary.uk-card-body .uk-range::-moz-range-thumb,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-range::-moz-range-thumb,
-.uk-card-secondary.uk-card-body .uk-range::-moz-range-thumb,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-range::-moz-range-thumb,
-.uk-overlay-primary .uk-range::-moz-range-thumb,
-.uk-offcanvas-bar .uk-range::-moz-range-thumb {
-  background: #ffffff;
-}
 .uk-light .uk-input,
 .uk-light .uk-select,
 .uk-light .uk-textarea,
@@ -11285,20 +11169,7 @@ iframe[data-uk-cover] {
 .uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input,
 .uk-overlay-primary .uk-search-medium .uk-search-input,
 .uk-offcanvas-bar .uk-search-medium .uk-search-input {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.uk-light .uk-search-medium .uk-search-input:focus,
-.uk-section-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
-.uk-section-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
-.uk-tile-primary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-search-medium .uk-search-input:focus,
-.uk-card-primary.uk-card-body .uk-search-medium .uk-search-input:focus,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input:focus,
-.uk-card-secondary.uk-card-body .uk-search-medium .uk-search-input:focus,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-medium .uk-search-input:focus,
-.uk-overlay-primary .uk-search-medium .uk-search-input:focus,
-.uk-offcanvas-bar .uk-search-medium .uk-search-input:focus {
-  background-color: rgba(255, 255, 255, 0.15);
+  background-color: transparent;
 }
 .uk-light .uk-search-large .uk-search-input,
 .uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input,
@@ -11311,20 +11182,7 @@ iframe[data-uk-cover] {
 .uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input,
 .uk-overlay-primary .uk-search-large .uk-search-input,
 .uk-offcanvas-bar .uk-search-large .uk-search-input {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.uk-light .uk-search-large .uk-search-input:focus,
-.uk-section-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
-.uk-section-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
-.uk-tile-primary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
-.uk-tile-secondary:not(.uk-preserve-color) .uk-search-large .uk-search-input:focus,
-.uk-card-primary.uk-card-body .uk-search-large .uk-search-input:focus,
-.uk-card-primary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input:focus,
-.uk-card-secondary.uk-card-body .uk-search-large .uk-search-input:focus,
-.uk-card-secondary > :not([class*="uk-card-media"]) .uk-search-large .uk-search-input:focus,
-.uk-overlay-primary .uk-search-large .uk-search-input:focus,
-.uk-offcanvas-bar .uk-search-large .uk-search-input:focus {
-  background-color: rgba(255, 255, 255, 0.15);
+  background-color: transparent;
 }
 .uk-light .uk-search-toggle,
 .uk-section-primary:not(.uk-preserve-color) .uk-search-toggle,