uikit 3.25.23-dev.cf3d285 → 3.25.23

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.25.23-dev.cf3d285",
+    "version": "3.25.23",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -31,7 +31,7 @@
         "url": "https://github.com/uikit/uikit/issues"
     },
     "homepage": "https://getuikit.com",
-    "packageManager": "pnpm@11.25.0",
+    "packageManager": "pnpm@12.4.1",
     "devDependencies": {
         "@eslint/js": "^10.0.1",
         "@rollup/plugin-alias": "^6.0.0",

package/src/js/api/component.js

@@ -2,7 +2,7 @@ import { $$, camelize, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
 import App from './app';
 
 const PREFIX = 'uk-';
-const DATA = '__uikit__';
+const elementComponents = new WeakMap();
 
 export const components = {};
 
@@ -60,7 +60,7 @@ export function createComponent(name, element, data, ...args) {
 }
 
 export function getComponents(element) {
-    return element?.[DATA] || {};
+    return elementComponents.get(element) || {};
 }
 
 export function getComponent(element, name) {
@@ -68,17 +68,21 @@ export function getComponent(element, name) {
 }
 
 export function attachToElement(element, instance) {
-    if (!element[DATA]) {
-        element[DATA] = {};
+    let components = elementComponents.get(element);
+
+    if (!components) {
+        components = {};
+        elementComponents.set(element, components);
     }
 
-    element[DATA][instance.$options.name] = instance;
+    components[instance.$options.name] = instance;
 }
 
 export function detachFromElement(element, instance) {
-    delete element[DATA]?.[instance.$options.name];
+    const components = elementComponents.get(element);
+    delete components?.[instance.$options.name];
 
-    if (isEmpty(element[DATA])) {
-        delete element[DATA];
+    if (isEmpty(components)) {
+        elementComponents.delete(element);
     }
 }

package/src/js/core/accordion.js

@@ -26,6 +26,8 @@ import { maybeDefaultPreventClick } from '../mixin/event';
 import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
 
+const wrappers = new WeakMap();
+
 export default {
     mixins: [Class, Togglable],
 
@@ -60,7 +62,9 @@ export default {
         },
 
         contents({ content }) {
-            return this.items.map((item) => item._wrapper?.firstElementChild || $(content, item));
+            return this.items.map(
+                (item) => wrappers.get(item)?.firstElementChild || $(content, item),
+            );
         },
     },
 
@@ -200,13 +204,13 @@ function hide(el, hide) {
 }
 
 async function transition(el, show, { content, duration, velocity, transition }) {
-    content = el._wrapper?.firstElementChild || $(content, el);
+    let wrapper = wrappers.get(el);
+    content = wrapper?.firstElementChild || $(content, el);
 
-    if (!el._wrapper) {
-        el._wrapper = wrapAll(content, '<div>');
+    if (!wrapper) {
+        wrapper = wrapAll(content, '<div>');
+        wrappers.set(el, wrapper);
     }
-
-    const wrapper = el._wrapper;
     css(wrapper, 'overflow', 'hidden');
     const currentHeight = toFloat(css(wrapper, 'height'));
 
@@ -224,7 +228,7 @@ async function transition(el, show, { content, duration, velocity, transition })
     await Transition.start(wrapper, { height: show ? endHeight : 0 }, duration, transition);
 
     unwrap(content);
-    delete el._wrapper;
+    wrappers.delete(el);
 
     if (!show) {
         hide(content, true);

package/src/js/core/drop.js

@@ -20,21 +20,17 @@ import {
     overflowParents,
     parent,
     pick,
-    pointerCancel,
-    pointerDown,
     pointerEnter,
     pointerLeave,
-    pointerUp,
     query,
     removeClass,
 } from 'uikit-util';
 import { generateId } from '../api/instance';
 import Class from '../mixin/class';
 import Container from '../mixin/container';
-import { maybeDefaultPreventClick } from '../mixin/event';
+import { maybeDefaultPreventClick, onEscape, onOutsidePointer } from '../mixin/event';
 import Position, { storeScrollPosition } from '../mixin/position';
 import Togglable from '../mixin/togglable';
-import { keyMap } from '../util/keys';
 import { preventBackgroundScroll } from '../util/scroll';
 
 export let active;
@@ -457,7 +453,6 @@ export default {
         },
     },
 };
-
 function getViewport(el, target) {
     return offsetViewport(overflowParents(target).find((parent) => parent.contains(el)));
 }
@@ -502,11 +497,7 @@ function listenForScroll(drop, fn = () => drop.$emit()) {
 }
 
 function listenForEscClose(drop) {
-    return on(document, 'keydown', (e) => {
-        if (e.keyCode === keyMap.ESC) {
-            drop.hide(false);
-        }
-    });
+    return onEscape(() => drop.hide(false));
 }
 
 function listenForScrollClose(drop) {
@@ -514,25 +505,12 @@ function listenForScrollClose(drop) {
 }
 
 function listenForBackgroundClose(drop) {
-    return on(document, pointerDown, ({ target }) => {
-        if (drop.$el.contains(target)) {
-            return;
-        }
-
-        once(
-            document,
-            `${pointerUp} ${pointerCancel} scroll`,
-            ({ defaultPrevented, type, target: newTarget }) => {
-                if (
-                    !defaultPrevented &&
-                    type === pointerUp &&
-                    target === newTarget &&
-                    !drop.targetEl?.contains(target)
-                ) {
-                    drop.hide(false);
-                }
-            },
-            true,
-        );
-    });
+    return onOutsidePointer(
+        (target) => {
+            if (!drop.targetEl?.contains(target)) {
+                drop.hide(false);
+            }
+        },
+        (target) => !drop.$el.contains(target),
+    );
 }

package/src/js/mixin/event.js

@@ -1,5 +1,36 @@
+import { pointerCancel, pointerDown, pointerUp } from '../util/env';
+import { on, once } from '../util/event';
+import { keyMap } from '../util/keys';
+
 export function maybeDefaultPreventClick(e) {
     if (e.target.closest('a[href="#"],a[href=""]')) {
         e.preventDefault();
     }
 }
+
+export function onEscape(handler, isEligible = () => true) {
+    return on(document, 'keydown', (e) => {
+        if (e.keyCode === keyMap.ESC && isEligible()) {
+            handler(e);
+        }
+    });
+}
+
+export function onOutsidePointer(handler, isOutside, isEligible) {
+    return on(document, pointerDown, ({ target }) => {
+        if (!isOutside(target) || (isEligible && !isEligible())) {
+            return;
+        }
+
+        once(
+            document,
+            `${pointerUp} ${pointerCancel} scroll`,
+            ({ defaultPrevented, type, target: newTarget }) => {
+                if (!defaultPrevented && type === pointerUp && target === newTarget) {
+                    handler(target);
+                }
+            },
+            true,
+        );
+    });
+}

package/src/js/mixin/modal.js

@@ -13,9 +13,6 @@ import {
     on,
     once,
     parent,
-    pointerCancel,
-    pointerDown,
-    pointerUp,
     removeClass,
     toFloat,
 } from 'uikit-util';
@@ -23,11 +20,13 @@ import { awaitFrame } from '../util/await';
 import { preventBackgroundScroll } from '../util/scroll';
 import Class from './class';
 import Container from './container';
-import { maybeDefaultPreventClick } from './event';
+import { maybeDefaultPreventClick, onEscape, onOutsidePointer } from './event';
 import Togglable from './togglable';
 
 const active = [];
 
+const pendingReject = new WeakMap();
+
 export default {
     mixins: [Class, Container, Togglable],
 
@@ -230,10 +229,13 @@ export default {
 };
 
 function animate(el, show, { transitionElement, _toggle }) {
+    let rejectAnimation;
+
     return new Promise((resolve, reject) =>
         once(el, 'show hide', () => {
-            el._reject?.();
-            el._reject = reject;
+            pendingReject.get(el)?.();
+            rejectAnimation = reject;
+            pendingReject.set(el, reject);
 
             _toggle(el, show);
 
@@ -257,7 +259,11 @@ function animate(el, show, { transitionElement, _toggle }) {
                 toMs(css(transitionElement, 'transitionDuration')),
             );
         }),
-    ).then(() => delete el._reject);
+    ).then(() => {
+        if (pendingReject.get(el) === rejectAnimation) {
+            pendingReject.delete(el);
+        }
+    });
 }
 
 function toMs(time) {
@@ -282,35 +288,21 @@ function preventBackgroundFocus(modal) {
 }
 
 function listenForBackgroundClose(modal) {
-    return on(document, pointerDown, ({ target }) => {
-        if (
-            last(active) !== modal ||
-            (modal.overlay && !modal.$el.contains(target)) ||
-            !modal.panel ||
-            modal.panel.contains(target)
-        ) {
-            return;
-        }
-
-        once(
-            document,
-            `${pointerUp} ${pointerCancel} scroll`,
-            ({ defaultPrevented, type, target: newTarget }) => {
-                if (!defaultPrevented && type === pointerUp && target === newTarget) {
-                    modal.hide();
-                }
-            },
-            true,
-        );
-    });
+    return onOutsidePointer(
+        () => modal.hide(),
+        (target) =>
+            (!modal.overlay || modal.$el.contains(target)) &&
+            Boolean(modal.panel) &&
+            !modal.panel.contains(target),
+        () => last(active) === modal,
+    );
 }
 
 function listenForEscClose(modal) {
-    return on(document, 'keydown', (e) => {
-        if (e.keyCode === 27 && last(active) === modal) {
-            modal.hide();
-        }
-    });
+    return onEscape(
+        () => modal.hide(),
+        () => last(active) === modal,
+    );
 }
 
 function setAriaExpanded(el, toggled) {

package/src/less/components/base.less

@@ -152,16 +152,10 @@ a:has(.uk-text-middle),
  ========================================================================== */
 
 /*
- * 1. Add the correct text decoration in Edge.
- * 2. The shorthand declaration `underline dotted` is not supported in Safari.
+ * Add the correct text decoration.
  */
 
-abbr[title] {
-    /* 1 */
-    text-decoration: underline dotted;
-    /* 2 */
-    -webkit-text-decoration-style: dotted;
-}
+abbr[title] { text-decoration: underline dotted; }
 
 /*
  * Add the correct font weight in Chrome, Edge, and Safari.
@@ -508,7 +502,6 @@ blockquote footer {
 pre {
     font: @base-pre-font-size e("/") @base-pre-line-height @base-pre-font-family;
     color: @base-pre-color;
-    -moz-tab-size: 4;
     tab-size: 4;
     /* 1 */
     overflow: auto;
@@ -536,32 +529,6 @@ pre code { font-family: @base-pre-font-family; }
 }
 
 
-/* HTML5 elements
- ========================================================================== */
-
-/*
- * 1. Add the correct display in Edge, IE 10+, and Firefox.
- * 2. Add the correct display in IE.
- */
-
-details, /* 1 */
-main { /* 2 */
-    display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary { display: list-item; }
-
-/*
- * Add the correct display in IE.
- */
-
-template { display: none; }
-
-
 /* Pass media breakpoints to JS
  ========================================================================== */
 

package/src/less/components/button.less

@@ -127,14 +127,6 @@
 
 .uk-button:not(:disabled) { cursor: pointer; }
 
-/*
- * Remove the inner border and padding in Firefox.
- */
-
-.uk-button::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
 
 /* Hover */
 .uk-button:hover {

package/src/less/components/form.less

@@ -208,12 +208,6 @@
     padding: 0;
 }
 
-/*
- * Removes placeholder transparency in Firefox.
- */
-
-.uk-input::-moz-placeholder,
-.uk-textarea::-moz-placeholder { opacity: 1; }
 
 /*
  * Improves consistency of cursor style for clickable elements

package/src/less/components/icon.less

@@ -83,14 +83,6 @@
 /* Required for `button`. */
 button.uk-icon:not(:disabled) { cursor: pointer; }
 
-/*
- * Remove the inner border and padding in Firefox.
- */
-
-.uk-icon::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
 
 /*
  * Set the fill and stroke color of all SVG elements to the current text color

package/src/less/components/search.less

@@ -99,11 +99,6 @@
 .uk-search-input::-webkit-search-cancel-button,
 .uk-search-input::-webkit-search-decoration { -webkit-appearance: none; }
 
-/*
- * Removes placeholder transparency in Firefox.
- */
-
-.uk-search-input::-moz-placeholder { opacity: 1; }
 
 /*
  * 1. Define consistent box sizing.

package/src/less/components/utility.less

@@ -147,9 +147,8 @@
 
 /*
  * Overflow fade
- * 1. Overflow
- * 2. Mask
- * 3. Hide scrollbar
+ * 1. Mask
+ * 2. Hide scrollbar
  */
 
 @property --uk-overflow-fade-start-opacity {
@@ -177,9 +176,6 @@
 .uk-overflow-fade-horizontal,
 .uk-overflow-fade-vertical {
     /* 1 */
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-    /* 2 */
     mask-image: linear-gradient(
         to var(--uk-overflow-fade-direction),
         rgba(0,0,0,var(--uk-overflow-fade-start-opacity)),
@@ -187,7 +183,7 @@
         #000 ~'calc(100% - @{overflow-fade-size})',
         rgba(0,0,0,var(--uk-overflow-fade-end-opacity))
     );
-    /* 3 */
+    /* 2 */
     scrollbar-width: none;
 }
 

package/src/scss/components/base.scss

@@ -93,16 +93,10 @@ a:has(.uk-text-middle),
  ========================================================================== */
 
 /*
- * 1. Add the correct text decoration in Edge.
- * 2. The shorthand declaration `underline dotted` is not supported in Safari.
+ * Add the correct text decoration.
  */
 
-abbr[title] {
-    /* 1 */
-    text-decoration: underline dotted;
-    /* 2 */
-    -webkit-text-decoration-style: dotted;
-}
+abbr[title] { text-decoration: underline dotted; }
 
 /*
  * Add the correct font weight in Chrome, Edge, and Safari.
@@ -449,7 +443,6 @@ blockquote footer {
 pre {
     font: $base-pre-font-size string.unquote("/") $base-pre-line-height $base-pre-font-family;
     color: $base-pre-color;
-    -moz-tab-size: 4;
     tab-size: 4;
     /* 1 */
     overflow: auto;
@@ -477,32 +470,6 @@ pre code { font-family: $base-pre-font-family; }
 }
 
 
-/* HTML5 elements
- ========================================================================== */
-
-/*
- * 1. Add the correct display in Edge, IE 10+, and Firefox.
- * 2. Add the correct display in IE.
- */
-
-details, /* 1 */
-main { /* 2 */
-    display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary { display: list-item; }
-
-/*
- * Add the correct display in IE.
- */
-
-template { display: none; }
-
-
 /* Pass media breakpoints to JS
  ========================================================================== */
 

package/src/scss/components/button.scss

@@ -85,14 +85,6 @@
 
 .uk-button:not(:disabled) { cursor: pointer; }
 
-/*
- * Remove the inner border and padding in Firefox.
- */
-
-.uk-button::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
 
 /* Hover */
 .uk-button:hover {

package/src/scss/components/form.scss

@@ -148,12 +148,6 @@
     padding: 0;
 }
 
-/*
- * Removes placeholder transparency in Firefox.
- */
-
-.uk-input::-moz-placeholder,
-.uk-textarea::-moz-placeholder { opacity: 1; }
 
 /*
  * Improves consistency of cursor style for clickable elements

package/src/scss/components/icon.scss

@@ -71,14 +71,6 @@
 /* Required for `button`. */
 button.uk-icon:not(:disabled) { cursor: pointer; }
 
-/*
- * Remove the inner border and padding in Firefox.
- */
-
-.uk-icon::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
 
 /*
  * Set the fill and stroke color of all SVG elements to the current text color

package/src/scss/components/search.scss

@@ -66,11 +66,6 @@
 .uk-search-input::-webkit-search-cancel-button,
 .uk-search-input::-webkit-search-decoration { -webkit-appearance: none; }
 
-/*
- * Removes placeholder transparency in Firefox.
- */
-
-.uk-search-input::-moz-placeholder { opacity: 1; }
 
 /*
  * 1. Define consistent box sizing.

package/src/scss/components/utility.scss

@@ -130,9 +130,8 @@
 
 /*
  * Overflow fade
- * 1. Overflow
- * 2. Mask
- * 3. Hide scrollbar
+ * 1. Mask
+ * 2. Hide scrollbar
  */
 
 @property --uk-overflow-fade-start-opacity {
@@ -160,9 +159,6 @@
 .uk-overflow-fade-horizontal,
 .uk-overflow-fade-vertical {
     /* 1 */
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-    /* 2 */
     mask-image: linear-gradient(
         to var(--uk-overflow-fade-direction),
         rgba(0,0,0,var(--uk-overflow-fade-start-opacity)),
@@ -170,7 +166,7 @@
         #000 string.unquote('calc(100% - #{$overflow-fade-size})'),
         rgba(0,0,0,var(--uk-overflow-fade-end-opacity))
     );
-    /* 3 */
+    /* 2 */
     scrollbar-width: none;
 }