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/badge/snice-badge.ts ADDED Viewed

@@ -0,0 +1,117 @@
+import { element, property, watch, query, ready, part } from 'snice';
+import css from './snice-badge.css?inline';
+import type { BadgeVariant, BadgePosition, BadgeSize, SniceBadgeElement } from './snice-badge.types';
+@element('snice-badge')
+export class SniceBadge extends HTMLElement implements SniceBadgeElement {
+  @property({ reflect: true })
+  content = '';
+  @property({ type: Number, reflect: true })
+  count = 0;
+  @property({ type: Number, reflect: true })
+  max = 99;
+  @property({ type: Boolean, reflect: true })
+  dot = false;
+  @property({ reflect: true })
+  variant: BadgeVariant = 'default';
+  @property({ reflect: true })
+  position: BadgePosition = 'top-right';
+  @property({ type: Boolean, reflect: true })
+  inline = false;
+  @property({ reflect: true })
+  size: BadgeSize = 'medium';
+  @property({ type: Boolean, reflect: true })
+  pulse = false;
+  @property({ type: Number, reflect: true })
+  offset = 0;
+  @query('.badge')
+  badgeElement?: HTMLElement;
+  html() {
+    return /*html*/`
+      <div class="badge-wrapper">
+        <slot></slot>
+        <div part="badge-section"></div>
+      </div>
+    `;
+  }
+  @watch('content', 'count', 'max', 'dot', 'pulse')
+  @part('badge-section')
+  renderBadgeSection() {
+    const displayContent = this.getDisplayContent();
+    const showBadge = this.shouldShowBadge();
+    if (!showBadge) return '';
+    return /*html*/`
+      <span class="badge ${this.dot ? 'badge--dot' : ''} ${this.pulse ? 'badge--pulse' : ''}"
+            aria-label="${displayContent}"
+            role="status">
+        ${!this.dot ? displayContent : ''}
+      </span>
+    `;
+  }
+  css() {
+    return css;
+  }
+  private getDisplayContent(): string {
+    if (this.dot) return 'notification';
+    if (this.content) return this.content;
+    if (this.count > 0) {
+      return this.count > this.max ? `${this.max}+` : String(this.count);
+    }
+    return '';
+  }
+  private shouldShowBadge(): boolean {
+    return this.dot || this.content !== '' || this.count > 0;
+  }
+  @ready()
+  init() {
+    this.updateOffset();
+  }
+  @watch('offset')
+  updateOffset() {
+    this.style.setProperty('--badge-offset', `${this.offset}px`);
+  }
+  setBadgeContent(content: string) {
+    this.content = content;
+    this.count = 0;
+    this.dot = false;
+  }
+  setBadgeCount(count: number) {
+    this.count = count;
+    this.content = '';
+    this.dot = false;
+  }
+  showDot() {
+    this.dot = true;
+    this.content = '';
+    this.count = 0;
+  }
+  hide() {
+    this.dot = false;
+    this.content = '';
+    this.count = 0;
+  }
+}

package/components/badge/snice-badge.types.ts ADDED Viewed

@@ -0,0 +1,16 @@
+export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type BadgeSize = 'small' | 'medium' | 'large';
+export interface SniceBadgeElement extends HTMLElement {
+  content: string;
+  count: number;
+  max: number;
+  dot: boolean;
+  variant: BadgeVariant;
+  position: BadgePosition;
+  inline: boolean;
+  size: BadgeSize;
+  pulse: boolean;
+  offset: number;
+}

package/components/breadcrumbs/demo.html ADDED Viewed

