snice 4.27.0 → 4.29.0

package/docs/ai/components/rating.md

@@ -1,55 +1,40 @@
 # snice-rating
 
-Star rating input with full/half precision, custom icons, and keyboard navigation.
+Interactive star rating input with full/half precision, custom icons, and keyboard navigation.
 
 ## Properties
 
-```ts
-value: number                            // Current rating value (default: 0)
-max: number                              // Maximum stars (default: 5)
-icon: string                             // Star character (default: '\u2605')
-size: 'small' | 'medium' | 'large'      // Display size (default: 'medium')
-readonly: boolean                        // Disable interaction (default: false)
-precision: 'full' | 'half'              // Click precision (default: 'full')
+```typescript
+value: number = 0;
+max: number = 5;
+icon: string = '★';
+size: 'small'|'medium'|'large' = 'medium';
+readonly: boolean = false;
+precision: 'full'|'half' = 'full';
 ```
 
 ## Events
 
-- `rating-change` → `{ value: number }` - Rating value changed
-
-## Keyboard
-
-- `ArrowRight` / `ArrowUp` - Increase value
-- `ArrowLeft` / `ArrowDown` - Decrease value
-- Step size: 1 (full) or 0.5 (half precision)
+- `rating-change` → `{ value: number }`
 
 ## CSS Custom Properties
 
-```css
---rating-color             /* Filled star color (default: --snice-color-warning) */
---rating-color-empty       /* Empty star color (default: --snice-color-border) */
---rating-size              /* Star size: small=1rem, medium=1.5rem, large=2rem */
---snice-font-family
---snice-transition-fast
---snice-focus-ring-width
---snice-focus-ring-color
---snice-focus-ring-offset
-```
+- `--rating-color` - Filled star color (`var(--snice-color-warning)`)
+- `--rating-color-empty` - Empty star color (`var(--snice-color-border)`)
+- `--rating-size` - Star size (auto-set by `size`: small=1rem, medium=1.5rem, large=2rem)
+
+## CSS Parts
 
-**CSS Parts:**
 - `base` - Outer rating container
 - `star` - Individual star/icon element
 
-## Accessibility
-
-Uses `role="radiogroup"` with individual `role="radio"` stars. Keyboard accessible when not readonly.
-
-## Usage
+## Basic Usage
 
 ```html
-<snice-rating value="3.5" max="5" precision="half" size="large"></snice-rating>
+<snice-rating value="3.5" precision="half" max="5"></snice-rating>
 <snice-rating value="4" readonly></snice-rating>
-<snice-rating icon="&#x2764;" max="10"></snice-rating>
+<snice-rating icon="❤" value="3" max="5"></snice-rating>
+<snice-rating value="4" size="large"></snice-rating>
 ```
 
 ```typescript
@@ -57,3 +42,14 @@ rating.addEventListener('rating-change', (e) => {
   console.log('New rating:', e.detail.value);
 });
 ```
+
+## Keyboard Navigation
+
+- ArrowRight/Up: increase by step (1 or 0.5)
+- ArrowLeft/Down: decrease by step
+
+## Accessibility
+
+- `role="radiogroup"` with `role="radio"` per star
+- Not focusable when readonly
+- Focus ring on keyboard navigation

package/docs/ai/components/receipt.md

@@ -5,36 +5,33 @@ Transaction receipt display with items, totals, payment info, and multiple visua
 ## Properties
 
 ```typescript
