mnfst 0.5.14

package/dist/manifest.sidebar.css

@@ -0,0 +1,102 @@
+/* Manifest Sidebars */
+
+@layer base {
+
+    /* Base popover styles */
+    :where([popover]):not(.unstyle) {
+        display: none;
+        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
+        transition-behavior: allow-discrete;
+
+        &:popover-open {
+            display: flex
+        }
+
+        /* Opening state */
+        @starting-style {
+            scale: .9;
+            opacity: 0
+        }
+
+        /* Closing state */
+        &:not(:popover-open) {
+            display: none !important;
+            scale: 1;
+            opacity: 0;
+            transition-duration: .15s;
+            transition-timing-function: ease-out
+        }
+    }
+}
+
+@layer components {
+
+    :where(aside[popover]) {
+        inset-inline-start: auto;
+        inset-inline-end: 0;
+        width: fit-content;
+        min-width: 20vw;
+        max-width: 80vw;
+        max-width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        z-index: 200;
+        background-color: var(--color-popover-surface, oklch(100% 0 0));
+        transition: opacity .15s ease-in, transform .15s ease-in, display .15s ease-in;
+        transition-behavior: allow-discrete;
+
+        /* Opening state - slide in from inline-end */
+        @starting-style {
+            transform: translateX(100%);
+            opacity: 1;
+            scale: 1
+        }
+
+        /* Closing state - slide out to inline-end */
+        &:not(:popover-open) {
+            transform: translateX(100%);
+            opacity: 1;
+            scale: 1
+        }
+
+        /* RTL overrides - slide in from left in RTL context */
+        [dir=rtl] & {
+            @starting-style {
+                transform: translateX(-100%)
+            }
+
+            &:not(:popover-open) {
+                transform: translateX(-100%)
+            }
+        }
+    }
+
+    :where(aside[popover].appear-start) {
+        inset-inline-start: 0;
+        inset-inline-end: auto;
+
+        @starting-style {
+            transform: translateX(-100%)
+        }
+
+        &:not(:popover-open) {
+            transform: translateX(-100%)
+        }
+
+        /* RTL overrides */
+        [dir=rtl] & {
+            @starting-style {
+                transform: translateX(100%)
+            }
+
+            &:not(:popover-open) {
+                transform: translateX(100%)
+            }
+        }
+    }
+
+    /* Dark mode override */
+    .dark :where(aside[popover]) {
+        background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
+    }
+}

package/dist/manifest.slides.css

@@ -0,0 +1,80 @@
+/* Manifest Slides */
+
+@layer components {
+
+    [x-carousel] {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        overflow: hidden;
+
+        /* Slides container */
+        .carousel-slides {
+            display: flex;
+            transition: transform 300ms ease-in-out;
+            width: 100%;
+            aspect-ratio: 16 / 9
+        }
+
+        /* Previous & next buttons */
+        & button[\@click="prev()"],
+        & button[\@click="next()"] {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background-color: oklch(100% 0 0 / 0.15);
+
+            &:hover {
+                background-color: oklch(100% 0 0 / 0.3)
+            }
+        }
+
+        & button[\@click="prev()"] {
+            left: calc(var(--spacing) * 4)
+        }
+
+        & button[\@click="next()"] {
+            left: auto;
+            right: calc(var(--spacing) * 4)
+        }
+
+        /* Dots container */
+        .carousel-dots {
+            position: absolute;
+            bottom: calc(var(--spacing) * 4);
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: calc(var(--spacing) * 2);
+            max-width: 100%;
+            padding: 0 calc(var(--spacing) * 4);
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none
+            }
+
+            /* Dot button */
+            & span {
+                flex-shrink: 0;
+                width: 0.625rem;
+                height: 0.625rem;
+                border-radius: 50%;
+                background-color: oklch(100% 0 0 / 0.15);
+                cursor: pointer;
+                transition: background-color 300ms ease-in-out;
+
+                &:hover {
+                    background-color: oklch(100% 0 0 / 0.3)
+                }
+
+                &.active {
+                    background-color: white
+                }
+            }
+        }
+    }
+}

package/dist/manifest.slides.js

