uikit 3.25.20-dev.e4f47fc → 3.25.20

package/dist/js/components/marquee.min.js

@@ -1 +0,0 @@
-/*! UIkit 3.25.20-dev.e4f47fc | https://www.getuikit.com | (c) 2014 - 2026 YOOtheme | MIT License */(function(s,d){typeof exports=="object"&&typeof module<"u"?module.exports=d(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitmarquee",["uikit-util"],d):(s=typeof globalThis<"u"?globalThis:s||self,s.UIkitMarquee=d(s.UIkit.util))})(this,(function(s){"use strict";function d(e,t="update"){e._connected&&e._updates.length&&(e._updateCount||(e._updateCount=0,requestAnimationFrame(()=>e._updateCount=0)),e._queued||(e._queued=new Set,s.fastdom.read(()=>{e._connected&&p(e,e._queued),e._queued=null})),e._updateCount++<20&&e._queued.add(t.type||t))}function p(e,t){for(const{read:o,write:r,events:i=[]}of e._updates){if(!t.has("update")&&!i.some(a=>t.has(a)))continue;let n;o&&(n=o.call(e,e._data,t),n&&s.isPlainObject(n)&&s.assign(e._data,n)),r&&n!==!1&&s.fastdom.write(()=>{e._connected&&r.call(e,e._data,t)})}}function m(e){return h(s.observeResize,e,"resize")}function v(e){return h(s.observeIntersection,e)}function h(e,t,o){return{observe:e,handler(){d(this,o)},...t}}var $={connected(){this._cmpCls=s.hasClass(this.$el,this.$options.id),s.addClass(this.$el,this.$options.id)},disconnected(){this._cmpCls||s.removeClass(this.$el,this.$options.id)}};const _=s.inBrowser&&window.Animation;var u={mixins:[$],props:{velocity:Number,start:Number,reverse:Boolean,pause:Boolean,pauseVelocity:Number,fadeSize:null},data:{velocity:25,start:0,reverse:!1,pause:!1,pauseVelocity:10,selList:".uk-marquee-items",fadeSize:0},computed:{list:({selList:e},t)=>s.$(e,t),items(){return s.children(this.list)}},observe:[m({target:({$el:e,items:t})=>[e,...t]}),v({handler(e){for(const t of e)t.target.inert=!t.isIntersecting},target:({items:e})=>e,args:{intersecting:!1},options:({$el:e})=>({root:e})})],events:{name:[s.pointerEnter,s.pointerLeave],el:({$el:e})=>e,self:!0,filter:({pause:e})=>_&&e,handler(e){for(const t of this.items)for(const o of t.getAnimations())o.playbackRate=e.type===s.pointerEnter?this.pauseVelocity/this.velocity:1}},update:{write(){const e=this.$options.id,t=this.items,o=s.hasClass(this.$el,`${e}-vertical`);s.css(t,"offset","none");const r=o?["top","bottom"]:["left","right"];!o&&s.isRtl&&r.reverse();const i=s.dimensions(this.list)[r[0]],n=Math[!o&&s.isRtl?"min":"max"](...t.map(a=>s.dimensions(a)[r[1]]));for(const a of t){const l=s.dimensions(a)[r[1]],c=n-l,f=l-i,C=o?`"M0 0 v${c}M0 ${-f} v${f}"`:`"M0 0 h${c}M${-f} 0 h${f}"`;s.css(a,`--${e}-path`,C)}s.css(this.$el,{[`--${e}-duration`]:`${Math.abs(i-n)/this.velocity}s`,[`--${e}-start`]:this.start,[`--${e}-direction`]:this.reverse?"reverse":"normal","--uk-overflow-fade-size":this.fadeSize?`${s.toPx(this.fadeSize,o?"height":"width",this.$el,!0)}px`:""}),s.toggleClass(this.$el,`${e}-fade`,this.fadeSize),s.css(t,"offset","")},events:["resize"]}},w="marquee";return typeof window<"u"&&window.UIkit&&window.UIkit.component(w,u),u}));

package/src/js/components/marquee.js

@@ -1,123 +0,0 @@
-import {
-    $,
-    children,
-    css,
-    dimensions,
-    hasClass,
-    inBrowser,
-    isRtl,
-    pointerEnter,
-    pointerLeave,
-    toggleClass,
-    toPx,
-} from 'uikit-util';
-import { intersection, resize } from '../api/observables';
-import Class from '../mixin/class';
-
-const hasAnimationApi = inBrowser && window.Animation;
-
-export default {
-    mixins: [Class],
-
-    props: {
-        velocity: Number,
-        start: Number,
-        reverse: Boolean,
-        pause: Boolean,
-        pauseVelocity: Number,
-        fadeSize: null,
-    },
-
-    data: {
-        velocity: 25,
-        start: 0,
-        reverse: false,
-        pause: false,
-        pauseVelocity: 10,
-        selList: '.uk-marquee-items',
-        fadeSize: 0,
-    },
-
-    computed: {
-        list: ({ selList }, $el) => $(selList, $el),
-        items() {
-            return children(this.list);
-        },
-    },
-
-    observe: [
-        resize({
-            target: ({ $el, items }) => [$el, ...items],
-        }),
-        intersection({
-            handler(entries) {
-                for (const entry of entries) {
-                    entry.target.inert = !entry.isIntersecting;
-                }
-            },
-            target: ({ items }) => items,
-            args: { intersecting: false },
-            options: ({ $el }) => ({ root: $el }),
-        }),
-    ],
-
-    events: {
-        name: [pointerEnter, pointerLeave],
-        el: ({ $el }) => $el,
-        self: true,
-        filter: ({ pause }) => hasAnimationApi && pause,
-        handler(e) {
-            for (const el of this.items) {
-                for (const animation of el.getAnimations()) {
-                    animation.playbackRate =
-                        e.type === pointerEnter ? this.pauseVelocity / this.velocity : 1;
-                }
-            }
-        },
-    },
-
-    update: {
-        write() {
-            const prefix = this.$options.id;
-            const items = this.items;
-            const vertical = hasClass(this.$el, `${prefix}-vertical`);
-
-            css(items, 'offset', 'none');
-
-            const dir = vertical ? ['top', 'bottom'] : ['left', 'right'];
-            if (!vertical && isRtl) {
-                dir.reverse();
-            }
-
-            const listStart = dimensions(this.list)[dir[0]];
-            const listEnd = Math[!vertical && isRtl ? 'min' : 'max'](
-                ...items.map((el) => dimensions(el)[dir[1]]),
-            );
-
-            for (const el of items) {
-                const elEnd = dimensions(el)[dir[1]];
-                const line1 = listEnd - elEnd;
-                const line2 = elEnd - listStart;
-                const path = vertical
-                    ? `"M0 0 v${line1}M0 ${-line2} v${line2}"`
-                    : `"M0 0 h${line1}M${-line2} 0 h${line2}"`;
-                css(el, `--${prefix}-path`, path);
-            }
-
-            css(this.$el, {
-                [`--${prefix}-duration`]: `${Math.abs(listStart - listEnd) / this.velocity}s`,
-                [`--${prefix}-start`]: this.start,
-                [`--${prefix}-direction`]: this.reverse ? 'reverse' : 'normal',
-                '--uk-overflow-fade-size': this.fadeSize
-                    ? `${toPx(this.fadeSize, vertical ? 'height' : 'width', this.$el, true)}px`
-                    : '',
-            });
-
-            toggleClass(this.$el, `${prefix}-fade`, this.fadeSize);
-
-            css(items, 'offset', '');
-        },
-
-        events: ['resize'],
-    },
-};

package/src/js/mixin/connect.js

@@ -1,55 +0,0 @@
-import { children, hasClass, isTag, queryAll, toArray } from 'uikit-util';
-import { lazyload } from '../api/observables';
-import Togglable from '../mixin/togglable';
-
-export default {
-    mixins: [Togglable],
-
-    props: {
-        connect: String,
-    },
-
-    data: {
-        connect: '',
-        cls: 'uk-active',
-    },
-
-    computed: {
-        connects: {
-            get: ({ connect }, $el) => (connect ? queryAll(connect, $el) : []),
-            observe: ({ connect }) => connect,
-        },
-
-        connectChildren() {
-            return this.connects.flatMap((el) => children(el));
-        },
-    },
-
-    watch: {
-        connects(connects) {
-            for (const el of connects) {
-                if (isTag(el, 'ul')) {
-                    el.role = 'presentation';
-                }
-            }
-        },
-    },
-
-    observe: lazyload({ targets: ({ connectChildren }) => connectChildren }),
-
-    methods: {
-        showConnects(index, animate) {
-            const toggle = async ({ children }) => {
-                const actives = toArray(children).filter(
-                    (child, i) => i !== index && hasClass(child, this.cls),
-                );
-
-                if (await this.toggleElement(actives, false, animate)) {
-                    await this.toggleElement(children[index], true, animate);
-                }
-            };
-
-            return Promise.all(this.connects.map(toggle));
-        },
-    },
-};

package/src/js/mixin/scroll-driven.js

@@ -1,57 +0,0 @@
-import { query, scrolledOver, toPx } from 'uikit-util';
-import { resize, scroll } from '../api/observables';
-import { ease } from './parallax';
-
-export default {
-    props: {
-        parallaxTarget: Boolean,
-        parallaxStart: String,
-        parallaxEnd: String,
-        parallaxEasing: Number,
-    },
-
-    data: {
-        parallaxTarget: false,
-        parallaxStart: 0,
-        parallaxEnd: 0,
-        parallaxEasing: 0,
-    },
-
-    observe: [
-        resize({
-            target: ({ $el, parallaxTarget }) => [$el, parallaxTarget],
-            filter: ({ parallax }) => parallax,
-        }),
-        scroll({ filter: ({ parallax }) => parallax }),
-    ],
-
-    computed: {
-        parallaxTargetFallback: ($props, $el) => $el,
-
-        parallaxTarget({ parallaxTarget }, $el) {
-            return (parallaxTarget && query(parallaxTarget, $el)) || this.parallaxTargetFallback;
-        },
-    },
-
-    update: {
-        read() {
-            if (!this.parallax) {
-                return;
-            }
-
-            const target = this.parallaxTarget;
-
-            if (!target) {
-                return;
-            }
-
-            const start = toPx(this.parallaxStart, 'height', target, true);
-            const end = toPx(this.parallaxEnd, 'height', target, true);
-            const percent = ease(scrolledOver(target, start, end), this.parallaxEasing);
-
-            return { percent };
-        },
-
-        events: ['scroll', 'resize'],
-    },
-};

package/src/less/components/dropcap.less

@@ -1,71 +0,0 @@
-// Name:            Dropcap
-// Description:     Style for the drop cap
-//
-// Component:       `uk-dropcap`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-@dropcap-margin-right:                          10px;
-@dropcap-font-size:                             ((@global-line-height * 3) * 1em);
-@dropcap-line-height:                           1;
-
-/* ========================================================================
-   Component: Dropcap
- ========================================================================== */
-
-/*
- * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
- *    https://bugzilla.mozilla.org/show_bug.cgi?id=214004
- * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
- *    https://bugzilla.mozilla.org/show_bug.cgi?id=317933
- */
-
-.uk-dropcap::first-letter,
-/* 1 */
-.uk-dropcap > p:first-of-type::first-letter {
-    display: block;
-    margin-right: @dropcap-margin-right;
-    float: left;
-    font-size: @dropcap-font-size;
-    line-height: @dropcap-line-height;
-    .hook-dropcap();
-}
-
-/* 2 */
-@-moz-document url-prefix() {
-
-  .uk-dropcap::first-letter,
-  .uk-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }
-
-}
-
-
-// Misc
-// ========================================================================
-
-.hook-dropcap-misc();
-
-
-// Hooks
-// ========================================================================
-
-.hook-dropcap() {}
-.hook-dropcap-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse () {
-
-    .uk-dropcap::first-letter,
-    .uk-dropcap p:first-of-type::first-letter {
-        .hook-inverse-dropcap();
-    }
-
-}
-
-.hook-inverse-dropcap() {}

package/src/less/components/floating-shadow.less

@@ -1,66 +0,0 @@
-// Name:            Floating Shadow
-// Description:     Component to create floating shadows
-//
-// Component:       `uk-floating-shadow`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@floating-shadow-height:                       30px;
-@floating-shadow-bottom:                       -@floating-shadow-height;
-@floating-shadow-border-radius:                100%;
-@floating-shadow-background:                   #444;
-@floating-shadow-blur:                         20px;
-
-
-/* ========================================================================
-   Component: Floating Shadow
- ========================================================================== */
-
-/*
- * 1. Set position.
- * 2. Set style
- * 3. Fix shadow being clipped in Safari if container is animated
- */
-
-.uk-floating-shadow {
-    display: inline-block;
-    position: relative;
-    z-index: 0;
-    max-width: 100%;
-    vertical-align: middle;
-}
-
-.uk-floating-shadow::after {
-    content: "";
-    /* 1 */
-    position: absolute;
-    bottom: @floating-shadow-bottom;
-    left: 0;
-    right: 0;
-    z-index: -1;
-    /* 2 */
-    height: @floating-shadow-height;
-    border-radius: @floating-shadow-border-radius;
-    background: @floating-shadow-background;
-    filter: blur(@floating-shadow-blur);
-    /* 3 */
-    will-change: filter;
-    .hook-floating-shadow();
-}
-
-
-// Misc
-// ========================================================================
-
-.hook-floating-shadow-misc();
-
-
-// Hooks
-// ========================================================================
-
-.hook-floating-shadow() {}
-.hook-floating-shadow-misc() {}

package/src/less/components/logo.less

@@ -1,94 +0,0 @@
-// Name:            Logo
-// Description:     Style for the logo
-//
-// Component:       `uk-logo`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-@logo-font-size:                                @global-large-font-size;
-@logo-font-family:                              @global-font-family;
-@logo-color:                                    @global-emphasis-color;
-@logo-hover-color:                              @global-emphasis-color;
-
-/* ========================================================================
-   Component: Logo
- ========================================================================== */
-
-/*
- * 1. Style
- * 2. Required for `a`
- * 3. Behave like image but can be overridden through flex utility classes
- */
-
-.uk-logo {
-    /* 1 */
-    font-size: @logo-font-size;
-    font-family: @logo-font-family;
-    color: @logo-color;
-    /* 2 */
-    text-decoration: none;
-    .hook-logo();
-}
-
-/* 3 */
-:where(.uk-logo) {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-/* Hover */
-.uk-logo:hover {
-    color: @logo-hover-color;
-    /* 2 */
-    text-decoration: none;
-    .hook-logo-hover();
-}
-
-.uk-logo :where(img:not([uk-svg]), svg, video) { display: block; }
-
-.uk-logo-inverse:where(:not([uk-svg])) { display: none; }
-
-
-// Misc
-// ========================================================================
-
-.hook-logo-misc();
-
-
-// Hooks
-// ========================================================================
-
-.hook-logo() {}
-.hook-logo-hover() {}
-.hook-logo-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-@inverse-logo-color:                           @inverse-global-emphasis-color;
-@inverse-logo-hover-color:                     @inverse-global-emphasis-color;
-
-.hook-inverse () {
-
-    .uk-logo {
-        color: @inverse-logo-color;
-        .hook-inverse-logo();
-    }
-
-    .uk-logo:hover {
-        color: @inverse-logo-hover-color;
-        .hook-inverse-logo-hover();
-    }
-
-    .uk-logo:has(.uk-logo-inverse) > :not(picture:has(.uk-logo-inverse:not([uk-svg]))):not(.uk-logo-inverse):not([uk-svg]) { display: none; }
-    .uk-logo-inverse:not([uk-svg]) { display: block; }
-
-}
-
-.hook-inverse-logo() {}
-.hook-inverse-logo-hover() {}

package/src/less/components/marquee.less

@@ -1,133 +0,0 @@
-// Name:            Marquee
-// Description:     Component to create scrolling areas
-//
-// Component:       `uk-marquee`
-//
-// Sub-objects:     `uk-marquee-items`
-//
-// Modifiers:       `uk-marquee-vertical`
-//                  `uk-marquee-fade`
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-/* ========================================================================
-   Component: Marquee
- ========================================================================== */
-
-/*
- * 1. Fallback for Safari 15 and older
- * 2. Clip child elements
- *    `clip` prevents accidental scrolling through elements in slide getting focused
- *    `clip` also works in only one direction
- * 3. Prevent tab highlighting on iOS.
- */
-
-.uk-marquee {
-    /* 1 */
-    overflow-x: hidden;
-    /* 2 */
-    overflow-x: clip;
-    /* 3 */
-    -webkit-tap-highlight-color: transparent;
-    .hook-marquee();
-}
-
-.uk-marquee-vertical {
-    overflow: visible;
-    overflow-y: hidden;
-    overflow-y: clip;
-}
-
-/*
- * Fade out
- */
-
-.uk-marquee-fade {
-    --uk-overflow-fade-size: 100px;
-    --uk-overflow-fade-direction: right;
-}
-.uk-marquee-fade.uk-marquee-vertical { --uk-overflow-fade-direction: bottom; }
-
-.uk-marquee-fade {
-    mask-image: linear-gradient(
-        to var(--uk-overflow-fade-direction),
-        rgba(0, 0, 0, var(--uk-overflow-fade-start-opacity)),
-        #000 var(--uk-overflow-fade-size),
-        #000 ~'calc(100% - var(--uk-overflow-fade-size))',
-        rgba(0, 0, 0, var(--uk-overflow-fade-end-opacity))
-    );
-}
-
-
-/* Items
- ========================================================================== */
-
-/*
- * 1. Create a containing block.
- */
-
-.uk-marquee-items {
-    /* 1 */
-    position: relative;
-}
-
-/*
- * 1. Reset list style without interfering with grid
- * 2. Prevent displaying the callout information on iOS.
- */
-
-.uk-marquee:not(.uk-marquee-vertical) .uk-marquee-items:not(.uk-grid) {
-    display: flex;
-    /* 1 */
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    /* 2 */
-    -webkit-touch-callout: none;
-}
-
-.uk-marquee:not(.uk-marquee-vertical) .uk-marquee-items.uk-grid { flex-wrap: nowrap; }
-
-
-/* Item
- ========================================================================== */
-
-/*
- * 1. Let items take content dimensions (0 0 auto)
- *    `max-width` needed to keep image responsiveness and prevent content overflow
- * 2. Create position context
- * 3. Create animation along offset-path
- */
-
-.uk-marquee-items > * {
-    /* 1 */
-    flex: none !important;
-    box-sizing: border-box;
-    max-width: 100%;
-    /* 2 */
-    position: relative;
-    /* 3 */
-    offset-anchor: 0 0;
-    offset-rotate: 0deg;
-    offset-path: path(var(--uk-marquee-path));
-    animation: var(--uk-marquee-duration) linear calc(var(--uk-marquee-start) / -100 * var(--uk-marquee-duration)) infinite var(--uk-marquee-direction) uk-marquee;
-}
-
-@keyframes uk-marquee {
-    0% { offset-distance: 0; }
-    100% { offset-distance: 100%; }
-}
-
-
-// Hooks
-// ========================================================================
-
-.hook-marquee-misc();
-
-.hook-marquee() {}
-.hook-marquee-misc() {}

package/src/less/theme/dropcap.less

@@ -1,29 +0,0 @@
-//
-// Component: Dropcap
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-// Component
-// ========================================================================
-
-.hook-dropcap() {
-    // Prevent line wrap
-    margin-bottom: -2px;
-}
-
-
-// Miscellaneous
-// ========================================================================
-
-.hook-dropcap-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse-dropcap() {}

package/src/less/theme/floating-shadow.less

@@ -1,20 +0,0 @@
-//
-// Component: Floating Shadow
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-// Component
-// ========================================================================
-
-.hook-floating-shadow() {}
-
-
-// Miscellaneous
-// ========================================================================
-
-.hook-floating-shadow-misc() {}

package/src/less/theme/logo.less

@@ -1,29 +0,0 @@
-//
-// Component: Logo
-//
-// ========================================================================
-
-
-// Variables
-// ========================================================================
-
-
-// Component
-// ========================================================================
-
-.hook-logo() {}
-
-.hook-logo-hover() {}
-
-
-// Miscellaneous
-// ========================================================================
-
-.hook-logo-misc() {}
-
-
-// Inverse
-// ========================================================================
-
-.hook-inverse-logo() {}
-.hook-inverse-logo-hover() {}