@@ -0,0 +1,404 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Snice Breadcrumb 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;
+    }
+    .breadcrumb-demo {
+      margin: 16px 0;
+      padding: 16px;
+      background: white;
+      border: 1px solid #e0e0e0;
+      border-radius: 4px;
+    }
+    .controls {
+      display: flex;
+      gap: 10px;
+      margin: 20px 0;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    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;
+    }
+    select, input {
+      padding: 8px 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    code {
+      background: #f0f0f0;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-size: 0.9em;
+    }
+    .event-log {
+      margin-top: 16px;
+      padding: 12px;
+      background: #f0f9ff;
+      border: 1px solid #0ea5e9;
+      border-radius: 4px;
+      font-family: monospace;
+      font-size: 13px;
+      max-height: 150px;
+      overflow-y: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Snice Breadcrumb Component Demo</h1>
+    <div class="demo-section">
+      <h2>Basic Breadcrumb</h2>
+      <span class="demo-label">Using items property</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs id="basic-breadcrumb"></snice-breadcrumbs>
+      </div>
+      <span class="demo-label">Using slot with snice-crumb elements (with icons)</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs separator=">">
+          <snice-crumb href="/" label="Home" icon="🏠"></snice-crumb>
+          <snice-crumb href="/docs" label="Documentation" icon="📚"></snice-crumb>
+          <snice-crumb href="/docs/components" label="Components" icon="🧩"></snice-crumb>
+          <snice-crumb label="Breadcrumbs" active></snice-crumb>
+        </snice-breadcrumbs>
+      </div>
+      <span class="demo-label">With active last item</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs id="active-breadcrumb"></snice-breadcrumbs>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Separators</h2>
+      <div class="breadcrumb-demo">
+        <span class="demo-label">Slash (default)</span>
+        <snice-breadcrumbs id="slash-breadcrumb" separator="/"></snice-breadcrumbs>
+      </div>
+      <div class="breadcrumb-demo">
+        <span class="demo-label">Chevron</span>
+        <snice-breadcrumbs id="chevron-breadcrumb" separator=">"></snice-breadcrumbs>
+      </div>
+      <div class="breadcrumb-demo">
+        <span class="demo-label">Double Chevron</span>
+        <snice-breadcrumbs id="double-chevron-breadcrumb" separator="»"></snice-breadcrumbs>
+      </div>
+      <div class="breadcrumb-demo">
+        <span class="demo-label">Dot</span>
+        <snice-breadcrumbs id="dot-breadcrumb" separator="•"></snice-breadcrumbs>
+      </div>
+      <div class="breadcrumb-demo">
+        <span class="demo-label">Pipe</span>
+        <snice-breadcrumbs id="pipe-breadcrumb" separator="|"></snice-breadcrumbs>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Sizes</h2>
+      <div class="breadcrumb-demo">
+        <span class="demo-label">Small</span>
+        <snice-breadcrumbs id="small-breadcrumb" size="small"></snice-breadcrumbs>
+      </div>
+      <div class="breadcrumb-demo">
+        <span class="demo-label">Medium (default)</span>
+        <snice-breadcrumbs id="medium-breadcrumb" size="medium"></snice-breadcrumbs>
+      </div>
+      <div class="breadcrumb-demo">
+        <span class="demo-label">Large</span>
+        <snice-breadcrumbs id="large-breadcrumb" size="large"></snice-breadcrumbs>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Collapsed Breadcrumbs</h2>
+      <span class="demo-label">Long path with max-items="3" (click ••• to expand)</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs id="collapsed-breadcrumb" max-items="3"></snice-breadcrumbs>
+      </div>
+      <span class="demo-label">Using slots with max-items="2" and external icon images</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs max-items="2" separator="»">
+          <snice-crumb href="/" label="Root" icon-image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f46e5'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"></snice-crumb>
+          <snice-crumb href="/home" label="Home"></snice-crumb>
+          <snice-crumb href="/home/user" label="User"></snice-crumb>
+          <snice-crumb href="/home/user/docs" label="Documents" icon="📁"></snice-crumb>
+          <snice-crumb href="/home/user/docs/projects" label="Projects"></snice-crumb>
+          <snice-crumb label="Current File" icon="📄"></snice-crumb>
+        </snice-breadcrumbs>
+      </div>
+      <span class="demo-label">Max 2 items</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs id="collapsed-2-breadcrumb" max-items="2"></snice-breadcrumbs>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Interactive Demo</h2>
+      <div class="controls">
+        <select id="separator-select">
+          <option value="/">Slash (/)</option>
+          <option value=">">Chevron (>)</option>
+          <option value="»">Double Chevron (»)</option>
+          <option value="•">Dot (•)</option>
+          <option value="|">Pipe (|)</option>
+        </select>
+        <select id="size-select">
+          <option value="small">Small</option>
+          <option value="medium" selected>Medium</option>
+          <option value="large">Large</option>
+        </select>
+        <input type="number" id="max-items" placeholder="Max items" min="0" max="10" value="0">
+        <button onclick="addItem()">Add Item</button>
+        <button onclick="removeItem()">Remove Item</button>
+        <button onclick="updateBreadcrumb()">Update</button>
+      </div>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs id="interactive-breadcrumb"></snice-breadcrumbs>
+      </div>
+      <div class="event-log" id="event-log">
+        Event log will appear here...
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Real-world Examples</h2>
+      <span class="demo-label">E-commerce Category</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs id="ecommerce-breadcrumb"></snice-breadcrumbs>
+      </div>
+      <span class="demo-label">Documentation</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs id="docs-breadcrumb" separator="»"></snice-breadcrumbs>
+      </div>
+      <span class="demo-label">File System</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs id="filesystem-breadcrumb" max-items="4"></snice-breadcrumbs>
+      </div>
+      <span class="demo-label">Admin Dashboard</span>
+      <div class="breadcrumb-demo">
+        <snice-breadcrumbs id="admin-breadcrumb"></snice-breadcrumbs>
+      </div>
+    </div>
+  </div>
+  <script type="module">
+    import './snice-breadcrumbs.ts';
+    import './snice-crumb.ts';
+    // Basic breadcrumb
+    document.getElementById('basic-breadcrumb').items = [
+      { label: 'Home', href: '/' },
+      { label: 'Products', href: '/products' },
+      { label: 'Electronics', href: '/products/electronics' },
+      { label: 'Laptops', href: '/products/electronics/laptops' }
+    ];
+    // Active breadcrumb
+    document.getElementById('active-breadcrumb').items = [
+      { label: 'Home', href: '/' },
+      { label: 'Blog', href: '/blog' },
+      { label: 'Tech', href: '/blog/tech' },
+      { label: 'Latest Post', active: true }
+    ];
+    // Separator examples
+    const separatorItems = [
+      { label: 'Home', href: '/' },
+      { label: 'Category', href: '/category' },
+      { label: 'Subcategory', href: '/category/sub' },
+      { label: 'Item' }
+    ];
+    document.getElementById('slash-breadcrumb').items = separatorItems;
+    document.getElementById('chevron-breadcrumb').items = separatorItems;
+    document.getElementById('double-chevron-breadcrumb').items = separatorItems;
+    document.getElementById('dot-breadcrumb').items = separatorItems;
+    document.getElementById('pipe-breadcrumb').items = separatorItems;
+    // Size examples
+    const sizeItems = [
+      { label: 'Dashboard', href: '/' },
+      { label: 'Analytics', href: '/analytics' },
+      { label: 'Reports', href: '/analytics/reports' }
+    ];
+    document.getElementById('small-breadcrumb').items = sizeItems;
+    document.getElementById('medium-breadcrumb').items = sizeItems;
+    document.getElementById('large-breadcrumb').items = sizeItems;
+    // Collapsed examples
+    const longPath = [
+      { label: 'Home', href: '/' },
+      { label: 'Documents', href: '/docs' },
+      { label: 'Projects', href: '/docs/projects' },
+      { label: '2024', href: '/docs/projects/2024' },
+      { label: 'Q1', href: '/docs/projects/2024/q1' },
+      { label: 'Reports', href: '/docs/projects/2024/q1/reports' },
+      { label: 'Final Report' }
+    ];
+    document.getElementById('collapsed-breadcrumb').items = longPath;
+    document.getElementById('collapsed-2-breadcrumb').items = longPath;
+    // Interactive demo
+    let interactiveItems = [
+      { label: 'Home', href: '/' },
+      { label: 'Page 1', href: '/page1' },
+      { label: 'Page 2', href: '/page2' },
+      { label: 'Current Page' }
+    ];
+    const interactiveBreadcrumb = document.getElementById('interactive-breadcrumb');
+    interactiveBreadcrumb.items = interactiveItems;
+    window.addItem = function() {
+      const num = interactiveItems.length;
+      interactiveItems.splice(-1, 0, {
+        label: `Page ${num}`,
+        href: `/page${num}`
+      });
+      interactiveBreadcrumb.items = [...interactiveItems];
+    };
+    window.removeItem = function() {
+      if (interactiveItems.length > 2) {
+        interactiveItems.splice(-2, 1);
+        interactiveBreadcrumb.items = [...interactiveItems];
+      }
+    };
+    window.updateBreadcrumb = function() {
+      interactiveBreadcrumb.separator = document.getElementById('separator-select').value;
+      interactiveBreadcrumb.size = document.getElementById('size-select').value;
+      interactiveBreadcrumb.maxItems = parseInt(document.getElementById('max-items').value) || 0;
+    };
+    // Event logging
+    interactiveBreadcrumb.addEventListener('breadcrumb-click', (e) => {
+      const log = document.getElementById('event-log');
+      const time = new Date().toLocaleTimeString();
+      log.innerHTML = `[${time}] Clicked: "${e.detail.label}" (index: ${e.detail.index}, href: ${e.detail.href})<br>` + log.innerHTML;
+    });
+    // Real-world examples
+    document.getElementById('ecommerce-breadcrumb').items = [
+      { label: 'Store', href: '/', icon: '🏪' },
+      { label: 'Women', href: '/women' },
+      { label: 'Clothing', href: '/women/clothing' },
+      { label: 'Dresses', href: '/women/clothing/dresses' },
+      { label: 'Summer Collection' }
+    ];
+    document.getElementById('docs-breadcrumb').items = [
+      { label: 'Docs', href: '/docs' },
+      { label: 'Components', href: '/docs/components' },
+      { label: 'Navigation', href: '/docs/components/navigation' },
+      { label: 'Breadcrumb' }
+    ];
+    document.getElementById('filesystem-breadcrumb').items = [
+      { label: 'root', href: '/' },
+      { label: 'home', href: '/home' },
+      { label: 'user', href: '/home/user' },
+      { label: 'documents', href: '/home/user/documents' },
+      { label: 'projects', href: '/home/user/documents/projects' },
+      { label: 'snice', href: '/home/user/documents/projects/snice' },
+      { label: 'components', href: '/home/user/documents/projects/snice/components' },
+      { label: 'breadcrumb.ts' }
+    ];
+    document.getElementById('admin-breadcrumb').items = [
+      { label: 'Admin', href: '/admin' },
+      { label: 'Users', href: '/admin/users' },
+      { label: 'Roles', href: '/admin/users/roles' },
+      { label: 'Edit Role' }
+    ];
+  </script>
+</body>
+</html>

package/components/breadcrumbs/snice-breadcrumbs.css ADDED Viewed

@@ -0,0 +1,133 @@
+:host {
+  display: block;
+  --breadcrumb-font-size: 0.875rem; /* 14px */
+  --breadcrumb-spacing: 0.5rem; /* 8px */
+  --breadcrumb-color: rgb(var(--snice-color-gray-600, 82 82 82));
+  --breadcrumb-hover-color: rgb(var(--snice-color-blue-600, 37 99 235));
+  --breadcrumb-active-color: rgb(var(--snice-color-gray-900, 23 23 23));
+  --breadcrumb-separator-color: rgb(var(--snice-color-gray-400, 163 163 163));
+}
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--breadcrumb-font-size);
+  line-height: 1.5;
+}
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  color: var(--breadcrumb-color);
+}
+.breadcrumb-link {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  cursor: pointer;
+  outline: none;
+  border-radius: 2px;
+  padding: 0.125rem 0.25rem; /* 2px 4px */
+  margin: -0.125rem -0.25rem; /* -2px -4px */
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem; /* 6px */
+}
+.breadcrumb-link:hover {
+  color: var(--breadcrumb-hover-color);
+  text-decoration: underline;
+}
+.breadcrumb-link:focus-visible {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
+}
+.breadcrumb-text {
+  padding: 2px 4px;
+  margin: -2px -4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem; /* 6px */
+}
+.breadcrumb-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 1.1em;
+}
+.breadcrumb-icon-image {
+  width: 1.2em;
+  height: 1.2em;
+  object-fit: contain;
+  vertical-align: middle;
+}
+[hidden] {
+  display: none !important;
+}
+.breadcrumb-item--active {
+  color: var(--breadcrumb-active-color);
+  font-weight: 500;
+}
+.breadcrumb-item--active .breadcrumb-link {
+  cursor: default;
+  pointer-events: none;
+}
+.breadcrumb-separator {
+  margin: 0 var(--breadcrumb-spacing);
+  color: var(--breadcrumb-separator-color);
+  user-select: none;
+}
+.breadcrumb-ellipsis {
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  margin: -2px -4px;
+  cursor: pointer;
+  color: var(--breadcrumb-color);
+  border-radius: 2px;
+  transition: background 0.2s ease;
+}
+.breadcrumb-ellipsis:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.breadcrumb-ellipsis:focus-visible {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
+  outline: none;
+}
+/* Sizes */
+:host([size="small"]) {
+  --breadcrumb-font-size: 12px;
+  --breadcrumb-spacing: 6px;
+}
+:host([size="large"]) {
+  --breadcrumb-font-size: 16px;
+  --breadcrumb-spacing: 10px;
+}
+/* Collapsed state */
+.breadcrumb--collapsed .breadcrumb-item--hidden {
+  display: none;
+}
+/* Mobile responsive */
+@media (max-width: 640px) {
+  .breadcrumb {
+    font-size: calc(var(--breadcrumb-font-size) * 0.9);
+  }
+}