snice 3.1.0 → 3.2.0

package/docs/components/timeline.md

@@ -0,0 +1,192 @@
+# Timeline Component
+
+The `<snice-timeline>` component displays events in chronological order with markers, timestamps, and descriptions.
+
+## Basic Usage
+
+```html
+<snice-timeline id="timeline"></snice-timeline>
+
+<script>
+  const timeline = document.getElementById('timeline');
+  timeline.items = [
+    {
+      timestamp: '2024-01-15',
+      title: 'Event Title',
+      description: 'Event description'
+    }
+  ];
+</script>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Timeline orientation |
+| `position` | `'left' \| 'right' \| 'alternate'` | `'left'` | Item position (vertical only) |
+| `items` | `TimelineItem[]` | `[]` | Timeline items |
+| `reverse` | `boolean` | `false` | Reverse item order |
+
+## TimelineItem Interface
+
+```typescript
+interface TimelineItem {
+  timestamp?: string;
+  title: string;
+  description?: string;
+  icon?: string;
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+}
+```
+
+## Examples
+
+### Vertical Timeline
+
+```html
+<snice-timeline id="timeline"></snice-timeline>
+
+<script>
+  document.getElementById('timeline').items = [
+    {
+      timestamp: '2024-01-15 09:00',
+      title: 'Project Started',
+      description: 'Initial planning phase'
+    },
+    {
+      timestamp: '2024-01-20 14:30',
+      title: 'Design Complete',
+      description: 'Mockups approved'
+    }
+  ];
+</script>
+```
+
+### Horizontal Timeline
+
+```html
+<snice-timeline orientation="horizontal" id="horizontal-timeline"></snice-timeline>
+
+<script>
+  document.getElementById('horizontal-timeline').items = [
+    { title: 'Step 1', description: 'First step' },
+    { title: 'Step 2', description: 'Second step' },
+    { title: 'Step 3', description: 'Third step' }
+  ];
+</script>
+```
+
+### Alternate Position
+
+```html
+<snice-timeline position="alternate" id="alt-timeline"></snice-timeline>
+
+<script>
+  document.getElementById('alt-timeline').items = [
+    { title: 'Event 1', timestamp: 'Jan 2024' },
+    { title: 'Event 2', timestamp: 'Feb 2024' },
+    { title: 'Event 3', timestamp: 'Mar 2024' }
+  ];
+</script>
+```
+
+### With Variants
+
+```html
+<snice-timeline id="variant-timeline"></snice-timeline>
+
+<script>
+  document.getElementById('variant-timeline').items = [
+    {
+      title: 'Completed',
+      variant: 'success',
+      description: 'Task finished successfully'
+    },
+    {
+      title: 'Warning',
+      variant: 'warning',
+      description: 'Attention needed'
+    },
+    {
+      title: 'Error',
+      variant: 'error',
+      description: 'Action failed'
+    }
+  ];
+</script>
+```
+
+### Custom Icons
+
+```html
+<snice-timeline id="icon-timeline"></snice-timeline>
+
+<script>
+  document.getElementById('icon-timeline').items = [
+    { title: 'Planning', icon: '📋' },
+    { title: 'Development', icon: '💻' },
+    { title: 'Launch', icon: '🚀' }
+  ];
+</script>
+```
+
+### Reversed Order
+
+```html
+<snice-timeline reverse id="reversed-timeline"></snice-timeline>
+
+<script>
+  document.getElementById('reversed-timeline').items = [
+    { title: 'Latest Event', timestamp: '2024-03-01' },
+    { title: 'Earlier Event', timestamp: '2024-02-01' },
+    { title: 'First Event', timestamp: '2024-01-01' }
+  ];
+</script>
+```
+
+## Styling
+
+The component exposes several CSS parts for styling:
+
+```css
+snice-timeline::part(container) {
+  /* Timeline container */
+}
+
+snice-timeline::part(item) {
+  /* Timeline item */
+}
+
+snice-timeline::part(marker) {
+  /* Item marker/circle */
+}
+
+snice-timeline::part(icon) {
+  /* Marker icon */
+}
+
+snice-timeline::part(content) {
+  /* Item content area */
+}
+
+snice-timeline::part(timestamp) {
+  /* Timestamp text */
+}
+
+snice-timeline::part(title) {
+  /* Title text */
+}
+
+snice-timeline::part(description) {
+  /* Description text */
+}
+```
+
+## Notes
+
+- Items without timestamps will still render but won't display a timestamp
+- Items without descriptions will only show the title
+- Default icons are provided for each variant
+- Horizontal timelines work best with 3-5 items
+- Alternate positioning creates a zigzag layout

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snice",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
   "description": "Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.",
   "main": "dist/index.cjs",
@@ -106,6 +106,7 @@
     "@swc/core": "^1.13.5",
     "@types/node": "^20.0.0",
     "@vitest/ui": "^1.0.0",
+    "clean-css": "^5.3.3",
     "happy-dom": "^12.0.0",
     "rollup": "^4.50.2",
     "semantic-release": "^24.2.7",

package/dist/components/snice-cell-BLFVdxPp.js

@@ -1,4 +0,0 @@
-var cssContent = "/* Cell Base */\n:host {\n  display: flex;\n  align-items: center;\n  padding: 0 var(--snice-table-cell-padding, var(--snice-spacing-md, 0.75rem)); /* Default: 12px */\n  min-height: 2.5rem; /* 40px */\n  height: 2.5rem; /* 40px */\n  min-width: 6.25rem; /* 100px */\n  flex: 1;\n  font-size: 0.875rem; /* 14px */\n  line-height: 1.25rem; /* 20px */\n}\n\n.cell-content {\n  width: 100%;\n  min-width: 6.25rem; /* 100px */\n  min-height: 1.25rem; /* 20px */\n  word-wrap: break-word;\n}\n\n/* Text Alignment */\n:host([align=\"left\"]) {\n  text-align: left;\n}\n\n:host([align=\"center\"]) {\n  text-align: center;\n}\n\n:host([align=\"right\"]) {\n  text-align: right;\n}\n\n/* Type Specific Styles */\n:host([type=\"number\"]),\n:host([type=\"currency\"]),\n:host([type=\"percent\"]),\n:host([type=\"accounting\"]),\n:host([type=\"scientific\"]),\n:host([type=\"fraction\"]) {\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n\n:host([type=\"date\"]) {\n  font-variant-numeric: tabular-nums;\n}\n\n:host([type=\"boolean\"]) {\n  text-align: center;\n  font-size: 1rem; /* 16px */\n}\n\n:host([type=\"rating\"]) {\n  text-align: center;\n}\n\n:host([type=\"progress\"]) {\n  /* Remove padding */\n}\n\n:host([type=\"sparkline\"]) {\n  text-align: center;\n  /* Remove padding */\n}\n\n/* Text Content Specific */\n.cell-content--text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cell-content--text[data-multiline=\"true\"] {\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n/* Number Content Specific */\n.cell-content--number {\n  font-feature-settings: 'tnum';\n}\n\n/* Date Content Specific */\n.cell-content--date {\n  font-feature-settings: 'tnum';\n}\n\n/* Boolean Content Styling */\n:host([type=\"boolean\"]) .cell-content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Rating Content Styling */\n:host([type=\"rating\"]) .cell-content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem; /* 2px */\n}\n\n/* Progress Content Styling */\n.cell-content--progress {\n  width: 100%;\n  min-width: 4rem; /* 64px */\n}\n\n/* Sparkline Content Styling */\n.cell-content--sparkline {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 3rem; /* 48px */\n}\n\n/* Conditional Formatting Support */\n:host(.positive) {\n  color: var(--snice-color-success);\n}\n\n:host(.negative) {\n  color: var(--snice-color-danger);\n}\n\n:host(.warning) {\n  color: var(--snice-color-warning);\n  background-color: rgb(var(--snice-color-yellow-100));\n}\n\n:host(.danger) {\n  color: var(--snice-color-danger);\n  background-color: rgb(var(--snice-color-red-100));\n}\n\n:host(.success) {\n  color: var(--snice-color-success);\n  background-color: rgb(var(--snice-color-green-100));\n}\n\n:host(.info) {\n  color: var(--snice-color-primary);\n  background-color: rgb(var(--snice-color-blue-100));\n}\n\n/* Date-specific styling */\n:host(.date--today) {\n  font-weight: var(--snice-font-weight-semibold);\n  color: var(--snice-color-primary);\n}\n\n:host(.date--past) {\n  color: var(--snice-color-text-secondary);\n}\n\n:host(.date--future) {\n  color: var(--snice-color-success);\n}\n\n/* Number-specific styling */\n:host(.number--negative.number--negative-red) {\n  color: var(--snice-color-danger);\n}\n\n:host(.number--positive.number--highlighted) {\n  color: var(--snice-color-success);\n  font-weight: var(--snice-font-weight-semibold);\n}\n\n:host(.number--zero) {\n  color: var(--snice-color-text-secondary);\n}\n\n/* Truncation Support */\n:host([truncate]) .cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Wrap Support */\n:host([wrap]) .cell-content {\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n/* Empty State */\n:host([value=\"\"]) .cell-content,\n:host(:not([value])) .cell-content {\n  color: #6c757d;\n}\n\n/* Loading State */\n:host(.loading) {\n  position: relative;\n  overflow: hidden;\n}\n\n:host(.loading) .cell-content {\n  opacity: 0.6;\n}\n\n:host(.loading)::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);\n  animation: cell-shimmer 1.5s infinite;\n}\n\n@keyframes cell-shimmer {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Focus States */\n:host(:focus-within) {\n  outline: 2px solid #007bff;\n  outline-offset: -2px;\n}\n\n/* Interactive Elements */\n.cell-content button,\n.cell-content input,\n.cell-content select {\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.cell-content a {\n  color: #007bff;\n  text-decoration: none;\n}\n\n.cell-content a:hover {\n  text-decoration: underline;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  :host {\n    font-size: 0.75rem; /* 12px */\n    line-height: 1rem; /* 16px */\n  }\n  \n  :host([type=\"boolean\"]) {\n    font-size: 0.875rem; /* 14px */\n  }\n}\n\n/* Accessibility */\n@media (prefers-reduced-motion: reduce) {\n  :host(.loading)::after {\n    animation: none;\n  }\n}\n\n/* High Contrast Mode */\n@media (prefers-contrast: high) {\n  :host(.positive) {\n    background-color: #d4edda;\n  }\n  \n  :host(.negative) {\n    background-color: #f8d7da;\n  }\n  \n  .cell-content a {\n    text-decoration: underline;\n  }\n}\n\n/* Print Styles */\n@media print {\n  :host {\n    font-size: 0.75rem; /* 12px */\n  }\n  \n  :host(.loading)::after {\n    display: none;\n  }\n  \n  .cell-content a {\n    text-decoration: underline;\n  }\n}";
-
-export { cssContent as c };
-//# sourceMappingURL=snice-cell-BLFVdxPp.js.map

package/dist/components/snice-cell-BLFVdxPp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"snice-cell-BLFVdxPp.js","sources":["../../components/table/snice-cell.css?inline"],"sourcesContent":["export default \"/* Cell Base */\\n:host {\\n  display: flex;\\n  align-items: center;\\n  padding: 0 var(--snice-table-cell-padding, var(--snice-spacing-md, 0.75rem)); /* Default: 12px */\\n  min-height: 2.5rem; /* 40px */\\n  height: 2.5rem; /* 40px */\\n  min-width: 6.25rem; /* 100px */\\n  flex: 1;\\n  font-size: 0.875rem; /* 14px */\\n  line-height: 1.25rem; /* 20px */\\n}\\n\\n.cell-content {\\n  width: 100%;\\n  min-width: 6.25rem; /* 100px */\\n  min-height: 1.25rem; /* 20px */\\n  word-wrap: break-word;\\n}\\n\\n/* Text Alignment */\\n:host([align=\\\"left\\\"]) {\\n  text-align: left;\\n}\\n\\n:host([align=\\\"center\\\"]) {\\n  text-align: center;\\n}\\n\\n:host([align=\\\"right\\\"]) {\\n  text-align: right;\\n}\\n\\n/* Type Specific Styles */\\n:host([type=\\\"number\\\"]),\\n:host([type=\\\"currency\\\"]),\\n:host([type=\\\"percent\\\"]),\\n:host([type=\\\"accounting\\\"]),\\n:host([type=\\\"scientific\\\"]),\\n:host([type=\\\"fraction\\\"]) {\\n  font-variant-numeric: tabular-nums;\\n  text-align: right;\\n}\\n\\n:host([type=\\\"date\\\"]) {\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n:host([type=\\\"boolean\\\"]) {\\n  text-align: center;\\n  font-size: 1rem; /* 16px */\\n}\\n\\n:host([type=\\\"rating\\\"]) {\\n  text-align: center;\\n}\\n\\n:host([type=\\\"progress\\\"]) {\\n  /* Remove padding */\\n}\\n\\n:host([type=\\\"sparkline\\\"]) {\\n  text-align: center;\\n  /* Remove padding */\\n}\\n\\n/* Text Content Specific */\\n.cell-content--text {\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n\\n.cell-content--text[data-multiline=\\\"true\\\"] {\\n  white-space: pre-wrap;\\n  word-wrap: break-word;\\n  overflow-wrap: break-word;\\n}\\n\\n/* Number Content Specific */\\n.cell-content--number {\\n  font-feature-settings: 'tnum';\\n}\\n\\n/* Date Content Specific */\\n.cell-content--date {\\n  font-feature-settings: 'tnum';\\n}\\n\\n/* Boolean Content Styling */\\n:host([type=\\\"boolean\\\"]) .cell-content {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\\n/* Rating Content Styling */\\n:host([type=\\\"rating\\\"]) .cell-content {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  gap: 0.125rem; /* 2px */\\n}\\n\\n/* Progress Content Styling */\\n.cell-content--progress {\\n  width: 100%;\\n  min-width: 4rem; /* 64px */\\n}\\n\\n/* Sparkline Content Styling */\\n.cell-content--sparkline {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  min-width: 3rem; /* 48px */\\n}\\n\\n/* Conditional Formatting Support */\\n:host(.positive) {\\n  color: var(--snice-color-success);\\n}\\n\\n:host(.negative) {\\n  color: var(--snice-color-danger);\\n}\\n\\n:host(.warning) {\\n  color: var(--snice-color-warning);\\n  background-color: rgb(var(--snice-color-yellow-100));\\n}\\n\\n:host(.danger) {\\n  color: var(--snice-color-danger);\\n  background-color: rgb(var(--snice-color-red-100));\\n}\\n\\n:host(.success) {\\n  color: var(--snice-color-success);\\n  background-color: rgb(var(--snice-color-green-100));\\n}\\n\\n:host(.info) {\\n  color: var(--snice-color-primary);\\n  background-color: rgb(var(--snice-color-blue-100));\\n}\\n\\n/* Date-specific styling */\\n:host(.date--today) {\\n  font-weight: var(--snice-font-weight-semibold);\\n  color: var(--snice-color-primary);\\n}\\n\\n:host(.date--past) {\\n  color: var(--snice-color-text-secondary);\\n}\\n\\n:host(.date--future) {\\n  color: var(--snice-color-success);\\n}\\n\\n/* Number-specific styling */\\n:host(.number--negative.number--negative-red) {\\n  color: var(--snice-color-danger);\\n}\\n\\n:host(.number--positive.number--highlighted) {\\n  color: var(--snice-color-success);\\n  font-weight: var(--snice-font-weight-semibold);\\n}\\n\\n:host(.number--zero) {\\n  color: var(--snice-color-text-secondary);\\n}\\n\\n/* Truncation Support */\\n:host([truncate]) .cell-content {\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n\\n/* Wrap Support */\\n:host([wrap]) .cell-content {\\n  white-space: pre-wrap;\\n  word-wrap: break-word;\\n  overflow-wrap: break-word;\\n}\\n\\n/* Empty State */\\n:host([value=\\\"\\\"]) .cell-content,\\n:host(:not([value])) .cell-content {\\n  color: #6c757d;\\n}\\n\\n/* Loading State */\\n:host(.loading) {\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n:host(.loading) .cell-content {\\n  opacity: 0.6;\\n}\\n\\n:host(.loading)::after {\\n  content: '';\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  right: 0;\\n  bottom: 0;\\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);\\n  animation: cell-shimmer 1.5s infinite;\\n}\\n\\n@keyframes cell-shimmer {\\n  0% {\\n    transform: translateX(-100%);\\n  }\\n  100% {\\n    transform: translateX(100%);\\n  }\\n}\\n\\n/* Focus States */\\n:host(:focus-within) {\\n  outline: 2px solid #007bff;\\n  outline-offset: -2px;\\n}\\n\\n/* Interactive Elements */\\n.cell-content button,\\n.cell-content input,\\n.cell-content select {\\n  font-size: inherit;\\n  line-height: inherit;\\n}\\n\\n.cell-content a {\\n  color: #007bff;\\n  text-decoration: none;\\n}\\n\\n.cell-content a:hover {\\n  text-decoration: underline;\\n}\\n\\n/* Responsive Design */\\n@media (max-width: 768px) {\\n  :host {\\n    font-size: 0.75rem; /* 12px */\\n    line-height: 1rem; /* 16px */\\n  }\\n  \\n  :host([type=\\\"boolean\\\"]) {\\n    font-size: 0.875rem; /* 14px */\\n  }\\n}\\n\\n/* Accessibility */\\n@media (prefers-reduced-motion: reduce) {\\n  :host(.loading)::after {\\n    animation: none;\\n  }\\n}\\n\\n/* High Contrast Mode */\\n@media (prefers-contrast: high) {\\n  :host(.positive) {\\n    background-color: #d4edda;\\n  }\\n  \\n  :host(.negative) {\\n    background-color: #f8d7da;\\n  }\\n  \\n  .cell-content a {\\n    text-decoration: underline;\\n  }\\n}\\n\\n/* Print Styles */\\n@media print {\\n  :host {\\n    font-size: 0.75rem; /* 12px */\\n  }\\n  \\n  :host(.loading)::after {\\n    display: none;\\n  }\\n  \\n  .cell-content a {\\n    text-decoration: underline;\\n  }\\n}\";"],"names":[],"mappings":"AAAA,iBAAe,umLAAumL;;;;"}