-receiptNumber: string = ''                  // attribute: receipt-number
-date: string = ''                           // Transaction date
-currency: string = 'USD'                    // ISO 4217 currency code
-locale: string = ''                         // Intl.NumberFormat locale
-merchant: ReceiptMerchant = { name: '' }    // Merchant info (JS only)
-items: ReceiptItem[] = []                   // Line items (JS only)
-tax: number = 0                             // Single tax amount (absolute)
-taxes: ReceiptTaxLine[] = []                // Multiple tax lines (JS only)
-subtotal: number = 0                        // Auto-computed from items if 0
-total: number = 0                           // Auto-computed as subtotal + tax - discount + tip if 0
-tip: number = 0                             // Tip/gratuity amount
-discount: number = 0                        // Discount amount
-discountLabel: string = 'Discount'          // attribute: discount-label
-paymentMethod: string = ''                  // attribute: payment-method
-paymentDetails: string = ''                 // attribute: payment-details
-variant: ReceiptVariant = 'standard'        // 'standard'|'thermal'|'modern'|'minimal'|'detailed'
-showQr: boolean = false                     // attribute: show-qr — show QR slot
-qrData: string = ''                         // attribute: qr-data
-qrPosition: QrPosition = 'bottom'           // attribute: qr-position — 'top'|'bottom'|'footer'
-thankYou: string = 'Thank you...'           // attribute: thank-you
-cashier: string = ''                        // Cashier name
-terminalId: string = ''                     // attribute: terminal-id
+receiptNumber: string = '';                  // attr: receipt-number
+date: string = '';
+currency: string = 'USD';
+locale: string = '';                         // Intl.NumberFormat locale
+merchant: ReceiptMerchant = { name: '' };    // JS only
+items: ReceiptItem[] = [];                   // JS only
+tax: number = 0;
+taxes: ReceiptTaxLine[] = [];                // JS only, overrides tax
+subtotal: number = 0;                        // auto-computed from items if 0
+total: number = 0;                           // auto-computed if 0
+tip: number = 0;
+discount: number = 0;
+discountLabel: string = 'Discount';          // attr: discount-label
+paymentMethod: string = '';                  // attr: payment-method
+paymentDetails: string = '';                 // attr: payment-details
+variant: 'standard'|'thermal'|'modern'|'minimal'|'detailed' = 'standard';
+showQr: boolean = false;                     // attr: show-qr
+qrData: string = '';                         // attr: qr-data
+qrPosition: 'top'|'bottom'|'footer' = 'bottom'; // attr: qr-position
+thankYou: string = 'Thank you for your purchase!'; // attr: thank-you
+cashier: string = '';
+terminalId: string = '';                     // attr: terminal-id
 ```
 
 ## Types
 
 ```typescript
