feature: combined-video player.

2024-04-11 17:29:26 +08:00 · 2024-04-11 17:29:26 +08:00 · 5cbbcf8d81
commit 5cbbcf8d81
parent b6fe3e34f5
15 changed files with 8591 additions and 873 deletions
--- a/lib/ui.js
+++ b/lib/ui.js
@ -9,7 +9,7 @@ import { Dropdown } from "./ui/dropdown";
 import { Grid } from "./ui/grid/grid";
 import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, GridIconColumn, GridTextColumn, GridDateColumn } from './ui/grid/column';
 import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup";
-import { createPicture, createAudio, createVideo, createFile } from './ui/media';
+import { createPicture, createAudio, createVideo, createFile, createVideoList } from './ui/media';
 import { validation, convertCssStyle } from './ui/extension';
 import { createDateInput, toDateValue, formatDate, setDateValue, getDateValue, DateSelector } from './ui/date';

@ -56,6 +56,7 @@ export {
  createAudio,
  createVideo,
  createFile,
+  createVideoList,
  // extension
  validation,
  convertCssStyle
--- a/lib/ui/css/media.scss
+++ b/lib/ui/css/media.scss
@ -65,4 +65,219 @@
 .ui-media-video {
    max-width: 200px;
    max-height: 200px;
+}
+
+.ui-media-video-container {
+    position: relative;
+    background-color: #000;
+    min-height: 200px;
+    height: 100%;
+    user-select: none;
+
+    --icon-size: 16px;
+
+    >.ui-video-wrapper {
+        position: relative;
+        display: inline-block;
+
+        >video {
+            width: 100%;
+            height: 100%;
+        }
+
+        >.ui-video-waiting {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, .3);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: opacity .2s;
+
+            >svg {
+                fill: #eee;
+                width: 30px;
+                height: 30px;
+                top: calc(50% - 15px);
+                left: calc(50% - 15px);
+                animation: spinner 1.2s infinite linear;
+            }
+
+            @keyframes spinner {
+                0% {
+                    transform: rotate(0deg);
+                }
+
+                100% {
+                    transform: rotate(359deg);
+                }
+            }
+        }
+    }
+
+    >.ui-video-control {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        background: linear-gradient(transparent calc(100% - 100px), rgba(50, 50, 50, .7) calc(100% - 65px), #000);
+        transition: opacity .5s;
+
+        &:hover,
+        &.active {
+            opacity: 1;
+        }
+
+        .ui-video-icon {
+            position: absolute;
+            width: var(--icon-size);
+            height: var(--icon-size);
+            cursor: pointer;
+
+            >svg {
+                width: var(--icon-size);
+                height: var(--icon-size);
+                display: block;
+                fill: #eee;
+            }
+
+            &.disabled {
+                cursor: default;
+                opacity: .5;
+            }
+        }
+
+        .ui-video-bar {
+            position: absolute;
+            height: 4px;
+            padding: 4px 0;
+            cursor: pointer;
+
+            >.ui-video-duration,
+            >.ui-video-progress {
+                position: absolute;
+                border-radius: 2px;
+                height: 4px;
+                cursor: pointer;
+            }
+
+            >.ui-video-duration {
+                width: 100%;
+                background-color: #bbb;
+            }
+
+            >.ui-video-progress {
+                width: 0;
+                background-color: #fff;
+
+                &::after {
+                    content: '\a0';
+                    position: absolute;
+                    right: -6px;
+                    top: -6px;
+                    width: 13px;
+                    height: 13px;
+                    border-radius: 6px;
+                    background-color: #fff;
+                }
+            }
+        }
+
+        >.play-icon {
+            left: 20px;
+            bottom: 41px;
+
+            >svg {
+                position: absolute;
+
+                &:last-child {
+                    display: none;
+                }
+            }
+
+            &.pause {
+                >svg:first-child {
+                    display: none;
+                }
+
+                >svg:last-child {
+                    display: initial;
+                }
+            }
+        }
+
+        >.ui-video-time-label {
+            position: absolute;
+            font-size: 14px;
+            font-weight: bold;
+            left: 48px;
+            bottom: 40px;
+            color: #eee;
+        }
+
+        >.fullscreen-icon {
+            right: 20px;
+            bottom: 41px;
+        }
+
+        >.ui-video-volume-container {
+            position: absolute;
+            bottom: 40px;
+            right: 50px;
+
+            >.volume-icon {
+                right: 0;
+                bottom: 1px;
+
+                >svg {
+                    position: absolute;
+
+                    &:last-child {
+                        display: none;
+                    }
+                }
+
+                &.muted {
+                    >svg:first-child {
+                        display: none;
+                    }
+
+                    >svg:last-child {
+                        display: initial;
+                    }
+                }
+            }
+
+            >.volume-bar {
+                width: 60px;
+                right: 30px;
+                bottom: 2px;
+            }
+        }
+
+        &.no-fullscreen>.ui-video-volume-container {
+            right: 20px;
+        }
+
+        >.seek-bar {
+            left: 16px;
+            right: 16px;
+            bottom: 16px;
+
+            >.seek-progress::after {
+                opacity: 0;
+                transition: opacity .2s;
+            }
+        }
+
+        &.active>.seek-bar>.seek-progress::after,
+        >.seek-bar:hover>.seek-progress::after {
+            opacity: 1;
+        }
+    }
 }
--- a/lib/ui/date.d.ts
+++ b/lib/ui/date.d.ts
@ -30,8 +30,9 @@ export function formatDate(date: Date | number | string, formatter?: string): st
 * 设置显示日期
 * @param element 要设置显示日期的元素
 * @param val 日期值，支持格式参见 {@linkcode formatDate}
+ * @param formatter 日期格式化字符串（仅设置显示元素时调用）
 */
-export function setDateValue(element: HTMLElement, val: Date | number | string): void;
+export function setDateValue(element: HTMLElement, val: Date | number | string, formatter?: string): void;

 /**
 * 从日期选择框获取日期值
@ -39,7 +40,7 @@ export function setDateValue(element: HTMLElement, val: Date | number | string):
 * @param formatter 自定义格式化函数，传入参数为 `Date` 类型
 * @returns 默认返回日期 `ticks` 的字符串
 */
-export function getDateValue(element: HTMLInputElement, formatter?: (date: Date) => string): string;
+export function getDateValue(element: HTMLInputElement, formatter?: string | ((date: Date) => string)): string;

 /** 日期选择框类 */
 export class DateSelector {
--- a/lib/ui/date.js
+++ b/lib/ui/date.js
@ -207,6 +207,25 @@ function getFormatter(date, utc) {
 */
 export function formatDate(date, formatter) {
    formatter ??= 'm/d/Y';
+    if (date === '') {
+        return '';
+    }
+    if (isNaN(date)) {
+        let e = /^(\d{4})-(\d{2})-(\d{2})/.exec(date);
+        if (e == null) {
+            e = /^(\d{4})\/(\d{2})\/(\d{2})/.exec(date);
+        }
+        if (e != null) {
+            date = new Date(e[1], parseInt(e[2]) - 1, e[3]);
+        } else {
+            e = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(date);
+            if (e != null) {
+                date = new Date(e[3], parseInt(e[1]) - 1, e[2]);
+            } else {
+                return date;
+            }
+        }
+    }
    if (date instanceof Date) {
        const f = getFormatter(date, false);
        return formatter.replace(/\\?(.?)/gi, (k, v) => f[k] ? f[k]() : v);
@ -224,14 +243,17 @@ export function formatDate(date, formatter) {
 * 设置显示日期
 * @param {HTMLElement} element - 要设置显示日期的元素
 * @param {Date | number | string} val - 日期值，支持格式参见 {@linkcode formatDate}
+ * @param {string} [formatter] - 日期格式化字符串（仅设置显示元素时调用）
 */
-export function setDateValue(element, val) {
+export function setDateValue(element, val, formatter) {
    if (element.tagName === 'INPUT') {
        if (val === '') {
            element.value = '';
        } else if (isNaN(val)) {
            if (/^\d{4}-\d{2}-\d{2}/.test(val)) {
                element.value = String(val).substring(0, 10);
+            } else if (/^\d{4}\/\d{2}\/\d{2}/.test(val)) {
+                element.value = String(val).replace('/', '-').substring(0, 10);
            } else {
                const e = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(val);
                if (e != null) {
@ -245,7 +267,7 @@ export function setDateValue(element, val) {
            }
        } else {
            if (val instanceof Date) {
-                element.value = toDateValue(val);
+                element.value = toDateValue(val, true);
            } else {
                const ticks = Number(val);
                if (!isNaN(ticks) && ticks > 0) {
@ -256,7 +278,7 @@ export function setDateValue(element, val) {
            }
        }
    } else {
-        element.innerText = formatDate(val);
+        element.innerText = formatDate(val, formatter);
    }
 }

@ -270,7 +292,7 @@ export function setDateValue(element, val) {
 /**
 * 从日期选择框获取日期值
 * @param {HTMLInputElement} element - 要获取的日期选择框
- * @param {DateFormatterCallback} [formatter] - 自定义格式化函数，传入参数为 `Date` 类型
+ * @param {string | DateFormatterCallback} [formatter] - 自定义格式化字符串或函数，传入参数为 `Date` 类型
 * @returns {string | any} 默认返回日期 `ticks` 的字符串
 */
 export function getDateValue(element, formatter) {
@ -280,11 +302,15 @@ export function getDateValue(element, formatter) {
        if (year < 1900 || year > 9999) {
            return '';
        }
-        if (typeof formatter === 'function') {
+        if (formatter != null) {
            const month = String(date.getUTCMonth() + 1).padStart(2, '0');
            const day = String(date.getUTCDate()).padStart(2, '0');
            // 使外部 formatter 不需要再处理 `getUTCDate` 亦或是 `getDate`
-            return formatter(new Date(`${year}-${month}-${day}T00:00:00`));
+            const localDate = new Date(`${year}-${month}-${day}T00:00:00`);
+            if (typeof formatter === 'function') {
+                return formatter(localDate);
+            }
+            return formatDate(localDate, formatter);
        }
        return String(date.getTime() * 1e4 + 621355968e9);
    }
--- a/lib/ui/grid/column.js
+++ b/lib/ui/grid/column.js
@ -780,9 +780,11 @@ export class GridDateColumn extends GridColumn {
     * @ignore
     * @param {HTMLElement} element 
     * @param {(string | number | Date)} val 
+     * @param {GridItemWrapper} _wrapper 
+     * @param {GridColumnDefinition} col 
     */
-    static setValue(element, val) {
-        setDateValue(element, val);
+    static setValue(element, val, _wrapper, col) {
+        setDateValue(element, val, col.dateDisplayFormatter);
    }

    /**
@ -793,7 +795,10 @@ export class GridDateColumn extends GridColumn {
     */
    static getValue(e, col) {
        if (e.target.tagName === 'INPUT') {
-            return getDateValue(e.target, col.dateValueFormatter);
+            return {
+                value: getDateValue(e.target, col.dateValueFormatter),
+                text: getDateValue(e.target, col.dateDisplayFormatter)
+            };
        }
        return e.target.innerText;
    }
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@ -264,7 +264,8 @@ let r = lang;
 * @property {("fa-light" | "fa-regular" | "fa-solid")} [iconType=fa-light] - 列为图标类型时以该值设置图标样式
 * @property {string} [dateMin] - 列为日期类型时以该值作为最小可选日期值
 * @property {string} [dateMax] - 列为日期类型时以该值作为最大可选日期值
- * @property {DateFormatterCallback} [dateValueFormatter] - 列为日期类型时自定义日期格式化函数
+ * @property {string} [dateDisplayFormatter] - 列为日期类型时日期显示的格式化字符串
+ * @property {(string | DateFormatterCallback)} [dateValueFormatter] - 列为日期类型时自定义日期格式化字符串或函数
 * @property {(string | GridItemStringCallback)} [tooltip] - 额外设置单元格的 tooltip，支持直接使用字符串或者使用函数返回的字符串
 * @property {Function} [onAllChecked] - 列头复选框改变时触发事件
 * @property {Function} [onChanged] - 单元格变化时触发事件
@ -2834,6 +2835,9 @@ export class Grid {
                        if (type.editing) {
                            val = type.getValue({ target: cell.children[0] }, col);
                            this._onRowChanged(null, i, col, val, cell, oldValue);
+                            if (Object.prototype.hasOwnProperty.call(val, 'value')) {
+                                val = val.value;
+                            }
                        }
                    }
                    if (stateChanged) {
@ -4205,7 +4209,7 @@ export class Grid {
            });
            vals.__changed = true;
            if (typeof col.onChanged === 'function') {
-                col.onChanged.call(this, item, value, oldValue, e);
+                col.onChanged.call(this, item, v, oldValue, e);
            }
        }
    }
--- a/lib/ui/media.d.ts
+++ b/lib/ui/media.d.ts
@ -23,4 +23,10 @@ export function createVideo(url: string): HTMLVideoElement
 * @param url 文件 url
 * @param icon 图标，默认为 `file-alt`
 */
-export function createFile(url: string, icon?: string): HTMLDivElement
+export function createFile(url: string, icon?: string): HTMLDivElement
+
+/**
+ * 创建联动视频元素
+ * @param urls 视频 url 数组
+ */
+export function createVideoList(urls: string[]): HTMLDivElement
--- a/lib/ui/media.js
+++ b/lib/ui/media.js
@ -62,14 +62,24 @@ function playPcm(samples, ended) {
 }

 function getTimeLabel(time) {
-    time = Math.round(time);
-    return String(Math.floor(time / 60)).padStart(2, '0') + ':' + String(time % 60).padStart(2, '0');
+    // time = Math.round(time);
+    // return String(Math.floor(time / 60)).padStart(2, '0') + ':' + String(time % 60).padStart(2, '0');
+    if (isNaN(time) || time < 0) {
+        return '0:00';
+    }
+    time = Math.floor(time);
+    const m = Math.floor(time / 60);
+    const h = Math.floor(m / 60);
+    if (h > 0) {
+        return h + ':' + String(m % 60).padStart(2, '0') + ':' + String(time % 60).padStart(2, '0');
+    }
+    return m + ':' + String(time % 60).padStart(2, '0');
 }

 export function createAudio(mime, url) {
    if ((mime === 'audio/amr' || mime === '.amr') && typeof AMR !== 'undefined') {
        const timestamp = createElement('span', 'ui-media-timestamp');
-        timestamp.textContent = '00:00 / 00:00';
+        timestamp.textContent = '0:00 / 0:00';
        let context;
        let timer;
        return createElement('div', 'ui-media-audio',
@ -80,7 +90,7 @@ export function createAudio(mime, url) {
                        clearInterval(timer);
                        context.close();
                        context = null;
-                        timestamp.textContent = '00:00 / 00:00';
+                        timestamp.textContent = '0:00 / 0:00';
                        button.className = 'play';
                        button.replaceChildren(createIcon('fa-solid', 'play'));
                        return;
@ -92,7 +102,7 @@ export function createAudio(mime, url) {
                        .then(r => playPcm(r, ctx => {
                            context = null;
                            clearInterval(timer);
-                            timestamp.textContent = '00:00 / ' + getTimeLabel(ctx.duration);
+                            timestamp.textContent = '0:00 / ' + getTimeLabel(ctx.duration);
                            button.className = 'play';
                            button.replaceChildren(createIcon('fa-solid', 'play'));
                        }))
@ -139,4 +149,277 @@ export function createFile(url, icon = 'file-alt') {
            a.innerText = 'Click here to view the file';
        })
    );
+}
+
+/**
+ * 创建联动视频元素
+ * @param {string[]} urls - 视频 url 数组
+ * @param {any} [options] - 播放参数
+ * @param {boolean} options.[autoPlay] - 是否自动播放
+ * @param {boolean} options.[autoFullScreen] - 是否自动全屏
+ * @param {boolean} options.[autoLoop] - 是否循环播放
+ * @param {Function} [callback] - 视频元素处理回调函数
+ * @returns {HTMLDivElement} 返回联动视频元素
+ */
+export function createVideoList(urls, options, callback) {
+    if (!Array.isArray(urls)) {
+        urls = [urls];
+    }
+    const length = urls.length;
+    const container = createElement('div', 'ui-media-video-container');
+    let seekProgressBar;
+    let playIcon;
+    let timeLabel;
+    let volumeProgressBar;
+    let volumeIcon;
+
+    const videos = Array(length);
+    const waiting = Array(length);
+    let prepared = 0;
+    let ended = 0;
+
+    let playing;
+    let duration = -1;
+    let durationLabel;
+    let seekBarWidth;
+    let mousing;
+    const controller = createElement('div', 'ui-video-control active',
+        createElement('div', seek => {
+            seek.className = 'ui-video-bar seek-bar';
+            seek.addEventListener('mousedown', e => {
+                if (prepared < length || waiting.find(p => p) != null) {
+                    return;
+                }
+                const width = seekBarWidth = seek.offsetWidth;
+                const currentTime = Math.min(Math.max(e.offsetX * duration / width, 0), duration);
+                videos.forEach(video => typeof video.fastSeek === 'function' ?
+                    video.fastSeek(currentTime) :
+                    (video.currentTime = currentTime));
+                mousing = true;
+                e.stopPropagation();
+            });
+            seek.addEventListener('mousemove', e => {
+                if (mousing) {
+                    if (!e.buttons) {
+                        mousing = false;
+                    } else {
+                        const v = Math.min(Math.max(e.offsetX / seekBarWidth, 0), 1);
+                        seekProgressBar.style.width = `${(v * 100).toFixed(2)}%`;
+                    }
+                }
+            });
+            seek.addEventListener('mouseup', e => {
+                if (mousing) {
+                    mousing = false;
+                    const currentTime = Math.min(Math.max(e.offsetX * duration / seekBarWidth, 0), duration);
+                    videos.forEach(video => typeof video.fastSeek === 'function' ?
+                        video.fastSeek(currentTime) :
+                        (video.currentTime = currentTime));
+                }
+            });
+        },
+            createElement('div', 'ui-video-duration seek-duration'),
+            seekProgressBar = createElement('div', 'ui-video-progress seek-progress')
+        ),
+        playIcon = createElement('div', 'ui-video-icon play-icon',
+            createIcon('fa-solid', 'play'),
+            createIcon('fa-solid', 'pause')
+        ),
+        timeLabel = createElement('div', 'ui-video-time-label'),
+        createElement('div', 'ui-video-volume-container',
+            createElement('div', volume => {
+                volume.className = 'ui-video-bar volume-bar';
+                volume.addEventListener('mousedown', e => {
+                    const v = Math.min(Math.max(e.offsetX / 60, 0), 1);
+                    const video = videos[0];
+                    if (video != null) {
+                        video.volume = v;
+                    }
+                    volumeIcon.classList[v === 0 ? 'add' : 'remove']('muted');
+                    mousing = true;
+                    e.stopPropagation();
+                });
+                volume.addEventListener('mousemove', e => {
+                    if (mousing) {
+                        if (!e.buttons) {
+                            mousing = false;
+                        } else {
+                            const v = Math.min(Math.max(e.offsetX / 60, 0), 1);
+                            volumeProgressBar.style.width = `${(v * 100).toFixed(2)}%`;
+                            const video = videos[0];
+                            if (video != null) {
+                                video.volume = v;
+                            }
+                            volumeIcon.classList[v === 0 ? 'add' : 'remove']('muted');
+                        }
+                    }
+                });
+                volume.addEventListener('mouseup', e => {
+                    if (mousing) {
+                        mousing = false;
+                        const v = Math.min(Math.max(e.offsetX / 60, 0), 1);
+                        const video = videos[0];
+                        if (video != null) {
+                            video.volume = v;
+                        }
+                        volumeIcon.classList[v === 0 ? 'add' : 'remove']('muted');
+                    }
+                });
+            },
+                createElement('div', 'ui-video-duration video-duration'),
+                volumeProgressBar = createElement('div', 'ui-video-progress video-progress')
+            ),
+            volumeIcon = createElement('div', 'ui-video-icon volume-icon',
+                createIcon('fa-solid', 'volume'),
+                createIcon('fa-solid', 'volume-mute')
+            )
+        )
+    );
+    controller.addEventListener('mousedown', () => {
+        if (prepared < length || waiting.find(p => p) != null) {
+            // not prepared.
+            return;
+        }
+        if (playing) {
+            videos.forEach(video => video.pause());
+        } else {
+            ended = 0;
+            videos.forEach(video => video.play().catch(() => { }));
+        }
+    });
+    volumeIcon.addEventListener('mousedown', e => {
+        if (volumeIcon.classList.contains('disabled')) {
+            return;
+        }
+        const video = videos[0];
+        if (video == null) {
+            return;
+        }
+        if (volumeIcon.classList.contains('muted')) {
+            video.volume = 1;
+            volumeIcon.classList.remove('muted');
+        } else {
+            video.volume = 0;
+            volumeIcon.classList.add('muted');
+        }
+        e.stopPropagation();
+    });
+    if (length === 1) {
+        controller.append(createElement('div', icon => {
+            icon.className = 'ui-video-icon fullscreen-icon';
+            icon.addEventListener('mousedown', e => {
+                if (prepared < length) {
+                    e.stopPropagation();
+                    return;
+                }
+                const video = videos[0];
+                if (video != null) {
+                    if (document.fullscreenElement == null) {
+                        video.requestFullscreen().catch(() => { });
+                    } else if (typeof document.exitFullscreen === 'function') {
+                        document.exitFullscreen();
+                    }
+                }
+            });
+        },
+            createIcon('fa-regular', 'expand')
+        ));
+    } else {
+        controller.classList.add('no-fullscreen');
+    }
+
+    urls.forEach((url, i) => {
+        const video = createElement('video');
+        videos[i] = video;
+        video.src = url;
+        video.addEventListener('durationchange', () => {
+            const d = video.duration;
+            if (d > duration) {
+                duration = d;
+                durationLabel = getTimeLabel(d);
+                timeLabel.innerText = '0:00 / ' + durationLabel;
+            }
+        });
+        video.addEventListener('loadeddata', () => {
+            if (i === 0) {
+                volumeProgressBar.style.width = `${(video.volume * 100).toFixed(2)}%`;
+            } else {
+                video.volume = 0;
+            }
+            prepared += 1;
+            if (options?.autoPlay && prepared >= length) {
+                // auto play
+                videos.forEach(v => v.play().catch(() => { }));
+                if (options?.autoFullScreen && length === 1 && document.fullscreenElement == null) {
+                    video.requestFullscreen().catch(() => { });
+                }
+            }
+        });
+        video.addEventListener('canplaythrough', () => {
+            const w = video.parentElement.querySelector('.ui-video-waiting');
+            if (w != null) {
+                w.style.opacity = 0;
+            }
+            if (waiting[i]) {
+                waiting[i] = false;
+                if (waiting.find(p => p) == null) {
+                    videos.forEach(v => v.play().catch(() => { }));
+                }
+            }
+        });
+        video.addEventListener('pause', () => {
+            playing = false;
+            controller.classList.add('active');
+            playIcon.classList.remove('pause');
+        });
+        video.addEventListener('playing', () => {
+            playing = true;
+            controller.classList.remove('active');
+            playIcon.classList.add('pause');
+        });
+        video.addEventListener('waiting', () => {
+            waiting[i] = true;
+            const w = video.parentElement.querySelector('.ui-video-waiting');
+            if (w != null) {
+                w.style.opacity = 1;
+            }
+            videos.forEach(v => v.pause());
+        });
+        video.addEventListener('ended', () => {
+            ended += 1;
+            if (ended >= length) {
+                if (options?.autoLoop) {
+                    videos.forEach(v => v.play().catch(() => { }));
+                } else {
+                    playing = false;
+                    controller.classList.add('active');
+                    seekProgressBar.style.width = '0';
+                    playIcon.classList.remove('pause');
+                    timeLabel.innerText = '0:00 / ' + durationLabel;
+                }
+            }
+        });
+        if (i === 0) {
+            video.addEventListener('timeupdate', () => {
+                seekProgressBar.style.width = `${(video.currentTime * 100 / duration).toFixed(2)}%`;
+                timeLabel.innerText = getTimeLabel(video.currentTime) + ' / ' + durationLabel;
+            });
+            video.addEventListener('volumechange', () => {
+                volumeProgressBar.style.width = `${(video.volume * 100).toFixed(2)}%`;
+            });
+        }
+        const wrapper = createElement('div', 'ui-video-wrapper',
+            video,
+            createElement('div', 'ui-video-waiting',
+                createIcon('fa-regular', 'spinner-third')
+            )
+        );
+        if (typeof callback === 'function') {
+            callback(wrapper);
+        }
+        container.append(wrapper);
+    });
+    container.append(controller);
+
+    return container;
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -12,17 +12,17 @@
        "clean-jsdoc-theme": "^4.2.18",
        "docdash": "^2.0.2",
        "jsdoc": "^4.0.2",
-        "postcss-preset-env": "^9.5.2",
-        "sass": "^1.72.0",
-        "typedoc": "^0.25.12",
-        "vite": "^5.2.6",
+        "postcss-preset-env": "^9.5.4",
+        "sass": "^1.74.1",
+        "typedoc": "^0.25.13",
+        "vite": "^5.2.8",
        "vite-plugin-externals": "^0.6.2"
      }
    },
    "node_modules/@babel/parser": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
-      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
+      "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==",
      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
@ -55,9 +55,9 @@
      }
    },
    "node_modules/@csstools/color-helpers": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-4.0.0.tgz",
-      "integrity": "sha512-wjyXB22/h2OvxAr3jldPB7R7kjTUEzopvjitS8jWtyd8fN6xJ8vy1HnHu0ZNfEkqpBJgQ76Q+sBDshWcMvTa/w==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-4.1.0.tgz",
+      "integrity": "sha512-pWRKF6cDwget8HowIIf2MqEmqIca/cf8/jO4b3PRtUF5EfQXYMtBIKycXB4yXTCUmwLKOoRZAzh/hjnc7ywOIg==",
      "dev": true,
      "funding": [
        {
@ -97,9 +97,9 @@
      }
    },
    "node_modules/@csstools/css-color-parser": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.6.2.tgz",
-      "integrity": "sha512-mlt0PomBlDXMGcbPAqCG36Fw35LZTtaSgCQCHEs4k8QTv1cUKe0rJDlFSJMHtqrgQiLC7LAAS9+s9kKQp2ou/Q==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.6.3.tgz",
+      "integrity": "sha512-pQPUPo32HW3/NuZxrwr3VJHE+vGqSTVI5gK4jGbuJ7eOFUrsTmZikXcVdInCVWOvuxK5xbCzwDWoTlZUCAKN+A==",
      "dev": true,
      "funding": [
        {
@ -112,7 +112,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/color-helpers": "^4.0.0",
+        "@csstools/color-helpers": "^4.1.0",
        "@csstools/css-calc": "^1.2.0"
      },
      "engines": {
@ -188,9 +188,9 @@
      }
    },
    "node_modules/@csstools/postcss-cascade-layers": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.3.tgz",
-      "integrity": "sha512-RbkQoOH23yGhWVetgBTwFgIOHEyU2tKMN7blTz/YAKKabR6tr9pP7mYS23Q9snFY2hr8WSaV8Le64KdM9BtUSA==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.4.tgz",
+      "integrity": "sha512-MKErv8lpEwVmAcAwidY1Kfd3oWrh2Q14kxHs9xn26XzjP/PrcdngWq63lJsZeMlBY7o+WlEOeE+FP6zPzeY2uw==",
      "dev": true,
      "funding": [
        {
@ -203,7 +203,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/selector-specificity": "^3.0.2",
+        "@csstools/selector-specificity": "^3.0.3",
        "postcss-selector-parser": "^6.0.13"
      },
      "engines": {
@ -214,9 +214,9 @@
      }
    },
    "node_modules/@csstools/postcss-color-function": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-3.0.12.tgz",
-      "integrity": "sha512-amPGGDI4Xmgu7VN2ciKQe0pP/j5raaETT50nzbnkydp9FMw7imKxSUnXdVQU4NmRgpLKIc5Q7jox0MFhMBImIg==",
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-3.0.13.tgz",
+      "integrity": "sha512-gM24cIPU45HSPJ2zllz7VKjS1OKQS1sKOMI7Wsw8gFyXSGAGrxhYo++McylOqOXd8ecMaKxKQMUJqJVibvJYig==",
      "dev": true,
      "funding": [
        {
@ -229,10 +229,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/css-color-parser": "^1.6.2",
+        "@csstools/css-color-parser": "^1.6.3",
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0"
      },
      "engines": {
@ -243,9 +243,9 @@
      }
    },
    "node_modules/@csstools/postcss-color-mix-function": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-2.0.12.tgz",
-      "integrity": "sha512-qpAEGwVVqHSa88i3gLb43IMpT4/LyZEE8HzZylQKKXFVJ7XykXaORTmXySxyH6H+flT+NyCnutKG2fegCVyCug==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-2.0.13.tgz",
+      "integrity": "sha512-mD8IIfGVeWkN1H1wfCqYePOg4cDnVrOXm4P0OlYcvKriq6sImGCGShv/2D88q6s3iUlLXfUBES+DUjLVjDMhnw==",
      "dev": true,
      "funding": [
        {
@ -258,10 +258,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/css-color-parser": "^1.6.2",
+        "@csstools/css-color-parser": "^1.6.3",
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0"
      },
      "engines": {
@ -325,9 +325,9 @@
      }
    },
    "node_modules/@csstools/postcss-gamut-mapping": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-1.0.5.tgz",
-      "integrity": "sha512-AJ74/4nHXgghLWY4/ydEhu3mzwN8c56EjIGrJsoEhKaNuGBAOtUfE5qbkc9XQQ0G2FMhHggqE+9eRrApeK7ebQ==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-1.0.6.tgz",
+      "integrity": "sha512-qGFpHU9cRf9qqkbHh9cWMTlBtGi/ujPgP/znQdwkbB4TgDR1ddI5wRRrksBsx64sfoUSlIEd70bxXzD9FtfdLg==",
      "dev": true,
      "funding": [
        {
@ -340,7 +340,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/css-color-parser": "^1.6.2",
+        "@csstools/css-color-parser": "^1.6.3",
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4"
      },
@ -352,9 +352,9 @@
      }
    },
    "node_modules/@csstools/postcss-gradients-interpolation-method": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-4.0.13.tgz",
-      "integrity": "sha512-dBbyxs9g+mrIzmEH+UtrqJUmvcJB/60j0ijhBcVJMHCgl/rKjj8ey6r/pJOI0EhkVsckOu3Prc9AGzH88C+1pQ==",
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-4.0.14.tgz",
+      "integrity": "sha512-VMWC3xtpchHJoRBb/fs1gJR/5nHopX+0GwwmgdCI1DjROtfWUKIW0nv8occ922Gv0/Lk93XBtYBv8JttVBMZUQ==",
      "dev": true,
      "funding": [
        {
@ -367,10 +367,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/css-color-parser": "^1.6.2",
+        "@csstools/css-color-parser": "^1.6.3",
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0"
      },
      "engines": {
@ -381,9 +381,9 @@
      }
    },
    "node_modules/@csstools/postcss-hwb-function": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-3.0.11.tgz",
-      "integrity": "sha512-c36FtMFptwGn5CmsfdONA40IlWG2lHeoC/TDyED/7lwiTht5okxe6iLAa9t2LjBBo5AHQSHfeMvOASdXk/SHog==",
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-3.0.12.tgz",
+      "integrity": "sha512-90kIs+FsM6isAXLVoFHTTl4h0J6g1J1M6ahpIjAs6/k7a2A9FB/q+l0MHpLre0ZiPlBf2y3e1j4L+79vml7kJw==",
      "dev": true,
      "funding": [
        {
@ -396,10 +396,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/css-color-parser": "^1.6.2",
+        "@csstools/css-color-parser": "^1.6.3",
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0"
      },
      "engines": {
@ -410,9 +410,9 @@
      }
    },
    "node_modules/@csstools/postcss-ic-unit": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-3.0.5.tgz",
-      "integrity": "sha512-9CriM/zvKXa/lDARlxs/MgeyKE6ZmmX4V77VLD7VUxKLVSt0Go3NCy/gRMbwGzxbrk3iaHFXnFbc2lNw+/7jcg==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-3.0.6.tgz",
+      "integrity": "sha512-fHaU9C/sZPauXMrzPitZ/xbACbvxbkPpHoUgB9Kw5evtsBWdVkVrajOyiT9qX7/c+G1yjApoQjP1fQatldsy9w==",
      "dev": true,
      "funding": [
        {
@ -425,7 +425,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0",
        "postcss-value-parser": "^4.2.0"
      },
@ -459,9 +459,9 @@
      }
    },
    "node_modules/@csstools/postcss-is-pseudo-class": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-4.0.5.tgz",
-      "integrity": "sha512-qG3MI7IN3KY9UwdaE9E7G7sFydscVW7nAj5OGwaBP9tQPEEVdxXTGI+l1ZW5EUpZFSj+u3q/22fH5+8HI72+Bg==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-4.0.6.tgz",
+      "integrity": "sha512-HilOhAsMpFheMYkuaREZx+CGa4hsG6kQdzwXSsuqKDFzYz2eIMP213+3dH/vUbPXaWrzqLKr8m3i0dgYPoh7vg==",
      "dev": true,
      "funding": [
        {
@ -474,7 +474,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/selector-specificity": "^3.0.2",
+        "@csstools/selector-specificity": "^3.0.3",
        "postcss-selector-parser": "^6.0.13"
      },
      "engines": {
@ -485,9 +485,9 @@
      }
    },
    "node_modules/@csstools/postcss-light-dark-function": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-1.0.1.tgz",
-      "integrity": "sha512-CJOcp+m7Njbu91HtYMMoYuZznsvNSpJtLiR/7BO8/bHTXYPiuAZfxunh7wXLkMbHd5dRBgAVAQZ+H4iFqrvWZw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-1.0.3.tgz",
+      "integrity": "sha512-izW8hvhOqJlarLcGXO5PSylW9pQS3fytmhRdx2/e1oZFi15vs7ZShOHcREHJ3FfGdYqDA10cP9uhH0A3hmm1Rw==",
      "dev": true,
      "funding": [
        {
@ -502,7 +502,7 @@
      "dependencies": {
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0"
      },
      "engines": {
@ -736,9 +736,9 @@
      }
    },
    "node_modules/@csstools/postcss-oklab-function": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-3.0.12.tgz",
-      "integrity": "sha512-RNitTHamFvUUh8x+MJuPd2tCekYexUrylGKfUoor5D2GGcgzY1WB6Bl3pIj9t8bAq5h/lcacKaB2wmvUOTfGgQ==",
+      "version": "3.0.13",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-3.0.13.tgz",
+      "integrity": "sha512-xbzMmukDFAwCt2+279io7ZiamZj87s6cnU3UgKB3G+NMpRX9A6uvN8xlnTLCe384hqg6hix5vlOmwkxqACb5pg==",
      "dev": true,
      "funding": [
        {
@ -751,10 +751,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/css-color-parser": "^1.6.2",
+        "@csstools/css-color-parser": "^1.6.3",
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0"
      },
      "engines": {
@ -765,9 +765,9 @@
      }
    },
    "node_modules/@csstools/postcss-progressive-custom-properties": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-3.1.1.tgz",
-      "integrity": "sha512-cx/bZgj+MK8SpRZNTu2zGeVFMCQfhsaeuDhukAhfA53yykvIXaTIwLi5shW9hfkvPrkqBeFoiRAzq/qogxeHTA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-3.2.0.tgz",
+      "integrity": "sha512-BZlirVxCRgKlE7yVme+Xvif72eTn1MYXj8oZ4Knb+jwaH4u3AN1DjbhM7j86RP5vvuAOexJ4JwfifYYKWMN/QQ==",
      "dev": true,
      "funding": [
        {
@ -790,9 +790,9 @@
      }
    },
    "node_modules/@csstools/postcss-relative-color-syntax": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-2.0.12.tgz",
-      "integrity": "sha512-VreDGDgE634niwCytLtkoE5kRxfva7bnMzSoyok7Eh9VPYFOm8CK/oJXt9y3df71Bxc9PG4KC8RA3CxTknudnw==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-2.0.13.tgz",
+      "integrity": "sha512-mENWPNcHdiEYtjHFfZP9U1jNukQgFpSQ7wvTvwiadK3qgNBiSl0vMSinM9kKsGsJLTHQ0LEAqWLHurU52I4Jeg==",
      "dev": true,
      "funding": [
        {
@ -805,10 +805,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/css-color-parser": "^1.6.2",
+        "@csstools/css-color-parser": "^1.6.3",
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0"
      },
      "engines": {
@ -871,9 +871,9 @@
      }
    },
    "node_modules/@csstools/postcss-text-decoration-shorthand": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-3.0.4.tgz",
-      "integrity": "sha512-yUZmbnUemgQmja7SpOZeU45+P49wNEgQguRdyTktFkZsHf7Gof+ZIYfvF6Cm+LsU1PwSupy4yUeEKKjX5+k6cQ==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-3.0.5.tgz",
+      "integrity": "sha512-qKxXpD0TYINkUtWDN1RHdeWKtZCzEv5j3UMT/ZGqyY27icwCFw7iKO0bUeLSHjYFBqhurCWvoOsa9REqLdrNDw==",
      "dev": true,
      "funding": [
        {
@ -886,7 +886,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/color-helpers": "^4.0.0",
+        "@csstools/color-helpers": "^4.1.0",
        "postcss-value-parser": "^4.2.0"
      },
      "engines": {
@ -968,9 +968,9 @@
      }
    },
    "node_modules/@csstools/selector-specificity": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz",
-      "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.3.tgz",
+      "integrity": "sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q==",
      "dev": true,
      "funding": [
        {
@ -1462,9 +1462,9 @@
      }
    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
-      "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz",
+      "integrity": "sha512-fH8/o8nSUek8ceQnT7K4EQbSiV7jgkHq81m9lWZFIXjJ7lJzpWXbQFpT/Zh6OZYnpFykvzC3fbEvEAFZu03dPA==",
      "cpu": [
        "arm"
      ],
@ -1475,9 +1475,9 @@
      ]
    },
    "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
-      "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.1.tgz",
+      "integrity": "sha512-Y/9OHLjzkunF+KGEoJr3heiD5X9OLa8sbT1lm0NYeKyaM3oMhhQFvPB0bNZYJwlq93j8Z6wSxh9+cyKQaxS7PQ==",
      "cpu": [
        "arm64"
      ],
@ -1488,9 +1488,9 @@
      ]
    },
    "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
-      "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.1.tgz",
+      "integrity": "sha512-+kecg3FY84WadgcuSVm6llrABOdQAEbNdnpi5X3UwWiFVhZIZvKgGrF7kmLguvxHNQy+UuRV66cLVl3S+Rkt+Q==",
      "cpu": [
        "arm64"
      ],
@ -1501,9 +1501,9 @@
      ]
    },
    "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
-      "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.1.tgz",
+      "integrity": "sha512-2pYRzEjVqq2TB/UNv47BV/8vQiXkFGVmPFwJb+1E0IFFZbIX8/jo1olxqqMbo6xCXf8kabANhp5bzCij2tFLUA==",
      "cpu": [
        "x64"
      ],
@ -1514,9 +1514,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
-      "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.1.tgz",
+      "integrity": "sha512-mS6wQ6Do6/wmrF9aTFVpIJ3/IDXhg1EZcQFYHZLHqw6AzMBjTHWnCG35HxSqUNphh0EHqSM6wRTT8HsL1C0x5g==",
      "cpu": [
        "arm"
      ],
@ -1527,9 +1527,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
-      "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.1.tgz",
+      "integrity": "sha512-p9rGKYkHdFMzhckOTFubfxgyIO1vw//7IIjBBRVzyZebWlzRLeNhqxuSaZ7kCEKVkm/kuC9fVRW9HkC/zNRG2w==",
      "cpu": [
        "arm64"
      ],
@ -1540,9 +1540,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
-      "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.1.tgz",
+      "integrity": "sha512-nDY6Yz5xS/Y4M2i9JLQd3Rofh5OR8Bn8qe3Mv/qCVpHFlwtZSBYSPaU4mrGazWkXrdQ98GB//H0BirGR/SKFSw==",
      "cpu": [
        "arm64"
      ],
@ -1552,10 +1552,23 @@
        "linux"
      ]
    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.1.tgz",
+      "integrity": "sha512-im7HE4VBL+aDswvcmfx88Mp1soqL9OBsdDBU8NqDEYtkri0qV0THhQsvZtZeNNlLeCUQ16PZyv7cqutjDF35qw==",
+      "cpu": [
+        "ppc64le"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
-      "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.1.tgz",
+      "integrity": "sha512-RWdiHuAxWmzPJgaHJdpvUUlDz8sdQz4P2uv367T2JocdDa98iRw2UjIJ4QxSyt077mXZT2X6pKfT2iYtVEvOFw==",
      "cpu": [
        "riscv64"
      ],
@ -1565,10 +1578,23 @@
        "linux"
      ]
    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.1.tgz",
+      "integrity": "sha512-VMgaGQ5zRX6ZqV/fas65/sUGc9cPmsntq2FiGmayW9KMNfWVG/j0BAqImvU4KTeOOgYSf1F+k6at1UfNONuNjA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
    "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
-      "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.1.tgz",
+      "integrity": "sha512-9Q7DGjZN+hTdJomaQ3Iub4m6VPu1r94bmK2z3UeWP3dGUecRC54tmVu9vKHTm1bOt3ASoYtEz6JSRLFzrysKlA==",
      "cpu": [
        "x64"
      ],
@ -1579,9 +1605,9 @@
      ]
    },
    "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
-      "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.1.tgz",
+      "integrity": "sha512-JNEG/Ti55413SsreTguSx0LOVKX902OfXIKVg+TCXO6Gjans/k9O6ww9q3oLGjNDaTLxM+IHFMeXy/0RXL5R/g==",
      "cpu": [
        "x64"
      ],
@ -1592,9 +1618,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
-      "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.1.tgz",
+      "integrity": "sha512-ryS22I9y0mumlLNwDFYZRDFLwWh3aKaC72CWjFcFvxK0U6v/mOkM5Up1bTbCRAhv3kEIwW2ajROegCIQViUCeA==",
      "cpu": [
        "arm64"
      ],
@ -1605,9 +1631,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
-      "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.1.tgz",
+      "integrity": "sha512-TdloItiGk+T0mTxKx7Hp279xy30LspMso+GzQvV2maYePMAWdmrzqSNZhUpPj3CGw12aGj57I026PgLCTu8CGg==",
      "cpu": [
        "ia32"
      ],
@ -1618,9 +1644,9 @@
      ]
    },
    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
-      "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.1.tgz",
+      "integrity": "sha512-wQGI+LY/Py20zdUPq+XCem7JcPOyzIJBm3dli+56DJsQOHbnXZFEwgmnC6el1TPAfC8lBT3m+z69RmLykNUbew==",
      "cpu": [
        "x64"
      ],
@ -1826,9 +1852,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001600",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
-      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
+      "version": "1.0.30001608",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001608.tgz",
+      "integrity": "sha512-cjUJTQkk9fQlJR2s4HMuPMvTiRggl0rAVMtthQuyOlDWuqHXqN8azLq+pi8B2TjwKJ32diHjUqRIKeFX4z1FoA==",
      "dev": true,
      "funding": [
        {
@ -1945,9 +1971,9 @@
      }
    },
    "node_modules/css-has-pseudo": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.2.tgz",
-      "integrity": "sha512-Z2Qm5yyOvJRTy6THdUlnGIX6PW/1wOc4FHWlfkcBkfkpZ3oz6lPdG+h+J7t1HZHT4uSSVR8XatXiMpqMUADXow==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.3.tgz",
+      "integrity": "sha512-qIsDxK/z0byH/mpNsv5hzQ5NOl8m1FRmOLgZpx4bG5uYHnOlO2XafeMI4mFIgNSViHwoUWcxSJZyyijaAmbs+A==",
      "dev": true,
      "funding": [
        {
@ -1960,7 +1986,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/selector-specificity": "^3.0.2",
+        "@csstools/selector-specificity": "^3.0.3",
        "postcss-selector-parser": "^6.0.13",
        "postcss-value-parser": "^4.2.0"
      },
@ -1994,9 +2020,9 @@
      }
    },
    "node_modules/cssdb": {
-      "version": "7.11.2",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.11.2.tgz",
-      "integrity": "sha512-lhQ32TFkc1X4eTefGfYPvgovRSzIMofHkigfH8nWtyRL4XJLsRhJFreRvEgKzept7x1rjBuy3J/MurXLaFxW/A==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.0.0.tgz",
+      "integrity": "sha512-hfpm8VXc7/dhcEWpLvKDLwImOSk1sa2DxL36OEiY/4h2MGfKjPYIMZo4hnEEl+TCJr2GwcX46jF5TafRASDe9w==",
      "dev": true,
      "funding": [
        {
@ -2041,9 +2067,9 @@
      }
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.4.717",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.717.tgz",
-      "integrity": "sha512-6Fmg8QkkumNOwuZ/5mIbMU9WI3H2fmn5ajcVya64I5Yr5CcNmO7vcLt0Y7c96DCiMO5/9G+4sI2r6eEvdg1F7A==",
+      "version": "1.4.733",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.733.tgz",
+      "integrity": "sha512-gUI9nhI2iBGF0OaYYLKOaOtliFMl+Bt1rY7VmEjwxOxqoYLub/D9xmduPEhbw2imE6gYkJKhIE5it+KE2ulVxQ==",
      "dev": true
    },
    "node_modules/entities": {
@ -2427,9 +2453,9 @@
      "dev": true
    },
    "node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
      "dev": true,
      "dependencies": {
        "brace-expansion": "^2.0.1"
@ -2612,9 +2638,9 @@
      }
    },
    "node_modules/postcss-color-functional-notation": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-6.0.7.tgz",
-      "integrity": "sha512-VwzaVfu1kEYDK2yM8ixeKA/QbgQ8k0uxpRevLH9Wam+R3C1sg68vnRB7m2AMhYfjqb5khp4p0EQk5aO90ASAkw==",
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-6.0.8.tgz",
+      "integrity": "sha512-BilFPTHcfWEnuQeqL83nbSPVK3tcU57S60aOrqgditarNDzOojyF0Gdc2Ur5L+zox366QjrCe0rOBLDO2pNvRQ==",
      "dev": true,
      "funding": [
        {
@ -2627,10 +2653,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/css-color-parser": "^1.6.2",
+        "@csstools/css-color-parser": "^1.6.3",
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0"
      },
      "engines": {
@ -2803,9 +2829,9 @@
      }
    },
    "node_modules/postcss-double-position-gradients": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-5.0.5.tgz",
-      "integrity": "sha512-26Tx4BfoxMNO9C89Nk56bfGv4jAwdDVgrQOyHZOP/6/D+xuOBf306KzTjHC2oBzaIIVtX+famOWHv4raxMjJMQ==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-5.0.6.tgz",
+      "integrity": "sha512-QJ+089FKMaqDxOhhIHsJrh4IP7h4PIHNC5jZP5PMmnfUScNu8Hji2lskqpFWCvu+5sj+2EJFyzKd13sLEWOZmQ==",
      "dev": true,
      "funding": [
        {
@ -2818,7 +2844,7 @@
        }
      ],
      "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0",
        "postcss-value-parser": "^4.2.0"
      },
