tyrell-components 1.0.0-TC52 → 1.0.0-TC53

package/lib/utils/custom-scrollbar.js

@@ -1,276 +1,276 @@
 export function isCustomScrollbarEnabled() {
-    return document.documentElement.getAttribute('data-ty-scrollbar') !== 'native';
+return document.documentElement.getAttribute('data-ty-scrollbar') !== 'native';
 }
 export class CustomScrollbar {
-    constructor(scrollEl, options = {}) {
-        this.trackY = null;
-        this.thumbY = null;
-        this.trackX = null;
-        this.thumbX = null;
-        this._isDragging = false;
-        this._dragAxis = 'y';
-        this._dragStartPos = 0;
-        this._dragStartScroll = 0;
-        this._rafId = null;
-        this._hideTimeout = null;
-        this._resizeObserver = null;
-        this._scrollEl = scrollEl;
-        this._vertical = options.vertical !== false;
-        this._horizontal = options.horizontal ?? false;
-        this._autoHideDelay = options.autoHideDelay ?? 1000;
-        this._onScroll = this._handleScroll.bind(this);
-        this._onThumbYDown = this._handleThumbYDown.bind(this);
-        this._onThumbXDown = this._handleThumbXDown.bind(this);
-        this._onTrackYDown = this._handleTrackYDown.bind(this);
-        this._onTrackXDown = this._handleTrackXDown.bind(this);
-        this._onDragMove = this._handleDragMove.bind(this);
-        this._onDragEnd = this._handleDragEnd.bind(this);
-        if (this._vertical) {
-            this.trackY = this._createTrack('y');
-            this.thumbY = this._createThumb('y');
-            this.trackY.appendChild(this.thumbY);
-        }
-        if (this._horizontal) {
-            this.trackX = this._createTrack('x');
-            this.thumbX = this._createThumb('x');
-            this.trackX.appendChild(this.thumbX);
-        }
-        this._scrollEl.addEventListener('scroll', this._onScroll, { passive: true });
-        if (this.thumbY) {
-            this.thumbY.addEventListener('pointerdown', this._onThumbYDown);
-        }
-        if (this.trackY) {
-            this.trackY.addEventListener('pointerdown', this._onTrackYDown);
-        }
-        if (this.thumbX) {
-            this.thumbX.addEventListener('pointerdown', this._onThumbXDown);
-        }
-        if (this.trackX) {
-            this.trackX.addEventListener('pointerdown', this._onTrackXDown);
-        }
-        this._resizeObserver = new ResizeObserver(() => this.update());
-        this._resizeObserver.observe(this._scrollEl);
-        this.update();
-    }
-    _createTrack(axis) {
-        const el = document.createElement('div');
-        el.className = `ty-scrollbar-track-${axis}`;
-        return el;
-    }
-    _createThumb(axis) {
-        const el = document.createElement('div');
-        el.className = `ty-scrollbar-thumb-${axis}`;
-        return el;
-    }
-    update() {
-        this._updateVertical();
-        this._updateHorizontal();
-    }
-    scrollToTop(smooth = false) {
-        this._scrollEl.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
-    }
-    scrollToBottom(smooth = false) {
-        this._scrollEl.scrollTo({ top: this._scrollEl.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
-    }
-    scrollToLeft(smooth = false) {
-        this._scrollEl.scrollTo({ left: 0, behavior: smooth ? 'smooth' : 'auto' });
-    }
-    scrollToRight(smooth = false) {
-        this._scrollEl.scrollTo({ left: this._scrollEl.scrollWidth, behavior: smooth ? 'smooth' : 'auto' });
-    }
-    destroy() {
-        this._scrollEl.removeEventListener('scroll', this._onScroll);
-        if (this.thumbY) {
-            this.thumbY.removeEventListener('pointerdown', this._onThumbYDown);
-        }
-        if (this.trackY) {
-            this.trackY.removeEventListener('pointerdown', this._onTrackYDown);
-        }
-        if (this.thumbX) {
-            this.thumbX.removeEventListener('pointerdown', this._onThumbXDown);
-        }
-        if (this.trackX) {
-            this.trackX.removeEventListener('pointerdown', this._onTrackXDown);
-        }
-        if (this._resizeObserver) {
-            this._resizeObserver.disconnect();
-            this._resizeObserver = null;
-        }
-        if (this._rafId !== null) {
-            cancelAnimationFrame(this._rafId);
-            this._rafId = null;
-        }
-        if (this._hideTimeout !== null) {
-            clearTimeout(this._hideTimeout);
-            this._hideTimeout = null;
-        }
-    }
-    _handleScroll() {
-        if (this._rafId !== null)
-            return;
-        this._rafId = requestAnimationFrame(() => {
-            this._rafId = null;
-            this._updateThumbPositions();
-            this._showScrollbars();
-        });
-    }
-    _updateVertical() {
-        if (!this.trackY || !this.thumbY)
-            return;
-        const { scrollHeight, clientHeight } = this._scrollEl;
-        const hasOverflow = scrollHeight > clientHeight + 2;
-        this.trackY.classList.toggle('has-overflow', hasOverflow);
-        if (hasOverflow) {
-            const ratio = clientHeight / scrollHeight;
-            this.thumbY.style.height = `${Math.max(ratio * 100, 0)}%`;
-        }
-        this._updateThumbY();
-    }
-    _updateHorizontal() {
-        if (!this.trackX || !this.thumbX)
-            return;
-        const { scrollWidth, clientWidth } = this._scrollEl;
-        const hasOverflow = scrollWidth > clientWidth + 2;
-        this.trackX.classList.toggle('has-overflow', hasOverflow);
-        if (hasOverflow) {
-            const ratio = clientWidth / scrollWidth;
-            this.thumbX.style.width = `${Math.max(ratio * 100, 0)}%`;
-        }
-        this._updateThumbX();
-    }
-    _updateThumbPositions() {
-        this._updateThumbY();
-        this._updateThumbX();
-    }
-    _updateThumbY() {
-        if (!this.trackY || !this.thumbY)
-            return;
-        const { scrollTop, scrollHeight, clientHeight } = this._scrollEl;
-        const maxScroll = scrollHeight - clientHeight;
-        if (maxScroll <= 0)
-            return;
-        const scrollRatio = scrollTop / maxScroll;
-        const trackHeight = this.trackY.clientHeight;
-        const thumbHeight = this.thumbY.offsetHeight;
-        const maxThumbTop = trackHeight - thumbHeight;
-        this.thumbY.style.top = `${scrollRatio * maxThumbTop}px`;
-    }
-    _updateThumbX() {
-        if (!this.trackX || !this.thumbX)
-            return;
-        const { scrollLeft, scrollWidth, clientWidth } = this._scrollEl;
-        const maxScroll = scrollWidth - clientWidth;
-        if (maxScroll <= 0)
-            return;
-        const scrollRatio = scrollLeft / maxScroll;
-        const trackWidth = this.trackX.clientWidth;
-        const thumbWidth = this.thumbX.offsetWidth;
-        const maxThumbLeft = trackWidth - thumbWidth;
-        this.thumbX.style.left = `${scrollRatio * maxThumbLeft}px`;
-    }
-    _showScrollbars() {
-        if (this._isDragging)
-            return;
-        this.trackY?.classList.add('scrolling');
-        this.trackX?.classList.add('scrolling');
-        if (this._hideTimeout !== null) {
-            clearTimeout(this._hideTimeout);
-        }
-        this._hideTimeout = setTimeout(() => {
-            this.trackY?.classList.remove('scrolling');
-            this.trackX?.classList.remove('scrolling');
-            this._hideTimeout = null;
-        }, this._autoHideDelay);
-    }
-    _handleThumbYDown(e) {
-        if (e.button !== 0)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        this._isDragging = true;
-        this._dragAxis = 'y';
-        this._dragStartPos = e.clientY;
-        this._dragStartScroll = this._scrollEl.scrollTop;
-        this.thumbY.setPointerCapture(e.pointerId);
-        this.trackY?.classList.add('dragging');
-        this.thumbY.addEventListener('pointermove', this._onDragMove);
-        this.thumbY.addEventListener('pointerup', this._onDragEnd);
-        this.thumbY.addEventListener('pointercancel', this._onDragEnd);
-    }
-    _handleThumbXDown(e) {
-        if (e.button !== 0)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        this._isDragging = true;
-        this._dragAxis = 'x';
-        this._dragStartPos = e.clientX;
-        this._dragStartScroll = this._scrollEl.scrollLeft;
-        this.thumbX.setPointerCapture(e.pointerId);
-        this.trackX?.classList.add('dragging');
-        this.thumbX.addEventListener('pointermove', this._onDragMove);
-        this.thumbX.addEventListener('pointerup', this._onDragEnd);
-        this.thumbX.addEventListener('pointercancel', this._onDragEnd);
-    }
-    _handleDragMove(e) {
-        if (!this._isDragging)
-            return;
-        if (this._dragAxis === 'y') {
-            const delta = e.clientY - this._dragStartPos;
-            const { scrollHeight, clientHeight } = this._scrollEl;
-            const trackHeight = this.trackY.clientHeight;
-            const thumbHeight = this.thumbY.offsetHeight;
-            const maxThumbTop = trackHeight - thumbHeight;
-            if (maxThumbTop <= 0)
-                return;
-            const scrollRatio = (scrollHeight - clientHeight) / maxThumbTop;
-            this._scrollEl.scrollTop = this._dragStartScroll + delta * scrollRatio;
-        }
-        else {
-            const delta = e.clientX - this._dragStartPos;
-            const { scrollWidth, clientWidth } = this._scrollEl;
-            const trackWidth = this.trackX.clientWidth;
-            const thumbWidth = this.thumbX.offsetWidth;
-            const maxThumbLeft = trackWidth - thumbWidth;
-            if (maxThumbLeft <= 0)
-                return;
-            const scrollRatio = (scrollWidth - clientWidth) / maxThumbLeft;
-            this._scrollEl.scrollLeft = this._dragStartScroll + delta * scrollRatio;
-        }
-    }
-    _handleDragEnd(e) {
-        const thumb = this._dragAxis === 'y' ? this.thumbY : this.thumbX;
-        const track = this._dragAxis === 'y' ? this.trackY : this.trackX;
-        this._isDragging = false;
-        thumb.releasePointerCapture(e.pointerId);
-        track?.classList.remove('dragging');
-        thumb.removeEventListener('pointermove', this._onDragMove);
-        thumb.removeEventListener('pointerup', this._onDragEnd);
-        thumb.removeEventListener('pointercancel', this._onDragEnd);
-        this._showScrollbars();
-    }
-    _handleTrackYDown(e) {
-        if (e.target === this.thumbY || e.button !== 0)
-            return;
-        e.preventDefault();
-        const trackRect = this.trackY.getBoundingClientRect();
-        const clickRatio = (e.clientY - trackRect.top) / trackRect.height;
-        const { scrollHeight, clientHeight } = this._scrollEl;
-        this._scrollEl.scrollTo({
-            top: clickRatio * (scrollHeight - clientHeight),
-            behavior: 'smooth'
-        });
-    }
-    _handleTrackXDown(e) {
-        if (e.target === this.thumbX || e.button !== 0)
-            return;
-        e.preventDefault();
-        const trackRect = this.trackX.getBoundingClientRect();
-        const clickRatio = (e.clientX - trackRect.left) / trackRect.width;
-        const { scrollWidth, clientWidth } = this._scrollEl;
-        this._scrollEl.scrollTo({
-            left: clickRatio * (scrollWidth - clientWidth),
-            behavior: 'smooth'
-        });
-    }
+constructor(scrollEl, options = {}) {
+this.trackY = null;
+this.thumbY = null;
+this.trackX = null;
+this.thumbX = null;
+this._isDragging = false;
+this._dragAxis = 'y';
+this._dragStartPos = 0;
+this._dragStartScroll = 0;
+this._rafId = null;
+this._hideTimeout = null;
+this._resizeObserver = null;
+this._scrollEl = scrollEl;
+this._vertical = options.vertical !== false;
+this._horizontal = options.horizontal ?? false;
+this._autoHideDelay = options.autoHideDelay ?? 1000;
+this._onScroll = this._handleScroll.bind(this);
+this._onThumbYDown = this._handleThumbYDown.bind(this);
+this._onThumbXDown = this._handleThumbXDown.bind(this);
+this._onTrackYDown = this._handleTrackYDown.bind(this);
+this._onTrackXDown = this._handleTrackXDown.bind(this);
+this._onDragMove = this._handleDragMove.bind(this);
+this._onDragEnd = this._handleDragEnd.bind(this);
+if (this._vertical) {
+this.trackY = this._createTrack('y');
+this.thumbY = this._createThumb('y');
+this.trackY.appendChild(this.thumbY);
+}
+if (this._horizontal) {
+this.trackX = this._createTrack('x');
+this.thumbX = this._createThumb('x');
+this.trackX.appendChild(this.thumbX);
+}
+this._scrollEl.addEventListener('scroll', this._onScroll, { passive: true });
+if (this.thumbY) {
+this.thumbY.addEventListener('pointerdown', this._onThumbYDown);
+}
+if (this.trackY) {
+this.trackY.addEventListener('pointerdown', this._onTrackYDown);
+}
+if (this.thumbX) {
+this.thumbX.addEventListener('pointerdown', this._onThumbXDown);
+}
+if (this.trackX) {
+this.trackX.addEventListener('pointerdown', this._onTrackXDown);
+}
+this._resizeObserver = new ResizeObserver(() => this.update());
+this._resizeObserver.observe(this._scrollEl);
+this.update();
+}
+_createTrack(axis) {
+const el = document.createElement('div');
+el.className = `ty-scrollbar-track-${axis}`;
+return el;
+}
+_createThumb(axis) {
+const el = document.createElement('div');
+el.className = `ty-scrollbar-thumb-${axis}`;
+return el;
+}
+update() {
+this._updateVertical();
+this._updateHorizontal();
+}
+scrollToTop(smooth = false) {
+this._scrollEl.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
+}
+scrollToBottom(smooth = false) {
+this._scrollEl.scrollTo({ top: this._scrollEl.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
+}
+scrollToLeft(smooth = false) {
+this._scrollEl.scrollTo({ left: 0, behavior: smooth ? 'smooth' : 'auto' });
+}
+scrollToRight(smooth = false) {
+this._scrollEl.scrollTo({ left: this._scrollEl.scrollWidth, behavior: smooth ? 'smooth' : 'auto' });
+}
+destroy() {
+this._scrollEl.removeEventListener('scroll', this._onScroll);
+if (this.thumbY) {
+this.thumbY.removeEventListener('pointerdown', this._onThumbYDown);
+}
+if (this.trackY) {
+this.trackY.removeEventListener('pointerdown', this._onTrackYDown);
+}
+if (this.thumbX) {
+this.thumbX.removeEventListener('pointerdown', this._onThumbXDown);
+}
+if (this.trackX) {
+this.trackX.removeEventListener('pointerdown', this._onTrackXDown);
+}
+if (this._resizeObserver) {
+this._resizeObserver.disconnect();
+this._resizeObserver = null;
+}
+if (this._rafId !== null) {
+cancelAnimationFrame(this._rafId);
+this._rafId = null;
+}
+if (this._hideTimeout !== null) {
+clearTimeout(this._hideTimeout);
+this._hideTimeout = null;
+}
+}
+_handleScroll() {
+if (this._rafId !== null)
+return;
+this._rafId = requestAnimationFrame(() => {
+this._rafId = null;
+this._updateThumbPositions();
+this._showScrollbars();
+});
+}
+_updateVertical() {
+if (!this.trackY || !this.thumbY)
+return;
+const { scrollHeight, clientHeight } = this._scrollEl;
+const hasOverflow = scrollHeight > clientHeight + 2;
+this.trackY.classList.toggle('has-overflow', hasOverflow);
+if (hasOverflow) {
+const ratio = clientHeight / scrollHeight;
+this.thumbY.style.height = `${Math.max(ratio * 100, 0)}%`;
+}
+this._updateThumbY();
+}
+_updateHorizontal() {
+if (!this.trackX || !this.thumbX)
+return;
+const { scrollWidth, clientWidth } = this._scrollEl;
+const hasOverflow = scrollWidth > clientWidth + 2;
+this.trackX.classList.toggle('has-overflow', hasOverflow);
+if (hasOverflow) {
+const ratio = clientWidth / scrollWidth;
+this.thumbX.style.width = `${Math.max(ratio * 100, 0)}%`;
+}
+this._updateThumbX();
+}
+_updateThumbPositions() {
+this._updateThumbY();
+this._updateThumbX();
+}
+_updateThumbY() {
+if (!this.trackY || !this.thumbY)
+return;
+const { scrollTop, scrollHeight, clientHeight } = this._scrollEl;
+const maxScroll = scrollHeight - clientHeight;
+if (maxScroll <= 0)
+return;
+const scrollRatio = scrollTop / maxScroll;
+const trackHeight = this.trackY.clientHeight;
+const thumbHeight = this.thumbY.offsetHeight;
+const maxThumbTop = trackHeight - thumbHeight;
+this.thumbY.style.top = `${scrollRatio * maxThumbTop}px`;
+}
+_updateThumbX() {
+if (!this.trackX || !this.thumbX)
+return;
+const { scrollLeft, scrollWidth, clientWidth } = this._scrollEl;
+const maxScroll = scrollWidth - clientWidth;
+if (maxScroll <= 0)
+return;
+const scrollRatio = scrollLeft / maxScroll;
+const trackWidth = this.trackX.clientWidth;
+const thumbWidth = this.thumbX.offsetWidth;
+const maxThumbLeft = trackWidth - thumbWidth;
+this.thumbX.style.left = `${scrollRatio * maxThumbLeft}px`;
+}
+_showScrollbars() {
+if (this._isDragging)
+return;
+this.trackY?.classList.add('scrolling');
+this.trackX?.classList.add('scrolling');
+if (this._hideTimeout !== null) {
+clearTimeout(this._hideTimeout);
+}
+this._hideTimeout = setTimeout(() => {
+this.trackY?.classList.remove('scrolling');
+this.trackX?.classList.remove('scrolling');
+this._hideTimeout = null;
+}, this._autoHideDelay);
+}
+_handleThumbYDown(e) {
+if (e.button !== 0)
+return;
+e.preventDefault();
+e.stopPropagation();
+this._isDragging = true;
+this._dragAxis = 'y';
+this._dragStartPos = e.clientY;
+this._dragStartScroll = this._scrollEl.scrollTop;
+this.thumbY.setPointerCapture(e.pointerId);
+this.trackY?.classList.add('dragging');
+this.thumbY.addEventListener('pointermove', this._onDragMove);
+this.thumbY.addEventListener('pointerup', this._onDragEnd);
+this.thumbY.addEventListener('pointercancel', this._onDragEnd);
+}
+_handleThumbXDown(e) {
+if (e.button !== 0)
+return;
+e.preventDefault();
+e.stopPropagation();
+this._isDragging = true;
+this._dragAxis = 'x';
+this._dragStartPos = e.clientX;
+this._dragStartScroll = this._scrollEl.scrollLeft;
+this.thumbX.setPointerCapture(e.pointerId);
+this.trackX?.classList.add('dragging');
+this.thumbX.addEventListener('pointermove', this._onDragMove);
+this.thumbX.addEventListener('pointerup', this._onDragEnd);
+this.thumbX.addEventListener('pointercancel', this._onDragEnd);
+}
+_handleDragMove(e) {
+if (!this._isDragging)
+return;
+if (this._dragAxis === 'y') {
+const delta = e.clientY - this._dragStartPos;
+const { scrollHeight, clientHeight } = this._scrollEl;
+const trackHeight = this.trackY.clientHeight;
+const thumbHeight = this.thumbY.offsetHeight;
+const maxThumbTop = trackHeight - thumbHeight;
+if (maxThumbTop <= 0)
+return;
+const scrollRatio = (scrollHeight - clientHeight) / maxThumbTop;
+this._scrollEl.scrollTop = this._dragStartScroll + delta * scrollRatio;
+}
+else {
+const delta = e.clientX - this._dragStartPos;
+const { scrollWidth, clientWidth } = this._scrollEl;
+const trackWidth = this.trackX.clientWidth;
+const thumbWidth = this.thumbX.offsetWidth;
+const maxThumbLeft = trackWidth - thumbWidth;
+if (maxThumbLeft <= 0)
+return;
+const scrollRatio = (scrollWidth - clientWidth) / maxThumbLeft;
+this._scrollEl.scrollLeft = this._dragStartScroll + delta * scrollRatio;
+}
+}
+_handleDragEnd(e) {
+const thumb = this._dragAxis === 'y' ? this.thumbY : this.thumbX;
+const track = this._dragAxis === 'y' ? this.trackY : this.trackX;
+this._isDragging = false;
+thumb.releasePointerCapture(e.pointerId);
+track?.classList.remove('dragging');
+thumb.removeEventListener('pointermove', this._onDragMove);
+thumb.removeEventListener('pointerup', this._onDragEnd);
+thumb.removeEventListener('pointercancel', this._onDragEnd);
+this._showScrollbars();
+}
+_handleTrackYDown(e) {
+if (e.target === this.thumbY || e.button !== 0)
+return;
+e.preventDefault();
+const trackRect = this.trackY.getBoundingClientRect();
+const clickRatio = (e.clientY - trackRect.top) / trackRect.height;
+const { scrollHeight, clientHeight } = this._scrollEl;
+this._scrollEl.scrollTo({
+top: clickRatio * (scrollHeight - clientHeight),
+behavior: 'smooth'
+});
+}
+_handleTrackXDown(e) {
+if (e.target === this.thumbX || e.button !== 0)
+return;
+e.preventDefault();
+const trackRect = this.trackX.getBoundingClientRect();
+const clickRatio = (e.clientX - trackRect.left) / trackRect.width;
+const { scrollWidth, clientWidth } = this._scrollEl;
+this._scrollEl.scrollTo({
+left: clickRatio * (scrollWidth - clientWidth),
+behavior: 'smooth'
+});
+}
 }

package/lib/utils/flavor-sheet.js

@@ -1,17 +1,17 @@
 import { FLAVORS } from '../types/common.js';
 export function syncCustomFlavorSheet(shadow, sheet, flavor, css) {
-    const full = String(flavor || '');
-    const base = full.replace(/[+-]$/, '');
-    if (FLAVORS.includes(base) || !/^[A-Za-z][A-Za-z0-9_-]*$/.test(base)) {
-        if (sheet) {
-            shadow.adoptedStyleSheets = shadow.adoptedStyleSheets.filter((s) => s !== sheet);
-        }
-        return null;
-    }
-    if (!sheet) {
-        sheet = new CSSStyleSheet();
-        shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
-    }
-    sheet.replaceSync(css({ flavor: full, base, shade: full.slice(base.length) }));
-    return sheet;
+const full = String(flavor || '');
+const base = full.replace(/[+-]$/, '');
+if (FLAVORS.includes(base) || !/^[A-Za-z][A-Za-z0-9_-]*$/.test(base)) {
+if (sheet) {
+shadow.adoptedStyleSheets = shadow.adoptedStyleSheets.filter((s) => s !== sheet);
+}
+return null;
+}
+if (!sheet) {
+sheet = new CSSStyleSheet();
+shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+}
+sheet.replaceSync(css({ flavor: full, base, shade: full.slice(base.length) }));
+return sheet;
 }