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

@@ -0,0 +1,598 @@
+<!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>