@@ -0,0 +1,173 @@
+/* Manifest Slides */
+
+function initializeCarouselPlugin() {
+
+    Alpine.directive('carousel', (el, { value, modifiers, expression }, { evaluate, effect }) => {
+        const state = {
+            carousel: {
+                autoplay: modifiers.includes('autoplay'),
+                interval: 3000,
+                loop: modifiers.includes('loop'),
+                arrows: modifiers.includes('arrows'),
+                dots: modifiers.includes('dots'),
+                thumbnails: modifiers.includes('thumbnails'),
+                enableDrag: !modifiers.includes('no-drag')
+            },
+            currentSlide: 0,
+            dragging: false,
+            startX: 0,
+
+            // Get total slides by counting actual DOM elements
+            get totalSlides() {
+                const track = el.querySelector('.carousel-slides');
+                if (!track) return 0;
+                return Array.from(track.children).filter(child =>
+                    child.tagName !== 'TEMPLATE'
+                ).length;
+            },
+
+            // Navigation methods
+            next() {
+                const total = this.totalSlides;
+                if (this.currentSlide >= total - 1) {
+                    if (this.carousel.loop) {
+                        this.currentSlide = 0;
+                    }
+                } else {
+                    this.currentSlide++;
+                }
+            },
+
+            prev() {
+                const total = this.totalSlides;
+                if (this.currentSlide <= 0) {
+                    if (this.carousel.loop) {
+                        this.currentSlide = total - 1;
+                    }
+                } else {
+                    this.currentSlide--;
+                }
+            },
+
+            goToSlide(index) {
+                const total = this.totalSlides;
+                if (index >= 0 && index < total) {
+                    this.currentSlide = index;
+                }
+            },
+
+            // Drag handlers
+            startDrag(e) {
+                if (!this.carousel.enableDrag) return;
+                this.dragging = true;
+                this.startX = e.type === 'mousedown' ? e.pageX : e.touches[0].pageX;
+            },
+
+            drag(e) {
+                if (!this.dragging) return;
+                e.preventDefault();
+                const currentX = e.type === 'mousemove' ? e.pageX : e.touches[0].pageX;
+                const diff = currentX - this.startX;
+
+                if (Math.abs(diff) > 50) {
+                    if (diff > 0) {
+                        this.prev();
+                    } else {
+                        this.next();
+                    }
+                    this.dragging = false;
+                }
+            },
+
+            endDrag() {
+                this.dragging = false;
+            },
+
+            // Add this method to generate dots array
+            get dots() {
+                return Array.from({ length: this.totalSlides }, (_, i) => ({
+                    index: i,
+                    active: i === this.currentSlide
+                }));
+            }
+        };
+
+        Alpine.bind(el, {
+            'x-data'() {
+                return state;
+            },
+
+            'x-init'() {
+                setTimeout(() => {
+                    const track = el.querySelector('.carousel-slides');
+                    if (!track) {
+                        console.warn('[Manifest] Carousel track element not found. Expected element with class "carousel-slides"');
+                        return;
+                    }
+
+                    // Setup autoplay if enabled
+                    if (this.carousel.autoplay) {
+                        let interval;
+
+                        const startAutoplay = () => {
+                            interval = setInterval(() => this.next(), this.carousel.interval);
+                        };
+
+                        const stopAutoplay = () => {
+                            clearInterval(interval);
+                        };
+
+                        // Start autoplay
+                        startAutoplay();
+
+                        // Pause on hover if autoplay is enabled
+                        el.addEventListener('mouseenter', stopAutoplay);
+                        el.addEventListener('mouseleave', startAutoplay);
+
+                        // Clean up on element removal
+                        el._x_cleanups = el._x_cleanups || [];
+                        el._x_cleanups.push(() => {
+                            stopAutoplay();
+                            el.removeEventListener('mouseenter', stopAutoplay);
+                            el.removeEventListener('mouseleave', startAutoplay);
+                        });
+                    }
+                }, 0);
+            }
+        });
+    });
+}
+
+// Track initialization to prevent duplicates
+let slidesPluginInitialized = false;
+
+function ensureSlidesPluginInitialized() {
+    if (slidesPluginInitialized) return;
+    if (!window.Alpine || typeof window.Alpine.directive !== 'function') return;
+
+    slidesPluginInitialized = true;
+    initializeCarouselPlugin();
+}
+
+// Expose on window for loader to call if needed
+window.ensureSlidesPluginInitialized = ensureSlidesPluginInitialized;
+
+// Handle both DOMContentLoaded and alpine:init
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureSlidesPluginInitialized);
+}
+
+document.addEventListener('alpine:init', ensureSlidesPluginInitialized);
+
+// If Alpine is already initialized when this script loads, initialize immediately
+if (window.Alpine && typeof window.Alpine.directive === 'function') {
+    setTimeout(ensureSlidesPluginInitialized, 0);
+} else if (document.readyState === 'complete') {
+    const checkAlpine = setInterval(() => {
+        if (window.Alpine && typeof window.Alpine.directive === 'function') {
+            clearInterval(checkAlpine);
+            ensureSlidesPluginInitialized();
+        }
+    }, 10);
+    setTimeout(() => clearInterval(checkAlpine), 5000);
+} 