@ -2937,9 +2963,9 @@
      }
    },
    "node_modules/postcss-lab-function": {
-      "version": "6.0.12",
-      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-6.0.12.tgz",
-      "integrity": "sha512-flHW2jdRCRe8ClhMgrylR1BCiyyqLLvp1qKfO5wuAclUihldfRsoDIFQWFVW7rJbruil9/LCoHNUvY9JwTlLPw==",
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-6.0.13.tgz",
+      "integrity": "sha512-tzEThi3prSyomnVqaAU+k/YJib4rxeeTKVfMt+mPcEugFgp0t6xRjoc7fzaWCoEwYLC6GxGLD8/Ugx8COCqabw==",
      "dev": true,
      "funding": [
        {
@ -2952,10 +2978,10 @@
        }
      ],
      "dependencies": {
-        "@csstools/css-color-parser": "^1.6.2",
+        "@csstools/css-color-parser": "^1.6.3",
        "@csstools/css-parser-algorithms": "^2.6.1",
        "@csstools/css-tokenizer": "^2.2.4",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
        "@csstools/utilities": "^1.0.0"
      },
      "engines": {
@ -2991,9 +3017,9 @@
      }
    },
    "node_modules/postcss-nesting": {
-      "version": "12.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.0.tgz",
-      "integrity": "sha512-QOYnosaZ+mlP6plQrAxFw09UUp2Sgtxj1BVHN+rSVbtV0Yx48zRt9/9F/ZOoxOKBBEsaJk2MYhhVRjeRRw5yuw==",
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.1.tgz",
+      "integrity": "sha512-qc74KvIAQNa5ujZKG1UV286dhaDW6basbUy2i9AzNU/T8C9hpvGu9NZzm1SfePe2yP7sPYgpA8d4sPVopn2Hhw==",
      "dev": true,
      "funding": [
        {
@ -3007,7 +3033,7 @@
      ],
      "dependencies": {
        "@csstools/selector-resolve-nested": "^1.1.0",
-        "@csstools/selector-specificity": "^3.0.2",
+        "@csstools/selector-specificity": "^3.0.3",
        "postcss-selector-parser": "^6.0.13"
      },
      "engines": {
@ -3099,9 +3125,9 @@
      }
    },
    "node_modules/postcss-preset-env": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.5.2.tgz",
-      "integrity": "sha512-/KIAHELdg5BxsKA/Vc6Nok/66EM7lps8NulKcQWX2S52HdzxAqh+6HcuAFj7trRSW587vlOA4zCjlRFgR+W6Ag==",
+      "version": "9.5.4",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.5.4.tgz",
+      "integrity": "sha512-o/jOlJjhm4f6rI5q1f+4Og3tz1cjaO50er9ndk7ZdcXHjWOH49kMAhqDC/nQifypQkOAiAmF46dPt3pZM+Cwbg==",
      "dev": true,
      "funding": [
        {
@ -3114,18 +3140,18 @@
        }
      ],
      "dependencies": {
-        "@csstools/postcss-cascade-layers": "^4.0.3",
-        "@csstools/postcss-color-function": "^3.0.12",
-        "@csstools/postcss-color-mix-function": "^2.0.12",
+        "@csstools/postcss-cascade-layers": "^4.0.4",
+        "@csstools/postcss-color-function": "^3.0.13",
+        "@csstools/postcss-color-mix-function": "^2.0.13",
        "@csstools/postcss-exponential-functions": "^1.0.5",
        "@csstools/postcss-font-format-keywords": "^3.0.2",
-        "@csstools/postcss-gamut-mapping": "^1.0.5",
-        "@csstools/postcss-gradients-interpolation-method": "^4.0.13",
-        "@csstools/postcss-hwb-function": "^3.0.11",
-        "@csstools/postcss-ic-unit": "^3.0.5",
+        "@csstools/postcss-gamut-mapping": "^1.0.6",
+        "@csstools/postcss-gradients-interpolation-method": "^4.0.14",
+        "@csstools/postcss-hwb-function": "^3.0.12",
+        "@csstools/postcss-ic-unit": "^3.0.6",
        "@csstools/postcss-initial": "^1.0.1",
-        "@csstools/postcss-is-pseudo-class": "^4.0.5",
-        "@csstools/postcss-light-dark-function": "^1.0.1",
+        "@csstools/postcss-is-pseudo-class": "^4.0.6",
+        "@csstools/postcss-light-dark-function": "^1.0.3",
        "@csstools/postcss-logical-float-and-clear": "^2.0.1",
        "@csstools/postcss-logical-overflow": "^1.0.1",
        "@csstools/postcss-logical-overscroll-behavior": "^1.0.1",
@ -3135,38 +3161,38 @@
        "@csstools/postcss-media-queries-aspect-ratio-number-values": "^2.0.7",
        "@csstools/postcss-nested-calc": "^3.0.2",
        "@csstools/postcss-normalize-display-values": "^3.0.2",
-        "@csstools/postcss-oklab-function": "^3.0.12",
-        "@csstools/postcss-progressive-custom-properties": "^3.1.1",
-        "@csstools/postcss-relative-color-syntax": "^2.0.12",
+        "@csstools/postcss-oklab-function": "^3.0.13",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
+        "@csstools/postcss-relative-color-syntax": "^2.0.13",
        "@csstools/postcss-scope-pseudo-class": "^3.0.1",
        "@csstools/postcss-stepped-value-functions": "^3.0.6",
-        "@csstools/postcss-text-decoration-shorthand": "^3.0.4",
+        "@csstools/postcss-text-decoration-shorthand": "^3.0.5",
        "@csstools/postcss-trigonometric-functions": "^3.0.6",
        "@csstools/postcss-unset-value": "^3.0.1",
-        "autoprefixer": "^10.4.18",
+        "autoprefixer": "^10.4.19",
        "browserslist": "^4.22.3",
        "css-blank-pseudo": "^6.0.1",
-        "css-has-pseudo": "^6.0.2",
+        "css-has-pseudo": "^6.0.3",
        "css-prefers-color-scheme": "^9.0.1",
-        "cssdb": "^7.11.1",
+        "cssdb": "^8.0.0",
        "postcss-attribute-case-insensitive": "^6.0.3",
        "postcss-clamp": "^4.1.0",
-        "postcss-color-functional-notation": "^6.0.7",
+        "postcss-color-functional-notation": "^6.0.8",
        "postcss-color-hex-alpha": "^9.0.4",
        "postcss-color-rebeccapurple": "^9.0.3",
        "postcss-custom-media": "^10.0.4",
        "postcss-custom-properties": "^13.3.6",
        "postcss-custom-selectors": "^7.1.8",
        "postcss-dir-pseudo-class": "^8.0.1",
-        "postcss-double-position-gradients": "^5.0.5",
+        "postcss-double-position-gradients": "^5.0.6",
        "postcss-focus-visible": "^9.0.1",
        "postcss-focus-within": "^8.0.1",
        "postcss-font-variant": "^5.0.0",
        "postcss-gap-properties": "^5.0.1",
        "postcss-image-set-function": "^6.0.3",
-        "postcss-lab-function": "^6.0.12",
+        "postcss-lab-function": "^6.0.13",
        "postcss-logical": "^7.0.1",
-        "postcss-nesting": "^12.1.0",
+        "postcss-nesting": "^12.1.1",
        "postcss-opacity-percentage": "^2.0.0",
        "postcss-overflow-shorthand": "^5.0.1",
        "postcss-page-break": "^3.0.4",
@ -3291,9 +3317,9 @@
      }
    },
    "node_modules/rollup": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
