uikit 3.19.5-dev.c6a7fbca6 → 3.19.5-dev.c70b3862f

package/src/js/util/selector.js

@@ -1,5 +1,5 @@
 import { attr } from './attr';
-import { index, matches, parent } from './filter';
+import { index, matches } from './filter';
 import { isDocument, isString, memoize, toNode, toNodes } from './lang';
 
 export function query(selector, context) {
@@ -33,12 +33,9 @@ const parseSelector = memoize((selector) => {
     let isContextSelector = false;
 
     const selectors = [];
-    for (let sel of selector.match(splitSelectorRe)) {
+    for (let sel of selector.match(splitSelectorRe) ?? []) {
         sel = sel.replace(trailingCommaRe, '').trim();
-        if (sel[0] === '>') {
-            sel = `:scope ${sel}`;
-        }
-        isContextSelector ||= ['!', '+', '~', '-'].includes(sel[0]);
+        isContextSelector ||= ['!', '+', '~', '-', '>'].includes(sel[0]);
         selectors.push(sel);
     }
 
@@ -49,6 +46,12 @@ const parseSelector = memoize((selector) => {
     };
 });
 
+const parsePositionSelector = memoize((selector) => {
+    selector = selector.substr(1).trim();
+    const index = selector.indexOf(' ');
+    return ~index ? [selector.substring(0, index), selector.substring(index + 1)] : [selector, ''];
+});
+
 function _query(selector, context = document, queryFn) {
     if (!selector || !isString(selector)) {
         return selector;
@@ -63,36 +66,42 @@ function _query(selector, context = document, queryFn) {
     selector = '';
     const isSingle = parsed.selectors.length === 1;
     for (let sel of parsed.selectors) {
+        let positionSel;
         let ctx = context;
 
         if (sel[0] === '!') {
-            const selectors = sel.substr(1).trim().split(' ');
-            ctx = parent(context).closest(selectors[0]);
-            sel = selectors.slice(1).join(' ').trim();
-            if (!sel.length && isSingle) {
+            [positionSel, sel] = parsePositionSelector(sel);
+            ctx = context.parentElement.closest(positionSel);
+            if (!sel && isSingle) {
                 return ctx;
             }
         }
 
-        if (sel[0] === '-') {
-            const selectors = sel.substr(1).trim().split(' ');
-            const prev = (ctx || context).previousElementSibling;
-            ctx = matches(prev, sel.substr(1)) ? prev : null;
-            sel = selectors.slice(1).join(' ');
-            if (!sel.length && isSingle) {
+        if (ctx && sel[0] === '-') {
+            [positionSel, sel] = parsePositionSelector(sel);
+            ctx = ctx.previousElementSibling;
+            ctx = matches(ctx, positionSel) ? ctx : null;
+            if (!sel && isSingle) {
                 return ctx;
             }
-        } else if (sel[0] === '~' || (sel[0] === '+' && isSingle)) {
-            return _doQuery(
-                parent(context),
-                queryFn,
-                `:scope :nth-child(${index(context) + 1}) ${sel}`,
-            );
         }
 
-        if (ctx) {
-            selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
+        if (!ctx) {
+            continue;
+        }
+
+        if (isSingle) {
+            if (sel[0] === '~' || sel[0] === '+') {
+                sel = `:scope :nth-child(${index(ctx) + 1}) ${sel}`;
+                ctx = ctx.parentElement;
+            } else if (sel[0] === '>') {
+                sel = `:scope ${sel}`;
+            }
+
+            return _doQuery(ctx, queryFn, sel);
         }
+
+        selector += `${selector ? ',' : ''}${domPath(ctx)} ${sel}`;
     }
 
     if (!isDocument(context)) {

package/src/js/util/style.js

@@ -64,9 +64,7 @@ export function css(element, property, value, priority) {
 }
 
 // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
-export const propName = memoize((name) => vendorPropName(name));
-
-function vendorPropName(name) {
+export const propName = memoize((name) => {
     if (startsWith(name, '--')) {
         return name;
     }
@@ -85,4 +83,4 @@ function vendorPropName(name) {
             return prefixedName;
         }
     }
-}
+});

package/src/js/util/svg.js

@@ -1,5 +1,8 @@
 import { $$ } from './dom';
+import { isVisible } from './filter.js';
 
 export function getMaxPathLength(el) {
-    return Math.ceil(Math.max(0, ...$$('[stroke]', el).map((stroke) => stroke.getTotalLength?.())));
+    return isVisible(el)
+        ? Math.ceil(Math.max(0, ...$$('[stroke]', el).map((stroke) => stroke.getTotalLength())))
+        : 0;
 }

package/src/less/components/utility.less

@@ -129,7 +129,7 @@
 [class*="uk-float-"] { max-width: 100%; }
 
 
-/* Overfow
+/* Overflow
  ========================================================================== */
 
 .uk-overflow-hidden { overflow: hidden; }

package/src/scss/components/utility.scss

@@ -111,7 +111,7 @@
 [class*="uk-float-"] { max-width: 100%; }
 
 
-/* Overfow
+/* Overflow
  ========================================================================== */
 
 .uk-overflow-hidden { overflow: hidden; }

package/tests/base.html

@@ -233,7 +233,7 @@
 
                     <h3>Audio</h3>
 
-                    <audio controls src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"></audio>
+                    <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>
 
                 </div>
             </div>

package/tests/js/index.js

@@ -5,7 +5,6 @@ const tests = TESTS;
 const storage = window.sessionStorage;
 const key = '_uikit_style';
 const keyinverse = '_uikit_inverse';
-const docEl = document.documentElement;
 
 // try to load themes.json
 const request = new XMLHttpRequest();
@@ -39,7 +38,7 @@ storage[keyinverse] = storage[keyinverse] || '';
 const dir = storage._uikit_dir || 'ltr';
 
 // set dir
-docEl.dir = dir;
+document.documentElement.dir = dir;
 
 const style = styles[storage[key]] || styles.theme;
 
@@ -50,6 +49,10 @@ document.writeln(
     }">`,
 );
 
+document.writeln(
+    `<style>html:not(:has(body :first-child [aria-label="Component switcher"])) {padding-top: 80px}</style>`,
+);
+
 // add javascript
 document.writeln('<script src="../dist/js/uikit.js"></script>');
 document.writeln(
@@ -60,9 +63,8 @@ on(window, 'load', () =>
     setTimeout(
         () =>
             requestAnimationFrame(() => {
-                const $body = document.body;
                 const $container = prepend(
-                    $body,
+                    document.body,
                     `
         <div class="uk-container">
             <select class="uk-select uk-form-width-small" style="margin: 20px 20px 20px 0" aria-label="Component switcher">
@@ -144,8 +146,12 @@ on(window, 'load', () =>
 
                     addClass($$('.uk-navbar-container'), 'uk-navbar-transparent');
 
-                    css(docEl, 'background', $inverse.value === 'dark' ? '#fff' : '#222');
-                    addClass($body, `uk-${$inverse.value}`);
+                    css(
+                        document.documentElement,
+                        'background',
+                        $inverse.value === 'dark' ? '#fff' : '#222',
+                    );
+                    addClass(document.body, `uk-${$inverse.value}`);
                 }
 
                 on($inverse, 'change', () => {
@@ -161,15 +167,11 @@ on(window, 'load', () =>
                     location.reload();
                 });
                 $rtl.firstElementChild.checked = dir === 'rtl';
-
-                css(docEl, 'paddingTop', '');
             }),
         100,
     ),
 );
 
-css(docEl, 'paddingTop', '80px');
-
 function getParam(name) {
     const match = new RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
     return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

package/tests/switcher.html

@@ -25,23 +25,23 @@
                     <li><a href>Item</a></li>
                 </ul>
 
-                <ul class="uk-switcher uk-margin">
-                    <li>Hello! <a href uk-switcher-item="2">Switch to tab 3</a></li>
-                    <li>Hello again! <a href uk-switcher-item="next">Next tab</a></li>
-                    <li>Bazinga! <a href uk-switcher-item="previous">Previous tab</a></li>
-                    <li>You will never see me!</li>
-                    <li>4</li>
-                    <li>5</li>
-                </ul>
+                <div class="uk-switcher uk-margin">
+                    <div>Hello! <a href uk-switcher-item="2">Switch to tab 3</a></div>
+                    <div>Hello again! <a href uk-switcher-item="next">Next tab</a></div>
+                    <div>Bazinga! <a href uk-switcher-item="previous">Previous tab</a></div>
+                    <div>You will never see me!</div>
+                    <div>4</div>
+                    <div>5</div>
+                </div>
 
-                <ul class="uk-switcher uk-margin">
-                    <li>Hello! The first item.</li>
-                    <li>Hello again! The second item.</li>
-                    <li>Bazinga! The third item.</li>
-                    <li>You will never see me!</li>
-                    <li>4</li>
-                    <li>5</li>
-                </ul>
+                <div class="uk-switcher uk-margin">
+                    <div>Hello! The first item.</div>
+                    <div>Hello again! The second item.</div>
+                    <div>Bazinga! The third item.</div>
+                    <div>You will never see me!</div>
+                    <div>4</div>
+                    <div>5</div>
+                </div>
 
             </div>
 
@@ -58,11 +58,11 @@
                         <li><a href>Item</a></li>
                     </ul>
 
-                    <ul class="uk-switcher uk-margin">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher uk-margin">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
                 <div>
@@ -75,11 +75,11 @@
                         <li><a href>Item</a></li>
                     </ul>
 
-                    <ul class="uk-switcher uk-margin">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher uk-margin">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
                 <div>
@@ -92,11 +92,11 @@
                         <li><a href>Item</a></li>
                     </ul>
 
-                    <ul class="uk-switcher uk-margin">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher uk-margin">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
                 <div>
@@ -109,11 +109,11 @@
                         <li><a href>Item</a></li>
                     </ul>
 
-                    <ul class="uk-switcher uk-margin">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher uk-margin">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
                 <div>
@@ -126,11 +126,11 @@
                         <li><a href>Item</a></li>
                     </ul>
 
-                    <ul class="uk-switcher uk-margin">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher uk-margin">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
                 <div>
@@ -143,11 +143,11 @@
                         <li><a href>Item</a></li>
                     </ul>
 
-                    <ul class="uk-switcher uk-margin">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher uk-margin">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
                 <div>
@@ -160,11 +160,11 @@
                         <li><a href>Item</a></li>
                     </ul>
 
-                    <ul class="uk-switcher uk-margin">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher uk-margin">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
                 <div>
@@ -177,11 +177,11 @@
                         <li><a href>Item</a></li>
                     </ul>
 
-                    <ul class="uk-switcher uk-margin">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher uk-margin">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
             </div>
@@ -205,11 +205,11 @@
                         </div>
                         <div class="uk-width-expand@m">
 
-                            <ul id="component-tab-left" class="uk-switcher">
-                                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                            </ul>
+                            <div id="component-tab-left" class="uk-switcher">
+                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                            </div>
 
                         </div>
                     </div>
@@ -231,11 +231,11 @@
                         </div>
                         <div class="uk-width-expand@m">
 
-                            <ul id="component-tab-right" class="uk-switcher">
-                                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                            </ul>
+                            <div id="component-tab-right" class="uk-switcher">
+                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                            </div>
 
                         </div>
                     </div>
@@ -251,11 +251,11 @@
                         <button class="uk-button uk-button-default" type="button">Button</button>
                     </p>
 
-                    <ul class="uk-switcher">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
                 <div>
@@ -270,11 +270,11 @@
                         </span>
                     </p>
 
-                    <ul id="component-button-group" class="uk-switcher">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div id="component-button-group" class="uk-switcher">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
                 <div>
@@ -294,11 +294,11 @@
                         </div>
                         <div class="uk-width-2-3@m">
 
-                            <ul id="component-nav" class="uk-switcher">
-                                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
-                            </ul>
+                            <div id="component-nav" class="uk-switcher">
+                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+                            </div>
 
                         </div>
                     </div>
@@ -314,11 +314,11 @@
                         <li><a href>Item</a></li>
                     </ul>
 
-                    <ul class="uk-switcher">
-                        <li>Hello!</li>
-                        <li>Hello again!</li>
-                        <li>Bazinga!</li>
-                    </ul>
+                    <div class="uk-switcher">
+                        <div>Hello!</div>
+                        <div>Hello again!</div>
+                        <div>Bazinga!</div>
+                    </div>
 
                 </div>
             </div>