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/table/demo.html ADDED Viewed

@@ -0,0 +1,480 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snice Table Demo</title>
+    <link rel="stylesheet" href="../theme/theme.css">
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            margin: 0;
+            padding: 2rem;
+            background: var(--snice-color-background-secondary);
+        }
+        .demo-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            border-radius: 0.5rem;
+            padding: 2rem;
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 2rem;
+        }
+        .demo-section {
+            margin-bottom: 3rem;
+        }
+        .demo-section h2 {
+            color: #555;
+            border-bottom: 2px solid #e9ecef;
+            padding-bottom: 0.5rem;
+            margin-bottom: 1.5rem;
+        }
+        .demo-controls {
+            margin-bottom: 1rem;
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+        .demo-controls button {
+            padding: 0.5rem 1rem;
+            border: 1px solid #007bff;
+            background: #007bff;
+            color: white;
+            border-radius: 0.25rem;
+            cursor: pointer;
+            font-size: 0.875rem;
+        }
+        .demo-controls button:hover {
+            background: #0056b3;
+        }
+        .demo-controls button.secondary {
+            background: white;
+            color: #007bff;
+        }
+        .demo-controls button.secondary:hover {
+            background: #f8f9fa;
+        }
+    </style>
+</head>
+<body>
+    <div class="demo-container">
+        <h1>🗂️ Snice Table Component Demo</h1>
+        <div class="demo-section">
+            <h2>Basic Table with Declarative Columns</h2>
+            <div class="demo-controls">
+                <button onclick="toggleSearch()">Toggle Search</button>
+                <button onclick="togglePagination()">Toggle Pagination</button>
+                <button onclick="toggleSorting()">Toggle Sorting</button>
+                <button onclick="toggleSelection()">Toggle Selection</button>
+                <button class="secondary" onclick="addRandomRow()">Add Random Row</button>
+                <button class="secondary" onclick="loadSampleData()">Load Sample Data</button>
+            </div>
+            <snice-table
+                id="demo-table"
+                searchable
+                sortable
+                selectable
+                controller="demo-table-controller">
+            </snice-table>
+        </div>
+        <div class="demo-section">
+            <h2>Advanced Table with Sparklines and Progress</h2>
+            <snice-table
+                id="analytics-table"
+                size="medium"
+                hoverable
+                sortable
+                striped>
+                <snice-column
+                    slot="columns"
+                    key="metric"
+                    label="Metric"
+                    type="text">
+                </snice-column>
+                <snice-column
+                    slot="columns"
+                    key="value"
+                    label="Current Value"
+                    type="number"
+                    decimals="1"
+                    thousands-separator="true">
+                </snice-column>
+                <snice-column
+                    slot="columns"
+                    key="progress"
+                    label="Progress"
+                    type="progress"
+                    progress-max="100"
+                    show-percentage="true">
+                </snice-column>
+                <snice-column
+                    slot="columns"
+                    key="trend"
+                    label="Trend (7 days)"
+                    type="sparkline"
+                    sparkline-type="line"
+                    sparkline-color="#007bff"
+                    sparkline-width="80"
+                    sparkline-height="30">
+                </snice-column>
+                <snice-row slot="rows"
+                    data-metric="Revenue"
+                    data-value="125340"
+                    data-progress="78"
+                    data-trend="[45000, 47000, 49000, 52000, 48000, 53000, 55000]">
+                </snice-row>
+                <snice-row slot="rows"
+                    data-metric="Users"
+                    data-value="8250"
+                    data-progress="92"
+                    data-trend="[7800, 7950, 8100, 8200, 8150, 8300, 8250]">
+                </snice-row>
+                <snice-row slot="rows"
+                    data-metric="Conversion"
+                    data-value="3.4"
+                    data-progress="68"
+                    data-trend="[3.1, 3.2, 3.3, 3.5, 3.3, 3.4, 3.4]">
+                </snice-row>
+                <snice-row slot="rows"
+                    data-metric="Retention"
+                    data-value="89.2"
+                    data-progress="89"
+                    data-trend="[87, 88, 89, 90, 89, 88, 89]">
+                </snice-row>
+            </snice-table>
+        </div>
+        <div class="demo-section">
+            <h2>Individual Cell Components</h2>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem;">
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Text Cell</h3>
+                    <snice-cell-text value="Hello World"></snice-cell-text>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Number Cell (Basic)</h3>
+                    <snice-cell-number value="1234.56" thousands-separator="true" decimals="2"></snice-cell-number>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Number Cell (Currency)</h3>
+                    <snice-cell-number value="1234.56" prefix="$" thousands-separator="true" decimals="2"></snice-cell-number>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Number Cell (Negative)</h3>
+                    <snice-cell-number value="-456.78" negative-style="parentheses" thousands-separator="true" decimals="2"></snice-cell-number>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Date Cell (Short)</h3>
+                    <snice-cell-date value="2023-12-25" date-format="short"></snice-cell-date>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Date Cell (Long)</h3>
+                    <snice-cell-date value="2023-12-25" date-format="long"></snice-cell-date>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Date Cell (Custom)</h3>
+                    <snice-cell-date value="2023-12-25" date-format="custom" custom-format="DD/MM/YYYY"></snice-cell-date>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Sparkline (Line)</h3>
+                    <snice-cell-sparkline data="10，20，15，25，30，18，22" chart-type="line" width="80" height="30" color="#3b82f6"></snice-cell-sparkline>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Sparkline (Bar)</h3>
+                    <snice-cell-sparkline data="10，20，15，25，30，18，22" chart-type="bar" width="80" height="30" color="#10b981"></snice-cell-sparkline>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Sparkline (Area)</h3>
+                    <snice-cell-sparkline data="10，20，15，25，30，18，22" chart-type="area" width="80" height="30" color="#f59e0b"></snice-cell-sparkline>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Boolean (Symbols)</h3>
+                    <snice-cell-boolean value="true" use-symbols="true" true-symbol="✅" false-symbol="❌"></snice-cell-boolean>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Boolean (Text)</h3>
+                    <snice-cell-boolean value="false" use-symbols="false" true-value="Yes" false-value="No"></snice-cell-boolean>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Rating (4/5 Stars)</h3>
+                    <snice-cell-rating value="4"></snice-cell-rating>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Rating (3/10 Custom)</h3>
+                    <snice-cell-rating value="3"></snice-cell-rating>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Progress (75%)</h3>
+                    <snice-cell-progress value="75"></snice-cell-progress>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Progress w/ %</h3>
+                    <snice-cell-progress id="progress-with-percent" value="45"></snice-cell-progress>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Duration (1h 1m 1s)</h3>
+                    <snice-cell-duration value="3661"></snice-cell-duration>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Duration (5m 30s)</h3>
+                    <snice-cell-duration value="330"></snice-cell-duration>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">FileSize (2.0 MB)</h3>
+                    <snice-cell-filesize value="2048576"></snice-cell-filesize>
+                </div>
+                <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
+                    <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">FileSize (1.5 GB)</h3>
+                    <snice-cell-filesize value="1610612736"></snice-cell-filesize>
+                </div>
+            </div>
+        </div>
+        <div class="demo-section">
+            <h2>Individual Row Components</h2>
+            <div style="margin-bottom: 1rem;">
+                <h3 style="font-size: 1rem; color: #666; margin-bottom: 0.5rem;">Employee Row (Text, Number, Date, Boolean)</h3>
+                <snice-row id="employee-row" style="display: block; padding: 0.5rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;"></snice-row>
+            </div>
+            <div style="margin-bottom: 1rem;">
+                <h3 style="font-size: 1rem; color: #666; margin-bottom: 0.5rem;">Analytics Row (Text, Numbers, Progress, Sparkline)</h3>
+                <snice-row id="analytics-row" style="display: block; padding: 0.5rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;"></snice-row>
+            </div>
+            <div style="margin-bottom: 1rem;">
+                <h3 style="font-size: 1rem; color: #666; margin-bottom: 0.5rem;">System Row (Text, FileSize, Duration, Rating)</h3>
+                <snice-row id="system-row" style="display: block; padding: 0.5rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;"></snice-row>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        // Import controller first to register it
+        import './demo-table-controller.ts';
+        // Then import the table component
+        import './snice-table.ts';
+        const table = document.getElementById('demo-table');
+        // Demo functions
+        window.toggleSearch = () => {
+            table.showSearch = !table.showSearch;
+        };
+        window.togglePagination = () => {
+            table.showPagination = !table.showPagination;
+        };
+        window.toggleSorting = () => {
+            table.sortable = !table.sortable;
+        };
+        window.toggleSelection = () => {
+            table.selectable = !table.selectable;
+        };
+        window.addRandomRow = () => {
+            const names = ['Mike Davis', 'Sarah Connor', 'Tom Brady', 'Lisa Simpson', 'Jack Ryan'];
+            const roles = ['Developer', 'Designer', 'Manager', 'QA Engineer', 'DevOps'];
+            const domains = ['tech.com', 'design.io', 'startup.co', 'corp.net'];
+            const randomName = names[Math.floor(Math.random() * names.length)];
+            const randomRole = roles[Math.floor(Math.random() * roles.length)];
+            const randomDomain = domains[Math.floor(Math.random() * domains.length)];
+            const randomEmail = `${randomName.toLowerCase().replace(' ', '.')}@${randomDomain}`;
+            const randomSalary = Math.floor(Math.random() * 50000) + 50000;
+            const randomRating = Math.floor(Math.random() * 5) + 1;
+            const newData = {
+                id: Date.now(),
+                name: randomName,
+                email: randomEmail,
+                role: randomRole,
+                salary: randomSalary,
+                joinDate: new Date().toISOString().split('T')[0],
+                active: Math.random() > 0.2,
+                rating: randomRating
+            };
+            // Add to table data
+            const currentData = table.data || [];
+            table.setData([...currentData, newData]);
+        };
+        window.loadSampleData = () => {
+            const sampleData = [
+                {"id": 1, "name": "John Doe", "email": "john.doe@example.com", "role": "Developer", "salary": 75000, "joinDate": "2023-01-15", "active": true, "rating": 4},
+                {"id": 2, "name": "Jane Smith", "email": "jane.smith@example.com", "role": "Designer", "salary": 68000, "joinDate": "2023-03-20", "active": true, "rating": 5},
+                {"id": 3, "name": "Bob Johnson", "email": "bob.johnson@example.com", "role": "Manager", "salary": 95000, "joinDate": "2022-11-10", "active": false, "rating": 3},
+                {"id": 4, "name": "Alice Brown", "email": "alice.brown@example.com", "role": "Developer", "salary": 72000, "joinDate": "2023-06-05", "active": true, "rating": 4},
+                {"id": 5, "name": "Charlie Wilson", "email": "charlie.wilson@example.com", "role": "QA Engineer", "salary": 65000, "joinDate": "2023-02-28", "active": true, "rating": 4},
+                {"id": 6, "name": "Diana Prince", "email": "diana.prince@example.com", "role": "Developer", "salary": 78000, "joinDate": "2023-04-12", "active": true, "rating": 5},
+                {"id": 7, "name": "Clark Kent", "email": "clark.kent@example.com", "role": "Manager", "salary": 92000, "joinDate": "2022-08-22", "active": true, "rating": 4},
+                {"id": 8, "name": "Bruce Wayne", "email": "bruce.wayne@example.com", "role": "CEO", "salary": 150000, "joinDate": "2020-01-01", "active": true, "rating": 5}
+            ];
+            table.setData(sampleData);
+            table.totalItems = sampleData.length;
+        };
+        // Event listeners
+        table.addEventListener('@snice/table-sort-change', (e) => {
+            console.log('Sort changed:', e.detail);
+        });
+        table.addEventListener('@snice/table-selection-change', (e) => {
+            console.log('Selection changed:', e.detail);
+        });
+        table.addEventListener('@snice/row-click', (e) => {
+            console.log('Row clicked:', e.detail);
+        });
+        // Configure individual row components
+        const configureIndividualRows = async () => {
+            // Wait for components to be defined
+            await Promise.all([
+                customElements.whenDefined('snice-row'),
+                customElements.whenDefined('snice-cell-text'),
+                customElements.whenDefined('snice-cell-number'),
+                customElements.whenDefined('snice-cell-date'),
+                customElements.whenDefined('snice-cell-sparkline')
+            ]);
+            // Configure employee row
+            const employeeRow = document.getElementById('employee-row');
+            if (employeeRow) {
+                employeeRow.columns = [
+                    { key: 'name', label: 'Name', type: 'text', align: 'left' },
+                    { key: 'salary', label: 'Salary', type: 'number', align: 'right', numberFormat: { prefix: '$', thousandsSeparator: true, decimals: 0 } },
+                    { key: 'joinDate', label: 'Join Date', type: 'date', align: 'center', dateFormat: { format: 'medium' } },
+                    { key: 'active', label: 'Active', type: 'boolean', align: 'center', booleanFormat: { useSymbols: true, trueSymbol: '✅', falseSymbol: '❌' } }
+                ];
+                employeeRow.data = {
+                    name: 'John Doe',
+                    salary: 75000,
+                    joinDate: '2022-03-15',
+                    active: true
+                };
+                // Trigger update manually
+                if (typeof employeeRow.updateCells === 'function') {
+                    employeeRow.updateCells();
+                }
+            }
+            // Configure analytics row
+            const analyticsRow = document.getElementById('analytics-row');
+            if (analyticsRow) {
+                analyticsRow.columns = [
+                    { key: 'metric', label: 'Metric', type: 'text', align: 'left' },
+                    { key: 'current', label: 'Current', type: 'number', align: 'right', numberFormat: { prefix: '$', thousandsSeparator: true, decimals: 0 } },
+                    { key: 'progress', label: 'Progress', type: 'progress', align: 'left', progressFormat: { showPercentage: true, color: '#10b981' } },
+                    { key: 'trend', label: 'Trend', type: 'sparkline', align: 'center', sparklineFormat: { type: 'line', color: '#3b82f6', width: 80, height: 30 } }
+                ];
+                analyticsRow.data = {
+                    metric: 'Revenue',
+                    current: 125340,
+                    progress: 78,
+                    trend: [45000, 47000, 49000, 52000, 48000, 53000, 55000]
+                };
+                // Trigger update manually
+                if (typeof analyticsRow.updateCells === 'function') {
+                    analyticsRow.updateCells();
+                }
+            }
+            // Configure system row
+            const systemRow = document.getElementById('system-row');
+            if (systemRow) {
+                systemRow.columns = [
+                    { key: 'process', label: 'Process', type: 'text', align: 'left' },
+                    { key: 'memory', label: 'Memory', type: 'filesize', align: 'right' },
+                    { key: 'uptime', label: 'Uptime', type: 'duration', align: 'right' },
+                    { key: 'rating', label: 'Health', type: 'rating', align: 'center', ratingFormat: { max: 5, symbol: '●', emptySymbol: '○', color: '#10b981' } }
+                ];
+                systemRow.data = {
+                    process: 'nginx',
+                    memory: 52428800,  // 50MB
+                    uptime: 86461,     // 1 day 1 minute 1 second
+                    rating: 4
+                };
+                // Trigger update manually
+                if (typeof systemRow.updateCells === 'function') {
+                    systemRow.updateCells();
+                }
+            }
+        };
+        // Initialize individual rows
+        configureIndividualRows();
+        // Configure individual progress cell with percentage
+        const configureProgressCells = async () => {
+            await customElements.whenDefined('snice-cell-progress');
+            const progressWithPercent = document.getElementById('progress-with-percent');
+            if (progressWithPercent) {
+                progressWithPercent.column = {
+                    key: 'progress',
+                    label: 'Progress',
+                    type: 'progress',
+                    align: 'left',
+                    progressFormat: {
+                        showPercentage: true,
+                        color: '#10b981'
+                    }
+                };
+            }
+        };
+        configureProgressCells();
+        // Uncomment to load sample data programmatically:
+        // setTimeout(() => {
+        //     window.loadSampleData();
+        // }, 100);
+    </script>
+</body>
+</html>

package/components/table/snice-cell-boolean.ts ADDED Viewed

@@ -0,0 +1,112 @@
+import { element, property, watch, ready, query } from 'snice';
+import css from './snice-cell.css?inline';
+import type { BooleanFormat, SniceCellElement, ColumnType, ColumnAlign, ColumnDefinition } from './snice-table.types';
+@element('snice-cell-boolean')
+export class SniceCellBoolean extends HTMLElement implements SniceCellElement {
+  @property({ reflect: true })
+  align: ColumnAlign = 'center';
+  @property({ reflect: true })
+  type: ColumnType = 'boolean';
+  @property({ reflect: true })
+  value: any = false;
+  @property({ type: Object })
+  column: ColumnDefinition = {
+    key: '',
+    label: '',
+    type: 'boolean',
+    align: 'center'
+  };
+  @property({ type: Object })
+  rowData: any = null;
+  @query('.cell-content')
+  contentElement?: HTMLElement;
+  @property({ reflect: true, attribute: 'true-value' })
+  trueValue: string = 'true';
+  @property({ reflect: true, attribute: 'false-value' })
+  falseValue: string = 'false';
+  @property({ type: Boolean, reflect: true, attribute: 'use-symbols' })
+  useSymbols: boolean = true;
+  @property({ reflect: true, attribute: 'true-symbol' })
+  trueSymbol: string = '✓';
+  @property({ reflect: true, attribute: 'false-symbol' })
+  falseSymbol: string = '✗';
+  html() {
+    const content = this.formatBooleanContent();
+    return `
+      <div class="cell-content cell-content--boolean" part="content">
+        ${content}
+      </div>
+    `;
+  }
+  css() {
+    return css;
+  }
+  @ready()
+  init() {
+    this.applyAlignment();
+  }
+  private applyAlignment() {
+    this.style.textAlign = this.align;
+  }
+  @watch('align')
+  updateAlignment() {
+    this.applyAlignment();
+  }
+  @watch('value', 'column')
+  updateContent() {
+    if (this.contentElement) {
+      const content = this.formatBooleanContent();
+      this.contentElement.innerHTML = content;
+    }
+  }
+  private formatBooleanContent(): string {
+    if (this.value === null || this.value === undefined) {
+      return '';
+    }
+    // Use custom formatter if provided
+    if (this.column.formatter) {
+      return this.column.formatter(this.value, this.rowData);
+    }
+    // Use column boolean format or component properties
+    const format: BooleanFormat = this.column.booleanFormat || {
+      trueValue: this.trueValue,
+      falseValue: this.falseValue,
+      useSymbols: this.useSymbols,
+      trueSymbol: this.trueSymbol,
+      falseSymbol: this.falseSymbol
+    };
+    const isTrue = Boolean(this.value);
+    if (format.useSymbols ?? this.useSymbols) {
+      const symbol = isTrue ? (format.trueSymbol ?? this.trueSymbol) : (format.falseSymbol ?? this.falseSymbol);
+      const colorClass = isTrue ? 'boolean--true' : 'boolean--false';
+      return `<span class="${colorClass}">${symbol}</span>`;
+    } else {
+      const text = isTrue ? (format.trueValue ?? this.trueValue) : (format.falseValue ?? this.falseValue);
+      const colorClass = isTrue ? 'boolean--true' : 'boolean--false';
+      return `<span class="${colorClass}">${text}</span>`;
+    }
+  }
+}