uikit 3.24.2 → 3.24.3-dev.63b12446

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.24.2",
+  "version": "3.24.3-dev.63b12446",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -21,21 +21,21 @@
   "homepage": "https://getuikit.com",
   "devDependencies": {
     "@eslint/js": "^9.19.0",
-    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-replace": "^6.0.1",
     "archiver": "^7.0.1",
-    "camelcase": "^8.0.0",
+    "camelcase": "^9.0.0",
     "chokidar-cli": "^3.0.0",
     "clean-css": "^5.3.3",
     "dateformat": "^5.0.3",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.27.0",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "execa": "^9.3.0",
     "fs-extra": "^11.3.0",
-    "glob": "^11.0.1",
+    "glob": "^13.0.0",
     "globals": "^16.0.0",
-    "inquirer": "^12.4.1",
+    "inquirer": "^13.0.1",
     "less": "^4.2.2",
     "minimist": "^1.2.8",
     "number-precision": "^1.6.0",

package/src/images/components/accordion-icon.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
+    <style>
+
+        .uk-accordion-icon svg > [class*='line-'] {
+            transition: 0.2s ease-out;
+            transition-property: transform, opacity;
+            transform-origin: center;
+        }
+
+        [aria-expanded="true"] .uk-accordion-icon svg > .line-1 {
+            transform: rotate(-45deg);
+            opacity: 0;
+        }
+        
+        [aria-expanded="true"] .uk-accordion-icon svg > .line-2 { transform: rotate(90deg); }
+
+    </style>
+    <rect class="line-1" fill="#000" width="13" height="1" x="0" y="6" />
+    <rect class="line-2" fill="#000" width="1" height="13" x="6" y="0" />
+</svg>

package/src/js/components/internal/slider-transitioner.js

@@ -160,7 +160,7 @@ export function getWidth(list, index) {
 }
 
 function centerEl(el, list) {
-    return dimensions(list).width / 2 - dimensions(el).width / 2;
+    return (dimensions(list).width - dimensions(el).width) / 2;
 }
 
 function getElLeft(el, list) {

package/src/js/components/slider.js

@@ -98,7 +98,7 @@ export default {
                             width / 2
                     ) {
                         sets.push(i);
-                        left = width / 2 - slideWidth / 2;
+                        left = (width - slideWidth) / 2;
                     }
                 } else if (left === 0) {
                     sets.push(Math.min(i, this.maxIndex));
@@ -228,7 +228,7 @@ export default {
             }
 
             const next = this.slides[index];
-            let width = dimensions(this.list).width / 2 - dimensions(next).width / 2;
+            let width = (dimensions(this.list).width - dimensions(next).width) / 2;
             let j = 0;
 
             while (width > 0) {
@@ -290,7 +290,7 @@ export default {
             const left = -width;
             const right = width * 2;
             const slideWidth = dimensions(this.slides[this.index]).width;
-            const slideLeft = this.center ? width / 2 - slideWidth / 2 : 0;
+            const slideLeft = this.center ? (width - slideWidth) / 2 : 0;
             const slides = new Set();
             for (const i of [-1, 1]) {
                 let currentLeft = slideLeft + (i > 0 ? slideWidth : 0);
@@ -308,7 +308,7 @@ export default {
             let index = -1;
             const scrollDist = this.center
                 ? getWidth(this.list) -
-                  (dimensions(this.slides[0]).width / 2 + dimensions(last(this.slides)).width / 2)
+                  (dimensions(this.slides[0]).width + dimensions(last(this.slides)).width) / 2
                 : getWidth(this.list, this.maxIndex);
 
             let dist = percent * scrollDist;
@@ -317,7 +317,7 @@ export default {
             do {
                 const slideWidth = dimensions(this.slides[++index]).width;
                 const slideDist = this.center
-                    ? slideWidth / 2 + dimensions(this.slides[index + 1]).width / 2
+                    ? (slideWidth + dimensions(this.slides[index + 1]).width) / 2
                     : slideWidth;
                 slidePercent = (dist / slideDist) % 1;
                 dist -= slideDist;
@@ -363,8 +363,7 @@ function isFinite(list, center) {
             }
             diff = Math.max(
                 diff,
-                slideWidth / 2 +
-                    dimensions(slides[getIndex(+index + i, slides)]).width / 2 -
+                (slideWidth + dimensions(slides[getIndex(+index + i, slides)]).width) / 2 -
                     (left - listHalf),
             );
         }

package/src/js/core/accordion.js

@@ -47,8 +47,8 @@ export default {
         collapsible: true,
         multiple: false,
         clsOpen: 'uk-open',
-        toggle: '> .uk-accordion-title',
-        content: '> .uk-accordion-content',
+        toggle: '.uk-accordion-title',
+        content: '.uk-accordion-content',
         offset: 0,
     },
 
@@ -118,7 +118,7 @@ export default {
             },
         },
         {
-            name: 'shown hidden',
+            name: 'show hide shown hidden',
 
             self: true,
 

package/src/js/core/icon.js

@@ -13,6 +13,7 @@ import {
     isTag,
     swap,
 } from 'uikit-util';
+import accordionIcon from '../../images/components/accordion-icon.svg';
 import closeIcon from '../../images/components/close-icon.svg';
 import closeLarge from '../../images/components/close-large.svg';
 import dropParentIcon from '../../images/components/drop-parent-icon.svg';
@@ -40,6 +41,7 @@ const icons = {
     spinner,
     totop,
     marker,
+    'accordion-icon': accordionIcon,
     'close-icon': closeIcon,
     'close-large': closeLarge,
     'drop-parent-icon': dropParentIcon,

package/src/js/core/index.js

@@ -32,6 +32,7 @@ export { default as Video } from './video';
 
 // Icon components
 export {
+    IconComponent as AccordionIcon,
     Close,
     IconComponent as DropParentIcon,
     Marker,

package/src/less/components/accordion.less

@@ -6,6 +6,8 @@
 // Sub-objects:     `uk-accordion-title`
 //                  `uk-accordion-content`
 //
+// Modifiers:       `uk-accordion-default`
+//
 // States:          `uk-open`
 //
 // ========================================================================
@@ -14,14 +16,14 @@
 // Variables
 // ========================================================================
 
-@accordion-item-margin-top:                    @global-margin;
+@accordion-default-item-margin-top:             @global-margin;
 
-@accordion-title-font-size:                    @global-medium-font-size;
-@accordion-title-line-height:                  1.4;
-@accordion-title-color:                        @global-emphasis-color;
-@accordion-title-hover-color:                  @global-color;
+@accordion-default-title-font-size:             @global-medium-font-size;
+@accordion-default-title-line-height:           1.4;
+@accordion-default-title-color:                 @global-emphasis-color;
+@accordion-default-title-hover-color:           @global-color;
 
-@accordion-content-margin-top:                 @global-margin;
+@accordion-default-content-margin-top:          @global-margin;
 
 
 /* ========================================================================
@@ -34,50 +36,88 @@
     .hook-accordion();
 }
 
+.uk-accordion-title { display: block; }
+
+.uk-accordion-content { display: flow-root; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-accordion-content > :last-child { margin-bottom: 0; }
+
 
-/* Item
+/* Default modifier
  ========================================================================== */
 
-.uk-accordion > * {
-    .hook-accordion-item();
+/*
+ * Item
+ */
+
+.uk-accordion-default > * {
+    .hook-accordion-default-item();
 }
 
-.uk-accordion > :nth-child(n+2) { margin-top: @accordion-item-margin-top; }
+.uk-accordion-default > :nth-child(n+2) { margin-top: @accordion-default-item-margin-top; }
+
+/* Active */
+.uk-accordion-default > .uk-open {
+    .hook-accordion-default-item-active();
+}
 
+/*
+ * Title
+ */
 
-/* Title
- ========================================================================== */
+/*
+* 1. Center content vertically, e.g. an icon
+* 2. Imitate white space gap when using flexbox
+* 3. Reset link
+ */
 
-.uk-accordion-title {
-    display: block;
-    font-size: @accordion-title-font-size;
-    line-height: @accordion-title-line-height;
-    color: @accordion-title-color;
-    .hook-accordion-title();
+.uk-accordion-default .uk-accordion-title {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
+    font-size: @accordion-default-title-font-size;
+    line-height: @accordion-default-title-line-height;
+    color: @accordion-default-title-color;
+    .hook-accordion-default-title();
 }
 
 /* Hover */
-.uk-accordion-title:hover {
-    color: @accordion-title-hover-color;
+.uk-accordion-default .uk-accordion-title:hover {
+    color: @accordion-default-title-hover-color;
     text-decoration: none;
-    .hook-accordion-title-hover();
+    .hook-accordion-default-title-hover();
 }
 
+/* Active */
+.uk-accordion-default > .uk-open .uk-accordion-title {
+    .hook-accordion-default-title-active();
+}
 
-/* Content
- ========================================================================== */
+/*
+ * Icon
+ */
 
-.uk-accordion-content {
-    display: flow-root;
-    margin-top: @accordion-content-margin-top;
-    .hook-accordion-content();
+.uk-accordion-default .uk-accordion-icon {
+    flex: none;
+    margin-left: auto;
+    .hook-accordion-default-icon();
 }
 
 /*
- * Remove margin from the last-child
+ * Content
  */
 
- .uk-accordion-content > :last-child { margin-bottom: 0; }
+.uk-accordion-default .uk-accordion-content {
+    margin-top: @accordion-default-content-margin-top;
+    .hook-accordion-default-content();
+}
 
 
 // Hooks
@@ -86,37 +126,60 @@
 .hook-accordion-misc();
 
 .hook-accordion() {}
-.hook-accordion-item() {}
-.hook-accordion-title() {}
-.hook-accordion-title-hover() {}
-.hook-accordion-content() {}
+.hook-accordion-default-item() {}
+.hook-accordion-default-item-active() {}
+.hook-accordion-default-title() {}
+.hook-accordion-default-title-hover() {}
+.hook-accordion-default-title-active() {}
+.hook-accordion-default-icon() {}
+.hook-accordion-default-content() {}
 .hook-accordion-misc() {}
 
 
 // Inverse
 // ========================================================================
 
-@inverse-accordion-title-color:             @inverse-global-emphasis-color;
-@inverse-accordion-title-hover-color:       @inverse-global-color;
+@inverse-accordion-default-title-color:             @inverse-global-emphasis-color;
+@inverse-accordion-default-title-hover-color:       @inverse-global-color;
 
 .hook-inverse() {
 
-    .uk-accordion > * {
-        .hook-inverse-accordion-item();
+    .uk-accordion-default > * {
+        .hook-inverse-accordion-default-item();
+    }
+
+    .uk-accordion-default > .uk-open {
+        .hook-inverse-accordion-default-item-active();
+    }
+
+    .uk-accordion-default .uk-accordion-title {
+        color: @inverse-accordion-default-title-color;
+        .hook-inverse-accordion-default-title();
+    }
+
+    .uk-accordion-default .uk-accordion-title:hover {
+        color: @inverse-accordion-default-title-hover-color;
+        .hook-inverse-accordion-default-title-hover();
+    }
+
+    .uk-accordion-default .uk-accordion-title:active {
+        .hook-inverse-accordion-default-title-active();
     }
 
-    .uk-accordion-title {
-        color: @inverse-accordion-title-color;
-        .hook-inverse-accordion-title();
+    .uk-accordion-default .uk-accordion-icon {
+        .hook-inverse-accordion-default-icon();
     }
 
-    .uk-accordion-title:hover {
-        color: @inverse-accordion-title-hover-color;
-        .hook-inverse-accordion-title-hover();
+    .uk-accordion-default .uk-accordion-content {
+        .hook-inverse-accordion-default-content();
     }
 
 }
 
-.hook-inverse-accordion-item() {}
-.hook-inverse-accordion-title() {}
-.hook-inverse-accordion-title-hover() {}
+.hook-inverse-accordion-default-item() {}
+.hook-inverse-accordion-default-item-active() {}
+.hook-inverse-accordion-default-title() {}
+.hook-inverse-accordion-default-title-hover() {}
+.hook-inverse-accordion-default-title-active() {}
+.hook-inverse-accordion-default-icon() {}
+.hook-inverse-accordion-default-content() {}

package/src/less/components/card.less

@@ -75,7 +75,7 @@
 @card-secondary-hover-background:              darken(@card-secondary-background, 5%);
 @card-secondary-color-mode:                    light;
 
-@card-overlay-background:                      fade(@global-background, 80%);
+@card-overlay-background:                      fade(@global-background, 90%);
 @card-overlay-color:                           @global-color;
 @card-overlay-title-color:                     @global-emphasis-color;
 @card-overlay-hover-background:                fadein(@card-overlay-background, 10%);

package/src/less/components/nav.less

@@ -185,6 +185,7 @@ ul.uk-nav-sub {
  ========================================================================== */
 
 .uk-nav-parent-icon {
+    flex: none;
     margin-left: auto;
     transition: transform 0.3s ease-out;
 }

package/src/less/components/overlay.less

@@ -17,10 +17,10 @@
 @overlay-padding-horizontal:                    @global-gutter;
 @overlay-padding-vertical:                      @global-gutter;
 
-@overlay-default-background:                    fade(@global-background, 80%);
+@overlay-default-background:                    fade(@global-background, 90%);
 @overlay-default-color-mode:                    dark;
 
-@overlay-primary-background:                    fade(@global-secondary-background, 80%);
+@overlay-primary-background:                    fade(@global-secondary-background, 90%);
 @overlay-primary-color-mode:                    light;
 
 

package/src/less/theme/accordion.less

@@ -11,10 +11,7 @@
 // New
 //
 
-@accordion-icon-margin-left:                   10px;
-@accordion-icon-color:                         @global-color;
-@internal-accordion-open-image:                "../../images/backgrounds/accordion-open.svg";
-@internal-accordion-close-image:               "../../images/backgrounds/accordion-close.svg";
+@accordion-default-icon-color:                 @global-color;
 
 
 // Component
@@ -23,41 +20,38 @@
 .hook-accordion() {}
 
 
-// Item
-// ========================================================================
-
-.hook-accordion-item() {}
+/* Default modifier
+ ========================================================================== */
 
+/*
+ * Item
+ */
 
-// Title
-// ========================================================================
+.hook-accordion-default-item() {}
 
-.hook-accordion-title() {
+.hook-accordion-default-item-active() {}
 
-    overflow: hidden;
+/*
+ * Title
+ */
 
-    &::before {
-        content: "";
-        width: (@accordion-title-line-height * 1em);
-        height: (@accordion-title-line-height * 1em);
-        margin-left: @accordion-icon-margin-left;
-        float: right;
-        .svg-fill(@internal-accordion-close-image, "#000", @accordion-icon-color);
-        background-repeat: no-repeat;
-        background-position: 50% 50%;
-    }
+.hook-accordion-default-title() {}
 
-    .uk-open > &::before { .svg-fill(@internal-accordion-open-image, "#000", @accordion-icon-color); }
+.hook-accordion-default-title-hover() {}
 
-}
+.hook-accordion-default-title-active() {}
 
-.hook-accordion-title-hover() {}
+/*
+ * Icon
+ */
 
+.hook-accordion-default-icon() { color: @accordion-default-icon-color; }
 
-// Content
-// ========================================================================
+/*
+ * Content
+ */
 
-.hook-accordion-content() {}
+.hook-accordion-default-content() {}
 
 
 // Miscellaneous
@@ -65,18 +59,17 @@
 
 .hook-accordion-misc() {}
 
+
 // Inverse
 // ========================================================================
 
-.hook-inverse-accordion-item() {}
-
-.hook-inverse-accordion-title() {}
-.hook-inverse-accordion-title-hover() {}
-
-.hook-inverse() {
-
-    .uk-accordion-title::before { .svg-fill(@internal-accordion-close-image, "#000", @inverse-global-color); }
+@inverse-accordion-default-icon-color:         @inverse-global-color;
 
-    .uk-open > .uk-accordion-title::before { .svg-fill(@internal-accordion-open-image, "#000", @inverse-global-color); }
+.hook-inverse-accordion-default-item() {}
+.hook-inverse-accordion-default-item-active() {}
 
-}
+.hook-inverse-accordion-default-title() {}
+.hook-inverse-accordion-default-title-hover() {}
+.hook-inverse-accordion-default-title-active() {}
+.hook-inverse-accordion-default-icon() { color: @inverse-accordion-default-icon-color; }
+.hook-inverse-accordion-default-content() {}

package/src/scss/components/accordion.scss

@@ -8,6 +8,8 @@
 // Sub-objects:     `uk-accordion-title`
 //                  `uk-accordion-content`
 //
+// Modifiers:       `uk-accordion-default`
+//
 // States:          `uk-open`
 //
 // ========================================================================
@@ -30,50 +32,88 @@
     @if(meta.mixin-exists(hook-accordion)) {@include hook-accordion();}
 }
 
+.uk-accordion-title { display: block; }
+
+.uk-accordion-content { display: flow-root; }
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-accordion-content > :last-child { margin-bottom: 0; }
+
 
-/* Item
+/* Default modifier
  ========================================================================== */
 
-.uk-accordion > * {
-    @if(meta.mixin-exists(hook-accordion-item)) {@include hook-accordion-item();}
+/*
+ * Item
+ */
+
+.uk-accordion-default > * {
+    @if(meta.mixin-exists(hook-accordion-default-item)) {@include hook-accordion-default-item();}
 }
 
-.uk-accordion > :nth-child(n+2) { margin-top: $accordion-item-margin-top; }
+.uk-accordion-default > :nth-child(n+2) { margin-top: $accordion-default-item-margin-top; }
+
+/* Active */
+.uk-accordion-default > .uk-open {
+    @if(meta.mixin-exists(hook-accordion-default-item-active)) {@include hook-accordion-default-item-active();}
+}
 
+/*
+ * Title
+ */
 
-/* Title
- ========================================================================== */
+/*
+* 1. Center content vertically, e.g. an icon
+* 2. Imitate white space gap when using flexbox
+* 3. Reset link
+ */
 
-.uk-accordion-title {
-    display: block;
-    font-size: $accordion-title-font-size;
-    line-height: $accordion-title-line-height;
-    color: $accordion-title-color;
-    @if(meta.mixin-exists(hook-accordion-title)) {@include hook-accordion-title();}
+.uk-accordion-default .uk-accordion-title {
+    /* 1 */
+    display: flex;
+    align-items: center;
+    /* 2 */
+    column-gap: 0.25em;
+    /* 3 */
+    font-size: $accordion-default-title-font-size;
+    line-height: $accordion-default-title-line-height;
+    color: $accordion-default-title-color;
+    @if(meta.mixin-exists(hook-accordion-default-title)) {@include hook-accordion-default-title();}
 }
 
 /* Hover */
-.uk-accordion-title:hover {
-    color: $accordion-title-hover-color;
+.uk-accordion-default .uk-accordion-title:hover {
+    color: $accordion-default-title-hover-color;
     text-decoration: none;
-    @if(meta.mixin-exists(hook-accordion-title-hover)) {@include hook-accordion-title-hover();}
+    @if(meta.mixin-exists(hook-accordion-default-title-hover)) {@include hook-accordion-default-title-hover();}
 }
 
+/* Active */
+.uk-accordion-default > .uk-open .uk-accordion-title {
+    @if(meta.mixin-exists(hook-accordion-default-title-active)) {@include hook-accordion-default-title-active();}
+}
 
-/* Content
- ========================================================================== */
+/*
+ * Icon
+ */
 
-.uk-accordion-content {
-    display: flow-root;
-    margin-top: $accordion-content-margin-top;
-    @if(meta.mixin-exists(hook-accordion-content)) {@include hook-accordion-content();}
+.uk-accordion-default .uk-accordion-icon {
+    flex: none;
+    margin-left: auto;
+    @if(meta.mixin-exists(hook-accordion-default-icon)) {@include hook-accordion-default-icon();}
 }
 
 /*
- * Remove margin from the last-child
+ * Content
  */
 
- .uk-accordion-content > :last-child { margin-bottom: 0; }
+.uk-accordion-default .uk-accordion-content {
+    margin-top: $accordion-default-content-margin-top;
+    @if(meta.mixin-exists(hook-accordion-default-content)) {@include hook-accordion-default-content();}
+}
 
 
 // Hooks
@@ -82,10 +122,13 @@
 @if(meta.mixin-exists(hook-accordion-misc)) {@include hook-accordion-misc();}
 
 // @mixin hook-accordion(){}
-// @mixin hook-accordion-item(){}
-// @mixin hook-accordion-title(){}
-// @mixin hook-accordion-title-hover(){}
-// @mixin hook-accordion-content(){}
+// @mixin hook-accordion-default-item(){}
+// @mixin hook-accordion-default-item-active(){}
+// @mixin hook-accordion-default-title(){}
+// @mixin hook-accordion-default-title-hover(){}
+// @mixin hook-accordion-default-title-active(){}
+// @mixin hook-accordion-default-icon(){}
+// @mixin hook-accordion-default-content(){}
 // @mixin hook-accordion-misc(){}
 
 
@@ -95,6 +138,10 @@
 
 
 
-// @mixin hook-inverse-accordion-item(){}
-// @mixin hook-inverse-accordion-title(){}
-// @mixin hook-inverse-accordion-title-hover(){}
+// @mixin hook-inverse-accordion-default-item(){}
+// @mixin hook-inverse-accordion-default-item-active(){}
+// @mixin hook-inverse-accordion-default-title(){}
+// @mixin hook-inverse-accordion-default-title-hover(){}
+// @mixin hook-inverse-accordion-default-title-active(){}
+// @mixin hook-inverse-accordion-default-icon(){}
+// @mixin hook-inverse-accordion-default-content(){}