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

snice 2.1.5 → 2.2.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 (364) 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-C8aBfN72.js +4 -0
package/dist/components/snice-cell-C8aBfN72.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.esm.min.js +1 -1
package/dist/index.iife.js +1 -1
package/dist/index.iife.min.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/components/avatar/demo.html DELETED Viewed

@@ -1,598 +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 Avatar Demo</title>
-  <link rel="stylesheet" href="../theme/theme.css">
-  <style>
-    body {
-      font-family: system-ui, -apple-system, sans-serif;
-      padding: 40px;
-      line-height: 1.6;
-      background: #f5f5f5;
-    }
-    .container {
-      max-width: 900px;
-      margin: 0 auto;
-      background: white;
-      padding: 40px;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    }
-    h1 {
-      color: #333;
-      border-bottom: 2px solid #e0e0e0;
-      padding-bottom: 10px;
-    }
-    h2 {
-      color: #555;
-      margin-top: 30px;
-    }
-    .demo-section {
-      margin: 30px 0;
-      padding: 20px;
-      background: #fafafa;
-      border-radius: 4px;
-    }
-    .demo-label {
-      display: block;
-      margin-bottom: 12px;
-      font-weight: 500;
-      color: #666;
-      font-size: 14px;
-    }
-    .avatar-row {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      margin: 16px 0;
-      flex-wrap: wrap;
-    }
-    .avatar-group {
-      display: flex;
-      align-items: center;
-      margin: 16px 0;
-    }
-    .avatar-group snice-avatar {
-      margin-left: -12px;
-      border: 3px solid white;
-      border-radius: 50%;
-      position: relative;
-      overflow: hidden;
-    }
-    .avatar-group snice-avatar:first-child {
-      margin-left: 0;
-    }
-    .avatar-group snice-avatar:hover {
-      z-index: 1;
-    }
-    .controls {
-      display: flex;
-      gap: 10px;
-      margin: 20px 0;
-      flex-wrap: wrap;
-    }
-    button {
-      padding: 8px 16px;
-      background: #3b82f6;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 14px;
-      transition: background 0.2s;
-    }
-    button:hover {
-      background: #2563eb;
-    }
-    .profile-card {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 16px;
-      background: white;
-      border: 1px solid #e0e0e0;
-      border-radius: 8px;
-      margin: 16px 0;
-    }
-    .profile-info {
-      flex: 1;
-    }
-    .profile-name {
-      font-weight: 600;
-      font-size: 16px;
-      margin: 0;
-    }
-    .profile-role {
-      color: #6b7280;
-      font-size: 14px;
-      margin: 4px 0 0 0;
-    }
-    .avatar-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-      gap: 16px;
-      margin: 20px 0;
-    }
-    .avatar-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8px;
-    }
-    .avatar-name {
-      font-size: 12px;
-      text-align: center;
-      color: #666;
-    }
-    input[type="text"],
-    input[type="url"] {
-      padding: 8px 12px;
-      border: 1px solid #d1d5db;
-      border-radius: 4px;
-      font-size: 14px;
-      width: 200px;
-    }
-    select {
-      padding: 8px 12px;
-      border: 1px solid #d1d5db;
-      border-radius: 4px;
-      background: white;
-      font-size: 14px;
-    }
-    code {
-      background: #f0f0f0;
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-size: 0.9em;
-    }
-    .comment-box {
-      display: flex;
-      gap: 12px;
-      padding: 16px;
-      background: white;
-      border: 1px solid #e0e0e0;
-      border-radius: 8px;
-      margin: 16px 0;
-    }
-    .comment-content {
-      flex: 1;
-    }
-    .comment-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 8px;
-    }
-    .comment-author {
-      font-weight: 600;
-      font-size: 14px;
-    }
-    .comment-time {
-      color: #6b7280;
-      font-size: 12px;
-    }
-    .comment-text {
-      font-size: 14px;
-      line-height: 1.5;
-      margin: 0;
-    }
-    .team-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 20px;
-      margin: 20px 0;
-    }
-    .team-member {
-      text-align: center;
-      padding: 20px;
-      background: white;
-      border: 1px solid #e0e0e0;
-      border-radius: 8px;
-      transition: box-shadow 0.2s;
-    }
-    .team-member:hover {
-      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    }
-    .team-member snice-avatar {
-      margin: 0 auto 12px;
-    }
-    .team-member-name {
-      font-weight: 600;
-      margin: 8px 0 4px;
-    }
-    .team-member-role {
-      color: #6b7280;
-      font-size: 14px;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>Snice Avatar Component Demo</h1>
-    <div class="demo-section">
-      <h2>Basic Avatars</h2>
-      <span class="demo-label">With Image</span>
-      <div class="avatar-row">
-        <snice-avatar
-          src="https://i.pravatar.cc/150?img=1"
-          name="John Doe">
-        </snice-avatar>
-        <snice-avatar
-          src="https://i.pravatar.cc/150?img=2"
-          name="Jane Smith">
-        </snice-avatar>
-        <snice-avatar
-          src="https://i.pravatar.cc/150?img=3"
-          name="Bob Wilson">
-        </snice-avatar>
-      </div>
-      <span class="demo-label">Fallback to Initials</span>
-      <div class="avatar-row">
-        <snice-avatar name="John Doe"></snice-avatar>
-        <snice-avatar name="Jane Smith"></snice-avatar>
-        <snice-avatar name="Bob Wilson"></snice-avatar>
-        <snice-avatar name="Alice"></snice-avatar>
-        <snice-avatar name="X"></snice-avatar>
-      </div>
-      <span class="demo-label">No Name (Default Icon)</span>
-      <div class="avatar-row">
-        <snice-avatar></snice-avatar>
-        <snice-avatar size="large"></snice-avatar>
-        <snice-avatar size="xl"></snice-avatar>
-      </div>
-      <span class="demo-label">Broken Image (Fallback)</span>
-      <div class="avatar-row">
-        <snice-avatar
-          src="https://broken-image-url.com/404.jpg"
-          name="Fallback User">
-        </snice-avatar>
-        <snice-avatar
-          src="https://invalid.url/image.png"
-          name="Error Example">
-        </snice-avatar>
-      </div>
-    </div>
-    <div class="demo-section">
-      <h2>Sizes</h2>
-      <div class="avatar-row">
-        <snice-avatar size="xs" name="XS"></snice-avatar>
-        <snice-avatar size="small" name="SM"></snice-avatar>
-        <snice-avatar size="medium" name="MD"></snice-avatar>
-        <snice-avatar size="large" name="LG"></snice-avatar>
-        <snice-avatar size="xl" name="XL"></snice-avatar>
-        <snice-avatar size="xxl" name="XXL"></snice-avatar>
-      </div>
-      <span class="demo-label">With Images</span>
-      <div class="avatar-row">
-        <snice-avatar size="xs" src="https://i.pravatar.cc/150?img=4"></snice-avatar>
-        <snice-avatar size="small" src="https://i.pravatar.cc/150?img=5"></snice-avatar>
-        <snice-avatar size="medium" src="https://i.pravatar.cc/150?img=6"></snice-avatar>
-        <snice-avatar size="large" src="https://i.pravatar.cc/150?img=7"></snice-avatar>
-        <snice-avatar size="xl" src="https://i.pravatar.cc/150?img=8"></snice-avatar>
-        <snice-avatar size="xxl" src="https://i.pravatar.cc/150?img=9"></snice-avatar>
-      </div>
-    </div>
-    <div class="demo-section">
-      <h2>Shapes</h2>
-      <div class="avatar-row">
-        <snice-avatar shape="circle" name="Circle" size="large"></snice-avatar>
-        <snice-avatar shape="square" name="Square" size="large"></snice-avatar>
-        <snice-avatar shape="rounded" name="Rounded" size="large"></snice-avatar>
-      </div>
-      <span class="demo-label">With Images</span>
-      <div class="avatar-row">
-        <snice-avatar shape="circle" src="https://i.pravatar.cc/150?img=10" size="large"></snice-avatar>
-        <snice-avatar shape="square" src="https://i.pravatar.cc/150?img=11" size="large"></snice-avatar>
-        <snice-avatar shape="rounded" src="https://i.pravatar.cc/150?img=12" size="large"></snice-avatar>
-      </div>
-    </div>
-    <div class="demo-section">
-      <h2>Status Indicators</h2>
-      <span class="demo-label">Different Status Types</span>
-      <div class="avatar-row">
-        <snice-avatar name="Online" status="online" size="large"></snice-avatar>
-        <snice-avatar name="Offline" status="offline" size="large"></snice-avatar>
-        <snice-avatar name="Away" status="away" size="large"></snice-avatar>
-        <snice-avatar name="Busy" status="busy" size="large"></snice-avatar>
-      </div>
-      <span class="demo-label">Status Positions</span>
-      <div class="avatar-row">
-        <snice-avatar name="TR" status="online" status-position="top-right" size="large"></snice-avatar>
-        <snice-avatar name="TL" status="online" status-position="top-left" size="large"></snice-avatar>
-        <snice-avatar name="BR" status="online" status-position="bottom-right" size="large"></snice-avatar>
-        <snice-avatar name="BL" status="online" status-position="bottom-left" size="large"></snice-avatar>
-      </div>
-      <span class="demo-label">With Different Sizes</span>
-      <div class="avatar-row">
-        <snice-avatar name="XS" status="online" size="xs"></snice-avatar>
-        <snice-avatar name="SM" status="away" size="small"></snice-avatar>
-        <snice-avatar name="MD" status="busy" size="medium"></snice-avatar>
-        <snice-avatar name="LG" status="online" size="large"></snice-avatar>
-        <snice-avatar name="XL" status="offline" size="xl"></snice-avatar>
-      </div>
-    </div>
-    <div class="demo-section">
-      <h2>Auto-generated Colors</h2>
-      <span class="demo-label">Consistent colors based on name</span>
-      <div class="avatar-grid">
-        <div class="avatar-item">
-          <snice-avatar name="Alice Johnson"></snice-avatar>
-          <span class="avatar-name">Alice Johnson</span>
-        </div>
-        <div class="avatar-item">
-          <snice-avatar name="Bob Smith"></snice-avatar>
-          <span class="avatar-name">Bob Smith</span>
-        </div>
-        <div class="avatar-item">
-          <snice-avatar name="Carol White"></snice-avatar>
-          <span class="avatar-name">Carol White</span>
-        </div>
-        <div class="avatar-item">
-          <snice-avatar name="David Brown"></snice-avatar>
-          <span class="avatar-name">David Brown</span>
-        </div>
-        <div class="avatar-item">
-          <snice-avatar name="Emma Davis"></snice-avatar>
-          <span class="avatar-name">Emma Davis</span>
-        </div>
-        <div class="avatar-item">
-          <snice-avatar name="Frank Wilson"></snice-avatar>
-          <span class="avatar-name">Frank Wilson</span>
-        </div>
-        <div class="avatar-item">
-          <snice-avatar name="Grace Lee"></snice-avatar>
-          <span class="avatar-name">Grace Lee</span>
-        </div>
-        <div class="avatar-item">
-          <snice-avatar name="Henry Taylor"></snice-avatar>
-          <span class="avatar-name">Henry Taylor</span>
-        </div>
-      </div>
-    </div>
-    <div class="demo-section">
-      <h2>Avatar Groups</h2>
-      <span class="demo-label">Overlapping avatars</span>
-      <div class="avatar-group">
-        <snice-avatar src="https://i.pravatar.cc/150?img=1" name="User 1"></snice-avatar>
-        <snice-avatar src="https://i.pravatar.cc/150?img=2" name="User 2"></snice-avatar>
-        <snice-avatar src="https://i.pravatar.cc/150?img=3" name="User 3"></snice-avatar>
-        <snice-avatar src="https://i.pravatar.cc/150?img=4" name="User 4"></snice-avatar>
-        <snice-avatar name="+5" fallback-background="#e5e7eb"></snice-avatar>
-      </div>
-      <span class="demo-label">With initials</span>
-      <div class="avatar-group">
-        <snice-avatar name="Alice Johnson"></snice-avatar>
-        <snice-avatar name="Bob Smith"></snice-avatar>
-        <snice-avatar name="Carol White"></snice-avatar>
-        <snice-avatar name="David Brown"></snice-avatar>
-      </div>
-    </div>
-    <div class="demo-section">
-      <h2>Real-world Examples</h2>
-      <span class="demo-label">Profile Cards</span>
-      <div class="profile-card">
-        <snice-avatar
-          src="https://i.pravatar.cc/150?img=15"
-          name="Sarah Johnson"
-          size="large"
-          status="online">
-        </snice-avatar>
-        <div class="profile-info">
-          <p class="profile-name">Sarah Johnson</p>
-          <p class="profile-role">Senior Developer</p>
-        </div>
-      </div>
-      <div class="profile-card">
-        <snice-avatar
-          name="Michael Chen"
-          size="large"
-          status="busy">
-        </snice-avatar>
-        <div class="profile-info">
-          <p class="profile-name">Michael Chen</p>
-          <p class="profile-role">Product Manager</p>
-        </div>
-      </div>
-      <span class="demo-label">Comments</span>
-      <div class="comment-box">
-        <snice-avatar
-          src="https://i.pravatar.cc/150?img=20"
-          name="Emma Wilson"
-          size="medium">
-        </snice-avatar>
-        <div class="comment-content">
-          <div class="comment-header">
-            <span class="comment-author">Emma Wilson</span>
-            <span class="comment-time">2 hours ago</span>
-          </div>
-          <p class="comment-text">
-            This is a great implementation! The avatar component looks really polished.
-          </p>
-        </div>
-      </div>
-      <div class="comment-box">
-        <snice-avatar
-          name="James Brown"
-          size="medium">
-        </snice-avatar>
-        <div class="comment-content">
-          <div class="comment-header">
-            <span class="comment-author">James Brown</span>
-            <span class="comment-time">5 hours ago</span>
-          </div>
-          <p class="comment-text">
-            I love how the fallback to initials works seamlessly when images fail to load.
-          </p>
-        </div>
-      </div>
-      <span class="demo-label">Team Members</span>
-      <div class="team-grid">
-        <div class="team-member">
-          <snice-avatar
-            src="https://i.pravatar.cc/150?img=25"
-            name="Lisa Anderson"
-            size="xl"
-            status="online">
-          </snice-avatar>
-          <div class="team-member-name">Lisa Anderson</div>
-          <div class="team-member-role">CEO</div>
-        </div>
-        <div class="team-member">
-          <snice-avatar
-            src="https://i.pravatar.cc/150?img=26"
-            name="Tom Martinez"
-            size="xl"
-            status="away">
-          </snice-avatar>
-          <div class="team-member-name">Tom Martinez</div>
-          <div class="team-member-role">CTO</div>
-        </div>
-        <div class="team-member">
-          <snice-avatar
-            name="Nina Patel"
-            size="xl"
-            status="online">
-          </snice-avatar>
-          <div class="team-member-name">Nina Patel</div>
-          <div class="team-member-role">Designer</div>
-        </div>
-        <div class="team-member">
-          <snice-avatar
-            name="Alex Kim"
-            size="xl"
-            status="offline">
-          </snice-avatar>
-          <div class="team-member-name">Alex Kim</div>
-          <div class="team-member-role">Developer</div>
-        </div>
-      </div>
-    </div>
-    <div class="demo-section">
-      <h2>Interactive Demo</h2>
-      <div class="controls">
-        <input type="text" id="name-input" placeholder="Enter name" value="John Doe">
-        <input type="url" id="src-input" placeholder="Image URL (optional)">
-        <select id="size-select">
-          <option value="xs">Extra Small</option>
-          <option value="small">Small</option>
-          <option value="medium" selected>Medium</option>
-          <option value="large">Large</option>
-          <option value="xl">Extra Large</option>
-          <option value="xxl">XXL</option>
-        </select>
-        <select id="shape-select">
-          <option value="circle" selected>Circle</option>
-          <option value="square">Square</option>
-          <option value="rounded">Rounded</option>
-        </select>
-        <select id="status-select">
-          <option value="">No Status</option>
-          <option value="online">Online</option>
-          <option value="offline">Offline</option>
-          <option value="away">Away</option>
-          <option value="busy">Busy</option>
-        </select>
-        <button onclick="updateAvatar()">Update Avatar</button>
-      </div>
-      <div style="text-align: center; padding: 40px; background: white; border: 1px solid #e0e0e0; border-radius: 8px;">
-        <snice-avatar
-          id="demo-avatar"
-          name="John Doe"
-          size="medium"
-          shape="circle">
-        </snice-avatar>
-      </div>
-    </div>
-  </div>
-  <script type="module">
-    import './snice-avatar.ts';
-    window.updateAvatar = function() {
-      const avatar = document.getElementById('demo-avatar');
-      const name = document.getElementById('name-input').value;
-      const src = document.getElementById('src-input').value;
-      const size = document.getElementById('size-select').value;
-      const shape = document.getElementById('shape-select').value;
-      const status = document.getElementById('status-select').value;
-      avatar.name = name;
-      avatar.src = src;
-      avatar.size = size;
-      avatar.shape = shape;
-      avatar.status = status;
-    };
-    // Auto-update on input changes
-    ['name-input', 'src-input', 'size-select', 'shape-select', 'status-select'].forEach(id => {
-      document.getElementById(id).addEventListener('change', updateAvatar);
-    });
-  </script>
-</body>
-</html>