npm - snice - Versions diffs - 2.1.5 → 2.2.1 - Mend

snice 2.1.5 → 2.2.1

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 (367) hide show

package/dist/components/accordion/snice-accordion-item.d.ts +25 -0
package/dist/components/accordion/snice-accordion-item.js +255 -0
package/dist/components/accordion/snice-accordion-item.js.map +1 -0
package/dist/components/accordion/snice-accordion.d.ts +28 -0
package/dist/components/accordion/snice-accordion.js +206 -0
package/dist/components/accordion/snice-accordion.js.map +1 -0
package/dist/components/accordion/snice-accordion.types.d.ts +29 -0
package/dist/components/alert/snice-alert.d.ts +26 -0
package/dist/components/alert/snice-alert.js +180 -0
package/dist/components/alert/snice-alert.js.map +1 -0
package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts} +8 -9
package/dist/components/avatar/snice-avatar.d.ts +24 -0
package/dist/components/avatar/snice-avatar.js +180 -0
package/dist/components/avatar/snice-avatar.js.map +1 -0
package/dist/components/avatar/snice-avatar.types.d.ts +12 -0
package/dist/components/badge/snice-badge.d.ts +25 -0
package/dist/components/badge/snice-badge.js +169 -0
package/dist/components/badge/snice-badge.js.map +1 -0
package/{components/badge/snice-badge.types.ts → dist/components/badge/snice-badge.types.d.ts} +11 -12
package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +27 -0
package/dist/components/breadcrumbs/snice-breadcrumbs.js +214 -0
package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +1 -0
package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +23 -0
package/dist/components/breadcrumbs/snice-crumb.d.ts +9 -0
package/dist/components/breadcrumbs/snice-crumb.js +63 -0
package/dist/components/breadcrumbs/snice-crumb.js.map +1 -0
package/dist/components/button/snice-button.d.ts +32 -0
package/dist/components/button/snice-button.js +232 -0
package/dist/components/button/snice-button.js.map +1 -0
package/dist/components/button/snice-button.types.d.ts +23 -0
package/dist/components/card/snice-card.d.ts +19 -0
package/dist/components/card/snice-card.js +136 -0
package/dist/components/card/snice-card.js.map +1 -0
package/{components/card/snice-card.types.ts → dist/components/card/snice-card.types.d.ts} +6 -7
package/dist/components/checkbox/snice-checkbox.d.ts +34 -0
package/dist/components/checkbox/snice-checkbox.js +286 -0
package/dist/components/checkbox/snice-checkbox.js.map +1 -0
package/dist/components/checkbox/snice-checkbox.types.d.ts +20 -0
package/dist/components/chip/snice-chip.d.ts +28 -0
package/dist/components/chip/snice-chip.js +199 -0
package/dist/components/chip/snice-chip.js.map +1 -0
package/dist/components/chip/snice-chip.types.d.ts +14 -0
package/dist/components/date-picker/snice-date-picker.d.ts +82 -0
package/dist/components/date-picker/snice-date-picker.js +847 -0
package/dist/components/date-picker/snice-date-picker.js.map +1 -0
package/dist/components/date-picker/snice-date-picker.types.d.ts +71 -0
package/dist/components/divider/snice-divider.d.ts +17 -0
package/dist/components/divider/snice-divider.js +122 -0
package/dist/components/divider/snice-divider.js.map +1 -0
package/{components/divider/snice-divider.types.ts → dist/components/divider/snice-divider.types.d.ts} +9 -10
package/dist/components/drawer/snice-drawer.d.ts +37 -0
package/dist/components/drawer/snice-drawer.js +337 -0
package/dist/components/drawer/snice-drawer.js.map +1 -0
package/dist/components/drawer/snice-drawer.types.d.ts +16 -0
package/dist/components/input/snice-input.d.ts +65 -0
package/dist/components/input/snice-input.js +567 -0
package/dist/components/input/snice-input.js.map +1 -0
package/dist/components/input/snice-input.types.d.ts +53 -0
package/dist/components/layout/snice-layout-blog.d.ts +4 -0
package/dist/components/layout/snice-layout-blog.js +67 -0
package/dist/components/layout/snice-layout-blog.js.map +1 -0
package/dist/components/layout/snice-layout-card.d.ts +6 -0
package/dist/components/layout/snice-layout-card.js +64 -0
package/dist/components/layout/snice-layout-card.js.map +1 -0
package/dist/components/layout/snice-layout-centered.d.ts +5 -0
package/dist/components/layout/snice-layout-centered.js +48 -0
package/dist/components/layout/snice-layout-centered.js.map +1 -0
package/dist/components/layout/snice-layout-dashboard.d.ts +4 -0
package/dist/components/layout/snice-layout-dashboard.js +64 -0
package/dist/components/layout/snice-layout-dashboard.js.map +1 -0
package/dist/components/layout/snice-layout-fullscreen.d.ts +5 -0
package/dist/components/layout/snice-layout-fullscreen.js +60 -0
package/dist/components/layout/snice-layout-fullscreen.js.map +1 -0
package/dist/components/layout/snice-layout-landing.d.ts +4 -0
package/dist/components/layout/snice-layout-landing.js +66 -0
package/dist/components/layout/snice-layout-landing.js.map +1 -0
package/dist/components/layout/snice-layout-minimal.d.ts +4 -0
package/dist/components/layout/snice-layout-minimal.js +38 -0
package/dist/components/layout/snice-layout-minimal.js.map +1 -0
package/dist/components/layout/snice-layout-sidebar.d.ts +5 -0
package/dist/components/layout/snice-layout-sidebar.js +74 -0
package/dist/components/layout/snice-layout-sidebar.js.map +1 -0
package/dist/components/layout/snice-layout-split.d.ts +6 -0
package/dist/components/layout/snice-layout-split.js +58 -0
package/dist/components/layout/snice-layout-split.js.map +1 -0
package/dist/components/layout/snice-layout.d.ts +4 -0
package/dist/components/layout/snice-layout.js +54 -0
package/dist/components/layout/snice-layout.js.map +1 -0
package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts} +1 -3
package/dist/components/login/snice-login.d.ts +44 -0
package/dist/components/login/snice-login.js +382 -0
package/dist/components/login/snice-login.js.map +1 -0
package/dist/components/login/snice-login.types.d.ts +26 -0
package/dist/components/modal/snice-modal.d.ts +32 -0
package/dist/components/modal/snice-modal.js +280 -0
package/dist/components/modal/snice-modal.js.map +1 -0
package/dist/components/modal/snice-modal.types.d.ts +18 -0
package/dist/components/pagination/snice-pagination.d.ts +26 -0
package/dist/components/pagination/snice-pagination.js +373 -0
package/dist/components/pagination/snice-pagination.js.map +1 -0
package/dist/components/pagination/snice-pagination.types.d.ts +18 -0
package/dist/components/progress/snice-progress.d.ts +35 -0
package/dist/components/progress/snice-progress.js +305 -0
package/dist/components/progress/snice-progress.js.map +1 -0
package/dist/components/progress/snice-progress.types.d.ts +18 -0
package/dist/components/radio/snice-radio.d.ts +33 -0
package/dist/components/radio/snice-radio.js +279 -0
package/dist/components/radio/snice-radio.js.map +1 -0
package/dist/components/radio/snice-radio.types.d.ts +19 -0
package/dist/components/select/snice-option.d.ts +17 -0
package/dist/components/select/snice-option.js +88 -0
package/dist/components/select/snice-option.js.map +1 -0
package/{components/select/snice-option.types.ts → dist/components/select/snice-option.types.d.ts} +8 -8
package/dist/components/select/snice-select.d.ts +89 -0
package/dist/components/select/snice-select.js +864 -0
package/dist/components/select/snice-select.js.map +1 -0
package/dist/components/select/snice-select.types.d.ts +49 -0
package/dist/components/skeleton/snice-skeleton.d.ts +16 -0
package/dist/components/skeleton/snice-skeleton.js +166 -0
package/dist/components/skeleton/snice-skeleton.js.map +1 -0
package/{components/skeleton/snice-skeleton.types.ts → dist/components/skeleton/snice-skeleton.types.d.ts} +7 -8
package/dist/components/snice-cell-C9N6yGxQ.js +4 -0
package/dist/components/snice-cell-C9N6yGxQ.js.map +1 -0
package/dist/components/switch/snice-switch.d.ts +38 -0
package/dist/components/switch/snice-switch.js +305 -0
package/dist/components/switch/snice-switch.js.map +1 -0
package/dist/components/switch/snice-switch.types.d.ts +21 -0
package/dist/components/symbols.d.ts +1 -0
package/dist/components/symbols.js +22 -0
package/dist/components/symbols.js.map +1 -0
package/dist/components/table/snice-cell-boolean.d.ts +21 -0
package/dist/components/table/snice-cell-boolean.js +164 -0
package/dist/components/table/snice-cell-boolean.js.map +1 -0
package/dist/components/table/snice-cell-date.d.ts +24 -0
package/dist/components/table/snice-cell-date.js +253 -0
package/dist/components/table/snice-cell-date.js.map +1 -0
package/dist/components/table/snice-cell-duration.d.ts +16 -0
package/dist/components/table/snice-cell-duration.js +130 -0
package/dist/components/table/snice-cell-duration.js.map +1 -0
package/dist/components/table/snice-cell-filesize.d.ts +16 -0
package/dist/components/table/snice-cell-filesize.js +126 -0
package/dist/components/table/snice-cell-filesize.js.map +1 -0
package/dist/components/table/snice-cell-number.d.ts +23 -0
package/dist/components/table/snice-cell-number.js +215 -0
package/dist/components/table/snice-cell-number.js.map +1 -0
package/dist/components/table/snice-cell-progress.d.ts +17 -0
package/dist/components/table/snice-cell-progress.js +121 -0
package/dist/components/table/snice-cell-progress.js.map +1 -0
package/dist/components/table/snice-cell-rating.d.ts +17 -0
package/dist/components/table/snice-cell-rating.js +120 -0
package/dist/components/table/snice-cell-rating.js.map +1 -0
package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
package/dist/components/table/snice-cell-sparkline.js +306 -0
package/dist/components/table/snice-cell-sparkline.js.map +1 -0
package/dist/components/table/snice-cell-text.d.ts +19 -0
package/dist/components/table/snice-cell-text.js +161 -0
package/dist/components/table/snice-cell-text.js.map +1 -0
package/dist/components/table/snice-cell.d.ts +32 -0
package/dist/components/table/snice-cell.js +458 -0
package/dist/components/table/snice-cell.js.map +1 -0
package/dist/components/table/snice-column.d.ts +62 -0
package/dist/components/table/snice-column.js +506 -0
package/dist/components/table/snice-column.js.map +1 -0
package/dist/components/table/snice-header.d.ts +33 -0
package/dist/components/table/snice-header.js +289 -0
package/dist/components/table/snice-header.js.map +1 -0
package/dist/components/table/snice-progress.d.ts +10 -0
package/dist/components/table/snice-progress.js +105 -0
package/dist/components/table/snice-progress.js.map +1 -0
package/dist/components/table/snice-rating.d.ts +9 -0
package/dist/components/table/snice-rating.js +81 -0
package/dist/components/table/snice-rating.js.map +1 -0
package/dist/components/table/snice-row.d.ts +43 -0
package/dist/components/table/snice-row.js +353 -0
package/dist/components/table/snice-row.js.map +1 -0
package/dist/components/table/snice-table.d.ts +69 -0
package/dist/components/table/snice-table.js +792 -0
package/dist/components/table/snice-table.js.map +1 -0
package/dist/components/table/snice-table.types.d.ts +137 -0
package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
package/dist/components/tabs/snice-tab-panel.js +87 -0
package/dist/components/tabs/snice-tab-panel.js.map +1 -0
package/dist/components/tabs/snice-tab.d.ts +13 -0
package/dist/components/tabs/snice-tab.js +98 -0
package/dist/components/tabs/snice-tab.js.map +1 -0
package/dist/components/tabs/snice-tabs.d.ts +34 -0
package/dist/components/tabs/snice-tabs.js +375 -0
package/dist/components/tabs/snice-tabs.js.map +1 -0
package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
package/dist/components/toast/snice-toast-container.d.ts +25 -0
package/dist/components/toast/snice-toast-container.js +252 -0
package/dist/components/toast/snice-toast-container.js.map +1 -0
package/dist/components/toast/snice-toast.d.ts +23 -0
package/dist/components/toast/snice-toast.js +321 -0
package/dist/components/toast/snice-toast.js.map +1 -0
package/dist/components/toast/snice-toast.types.d.ts +30 -0
package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
package/dist/components/tooltip/snice-tooltip.js +644 -0
package/dist/components/tooltip/snice-tooltip.js.map +1 -0
package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
package/dist/components/transitions.d.ts +11 -0
package/dist/components/transitions.js +72 -0
package/dist/components/transitions.js.map +1 -0
package/dist/index.cjs +1 -1
package/dist/index.esm.js +1 -1
package/dist/index.iife.js +1 -1
package/dist/symbols.esm.js +1 -1
package/dist/transitions.esm.js +1 -1
package/package.json +10 -6
package/components/accordion/demo.html +0 -403
package/components/accordion/snice-accordion-item.css +0 -85
package/components/accordion/snice-accordion-item.ts +0 -226
package/components/accordion/snice-accordion.css +0 -31
package/components/accordion/snice-accordion.ts +0 -182
package/components/accordion/snice-accordion.types.ts +0 -32
package/components/alert/demo.html +0 -445
package/components/alert/snice-alert.css +0 -195
package/components/alert/snice-alert.ts +0 -141
package/components/avatar/demo.html +0 -598
package/components/avatar/snice-avatar.css +0 -131
package/components/avatar/snice-avatar.ts +0 -136
package/components/avatar/snice-avatar.types.ts +0 -13
package/components/badge/demo.html +0 -523
package/components/badge/snice-badge.css +0 -161
package/components/badge/snice-badge.ts +0 -117
package/components/breadcrumbs/demo.html +0 -404
package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
package/components/breadcrumbs/snice-crumb.ts +0 -26
package/components/button/demo.html +0 -42
package/components/button/snice-button.css +0 -230
package/components/button/snice-button.ts +0 -169
package/components/button/snice-button.types.ts +0 -25
package/components/card/demo.html +0 -525
package/components/card/snice-card.css +0 -140
package/components/card/snice-card.ts +0 -102
package/components/checkbox/demo.html +0 -253
package/components/checkbox/snice-checkbox.css +0 -164
package/components/checkbox/snice-checkbox.ts +0 -223
package/components/checkbox/snice-checkbox.types.ts +0 -22
package/components/chip/demo.html +0 -383
package/components/chip/snice-chip.css +0 -195
package/components/chip/snice-chip.ts +0 -139
package/components/chip/snice-chip.types.ts +0 -15
package/components/date-picker/README.md +0 -233
package/components/date-picker/demo.html +0 -191
package/components/date-picker/snice-date-picker.css +0 -330
package/components/date-picker/snice-date-picker.ts +0 -777
package/components/date-picker/snice-date-picker.types.ts +0 -83
package/components/divider/demo.html +0 -233
package/components/divider/snice-divider.css +0 -155
package/components/divider/snice-divider.ts +0 -69
package/components/drawer/demo.html +0 -328
package/components/drawer/snice-drawer.css +0 -476
package/components/drawer/snice-drawer.ts +0 -287
package/components/drawer/snice-drawer.types.ts +0 -17
package/components/global.d.ts +0 -14
package/components/input/demo.html +0 -303
package/components/input/snice-input.css +0 -257
package/components/input/snice-input.ts +0 -442
package/components/input/snice-input.types.ts +0 -59
package/components/input/test.html +0 -77
package/components/layout/README.md +0 -260
package/components/layout/demo.html +0 -538
package/components/layout/snice-layout-blog.css +0 -129
package/components/layout/snice-layout-blog.ts +0 -48
package/components/layout/snice-layout-card.css +0 -104
package/components/layout/snice-layout-card.ts +0 -35
package/components/layout/snice-layout-centered.css +0 -51
package/components/layout/snice-layout-centered.ts +0 -22
package/components/layout/snice-layout-dashboard.css +0 -98
package/components/layout/snice-layout-dashboard.ts +0 -45
package/components/layout/snice-layout-fullscreen.css +0 -72
package/components/layout/snice-layout-fullscreen.ts +0 -34
package/components/layout/snice-layout-landing.css +0 -92
package/components/layout/snice-layout-landing.ts +0 -47
package/components/layout/snice-layout-minimal.css +0 -16
package/components/layout/snice-layout-minimal.ts +0 -19
package/components/layout/snice-layout-sidebar.css +0 -117
package/components/layout/snice-layout-sidebar.ts +0 -48
package/components/layout/snice-layout-split.css +0 -103
package/components/layout/snice-layout-split.ts +0 -29
package/components/layout/snice-layout.css +0 -72
package/components/layout/snice-layout.ts +0 -35
package/components/login/demo-auth-controller.ts +0 -185
package/components/login/demo.html +0 -470
package/components/login/snice-login.css +0 -204
package/components/login/snice-login.ts +0 -326
package/components/login/snice-login.types.ts +0 -29
package/components/modal/demo.html +0 -291
package/components/modal/snice-modal.css +0 -203
package/components/modal/snice-modal.ts +0 -233
package/components/modal/snice-modal.types.ts +0 -21
package/components/pagination/demo.html +0 -395
package/components/pagination/snice-pagination.ts +0 -333
package/components/pagination/snice-pagination.types.ts +0 -21
package/components/progress/demo.html +0 -510
package/components/progress/snice-progress.css +0 -267
package/components/progress/snice-progress.ts +0 -247
package/components/progress/snice-progress.types.ts +0 -19
package/components/radio/demo.html +0 -287
package/components/radio/snice-radio.css +0 -171
package/components/radio/snice-radio.ts +0 -218
package/components/radio/snice-radio.types.ts +0 -21
package/components/select/demo.html +0 -511
package/components/select/snice-option.ts +0 -52
package/components/select/snice-select.css +0 -392
package/components/select/snice-select.ts +0 -796
package/components/select/snice-select.types.ts +0 -55
package/components/skeleton/demo.html +0 -514
package/components/skeleton/snice-skeleton.css +0 -109
package/components/skeleton/snice-skeleton.ts +0 -126
package/components/switch/demo.html +0 -284
package/components/switch/snice-switch.css +0 -221
package/components/switch/snice-switch.ts +0 -229
package/components/switch/snice-switch.types.ts +0 -23
package/components/symbols.ts +0 -23
package/components/table/demo-table-controller.ts +0 -100
package/components/table/demo.html +0 -480
package/components/table/snice-cell-boolean.ts +0 -112
package/components/table/snice-cell-date.ts +0 -210
package/components/table/snice-cell-duration.ts +0 -91
package/components/table/snice-cell-filesize.ts +0 -90
package/components/table/snice-cell-number.ts +0 -165
package/components/table/snice-cell-progress.ts +0 -83
package/components/table/snice-cell-rating.ts +0 -82
package/components/table/snice-cell-sparkline.ts +0 -253
package/components/table/snice-cell-text.ts +0 -125
package/components/table/snice-cell.css +0 -296
package/components/table/snice-cell.ts +0 -473
package/components/table/snice-column.ts +0 -353
package/components/table/snice-header.css +0 -243
package/components/table/snice-header.ts +0 -261
package/components/table/snice-progress.ts +0 -66
package/components/table/snice-rating.ts +0 -45
package/components/table/snice-row.css +0 -255
package/components/table/snice-row.ts +0 -331
package/components/table/snice-table.css +0 -241
package/components/table/snice-table.ts +0 -737
package/components/table/snice-table.types.ts +0 -158
package/components/tabs/demo.html +0 -487
package/components/tabs/snice-tab-panel.css +0 -264
package/components/tabs/snice-tab-panel.ts +0 -47
package/components/tabs/snice-tab.css +0 -96
package/components/tabs/snice-tab.ts +0 -65
package/components/tabs/snice-tabs.css +0 -189
package/components/tabs/snice-tabs.ts +0 -332
package/components/tabs/snice-tabs.types.ts +0 -28
package/components/theme/theme.css +0 -234
package/components/toast/demo.html +0 -329
package/components/toast/snice-toast-container.ts +0 -256
package/components/toast/snice-toast.css +0 -213
package/components/toast/snice-toast.ts +0 -276
package/components/toast/snice-toast.types.ts +0 -35
package/components/tooltip/demo.html +0 -350
package/components/tooltip/snice-tooltip-portal.css +0 -79
package/components/tooltip/snice-tooltip.css +0 -117
package/components/tooltip/snice-tooltip.ts +0 -612
package/components/tooltip/snice-tooltip.types.ts +0 -32
package/components/transitions.ts +0 -94
package/components/tsconfig.json +0 -18
package/dist/index.cjs.min.map +0 -1
package/dist/index.esm.min.js +0 -14
package/dist/index.esm.min.js.map +0 -1
package/dist/index.iife.min.js +0 -15
package/dist/index.iife.min.js.map +0 -1

package/components/table/demo.html DELETED Viewed

@@ -1,480 +0,0 @@
-<!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 DELETED Viewed

@@ -1,112 +0,0 @@
-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>`;
-    }
-  }
-}