-type ReceiptVariant = 'standard' | 'thermal' | 'modern' | 'minimal' | 'detailed';
-type QrPosition = 'top' | 'bottom' | 'footer';
-
 interface ReceiptMerchant {
   name: string; address?: string; logo?: string;
   phone?: string; email?: string; website?: string; taxId?: string;
@@ -43,101 +40,31 @@ interface ReceiptItem {
   name: string; quantity: number; price: number;
   sku?: string; discount?: number; note?: string;
 }
-interface ReceiptTaxLine {
-  label: string; rate?: number; amount: number;
-}
+interface ReceiptTaxLine { label: string; rate?: number; amount: number; }
 ```
 
+## Methods
+
+- `print()` - Opens print dialog
+
 ## Slots
 
 - `(default)` - Footer content below thank-you message
 - `qr` - QR code content (shown when `show-qr` is set)
 - `barcode` - Barcode content
 
-## Methods
-
-- `print()` - Opens print dialog
-
 ## CSS Parts
 
-```
-::part(base)              /* Main container */
-::part(header)            /* Merchant section */
-::part(logo)              /* Merchant logo */
-::part(merchant-name)     /* Merchant name */
-::part(merchant-address)  /* Merchant address */
-::part(merchant-contact)  /* Phone/email/website line */
-::part(meta)              /* Receipt # / date / cashier / terminal */
-::part(receipt-number)    /* Receipt number value */
-::part(date)              /* Date value */
-::part(items-header)      /* Column header row */
-::part(items)             /* Items list */
-::part(item)              /* Individual item row */
-::part(item-name)         /* Item name */
-::part(item-qty)          /* Item quantity */
-::part(item-price)        /* Item price */
-::part(item-sku)          /* Item SKU (detailed variant) */
-::part(totals)            /* Totals section */
-::part(subtotal-row)      /* Subtotal line */
-::part(tax-row)           /* Tax line(s) */
-::part(discount-row)      /* Discount line */
-::part(tip-row)           /* Tip line */
-::part(total-row)         /* Grand total line */
-::part(payment)           /* Payment section */
-::part(payment-method)    /* Payment method text */
-::part(payment-details)   /* Auth code / change etc */
-::part(footer)            /* Footer section */
-::part(thank-you)         /* Thank-you message */
-::part(qr-container)      /* QR code wrapper */
-::part(barcode-area)      /* Barcode wrapper */
-::part(divider)           /* Section dividers */
-```
+- `base` - Root container
+- `divider` - Section dividers
+- `header`, `logo`, `merchant-name`, `merchant-address`, `merchant-contact` - Merchant section
+- `meta`, `receipt-number`, `date` - Metadata section
+- `items-header`, `items`, `item`, `item-name`, `item-sku`, `item-qty`, `item-price` - Items section
+- `totals`, `subtotal-row`, `discount-row`, `tax-row`, `tip-row`, `total-row` - Totals section
+- `payment`, `payment-method`, `payment-details` - Payment section
+- `qr-container`, `barcode-area`, `footer`, `thank-you` - Footer section
 
-## CSS Custom Properties
-
-```css
---receipt-max-width          /* 22rem */
---receipt-padding            /* 1.5rem */
---receipt-bg                 /* background */
---receipt-text               /* text color */
---receipt-text-secondary     /* secondary text */
---receipt-text-tertiary      /* tertiary text */
---receipt-border             /* border color */
---receipt-bg-element         /* element background */
---receipt-header-bg          /* header background */
---receipt-accent             /* accent color (modern) */
---receipt-font-family        /* font override */
---receipt-merchant-font-size /* 1.25rem */
---receipt-item-font-size     /* 0.9375rem */
---receipt-meta-font-size     /* 0.8125rem */
---receipt-total-font-size    /* 1.125rem */
---receipt-total-font-weight  /* 700 */
---receipt-footer-font-size   /* 0.8125rem */
---receipt-divider-style      /* dashed */
---receipt-divider-color      /* border color */
---receipt-divider-width      /* 1px */
---receipt-border-radius      /* 8px */
---receipt-border-color       /* border */
---receipt-shadow             /* none */
---receipt-thermal-font       /* Courier New, monospace */
---receipt-thermal-width      /* 18rem */
---receipt-thermal-bg         /* rgb(255 255 248) */
---receipt-modern-radius      /* 12px */
---receipt-modern-shadow      /* 0 4px 24px ... */
---receipt-modern-section-bg  /* element bg */
---receipt-modern-section-radius /* 8px */
---receipt-qr-size            /* 6rem */
-```
-
-## Variants
-
-- `standard` — Clean receipt with merchant header, items, totals, dashed dividers
-- `thermal` — Monospace, narrow-width, dotted separators, thermal printer aesthetic
-- `modern` — Card-based, rounded sections, shadows, accent-colored total
-- `minimal` — Stripped to essentials, no logo/address, uppercase merchant, thin dividers
-- `detailed` — Wide, grid meta, SKU/notes/per-item discounts, thick borders
-
-## Usage
+## Basic Usage
 
 ```html
 <snice-receipt
@@ -146,14 +73,6 @@ interface ReceiptTaxLine {
   payment-method="Visa **** 4242"
   variant="standard">
 </snice-receipt>
-
-<!-- Thermal -->
-<snice-receipt variant="thermal"></snice-receipt>
-
-<!-- Modern with QR -->
-<snice-receipt variant="modern" show-qr qr-position="bottom">
-  <snice-qr-code slot="qr" value="https://receipt.example.com/4521"></snice-qr-code>
-</snice-receipt>
 ```
 
 ```typescript
@@ -165,21 +84,25 @@ receipt.items = [
 receipt.tax = 1.15;
 receipt.tip = 2.00;
 
-// Detailed with tax breakdown
-receipt.variant = 'detailed';
+// Multiple taxes
 receipt.taxes = [
   { label: 'State Tax', rate: 6, amount: 3.00 },
   { label: 'City Tax', rate: 2, amount: 1.00 }
 ];
-receipt.items = [{ name: 'Widget', quantity: 1, price: 50, sku: 'WDG-001', note: 'Gift wrapped' }];
 ```
 
+## Variants
+
+- `standard` - Clean receipt with dashed dividers
+- `thermal` - Monospace, narrow-width, thermal printer aesthetic
+- `modern` - Card-based, rounded sections, shadows
+- `minimal` - Stripped to essentials
+- `detailed` - Wide, grid meta, SKU/notes/per-item discounts
+
 ## Notes
 
-- Subtotal auto-computed from items (with per-item discount subtracted) if not explicitly set
-- Total auto-computed as subtotal + tax - discount + tip if not explicitly set
-- `taxes` array takes precedence over single `tax` property
-- Quantity badge hidden when quantity is 1
-- SKU, notes, per-item discounts only visible in `detailed` variant
-- Thermal variant prints narrow; modern removes shadows for print
-- `@media print` styles included for all variants
+- Subtotal auto-computed from items if not set
+- Total auto-computed as subtotal + tax - discount + tip if not set
+- `taxes` array overrides single `tax` property
+- SKU, notes, per-item discounts only in `detailed` variant
+- Print styles included for all variants

package/docs/ai/components/recipe.md

@@ -4,67 +4,63 @@ Interactive recipe card with ingredient scaling, step-by-step mode, per-step tim
 
 ## Properties
 
-```ts
-title: string                            // Recipe title
-description: string                      // Short description
-image: string                            // Hero image URL
-author: string                           // Author name
-prepTime: number                         // Prep time in minutes (attr: prep-time)
-cookTime: number                         // Cook time in minutes (attr: cook-time)
-servings: number                         // Base serving count (default: 4)
-difficulty: 'easy' | 'medium' | 'hard'  // Difficulty level (default: 'medium')
-cuisine: string                          // Cuisine type (shown as tag)
-variant: 'card' | 'full'                // Display variant (default: 'full')
-ingredients: RecipeIngredient[]          // Ingredient list
-steps: RecipeStep[]                      // Instruction steps
-nutrition: RecipeNutrition | null        // Nutrition facts per serving
-tags: string[]                           // Recipe tags
+```typescript
+title: string = '';
+description: string = '';
+image: string = '';                          // Hero image URL
+author: string = '';
+prepTime: number = 0;                       // attr: prep-time, minutes
+cookTime: number = 0;                       // attr: cook-time, minutes
+servings: number = 4;
+difficulty: 'easy'|'medium'|'hard' = 'medium';
+cuisine: string = '';                        // Shown as tag
+variant: 'card'|'full' = 'full';
+ingredients: RecipeIngredient[] = [];        // JS only
+steps: RecipeStep[] = [];                    // JS only
+nutrition: RecipeNutrition | null = null;    // JS only
+tags: string[] = [];                         // JS only
 ```
 
-### Types
+## Types
 
-```ts
+```typescript
 interface RecipeIngredient {
-  name: string;
-  amount: number;
-  unit: string;
-  group?: string;                        // Group header for ingredient sections
+  name: string; amount: number; unit: string; group?: string;
 }
-
 interface RecipeStep {
-  text: string;
-  image?: string;                        // Step photo URL
-  tip?: string;                          // Pro tip text
-  time?: number;                         // Timer duration in minutes
+  text: string; image?: string; tip?: string; time?: number; // minutes
 }
-
 interface RecipeNutrition {
-  calories: number;
-  protein: number;
-  carbs: number;
-  fat: number;
-  fiber?: number;
-  sodium?: number;                       // in mg
+  calories: number; protein: number; carbs: number; fat: number;
+  fiber?: number; sodium?: number;
 }
 ```
 
 ## Methods
 
-- `setServings(count: number)` -- Adjust serving count (scales ingredients)
-- `print()` -- Print the recipe
-- `reset()` -- Reset checked ingredients, completed steps, timers, and servings
+- `setServings(count)` - Adjust serving count (scales ingredients)
+- `print()` - Print the recipe
+- `reset()` - Reset checked ingredients, completed steps, timers, servings
 
 ## Events
 
-- `recipe-serving-change` -> `{ servings: number; previousServings: number }` -- Serving count changed
-- `recipe-step-complete` -> `{ stepIndex: number; completed: boolean }` -- Step toggled
-- `recipe-ingredient-check` -> `{ ingredientIndex: number; checked: boolean; ingredient: RecipeIngredient }` -- Ingredient checked/unchecked
+- `recipe-serving-change` → `{ servings: number, previousServings: number }`
+- `recipe-step-complete` → `{ stepIndex: number, completed: boolean }`
+- `recipe-ingredient-check` → `{ ingredientIndex: number, checked: boolean, ingredient: RecipeIngredient }`
 
 ## CSS Parts
 
-`container`, `hero`, `header`, `meta`, `content`, `ingredients`, `steps`, `nutrition`, `controls`
+- `container` - Outer recipe container
+- `hero` - Hero image area
+- `header` - Title/description/author
+- `meta` - Metadata bar (times, servings, difficulty)
+- `content` - Main content (ingredients + steps)
+- `ingredients` - Ingredients section
+- `steps` - Instructions section
+- `nutrition` - Nutrition facts panel
+- `controls` - Bottom control buttons
 
-## Usage
+## Basic Usage
 
 ```typescript
 recipe.title = 'Pasta Carbonara';
@@ -81,9 +77,15 @@ recipe.ingredients = [
 ];
 recipe.steps = [
   { text: 'Boil pasta in salted water.', time: 10 },
-  { text: 'Fry pancetta until crispy.', tip: 'Use medium heat to render fat slowly.' },
+  { text: 'Fry pancetta until crispy.', tip: 'Use medium heat.' },
   { text: 'Mix eggs and parmesan.' },
   { text: 'Combine all ingredients off heat.' }
 ];
 recipe.nutrition = { calories: 650, protein: 28, carbs: 72, fat: 24 };
 ```
+
+## Accessibility
+
+- Keyboard accessible checkboxes, step toggles, and timer buttons
+- Serving adjuster buttons have aria-labels
+- Print-friendly layout via `print()`

package/docs/ai/components/sankey.md

@@ -5,36 +5,39 @@ SVG-based Sankey diagram for flow visualization between categories.
 ## Properties
 
 ```typescript
-data: SankeyData = { nodes: [], links: [] };
-nodeWidth: number = 20;
-nodePadding: number = 10;
+data: SankeyData = { nodes: [], links: [] }; // JS only
+nodeWidth: number = 20;              // attr: node-width
+nodePadding: number = 10;            // attr: node-padding
 alignment: 'left'|'right'|'center'|'justify' = 'justify';
-showLabels: boolean = true;
-showValues: boolean = true;
+showLabels: boolean = true;          // attr: show-labels
+showValues: boolean = true;          // attr: show-values
 animation: boolean = false;
 ```
 
 ## Types
 
 ```typescript
-interface SankeyData {
-  nodes: SankeyNode[];
-  links: SankeyLink[];
-}
+interface SankeyData { nodes: SankeyNode[]; links: SankeyLink[]; }
 interface SankeyNode { id: string; label?: string; color?: string; }
 interface SankeyLink { source: string; target: string; value: number; color?: string; }
 ```
 
 ## Events
 
-- `sankey-node-click` → `{ node: SankeyNode }` — node clicked
-- `sankey-link-click` → `{ link: SankeyLink }` — link clicked
-- `sankey-hover` → `{ type: 'node'|'link', item: SankeyNode|SankeyLink } | null` — hover change
+- `sankey-node-click` → `{ node: SankeyNode }`
+- `sankey-link-click` → `{ link: SankeyLink }`
+- `sankey-hover` → `{ type: 'node'|'link', item } | null`
 
-## Usage
+## CSS Parts
+
+- `base` - Outer container
+- `chart` - SVG chart area
+- `tooltip` - Hover tooltip
+
+## Basic Usage
 
 ```html
-<snice-sankey show-labels show-values animation></snice-sankey>
+<snice-sankey show-labels show-values animation style="height: 300px;"></snice-sankey>
 ```
 
 ```typescript
@@ -49,20 +52,8 @@ sankey.data = {
 };
 ```
 
-**CSS Parts:**
-- `base` - The outer Sankey container
-- `chart` - The SVG chart area
-- `tooltip` - The hover tooltip element
-
-## Features
+## Accessibility
 
-- SVG rendering with curved bezier link paths
-- Sankey layout algorithm with iterative node relaxation
-- Link width proportional to flow value
-- Hover highlighting (dims non-connected nodes/links)
-- Tooltips on hover for nodes and links
-- Responsive sizing via ResizeObserver
-- Animation on initial render
-- 4 alignment modes
-- Custom node/link colors
-- Accessible: role="img" with aria-label
+- SVG `role="img"` with `aria-label`
+- Hover highlighting dims non-connected elements
+- Responsive via ResizeObserver

package/docs/ai/components/scheduler.md

@@ -5,33 +5,25 @@ Multi-resource week/day/month scheduler with drag-to-create, move, and resize ev
 ## Properties
 
 ```typescript
-resources: SchedulerResource[] = []      // Resource list (JS only)
-events: SchedulerEvent[] = []            // Event list (JS only)
-view: SchedulerView = 'week'             // 'day' | 'week' | 'month'
-date: Date | string = new Date()         // Current date
-granularity: number = 60                 // Slot size in minutes (15, 30, 60)
-startHour: number = 0                    // attribute: start-hour
-endHour: number = 24                     // attribute: end-hour
+resources: SchedulerResource[] = [];    // JS only
+events: SchedulerEvent[] = [];          // JS only
+view: 'day'|'week'|'month' = 'week';
+date: Date | string = new Date();
+granularity: number = 60;               // Slot size in minutes (15, 30, 60)
+startHour: number = 0;                  // attr: start-hour
+endHour: number = 24;                   // attr: end-hour
 ```
 
 ## Types
 
 ```typescript
 interface SchedulerResource {
-  id: string | number;
-  name: string;
-  avatar?: string;    // Avatar image URL
-  color?: string;     // Accent color
+  id: string | number; name: string; avatar?: string; color?: string;
 }
-
 interface SchedulerEvent {
-  id: string | number;
-  resourceId: string | number;
-  start: Date | string;
-  end: Date | string;
-  title: string;
-  color?: string;
-  data?: any;
+  id: string | number; resourceId: string | number;
+  start: Date | string; end: Date | string;
+  title: string; color?: string; data?: any;
 }
 ```
 
@@ -41,23 +33,23 @@ interface SchedulerEvent {
 - `removeEvent(id: string | number)` - Remove event by ID
 - `scrollToDate(date: Date | string)` - Navigate to date
 - `scrollToResource(id: string | number)` - Scroll resource into view
-- `navigatePrev()` - Go to previous period
-- `navigateNext()` - Go to next period
-- `navigateToday()` - Go to today
 
 ## Events
 
-- `event-create` → `{ event: SchedulerEvent }` - Drag-created event
-- `event-move` → `{ event: SchedulerEvent; oldResourceId: string | number; oldStart: Date | string; oldEnd: Date | string }`
-- `event-resize` → `{ event: SchedulerEvent; oldStart: Date | string; oldEnd: Date | string }`
+- `event-create` → `{ event: SchedulerEvent }`
+- `event-move` → `{ event, oldResourceId, oldStart, oldEnd }`
+- `event-resize` → `{ event, oldStart, oldEnd }`
 - `event-click` → `{ event: SchedulerEvent }`
-- `slot-click` → `{ resourceId: string | number; start: Date; end: Date }`
+- `slot-click` → `{ resourceId, start: Date, end: Date }`
 
-## Slots
+## CSS Parts
 
-None
+- `base` - Main container
+- `header` - Navigation header with view toggle
+- `resources` - Resource sidebar
+- `grid` - Time grid area
 
-## Usage
+## Basic Usage
 
 ```html
 <snice-scheduler start-hour="8" end-hour="18" granularity="30"></snice-scheduler>
@@ -66,23 +58,19 @@ None
 ```typescript
 scheduler.resources = [
   { id: '1', name: 'Dr. Smith', color: '#2196f3' },
-  { id: '2', name: 'Room A', color: '#ff9800' },
+  { id: '2', name: 'Room A', color: '#ff9800' }
 ];
 scheduler.events = [
-  { id: '1', resourceId: '1', start: new Date(2025,5,15,9,0), end: new Date(2025,5,15,10,30), title: 'Consultation' },
+  { id: '1', resourceId: '1', start: new Date(2025,5,15,9,0), end: new Date(2025,5,15,10,30), title: 'Consultation' }
 ];
 
-scheduler.addEventListener('event-click', e => console.log(e.detail.event));
-scheduler.addEventListener('slot-click', e => console.log(e.detail.resourceId, e.detail.start));
+scheduler.addEventListener('slot-click', e => {
+  scheduler.addEvent({ id: Date.now(), resourceId: e.detail.resourceId, start: e.detail.start, end: e.detail.end, title: 'New' });
+});
 ```
 
-## Features
+## Accessibility
 
-- Day/week/month view toggle
-- Resource sidebar with avatars and colors
-- Drag to move events between resources
-- Resize events via edge handles
-- Click empty slots to trigger slot-click
-- Drag on grid to create events
+- Keyboard navigation with arrow keys
+- ARIA labels on resources and time slots
 - Current time indicator
-- Today/prev/next navigation