-      "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.1.tgz",
+      "integrity": "sha512-4LnHSdd3QK2pa1J6dFbfm1HN0D7vSK/ZuZTsdyUAlA6Rr1yTouUTL13HaDOGJVgby461AhrNGBS7sCGXXtT+SA==",
      "dev": true,
      "dependencies": {
        "@types/estree": "1.0.5"
@ -3306,26 +3332,28 @@
        "npm": ">=8.0.0"
      },
      "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.13.0",
-        "@rollup/rollup-android-arm64": "4.13.0",
-        "@rollup/rollup-darwin-arm64": "4.13.0",
-        "@rollup/rollup-darwin-x64": "4.13.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.13.0",
-        "@rollup/rollup-linux-arm64-musl": "4.13.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
-        "@rollup/rollup-linux-x64-gnu": "4.13.0",
-        "@rollup/rollup-linux-x64-musl": "4.13.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.13.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.13.0",
-        "@rollup/rollup-win32-x64-msvc": "4.13.0",
+        "@rollup/rollup-android-arm-eabi": "4.14.1",
+        "@rollup/rollup-android-arm64": "4.14.1",
+        "@rollup/rollup-darwin-arm64": "4.14.1",
+        "@rollup/rollup-darwin-x64": "4.14.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.14.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.14.1",
+        "@rollup/rollup-linux-arm64-musl": "4.14.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.14.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.14.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.14.1",
+        "@rollup/rollup-linux-x64-gnu": "4.14.1",
+        "@rollup/rollup-linux-x64-musl": "4.14.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.14.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.14.1",
+        "@rollup/rollup-win32-x64-msvc": "4.14.1",
        "fsevents": "~2.3.2"
      }
    },
    "node_modules/sass": {
-      "version": "1.72.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
-      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
+      "version": "1.74.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.74.1.tgz",
+      "integrity": "sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==",
      "dev": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
@ -3424,9 +3452,9 @@
      }
    },
    "node_modules/terser": {
-      "version": "5.29.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.29.2.tgz",
-      "integrity": "sha512-ZiGkhUBIM+7LwkNjXYJq8svgkd+QK3UUr0wJqY4MieaezBSAIPgbSPZyIx0idM6XWK5CMzSWa8MJIzmRcB8Caw==",
+      "version": "5.30.3",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz",
+      "integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==",
      "dev": true,
      "dependencies": {
        "@jridgewell/source-map": "^0.3.3",
@ -3466,9 +3494,9 @@
      "dev": true
    },
    "node_modules/typedoc": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.12.tgz",
-      "integrity": "sha512-F+qhkK2VoTweDXd1c42GS/By2DvI2uDF4/EpG424dTexSHdtCH52C6IcAvMA6jR3DzAWZjHpUOW+E02kyPNUNw==",
+      "version": "0.25.13",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.13.tgz",
+      "integrity": "sha512-pQqiwiJ+Z4pigfOnnysObszLiU3mVLWAExSPf+Mu06G/qsc3wzbuM56SZQvONhHLncLUhYzOVkjFFpFfL5AzhQ==",
      "dev": true,
      "dependencies": {
        "lunr": "^2.3.9",
@ -3487,9 +3515,9 @@
      }
    },
    "node_modules/typescript": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
