npm - snice - Versions diffs - 1.14.3 → 2.1.0 - Mend

snice 1.14.3 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

package/bin/templates/base/tsconfig.json +5 -4
package/components/accordion/demo.html +403 -0
package/components/accordion/snice-accordion-item.css +85 -0
package/components/accordion/snice-accordion-item.ts +226 -0
package/components/accordion/snice-accordion.css +31 -0
package/components/accordion/snice-accordion.ts +182 -0
package/components/accordion/snice-accordion.types.ts +32 -0
package/components/alert/demo.html +445 -0
package/components/alert/snice-alert.css +195 -0
package/components/alert/snice-alert.ts +141 -0
package/components/alert/snice-alert.types.ts +12 -0
package/components/avatar/demo.html +598 -0
package/components/avatar/snice-avatar.css +131 -0
package/components/avatar/snice-avatar.ts +136 -0
package/components/avatar/snice-avatar.types.ts +13 -0
package/components/badge/demo.html +523 -0
package/components/badge/snice-badge.css +161 -0
package/components/badge/snice-badge.ts +117 -0
package/components/badge/snice-badge.types.ts +16 -0
package/components/breadcrumbs/demo.html +404 -0
package/components/breadcrumbs/snice-breadcrumbs.css +133 -0
package/components/breadcrumbs/snice-breadcrumbs.ts +191 -0
package/components/breadcrumbs/snice-breadcrumbs.types.ts +26 -0
package/components/breadcrumbs/snice-crumb.ts +26 -0
package/components/button/demo.html +42 -0
package/components/button/snice-button.css +230 -0
package/components/button/snice-button.ts +169 -0
package/components/button/snice-button.types.ts +25 -0
package/components/card/demo.html +525 -0
package/components/card/snice-card.css +140 -0
package/components/card/snice-card.ts +102 -0
package/components/card/snice-card.types.ts +10 -0
package/components/checkbox/demo.html +253 -0
package/components/checkbox/snice-checkbox.css +164 -0
package/components/checkbox/snice-checkbox.ts +223 -0
package/components/checkbox/snice-checkbox.types.ts +22 -0
package/components/chip/demo.html +383 -0
package/components/chip/snice-chip.css +195 -0
package/components/chip/snice-chip.ts +139 -0
package/components/chip/snice-chip.types.ts +15 -0
package/components/date-picker/README.md +233 -0
package/components/date-picker/demo.html +191 -0
package/components/date-picker/snice-date-picker.css +330 -0
package/components/date-picker/snice-date-picker.ts +777 -0
package/components/date-picker/snice-date-picker.types.ts +83 -0
package/components/divider/demo.html +233 -0
package/components/divider/snice-divider.css +155 -0
package/components/divider/snice-divider.ts +69 -0
package/components/divider/snice-divider.types.ts +15 -0
package/components/drawer/demo.html +328 -0
package/components/drawer/snice-drawer.css +476 -0
package/components/drawer/snice-drawer.ts +287 -0
package/components/drawer/snice-drawer.types.ts +17 -0
package/components/global.d.ts +14 -0
package/components/input/demo.html +303 -0
package/components/input/snice-input.css +257 -0
package/components/input/snice-input.ts +442 -0
package/components/input/snice-input.types.ts +59 -0
package/components/input/test.html +77 -0
package/components/layout/README.md +260 -0
package/components/layout/demo.html +538 -0
package/components/layout/snice-layout-blog.css +129 -0
package/components/layout/snice-layout-blog.ts +48 -0
package/components/layout/snice-layout-card.css +104 -0
package/components/layout/snice-layout-card.ts +35 -0
package/components/layout/snice-layout-centered.css +51 -0
package/components/layout/snice-layout-centered.ts +22 -0
package/components/layout/snice-layout-dashboard.css +98 -0
package/components/layout/snice-layout-dashboard.ts +45 -0
package/components/layout/snice-layout-fullscreen.css +72 -0
package/components/layout/snice-layout-fullscreen.ts +34 -0
package/components/layout/snice-layout-landing.css +92 -0
package/components/layout/snice-layout-landing.ts +47 -0
package/components/layout/snice-layout-minimal.css +16 -0
package/components/layout/snice-layout-minimal.ts +19 -0
package/components/layout/snice-layout-sidebar.css +117 -0
package/components/layout/snice-layout-sidebar.ts +48 -0
package/components/layout/snice-layout-split.css +103 -0
package/components/layout/snice-layout-split.ts +29 -0
package/components/layout/snice-layout.css +72 -0
package/components/layout/snice-layout.ts +35 -0
package/components/layout/snice-layout.types.ts +5 -0
package/components/login/demo-auth-controller.ts +185 -0
package/components/login/demo.html +470 -0
package/components/login/snice-login.css +204 -0
package/components/login/snice-login.ts +337 -0
package/components/login/snice-login.types.ts +34 -0
package/components/modal/demo.html +291 -0
package/components/modal/snice-modal.css +203 -0
package/components/modal/snice-modal.ts +233 -0
package/components/modal/snice-modal.types.ts +21 -0
package/components/pagination/demo.html +395 -0
package/components/pagination/snice-pagination.ts +333 -0
package/components/pagination/snice-pagination.types.ts +21 -0
package/components/progress/demo.html +510 -0
package/components/progress/snice-progress.css +267 -0
package/components/progress/snice-progress.ts +247 -0
package/components/progress/snice-progress.types.ts +19 -0
package/components/radio/demo.html +287 -0
package/components/radio/snice-radio.css +171 -0
package/components/radio/snice-radio.ts +218 -0
package/components/radio/snice-radio.types.ts +21 -0
package/components/select/demo.html +511 -0
package/components/select/snice-option.ts +52 -0
package/components/select/snice-option.types.ts +14 -0
package/components/select/snice-select.css +392 -0
package/components/select/snice-select.ts +796 -0
package/components/select/snice-select.types.ts +55 -0
package/components/skeleton/demo.html +514 -0
package/components/skeleton/snice-skeleton.css +109 -0
package/components/skeleton/snice-skeleton.ts +126 -0
package/components/skeleton/snice-skeleton.types.ts +11 -0
package/components/switch/demo.html +284 -0
package/components/switch/snice-switch.css +221 -0
package/components/switch/snice-switch.ts +229 -0
package/components/switch/snice-switch.types.ts +23 -0
package/components/symbols.ts +23 -0
package/components/table/demo-table-controller.ts +100 -0
package/components/table/demo.html +480 -0
package/components/table/snice-cell-boolean.ts +112 -0
package/components/table/snice-cell-date.ts +210 -0
package/components/table/snice-cell-duration.ts +91 -0
package/components/table/snice-cell-filesize.ts +90 -0
package/components/table/snice-cell-number.ts +165 -0
package/components/table/snice-cell-progress.ts +83 -0
package/components/table/snice-cell-rating.ts +82 -0
package/components/table/snice-cell-sparkline.ts +253 -0
package/components/table/snice-cell-text.ts +125 -0
package/components/table/snice-cell.css +296 -0
package/components/table/snice-cell.ts +473 -0
package/components/table/snice-column.ts +353 -0
package/components/table/snice-header.css +243 -0
package/components/table/snice-header.ts +261 -0
package/components/table/snice-progress.ts +66 -0
package/components/table/snice-rating.ts +45 -0
package/components/table/snice-row.css +255 -0
package/components/table/snice-row.ts +331 -0
package/components/table/snice-table.css +241 -0
package/components/table/snice-table.ts +737 -0
package/components/table/snice-table.types.ts +158 -0
package/components/tabs/demo.html +487 -0
package/components/tabs/snice-tab-panel.css +264 -0
package/components/tabs/snice-tab-panel.ts +47 -0
package/components/tabs/snice-tab.css +96 -0
package/components/tabs/snice-tab.ts +65 -0
package/components/tabs/snice-tabs.css +189 -0
package/components/tabs/snice-tabs.ts +332 -0
package/components/tabs/snice-tabs.types.ts +28 -0
package/components/theme/theme.css +234 -0
package/components/toast/demo.html +329 -0
package/components/toast/snice-toast-container.ts +256 -0
package/components/toast/snice-toast.css +213 -0
package/components/toast/snice-toast.ts +276 -0
package/components/toast/snice-toast.types.ts +35 -0
package/components/tooltip/demo.html +350 -0
package/components/tooltip/snice-tooltip-portal.css +79 -0
package/components/tooltip/snice-tooltip.css +117 -0
package/components/tooltip/snice-tooltip.ts +612 -0
package/components/tooltip/snice-tooltip.types.ts +32 -0
package/components/transitions.ts +94 -0
package/components/tsconfig.json +18 -0
package/dist/index.cjs +441 -329
package/dist/index.cjs.map +1 -1
package/dist/index.cjs.min.map +1 -1
package/dist/index.esm.js +441 -329
package/dist/index.esm.js.map +1 -1
package/dist/index.esm.min.js +3 -3
package/dist/index.esm.min.js.map +1 -1
package/dist/index.iife.js +441 -329
package/dist/index.iife.js.map +1 -1
package/dist/index.iife.min.js +3 -3
package/dist/index.iife.min.js.map +1 -1
package/dist/symbols.esm.js +1 -1
package/dist/transitions.esm.js +1 -1
package/dist/types/controller.d.ts +1 -1
package/dist/types/element.d.ts +10 -10
package/dist/types/events.d.ts +2 -2
package/dist/types/index.d.ts +1 -1
package/dist/types/observe.d.ts +1 -1
package/dist/types/request-response.d.ts +2 -3
package/dist/types/router.d.ts +1 -1
package/package.json +9 -3
package/dist/index.cjs.min +0 -15
package/dist/symbols.cjs +0 -103
package/dist/transitions.cjs +0 -219