package/dist/manifest.switch.css

@@ -0,0 +1,44 @@
+/* Manifest Switches */
+
+@layer components {
+
+    :where(input[role=switch]):not(.unstyle) {
+        position: relative;
+        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.65 * 2);
+        width: calc(var(--spacing-field-height, 2.25rem) * 0.65 * 2);
+        height: calc(var(--spacing-field-height, 2.25rem) * 0.65);
+        padding: 0;
+        box-sizing: content-box;
+        border-radius: calc(var(--spacing-field-height, 2.25rem) * 0.65);
+        cursor: pointer;
+
+        /* Marker */
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0.125rem;
+            left: 0.125rem;
+            width: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
+            height: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
+            border-radius: 50%;
+            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 60%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
+            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+            transition: var(--transition, all .05s ease-in-out)
+        }
+
+        /* Checked */
+        &:checked {
+            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
+
+            /* Marker */
+            &::before {
+                left: calc(100% - (var(--spacing-field-height, 2.25rem) * 0.65) + 0.125rem);
+                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267))
+            }
+
+            &:hover {
+                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
+            }
+        }
+    }
+}

package/dist/manifest.table.css

@@ -0,0 +1,74 @@
+/* Manifest Tables */
+
+@layer components {
+
+    :where(table, .grid-table):not(.unstyle) {
+        table-layout: auto;
+        width: 100%;
+        max-width: 100%;
+        overflow: hidden;
+        border-spacing: 0;
+        border-radius: var(--radius, 0.5rem);
+
+        /* Grid utility classes */
+        :where(.grid-header, .grid-row, .grid-footer) {
+            display: contents
+        }
+
+        /* Header row */
+        :where(thead, .grid-header > *) {
+            background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87));
+            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
+        }
+
+        /* Header cell */
+        :where(th, .grid-header > *) {
+            font-weight: bold
+        }
+
+        /* Row */
+        :where(tr, .grid-row > *) {
+            border-bottom: 1px solid var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15))
+        }
+
+        /* Cell */
+        :where(td, th, .grid-header > *, .grid-row > *, .grid-footer > *) {
+            padding: calc(var(--spacing, 0.25rem) * 2.5) calc(var(--spacing, 0.25rem) * 4);
+            font-size: 0.875rem;
+            text-align: left;
+            text-align: start;
+            overflow: hidden;
+
+            /* Make elements within cell inline */
+            &>*:not(template) {
+                display: inline-flex;
+                vertical-align: middle;
+
+                /* Add space between them */
+                &:not(:last-child) {
+                    margin-right: 4px
+                }
+            }
+        }
+
+        /* Footer row */
+        :where(:not(:has(tfoot)) tbody tr:last-child, tfoot tr:last-child, .grid-footer > *) {
+            border-bottom: 0
+        }
+
+        /* Striped utility class */
+        &.striped {
+            :where(tr:nth-child(even), .grid-row:nth-child(even)) {
+                background-color: var(--color-surface-1, oklch(98.17% 0.0005 95.87))
+            }
+
+            :where(tr:nth-child(odd), .grid-row:nth-child(odd)) {
+                background-color: transparent
+            }
+
+            :where(tr, .grid-row) {
+                border-bottom: 0 none
+            }
+        }
+    }
+}