-      "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
      "dev": true,
      "peer": true,
      "bin": {
@ -3558,13 +3586,13 @@
      "dev": true
    },
    "node_modules/vite": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz",
-      "integrity": "sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==",
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
      "dev": true,
      "dependencies": {
        "esbuild": "^0.20.1",
-        "postcss": "^8.4.36",
+        "postcss": "^8.4.38",
        "rollup": "^4.13.0"
      },
      "bin": {
--- a/package.json
+++ b/package.json
@ -32,10 +32,10 @@
    "clean-jsdoc-theme": "^4.2.18",
    "docdash": "^2.0.2",
    "jsdoc": "^4.0.2",
-    "postcss-preset-env": "^9.5.2",
-    "sass": "^1.72.0",
-    "typedoc": "^0.25.12",
-    "vite": "^5.2.6",
+    "postcss-preset-env": "^9.5.4",
+    "sass": "^1.74.1",
+    "typedoc": "^0.25.13",
+    "vite": "^5.2.8",
    "vite-plugin-externals": "^0.6.2"
  }
 }
--- a/sample/fonts/fa-brands.svg
+++ b/sample/fonts/fa-brands.svg
--- a/sample/fonts/fa-light.svg
+++ b/sample/fonts/fa-light.svg
--- a/sample/fonts/fa-regular.svg
+++ b/sample/fonts/fa-regular.svg
--- a/sample/fonts/fa-solid.svg
+++ b/sample/fonts/fa-solid.svg
--- a/sample/index.html
+++ b/sample/index.html
@ -6,11 +6,11 @@
  <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>UI Lib</title>
-  <link href="/dist/ui.min.css" rel="stylesheet" />
-  <script src="/amrnb.js"></script>
-  <script type="module" src="/main.js"></script>
-  <script src="/dist/ui.min.js"></script>
-  <script src="/dist/utility.min.js"></script>
+  <link href="dist/ui.min.css" rel="stylesheet" />
+  <script src="amrnb.js"></script>
+  <script type="module" src="main.js"></script>
+  <script src="dist/ui.min.js"></script>
+  <script src="dist/utility.min.js"></script>
  <style type="text/css">
    #container>.ui-grid {
      width: 1000px;