package/components/layout/demo.html ADDED Viewed

@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Layout Components Test</title>
+    <link rel="stylesheet" href="../theme/theme.css">
+    <style>
+        body {
+            font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+            margin: 0;
+            padding: var(--snice-spacing-lg, 2rem);
+            background: var(--snice-color-background, #f9fafb);
+            color: var(--snice-color-text, #374151);
+        }
+        .demo-nav {
+            max-width: 1200px;
+            margin: 0 auto var(--snice-spacing-xl, 2rem);
+            background: var(--snice-color-background-element, white);
+            padding: var(--snice-spacing-lg, 1.5rem);
+            border-radius: var(--snice-border-radius-lg, 8px);
+            box-shadow: var(--snice-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
+        }
+        .demo-nav h1 {
+            margin: 0 0 var(--snice-spacing-md, 1rem) 0;
+            color: var(--snice-color-text, #374151);
+            font-weight: var(--snice-font-weight-bold, 700);
+        }
+        .demo-nav nav {
+            display: flex;
+            gap: var(--snice-spacing-md, 1rem);
+            flex-wrap: wrap;
+        }
+        .demo-nav button {
+            padding: var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-md, 1rem);
+            border: 1px solid var(--snice-color-border, #e5e7eb);
+            border-radius: var(--snice-border-radius-md, 4px);
+            background: var(--snice-color-background, white);
+            color: var(--snice-color-text, #374151);
+            cursor: pointer;
+            transition: all var(--snice-transition-fast, 0.15s) ease;
+        }
+        .demo-nav button:hover {
+            background: var(--snice-color-background-secondary, #f9fafb);
+            border-color: var(--snice-color-primary, #3b82f6);
+        }
+        .demo-nav button.active {
+            background: var(--snice-color-primary, #3b82f6);
+            color: white;
+            border-color: var(--snice-color-primary, #3b82f6);
+        }
+        .demo-section {
+            display: none;
+            min-height: 70vh;
+            border: 2px dashed var(--snice-color-border, #e5e7eb);
+            border-radius: var(--snice-border-radius-lg, 8px);
+            overflow: hidden;
+        }
+        .demo-section.active {
+            display: block;
+        }
+        /* Sample content styles */
+        .sample-nav {
+            display: flex;
+            gap: var(--snice-spacing-lg, 2rem);
+        }
+        .sample-nav a {
+            color: var(--snice-color-text-secondary, #6b7280);
+            text-decoration: none;
+            padding: var(--snice-spacing-xs, 0.5rem) var(--snice-spacing-md, 1rem);
+            border-radius: var(--snice-border-radius-md, 4px);
+            transition: all var(--snice-transition-fast, 0.15s) ease;
+        }
+        .sample-nav a:hover,
+        .sample-nav a.active {
+            background: var(--snice-color-primary-light, #dbeafe);
+            color: var(--snice-color-primary, #3b82f6);
+        }
+        .sample-card {
+            background: var(--snice-color-background, white);
+            padding: var(--snice-spacing-lg, 2rem);
+            border-radius: var(--snice-border-radius-lg, 8px);
+            box-shadow: var(--snice-shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
+        }
+        .sample-card h3 {
+            margin: 0 0 var(--snice-spacing-md, 1rem) 0;
+            color: var(--snice-color-text, #374151);
+        }
+        .sample-grid {
+            display: grid;
+            gap: var(--snice-spacing-lg, 2rem);
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        }
+        .sidebar-nav {
+            display: flex;
+            flex-direction: column;
+            gap: var(--snice-spacing-sm, 0.75rem);
+        }
+        .sidebar-nav a {
+            color: var(--snice-color-text-secondary, #6b7280);
+            text-decoration: none;
+            padding: var(--snice-spacing-sm, 0.75rem) var(--snice-spacing-md, 1rem);
+            border-radius: var(--snice-border-radius-md, 4px);
+            transition: all var(--snice-transition-fast, 0.15s) ease;
+        }
+        .sidebar-nav a:hover,
+        .sidebar-nav a.active {
+            background: var(--snice-color-primary-light, #dbeafe);
+            color: var(--snice-color-primary, #3b82f6);
+        }
+        .hero-section {
+            text-align: center;
+            padding: var(--snice-spacing-2xl, 4rem) var(--snice-spacing-lg, 2rem);
+        }
+        .hero-section h1 {
+            font-size: var(--snice-font-size-3xl, 2.25rem);
+            margin: 0 0 var(--snice-spacing-md, 1rem) 0;
+        }
+        .cta-button {
+            background: var(--snice-color-primary, #3b82f6);
+            color: white;
+            padding: var(--snice-spacing-md, 1rem) var(--snice-spacing-lg, 2rem);
+            border: none;
+            border-radius: var(--snice-border-radius-md, 4px);
+            font-weight: var(--snice-font-weight-semibold, 600);
+            cursor: pointer;
+            transition: all var(--snice-transition-fast, 0.15s) ease;
+        }
+        .cta-button:hover {
+            background: var(--snice-color-primary-dark, #2563eb);
+        }
+    </style>
+</head>
+<body>
+    <div class="demo-nav">
+        <h1>Snice Layout Components Demo</h1>
+        <nav>
+            <button onclick="showDemo('basic')" class="active">Basic Layout</button>
+            <button onclick="showDemo('sidebar')">Sidebar Layout</button>
+            <button onclick="showDemo('minimal')">Minimal Layout</button>
+            <button onclick="showDemo('centered')">Centered Layout</button>
+            <button onclick="showDemo('landing')">Landing Layout</button>
+            <button onclick="showDemo('split')">Split Layout</button>
+            <button onclick="showDemo('card')">Card Layout</button>
+            <button onclick="showDemo('blog')">Blog Layout</button>
+            <button onclick="showDemo('dashboard')">Dashboard Layout</button>
+            <button onclick="showDemo('fullscreen')">Fullscreen Layout</button>
+        </nav>
+    </div>
+    <!-- Basic Layout Demo -->
+    <div id="basic" class="demo-section active">
+        <snice-layout>
+            <div slot="brand"><h2>My App</h2></div>
+            <nav slot="nav" class="sample-nav">
+                <a href="#" class="active">Home</a>
+                <a href="#">About</a>
+                <a href="#">Services</a>
+                <a href="#">Contact</a>
+            </nav>
+            <div style="padding: 2rem;">
+                <h1>Welcome to Our App</h1>
+                <p>This is the basic layout with header, navigation, main content, and footer areas.</p>
+                <p>The layout provides slots for brand, navigation, main content, and footer sections.</p>
+            </div>
+            <div slot="footer" style="text-align: center;">
+                <p>&copy; 2024 My Company. All rights reserved.</p>
+            </div>
+        </snice-layout>
+    </div>
+    <!-- Sidebar Layout Demo -->
+    <div id="sidebar" class="demo-section">
+        <snice-layout-sidebar>
+            <div slot="brand"><h3>Dashboard</h3></div>
+            <nav slot="nav" class="sidebar-nav">
+                <a href="#" class="active">Overview</a>
+                <a href="#">Analytics</a>
+                <a href="#">Users</a>
+                <a href="#">Settings</a>
+                <a href="#">Reports</a>
+            </nav>
+            <div slot="header">
+                <h1>Dashboard Overview</h1>
+                <p>Welcome back! Here's what's happening today.</p>
+            </div>
+            <div style="padding: 1rem;">
+                <div class="sample-grid">
+                    <div class="sample-card">
+                        <h3>Total Users</h3>
+                        <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-primary);">12,345</p>
+                    </div>
+                    <div class="sample-card">
+                        <h3>Revenue</h3>
+                        <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-success, #10b981);">$54,321</p>
+                    </div>
+                    <div class="sample-card">
+                        <h3>Orders</h3>
+                        <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-warning, #f59e0b);">987</p>
+                    </div>
+                </div>
+            </div>
+        </snice-layout-sidebar>
+    </div>
+    <!-- Minimal Layout Demo -->
+    <div id="minimal" class="demo-section">
+        <snice-layout-minimal>
+            <div style="padding: 4rem; text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; min-height: 60vh; display: flex; align-items: center; justify-content: center; flex-direction: column;">
+                <h1 style="font-size: 3rem; margin-bottom: 1rem;">Clean & Minimal</h1>
+                <p style="font-size: 1.25rem; opacity: 0.9;">Perfect for focused content without distractions</p>
+                <button class="cta-button" style="margin-top: 2rem;">Get Started</button>
+            </div>
+        </snice-layout-minimal>
+    </div>
+    <!-- Centered Layout Demo -->
+    <div id="centered" class="demo-section">
+        <snice-layout-centered width="md">
+            <div style="text-align: center;">
+                <h2 style="margin-bottom: 2rem;">Sign In</h2>
+                <form style="display: flex; flex-direction: column; gap: 1rem;">
+                    <input type="email" placeholder="Email address" style="padding: 0.75rem; border: 1px solid var(--snice-color-border); border-radius: 4px;">
+                    <input type="password" placeholder="Password" style="padding: 0.75rem; border: 1px solid var(--snice-color-border); border-radius: 4px;">
+                    <button type="submit" class="cta-button">Sign In</button>
+                    <p style="margin-top: 1rem; color: var(--snice-color-text-secondary);">
+                        Don't have an account? <a href="#" style="color: var(--snice-color-primary);">Sign up</a>
+                    </p>
+                </form>
+            </div>
+        </snice-layout-centered>
+    </div>
+    <!-- Landing Layout Demo -->
+    <div id="landing" class="demo-section">
+        <snice-layout-landing>
+            <div slot="brand"><h2>StartupCo</h2></div>
+            <nav slot="nav" class="sample-nav">
+                <a href="#">Features</a>
+                <a href="#">Pricing</a>
+                <a href="#">About</a>
+            </nav>
+            <button slot="cta" class="cta-button">Get Started</button>
+            <div slot="hero" class="hero-section">
+                <h1>Build Amazing Things</h1>
+                <p style="font-size: 1.25rem; color: var(--snice-color-text-secondary); margin-bottom: 2rem;">
+                    Transform your ideas into reality with our powerful platform
+                </p>
+                <button class="cta-button" style="font-size: 1.125rem; padding: 1rem 2rem;">Start Free Trial</button>
+            </div>
+            <section style="padding: 4rem 2rem; max-width: 1200px; margin: 0 auto;">
+                <h2 style="text-align: center; margin-bottom: 3rem;">Why Choose Us?</h2>
+                <div class="sample-grid">
+                    <div class="sample-card">
+                        <h3>🚀 Fast Performance</h3>
+                        <p>Lightning-fast loading times and optimized performance.</p>
+                    </div>
+                    <div class="sample-card">
+                        <h3>🔒 Secure</h3>
+                        <p>Enterprise-grade security with end-to-end encryption.</p>
+                    </div>
+                    <div class="sample-card">
+                        <h3>📱 Mobile First</h3>
+                        <p>Responsive design that works perfectly on all devices.</p>
+                    </div>
+                </div>
+            </section>
+        </snice-layout-landing>
+    </div>
+    <!-- Split Layout Demo -->
+    <div id="split" class="demo-section">
+        <snice-layout-split direction="horizontal" ratio="60-40">
+            <div slot="left" style="padding: 2rem;">
+                <h2>Left Panel (60%)</h2>
+                <p>This is the larger left panel taking up 60% of the space.</p>
+                <div class="sample-card">
+                    <h3>Main Content</h3>
+                    <p>Perfect for displaying primary content, forms, or detailed information.</p>
+                </div>
+            </div>
+            <div slot="right" style="padding: 2rem; background: var(--snice-color-background-secondary);">
+                <h3>Right Panel (40%)</h3>
+                <p>Sidebar content goes here.</p>
+                <div style="margin-top: 1rem;">
+                    <h4>Quick Actions</h4>
+                    <button style="display: block; width: 100%; margin-bottom: 0.5rem; padding: 0.5rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer;">Action 1</button>
+                    <button style="display: block; width: 100%; margin-bottom: 0.5rem; padding: 0.5rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer;">Action 2</button>
+                </div>
+            </div>
+        </snice-layout-split>
+    </div>
+    <!-- Card Layout Demo -->
+    <div id="card" class="demo-section">
+        <snice-layout-card columns="3" gap="lg">
+            <div slot="header" style="text-align: center; padding: 2rem;">
+                <h1>Product Gallery</h1>
+                <p>Browse our collection of amazing products</p>
+            </div>
+            <div class="sample-card">
+                <h3>Product 1</h3>
+                <p>Description of the first product with its key features.</p>
+                <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
+            </div>
+            <div class="sample-card">
+                <h3>Product 2</h3>
+                <p>Description of the second product with its unique selling points.</p>
+                <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
+            </div>
+            <div class="sample-card">
+                <h3>Product 3</h3>
+                <p>Description of the third product and why customers love it.</p>
+                <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
+            </div>
+            <div class="sample-card">
+                <h3>Product 4</h3>
+                <p>Another great product with excellent reviews and ratings.</p>
+                <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
+            </div>
+            <div class="sample-card">
+                <h3>Product 5</h3>
+                <p>Premium product with advanced features and capabilities.</p>
+                <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
+            </div>
+            <div class="sample-card">
+                <h3>Product 6</h3>
+                <p>Latest addition to our catalog with innovative design.</p>
+                <button style="margin-top: 1rem; padding: 0.5rem 1rem; background: var(--snice-color-primary); color: white; border: none; border-radius: 4px; cursor: pointer;">View Details</button>
+            </div>
+        </snice-layout-card>
+    </div>
+    <!-- Blog Layout Demo -->
+    <div id="blog" class="demo-section">
+        <snice-layout-blog>
+            <div slot="brand"><h2>Tech Blog</h2></div>
+            <nav slot="nav" class="sample-nav">
+                <a href="#" class="active">Latest</a>
+                <a href="#">Categories</a>
+                <a href="#">Archive</a>
+                <a href="#">About</a>
+            </nav>
+            <article style="line-height: 1.6;">
+                <h1>The Future of Web Development</h1>
+                <p style="color: var(--snice-color-text-secondary); margin-bottom: 2rem;">Published on December 9, 2024 by John Doe</p>
+                <p>Web development continues to evolve at a rapid pace. From the early days of static HTML pages to today's dynamic, interactive web applications, the landscape has transformed dramatically.</p>
+                <h2>Current Trends</h2>
+                <p>Several trends are shaping the future of web development:</p>
+                <ul>
+                    <li>Web Components and Custom Elements</li>
+                    <li>Progressive Web Apps (PWAs)</li>
+                    <li>Serverless Architecture</li>
+                    <li>AI-Driven Development Tools</li>
+                </ul>
+                <h2>What's Next?</h2>
+                <p>As we look ahead, web development will continue to become more accessible, performant, and user-focused. The tools and frameworks we use today are just the beginning.</p>
+            </article>
+            <div slot="sidebar">
+                <h3>Recent Posts</h3>
+                <div style="display: flex; flex-direction: column; gap: 1rem;">
+                    <a href="#" style="color: var(--snice-color-text); text-decoration: none; padding: 1rem; background: white; border-radius: 4px; border: 1px solid var(--snice-color-border);">
+                        <h4 style="margin: 0 0 0.5rem 0;">CSS Grid vs Flexbox</h4>
+                        <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">When to use each layout method</p>
+                    </a>
+                    <a href="#" style="color: var(--snice-color-text); text-decoration: none; padding: 1rem; background: white; border-radius: 4px; border: 1px solid var(--snice-color-border);">
+                        <h4 style="margin: 0 0 0.5rem 0;">JavaScript Frameworks 2024</h4>
+                        <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">Comparing React, Vue, and Angular</p>
+                    </a>
+                </div>
+                <h3 style="margin-top: 2rem;">Categories</h3>
+                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+                    <a href="#" style="color: var(--snice-color-primary); text-decoration: none;">Frontend Development</a>
+                    <a href="#" style="color: var(--snice-color-primary); text-decoration: none;">Backend Development</a>
+                    <a href="#" style="color: var(--snice-color-primary); text-decoration: none;">Web Design</a>
+                    <a href="#" style="color: var(--snice-color-primary); text-decoration: none;">Performance</a>
+                </div>
+            </div>
+        </snice-layout-blog>
+    </div>
+    <!-- Dashboard Layout Demo -->
+    <div id="dashboard" class="demo-section">
+        <snice-layout-dashboard>
+            <div slot="brand"><h2>Analytics Dashboard</h2></div>
+            <input slot="search" type="search" placeholder="Search..." style="padding: 0.5rem; border: 1px solid var(--snice-color-border); border-radius: 4px; width: 100%;">
+            <div slot="user" style="display: flex; align-items: center; gap: 0.5rem;">
+                <span>Welcome, John!</span>
+                <div style="width: 32px; height: 32px; background: var(--snice-color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">J</div>
+            </div>
+            <nav slot="nav" class="sample-nav">
+                <a href="#" class="active">Overview</a>
+                <a href="#">Reports</a>
+                <a href="#">Users</a>
+                <a href="#">Settings</a>
+            </nav>
+            <div slot="sidebar">
+                <h3>Quick Actions</h3>
+                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+                    <button style="padding: 0.75rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer; text-align: left;">📊 New Report</button>
+                    <button style="padding: 0.75rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer; text-align: left;">👥 Add User</button>
+                    <button style="padding: 0.75rem; border: 1px solid var(--snice-color-border); background: white; border-radius: 4px; cursor: pointer; text-align: left;">📈 View Analytics</button>
+                </div>
+            </div>
+            <div>
+                <h1>Dashboard Overview</h1>
+                <div class="sample-grid" style="margin-top: 2rem;">
+                    <div class="sample-card">
+                        <h3>Total Revenue</h3>
+                        <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-success, #10b981);">$125,430</p>
+                        <p style="color: var(--snice-color-text-secondary); font-size: 0.875rem;">+12% from last month</p>
+                    </div>
+                    <div class="sample-card">
+                        <h3>Active Users</h3>
+                        <p style="font-size: 2rem; font-weight: bold; color: var(--snice-color-primary);">8,462</p>
+                        <p style="color: var(--snice-color-text-secondary); font-size: 0.875rem;">+5% from last month</p>
+                    </div>
+                </div>
+            </div>
+            <div slot="right-sidebar">
+                <h3>Recent Activity</h3>
+                <div style="display: flex; flex-direction: column; gap: 1rem;">
+                    <div style="padding: 1rem; background: white; border-radius: 4px; border-left: 4px solid var(--snice-color-primary);">
+                        <p style="margin: 0; font-weight: 500;">New user registered</p>
+                        <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">2 minutes ago</p>
+                    </div>
+                    <div style="padding: 1rem; background: white; border-radius: 4px; border-left: 4px solid var(--snice-color-success, #10b981);">
+                        <p style="margin: 0; font-weight: 500;">Payment received</p>
+                        <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">5 minutes ago</p>
+                    </div>
+                    <div style="padding: 1rem; background: white; border-radius: 4px; border-left: 4px solid var(--snice-color-warning, #f59e0b);">
+                        <p style="margin: 0; font-weight: 500;">Server maintenance</p>
+                        <p style="margin: 0; color: var(--snice-color-text-secondary); font-size: 0.875rem;">1 hour ago</p>
+                    </div>
+                </div>
+            </div>
+        </snice-layout-dashboard>
+    </div>
+    <!-- Fullscreen Layout Demo -->
+    <div id="fullscreen" class="demo-section">
+        <snice-layout-fullscreen>
+            <div slot="background" style="background: linear-gradient(45deg, #1e3a8a, #3b82f6); width: 100%; height: 100%;"></div>
+            <div style="text-align: center; color: white;">
+                <h1 style="font-size: 4rem; margin-bottom: 1rem;">Immersive Experience</h1>
+                <p style="font-size: 1.5rem; opacity: 0.9;">Fullscreen layout for presentations and media</p>
+                <button class="cta-button" style="margin-top: 2rem; font-size: 1.125rem; padding: 1rem 2rem;">Enter Fullscreen</button>
+            </div>
+            <div slot="controls" style="display: flex; justify-content: center; gap: 1rem;">
+                <button style="padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; cursor: pointer;">⏸️ Pause</button>
+                <button style="padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; cursor: pointer;">⏹️ Stop</button>
+                <button style="padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; cursor: pointer;">🔄 Restart</button>
+            </div>
+        </snice-layout-fullscreen>
+    </div>
+    <script type="module">
+        // Import all layout components
+        import './snice-layout.ts';
+        import './snice-layout-sidebar.ts';
+        import './snice-layout-minimal.ts';
+        import './snice-layout-centered.ts';
+        import './snice-layout-landing.ts';
+        import './snice-layout-split.ts';
+        import './snice-layout-card.ts';
+        import './snice-layout-blog.ts';
+        import './snice-layout-dashboard.ts';
+        import './snice-layout-fullscreen.ts';
+        // Demo navigation function
+        window.showDemo = function(layoutType) {
+            // Hide all demos
+            document.querySelectorAll('.demo-section').forEach(section => {
+                section.classList.remove('active');
+            });
+            // Show selected demo
+            document.getElementById(layoutType).classList.add('active');
+            // Update nav buttons
+            document.querySelectorAll('.demo-nav button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            event.target.classList.add('active');
+        };
+        // Add some interactivity
+        document.addEventListener('click', (e) => {
+            // Handle sidebar toggle
+            if (e.target.matches('.sidebar-toggle')) {
+                const sidebar = e.target.closest('snice-layout-sidebar');
+                if (sidebar) {
+                    sidebar.collapsed = !sidebar.collapsed;
+                }
+            }
+        });
+    </script>
+</body>
+</html>

package/components/layout/snice-layout-blog.css ADDED Viewed

@@ -0,0 +1,129 @@
+/* Blog Layout - Article with sidebar */
+:host {
+  display: block;
+  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+}
+.layout {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--snice-spacing-lg, 2rem);
+}
+.header {
+  background: var(--snice-color-background, white);
+  border-bottom: 1px solid var(--snice-color-border, #d1d5db);
+  padding: var(--snice-spacing-md, 1rem) 0;
+}
+.header .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.brand h1 {
+  margin: 0;
+  font-size: var(--snice-font-size-xl, 1.5rem);
+  font-weight: var(--snice-font-weight-bold, 700);
+  color: var(--snice-color-text, #374151);
+}
+.nav {
+  display: flex;
+  gap: var(--snice-spacing-lg, 2rem);
+}
+.nav ::slotted(a) {
+  text-decoration: none;
+  color: var(--snice-color-text-secondary, #6b7280);
+  font-weight: var(--snice-font-weight-medium, 500);
+  transition: color var(--snice-transition-fast, 0.15s) ease;
+}
+.nav ::slotted(a:hover) {
+  color: var(--snice-color-primary, #3b82f6);
+}
+.main {
+  background: var(--snice-color-background, white);
+  padding: var(--snice-spacing-xl, 3rem) 0;
+}
+.content-area {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: var(--snice-spacing-2xl, 4rem);
+  align-items: start;
+}
+.article {
+  max-width: none;
+}
+.sidebar {
+  background: var(--snice-color-background-secondary, #f8fafc);
+  border-radius: var(--snice-border-radius-lg, 8px);
+  padding: var(--snice-spacing-lg, 2rem);
+  position: sticky;
+  top: var(--snice-spacing-lg, 2rem);
+}
+.footer {
+  background: var(--snice-color-background-tertiary, #f1f5f9);
+  border-top: 1px solid var(--snice-color-border, #d1d5db);
+  padding: var(--snice-spacing-xl, 3rem) 0;
+}
+/* Typography for article content */
+.article ::slotted(h1) {
+  font-size: var(--snice-font-size-3xl, 2.25rem);
+  font-weight: var(--snice-font-weight-bold, 700);
+  color: var(--snice-color-text, #374151);
+  line-height: var(--snice-line-height-tight, 1.25);
+  margin-bottom: var(--snice-spacing-lg, 2rem);
+}
+.article ::slotted(h2) {
+  font-size: var(--snice-font-size-2xl, 1.875rem);
+  font-weight: var(--snice-font-weight-semibold, 600);
+  color: var(--snice-color-text, #374151);
+  margin-top: var(--snice-spacing-xl, 3rem);
+  margin-bottom: var(--snice-spacing-md, 1rem);
+}
+.article ::slotted(p) {
+  font-size: var(--snice-font-size-base, 1rem);
+  line-height: var(--snice-line-height-relaxed, 1.625);
+  color: var(--snice-color-text, #374151);
+  margin-bottom: var(--snice-spacing-md, 1rem);
+}
+/* Mobile responsive */
+@media (max-width: 968px) {
+  .content-area {
+    grid-template-columns: 1fr;
+    gap: var(--snice-spacing-xl, 3rem);
+  }
+  .sidebar {
+    position: static;
+  }
+}
+@media (max-width: 768px) {
+  .header .container {
+    flex-direction: column;
+    gap: var(--snice-spacing-md, 1rem);
+  }
+  .main {
+    padding: var(--snice-spacing-lg, 2rem) 0;
+  }
+}